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
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
28 0
|
7天前
|
XML 前端开发 数据格式
css元素
【4月更文挑战第20天】css元素
15 4
|
10天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
11 0
N..
|
1月前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
N..
|
1月前
|
前端开发 容器
CSS 网页布局元素
CSS 网页布局元素
N..
23 1
|
1月前
|
前端开发 开发者 UED
CSS:塑造网页外观的艺术
CSS(层叠样式表)是前端开发的核心技术之一,它负责网页的样式设计和布局。通过CSS,开发者能够控制网页元素的外观、位置以及交互效果,从而打造出美观、易用的网页界面。本文将探讨CSS的基本概念、使用技巧以及在前端开发中的重要性。
|
1月前
|
前端开发 UED
深入理解CSS过渡效果(Transition):提升网页动画体验
深入理解CSS过渡效果(Transition):提升网页动画体验
31 1
|
1月前
|
Web App开发 前端开发 JavaScript
过渡效果的艺术:CSS transition 让网页交互更平滑(下)
过渡效果的艺术:CSS transition 让网页交互更平滑(下)
|
前端开发 容器
css:整理9种元素水平垂直居中的方法
css:整理9种元素水平垂直居中的方法
119 0
css:整理9种元素水平垂直居中的方法