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



目录
相关文章
|
3月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
50 1
|
8天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
14 0
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
23天前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
57 0
|
3月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
51 1
简单几行代码CSS实现网页自动打文字效果
|
2月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
2月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
3月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
28 5
|
3月前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
57 4
|
3月前
|
存储 前端开发
为 HTML 元素指定 CSS 样式的方式
【8月更文挑战第24天】
69 0