美化网页

CSS系列文章目录

CSS3快速入门：一、三种CSS导入方式
CSS3快速入门：二、CSS选择器
CSS3快速入门：三、美化网页
CSS3快速入门：四、盒子模型
CSS3快速入门：五、浮动
CSS3快速入门：六、定位

文章目录

美化网页
- CSS系列文章目录
- 为什么使用CSS
- 1. 字体
- 2. 排版网页
- 3. 超链接伪类
- 4. 列表样式
- 5. 背景样式

为什么使用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>&nbsp;&nbsp;&nbsp;&nbsp;<span id="span3">回忆是一条狂犬 追咬了许多年</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="span4">回忆是一条狂犬 追咬了许多年</span>&nbsp;&nbsp;&nbsp;&nbsp;<a href="" alt="">这是一个超链接</a><br/><img src="data: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>

网页显示如下：

CSS3快速入门：三、美化网页相关推荐

CSS3快速入门：五、浮动
浮动在CSS中,浮动是非常重要的一个功能,主要是用来控制行元素或者块元素并列显示或者向左或者向右浮动. CSS系列文章目录 CSS3快速入门:一.三种CSS导入方式 CSS3快速入门:二.CSS ...
sql语言和php,SQL语言快速入门(三)_php
我们日常使用SQL语言的工作过程中,使用最多的还是从已经建立好的数据库中查询信息.下面,我们就来详细介绍一下如何使用SQL语言实现各种数据库查询操作. SELECT-FROM 为方便讲解,我们在数据库 ...
CSS3 快速入门教程 -笔记【狂神说Java】
文章目录 1.CSS概述 1.1.什么是CSS 1.2.发展历程 1.3.快速入门 1.4.CSS的三种导入方式 2.选择器 2.1.基本选择器 2.2.层次选择器 2.3.结构伪类选择器 2.4.属 ...
创建网页文件html,HTML快速入门之创建网页文件
本文为零基础学习者准备了关于创建网页文件的相关学习笔记,具体内容包括网页文件创建.HTML标签语法规范.HTML标签的关系以及HTML整体结构.完成以上内容的学习,大家基本上就能学会如何创建一个有简单 ...
AS3多线程快速入门(三):NAPE物理引擎+Starling
原文:http://blog.domlib.com/articles/345 [更新]Adobe在11.4正式发布的最后一刻移除了ByteArray.shareable功能的支持,推迟到11.5版本再 ...
AS3多线程快速入门(三):NAPE物理引擎+Starling[译]
原文链接:http://esdot.ca/site/2012/intro-to-as3-workers-part-3-nape-physics-starling [更新]Adobe在11.4正式发布的 ...
HTML5+CSS3快速入门每日一篇网页制作实战（附代码）DAY06-DAY07
myday6-day07 网页的制作实战(附自己的代码)(仿一个网站的网页) 网页效果图自己的代码实现: <!DOCTYPE html> <html lang="en&q ...
beautifulsoup网页爬虫解析_Python爬虫快速入门，静态网页爬取
在开始之前,请确保你的电脑上已经安装好了BeautifulSoup库,可以通过在命令行中输入pip install beautifulsoup4来进行安装. 一.数据解析在爬取之前,我们需要检测下响 ...
Python爬虫快速入门，静态网页爬取！
在开始之前,请确保你的电脑上已经安装好了BeautifulSoup库,可以通过在命令行中输入pip install beautifulsoup4来进行安装. 一.数据解析在爬取之前,我们需要检测下响 ...

CSS3快速入门：三、美化网页

美化网页

CSS系列文章目录

文章目录

为什么使用CSS

1. 字体

2. 排版网页

3. 超链接伪类

4. 列表样式

5. 背景样式

CSS3快速入门：三、美化网页相关推荐

最新文章

热门文章