css知识点汇总

CSS

一、 CSS 的发展史

1. css 1.0
2. css 2.0 Div+css,Html 与css 分离的思想
3. css 圆角、阴影动画

二、 三种引入方式

将css代码发挥其修饰网页的作用。

1. 行内式

   通过标签内的styles属性设置具体的css属性。

2. 内部样式

   在head标签内，设置style标签，在标签中写css代码。

3. 外部样式

   通过link标签或者@import url()导入外部样式。

   link标签添加样式，网页和css样式是同步加载的。

   @import url() 是先加载Html再加载css样式，因此不常用。

三、 选择器

​ 选择哪一些标签进行添加修饰

分为三类：

1. 标签选择器 p{ }
2. 类选择器 .class{ }
3. id 选择器 #_id{ } id选择器保证全局唯一

2. 层次选择器

1.后代选择器

body p{
    attribute
}

2.子选择器

body>p{
    attribute
}

body与p标签的关系为父子

3. 相邻兄弟选择器,样式应用于当前选定标签之后的标签

.active + p{
    attribute
}

4. 通用兄弟选择器,样式应用于除当前应用标签之外的所有p标签

.active ~ p{
    attribute
}

3. 伪类选择器

/*
    应用于父元素下的第二个p标签
*/

p:nth-of-type(2){
    color: blue;
}

/*
    应用于父元素下第一个子元素为p标签，如果第一个子元素的标签不为p标签，那么不应用。
*/
p:nth-child(1){
    color: red;
}

/*
	应用于父元素的第一个子元素是p标签的元素。
*/

p:first-child{
    color:blue;
}
/*
	
*/
p:last-child{
应用于父元素的倒数第一个子元素是p标签的元素
}

4. 属性选择器

贰：通过选择行内选择器的属性，来给添加了相同的行内选择器属性添加新的css样式。

格式为 ：{标签名称}[样式名称={样式值}] note: {}表示取具体的值

​ = 绝对等于

*= 包含于

^= 以...开头

$= 以...结尾

四、 美化网页

1、 span标签

​ 一般用span标签来处理特殊格式的文字。

2、字体样式

​ font-family：字体；

note：em这个单位是一个缩进的意思。

3、 文本样式

1. 知识说明

​ RGB 对应 #00（R） 00(G) 00(B)

​ RGBA 自后一个字母A，表示透明度的意思

2. 常用样式

   text-align：文字居中；

   line-height：行高；

   text-indent： 首行缩进；

   text-decoration： 装饰（下划线、中划线和上划线之类的）

   vertical-align:middle; 文本图片水平对齐