第五章、CSS3美化网页元素（零基础，学HTML）

目录

一、本章任务

二、本章目标

三、为什么使用CSS

四、具体知识要点

（一）span标签

（二）字体样式

（三）文本样式

（四）文本阴影

（五）超链接伪类样式

（六）列表样式

（七）背景样式

（八）CSS3渐变

五、总结

一、本章任务

1. 制作京东新闻资讯页。

2. 制作购物网站商品分类列表。

3. 制作畅销书排行榜页面。

二、本章目标

1. 掌握使用CSS设置字体样式和文本样式。

2. 学会使用CSS设置超链接样式。

3. 能够使用CSS设置列表样式。

4. 了解使用CSS设置背景样式。

5. 掌握使用CSS设置渐变效果。

三、为什么使用CSS

1. 有效传递页面信息。

2. 美化页面文本，使页面漂亮、美观，吸引用户。

3. 突出页面主题内容，让用户一眼看到主要内容。

4. 提供良好的用户体验。

四、具体知识要点

（一）span标签

• 作用：让某几个文字或词语凸显出来。

• 示例：

  <p>享受<span class="show">“北大式”</span>教育服务</p>
  <p>在北大青鸟，有一群人默默支持你成就<span id="dream">IT梦想</span></p>
  <p class="bird">选择<span>北大青鸟</span>，成就你的梦想</p>

（二）字体样式

例：1.font-family属性

p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}

      2.font-weight属性

（三）文本样式

例：1.排版文本段落：

      2.文本修饰：

3.伪类样式：

a:hover {
	color:#B46210;
	text-decoration:underline;
}

（四）文本阴影

• 语法：text-shadow : color x-offset y-offset blur-radius;

• 参数说明：

  • color：阴影颜色。

  • x-offset：X轴位移，指定阴影水平位移量。

  • y-offset：Y轴位移，指定阴影垂直位移量。

  • blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围。

（五）超链接伪类样式

• 设置顺序：a:link->a:visited->a:hover->a:active。

（六）列表样式

• 相关属性：

  • list-style-type：设置列表项标记符号，如none（无标记）、disc（实心圆）、decimal（数字）等。

  • list-style-image：使用自定义图像作为列表项标记。

  • list-style-position：设置标记符号的位置，如inside（内部）、outside（外部）。

  • list-style：综合设置列表样式。

  • 例：去除列表前面的小黑点：

  • li {
    	list-style:none;
    }
    

（七）背景样式

• 背景颜色：background-color，支持十六进制、RGB、RGBA等表示方法。

• 背景图像：

  • background-image：设置背景图像，如background-image:url(图片路径);。

  • background-repeat：设置背景图像重复方式，如repeat（平铺）、no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复）。

  • background-position：设置背景图像定位，可使用像素、百分比或关键词（如left、center、right、top等）。

  • background：背景属性简写，如background:url(../image/arrow-down.gif) 205px 10px no-repeat;。

• 背景尺寸：background-size，属性值包括auto（默认）、percentage（百分比）、cover（放大填充元素）、contain（保持比例缩放）。

• 背景定位：

•  background-position属性

• 值	含义
  Xpos  Ypos	单位：px， Xpos表示水平位置，Ypos表示垂直位置
  X%  Y%	使用百分比表示背景的位置
  X、Y方向关键词	水平方向的关键词： left、center、right 垂直方向的关键词： top、center、bottom

背景属性；

background属性

.title {
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	text-indent:1em;
	line-height:35px;
	background:url(../image/arrow-down.gif) 205px 10px no-repeat;
}

（八）CSS3渐变

• 线性渐变：颜色沿着一条直线过渡，语法为linear-gradient (position, color1, color2,…)，不同浏览器需加前缀（如-webkit-、-moz-、-ms-等）。

• 径向渐变：圆形或椭圆形渐变，颜色从一个起点朝所有方向混合。

• 浏览器兼容性：IE 10+、Firefox 19.0+、Chrome 26.0+、Opera 12.1+、Safari 5.1+。

五、总结

本章主要学习了使用CSS3美化网页元素的相关知识，包括字体样式、文本样式、超链接样式、列表样式、背景样式以及CSS3渐变等内容。通过这些知识的学习，可以使网页更加美观、吸引用户，提升用户体验。在实际应用中，需要注意各属性的语法和浏览器兼容性问题，合理运用这些样式来实现网页的美化效果。