文章目录

1. 美化页面原因
2. span标签
3. 字体样式
4. 文本样式
5. 超链接伪类
6. 列表
7. 背景
8. 渐变
9. 盒子模型

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 将此元素显示为块级元素，此元素前后会带有换行符
演示

前端(五)——CSS之美化页面相关推荐

前端相关知识(CSS)(1)(美化页面效果)
1)HTML只是描述了页面的结构和内容,也就是骨 2)CSS描述的是页面的样式,也就是页面具体长成什么样子,也就是皮 3)具体来说就是就是描述了任意一个网页的元素,大小,位置,字体,颜色,背景,边框, ...
css一些美化页面的方法
伪类: 很常用的hover 鼠标移动到父元素时子元素变色写父级元素:hover 子元素{}这样直接对子元素进行操作. 还有就是对他的兄弟元素发生改变:用+加兄弟元素,如果让所有的兄弟元素发生变化那就 ...
Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
CSS入门二、美化页面元素
零.文章目录 CSS入门二.美化页面元素 1.字体属性 CSS Fonts (字体)属性用于定义字体系列.大小.粗细.和文字样式(如斜体) (1)字体系列font-family font-family ...
前端 HTML/CSS （十五）
目录前端 HTML/CSS (十五) 动画简单的实现设置多个动画延迟播放动画的迭代次数设置动画的播放方向 animation-timing-function,改变内部的时序关键帧动画响 ...
前端面试CSS自检（下）页面布局、定位与浮动和场景应用（先看问题自己自述一遍不会再看答案）
推荐大家的使用本篇文章的方式: 先看问题自己会不会,如果会的话,要自己说一遍,组织好语言. CSS的面试内容主要可以分四个部分: CSS基础.页面布局.定位与浮动和场景应用 CSS部分会涉及到代码的编 ...
html页面美化代码时间,CSS+JS美化过漂亮的日历控件
CSS+JS美化过漂亮的日历控件 - www.webdm.cn var months = new Array("一", "二", "三",& ...
前端表白纪念日用js+html+css实现的页面代码复制粘贴就能用
前端表白纪念日用js+html+css实现的页面代码复制粘贴就能用页面如下: 代码: <!DOCTYPE html> <html><head><script ...
js给html设置背景音乐,最简单最快的方法给H5页面添加背景音乐播放（css样式美化）...
看了很多场景应用,右上角总是会有一个音频按钮,会播放音乐,现在通过简单几步就可以实现这个功能. 1.先上基础的html,定位用了fixed(source 标签里面对应的音频链接换为自己的音频连接) 2 ...

前端(五)——CSS之美化页面