CSS3美化网页元素

简介: CSS3美化网页元素

一、CSS的作用:

1.有效的传递页面信息。

2.使用CSS美化过的页面,使得页面更加漂亮,吸引用户。

3.可以很好的突出页面的主题内容。

4.具有良好的用户体验。

二、span标签的作用:

自己本身在网页中不起作用,但是可以让某个文字内容凸显出来,方便单独设置内容的样式。

三、字体:

1.font-family:设置字体的类型,例如宋体、楷体

2.font-size:设置字体的大小,例如16px;

3.font-style:设置字体风格,例如斜体、倾斜

4.font-weight:设置字体粗细,例如bold

5.font:斜体 加粗 大小 类型

四、排版网页

1.对齐方式

text-algin:

left:向左对齐

right:向右对齐

center:居中对齐

justify:两端对齐

2.首行缩进:

text-indent:2em,其中em为单位,代表缩进两个字符

3.文本垂直居中:

line-height:值与父元素的高一致即可实现垂直对齐

4.文本装饰:

text-decoration:

overline:上划线

underline:下划线

line-through:删除线

none:无下划线

5.文本阴影:

text-shadow:

color:颜色,red

x轴平移:10px

y轴平移:10px

模糊半径:5px

6.设置超链接样式

1).a:hover:鼠标悬浮样式

2).a?单击访问前的样式

3).a:visited:单击访问后的演示

4).a:over:单击未释放的样式

7.设置列表样式:

1).list-style-type:

none:无标记符号

disc:实心圆,默认

circle:空心圆

square:实心正方形

decimal:数字

8.设置背景样式:

1.background-color:背景颜色

2.background-image:背景图片

3.background-position:背景的位置,50% 50%

4.background-repeat:设置平铺方式,no-repeat

5.background-size:设置尺寸,300px 50px

9.div:

就是一个容器,网页中的标签都放在div里面,好操控

目录
相关文章
|
1天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
3 1
|
2天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
12 1
|
6天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
7天前
|
前端开发
CSS元素隐藏的多种方式:让你轻松实现页面布局
CSS元素隐藏的多种方式:让你轻松实现页面布局
|
7天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
7天前
|
前端开发
css中如何解决绝对定位元素被遮挡的问题
css中如何解决绝对定位元素被遮挡的问题
33 3
|
8天前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
19 1
|
8天前
|
前端开发
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
8 1
|
8天前
|
前端开发
|
8天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性