温故而知新——CSS篇

2017-11-15 本文已影响0人 jia林

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

image.png

9、vertical-align

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

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；

注：文章内容借鉴慕课网