前端---CSS(部分用法)

news/2024/12/1 14:29:06/

HTML画页面--》这个页面就是页面上需要的元素罗列起来,但是页面效果很差,不好看,为了让页面好看,为了修饰页面---》CSS
CSS的作用:修饰HTML页面
用了CSS之后,样式和元素本身做到了分离的效果。---》降低了代码的耦合性

【2】HTML和CSS的关系?
先有HTML,先有页面,修饰页面--》CSS

【3】CSS名字:
CSS:cascading style sheets (层叠样式表)

层叠:样式的叠加
样式表:各种各样样式的集合

【1】内联样式:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--书写方式:内联样式(行内样式)在标签中加入一个style属性,CSS的样式作为属性值多个属性值之间用;进行拼接--><h1 style="color: deeppink;font-family: '宋体';">这是一个h1标题</h1></body>
</html>

【2】内部样式:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--书写方式:内部样式:head标签中加入一个style标签,在里面定位到你需要修饰的元素,然后在{}中加入你要修饰的样式。--><style type="text/css">h1{color: royalblue;font-family: 宋体;}</style></head><body><h1>这是一个标题</h1></body>
</html>

【3】外部样式:
首先要创建一个css文件,css文件的后缀.css

h1{color: red;font-family: 宋体;
}

再创建html页面:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--引入外部CSS资源:link--><link rel="stylesheet" type="text/css" href="css/mystyle.css"/></head><body><h1>这是一个标题</h1></body>
</html>

【4】实际开发中三种书写方式用的最多的是:
第三种:外部样式:因为这种方式真正做到了  元素页面和样式 分离

【5】三种书写方式优先级:
就近原则

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--引入外部CSS资源:link--><style type="text/css">h1{color: yellow;}</style><link rel="stylesheet" type="text/css" href="css/mystyle.css"/></head><body><h1 style="color: red;">这是一个标题</h1></body>
</html>

 选择器:

基本选择器:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*【1】基本选择器:元素选择器:通过元素的名字进行定位,它会获取页面上所有这个元素,无论藏的多深都可以获取到格式:元素名字{css样式;}* */h1{color: red;}i{color: blue;}/*【2】基本选择器:类选择器应用场合:不同类型的标签使用相同的类型格式:.class的名字{css样式;}*/.mycls{color: green;}/*【3】基本选择器:id选择器:应用场合:可以定位唯一的一个元素不同的标签确实可以使用相同的id,但是一般我们会进行人为的控制,让id是可以唯一定位到一个元素。格式:#id名字{css样式;}*/#myid{color: yellow;}</style></head><body><h1>我是<i>一个</i>标题</h1><h1>我是一个标题</h1><h1 class="mycls">我是一个标题</h1><h1>我是一个标题</h1><h2 class="mycls">我是h2标题</h2><h2>我是h2标题</h2><h2 id="myid">我是h2标题</h2></body>
</html>

优先级别:
id选择器>class选择器>元素选择器:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.mycls{color: red;}/*#myid{color: yellow;}*/h1{color: greenyellow;}</style></head><body><h1 class="mycls" id="myid">我是标题</h1></body>
</html>

关系选择器:

div 和 span

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*我们可以通俗的理解,把div理解为一个“塑料袋”div属于块级元素--》换行span属于行内元素--》没有换行效果span:里面的内容占多大,span包裹的区域就多大*/div{border: 1px red solid;}span{border: 1px greenyellow solid;}</style></head><body><div>马士兵马士兵<br />马士兵马士兵</div><div>马士兵</div><span>马士兵马士兵</span><span>马士兵</span><span>马士兵</span></body>
</html>

div和span 结合css用于页面的布局。div+css 用于页面布局。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*关系选择器:* 后代选择器:只要是这个元素的后代,样式都会发生变化* div下面的所有h1标签样式都会改变*//*div h1{color: red;}*//*关系选择器:子代选择器只改变子标签的样式*/div>h1{color: royalblue;}span>h1{color: yellow;}</style></head><body><div><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><span><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1></span></div></body>
</html>

属性选择器:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*属性选择器*/input[type="password"]{background-color: red;}input[type="text"][value="zhaoss1"]{background-color: yellow;}</style></head><body><form>用户名:<input type="text" value="zhaoss1" />用户名2:<input type="text" value="zhaoss2" />密码:<input type="password" value="123123" /><input type="submit" value="登录" /></form></body>
</html>

伪类选择器 向某些选择器添加特殊效果。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.mycls:hover{color: red;}</style></head><body><h1 class="mycls">我是标题</h1></body>
</html>

一般伪类选择器都用在超链接上:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*设置静止状态*/a:link{color: yellow;}/*设置鼠标悬浮状态*/a:hover{color: red;}/*设置触发状态*/a:active{color: blue;}/*设置完成状态*/a:visited{color: green;}</style></head><body><a href="index.html">超链接</a></body>
</html>

总结:

本篇文章通过简单的例子说明了HTML和CSS的基础知识,介绍了如何通过不同方式书写CSS,以及如何使用各种CSS选择器和优先级管理样式,帮助理解如何将HTML与CSS结合,使得网页美观且结构清晰。但CSS有很多技术如浮动,定位,盒子模型等等,有兴趣可以去了解一下。


http://www.ppmy.cn/news/1551503.html

相关文章

使用Github Action将Docker镜像转存到阿里云私有仓库,供国内服务器使用,免费易用

文章目录 一、前言二、 工具准备&#xff1a;三、最终效果示例四、具体步骤第一大部分是配置阿里云1. 首先登录阿里云容器镜像服务 [服务地址](https://cr.console.aliyun.com/cn-hangzhou/instances)2. 选择个人版本3. 创建 命名空间4. 进入访问凭证来查看&#xff0c;用户名字…

pip 安装指定镜像源

pip 安装指定镜像源 使用 pip 安装时&#xff0c;可以通过指定镜像源来加速安装速度&#xff0c;尤其在网络状况不佳或需要访问国内镜像源的情况下。 常见的国内镜像源 清华大学: https://pypi.tuna.tsinghua.edu.cn/simple 阿里云: https://mirrors.aliyun.com/pypi/simple …

Monitor 显示器软件开发设计入门二

基础篇--显示驱动方案输出接口介绍 写在前面&#xff1a;首先申明&#xff0c;这篇文章是写给那些初入显示器软件行业的入门者&#xff0c;或是对显示器没有基本知识的小白人员。如您是行业大咖大神&#xff0c;可以绕行&#xff0c;可看后期进阶文章。 上篇介绍了输入接口及相…

AI重塑电商未来:从购物推荐到供应链优化的全面解读

目录 引言 第一部分&#xff1a;AI技术在电商中的创新应用 1.1 智能购物推荐&#xff1a;从千人千面到实时个性化 实现方法&#xff1a; 案例分析&#xff1a; 1.2 会员分类与客户细分&#xff1a;从标签化到情感理解 实现方法&#xff1a; 案例分析&#xff1a; 1.3 …

vue实现excel导出导入

文章目录 安装xlsx依赖和file-saver依赖Excel导出使用element-ui的el-table展示数据定义导出按钮将数据导出 excel导入定义文件导入显示框定义导入按钮解析选择的文件进行导入 安装xlsx依赖和file-saver依赖 npm install xlsx -S npm install file-saver -SExcel导出 使用ele…

【C#设计模式(15)——命令模式(Command Pattern)】

前言 命令模式的关键通过将请求封装成一个对象&#xff0c;使命令的发送者和接收者解耦。这种方式能更方便地添加新的命令&#xff0c;如执行命令的排队、延迟、撤销和重做等操作。 代码 #region 基础的命令模式 //命令&#xff08;抽象类&#xff09; public abstract class …

Redis开发02:redis.windows-service.conf 默认配置文件解析与注解

文件位置&#xff1a;redis安装目录下的 redis.windows-service.conf &#xff0c;存放了redis服务的相关配置&#xff0c;下面列举出默认配置的含义&#xff1a; 配置项含义bind 127.0.0.1限制 Redis 只监听本地回环地址&#xff0c;意味着只能从本地连接 Redis。protected-m…

Flink的双流join理解

如何保证Flink双流Join准确性和及时性、除了窗口join还存在哪些实现方式、究竟如何回答才能完全打动面试官呢。。你将在文中找到答案。 1 引子 1.1 数据库SQL中的JOIN 我们先来看看数据库SQL中的JOIN操作。如下所示的订单查询SQL&#xff0c;通过将订单表的id和订单详情表ord…