week6---10月13日 CSS样式

一、复习

1、讨论，wrap

2、CSS的概念，存在的三个地方

3、font 的综合设置

4、实验操作抽查

二、新课

（一）文本外观CSS样式属性

文本格式属性	取值和描述
color:前景字体颜色;	预定义颜色、 十六进制 #RRGGBB (#RGB) 十进制rgb(r,g,b)或百分比 rgb(r%,g%,b%)
letter-spacing:字间距;	带单位的固定数值
word-spacing:单词间距;	带单位的固定数值
line-height:行间距;	带单位的固定数字值、字符高度的倍数 相对字符高度的百分比%
text-decoration:装饰;	none(默认)underline下划线(<a>默认) overline上划线line-through删除线 blink闪烁
text-align:对齐方式;	left(默认)  right center justify两端对齐
text-indent:缩进量;	带单位的固定数字值、 或百分比%
text-transform:文本转换;	none(默认) capitalize首字母大写 uppercase 全部大写   lowercase 全部小写
text-shodow:添加阴影;	CSS2包含该属性，有的游览器可能不支持
white-space:空白符处理;	normal(默认) pre预格式化nowrap隐藏
decoration:书写方向;	ltr从左向右   rtl从右向左

（二）行内元素定位——垂直对齐

vertical-align:行内垂直对齐; 

    baseline                            盒子底部与文本基线对齐(默认)

    text-bottom / bottom      盒子底部与文本字符底端对齐

    middle                              盒子与文本字符居中对齐

    text-top / top                   盒子顶部与文本字符顶端对齐

    sub                                   盒子对齐文本下标

    super                                盒子对齐文本上标

（PS：我们还没有学习盒子，请大家记忆属性，等我们到盒子设置时继续实验）

（三）CSS样式表

1、CSS样式表

A、CSS样式表的结构

    CSS样式表由选择符、样式规则(样式属性和属性值)构成：

    选择符 { 属性名1:属性值1;           /* 样式规则1 */

                     属性名2:属性值2;          /* 样式规则2 */

                      …… ;                             /* 样式表注释内容 */

                     属性名n:属性值n;         /* 样式规则n*/

                   }

• 选择符也称选择器，通常是标签名或标签的id、class属性值
• 样式属性必须有属性值，彼此用冒号分开，如果属性值是多个单词必须加引号，如：p { font-family:"sansserif"; }
• 多个属性之间不论是否换行都必须用分号分开，最后可省略
• 样式表中可以使用注释：/* 注释内容 */
• 选择符严格区分大小写，属性名一般小写、属性值对大小写不敏感。

B、基本选择符

CSS的基本选择符有标记名称、标记id属性值、标记class属性值三类

1）标记名选择符

标记名选择符也称为类型选择符，就是用HTML的标记名称作为选择符，等于按标记名分类为页面中某一类的全部标记指定统一的CSS样式。

       标记名 { 样式规则1;

                    样式规则2;

                     ……

                  }

       标记名选择符样式表对页面中该类型的所有标记都有效。

2）id选择符

     HTML标记都可使用标准属性id为该标记指定一个惟一的名称，同一页面中所有标记的id属性值都必须唯一，一个id值只对应一个标记。

    如果使用某个标记的id属性值作为选择符，就等于是为该标记单独定义样式表，该样式表也只对惟一的这个标记有效。

    id选择符必须以“#”开头，“#”与id属性值之间不能有空格。

    #某标记的id属性值

     { 样式规则; }

    例如：#first { 样式规则 }

    则该样式表仅对具有 id="first"属性的标记有效。

3）class类选择符

HTML标记的class属性值就是一个样式的类名，任意不同类型的标记都可以使用同一个类名，如果用class类名作为选择符，那么该样式表则对所有使用该class属性的标记有效，使用类选择符可以为多个不同类型的标记指定样式。

       class类选择符必须以“.”开头，“.”与类名之间不能有空格。

       .样式类名  { 样式规则; }

       该样式表对所有使用calss="样式类名"属性的标记都有效，就是说任何使用该calss属性值的标记都可使用该样式。

    例如：.sec { 样式规则; } 

（四）实训练习