1. css概述
Cascading Style Sheets, 层叠样式表，又叫级联样式表，简称样式表。 给HTML标签添加样式， 美化网页
2. css 的三种引入方式
2.1 行内样式或内联样式
特点：在HTML标签上进行样式的声明
语法：
<Any style="样式声明;color:red;样式声明"></Any>
样式声明：属性名:属性值
缺点：结构(html)与样式(css,style)不分离，代码重复，不好维护
2.2 内部样式
在网页中一个独立的地方书写样式规则，在head标签中，写一对style标签，在style内书写样式规则
样式规则语法：
选择器 {
样式声明（属性名:属性值）；
样式声明（属性名:属性值）;
}
缺点：结构样式虽然有分离，但是分离不彻底，代码不能重用
2.3 外部样式，常用
在独立于网页的任意地方，新建一个样式表文件(.css为后缀)，在此文件内书写样式规则，最后在html文件内，head标签内引入该css文件
<head>
<link rel="stylesheet" href="css文件的路径">
</head>
优点：结构清晰，结构与样式彻底分离，代码可以重用，好维护
优先级：行内样式 > 内部样式 > 外部样式
3. 选择器(重点)
- 通用选择器
- 特点： 可以匹配html的任意标签
- {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
只能写所有标签都应用的样式
}
注意：慎用
- 元素(标签，标记)选择器
以html的标签名作为选择器
语法：
<div>红色</div>
<div>绿色</div>
div {
color: red;
}
+ id 选择器
以html标签的id属性值作为选择器,选择器前需要加上#
<div id="app"></div>
#app {
color: red;
}
注意：id和class的值不能乱起，尽量语义化，不能以数字开头，不能掺杂特殊符号(@#$%^&*!),可以添加的-_,id的值是唯一的
```
<div id="a1"></div> 对
<div id="1a"></div> 错
<div id="a1"></div> 错
<div id="nav-tab"></div> 错
```
-
类选择器(class选择器)
以html标签的class属性值作为选择器，选择器前加上点(.)
.nav {
width: 200px;
height:200px;
}
-
群组选择器
将多个选择器放到一起进行样式的设置
语法：选择器1,选择器2,选择器3,… {}
<div class="div1">a</div>
<p class="p1">b</p>
<span id="span1">c</span>
.div1, .p1, #span1 {
color: red;
}
- 后代选择器
通过元素的后代关系作为选择器
<div>
<p>
<a class="a1">红色</a>
</p>
</div>
<div>
<a class="a1">不变色</a>
</div>
div .a1 {
//找的是页面上div里有class为a1的元素
}
-
子代选择器
通过元素的子代关系作为选择器
<div>
<h1>
<p>
<a class="a1">红色</a>
</p>
</h1>
</div>
<div>
<a class="a1">不变色</a>
</div>
div>h1>p>.a1 {
color: red
}
-
伪类选择器
匹配元素的行为效果，不同的状态
- :hover 当鼠标在此元素上时，所修改的样式
- :link 给超链接a标签使用，匹配尚未访问的样式
- :visited 给超链接使用，匹配访问过的样式
- :focus 匹配input输入框获取焦点的时候
- :active 匹配超链接，文本，输入框等被激活的时候
选择器的优先级
优先级：权值(权重的大小)，权值越大优先级越高，反之越低
元素选择器 1
类选择器 10
伪类选择器 10
id选择器 100
行内样式 1000
4. 文本的样式
+ color: 设置文字的颜色，取值颜色单位
+ text-align: 设置水平对齐方式，left/center/right,给块级元素加
+ line-height: 设置文本的行高，一般都会用来设置垂直方向居中
+ 纯数字： 1， 2， 3，这个数值是基于自身文字大小来算的，值*自身文字大小
+ 数字+px, 100px
+ 百分比：这个数值是基于自身文字大小来算的
+ text-decoration: 设置文本的装饰效果
+ none：不装饰，普通文本
+ underline: 下划线
+ overline: 上划线
+ line-through: 中划线
+ text-indent：设置段落的首行缩进，取值10px , 1em,一般取值建议使用2em,如果用px，根据一个文字的大小去设置，百分比是基于父元素
+ text-shadow: 设置文本的阴影，每个值用空格分开
+ 必需的，水平偏移位置，取值为px，可以为负值，值为正向右偏移
+ 必须的，垂直偏移位置，取值为px，可以为负值，值为正向下偏移
+ 模糊大小，取值px，越大越模糊
+ 阴影颜色，颜色单位
5. 字体的样式
+ font-size: 设置字体大小，一般单位px，手机端常用rem
+ font-family: 设置文字的字体
p {
font-family: "微软雅黑","方正幼圆"
}
+ font-style: 设置文字的特殊样式
+ normal: 默认值，正常
+ italic: 斜体
+ font-weight: 设置字体粗细
+ normal: 正常
+ bold: 粗体
+ bolder: 更粗
+ lighter：更细
+ 100~900的数字，100,200,300...
+ 400 等同于 normal， 700等同于bold
+ font : 设置字体，是一个复合属性
顺序："font-style font-weight font-size font-family"
注意：必须写font-size 和 font-family
6. css中常见的长度单位
+ px，像素单位
+ em, 如果em应用到了font-size身上，那么这个em就是根据自身的font-size来计算，如果用在其他属性身上，是根据父元素的font-size来计算
+ rem，相对单位，永远相对于根标签(html)的font-size来计算，默认1rem=16px
7. css中表示颜色的几种写法
+ 颜色英文单词
+ rgb(r,g,b), r、g、b取值均为0~
255 => 文艺程序员
+ rgba(r,g,b,alpha),alpha取值为0~1，代表透明度，值越小越透明
+ 16进制表示法，取值只能是0~9或a~f
#aabbcc
#ffffff => #fff
#ff0000 => #f00
337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
