CSS:层叠样式表（一）

1、结构和表现分离

  (1)html只负责展示内容，搭建网页的基本结构。不用标签的属性设置样式
  
  (2)所有的样式都由CSS来进行设置

2、应用CSS的方法：

(1)页面嵌入式：

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

(2)行内嵌入式：

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

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

     A、第一步：创建样式文件(.css)
	 
	 B、第二步：在页面文件中导入样式文件
	 
	    <link href="样式文件的地址" type="text/css" rel="stylesheet" />

3、CSS样式规则：

选择器{

    样式属性1:值1;
	样式属性2:值2;
	......
	  }

例如：

p{
	font-size: 35px;
	color: blue;
	font-family: '隶书';
}

4、CSS选择器：

是CSS的核心

(1)标签名选择器

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

(2)id选择器：

给标签带上id属性，id的属性值不能重复

  #id属性值{
		      样式属性：值;
			  样式属性：值;
		   }

(3)类选择器：

给标签带上class属性，class属性值可以重复

 .class属性值{
		      样式属性：值;
			  样式属性：值;
		   	 }

5、颜色的表示方式：

(1)颜色名：如red、blue

(2)十六进制：#rrggbb(r,g,b是三原色,十六进制取值在0~f)

         #aadd45

(3)函数方式：rgb(r,g,b) r,g,b是三原色,十进制取值在0~255之间.

         rgba(red,green,blue,alpha) 'alpha'表示颜色透明度

6、尺寸的表示方式：

尺寸	Value
em	相对的长度单位。1em = 16px
px	相对的长度单位.像素
in	英寸,绝对长度单位 1in = 2.54cm
cm	厘米,绝对长度单位
mm	毫米,绝对长度单位# 7、图像的表示方式：

7、图像的表示方式：

图像名	Value
.png	体积小，适合网络传输
.jpg(.jpeg)	体积大，不适合网络传输
.gif	小动画、支持透明

url(‘图像的全名’)

8、文本的样式属性

(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：水平阴影距离  垂直阴影距离  模糊半径  颜色