一、复习
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样式表
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 { 样式规则; }
(四)实训练习