CSS（层叠样式表）入门

一、css简介

全称：Cascading　　style　　sheets
　　　　　　层叠　　样式　　列表

二、css作用：

1、结构和样式分离的方式，便于维护与后期的修改

2、可以使用多套样式，使网页有任意样式切换的效果

3、使页面载入的更快，降低服务器的成本

三、样式表的分类：外部、内部、行内样式

1、创建内部样式表

例子：

p{
background-color:red;
font-size:20px;
}

2、选择器;

（1）能够选择定位到需要改变的标签元素
（2）作用：用来选择或者找到需要添加样式的位置
（3）常用选择器：标签选择器、类选择器

例：类选择器：

.p1{
			font-family: 黑体;
			background-color: yellow;
		}

3、使用内部样式完成背景设置：

1、background-color 颜色值 颜色作为背景颜色
2、background-image 图片位置 图片作为背景图片
3、background-repeat repeat repeat-x repeat-y no-repeat 背景图片的重复方向
4、backgorund-attachment scroll fixed 背景是否随着滚动条进行滚动
5、backgorund-position 背景图片的起始位置
6、backgorund 背景样式属性的组合

backgorund-position
一、
1、top left
2、center center
3、bottom right
二、
第一个是水平位置的百分比
第二个值垂直位置的百分比
x% y%
三、
第一个是水平位置
第二个值垂直位置
xpx ypx

4、创建并使用外部样式表

外部样式表就是新建一个文档，后缀是.css，里面全是css
通过link插入到html标签中
作用：使得网页的表示层和结构层彻底分离
//用于定义文档和外部资源的关系

//关系 //定义文件样式的类型 引用具体的文件

5、文本类的样式

1、对齐方式、文本修饰、文本转换缩进
color 表示颜色内容 设置文本颜色
direction ltr rtl 文本的方向/书写的方向
letter-spacing npx(n可以是负数) 字符的间距
line-height npx 行高
text-align left/right/center/justify(两端对其) 文本对齐方式

direction：ltr;
text-align:justify;
1、如果是字母和汉字的话，两者效果一样。
2、对于阿拉伯语来说，不一样。

text-decoration none,underline,overline,line-through 文本修饰下划线
text-shadow h-shadow，v-shadow,blur,color 文本设置阴影
text-transform none，capitalize,uppercase,lowercase 改变字母大小写
text-indent npx,xem 首行缩进

6、字体类样式：

font系列：font-style font-family

属性如下：
font-family 隶书、仿宋、楷体 设置字体
font-style normal、italic、oblique 设置斜体效果
font-weight normal、blod、100-900 文本的粗细设置
font-size npx 字体大小

四、列表

1、list-style-type none,disc,circle,square… 设置列表项目外观
2、list-style-position inside,outside 列表符号的位置
3、list-style-image url,none 把图片设置为列表项目的标记
4、list-style

无序列表：
none disc circle square decimal
有序列表：
lower-roman upper-roman lower-latin upper-latin

五、伪类样式

定义：通常情况下，超级链接的样式，称为伪类。
作用：设置超级链接的4种状态
注意：1、伪类是用在超级链接上的额效果比较多，但是超级链接不是伪类
　　　2、伪类是选择器

1、伪类选择器 状态伪类

（1）a:link 未访问的链接
（2）a:visited 已访问的链接
（3）a:hover 鼠标移动到链接上（浮动、悬停）
（4）a:active 向被激活的元素添加样式
（5）：focus 选择拥有键盘输入焦点的元素

2、伪类分类 分为2类

（1）状态伪类
（2）结构性伪类
（结构性）伪类选择器
　　1）：first-child 选择元素的第一个子元素
　　2）：last-child …最后一个子元素
　　3）：nth-child() 选择某个元素的一个或多个特定的 子元素
　　4）：nth-last-child() 选择某个元素的一个或多个特定的 子元素,从最后一个开始算。
　　5）：first-of-type 选择一个上级元素下的第一个同类子元素

六、伪元素选择器

伪类选择器：选择一整段内容进行设置
伪元素选择器：选择其中的额一段或者一行进行设置
::selection 选择指定元素中被用户选中的额内容
::before 可以在内容之前插入新内容
::after 可以在内容之后插入新内容
::first-line 选择指定选择器的首行
::first-letter 选择文本的第一个字符

七、css其他选择器：

id，* 选择指定元素被用户选中的内容
逗号选择器 联合选择器
空格选择器 子孙（后代）选择器

选择器 子选择器（不是子孙后代）
+选择器 相邻兄弟选择器
[　] 属性选择器

div是一个容器，后面画页面的重点

八、css的优先级

优先级只针对同一个对象而言

1、！important
2、行内样式
3、ID选择器
4、类（class）选择器
5、标签选择器
6、通配符*
7、浏览器的默认属性