CSS 简介

简介：

CSS(Cascading Stytle Sheets)

    “层叠样式表”或“级联样式表”简称样式表，它允许网页设计者定义网页元素的样式，包括字体、颜色及其他高级样式。

样式表有一组决定显示格式的规格组成，这些规则用于定义网页中任何HTNL元素内容的显示格式。

一个CSS规则，由“选择器”和“格式申明语句”构成。

选择器：就是选择HTML标记，将要加样式的HTML标记

格式申明语句：由{}构成，{}中是各种格式语句

一条格式语句，有“属性名：属性值”构成，英文“；”结束

属性名，就是CSS中的各种属性，这些属性名都是固定的

属性值，一个属性名可以去不同的值，这个值不假引号

CSS中的数字单位是px，这个px不能省略

CSS选择器：

1. 基本选择器：

1. “*”选择器，通配符

1. 描述：将匹配所有的HTML标记，所有的标记都会改变

2. <style type="text/css">
     *{color:red;}
   </style>

3. “*”尽量少用，IE6不支持

2. 标签选择器

1. 描述：将匹配指定的HTML标记

2. 语法：
   

3. <style type="text/css">
     h1{
     color:red;
     }
   </style>

4. 注意：CSS标签选择器，与HTML标记的名称一样，但不能加<>

3. class选择器（类选择器）

1. 描述：给一类HTML标记加样式，每个HTML标记都有一个class属性，且class的值一样。class属性是公共属性，每个HTML都有。

2.  类选择器的名称，必须以“.”开头，后跟HTML标记的class属性的值

4. id选择器

1. 描述：给制定id的元素添加样式

2. 注意：网页中HTML标记的id属性的值，必须是唯一的，同一个id只能使用一次

3. 每一个HTML标记中都有一个id属性

4. 注意：id属性大多时候是给js来使用的；class只能给css用，不能给js使用

5. id选择器的名称，必须以“#”开头，后跟HTML标记的id属性的值
   

2. 组合选择器：

1. 多元素选择器

1. 描述：给多个元素加同一个样式,多个选择器之间用“，”隔开

2. h1,p,div,body{ color:red; }

2. 后代元素选择器

1. 描述：给某个标签的某一个后代元素加样式,选择器之间用空格隔开

2. div .title {color : red;}

3. 子元素选择器

1. 描述：给某个元素的子元素添加样式

2. div>h1.title{color：red；}

3. CSS伪类选择器（给链接加的样式，链接的不同状态加的样式）

1. 一个超链接，有四个状态

1. 正常状态(:link)：在鼠标没放上之前链接的样式

2. 放上状态(:hover)：鼠标放到链接上是的样式

3. 激活状态(:active)：按住师表左键不松开的样式，这个状态特别短暂

4. 访问过的状态(:visited)：按下鼠标左键，并弹起，这是的样式效果

1. a:link,a:visited{ color:#444; text-decoration:none; }      //正常状态和访问过的状态合并   

2. a:hover{ color:#999999;text-decoration:underline; }    //鼠标放上单做效果
   

CSS尺寸属性：

• width：元素宽度，一定要加px单位

• height：元素高度
  

CSS字体属性：

• font-size：文字大小，    fon-size:14px;

• font-family：字体，    font-family：微软雅黑；

• font-style：斜体，取值：italic，    font-style:italic;

• font_weight：粗体，取值：bold，    font_weight:bold;

CSS文本属性：

• color：文本颜色

• text-decoration：文本修饰线，取值：none（无），underline（下划线），overline（上划线），line-through（删除线）

• text-align：文本水平对齐方式，left，center，right

• line-height：行高，固定值或者百分比

• text-indent：首行缩进，    text-indent：28px

• letter-spacing：字间距