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 |
盒子的组成部分
无论是行盒、还是块盒,都由下面几个部分组成,从内到外分别是:
- 内容 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