笔记来源：拉勾教育 - 大前端就业集训营
文章内容：学习过程中的笔记、感悟、经验
一、css语法
1、css书写规则
主要两部分构成：选择器、一条或多条声明
2、书写位置
①内联式： 也叫行内式
<div style="width: 100px;height: 100px;font‐size: 14px;">1</div>
缺点： 行内式必须写在标签上，让标签结构繁重，不利于结构的解读，如果多个标签有相同的样式，同样的 css 代码需要书写多次，增加代码量。
注： 实际工作中不会使用行内式编写 css 代码
②内嵌式：
<head>
/* HTML5中type属性可不写 */
<style type="text/css">
/*内部书写css代码*/
div {
width: 100px;
height: 100px;
background‐color: pink;
}
</style>
</head>
优点： 实现了结构和样式的初步分离，多标签可用一段代码设置相同样式，节省代码量
缺点： 结构和样式并没有完全分离，css 样式只能给一个 HTML 文件使用，不能够被多个 HTML 文件同时利用，头重脚轻，不利于 HTML 文件的查看
注： 可制作一些小的案例，但是完整的网站项目不能使用内嵌式
③外联式： 也叫外链式
/* css文件 */
p,div{
font-size: 30px;
color: red;
}
/* html文件 */
<head>
/* 引入css文件 */
<link rel="stylesheet" href="外联式.css" type="text/css" />
</head>
优点： 实现了结构和样式的完全分离，多个 HTML 文件可以共用一个 css 文件，减少代码量，一个 HTML 文件可以引入多个 css 文件
注： 用于大型项目及完整网站制作
④导入式：
<head>
<style>
@import url(css/01.css);
div {
border‐color: #00f;
}
</style>
</head>
注： 由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，实际工作中较少使用
css 中所有属性与属性之间对空格、换行、缩进不敏感。书写代码时，最好进行换行、合理缩进，有利于读取代码。 上传代码时，为了减少代码量，可以压缩代码。
二、css常用样式
1、文字三属性
颜色 color： 给文字设置颜色
（1）颜色名就是使用颜色的英文单词进行表示
<p style="color: cyan;">青色</p>
（2）颜色值指使用具体颜色的数值表示，包括 rgb 模式和十六进制模式写法
rgb 模式：是根据红绿蓝三原色进行混合而成的颜色模式，每个原色的取值范围是0-255，一共256个数值。
<p style="color: rgb(0,255,0);">绿色</p>
十六进制模式：是 rgb 模式的一种简化写法，使用十六进制的字符去替换十进制的 0-255 的数字。 如果红、绿、蓝三个颜色的色值每一个都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写。
<p style="color: #00f;">蓝色</p>
注： 类似 #808080 是不能进行简化的
可在w3cschool手册中查找颜色名和颜色值
字号 font-size： 设置文字的大小
| 相对长度单位 | 说明 |
|---|---|
| px | 像素值，最常使用的单位 |
| em | 倍数，继承自祖先元素设置的字号的倍数 |
| % | 百分比，继承自祖先元素设置的字号的百分比 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
<p style="font‐size: 14px;">14像素</p>
注： 如不设置字号，chrome、IE浏览器，默认显示字号为 16px。如果设置的字号低于最小字号，都以最小字号加载，0除外。 chrome 浏览器最小加载显示字号为12px，IE 浏览器最小可以支持1px的字号。网页中最小设置字号必须是12px，如果低于12px会出现兼容问题，尽量使用偶数的数字字号，，ie6 等老式浏览器支持奇数会有 bug。
字体 font-family： 元素内文字的字体
<p style="font-family: "Arial","宋体";">字体</p>
注：
①font-family 可设置多个字体名称，实际加载时只选择一种加载，选择的依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找到第一个支持的字体。
②浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字体作为后路。
③中文字体中一般带有英文可以加载的字体效果，为避免对英文字的字体影响，建议将英文字体写在属性值最前面。
2、盒子实体化样式三属性
/* width:宽度
height:高度
background-color:背景颜色 */
<div style="width: 100px;height: 100px;background‐color: pink;">1</div>
三、css选择器
css2.1版本的七种选择器
基础选择器：标签选择器、id 选择器、类选择器、通配符选择器。
高级选择器：后代选择器、交集选择器、并集选择器。
1、基础选择器
①标签选择器
选中的是HTML文件中所有的同名标签
p {
color: red;
}
注： 会忽视 HTML 元素的嵌套关系，不管嵌套多深，都能被选中。
②id选择器
只能选中一个标签
id 命名规则： 必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。每个 id 属性值必须是唯一的，不能与其他的 id 同名。
#ps {
color: red;
}
③类选择器
页面中所有 class 属性值相同的标签
class 命名规则： 必须以字母开头，后面可以有字母、数字、下划线、横线，严格区分大小写。class 属性值可以与其他的class相同。
<!-- class 属性可以有多个属性值 -->
<p class="demo para">这是一个普通段落</p>
.demo {
color: red;
}
.para {
font‐size: 30px;
}
注： 实际工作中，通常我们有一个使用规律：类上样式(CSS)，id 上行为(JavaScript)，所以该选择器基本上不用。
④通配符选择器
包含 <html>标签在内的所有标签
* {
color: red;
}
注： 实际上线的网站不允许使用 * 去清除默认内外边距
2、高级选择器
①后代选择器
通过后代选择器中前面的一系列基础选择器缩小选择范围，最终由最后一个选择器确定选中的标签。
/* 类名为box1的盒子里的ul标签里的p标签 */
.box1 ul p {
color: red;
}
注： 前面的选择器选中的标签必须是后面选择器选中标签的祖先级
②交集选择器
选择的是满足所有基础选择器需求的标签，如果一个条件不满足都不能被选中
/* p标签中同时具有类名demo和para */
p.demo.para {
font‐size: 30px;
}
注： 交集选择器可以作为其他高级选择器的组成部分
③并集选择器
所有的单独选择器选中的标签的并集集合
#box1 p.ps2,#box2 h3.ps1 {
color: red;
}
四、css层叠式
1、继承性
能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承
/* 后期所有的后代标签都可以从body标签进行继承。 */
body{font‐size: 14px; font‐family: "微软雅黑"; color: red; }
2、层叠性
同一个标签可以被多个选择器选中，如果选择器后面设置了相同的样式属性，那么多个选择器在进行对比的过程中，最终只有一个属性会成功加载，它会层叠、覆盖掉其他的属性。
（1）如果选择器都选中了标签自身。
第一步：比较多个选择器的权重，权重高的层叠权重低的。
基础选择器权重：根据选择范围，范围越大权重越小，* < 标签选择器 < 类选择器 < id选择器。
高级选择器权重：依次比较组成高级选择器的 id 的个数，类的个数，标签的个数，如果前面能够比较出大小就不再比较后面，如果前面相等就往后比较，直到比较出大小。
第二步：如果选择器权重都相同，需要比较 CSS 中代码的书写顺序，后写的层叠先写的
(2) 如果选择器选中的是祖先元素，文字的样式可以被继承。
第一步：比较就近原则，比较选择器选中的祖先级在HTML结构中距离目标标签的远近，近的层叠远的。
第二步：如果选中的祖先级距离目标一样近（同一个祖先级），比较选择器权重，权重大的层叠小的。
第三步：如果距离一样近，权重也相同，最后比较 CSS 中的书写顺序，后面的层叠前面的。
(3) ! important 关键字
某条 CSS 样式属性的权重提升到最大
.box1 #box2 #box3 p {
color: green;
}
/* 权重最大 */
.box1 .box2 .box3 p {
color: blue !important;
}
注：
①就近原则中，不需要比较选择器权重，所有 ! important 会失效。
②important 不能提升选择器的权重，只能提升某条属性的权重到最大。
(4) 行内式权重
行内式样式与内嵌式或外链式样式比较权重时，行内式的权重最高，高于其他选择器。 但是，与 ! important 关键字相比权重要低。
扫一扫
3182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
