css3美化网页-第五章

、页面使用CSS的好处：

有效的传递页面信息。

使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户。

可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容。

具有良好的用户体验。

2、美化网页的一些基本样式

A:字体样式：

font-family设置字体类型font-family:"隶书";

font-size设置字体大小font-size:12px;

font-style设置字体风格font-style:italic;

font-weight设置字体的粗细font-weight:bold;

font在一个声明中设置所有字体属性font:italic bold 36px "宋体";

举例：

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

h1{font-size:24px;} 单位->px：像素

h2{font-style:oblique;}

p{font-weight:bold;}

p span{font:oblique bold 12px "楷体";}

B:文本属性：

color设置文本颜色color:#00C;

text-align设置元素水平对齐方式text-align:right;

text-indent设置首行文本的缩进text-indent:20px;

line-height设置文本的行高line-height:25px;

text-decoration设置文本的装饰text-decoration:underline;

C:排版文本段落：

水平对齐方式：text-align：left|right|center|justify;

left把文本排列到左边。默认值：由浏览器决定

right把文本排列到右边

center把文本排列到中间

justify实现两端对齐文本效果

首行缩进：text-indent：em或px

行高：line-height：px

文本修饰：text-decoration:none|underline|overline|line_through

值说明

none默认值，定义的标准文本

underline设置文本的下划线

overline设置文本的上划线

line-through设置文本的删除线

垂直对齐方式：vertical-align属性：middle、top、bottom

文本阴影：text-shadow : color x-offset y-offset blur-radius;

D:背景颜色和背景图片：

background-color:"red";

background-image:url(图片路径);

background-repeat:

沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

background-position:X、Y方向关键词水平方向的关键词：left、center、right

垂直方向的关键词：top、center、bottom

举例：

.title {

font-size:18px;

font-weight:bold;

color:#FFF;

text-indent:1em;

line-height:35px;

background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;

}

线性渐变：linear-gradient ( position, color1, color2,…)

3、举例：

<head>

</head>

<body>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

</body>

</html>

li{

/* 去圆点 */

list-style: none;

}

/* 分类页面总宽度 */

.container{

width: 500px;

}

/* 去超链接下划线 */

text-decoration: none;

}

/* 大标题字体 */

.container>h2{

font-size: 18px;

color: white;

font-weight: bolder;

line-height: 50px;

text-indent: 2px;

/*从上到下，0%开始颜色。50%颜色。70%颜色 */

background: linear-gradient(to bottom,#0467ac,#63a7d6,#b6dbf5);

}

css代码：

/* 所有电器分类内容 */

.type{

/* 首行缩进 */

text-indent: 4.5em;

/* 左外边距40px */

margin-left: 40px;

}

/* 电器分类 */

.type>h6{

font-size: 14px;

font-weight: bolder;

line-height: 30px;

background: linear-gradient(to bottom,#e4f1fa,#bddff7,#e4f1fa);

}

/* 电器分类中的A标签 */

.type>h6>a{

color:#0467ac;

}

/* 电器分类中的A标签鼠标悬浮效果 */

.type>h6>a:hover{

text-decoration: underline;

}

/* 分类内容字体 */

.type>ul>li{

font-size: 12px;

line-height: 26px;

}

/* 分类内容字体里面的A标签 */

.type>ul>li>a{

color: #969696;

}

/* 分类内容字体里面的A标签悬浮效果 */

.type>ul>li>a:hover{

color: #804000;

text-decoration: underline;

}

4、效果图链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlFive/jiayongdianqi.html

、字体样式

font-family：设置字体类型，可以同时声明多种字体，字体之间用英文逗号分隔开；
font-size：设置字体大小，常用单位为px，还有其他如in、cm、mm、pt、pc等单位；
font-style：设置字体风格，有三个属性值，分别是normal(标准字体样式)、italic(斜体字体样式)、oblique(倾斜字体样式)；
font-weight：设置字体粗细，属性值有normal(默认)、bold(粗体)、bolder(更粗)、lighter(更细)，还可以用100到900定义由细到粗的字体，400等同于normal，700等同于bold；
font：设置字体多种属性，可以同时设置；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
 p{
 font-family:"宋体";
 font-size:14px;
 }
 .p2{
 font-style:italic;
 }
 .p3{
 font-weight:bold;
 }
 .p4{
 font-family:"微软雅黑";
 }
 .p5{
 font-size:36px;
 }
 
</style>
</head>
<body>
 <p class="p1">这是第一行(样式为：标签选择器p中的样式)</p>
 <p class="p2">这是第二行(样式为：斜体)</p>
 <p class="p3">这是第三行(样式为：加粗)</p>
 <p class="p4">这是第四行(样式为：字体变成微软雅黑)</p>
 <p class="p5">这是第五行(样式为：字体大小为36px)</p>
</body>
</html>

效果演示图如下所示：

1.png

二、使用CSS排版网页文本

color：设置文本颜色，统一采用RGB格式，也就是“红绿蓝”三原色模式；
text-align：设置元素水平对齐方式，属性值有left(左对齐，默认)、right(右对齐)、center(中间对齐)、justify(两端对齐)；
line-height：设置文本行高，单位也是px，也可以不加单位，按倍数表示；
text-indent：设置文本的首行缩进，单位是em或者px，em是相对单位，表示长度相当于文本中字符的倍数，可以根据字体大小自适应改变；
text-decoration：设置文本的装饰，属性值有none(默认值)、underline(下划线)、overline(上划线)、line-through(删除线)；
vertical-align：垂直对齐，属性值有top、middle、bottom；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:500px;
 border:1px solid #000;
 padding:20px; 
 }
.p1{
 color:red;
 } 
.p2{
 text-align:center;
 } 
.p3{
 line-height:50px;
 }
.p4{
 text-indent:2em;
 }
.p5{
 text-decoration:line-through;
 }
.div2{
 border:1px solid red;
 padding:20px;
 }
![18.png](https://upload-images.jianshu.io/upload_images/3260639-668445cd70292382.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
.img1{
 width:70px;
 height:70px;
 vertical-align:middle;
 } 
 
</style>
</head>
<body>
 <div class="div1">
 <p class="p1">这是第一行(样式为: 字体红色)</p>
 <p class="p2">这是第二行(样式为：居中)</p>
 <p class="p3">这是第三行(样式为：行高50px)</p>
 <p class="p4">这是第四行(样式为：缩进2em)</p>
 <p class="p5">这是第五行(样式为：删除线)</p>
 <div class="div2">
 <img src="tu24.png" alt="" class="img1">这是第六行(样式为：垂直居中)
 </div>
 
 </div>
</body>
</html>

演示效果如图所示：

2.png

三、cursor设置鼠标形状

cursor属性可以用来设置鼠标指针样式；
default：默认光标，箭头；
pointer：超链接的指针，手型；
wait：指示程序正在忙；
help：指示可用的帮助；
text：指示文本；
crosshair：鼠标呈现十字状；

四、背景样式

background-color：背景颜色；
background-image：背景图像；
background-repeat：背景平铺，属性值有repeat(沿水平和垂直方向平铺)、no-repeat(不平铺)、repeat-x(沿水平方向平铺)、repeat-y(沿水质方向平铺)；
background-position：设置图像在背景中的位置；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:500px;
 height:500px;
 background-color:#F1CCE8; //背景颜色
 }
.div2{
 width:100%;
 height:100%;
 background-image:url(tu24.png); // 插入背景图片
 background-repeat:no-repeat; //图片不平铺
 background-position:center center; //背景图片垂直水平居中
 }
</style>
</head>
<body>
 <div class="div1">
 <div class="div2">
 </div>
 </div>
</body>
</html>

演示效果图：

3.png

五、列表样式

list-style-type：设置列表项标记的类型，属性值有none(无标记符号)、disc(实心圆，默认类型)、circle(空心圆)、square(实心正方形)、decimal(数字)；
list-style-image：使用图片替换列表的标记项；
list-style-position：设置在何处防止列表标记项，属性值有inside(放在文本以内)、outside(放在文本左侧)；
list-style：简写属性，可以设置所有列表属性；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:300px;
 height:300px;
 background-color:#F1CCE8;
 padding:20px;
 }
.ul1{
 }
.ul2{
 list-style-type:none;
 }
.ul3{
 list-style-image:url(person02.png);
 list-style-position:outside;
 
 } 
</style>
</head>
<body>
 <div class="div1">
 <ul class="ul1">
 <li>第一队</li>
 <li>第一队</li>
 <li>第一队</li>
 </ul>
 <ul class="ul2">
 <li>第二队</li>
 <li>第二队</li>
 <li>第二队</li>
 </ul>
 <ul class="ul3">
 <li>第三队</li>
 <li>第三队</li>
 <li>第三队</li>
 </ul>
 </div>
</body>
</html>

演示效果图为：

4.png

、美化网页元素

本章目标：

会使用CSS设置字体样式和文本样式
会使用CSS设置超链接样式
会使用CSS设置列表样式
会使用CSS设置背景样式
会使用CSS设置渐变效果

2.1、为什么使用CSS

【查看淘宝页面，让学员观察，重点记住了什么东西】因此使用CSS样式美化网页文本具有如下意义。

有效的传递页面信息
使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
具有良好的用户体验

< span>标签 < span>标签的作用：能让某几个文字或者某个词语凸显出来，从而添加对应的样式！

<p>好好学习，<span>天天向上</span></p>

2.2、字体样式

在这里插入图片描述

在线咨询

上一篇：使用 JS 来动态操作 css，你知道几种方法？
下一篇：SEO优化您必须了解的链接“rel”属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

css3美化网页-第五章

、字体样式

二、使用CSS排版网页文本

三、cursor设置鼠标形状

四、背景样式

五、列表样式

2.1、为什么使用CSS

2.2、字体样式

您的项目需求