标签：mamicode   offset   文字   通道   实现   visit   标签   用户体验   漂亮   

为什么要使用CSS3？

有效的传递页面信息
使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户
可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
具有良好的用户体验

<span>标签

<span>标签 的作用
能让某几个文字或者某个词语凸显出来

                        字体样式

字体类型

字体大小

font-size属性
单位
px（像素）
em、rem、cm、mm、pt、pc

字体风格

 font-style属性
normal、italic和oblique

 字体的粗细

字体属性

 font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

文本样式

 文本属性

属性                        含义                        举例
color                  设置文本颜色                color:#00C;
text-align           设置元素水平对齐方式  text-align:right;
text-indent         设置首行文本的缩进     text-indent:20px;
line-height         设置文本的行高            line-height:25px;
text-decoration 设置文本的装饰             text-decoration:underline;

文本颜色

color属性
RGB
十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
rgb(r,g,b) : 正整数的取值为0～255
RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

                                                                                                                                                                               排版文本段落

文本修饰和垂直对齐

文本装饰
text-decoration属性
垂直对齐方式
vertical-align属性：middle、top、bottom

文本阴影

text-shadow : color  x-offset  y-offset  blur-radius;

超链接伪类

伪类样式

语法：标签名:伪类名{声明;}

设置伪类的顺序：a:link->a:visited->a:hover->a:active

 列表样式

list-style-type
list-style-image

列表样式

list-style

去除列表前面的小黑点

 背景样式

背景颜色
background-color

背景颜色值：十六进制方法表示

transparent

背景图像
background-image

背景图像
background-image属性

背景重复方式
background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺

背景定位

background-position属性

设置背景

背景属性
background属性   背景样式简写

 CSS3渐变

线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

线性渐变

CSS3美化网页元素

标签：mamicode   offset   文字   通道   实现   visit   标签   用户体验   漂亮   

原文地址：https://www.cnblogs.com/songkaiwen/p/13194960.html