CSS层叠样式表(一)
目录
CSS层叠样式表(一)一、基本概念二、特性、应用与样式规则三、CSS选择器（CSS的核心）四、不同属性的表示方式一、基本概念
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
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" />
例如
<link rel="stylesheet" href="../style.css" rel="stylesheet">
3、CSS样式规则
选择器{样式属性1:值1;样式属性2:值2;......}
例如
p{font-size: 35px;color: blue;font-family: '隶书';}
三、CSS选择器（CSS的核心）
(1)标签名选择器
标签名{样式属性：值;样式属性：值;}
(2)id选择器：给标签带上id属性，id的属性值不能重复
#id属性值{样式属性：值;样式属性：值;}
(3)类选择器：给标签带上class属性，class属性值可以重复
.class属性值{样式属性：值;样式属性：值;}
四、不同属性的表示方式
1、颜色的表示方式
(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'表示颜色透明度
2、尺寸的表示方式：
(1)em：相对的长度单位。1em = 16px
(2)px：相对的长度单位.像素
(3)in：英寸,绝对长度单位 1in = 2.54cm
(4)cm：厘米,绝对长度单位
(5)mm：毫米,绝对长度单位
3、图像的表示方式
(1).png：体积小，适合网络传输
(2).jpg(.jpeg)：体积大，不适合网络传输
(3).gif：小动画、支持透明
url('图像的全名')
4、文本的样式属性
(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选择器的使用
body{text-align: center;/* background-image: url('../demo/image/1.gif'); */}p{font-size: 35px;color: blue;font-family: '楷书';}#p1{font-size: 15px;color:rgb(185, 15, 15);font-family: '小篆';}.pd{color:rgb(23,45,89);font-family: '宋体';}.pt{color:rgba(134, 78,113,alpha="12" );font-family: '楷书';font-weight: bold;font-style: oblique;}#ps{letter-spacing: 0px;/*字母间距*/word-spacing: 10px;/*单词间距*/line-height: 50px;/*行高*/text-transform: capitalize;text-indent: 2em;
