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

相关文章
|
2月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
40 1
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
2月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
40 1
简单几行代码CSS实现网页自动打文字效果
|
26天前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
9天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
前端开发 容器
最新CSS3定位元素
【8月更文挑战第28天】
20 5
|
2月前
|
编解码 前端开发 开发者
【前端设计达人必备】揭秘CSS尺寸单位的魔力:从基础到实战,打造灵动响应式网页!
【8月更文挑战第26天】本文深入探讨了CSS中常用的尺寸单位,包括像素(px)、百分比(%)、视窗单位(vw/vh/vmin/vmax)、可伸缩相对单位(em/rem)以及Flexbox和Grid中的fr单位。通过具体案例展示了每种单位的特点及其适用场景。像素适用于固定尺寸元素;百分比和em/rem利于构建响应式布局;视窗单位适合全屏设计;fr单位则能有效管理复杂网格布局的空间分配。掌握这些单位有助于开发者设计出更加灵活、高质量的网页布局。
40 4
|
2月前
|
存储 前端开发
为 HTML 元素指定 CSS 样式的方式
【8月更文挑战第24天】
52 0
|
2月前
|
前端开发 开发者
CSS样式覆盖规则详解,让你的网页更加出彩!
【8月更文挑战第23天】在Web前端开发中,理解CSS样式覆盖规则至关重要。当多个样式规则作用于同一元素时,哪些规则生效?本文通过实例解析这些规则。简单案例中,`.error`类选择器优先级高于`p`标签,文字显示红色。复杂案例涉及`.important`类与`!important`关键字,此时文字变为绿色。另外,内联样式拥有比外部样式更高的优先级。掌握这些原则有助于开发者高效管理样式。
77 0
|
2月前
|
前端开发 数据安全/隐私保护 开发者
热门聚焦!Web 前端 CSS 选择器 —— 解锁精美网页的密码,触动开发者心灵深处!
【8月更文挑战第23天】CSS 选择器是 Web 前端设计中的关键工具,用于精准定位和美化页面元素。主要包括:直观的元素选择器(如 `p`),灵活的类选择器(如 `.my-class`),唯一的 ID 选择器(如 `#unique-div`),以及可根据属性选择的属性选择器(如 `a[title]`)。此外,后代选择器(如 `div p`)、子选择器(如 `ul > li`)和相邻兄弟选择器(如 `h1 + p`)可用于更复杂的选择。通用选择器(如 `*`)则适用于所有元素。通过组合这些选择器,开发者能够创建出既复杂又美观的网页样式,提升用户体验。
29 0