1. 美化页面原因
- 有效的传递页面信息
- 美化网页,页面漂亮,才能吸引用户
- 凸显页面的主题
- 提高用户的体验
2. span标签
- 作用:对于重点要突出的字,使用 span 套起来
- font—size的取值
xx-small:最小
x-small:较小
small:小
medium:正常(默认值),根据字体进行调整
large:大
x-large:较大
xx-large:最大
也可取具体长度单位值 - 实例:
3. 字体样式
- 字体属性
(1)font-family:设置字体类型
(2)font-size:设置字体大小
- font-size 的值可以是绝对值或相对值;
- font-size:12px; 设置对象具体字体大小为12px
- font-size:xx-small; 设置文字大小为最小
- font-size:small; 设置文字字体大小为小
- font-size:x-large;设置对象字体大小为较大
- font-size:larger;设置对象字体大小为大
- font-size:smaller;相对于父容器中字体尺寸进行相对减小
- font-size:50%;相对于父容器中字体尺寸进行相应调整为50%大小
- font-size:150%;相对于父容器中字体尺寸进行相应调整为150%大小
(3)font-style:设置字体风格
- normal : 文本正常显示
- italic: 文本斜体显示
- oblique : 文本倾斜显示
(4)font-weight:设置字体的粗细
- 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形(lighter),900 对应最粗的字体变形(bolder)。 400 等价于 normal,而 700 等价于 bold。
(5)color:设置字体颜色
(6)font :在一个声明中设置字体的所有属性
- 实例代码
- 运行结果
4. 文本样式
-
color:单词RGB:0~F
RGBA 其中A:0~1 -
text-align : 水平对齐方式,居中/最左边/最右边
-
text-indent: 2em 段落首行缩进(2个字符)
-
height: 300px 块的高度
-
line-height: 300px 文本行高
行高和块的高度一致,就可以上下居中 -
text-decoration: underline 下划线
-
text-decoration: line-through 中划线
-
text-decoration: overline 上划线
-
text-decoration: none 去掉下(上/中)划线
-
vertical-align: middle 水平对齐(两个元素a,b)
-
text-shadow: 阴影颜色,水平偏移,垂直偏移,阴影半径
-
实例代码
-
运行结果
5. 超链接伪类
- CSS 伪类用于向某些选择器添加特殊的效果,简单点说,就是你没定义这个类,但它确实作为一个类来使用,利用伪类为我们的元素添加各种不同的效果
- 正常情况下,a{ },a:hover{ } 这段代码就是给 a 这个标签选择器添加了一个效果,这个效果在鼠标悬停于 a 标签上方时被触发
- 实例代码
- 运行结果
6. 列表
- list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形 - background-image: url("…/images/r.gif") 设置背景图片
- background-repeat: no-repeat 设置如何重复背景图像,no-repeat表示背景图片仅显示一次
- background-position: 236px 2px 设置图片位置
- 实例代码
- 运行结果
7. 背景
- Div是Html标签之一,div具有分割内容作用,div与CSS样式可让网页实现各种样式效果
div标签替代了以前table标签布局
通常一对未设置任何样式的div,独占一行 - background-image 属性为元素设置背景图像
格式:background-image: url(“图像路径”)
元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复 - background-repeat 属性定义了图像的平铺模式
repeat :默认,背景图像将在水平方向和垂直方向重复
repeat-x :背景图像将在水平方向重复
repeat-y :背景图像将在垂直方向重复
no-repeat :背景图像将仅显示一次 - 实例代码
- 运行结果
8. 渐变
-
可以让你在两个或多个指定的颜色之间显示平稳的过渡
CSS3 定义了两种类型的渐变(gradients):
(1) 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向-
格式一: background-image: linear-gradient(direction, color-stop1, color-stop2, …)
-
direction:默认从上到下的线性渐变;to right 表示从左到右的线性渐变;to bottom right表示从左上角开始到右下角的线性渐变
-
格式二:background-image: linear-gradient(angle, color-stop1, color-stop2)
-
angle: 指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变
(2) 径向渐变(Radial Gradients)- 由它们的中心定义
-
-
实例代码(线性渐变)
-
运行结果
9. 盒子模型
(1) 简介
margin:外边距 ,用于设置vv页面中元素与元素之间的距离
padding: 内边距,内边距和外边距的分界线,用于分离元素
border:边框,用于控制内容和border之间的距离
- 盒子的计算方式:这个元素到底多大?
margin+border+padding+内容宽度
(2)边框
- 属性:边框的粗细(width)、边框的样式(style)、边框的颜色(color)
- 实例代码
- 运行结果
(3)内外边距 - 外边距(margin)的妙用:居中元素
margin:0 auto; 上下为0,左右自动,使之居中
margin:0 1px 2px 3px ;顺时针方向(上右下左) - 内边距(padding) 同理
- 案例代码
- 运行结果
(4)圆角边框 - border-radius 为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性)
- 参数按照:左上 右上 右下 左下,顺时针方向
- 圆圈: 圆角 = 半径
- 演示
(5)阴影 - box-shadow 属性向框内添加一个或多个阴影
- 格式:box-shadow: h-shadow v-shadow blur spread color inset
h-shadow:必需。水平阴影的位置。允许负值
v-shadow:必需。垂直阴影的位置。允许负值
blur:可选。模糊距离
spread:可选。阴影的尺寸
color:可选。阴影的颜色。请参阅 CSS 颜色值
inset:可选。将外部阴影 (outset) 改为内部阴影 - display: block 将此元素显示为块级元素,此元素前后会带有换行符
- 演示