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

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}文本样式——文本修饰在CSS中通过text-decoration属性来设置文本修饰。text-decoration属性值为none，定义的标准文本；text-decoration属性值为underline，设置文本的下画线；text-decoration属性值为overline，设置文本的上画线；text-decoration属性值为line-through，设置文本的删除线。文本样式样式功能text-shadow设定文字阴影。text-shadow:color

x-offset

y-offsetblur-radius;color:阴影颜色x-offset:x轴位移y-offset:y轴位移blur-radius:模糊半径word-spacing设定单词间距。单位可以是px、pt、em等vertical-align定义元素的垂直对齐方式。baseline默认值，元素放置在父元素的基线上top把元素的顶端与行中最高元素的顶端对齐middle把此元素放置在父元素的中部bottom把元素的顶端与行中最低的元素的顶端对齐文本样式——垂直对齐方式在CSS中通过vertical-align设置垂直方向对齐方式。在目前的浏览器中，只能对表格单元格中的对象使用垂直对齐方式属性，而对于一般的标签，如h1~h6、p

及div标签，该属性都是不起作用的，因此vertical-align

在设置文本标签垂直对齐并不常用，它经常用来设置图片与文本的对齐方式。文本样式——文本阴影text-shadow属性有四个参数，每个参数都有自己的作用。（1）color：阴影颜色，定义绘制阴影时所使用的颜色。如果不设置这个值，会使用文本的颜色作为阴影的颜色。阴影颜色可以用英文单词、十六进制数、rgb()、rgba()等方式表示。（2）

x-offset：x轴位移，用来指定阴影水平位移量，其值可以是正值或负值，如果为正值，阴影在对象的右边，反之阴影在对象的左边。（3）

y-offset：y轴位移，用来指定阴影垂直位移量，其值可以是正值或负值，如果为正值，阴影在对象的底部，反之阴影在对象的顶部。（4）

blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围。值越大，阴影向外模糊的范围越大，阴影的边缘就越模糊。这个值只能是正值，如果为0，表示不具有模糊效果。文本样式——文本阴影可以使用text-shadow属性来给文本指定多个阴影，并且针对每个阴影设置不同颜色。指定多个阴影时使用逗号将多个阴影进行分割。

text-shadow多阴影效果按照给定的顺序应用，因此前面的阴影有可能会覆盖后面的阴影，但是它们永远不会覆盖文本本身。超链接样式03超链接伪类样式伪类名称含义示例a:link单击访问前的超链接样式a:link{color:#9EF5F9;}a:visited单击访问后的超链接样式a:visited{color:#333;}a:hover鼠标悬浮其上的超链接样式a:hover{color:#FF7300;}a:active单击未释放的超链接样式a:active{color:#999;}超链接伪类样式“爱恨原则”对超链接设置四种状态样式时，需要按照如下顺序书写样式设定：1.a:link→2.a:visited→3.a:hover→4.a:active为了方便记忆顺序，我们将四种伪类状态的首字母组合成成英文单词“love”与“hate”：LOVE-HATE超链接伪类样式a标签选择器样式表示超链接在任何状态下都是这种样式，而之后设置的a:hover超链接样式表示当鼠标指针悬浮在超链接上时显示的样式，这样既减少了代码量，使代码看起来一目了然，也实现了想要的效果。列表样式04列表样式样式功能list-style-type设定列表样式。常见用法：通过list-style-type:none;去除默认列表图标list-style-image设定列表自定义图标。list-style-position设定列表自定义图标显示位置。list-style列表样式简写。常见用法——去除默认列表图标示例：li,ul,ol{

list-style:none;}列表样式list-style是简写的方式，表示在一个声明中设置所有列表的属性。list-style按照list-style-type→list-style-position→list-style-image的顺序设置属性值。在实际使用中常常直接使用list-style来设置列表无标记符，会把list-style-position和list-style-image省略不写。背景样式05背景样式样式功能background-color设定背景颜色。（属性值规则同color样式）background-image设定背景图片。background-repeat设定背景图片重复方式。repeat沿水平和垂直两个方向平铺。no-repeat不平铺，即背景图像只显示一次。repeat-x只沿水平方向平铺。repeat-y只沿垂直方向平铺。background-size设定背景图片尺寸background-position设定背景图位置背景样式-background-color在CSS中，使用background-color属性设置文字、div、列表等网页元素的背景颜色。background-color属性值的表示方法与color属性的表示方法一样，通常用十六进制数表示。背景样式-背景图像background-image属性用于设置网页元素的背景图像。在网页中设置背景图像时，通常会将background-image（背景图像）属性与background-repeat（背景重复方式）、background-position（背景定位）两个属性一起使用。背景图像语法：background-image:url(图片路径);背景重复方式如果仅设置了background-image，那么背景图像默认自动向水平和垂直两个方向重复平铺。如果不希望图像平铺，或者只希望图像沿着一个方向平铺，则使用background-repeat属性来控制。该属性有4个值，可以实现不同的平铺方式。repeat:沿水平和垂直两个方向平铺。no-repeat:不平铺，即背景图像只显示一次。repeat-x:只沿水平方向平铺。repeat-y:只沿垂直方向平铺。背景样式-背景图像在实际工作中，repeat通常用于小图片铺平整个页面的背景或铺平页面中某一块内容的背景，no-repeat通常用于小图标的显示或只需要显示一次的背景图像，repeat-x通常用于导航背景、标题背景，repeat-y在页面制作中并不常用。背景样式-背景定位在CSS中，可以使用background-position属性设置背景图像出现的位置，即背景出现一定的偏移量。background-position属性值可以使用具体数值、百分比、关键词3种方式表示水平和垂直方向的偏移量。值含义示例XposYpos使用像素值表示，第一个值表示水平位置，第二个值表示垂直位置0px0px（默认，表示从左上角出现背景图像，无偏移）30px40px（正向偏移，图像向右和向下移动）-50px-60px（反向偏移，图像向左和向上移动）X%Y%使用百分比表示背景的位置30%50%（垂直方向居中，水平方向偏移30%）X、Y方向关键词使用关键词表示背景的位置，水平方向的关键词有left、center、right，垂直方向的关键词有top、center、bottom使用水平和垂直方向的关键词进行自由组合，如省略，则默认为center。例如:righttop（右上角出现）leftbottom（左下角出现）top（上方水平居中位置出现）“精灵图”spriteimage，原名为精灵图，因英文单词相同，则通常叫做雪碧图。雪碧图是一种处理图片的技巧。续笔涂的原理：将多张图片合成在一张图片内使用，通过调整背景图位置与元素大小来展示指定图片。“精灵图”“精灵图”案例“精灵图”雪碧图的优点，第一就是减少网页加载时的图片请求，对服务器的高并发访问也有缓解作用，但也并非绝对。但是缺点也明显，需要前端开发时进行图片的组合，并且使用时需要精确计算偏移位置。不过通过雪碧图生成工具，会方便很多。背景样式-简写使用background属性可以简写背景样式background属性可以包含多个值，‌包括背景颜色、‌背景图片、‌背景平铺方式等。‌这些值的顺序可以根据具体的需求调整。‌背景样式-背景尺寸使用背景图片的元素必须有宽度和高度，不然背景图片显示不出来。默认情况下，背景图片在元素中显示是按自身的宽度、高度来平铺的，和外面包裹元素的宽、高无关。CSS3中新添加的background-size（背景尺寸）属性可以对背景图片的大小进行控制。背景样式-背景尺寸

背景样式-背景尺寸

第一个div元素的效果为添加背景图的默认效果（原图尺寸为60像素×60像素）。第二个div元素的背景图片就不是默认的尺寸了，而是宽为120px、高为