1. CSS样式表
CSS(Cascading Style Sheets)，通常称为CSS样式表或层叠样式表（级联样式表）。
主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
要书写css样式，那css样式书写的位置在哪呢？
- 行内样式表
任何HTML标签都拥有style属性，行内样式是通过标签的style属性来设置元素的样式，如下：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
style其实就是标签的属性，属性和值中间是:隔开，多组属性值之间用;隔开。
行内样式只能控制当前的标签和以及嵌套在其中的子标签，会造成代码冗余，因为没有实现样式和结构分离。
- 内部样式表
内部样式表是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：
<head>
<style type="text/CSS">
div {
color: red;
font-size: 12px;
}
</style>
</head>
style标签一般位于head标签中，当然理论上它可以放在HTML文档的任何地方，type="text/css" 在html5中可以省略。
内部样式表只能控制当前的页面，虽然实现样式和结构分离，但是没有彻底分离。
- 外部样式表
外部样式表是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
link 是个单标签，link标签需要放在head头部标签中，并且指定link标签的三个属性。
| 属性 | 作用 |
|---|---|
| rel | 全称是 relationship，定义链接的文件和 html 文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略 |
| href | 全称是Hypertext Reference，意思是超文本引用，定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |
外部样式表才是真正实现样式和结构分离，也是实际项目中使用最多的。
2. 字体、外观属性
font-style：字体风格
在 html 中，字体倾斜我们可以用标签来实现（使用 i 和 em 标签），在 css 中，我们可以通过 font-style 属性定义字体风格，如设置斜体或正常字体，属性值如下：
| 属性 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 浏览器会显示斜体的字体样式。 |
平时我们很少给文字倾斜，反而喜欢给斜体标签（i，em）改为普通模式，比如用 i 标签放个小图标。
font-weight：字体粗细
在 html 中，将字体加粗我们可以用标签来实现（使用 b 和 strong 标签），在 css 中，我们可以通过 font-weight 将字体加粗，属性值如下：
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗），400 |
| bold | 粗体，700 |
| 100~900 | normal == 400，bold == 700 |
font-size：字体大小
font-size 属性用于设置字号：
p { font-size:20px; }
可以使用相对长度单位，也可以使用绝对长度单位。相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。
谷歌浏览器默认的文字大小为16px，但是不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。
font-family：字体
font-family 属性用于设置哪一种字体。
p { font-family:"Microsoft Yahei";}
网页中常用的字体有宋体、微软雅黑、黑体等，可以同时指定多个字体，中间以英文逗号隔开，如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，如果都没有，则以我们电脑默认的字体为准。
p { font-family: "Arial", "Microsoft Yahei", "微软雅黑"; }
不管是中文字体还是英文字体，还是带有空格的英文字体，都需要加上英文状态下的双引号，这是为了保证浏览器能够正确解析，当然，不加双引号大部分情况下也没事，不加的好处是敲字体的时候有提示。
使用Unicode字体：
为什么使用 Unicode字体？
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误，并且xp系统不支持类似微软雅黑的中文。
解决方案：
- 你可以使用英文来替代（推荐）。比如
font-family:"Microsoft Yahei"。 - 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的，缺点就是不直观。
p { font-family:"\5FAE\8F6F\96C5\9ED1";}
font：综合设置字体
font属性用于对字体样式进行综合设置，基本语法格式如下：
p { font: font-style font-weight font-size/line-height font-family; }
使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用，实际项目中我们很少合起来用。
color：文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：
| 表示表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0) 或 rgb(100%,0%,0%) |
实际工作中， 用16进制的写法是最多的，而且我们更喜欢简写方式比如 #F00代表红色。
text-align：文本内容水平对齐方式
text-align属性用于设置文本内容的水平对齐方式，相当于html中table标签的的align对齐属性。
<table border="0" cellpadding="20" cellspacing="0" align="center">
其可用属性值如下：
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
注意：是让盒子里面的内容水平居中， 而不是让盒子居中对齐。
line-height：行高
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。
text-indent：首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值，可以为 em（字符宽度的倍数）或相对于浏览器窗口宽度的百分比，允许使用负值，建议使用em作为设置单位。
1em 就是一个字的宽度，如果是汉字的段落，1em 就是一个汉字的宽度。
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
text-decoration：文本的装饰
text-decoration 一般我们用于给a标签取消下划线。
| 值 | 描述 |
|---|---|
| none | 默认，定义标准的文本。 取消下划线 |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本的一条线。 |
字间距 / 单词间距
letter-spacing：字母间距
letter-spacing 属性用于定义字母间距，一个汉字也可以看作一个字母，其属性值可为不同单位的数值，允许使用负值，默认为normal。
word-spacing：单词间距
word-spacing 属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
颜色半透明
CSS3以后，文字颜色我们可以设置透明度了，语法格式如下：
color: rgba(r,g,b,a) // a 是 alpha 不透明度 取值范围0~1之间
文字阴影
CSS3以后，我们可以给文字添加阴影效果了，Shadow 影子
text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;
前两项是必须写的，后两项可以选写。
案例：凹凸文字
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ccc;
}
div {
color: #ccc;
/* 字体80px，加粗 */
font: 700 80px "微软雅黑";
}
/* 凸起的文字 */
div:first-child {
/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
/* 凹下的文字 */
div:last-child {
/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div>我是凸起的文字</div>
<div>我是凹下的文字</div>
</body>
3. 标签显示模式（display）
标签的显示模式就是标签以什么方式进行显示，比如 div 自己占一行， 比如 span 一行可以放很多个。
块级元素（block-level）
块级元素有<h1>、<p>、<div>，以及列表标签<ul>、<ol>、<li>、<dl>、<dt>、<dd>等
块级元素的特点：
- 自己独占一行，宽度默认是容器（父级宽度）的100%
- 宽高、外边距、内边距都可以控制
- 是一个容器及盒子，里面可以放行内或者块级元素
注意：只有文字才能组成段落，因此 p 里面不能放块级元素，只能放文字，特别是 p 里面不能放div。如果你把 p 里面嵌套 div，html 也能显示，因为浏览器会自动把 div 拿出来和 p 平级。同理还有h1-h6、dt，他们都是文字类块级标签，里面不能放其他块级元素，只能放文字。
行内元素（inline-level）
行内元素有<a>、<span>、以及文本格式化标签<b>、<strong>、<i>、<em>等
行内元素的特点：
-
相邻行内元素在一行上，一行可以显示多个
-
宽、高直接设置是无效的，默认宽高就是它本身内容的宽高
-
行内元素只能容纳文本或则其他行内元素
行内块元素（inline-block）
行内块元素 <img/>、<input/>，以及<button>标签，<button>的本质就是<input/>
行内块元素的特点：
-
和相邻行内、行内块元素在一行上，但是元素之间会有空白缝隙，一行可以显示多个。
-
默认宽高就是它本身内容的宽高（行内元素的特点），宽高、外边距、内边距都可以控制（块级元素的特点）
标签显示模式转换
- 块转行内：display: inline;
- 行内转块：display: block;
- 块、行内元素转换为行内块： display: inline-block;
4. 行高那些事（line-height）
通过line-height可以设置行高，它的属性值如下：
- length：设置固定的行间距，比如：40px。
- %：大多数浏览器中默认行高大约是110%到120%，设置成90%可以更小，设置成200%可以更大。
- 行高测量
文字有四个线：顶线、中线、基线、底线，基线和基线的距离为行高。
- 文字垂直居中
行高我们利用最多的一个地方就是让行高等于盒子的高度，可以让文字垂直居中
这里情况些许复杂，开始学习，我们可以先从简单地方入手学会，如下：
行高 = 上距离 + 内容高度 + 下距离，上距离和下距离总是相等的，因此文字看上去是垂直居中的。
- 文字行高和盒子高度的三种关系：
如果行高 = 盒子高度，文字会垂直居中
如果行高 > 盒子高度，文字会偏下
如果行高 < 盒子高度，文字会偏上
5. 背景（background）
通过css背景属性，给页面元素添加背景样式
背景图片（image）
background-image : none | url(images/demo.png)
| 参数 | 作用 |
|---|---|
| none | 无背景图（默认的） |
| url | 使用绝对、相对地址指定背景图像 |
背景平铺（repeat）
background-repeat : repeat | no-repeat | repeat-x | repeat-y
| 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
背景附着（attachment）
背景附着就是定义背景是滚动的还是固定的
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
背景位置（position）
设置背景图片的起始位置。
background-position : 百分数 百分数 默认值：0% 0%
background-position : 方位 方位
| 参数 | 值 |
|---|---|
| 方位 (position) | 方位名词有：top、left、bottom、right、center，如果您仅规定了一个值，另一个值将是 center。 |
| 百分数 | 第一个值是水平位置，第二个值是垂直位置。左上角是 0%，右下角是 100%，如果您仅规定了一个值，另一个值将是 50%。 |
| 像素单位 | 第一个值是水平位置，第二个值是垂直位置。左上角是 0px 0px，如果您仅规定了一个值，另一个值将是 50%，您可以混合使用百分数和方位名词。 |
因为是设置背景图片的起始位置，所以必须先指定background-image属性，一般我们使用最多的就是设置精灵图，如下：
background: url(images/abcd.jpg) no-repeat;
background-position: -256px -275px;
背景颜色（color）
background-color:颜色值; // 默认值是 transparent 透明的
如果颜色带有 a (不透明度)，则可以设置背景透明，这时候颜色值是rgba(0, 0, 0, 0.3);
背景简写（background）
background：属性的值的书写顺序官方并没有强制标准的，为了可读性，建议大家如下写：
background：背景颜色 背景图片 背景平铺 背景附着 背景位置;
比如：
background: transparent url(image.jpg) repeat-y scroll center top;
背景缩放（size）
通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置：长度 | 百分比 | cover | contain;
- 可以设置长度单位 (px) 或百分比（设置百分比时，参照盒子的宽高）
- cover和contain都不会使图片变形。
- 设置为 cover 会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏，我们平时用的cover最多。
- 设置为 contain 会自动调整缩放比例，保证图片始终完整显示在背景区域，可能有部分空白区域。
background-image: url('images/gyt.jpg');
/* 传入宽度和高度，但是我们一般不这样改，我们尽量只改一个值，另外一个值会等比缩放。例如：background-size: 100px; 宽度为100，高度进行等比缩放。*/
background-size: 100px 300px;
/* background-size: 50%; */
/* background-size: cover; */
/* background-size: contain; */
cover效果：
contain效果：
背景渐变（linear-gradient）
background: linear-gradient(起始方向, 颜色1, 颜色2, ...);
background: -webkit-linear-gradient(left, red , blue); /* 从左边开始，从红色变成蓝色 */
background: -webkit-linear-gradient(left top, red , blue);/* 从左上角开始，从红色变成蓝色 */
-
背景渐变必须添加浏览器私有前缀
-
起始方向可以是方位名词或者度数，如果省略默认就是 top，方位名词有 top left bottom right，如果起始方向有两个值，代表从对角，比如：left top 代表从左上角
插入图片和背景图片的区别
- 插入图片，我们用的最多，比如产品展示类，移动位置通过盒模型的 padding margin
- 背景图片，我们一般用于小图标背景或者超大背景图片，移动位置通过 background-position
img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* img是个行内块元素 */
}
div {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat;
background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
}
导航栏案例
效果图如下：
<head>
<meta charset="utf-8">
<style>
body {
background-color: #000;
}
a {
display: inline-block; /* 把 a 行内元素转换为行内块元素 */
width: 200px;
height: 50px;
text-align: center; /* 文字水平居中 */
line-height: 50px; /* 我们设定行高等于盒子的高度，就可以使文字垂直居中 */
color: #fff;
font-size: 22px;
text-decoration: none; /* 取消下划线 文本装饰 */
}
a:hover { /* 鼠标经过 给我们的链接添加背景图片 */
background: url(images/h.png) no-repeat;
}
</style>
</head>
<body>
<a href="#">专区说明</a>
<a href="#">申请资格</a>
<a href="#">兑换奖励</a>
<a href="#">下载游戏</a>
</body>
6. CSS三大特性
层叠、继承、优先级，是我们学习CSS必须掌握的三个特性。
层叠性
所谓层叠性是指多种CSS样式的叠加，也是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么后面的会把前面的层叠掉。
样式冲突遵循的原则是就近原则， 哪个样式离结构近，就执行哪个样式。
继承性
子元素可以继承父元素的样式（text-，font-，line- 这些开头，以及color属性可以继承）
inherited：遗传的，继承的意思。
恰当地使用继承可以简化代码，降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式，可以给父级指定一个，这些孩子继承过来就好了。
优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，选择器相同，则执行层叠性，选择器不同，就会出现优先级的问题。
1. 优先级计算公式
关于优先级，我们需要一套计算公式来去计算
优先级：行内 > ID > 类 > 标签，继承或者 * 为 0，!important无穷大。
| 标签选择器 | 计算权重公式 |
|---|---|
| 每个!important 重要的 | ∞ 无穷大 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个ID | 0,1,0,0 |
| 每个类，伪类 | 0,0,1,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 继承或者 * | 0,0,0,0 |
值从左到右，左面的最大，一级大于一级，数位之间没有进制。
2. 权重叠加
我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。
就是一个简单的加法计算：
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover ------> 0,0,1,1
- .nav a ------> 0,0,1,1
数位之间没有进制，比如说：0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0,1,0，所以不会存在10个div能赶上一个类选择器的情况。
3. 继承的权重为0，!important的权重无穷大
我们修改样式，一定要看该标签有没有被选择器选中。
① 如果有被选择器选中，那么以上面的公式来计算权重，谁大听谁的
② 如果没有被选择器选中，那么权重是0，因为继承的权重为0
CSS权重六题
试问这行字体是什么颜色的？
第一题：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第1题</title>
<style type="text/css">
#father #son{ // 0 ，2 ，0 ，0
color:blue;
}
#father p.c2{ // 0 ，1 ，1 ，1
color:black;
}
div.c1 p.c2{ // 0 ，0 ，2 ，2
color:red;
}
#father {
color:green !important; /* 继承的权重为0 */
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
</html>
根据上面注释的权重分析，可知，最后颜色是blue。
第二题：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第2题</title>
<style type="text/css">
#father {
color:red; /* 继承的权重为0 */
}
p {
color:blue; // 0 ，0 ，0 ，1
}
</style>
</head>
<body>
<div id="father">
<p>试问这行字体是什么颜色的？</p>
</div>
</body>
</html>
答案是blue。
第三题：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第3题</title>
<style type="text/css">
div p{ // 0 ，0 ，0 ，2
color:red;
}
#father{ /* 继承的权重为0 */
color:red;
}
p.c2{ // 0 ，0 ，1 ，1
color:blue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
</html>
答案是blue。
第四题：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="关键词1,关键词2,关键词3" />
<meta name="description" content="对网站的描述" />
<title>第4题</title>
<style type="text/css">
div div{ // 0 ，0 ，0 ，2
color:blue;
}
div{ // 0 ，0 ，0 ，1
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div>
试问这行字体是什么颜色的？
</div>
</div>
</div>
</body>
</html>
答案是blue。
第五题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div div div div div div div div div div div div { // 0 ，0 ，0 ，12
color:red;
}
.me { // 0 ，0 ，1 ，0
color:blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">试问这行文字是什么颜色的</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案是blue。
第六题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.c1 .c2 div{ // 0 ，0 ，2 ，1
color: blue;
}
div #box3{ // 0 ，1 ，0 ，1
color:green;
}
#box1 div{ // 0 ，1 ，0 ，1 这两个权重相同了，就近原则，取下面这个，所以颜色是yellow。
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
</body>
</html>
答案是yellow。
网友评论