温故而知新——CSS篇

什么是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使用方法优先级

• 行内样式>内部样式>外部样式

1. 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
2. 最后定义的优先级最高（就近原则）

选择器权值

• 行内样式：权值为1000
• ID选择器：权值为100
• 类选择器和伪类：权值为10
• 标签选择器：权值为1
• 通配符选择器：权值为0

权值规则

• 统计不同选择器的个数
• 每类选择器的个数乘以相应权值
• 把所有的值相加得出选择器的权值

！important规则

• !important声明高

链接伪类

伪类	说明
:link	未访问的链接
:visited	已访问的链接
:hover	鼠标悬停状态
:active	激活的链接

• 链接伪类的顺序

：Link > :Visited > :Hover > :Active

1. a:hover 必须置于 a:link 和 a:visited 之后，才有效
2. a:active 必须置于 a:hover 之后，才有效
3. 伪类名称对大小写不敏感

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: 长度值 | 百分比
说明：一行文字的高度。
行高指文本行的基线间的距离。

image.png
image.png

9、vertical-align

设置元素内容的垂直方式
语法：
vertical-align: baseline | sub | super | top | text-top
middle | bottom | text-bottom
长度 | 百分比

image.png
image.png

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；

注：文章内容借鉴慕课网