什么是CSS
- CSS 层叠样式表 (Cascading Style Sheets)
- 用于定义HTML内容在浏览器内的显示样式
CSS发展
- 1996 w3c css1
- 1998 w3c css2
- 现在 w3c css3
为什么学习CSS
- CSS简化HTML相关标签，网页体积小，下载快
- 解决内容与表现分离的问题
- 更好的维护网页，提高工作效率
CSS样式规则
-
由2部分构成：选择器、声明
image.png
CSS选择器
- 全局选择器
- 标签选择器
- ID选择器
- 类选择器
- 群组选择器
- 后代选择器
CSS引用
- 内部样式
<style typs='text/css'>
css样式
</style>
- 行内样式
<div style='css样式'></div>
- 外链样式
<link rel="stylesheet" type="text/css" href="css文件">
- 使用@import导入，由于兼容和加载问题，不建议使用
CSS注释
- CSS注释:/ * 注释语句 * /
CSS使用方法优先级
- 行内样式>内部样式>外部样式
- 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
- 最后定义的优先级最高（就近原则）
选择器权值
- 行内样式：权值为1000
- ID选择器：权值为100
- 类选择器和伪类：权值为10
- 标签选择器：权值为1
- 通配符选择器：权值为0
权值规则
- 统计不同选择器的个数
- 每类选择器的个数乘以相应权值
- 把所有的值相加得出选择器的权值
！important规则
- !important声明高
链接伪类
| 伪类 | 说明 |
|---|---|
| :link | 未访问的链接 |
| :visited | 已访问的链接 |
| :hover | 鼠标悬停状态 |
| :active | 激活的链接 |
- 链接伪类的顺序
：Link > :Visited > :Hover > :Active
- a:hover 必须置于 a:link 和 a:visited 之后，才有效
- a:active 必须置于 a:hover 之后，才有效
- 伪类名称对大小写不敏感
CSS继承和层叠
- 从父元素那继承部分CSS属性
- 可以定义多个样式
- 不冲突时，多个样式可层叠为一个
- 冲突时，按不同样式规则优先级来应用样式
CSS样式命名规则
- 采用英文字母、数字以及“-”和“_”命名
- 以小写字母开头，不能以数字和“-”、“_”开头
- 命名形式：单字，连字符，下划线和驼峰
- 使用有意义命名
CSS字体和文本样式
1、 字体：font-family
定义元素内文字以什么字体来显示
语法：
font-family:[字体1][,字体2][,…]
说明：
• 含空格字体名和中文，用英文引号(“ )括起
• 多个字体，用英文逗号“，”隔开
• 引号嵌套，外使用双引号，内使用单引号
2、文字大小：font-size
font-size: 绝对单位|相对单位
• px 像素
• em/%
3、文字颜色：color
定义元素内文字颜色
语法：
color: 颜色名|十六进制|RGB
4、文字粗细：font-weight
为元素内文字设置粗细
语法：
font-weight: normal | bold | bolder | lighter | 100~900
说明：
默认值：normal
400 等同于 normal，而 700 等同于 bold
5、 文字样式：font-style
为元素内文字设置样式
语法：
font-style: normal|italic|oblique
6、字体变形：font-variant
设置元素中文本为小型大写字母
语法：
font-variant: normal | small-caps
7、text-align
设置元素内文本的水平对齐方式
语法：
text-align: left | right | center | justify
注：该属性对块级元素设置有效
8、line-height
设置元素中文本行高
语法：
line-height: 长度值 | 百分比
说明：一行文字的高度。
行高指文本行的基线间的距离。
9、vertical-align
设置元素内容的垂直方式
语法：
vertical-align: baseline | sub | super | top | text-top
middle | bottom | text-bottom
长度 | 百分比
CSS背景样式
1、 background-color 设置元素的背景颜色。
设置元素的背景颜色
background-color: 颜色｜ transparent
说明
• transparent是全透明黑色(black)的速记法，类似rgba(0,0,0,0)这样的值。
• 颜色值（颜色名｜RGB｜十六进制｜）
• 背景区包括内容、内边距（padding）和边框、不包含外边距（margin）
2、 background-image 把图像设置为背景。
background-image : URL｜ none
设置元素的背景图片
说明
• url地址可以是相对地址也可以是绝对地址
• 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。
• 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
3、 background-position 设置背景图像的起始位置。
设置元素的背景图片的起始位置
background-position : 百分比 ｜值
top ｜right ｜ bottom ｜ left ｜ center
4、background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-attachment: scroll ｜fixed
设置元素的背景图片的显示方式
说明：
scroll ：默认值，背景图片随滚动条滚动
fixed ：当页面的其余部分滚动时，背景图片不会移动
5、 background-repeat 设置背景图像是否重复及如何重复。
repeat ：默认值，背景图片水平方向和垂直方向重复
repeat-x：背景图片水平方向重复
repeat-y : 背景图片垂直方向重复
no-repeat : 背景图片不重复
7、 background 简写属性，作用是将背景属性设置在一个声明中。
background：[background-color] [background-image]
[background-repeat]
[background-attachment]
[background-position] []
说明:
各值之间用空格分割 ，不分先后顺序
列表样式
1、list-style-type 设置列表项标志的类型。
- 无序列表
| 值 | 说明 |
|---|---|
| none | 无标记 |
| disc | 实心的圆点 |
| circle | 空心的圆点 |
| square | 实心的方块 |
- 有须列表
| 值 | 说明 |
|---|---|
| decimal | 从1开始的整数 |
| lower-roman | 小写罗马数字 |
| upper-roman | 大写罗马数字 |
| lower-alpha | 小写英文字母 |
| upper-alpha | 大写英文字母 |
2、 list-style-image 将图像设置为列表项标志。
list-style-image:URL|none
• list-style-position 设置列表中列表项标志的位置。
list-style-position:inside|outside
inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐；
outside:默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐
• list-style 简写属性,用于把所有列表的属性设置于一个声明中。
说明:list-style-image会覆盖list-style-type的设置
边框属性
- border-width 边框宽度
- border-color 边框颜色
- border-style 边框样式
- 边框缩写
border:[宽度] | [样式] | [颜色]
不同放向:
border-top:[宽度] | [样式] | [颜色];
border-left:[宽度] | [样式] | [颜色];
border-bottom:[宽度] | [样式] | [颜色];
border-right:[宽度] | [样式] | [颜色];
内边距属性（设置元素的内容与边框之间的间距）
- padding-top:[长度值] | [百分比]
- padding-right:[长度值] | [百分比]
- padding-bottom:[长度值] | [百分比]
- padding-left:[长度值] | [百分比]
- padding(简写): top right bottom left；
外间距属性（设置元素与元素之间的间距）
- margin-top:[长度值] | [百分比]
- margin-right:[长度值] | [百分比]
- margin-bottom:[长度值] | [百分比]
-margin-left:[长度值] | [百分比] - margin(简写): top right bottom left；
注：文章内容借鉴慕课网
