css----层叠样式表详细知识点大全

css—层叠样式表

一：结构和表现分离

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。网页中所有的样式都由css来进行设置，即结构和样式分离。

二：应用css的方法

1：页面嵌入式

常放在head和body之间。

  <style type="text/css">
		 
		    Css的样式规则
		  
		 </style>
		 

2：行内嵌入式

给标签加入style属性，设置样式。

3： 独立css文件

先创建独立的样式文件(.css),然后在页面中导入样式文件。

     第一步：创建样式文件(.css)
	 
	 第二步：在页面文件中导入样式文件

<link href="样式文件的地址" type="text/css" rel="stylesheet" />

三：css选择器

css选择器被称为css的核心。

1：标签名选择器

标签名{
样式属性：值；
样式属性：值；
}

2：id选择器

运用id选择器的方法是给标签带上id标签，id标签的属性值不能重复。
#id属性值{
样式属性：值；
样式属性：值；
}

3：类选择器

给标签带上class属性，class属性值可以重复。
.class属性值{
样式属性：值；
样式属性：值；
}

四：颜色的表示

1：颜色名

如red、blue、green

2：十六进制

#rrggbb:r、g、b是三原色，十进制取值在0~F之间。

3：函数方式

rgb(r、g、b),r,g,b是三原色，十进制取值在0~255之间。
rgba(red,green,blue,alpha)alpha表示颜色透明度。

五、尺寸的表示方式：

(1)em：相对的长度单位。1em = 16px
(2)px：像素，相对的长度单位.
(3)in：英寸,绝对长度单位 1in = 2.54cm
(4)cm：厘米,绝对长度单位
(5)mm：毫米,绝对长度单位

六、图像的表示方式：

(1)png：体积小，适合网络传输
(2)jpg(.jpeg)：体积大，不适合网络传输
(3)gif：小动画、支持透明。url(‘图像的全名’)

七、文本的样式属性

(1)字型：font-family: ‘宋体’;
(2)字体加粗：font-weight: bold;
(3)字体样式：font-style: italic;
(4)字母间距: letter-spacing: 0px;
(5)单词间距：word-spacing: 10px;
(6)行高：line-height: 50px;
(7)水平对齐方式：text-align
(8)控制英文字符的大小：text-transform
(9)设置文本的下划线、上划线、删除线：text-decoration
(10)首行文本的缩进：text-indent
(11)文本添加阴影效果：text-shadow：水平阴影距离 垂直阴影距离 模糊半径 颜色

八:css继承性和层叠性

1:css的继承性

在书写css样式表时，子标签会继承父标签的某些样式。

p{color:"red";}
<p>
西安邮电大学
<span>西安电子科技大学</span>	
</p>

此时，“西安邮电大学”和“西安电子科技大学”都为红色。边框属性、定位属性、内外的间距属性、元素的宽高属性、布局属性、背景属性不具有继承性的。

2：css的层叠性

同一个标签可以应用不同的样式

九：css的优先级

优先级取决于选择器的权重。

选择器	权重
标签名	1
类	10
id	100

(1)权重值越大，优先级越高

(2)继承样式的权重值为0

(3)行内样式优先

(4)当权重值相同时，CSS遵循就近原则

(5)CSS定义了一个!important命令，该命令被赋予最大的优先级。

十：属性选择器

“E”代表标签名，“att”表示标签的属性。

1：E[att^=value]——>属性以value开头
2: E[att$=value]——> 属性以value结尾
3：E[att*=value]——> 标签属性包含value

十一：复合选择器

多个选择器混合使用，选择器之间用逗号隔开。

   p,.dd,#d1{
    color: red;
   }

十二：关系选择器

(1)子元素选择器(>)：

h1>strong{ 
     color:blue;
 }

(2)兄弟选择器：

A、临近兄弟选择器：使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲， 而且第二个元素必须紧跟第一个元素。

 div>p+div{ 
                 color: chartreuse;
                } 

B、普通兄弟选择器：使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲， 但第二个元素不必紧跟第一个元素。

div>#p2~div{
                color: chartreuse;
                }

十三：伪类选择器

1：E:first-child{ 样式规则 }

匹配父元素的第一个子元素E。要使该属性生效，E对象必须是某个对象的子元素。

2：E:last-child{ 样式规则 }

匹配父元素的最后一个子元素E。要使该属性生效，E对象必须是某个对象的子元素。

3：E:nth-child(n){ 样式规则 }

匹配父元素的第n个子元素E。要使该属性生效，E对象必须是某个对象的子元素。

4：E:nth-last-child(n){ 样式规则 }

匹配父元素的倒数第n个子元素E。要使该属性生效，E对象必须是某个对象的子元素。

十四：empty选择器

1：E:empty{ 样式规则 }

匹配没有任何子元素（包括text节点）的元素E。

2：E:link{ 样式规则 }

设置超链接a在未被访问前的样式。

3：E:visited{ 样式规则 }

设置超链接a在其链接地址已被访问过时的样式。

4：E:hover{ 样式规则 }

设置元素在其鼠标悬停时的样式。

5：E:active{ 样式规则 }

设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
link—hover—visited—active(应按顺序设置)

十五：列表的样式规则

(1)list-style-image：用来设置列表项的标记(项目符号)图像。

(2)list-style-style：用来设置列表项的项目符号样式。若值为none则没有项目符号

(3)list-style-position：设置项目符号和文本的位置关系。

A: outside： 列表项目标记放置在文本以外，且环绕文本不根据标记对齐

B:inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐 。

十六：盒子模型——网页布局的基础

(1)边界(margin)

盒子的边框与包含该盒子的容器的之间的距离。

A、margin-top：上边界

B、margin-right：右边界

C、margin-bottom：下边界

D、margin-left: 左边界

(2)填充(padding)

内补白(内边距)，盒子中的内容与盒子边框之间的距离，一般不要对边设置。

A、padding: 上 右 下 左

B、padding-top:上边距

C、padding-right:右边距

D、padding-bottom：下边距

E、padding-left：左边距

(3)边框(border)

盒子的边框线

A、border-style:边框的样式【上、右、下、左】

B、border-width:边框的宽度【上、右、下、左】

C、border-color:边框的颜色【上、右、下、左】

D、border(综合设置边框): 边框的宽度 边框的样式 边框的颜色

E、border-radius(圆角边框):水平半径参数/垂直半径参数

(4)清除默认边距

  *{
		      padding: 0px;
			  margin: 0px;
		   }

‘*’：通配符，代表所有元素。

(5)背景图像：

background-image:url(图片路径)
background-repeat:

repeat 默认值，图像在水平和垂直方向上都平铺

no-repeat：不平铺

repeat-x：水平平铺

repeat-y：垂直平铺