网页美化

概述: 网页的美化主要是对网页的字体样式，文本样式以及背景图等等进行美化，能够有效的传递网页信息和提高用户体验

div标签: div标签是一个无属性标签，主要是起到切块作用，把一片区域单独分割开来进行美化

span标签: span 标签主要是对一些重要的字体进行标记，然后就可以在标签里面设置属性，根据属性来美化

1 字体样式

常用属性：

属性名	解释	常用值
font-family	字体样式，如：斜体等等	Arial(楷体)，bold(黑体)
font-size	字体大小	XXpx
font-weight	字体粗细	bolder，XXpx
color	字体颜色	red，RGB值

例子：

css代码：

body {font-family: 楷体;font-size: 20px;font-weight: bolder;
}
.first{color: aqua;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体样式</title><link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p><h1>爱在秋天</h1>
<p class="first"> 最富有诗意的季节莫过于秋季了，多少文人墨客为秋季写了一曲曲的赞歌，他们极力渲染秋的美景，毫不吝惜笔墨，可见，秋是多么的迷人了。
</p>
<p class="second">秋最会分配自己的感情，无论走到那里，都会使人感受到它的爱抚。秋最会挑选礼物，它送给每一个人的礼物都各具特色，又用最美丽的爱装饰起来。
</p>
<p class="third">秋是那样可爱，使人无法不为之心动，我禁不住秋的召唤，去收集那无处不在的爱意。
</p>
</body>
</html>

运行结果：

2 文本样式

常用属性：

属性名	解释	常用值
text-align	文本对齐方式	left，center，right
text-indent	首行缩进	xxem
line-height	行高(和块的值相同可以实现居中)	xxpx
text-decoration	下划线装饰	underline，overline
vertical-align	文本图片水平对齐	middle

例子：

css代码：

body {font-family: 楷体;font-size: 20px;font-weight: bolder;
}
h1{text-decoration: underline;text-align: center;
}
.first{text-indent: 2em;
}
.second{text-indent: 2em;
}
.third{text-indent: 2em;
}

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体样式</title><link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p><h1>爱在秋天</h1>
<p class="first"> 最富有诗意的季节莫过于秋季了，多少文人墨客为秋季写了一曲曲的赞歌，他们极力渲染秋的美景，毫不吝惜笔墨，可见，秋是多么的迷人了。
</p>
<p class="second">秋最会分配自己的感情，无论走到那里，都会使人感受到它的爱抚。秋最会挑选礼物，它送给每一个人的礼物都各具特色，又用最美丽的爱装饰起来。
</p>
<p class="third">秋是那样可爱，使人无法不为之心动，我禁不住秋的召唤，去收集那无处不在的爱意。
</p>
</body>
</html>

运行结果：

3 超链接伪类与阴影渐变

3.1 超链接伪类

概述: 超链接伪类一般用来做简单的动态效果，如：点击字体变色等等

常用伪类：

属性名	解释
a:link(color:#000000)	未访问时显示的颜色
a:visited(color:#000000)	已访问时显示的颜色
a:hover(color:#000000)	当鼠标悬停时显示的颜色
a:active(color:#000000)	被选中时显示的颜色

css代码：

a{color: black;text-decoration: none;
}
a:hover{color: aqua;
}

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<a href="#"><img src="data:images/1.jpg"/>
</a>
<p><a href="#" class="name">意境：山水田园画</a>
</p>
<p><a href="#">作者：百度</a>
</p>
<p><a href="#">起拍价：n元</a>
</p>
</body>
</html>

运行结果：

3.2 阴影

概述: 使选定的属性的字体进行渐变

格式：

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
text-shadow: aqua 10px 20px 2px;

图示：

3.3 渐变

工具: https://www.grabient.com

用法： 在工具中调好样式，将css代码复制即可

4 列表样式与背景

列表样式: 列表样式主要是用来对ul标签进行美化的一种样式，现实中经常用来做商品的导航等等

背景: 主要包含背景色以及背景图，注意：在背景图的导入中，默认方式为平铺方式，即照片填满整个选中的区域

例子： 仿淘宝商品分类栏

CSS语法基础--网页美化相关推荐

Web开发（一）·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)
CSS语法基础一.单纯html控制样式的缺点二. CSS✪✪✪ CSS概述 CSS基础语法组成选择器标签选择器类选择器 id选择器通配选择器后代选择器插入样式表的三种方式行内样式 ...
html+css语法基础
一,html5语法基础 1,<!–注释-- >,/* */注释语句(因为直接输出不会显示,所以在每个标签前都加了空格) 2,< head>< /head>头部标签, ...
前端基础——CSS 选择器、网页美化
什么是CSS Cascading Style Sheet 层叠级联样式表 CSS:表现和美化网页字体,颜色,边距,高度,宽度, 背景图片,网页定位,网页浮动发展史: CSS1.0 CSS2.0: ...
CSS选择器、网页美化（字体、阴影、列表、渐变）
css 如何学习 1.CSS是什么 2.CSS怎么用 3.CSS 选择器 4.美化页面(文字.阴影.超链接.列表.渐变) 推荐网站:菜鸟教程 1.css入门 1.1.什么是CSS Cascading ...
CSS—LESS基础整理
第一次接触CSS预编译,然后对比后发现其实less的上手容易度确实比sass高不少,再加上公司项目也是使用的less.所以想想还是根据网上的各种教程,整理出来了一些比较基础的.而且比较能让我们这种初学 ...
全栈 - 20 Web 基础网页的血肉 CSS
这是全栈数据工程师养成攻略系列教程的第二十期:20 Web基础网页的血肉CSS. HTML决定了网页中包含哪些内容,而CSS则决定了这些内容所呈现的样式. 什么是CSS CSS全拼是Cascadin ...
【转】网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正...
[现原文地址]: https://www.cnblogs.com/linjierd/p/10117654.html 最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功 ...
web前端网页美化重器-------css
1,什么是css? 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言 ...
CSS基础学习三：CSS语法
CSS语法分为基础语法和高级语法. 一CSS 基础语法 (1)CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,请使用花括号来包围声明. selector {declarat ...

CSS语法基础--网页美化

网页美化

1 字体样式

2 文本样式

3 超链接伪类与阴影渐变

3.1 超链接伪类

3.2 阴影

3.3 渐变

4 列表样式与背景

CSS语法基础--网页美化相关推荐

最新文章

热门文章