HTML5+CSS3 Web前端开发技术（任务式）（微课版）（第2版） 课件 06知识链接.pptx

06使用CSS3美化页面

知识链接01.文字样式02.03.04.05.06.背景渐变背景样式列表样式超链接样式文本样式

文字样式01

文字样式span标签span标签是用来组合HTML文档中的行内元素的，它没有固定的格式表示，只有对它应用CSS样式时，才会产生视觉上的变化。

文字样式span标签使用案例：span标签可以为p标签中的部分文字添加样式，且不会改变文字的显示方向。它不会像p标签和标题标签那样，每对标签独占一个矩形区域。

文字样式进行对文字内容进行字体样式的修饰

文字样式样式功能font-style设置字体风格。normal文本正常显示italic文本斜体显示oblique文本倾斜显示font-weight设置字体的粗细。normal默认粗细bold加粗bolder更粗的字体lighter更细的字体100、200、300、400、500、600、700、800、900，按照9各级别划分字体粗细，400为normal、700为bold。

文字样式样式功能font-size设置字体大小。固定单位：px单位为像素。pt单位为磅值。相对单位：em参考父级元素的字体大小。如font-size:16px;则1em相当于16px,2em相当于32px。rem与em相似。rem是参考页面的html元素的font-size大小来确定的。n%以父元素字体大小的百分比作为单位。vw以浏览器可是窗口宽度的百分率为单位。font-family设置字体类型。可以同时声明多种字体，字体之间用英文输入模式下的逗号分隔。一些字体的名称中间会出现空格，如Times?New?Roman字体，或者中文，如楷体，这时需要用双引号将其引起来。

文字样式font-style设置字体风格。normal文本正常显示italic文本斜体显示font-weight设置字体的粗细。normal默认粗细bold加粗

文字样式font-size设置字体大小。固定单位：px单位为像素pt单位为磅值。相对单位：em参考父级元素的字体大小。假设当前元素font-size:16px;则1em相当于16px,2em相当于32px。rem与em相似。rem是参考页面的body元素的font-size大小来确定的。

文字样式font-family设置字体类型。可以同时声明多种字体，字体之间用英文输入模式下的逗号分隔，浏览器会按照先后顺序选择字体类型进行内容修饰。

文字样式样式功能font字体属性的综合简写。利用font一次设置字体的所有属性，各个属性之间用英文空格分开，但需要注意这几种字体属性的顺序依次为字体风格→字体粗细→字体大小→字体类型。示例：span{?font:iltalicbold?12px?MicrosoftYaHei,楷体;}

文本样式02

文本样式样式功能color设定文本颜色。颜色名称，如红色为red。十六进制RGB色，如#ff0000，简写形式#f00颜色函数方式，如rgb(255,0,0)带有透明度的颜色函数方式，如rgba(255,0,0,0)text-align定义文本的水平对齐方式。left左对齐right右对齐center水平居中justify两端对齐常见用法——文本水平居中示例：p{text-align:center}

文本样式——水平对齐方式给价格部分所在的内容的父容器p标签设定了水平右对齐，页面中其内容则向右对齐。

文本样式样式功能text-indent定义文本首行缩进方式。常见用法——段落首行缩进两个文字示例：p{text-index:2em;}line-height定义文本的行高。单位可以px、em、百分比等方式常见用法——单行文本垂直居中将单行文本的行高和所在的元素高度设为相同高度。示例：p{height:40px;line-height:40px;}

文本样式——首行缩进?text-indent?直接将缩进距离以数字表示，单位为em或px。对于中文网页，?em用得较多，通常设置为2em，表示缩进两个字符

文本样式——行高想使文字垂直居中，可以使用line-height去实现。使line-height属性值等于容器的高度，就能让单行文本在其容器中垂直居中。

文本样式样式功能letter-spacing设定字符间距。单位可以是px、pt、em等text-decoration设定文本内容修饰。overline-上划线line-through-删除线underline-下划线none-无，默认效果常见用法——去除超链接下划线示例：a{text-decoration:none