为网页添加样式
术语解释
h1{
color:red;
background-color: lightblue;
text-align: center;
}
以上代码叫做：CSS规则
CSS规则 = 选择器 + 声明块
选择器
选择器：选中对应元素，用来选择样式的范围。
- ID选择器：选中对应id值的元素
- 元素选择器：选择页面上所有的同名元素
- 类选择器（使用最广泛）：选中类名相同的所有元素，且一个元素可以有多个类名，非常灵活
声明块
出现在大括号中
声明块中包含很多声明（也叫作属性），每一个声明表达了某一方面的样式规则
CSS代码书写的位置
- 内部样式表
书写在style元素中
通常把style元素放在head元素中，为的是浏览器在读取网页时最先加载出CSS代码 - 内联样式表（元素样式表）
在元素上添加style属性，直接把样式添加到属性中 - 外部样式表（常用）
将样式书写到独立的CSS文件中
需要使用：
<link rel="stylesheet" href="">
告诉css文件的路径。
rel=“stylesheet” 表示链接的是一个样式表。
实际上link元素不仅仅可以链接样式表。
为什么推荐使用外部样式表？
- 外部样式表可以解决多页面样式重复的问题
- 有利于浏览器缓存，从而提高页面响应速度
- 有利于代码分离，更容易阅读和维护
【涨知识】：在浏览器中按住ctrl键再点击超链接，会在新窗口打开这个链接。
CSS注释：/*······· */
常见的样式属性
- color
元素内部的文字颜色
预设值：定义好的单词（在真实的项目里用的并不多）
三原色，色值：光学三原色（红、绿、蓝），每个颜色可以使用0-255之间的数字来表达（数字越大，颜色越深），一共256色值。
RGB表示法：
比如：rgb(0,255,0) 代表绿色
hex(16进制) 表示法：
#红绿蓝
马尔斯绿：#008c8c 对应rgb(0，140，140)
在浏览器中，rgb法和hex法可以切换
【常见的颜色】
- 淘宝红：#ff4400，这种情况可以简写为：#f40
- 黑色：#000000，#000
- 白色：#ffffff，#fff
- 红：#ff0000，#f00
- 绿：#00ff00，0f0
- 蓝：#0000ff，00f
- 紫色：#ff00ff，#f0f
- 青色：#00ffff，#0ff
- 黄色：#ffff00，#ff0
- 灰色：#cccccc，#ccc
- background-color
元素背景颜色 - font-size
元素内部文字的尺寸大小
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素(html),则使用基准字号（根据浏览器而定，可设置）。
【它的单位】：
- px:像素，绝对单位
- em:相对单位，相对于父元素的字体大小，它的值代表是父元素字体大小的几倍
user agent,UA,用户代理（浏览器）
- font-weight
文字粗细程度，可以取值数字，也可以取值为预设值
默认值：normal; 相当于400
加粗：bold; 相当于700
通常情况下这两个预设值就够用了 - font-family
文字类型
必须是用户计算机中存在的字体，才会有效。
可以使用多个字体，以匹配不同的环境：
div{
font-family: consolas,翩翩体-简,微软雅黑,Arial,sans-serif;
}
最后写sans-serif，意思就是如果前面的字体你电脑都没有的话，让你的操作系统自行去选择一个非衬线字体。
sans-serif:非衬线字体之一，字体的边缘没有经过修饰。在网页显示时很美观。
衬线字体，字体边缘经过了修饰，很美观，比如宋体，往往用于印刷。
- font-style
字体样式，通常用它设置斜体
属性值：italic，表示倾斜
i元素，默认样式是倾斜字体。
在较早版本的 HTML 技术参数声明中，i 标签只是一个用于将文本显示为斜体的表示性元素，很像 b 标签被用来将文本显示为粗体。情况不再是这样了，因为这些标签现在定义了更多的语义而不只是排版外观。i 标签应表现一系列带有不同语义的文本，它的典型样式显示为斜体。
但在实际使用中，通常用它表示一个图标。图标（icon）
strong元素，默认加粗
em元素，默认斜体
strong:表示重要的，不能忽略的内容
em:表示强调的内容
- text-decoration
文本修饰，给文本加线
属性值：
line-through：文字中间一条横穿线
overline:文字上面加一条横线
underline:文字下面加一条线
del元素：错误（废弃）的内容，它的样式是给文本加横穿线
s元素：过期的内容，样式同上，通常用于原件，打折价
- text-indent
首行文本缩进
属性值：2em，代表缩进两个字符（中文） - line-height
每行文本的高度，该值越大，每行文本的距离就越大。可以理解为行间距。
设置行高为容器的高度，可以让单行文本垂直居中：
element.style {
background-color: #008c8c;
color: #fff;
height: 50px;
line-height: 50px;
}
行高可以设置为纯数字，不带单位，表示相对于当前元素的字体大小。
如果是多行文本，非常不建议使用绝对单位px来设置行高（否则当字体大小超过行高时会重叠混乱）。通常也不用em，直接用纯数字即可。
10. width
设置元素的宽度
11. height
设置元素的高度
12. letter-space
设置文字间隙
13. text-align
元素内部文字的水平排列方式，默认靠左排列
left/center/right
选择器
选择器：帮助你精准地选中想要的元素
简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 通配符选择器
*,选中所有元素 - 属性选择器
根据属性名和属性值选中元素
[href]{
color:red;
}
[href="https://www.sina.com"]{
color:blue;
}
[attr=value] 表示带有以attr命名的属性，且属性值为“value”的元素
[attr~=value] 表示带有一attr命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中[至少]一个值匹配“value"
[attr|=value] 表示带有以attr命名的属性的元素，属性值为”value“或是以”value-“为前缀（”-“为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）
[attr^=value] 表示带有以attr命名的属性，且属性值是以”value“开头的元素
[attr$=value] 表示带有以attr命名的属性，且属性值是以”value“结尾的元素
[attr*=value] 表示带有以attr命名的属性，且属性值含有”value“的属性
剩下的百度：属性选择器 mdn
6. 伪类选择器
选中某些元素的某种状态
（通常很多都是用在a元素上）
- link:超链接未访问时的状态
- visited:超链接访问过后的状态
(这里浏览器会有缓存，超链接访问一次过后就变不回去未被访问的状态了，需要清空浏览器缓存) - hover:鼠标移动上去的状态
选中鼠标悬停时的a元素：
a:hover{
color:red;
}
- active:激活状态，鼠标按下状态
选中鼠标按下时的a元素：
a:active{
color:red;
}
前两个伪类选择器只有a元素可以使用！
【注意】：这四个伪类如果要同时写，写的顺序是有讲究的，按照以上排列的顺序即可。（lvha爱恨法则）
7. 伪元素选择器
(前面加两个冒号)
（生成并选中某个元素内部的第一个子元素或最后一个子元素）
::before
::after
<p>
袁老师和成老师的<span>HTML和CSS</span>课程真好看！
</p>
span::before{
content: "《";
color: red;
}
span::after{
content: "》";
}
效果就是：袁老师和成老师的《HTML和CSS》课程真好看！
content属性只能在伪元素选择器中使用
选择器的组合
【牛逼写法：】p.red 按tab键直接生成class属性为red的p元素
- 并且(组合选择器)
p.red{
color: red;
}
中间不能有空格
2. 后代元素选择器 —— 空格
它可以选择某一元素的特定后代元素，包括直接子元素和间接后代元素
这个选择器很常用
【注意】p元素里不能放ul与li元素
3. 子元素选择器 —— >
只能选中子元素
4. 相邻兄弟元素选择器 —— +
它会选中某元素的相邻的下一个兄弟元素
5. 兄弟元素选择器 —— ~
它会选中某元素的后边出现的所有兄弟元素
选择器的并列
多个选择器，用逗号分隔
语法糖而已，假如两个选择器里的样式声明都一模一样，那么可以把它们并列起来，用逗号分隔，书写在一起，减轻我们书写代码的负担。本质上在浏览器运行的时候会看做它们是分开书写的。
.special~li,p{
color:#008c8c;
}
层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠（权重计算）：解决声明冲突的过程，是浏览器自动处理的
我们简单一点，只看如下三步即可：
1.比较重要性
重要性从高到低：
作者样式表：开发者书写的样式
1） 作者样式表中的！important样式（重要性最高，不建议使用）
2） 作者样式表中的普通样式
3） 浏览器默认样式表中的样式
2.比较特殊性
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（xxxx），这个数越大，该选择器越特殊
- 千位：如果是内联样式，记作1，否则记作0
- 百位：等于选择器中所有id选择器的个数
- 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位：等于选择器中所有元素选择器、伪元素选择器的数量
#mydiv #myul a :link{
/*有两个id选择器，一个伪类选择器，一个元素选择器
权重计算的结果为：0211
*/
color:chocolate;
}
【注意】：这里的4位数是逢256进一，也就是说，权重是一个256进制数。
做二次开发时，我们往往都是采用增加权重的方式制造冲突来覆盖样式，而不是修改样式。
3.比较源次序
代码书写靠后的胜出
应用
1. 重置样式表
书写一些作者样式，覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
先引用重置样式表，再引用自己的样式表。
常见的重置样式表：normalize.css、reset.css、meyer.css
重置样式表写法相对固定，我们也不用自己书写，网上复制粘贴或者远程引用即可。
meyer.css代码如下：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
2. 爱恨法则
a元素中写伪类的顺序：
link -> visited -> hover -> active
为什么要按照这样的顺序书写？
因为在某些时候，可能会有多个样式应用到了同一个a元素
a:link{
color:green;
}
a:visited{
color:red;
}
a:hover{
color:chocolate;
}
a:active{
color:#000;
}
问：当超链接未访问且鼠标移上去且鼠标左键按下去的时候，我们希望该超链接显示什么颜色？
我们当然希望它显示的是鼠标按下去应当显示出的颜色。如果不按照这个书写顺序，就达不到我们想要的结果。
继承
子元素会继承父元素的某些CSS属性。
通常，跟文字内容相关的属性都能被继承。
所以，我们可以直接选中body元素，为网页添加文字的样式，这些样式被一层一层地继承下去。
body{
font-family:Arial,Helvetica,sans-serif;
}
背景颜色，宽度，高度不能够继承。
【留下一个问题】：当继承和层叠的样式冲突后，浏览器该怎么处理？
属性值的计算过程
浏览器渲染页面的过程，是一个元素一个元素依次渲染，按照页面文档的树形目录结构顺序进行。
如图，先渲染html元素，然后再依次渲染head，meta，title，body，h3，p，strong，a，img。
渲染每个元素的前提条件：该元素的所有CSS属性必须有值。
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程。
-
确定声明值：把参考样式表中没有冲突的声明，直接作为CSS属性值
-
层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值
- 比较重要性
- 比较特殊性
- 比较源次序（写在后面的样式胜出）
-
使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
-
使用默认值：对仍然没有值的属性，使用默认值
举个例子：
<div>
<a href="">
举个例子
</a>
<p>
p元素
</p>
</div>
div {
color: red;
}
a元素的颜色不能继承,因此它的颜色不是红色。a元素的颜色是属性值计算过程的第一步就确定了声明值。
【小技巧：】
我们写重置样式的时候，很多时候希望把a元素的样式重置一下。
a{
/* 没有下划线，颜色继承父元素 */
text-decoration: none;
color: inherit; /*inherit表示强制继承*/
}
再举个例子，有的时候我们不希望改动以前的css代码，想要把如下的div的背景颜色改为默认值，假如我们还不知道默认值为透明（transparent），那我们可以使用initial这个值，直接将该属性设置为默认值。
<div class="mydiv">
</div>
div {
width:100px;
height: 100px;
background: lightblue;
}
.mydiv{
background: initial;
}
背景颜色的默认值（Initial value）：透明
background-color:transparent
另外背景颜色不可被继承。
特殊的两个CSS取值：
- inherit：手动（强制）继承，将父元素的值取出应用到该元素
- initial：初始值，将该属性设置为默认值
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
- 行盒，display等于inline的元素
- 块盒，display等于block的元素
行盒在页面中不换行、块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio
盒子的组成部分
无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：
- 内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
- 填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding的简写简写属性(速写属性)：
同时设置4个方向的值:
padding: 上 右 下 左
当上下值和左右值相等:
padding:上下 左右;
如果4个方向的内边距值都相等：
padding:50px;
填充区+内容区 = 填充盒 padding-box
- 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式：border-style
边框宽度：border-width
边框颜色：border-color
（这几个属性也全是速写属性）
不仅如此，它们还可以进一步简写：
顺序为：宽度，样式，颜色。
border:4px dashed red;
边框+填充区+内容区 = 边框盒 border-box
- 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin
盒模型应用
改变宽高范围
默认情况下，width 和 height 设置的是内容盒宽高。
页面重构师：将psd文件（设计稿）制作为静态页面
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
解决办法：
- 精确计算
- CSS3：box-sizing
例如：改变宽高的影响范围：
box-sizing:border-box;
改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过background-clip进行修改
溢出处理
overflow，控制内容溢出边框盒后的处理方式
断词规则
word-break，会影响文字在什么位置被截断换行
normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）
break-all：截断所有。所有字符都在文字处截断
keep-all：保持所有。所有文字都在单词之间截断
空白处理
white-space: nowrap
<body>
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Atque animi delectus corporis hic!</li>
<li>Reiciendis quos ratione culpa saepe.</li>
<li>Deserunt voluptas numquam doloremque beatae!</li>
<li>Cum architecto nulla dolorem at.</li>
<li>Repudiandae deserunt temporibus tempora quaerat?</li>
<li>Dolores laborum veritatis fuga commodi!</li>
<li>Velit explicabo dicta doloremque unde!</li>
<li>Sed magnam ratione quaerat ducimus!</li>
<li>Explicabo perspiciatis aspernatur maiores. Accusantium?</li>
</ul>
</body>
li{
border-bottom: 1px dashed #ccc;
line-height: 2;
border-left: 3px solid #008c8c;
padding-left: 10px;
margin: 1em 0;
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
行盒的盒模型
常见的行盒：包含具体内容的元素
span、strong、em、i、img、video、audio
显著特点
- 盒子沿着内容沿伸
- 行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
- 内边距（填充区）
水平方向有效，垂直方向不会实际占据空间。
- 边框
水平方向有效，垂直方向不会实际占据空间。
- 外边距
水平方向有效，垂直方向不会实际占据空间。
行块盒
display：inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠
空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间
可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸都有效。
常规流
盒模型：规定单个盒子的规则
视觉格式化模型（布局规则）：页面中的多个盒子排列规则
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
常规流布局
常规流、文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block）：每个盒子都有它的包含块，包含块决定了盒子的排列区域。
绝大部分情况下：盒子的包含块，为其父元素的内容盒
块盒
- 每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值是auto
margin的取值也可以是auto，默认值0
auto：将剩余空间吸收掉
width吸收能力强于margin
若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收
在常规流中，块盒在其包含快中居中，可以定宽、然后左右margin设置为auto。
- 每个块盒垂直方向上的auto值
height:auto， 适应内容的高度
margin:auto， 表示0
- 百分比取值
padding、宽、margin可以取值为百分比
以上的所有百分比相对于包含块的宽度。
高度的百分比：
1）. 包含块的高度是否取决于子元素的高度，设置百分比无效
2）. 包含块的高度不取决于子元素的高度，百分比相对于父元素高度
- 上下外边距的合并
两个常规流块盒，上下外边距相邻，会进行合并。
两个外边距取最大值。
浮动
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
修改float属性值为：
- left：左浮动，元素靠上靠左
- right：右浮动，元素靠上靠右
默认值为none
- 当一个元素浮动后，元素必定为块盒(更改display属性为block)
- 浮动元素的包含块，和常规流一样，为父元素的内容盒
盒子尺寸
- 宽度为auto时，适应内容宽度
- 高度为auto时，与常规流一致，适应内容的高度
- margin为auto，为0.
- 边框、内边距、百分比设置与常规流一样
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子考上靠右排列
- 浮动盒子在包含块中排列时，会避开常规流块盒
- 常规流块盒在排列时，无视浮动盒子
- 行盒在排列时，会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行盒叫做匿名行盒。
高度坍塌
高度坍塌的根源：常规流盒子的自动高度，在计算时，不会考虑浮动盒子
清除浮动，涉及css属性：clear
- 默认值：none
- left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
- right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
- both：清除左右浮动，该元素必须出现在前面所有浮动盒子的下方
定位
视觉格式化模型，大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动：float
- 定位：position
定位：手动控制元素在包含块中的精准位置
涉及的CSS属性：position
position属性
- 默认值：static，静态定位（不定位）
- relative：相对定位
- absolute：绝对定位
- fixed：固定定位
一个元素，只要position的取值不是static，认为该元素是一个定位元素。
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
- 文档流中的元素摆放时，会忽略脱离了文档流的元素
- 文档流中元素计算自动高度时，会忽略脱离了文档流的元素
相对定位
不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。
可以通过四个CSS属性对设置其位置：
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响。
绝对定位
- 宽高为auto，适应内容
- 包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（初始化包含块）
固定定位
其他情况和绝对定位完全一样。
包含块不同：固定为视口（浏览器的可视窗口）
定位下的居中
某个方向居中：
- 定宽（高）
- 将左右（上下）距离设置为0
- 将左右（上下）margin设置为auto
绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文
设置z-index，通常情况下，该值越大，越靠近用户
只有定位元素设置z-index有效
z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖
补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并
透明
每个颜色都具有透明通道, 0 ~ 1
- rgba(红, 绿, 蓝, alpha)
- hex： #红绿蓝透
更多的选择器
更多伪类选择器
- first-child
选择第一个子元素
first-of-type，选中子元素中第一个指定类型的元素
-
last-child
-
nth-child
选中指定的第几个子元素
even：关键字，等同于2n
odd: 关键字，等同于2n+1
- nth-of-type
选中指定的子元素中第几个某类型的元素
更多的伪元素选择器
- first-letter
选中元素中的第一个字母
- first-line
选中元素中第一行的文字
- selection
选中被用户框选的文字
更多的样式
透明度
- opacity，它设置的是整个元素的透明，它的取值是0 ~ 1
- 在颜色位置设置alpha通道(rgba )
鼠标
使用cursor设置
盒子隐藏
- display:none，不生成盒子
- visibility:hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间。
背景图
和img元素的区别
img元素是属于HTML的概念
背景图属于css的概念
- 当图片属于网页内容时，必须使用img元素
- 当图片仅用于美化页面时，必须使用背景图
涉及的css属性
-
background-image
-
background-repeat
默认情况下，背景图会在横坐标和纵坐标中进行重复
- background-size
预设值：contain、cover，类似于object-fit
数值或百分比
- background-position
设置背景图的位置。
预设值：left、bottom、right、top、center
数值或百分比
雪碧图（精灵图）（spirit）
- background-attachment
通常用它控制背景图是否固定。
-
背景图和背景颜色混用
-
速写（简写）background
