教学幻灯片HTML5CSS3JavaScript 网页设计案例课堂 网页设计 网站设计 网页设计入门 自学教程 教材 html5标准 计算机开发 附光盘8VIP

第8章CSS3字体与段落属性,本章内容,8.1字体属性8.2文本高级样式8.3段落属性8.4综合实例1设置网页标题8.5综合实例2网页简单图文混排,8.1字体属性,8.1.1字体font-family8.1.2字号font-size8.1.3字体风格font-style8.1.4加粗字体font-weight8.1.5小写字母转大写字母font-variant8.1.6字体复合属性font8.1.7字体颜色color,8.1.1字体font-family,font-family属性用于指定文字字体类型，例如宋体、黑体、隶书和TimesNewRoman等，即在网页中，展示字体不同的形状。具体的语法为：下所示。font-family:name或font-family:cursive|fantasy|monospace|serif|sans-serif。实例：8.1.html,8.1.2字号font-size,在CSS3规定中，通常使用font-size设置文字大小。其语法格式为：font-size:数值|inherit|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length。实例：8.2.html,8.1.3字体风格font-style,font-style通常用来定义字体风格，即字体的显示样式。在CSS3新规定中，font-style的语法格式为：font-style:normal|italic|oblique|inherit。实例：8.3.html,8.1.4加粗字体font-weight,通过设置字体粗细，可以让文字显示不同的外观。通过CSS3中的font-weight属性可以定义字体的粗细程度。其语法格式为：font-weight:100-900|bold|bolder|lighter|normal;。实例：8.4.html,8.1.5小写字母转大写字母font-variant,font-variant属性设置大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用大写字体的字母与其余文本相比，其字体尺寸更小。在CSS3中，其语法格式为：下所示font-variant:normal|small-caps|inherit。实例：8.8.html,8.1.6字体复合属性font,多个属性分别书写相对比较麻烦。CSS3样式表提供的font属性解决了这一问题。font属性可以一次性地使用多个属性的属性值定义文本字体。其语法格式为：font:font-stylefont-variantfont-weightfont-sziefont-family。实例：8.6.html,8.1.7字体颜色color,在CSS3样式中，通常使用color属性来定义颜色。例如bodycolor:red。实例：8.7.html,8.2文本高级样式,8.2.1阴影文本text-shadow8.2.2溢出文本text-overflow8.2.3控制换行word-wrap8.2.4保持字体尺寸不变font-size-adjust,8.2.1阴影文本text-shadow,在显示字体时，有时根据需求，需要给出文字的阴影效果，以增强网页整体的吸引力，并且为文字阴影添加颜色。这时就需要用到CSS3样式中的text-shadow属性。但在CSS3中又重新定义了它，并增加了不透明度效果。其语法格式为：text-shadow：none|none|,*或none|,*。实例：8.8.html,8.2.2溢出文本text-overflow,text-overflow属性用来定义当文本溢出时是否显示省略标记，即定义省略文本的出来方式。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。text-overflow语法为：text-overflow：clip|ellipsis。实例：8.9.html,8.2.3控制换行word-wrap,当在一个指定区域显示一整行文字时，如果文字在一行显示不完时，需要进行换行。如果不进行换行，则会超出指定的区域范围，此时我们可以采用CSS3中新增加的word-wrap文本样式来控制文本换行。word-wrap语法格式是：word-wrap：normal|break-word。实例：8.10.html,8.2.4保持字体尺寸不变font-size-adjust,font-size-adjust用来定义整个字体序列中所有字体的大小是否保持同一个尺寸。其语法格式为：font-size-adjust:none|number。实例：8.11.html,8.3段落属性,8.3.1单词间隔word-spacing8.3.2字符间隔letter-spacing8.3.3文字修饰text-decoration8.3.4垂直对齐方式vertical-align8.3.5文本转换text-transform8.3.6水平对齐方式text-align8.3.7文本缩进text-indent8.3.8文本行高line-height8.3.9处理空白white-space8.3.10文本反排unicode-bidi和direction,8.3.1单词间隔word-spacing,word-spacing属性用于设定词与词之间的间距，即增加或者减少词与词之间的间隔。其语法格式为：word-spacing:normal|length。实例：8.12.html,8.3.2字符间隔letter-spacing,在CSS3中，可以通过letter-spacing来设置字符文本之间的距离。即在文本字符之间插入多少空间，这里允许使用负值，可以让字母之间更加紧凑。其语法格式为：letter-spacing:normal|length。实例：8.13.html,8.3.3文字修饰text-decoration,在CSS3中，text-decoration属性是文本修饰属性，该属性可以为页面提供多种文本的修饰效果，例如，下划线、删除线和闪烁等。text-decoration属性语法格式为：text-decoration:none|underline|blink|overline|line-through。实例：8.14.html,8.3.4垂直对齐方式vertical-align,在CSS3中，可以直接使用vertical-align属性来定义垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。vertical-align属性的语法格式是：vertical-align:属性值。实例：8.18.html,8.3.5文本转换text-transform,在CSS3样式中，其中text-transform属性可用于设定文本字体的大小写转换。text-transform属性语法格式为：text-transform:none|capitalize|uppercase|lowercase。实例：8.16.html,8.3.6水平对齐方式text-align,text-align属性用于定义对象文本的对齐方式。与CSS2.1相比，CSS3增加了start、end和string属性值。text-align的语法格式为text-align:sTextAlign。实例：8.17.html,8.3.7文本缩进text-indent,CSS3的text-indent属性用来设定文本块中首行的缩进。text-indent属性的语法格式：text-indent:length。实例：8.18.html,8.3.8文本行高line-height,在CSS中，line-height属性用来设置行间距，即行高。其语法格式为：ine-height:normal|length。实例：8.19.html,8.3.9处理空白white-space,在CSS3中，white-space属性用于设置对象内空格字符的处理方式。与CSS2.1相比，CSS3新增了两个属性值。white-space属性对文本的显示有着重要的影响。在标记上应用white-space属性可以影响浏览器对字符串或文本间空白的处理方式。white-space属性语法格式：white-space:normal|pre|nowrap|pre-wrap|pre-line。实例：8.20.html,8.3.10文本反排unicode-bidi和direction,如果文档中某一段的多个部分包含从右至左阅读的语言，则该语言的方向将正确地显示为从右至左。此时可以通过CSS3提供的属性unicode-bidi和direction来解决这个文本反排的问题。unicode-bidi属性的语法格式：unicode-bidi:normal|bidi-override|embed。direction属性用于设定文