这是我参与「第四届青训营 」笔记创作活动的的第2天
CSS
CSS规则 = 选择器 + 声明块
h1{
color:red;
background-color:lightblue;
text-align: center;
}
选择器
选择器：选中元素
- ID选择器
<p id="a">这是一个段落</p>
<style>
#a{
font-style: italic;
}
</style>
- 元素选择器
<h1>这是一个标题</h1>
<style>
h1{
text-align: center;
}
</style>
- 类选择器
<div class="a"></div>
<style>
.a{
font-size: 20px;
}
</style>
- 通配符选择器
*，选中所有元素
<style>
*{
margin: auto;
}
</style>
- 属性选择器
根据属性名和属性值选中元素
/* 选中所有具有href属性的元素 */
[href]{
color:red;
}
- 伪类选择器
选中某些元素的某种状态
1）link: 超链接未访问时的状态
a:link {
color: chocolate;
}
2）visited: 超链接访问过后的状态
a:visited {
color: rgb(113, 133, 0);
}
3）hover: 鼠标悬停状态
/* 选中鼠标悬停时的a元素 */
a:hover{
color:red;
}
4）active：激活状态，鼠标按下状态
/* 鼠标按下时的a元素 */
a:active{
color:#008c8c;
}
- 爱恨法则
link > visited > hover > active
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a:link{
color: green;
}
a:visited{
color: red;
}
a:hover{
color: chocolate;
}
a:active {
color: #000;
}
</style>
</head>
<body>
<a href="http://163.com">
网易
</a>
</body>
</html>
- 伪元素选择器
before
after
<p><span>怦然心动</span>是一部好看的电影</p>
span::before{
content: "《";
color: orangered;
}
span::after{
content: "》";
color: orangered;
}
效果如下
选择器的组合
- 并且
- 后代元素 —— 空格
- 子元素 —— >
- 相邻兄弟元素 —— +
- 后面出现的所有兄弟元素 —— ~
- 选择器的并列
多个选择器, 用逗号分隔
声明块
出现在大括号中
声明块中包含很多声明（属性），每一个声明（属性）表达了某一方面的样式。
- 常见样式声明
| color | 元素内部的文字颜色 |
|---|---|
| background-color | 元素背景颜色 |
| font-size | 元素内部文字的尺寸大小 |
| font-weight | 文字粗细程度，可以取值数字，可以取值为预设值 |
| font-family | 文字类型 |
| font-style | 字体样式，通常用它设置斜体 |
| text-decoration | 文本修饰，给文本加线 |
| text-indent | 首行文本缩进 |
| line-height | 每行文本的高度 |
| width | 宽度 |
| height | 高度 |
| letter-space | 文字间隙 |
| text-align | 元素内部文字的水平排列方式 |
CSS代码书写位置
- 内部样式表
书写在style元素中
<style>
#a{
font-style: italic;
}
h1{
text-align: center;
}
.a{
font-size: 20px;
}
*{
margin: auto;
}
</style>
- 内联样式表，元素样式表
直接书写在元素的style属性中
<h1 style="text-align: center;">这是一个标题</h1>
- 外部样式表
将样式书写到独立的css文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<h1 class="red-big-center">
这是一个标题
</h1>
<p >
Lorem, ipsum dolor.
</p>
<p class="color">Lorem ipsum dolor sit amet.</p>
<p>Voluptatem non blanditiis eaque voluptatibus.</p>
<p>Rerum similique quo enim tenetur.</p>
</body>
</html>
效果如下：
1). 外部样式可以解决多页面样式重复的问题 2). 有利于浏览器缓存，从而提高页面响应速度 3). 有利于代码分离（HTML和CSS），更容易阅读和维护
层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠：解决声明冲突的过程，浏览器自动处理（权重计算）
1. 比较重要性
重要性从高到底：
作者样式表：开发者书写的样式
- 作者样式表中的!important样式
- 作者样式表中的普通样式
- 浏览器默认样式表中的样式
2. 比较特殊性
看选择器
总体规则：选择器选中的范围越窄，越特殊
具体规则：通过选择器，计算出一个4位数（x x x x）
- 千位：如果是内联样式，记1，否则记0
- 百位：等于选择器中所有id选择器的数量
- 十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位：等于选择器中所有元素选择器、伪元素选择器的数量
3. 比较源次序
代码书写==靠后==的胜出
应用
- 重置样式表
书写一些作者样式，覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表：normalize.css、reset.css、meyer.css
- ==爱恨法则==
link > visited > hover > active
继承
子元素会继承父元素的某些CSS属性
通常，跟==文字内容相关==的属性都能被继承
属性值的计算过程
一个元素一个元素依次渲染，顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的==所有CSS属性==必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程，叫做属性值计算过程
==属性值计算过程简介==
- 确定声明值：参考样式表中没有冲突的声明，作为CSS属性值
- 层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值
- 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
- 使用默认值：对仍然没有值的属性，使用默认值
<style>
div {
width:100px;
height: 100px;
background: lightblue;
}
.mydiv{
background: initial;
}
</style>
<body>
<div class="mydiv"></div>
</body>
- 特殊的两个CSS取值：
-
inherit：手动（强制）继承，将父元素的值取出应用到该元素
-
initial：初始值，将该属性设置为默认值
-
盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
| 行盒 | 块盒 |
|---|---|
| display等于inline的元素 | display等于block的元素 |
| 在页面中不换行 | 独占一行 |
| span、a、img、video、audio | 容器元素、h1~h6、p |
display默认值为inline (没有声明display时)
盒子的组成部分
无论是行盒、还是块盒，都由下面几个部分组成，从内到外分别是：
- 内容 content
width、height，设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
- 填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
简写属性
- padding: 上 右 下 左
填充区+内容区 = 填充盒 padding-box
- 边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
- 边框样式：border-style
- 边框宽度：border-width
- 边框颜色：border-color
边框+填充区+内容区 = 边框盒 border-box
- 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
速写属性margin
- 比较块盒、行盒、行块盒
- 块盒
- 可以设置宽高大小
- 默认宽度为100%
- 独占一行
- p ul li h1~h6 div form table
- 行盒
- 无法设置宽高
- 元素大小随内容变化
- 所有元素默认排在一行
- i b span a
- 行块盒
- 可以设置宽高大小
- 能排在一行显示
- img input
盒模型应用
改变宽高范围
默认情况下，width 和 height 设置的是内容盒宽高。
衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒
解决方法：
- 精确计算
- CSS3：box-sizing
例：
<style>
.text{
width: 100px;
height: 200px;
padding-left: 20px;
border: solid 1px red;
}
</style>
效果如下
修改如下
<style>
.text{
width: 100px;
height: 200px;
padding-left: 20px;
border: solid 1px red;
box-sizing: border-box;
}
</style>
结果如下
改变背景覆盖范围
默认情况下，背景覆盖边框盒
可以通过==background-clip==进行修改
.text{
width: 200px;
height: 600px;
padding: 10px;
border: 5px dashed red;
background: #008c8c;
background-clip: padding-box;
}
效果如下
溢出处理
==overflow==，控制内容溢出边框盒后的处理方式
visible：可见（默认） hidden：隐藏 scroll：滚动条（可通过overflow-y（x）：使滚动条只纵向（横向）出现） auto：滚动条自动出现
断词规则
==word-break==，会影响文字在什么位置被截断换行
-
normal：普通。CJK字符（文字位置截断），非CJK字符（单词位置截断）
-
break-all：截断所有。所有字符都在文字处截断
-
keep-all：保持所有。所有文字都在单词之间截断
空白处理
==white-space: nowrap==(不换行)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
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;/*文字溢出的部分用用圆点代替*/
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Debitis facilis aperiam nam autem. Sed, quisquam velit.</li>
<li>Mollitia consequuntur veritatis doloribus odit qui fuga id!</li>
<li>Itaque quam, dolores perferendis reprehenderit harum laboriosam! Alias?</li>
<li>Enim laborum quas rem distinctio corrupti quo ad?</li>
<li>Deleniti voluptate laboriosam quos distinctio fuga, at sint!</li>
<li>Enim labore culpa soluta placeat harum, iste ex.</li>
<li>Error quibusdam quidem minus voluptas, similique aliquid iste.</li>
<li>Nemo nam sit architecto facere non, quae similique?</li>
<li>Placeat et cumque maxime minus, ducimus hic esse.</li>
</ul>
</body>
</html>
效果如下
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 只能控制单行文本
- 取消空白折叠: white-space: pre;
行盒的盒模型
常见的行盒：包含==具体内容==的元素
span、strong、em、i、img、video、audio
显著特点
- 盒子沿着内容延伸
- 行盒不能设置宽高
调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。
- 内边距（填充区）
水平方向有效，垂直方向仅会影响背景，不会实际占据空间。
- 边框
水平方向有效，垂直方向不会实际占据空间。
- 外边距
水平方向有效，垂直方向不会实际占据空间。
行块盒
==display：inline-block== 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠
空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间
可替换元素 和 非可替换元素
大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素
可替换元素：img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒，盒模型中所有尺寸都有效。
