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里面,好操控



目录
相关文章
|
8天前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
|
13天前
|
前端开发
要使用CSS选择器选中特定类别的元素
【5月更文挑战第31天】要使用CSS选择器选中特定类别的元素
18 2
|
15天前
|
前端开发
css元素得层级顺序
css元素得层级顺序
|
15天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。
|
21天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
25 1
|
22天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
35 1
|
26天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
27天前
|
前端开发
CSS元素隐藏的多种方式:让你轻松实现页面布局
CSS元素隐藏的多种方式:让你轻松实现页面布局
|
27天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
27天前
|
前端开发
css中如何解决绝对定位元素被遮挡的问题
css中如何解决绝对定位元素被遮挡的问题
47 3