CSS基础详解-2+文本和段落设置

第三章CSS第2节文本和段落的设置需求软件学院要举办程序设计大赛，需将内容以网页的形式展示出来，要求如下：1.标题居中，使用华文行楷字体，如果浏览器不支持该字体，则使用微软雅黑字体。2.正文普通字体使用楷体，字号22px，1.5倍行距，字符间距5px，段落对齐方式为两端对齐，段落需要缩进2个字符。3.正文中的小标题使用微软雅黑字体，大小为28px，加粗，加下滑线，倾斜4.落款使用宋体，字号20px，居右对齐5.页面左右两侧各留白100px，上下留白20px本节内容字体的设置文字间距的设置文字的修饰文本的对齐方式段落缩进字体：font-family基本语法：font-family:字体1，字体2，字体3，……例：h2{font-family:黑体,楷体;}可以一次定义多个字体，浏览器按照定义的先后顺序选用字体。如果定义的所有字体都找不到，则选用计算机系统的默认字体。英文字体如果单词之间有空格，则必须用引号（单引号或双引号）引起来。如：font-family:“CourierNew”。设置字体动手做：在3-1-1notice.html中为标题h1设置字体为华文行楷，若客户的浏览器里没有该字体则使用微软雅黑字体。设置字号:font-size基本语法：font-size:尺寸|关键字|百分比例：p{font-size:24px;}尺寸最常用的单位是px（像素）。此外还可以用cm（厘米）、mm（毫米）、in（英寸）、pt（点）等。如果没有写单位，浏览器会默认以px（像素）为单位。相对尺寸是指尺寸大小继承于该元素属性的前一个属性单位值。如em设置字号:font-size基本语法：font-size:尺寸|关键字|百分比绝对尺寸的关键字有七个，分别为xx-small（极小）、x-small（较小）、small（小）、medium（标准大小）、large（大）、x-large（较大）、xx-large（极大）。相对尺寸则仅有两个关键字，分别为larger（较大）和smaller（较小）。百分比是基于父元素中字体的大小为参考值的。设置字号动手做：将3-1-1notice.html的“参赛对象”和“奖品设置”的字号设为28px；正文字体为24px•normal正常显示•italic斜体显示•oblique歪斜体显示（比斜体的倾斜角更大）字体的倾斜：font-stylefont-style基本语法：font-style:normal|italic|oblique字体的加粗：font-weight•bold粗体（粗细约为数字700）•bolder加粗•lighter细体（比正常字体更细）•number数字一般是整百(100~900)，数字越大字体越粗font-weight基本语法：font-weight:normal|bold|bolder|lighter|number设置文字的倾斜和加粗动手做：将3-1-1notice.html的“参赛对象”和“奖品设置”设为斜体、并加粗本节内容字体的设置文字间距的设置文字的修饰文本的对齐方式段落缩进字符间距：letter-spacing基本语法：letter-spacing:normal|长度normal表示间距正常显示，是默认设置。长度值可以使用负数。长度单位可以使用“设置字体”时介绍的所有单位。单词间距：word-spacing基本语法：word-spacing:normal|长度normal表示间距正常，是默认设置。长度值可以使用负数。长度单位可以使用“设置字体”时介绍的所有单位。示例代码设置字符间距动手做：将3-1-1notice.html的所有文字的字符间距都设为5px行高基本语法：line-height:normal|数字|长度|百分比normal为浏览器默认的行高，一般由字体大小属性来决定数字：表示行高为该元素字体大小与该数字相乘的结果。长度：表示行高由长度值和长度单位确定。百分比：表示行高是该元素字体大小的百分比。示例代码设置字符间距动手做：将3-1-1notice.html的行高设为1.5倍font综合设置font:font-style||font-weight||font-size||line-height||font-family例：设置段落的字体样式为：24px，加粗，字体为楷体，微软雅黑，1.5倍行高p{font:bold24px/1.5楷体，微软雅黑;}注意：按顺序书写本节内容字体的设置文字间距的设置文字的修饰文本的对齐方式段落缩进文字的修饰：text-decoration基本语法：Text-decoration:underline|overline|line-through|blink|none语法中的属性值可以是上面所列的一个或多个，中间用空格隔开uderline下划线overline上划线line-through删除线blink闪烁（只有在netscape浏览器中才能正常显示）none无效果，正常显示设置文字的修饰动手做：给3-1-1notice.html的“参赛对象”和“奖品设置”加上下划线本节内容字体的设置文字间距的设置文字的修饰文本的对齐方式段落缩进文本的对齐方式：text-align基本语法：text-align:left|right|center|justifyleft左对齐right右对齐方式center居中对齐justify两端对齐该属性可应用于HTML中的任何模块级标记，如p，h1~h6等。设置文字的对齐方式动手做：将3-1-1notice.html的标题h1居中对齐本节内容字体的设置文字间距的设置文字的修饰文本的对齐方式段落缩进段落缩进：text-indent基本语法：text-indent:长度|百分比长度包括长度值和长度单位，长度单位同样可以使用之前提到的所有单位。百分比则是相对上一级元素的宽度而定的。设置文字的修饰动手做：将3-1-1notice.html的正文设置为缩进2个字符。本节内容回顾（阅读代码）设置字体——font-family设置字号——font-size设置字体的倾斜——font-style设置字体加粗——font-weight调整字符间距——letter-spacing调整单词间距——word-spacing添加文字修饰——text-decoration设置文本排列方式——text-align设置段落缩进——text-indent一个问题想一想：如何设置文字中一些特定的内容的样式呢？比如：段落文字的样式为字体大小24px，而其中要强调的文字为30px并且加粗倾斜呢？这时可以使用span标签span/spanDemo3-2-2span.html