1.CSS 认识
层叠样式表 Cascading Style Sheets 是用来规定HTML文档的呈现形式，简单地说就是给网页设置布局样式，丰富网页的呈现状态，如果说吧HTML标签比作词组可以写成作文，那么CSS就是字体,字体颜色,修饰词,以及纸张背景等。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标题</title>
<style type="text/css">
.p1{
color:red;
font-size: 54px;
}
</style>
</head>
<body>
<!-- 内容 -->
<p class="p1">添加了css样式的段落</p>
<p>未添加css样式的段落</p>
</body>
</html>
2.CSS 定义和使用
CSS样式由一条或多条以分号隔开的样式声明组成，每条声明包含着一个CSS和该属性的值,属性和值用冒号分割。
例：
color:red;font-size:54px
3.CSS 使用方式
-
内嵌样式：直接在元素上应用样式,使用全局属性style定义。
<p style="color:red; font-size:54px">内嵌css样式的段落</p> -
文档内嵌样式：上面的内嵌样式用起来比较随意，而且属性优先级是最高的，但是如果要批量管理样式的话就有些麻烦，比如需要将一个网页中的所有段落的字体大小改成12px,那么如果一个一个去使用全局属性style改的话效率太低了。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>标题</title> <style type="text/css"> p { color:red; font-size: 12px; } </style> </head> <body> <p>添加了css样式的段落</p> <p>添加了css样式的段落</p> <p>添加了css样式的段落</p> <p>添加了css样式的段落</p> <p>添加了css样式的段落</p> </body> </html> <!-- 这样就不需要一个个去修改了 只要是body中的 p标签都会应用 定义的css样式，在style中定义即可，而且一个style中可以定义多个选择器(css样式) --> -
外部样式表：单独以.css为文件扩展名定义的样式表。
试想一下如果一套样式要在多个网页中进行使用的话，
那我们如果在每个HTML文档中都定义相同的一个选择器的话，
在开发中叫做代码冗余，不是一个优秀程序员该有的习惯，
在编程的过程中，有一段代码如果重复写了两次或考虑到此模块的代码可能在其他地方会用到的时候，
我们就要学会将其当独封装起来，便于我们后期重用。定义文件styles.css p { color:red; font-size: 12px; } a{ background-color:green; paddomg:5px } 导入外部样式表： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>标题</title> <!-- 导入外部样式表 --> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p >使用外部样式 添加了css样式的段落</p> <p >使用外部样式 添加了css样式的段落</p> <p >使用外部样式 添加了css样式的段落</p> <p >使用外部样式 添加了css样式的段落</p> </body> </html> -
样式表中也可以导入其他的样式表
使用@import 导入css名称即可 使用@charset 可以声明样式表的字符编码(如果不声明的话默认是使用HTML的编码) 定义文件styles2.css @import "styles.css" @charset "UTF-8"; spn { color:red; font-size: 12px; } -
浏览器样式：即一个元素未设置样式时，浏览器应用在它身上的默认样式，这些样式会因为浏览器而略有差异，不过大体一致。
3.CSS 样式的层叠和继承
-
样式层叠：即浏览器显示元素时，元素的CSS属性值应用的优先级。
(1)：元素内嵌样式：用元素的群居属性style定义的样式 (2)：文档内嵌样式：定义在style元素中的样式 (3)：外部样式：用link元素导入的样式 (4)：用户样式：用户在custom.css中定义的样式 (5)：浏览器样式：浏览器应用的默认样式 注意：把样式属性的值标记为中要(important)，可以改变正常的层次顺序。 显示的段落颜色是绿色。 p{ color:red | important; } <p style="color:green"> 这个段落会因雇佣important 的属性</p> -
样式冲突：如果有两个同一层次的样式，并且里面都有相同的属性时，这个时候就要去解决冲突，解决冲突的前提是我们要了解浏览器默认是如何处理这些属性的。
优先级： (1)样式的寻则其中id值的数目 (2)选择器中其他属性和伪类的数目 (3)选择器中元素名和为元素的数目 -
样式继承：浏览器在显示某元素时，如果找不到其样式属性，那么就会遵循继承机制。也就是使用父类元素的样式属性。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>标题</title> <style type="text/css"> div { color:red; font-size: 12px; } </style> </head> <body> <div ><p >添加了css样式的段落</p></div> </body> </html> <!-- 运行 显示P标签中的样式使我们定义的div 样式，因为p是div的子元素--> <!-- 注意：并不是所有的属性都可以继承，只有与元素外观(文字、颜色、字体等) 相关的样式才会被继承。 -->
5.CSS 单位
- 颜色
色值
- 表示更复杂的颜色
| 函数 | 说明 | 示例 |
|---|---|---|
| rgb(r,g,b) | 用RGB模型表示 | color:rgb(112,128,144) |
| rgba(r,g,b,a) | 用RGB模型表示,外加一个用于表名透明度的α值(0表示 全透明,1表示完全不透明) | color:rgb(112,128,144) |
| hsl(h,s,l) | 用HSL模型表示(色相、饱和度和名度) | color:hsl(120,100%,22%) |
| hsla(h,s,l,a) | 用HSL模型表示,只是增加了一个透明度的α值 | color:hsla(120,100%,22%,0.4) |
- 绝对长度：像是世界的度量单位
| 单位标识符 | 说明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 镑(1磅=1/72英寸) |
| pc | pica(1pica=12磅) |
- 相对长度
| 单位标识符 | 说明 |
|---|---|
| em | 与元素字号挂钩 |
| ex | 与元素字体的"高度挂钩" |
| rem | 与根元素的字号挂钩 |
| px | css像素(假如显示设备的分辨率为96dpi) |
| % | 另一属性的值的百分比 |
用法：
如果设置<P>标签的高度是2em,那么他的高度就是其段落字体高度的两倍。
em，ex，rm用法相同。
注意：px原本是相对单位，但是在实际使用中却变成了绝对单位因此就没那么灵活了，一般使用em的比较多。使用百分比要注意,并不是所有的属性都能使用这个单位。
-
算式为值
这个了解一下即可,因为支持的浏览器并不多，用起来也比较麻烦 width:calc(80% - 20px); -
角度
| 单位标识符 | 说明 |
|---|---|
| deg | 度(取值范围: 0deg ~ 360deg) |
| grad | 百分度(取值范围: 0grad ~ 400grad) |
| rad | 弧度(取值范围: 0rad ~ 6.28rad) |
| true | 圆周(取值范围: 1turn = 360deg) |
- 时间
| 单位标识符 | 说明 |
|---|---|
| s | 秒 |
| ms | 毫秒(1s = 1000ms) |
网友评论