美化网页
CSS系列文章目录
为什么使用CSS
- 有效的传递页面信息
- 美化页面。页面漂亮才可以吸引用户
- 突出页面的主题内容
- 具有良好的用户体验
1. 字体
常用的文字相关的属性如下：
- color：设置文本颜色，例如color:red;字体颜色为红色
- font-family：设置字体类型，例如font-family:“宋体”;设置字体类型为宋体
- font-size：设置字体大小，例如font-size:12px;设置字体大小等于12px
- font-style：设置字体风格,例如font-style:italic;设置字体为斜体
- font-weight：设置字体粗细，例如font-weight:bold;设置字体为粗体
- font：在一个声明中设置所有字体属性，例如font:italic bold 18px “楷体”;
其代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>字体</title>
<style>
#p1{
color: red;
font-style:italic;
font-size:14px;
font-weight: bold;
font-family: "楷体";
}
#p2{
color:blue;
font:italic normal 18px "宋体";
}
</style>
</head>
<body>
<p id="p1">这是一个段落。</p>
<p id="p2">这是一个段落。</p>
</body>
</html>
网页显示如下：
2. 排版网页
常用网页的文本排版如下：
- 文本对齐方式：text-align 适用于块级元素
- 首行缩进：text-indent 适用于块级元素
- 行高：line-height
- 下划线：text-decoration
- 图片文字水平对齐：vetical-align
其代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>排版网页</title>
<style>
#p1{
text-align: center;
}
#p2{
text-indent: 2em;
}
#span1{
line-height: 28px;
}
#span2{
text-decoration: underline;
}
#span3{
text-decoration:line-through;
}
#span4{
text-decoration:overline;
}
a{
text-decoration:none;
}
img,#span5{
vertical-align: middle;
}
</style>
</head>
<body>
<p id="p1">这是一句话</p>
<p id="p2">许嵩（Vae），1986年5月14日生于安徽省合肥市，中国内地流行乐男歌手、词曲创作人、音乐制作人，现任海蝶音乐公司（现为太合音乐集团）音乐总监，毕业于安徽医科大学。2009年1月发行首张词曲全创作专辑《自定义》。2010年1月发行第二张词曲全创作专辑《寻雾启示》。2011年4月发行第三张词曲全创作专辑《苏格拉没有底》。2012年7月发行第四张词曲全创作专辑《梦游计》。2014年8月发行第五张词曲 ...</p>
<span id="span1">2006年初，许嵩是一名在安徽医科大学读大二的男生。课余时间里凭借自幼学习钢琴与古典音乐打下的功底，自修作曲及编曲、混音制作，随后他开始创作一些音乐作品。这些音乐作品被他以“Vae”这个笔名传上个人网站，引起了网友的关注。</span><br/>
<span id="span2">回忆是一条狂犬 追咬了许多年</span>
<span id="span3">回忆是一条狂犬 追咬了许多年</span>
<span id="span4">回忆是一条狂犬 追咬了许多年</span>
<a href="" alt="">这是一个超链接</a><br/>
<img src="images/vv.jpg" alt=""/>
<span id="span5">许嵩</span>
</body>
</html>
网页显示如下：
3. 超链接伪类
常用的超链接伪类有如下几种：
- a:link：未单击访问后的样式
- a:visited：单击访问后的样式
- a:hover：鼠标悬浮其上的样式
- a:active：鼠标单击未释放的样式
设置伪类的顺序a:link>a:visited>a:hover>a:active
其代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超链接伪类</title>
<style type="text/css">
a{
text-decoration: none;
display: inline-block;
margin: 10px;
padding: 5px;
}
a:link{
background:#C8C8C8;
font-size: 12px;
color:black;
}
a:visited{
background: #4AEC25;
}
a:hover{
color: white;
background: black;
}
a:active{
background: #11F2E9;
}
</style>
</head>
<body>
<a href="./超链接伪类.html" alt="">1</a>
<a href="../排版网页/images/vv.jpg" alt="">2</a>
<a href="../排版网页/排版网页.html" alt="">3</a>
<a href="../字体/字体.html" alt="">4</a>
<a href="./超链接伪类.html" alt="">5</a>
</body>
</html>
网页显示如下：
4. 列表样式
常用的列表样式有如下几种：
- list-style-type：设置不同的列表样式
- list-style-image：使用图像来替换列表项的标记
- list-style-position：规定列表中列表项目标记的位置
- list-style：简写在一个声明中设置所有的列表属性
其代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
<style>
#id2{
list-style: none;
}
#id3{
list-style-image:url("images/v.jpg");
list-style-position: outside;
}
#id4{
list-style: square inside;
}
</style>
</head>
<body>
<ul>
<li id="id1">第一项</li>
<li id="id2">第二项</li>
<li id="id3">第三项</li>
<li id="id4">第四项</li>
</ul>
</body>
</html>
网页显示如下：
5. 背景样式
背景样式常用属性如下：
- background-color：设置背景颜色
- background-image：设置背景图片
- background-position：背景定位
- background-repeat：背景重复方式，其中no-repeat不重复，repeat-x水平重复 repeat-y垂直重复
- background：在一个声明中设置所有的背景属性
渐变颜色背景参考网站：https://www.grabient.com/
其代码示例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style>
div{
width: 100px;
height: 100px;
}
#div1{
background-color: aqua;
}
#div2{
background-image: url("images/v.jpg");
}
#div3{
background: url("images/v.jpg") repeat-y;
background-position: 10px -25px;
}
#div4{
background-color: #FBDA61;
background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
网页显示如下：
