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;