前端_css一、css概述二、CSS引入规则网页由结构层（HTML）、表现层（CSS）、行为层（JavaScript）构成一、css概述CSS（Cascading Style Sheets）层叠样式表是一种用来表示HTML等文件样式的计算机语言。CSS不仅可以静态的修饰网页，还可以搭配各种脚本语言动态的对网页各元素进行格式化二、CSS引入规则...
前端_css
网页由结构层（HTML）、表现层（CSS）、行为层（JavaScript）构成
一、css概述
CSS（Cascading Style Sheets）层叠样式表是一种用来表示HTML等文件样式的计算机语言。
CSS不仅可以静态的修饰网页，还可以搭配各种脚本语言动态的对网页各元素进行格式化
二、CSS引入规则
2.1、css语法
选择器{属性1:属性值1;属性2:属性值2;...}
选择器是需要改变样式的HTML元素
属性是设置的样式属性。每一个属性都有一个值。
2.2、三种CSS样式引入规则
插入样式表有三种方法：
- 外部样式表：一个单独的样式文件存放样式
<head>
<link rel="stylesheet" href="css/demo.css" type="text/css">
</head>
- 内部样式表：样式放在head或body标签的style标签中
<head>
<style>
选择器{
属性1:属性值1;
属性2:属性值2;
...
}
</style>
</head>
优点：提高代码复用性
缺点：表现和结构没有分离
- 内联样式：样式写在标签的style属性中
<标签名 style="属性1:属性值1;属性2:属性值2;...">
内容文本
</标签名>
优点：样式优先级最高
缺点：1.样式复用性低 2.结构和表现没有分离
三、CSS三大机制
CSS的样式一共有三种来源：创作人员、读者、用户代理（浏览器）。
3.1、CSS三大机制
CSS三大机制：冲突（特殊性）、继承、层叠
样式最终的呈现由层叠机制决定，层叠与冲突和继承有关系。一个元素某一个样式要应用什么值，浏览器（用户代理）需要考虑继承、考虑声明的冲突，这个过程叫做层叠。
如何比较选择器的特殊性：
选择器类型：
| 选择器 | 描述 |
|---|---|
| ID | #id |
| class | .class |
| 标签 | p/a/div/… |
| 通用 | * |
| 属性 | [type=“text”]/… |
| 伪类 | ：hover /… |
| 伪元素 | ::before/… |
| 子选择器、相邻选择器 | < / 空格/… |
权重计算规则：
- 第一等：内联样式，权值1000
- 第二等：ID选择器，权值0100
- 第三等：类选择器、伪类选择器和属性选择器，权重0010
- 第四等：元素（标签）选择器和伪元素选择器，权重0001
- 其他的权值均为0000
继承的样式没有权值
重要性 !important：在声明的结束分号之前插入!important来表示此声明非常重要，超过了其他
3.2、继承
样式不仅会应用到指定的元素，还会应用到其后代的元素。但是并不是所有的属性都可以继承，大多数框模型属性（外边框、边框、内边框、背景）都不能被继承。
3.3、层叠
文档中的一个元素可能同时被多个选择器选中，每个选择器都有一些css规则，这就是层叠。
四、CSS基础选择器
选择器表示结构，该结构可以用作条件，其确定选择器在文档中匹配那哪些元素。
基本选择器：
- ID选择器：针对某一个特定的标签使用
- 类选择器：针对你想要的所有标签使用
- 标签选择器：针对一类标签
- 通用选择器：针对所有的标签都适用
4.1、ID选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
标签的取名规则：
- 只能有字母、数字、下划线
- 必须以字母开头
- 不能和标签同名
- 大小写严格区分
同一个HTML页面不能出现相同的id，哪怕他们不是一个类型。
4.2、类选择器
class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用
class属性的特点：
- 类选择器可以被多种标签同时使用
- 同一个标签可以使用多个类选择器，用空格隔开
ID选择器和类选择器用哪个好？
尽可能用class，除非特殊的情况用id。因为id是js用的，js要通过id属性得到标签，所以css层尽量不要用id。一个有id的元素，会有动态效果。
类上样式，id上行为
4.3、标签选择器
标签选择器选择的是页面上所有的这种类型的标签，所以常描述共性。
注：
- 所有的标签都可以是选择器
- 无论这个标签藏得多深，一定能被选择上
- 选择所有
最低0.47元/天 解锁文章
8768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
