本文总共3171个字,阅读需11分钟,全文加载时间:2.229s,本站综合其他专栏收录该内容! 字体大小:

文章导读:1、页面使用CSS的好处: 有效的传递页面信息。 使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户。 可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容。 具有良好的用户体验。 2、美化网页的……各位看官请向下阅读:

1、页面使用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>

<title>家用电器</title>

</head>

<link rel="stylesheet" href="jiayongdianqi.css">

<body>

<div class="container">

<h2>家用电器</h2>

<div class="type">

<h6><a href="#">大家电</a></h6>

<ul>

<li> <a href="#">平板电视</a> <a href="#">洗衣机</a> <a href="#">冰箱</a></li>

<li> <a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#"> 热水器</a></li>

<li> <a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a></li>

</ul>

<h6><a href="#">生活电器</a></h6>

<ul>

<li> <a href="#">电风扇</a> <a href="#">净化器</a> <a href="#">吸尘器</a></li>

<li> <a href="#">净水设备</a> <a href="#">挂烫机</a> <a href="#"> 电话机</a></li>

</ul>

<h6><a href="#">厨房电器</a></h6>

<ul>

<li> <a href="#">榨汁机</a> <a href="#">电压力锅</a> <a href="#">电饭煲</a></li>

<li> <a href="#">豆浆机</a> <a href="#">微波炉</a> <a href="#"> 电磁炉</a></li>

</ul>

<h6><a href="#">五金家装</a></h6>

<ul>

<li> <a href="#">淋浴/水槽</a> <a href="#">电动工具</a> <a href="#">手动工具</a></li>

<li> <a href="#">仪器仪表 </a> <a href="#">浴霸/排气 </a> <a href="#"> 灯具</a></li>

</ul>

</div>

</div>

</body>

</html>

li{

/* 去圆点 */

list-style: none;

}

/* 分类页面总宽度 */

.container{

width: 500px;

}

a{

/* 去超链接下划线 */

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

以上内容由优质教程资源合作伙伴 “鲸鱼办公” 整理编辑,如果对您有帮助欢迎转发分享!

你可能对这些文章感兴趣:

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注