1.css规则集

p{color:red}

p为选择器

{color:red} 为声明

color为属性

red为属性的值

2.css选择器及其优先级

CSS选择符：

1、id选择器：#myid{background:black}

2、类选择器：.classname{}

3、标签选择器： div{}

4、通配选择器： *{}

5、相邻选择器：h1+div{}

6、子代选择器：h1>div{}

7、后代选择器：h1 div{}

8、属性选择器：a[attr=value]{}

9、伪类选择器：a:hover{}

优先级计算：

元素选择符： 1

class选择符： 10

id选择符：100

元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。

如果优先级相同，则选择最后出现的样式。

继承得到的样式的优先级最低。

3.css背景

1.背景颜色

background-color：black|#000|rgba(0,0,0,1)

默认值为transparent

2.背景图像

background-image：url（path）

3.背景重复

background-repeat: no-repeat|repeat-x|repeat-y

no-repeat：不重复

repeat-x：水平方向重复

repeat-y：垂直方向重复

3.背景定位

background-position：center center（top left） | 50px 50px（50% 50%）

关键词：center center表示水平垂直居中，top left表示背景左上角和元素的左上角对齐，以此类推，只声明一个关键词则另一个默认为center

尺寸：可用px等css尺寸单位的具体数值，或者百分数表示该元素的百分比大小

4.背景关联

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body{ background-attachment:fixed }

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

4.css文本

1.文本颜色

color：black|#000|rgba(0,0,0,1)

2.文本对齐（水平）

text-align： center right left justify

center：居中对齐

right / left：右 / 左

justify：自适应

3.文本修饰

text-decoration： overline| lien-through | under-line

overline：上划线

lien-through：中划线

under-line：下划线

4.文本转换（大小写转换）

text-transform：uppercase | lowercase | capitalize

大写|小写|首字母大写

5.文本缩进（文本第一行缩进）

text-indent: 10px

5.css字体

1.字体系列

font-family：XXX

设置多个字体名称作为一种后备机制

如果字体系列名称超过一个字，他必须用引号

2.字体样式

font-style：normal | italic | oblique

正常|斜体|倾斜

3.字体大小

font-size：10px| 1em| 1rem

绝对大小：如10px，指定一个固定尺寸为该文字的大小，不受父级元素、浏览器等外部因素影响

相对大小：例如：1em、1rem，相对于周围元素的字体大小而变化

em指父级设置的字体大小，如果父元素font-size=20px，子元素font-size=2em=40px（ie有bug）

rem指该文档设置的字体大小，即html标签，计算同em

默认1em=16px

参考链接：W3Cschool

6.css引入

1.外部引入css文件

外部样式在 HTML 页面部分内的元素中进行定义，href定义css文件路径，可是绝对路径或者相对路径：

...

外部引入

2.内部样式

内部样式在 HTML 页面部分内的

内部样式

3.行内样式

行内样式（内联样式）一般用于单一元素的样式设置，要设置行内样式只需将css代码写在元素的style属性中即可：

我设置了内联样式

css学习笔记（不定期更新）