CSS美化网页元素大全

< span>标签

作用：能让某几个文字或者某个词语凸显出来

 

1.CSS 字体属性

属性	描述
font	简写属性。在一条声明中设置所有字体属性，简写顺序：字体风格→字体粗细→字体大小→字体类型
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小，单位是px(像素)
font-style	规定文本的字体样式。 normal（标准）、italic（斜体）和oblique（倾斜）
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。 normal:默认值，定义标准的字体 bold:粗体字体 bolder:更粗的字体 lighter:更细的字体 100、200、300:定义由粗到细的字体 400等同于normal 700等同于 bold

 

 

2.CSS文本属性

属性	描述
color	设置文本颜色
text-align	设置元素水平对齐方式 left:把文本排列到左边（默认值） right:把文本排列到右边 center:把文本排列到中间 justify:实现两端对齐文本效果
text-indent	设置首行文本的缩进，单位：em或px
line-height	设置文本的行高
text-decoration	设置文本的装饰 none:默认值 定义的标准文本 underline:设置文本的下划线 overline:设置文本的上划线 line-through:设置文本的删除线
vertical-align	设置文本与图片的对齐方式，middle、top、bottom（不常用）
text-shadow	文本阴影，属性顺序：阴影颜色 X轴位移 Y轴位移 阴影模糊半径

3.超链接伪类

属性	描述
a:link	未单机访问时超链接样式
a:visited	单机访问后超链接样式
a:hover	鼠标悬浮其上的超链接样式
a:active	鼠标单机未释放的超链接样式

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

 

4.列表样式

list-style-type设置列表标记类型

属性	描述
none	无标记符号
disc	实心圆，默认类型
circle	空心圆
square	实心正方形
decimal	数字

list-style-image
list-style-position
list-style

 

5.背景样式

5.1认识< div>标签

< div>标签可以把HTML文档分割成独立的不同的部分，因此常用来进行网页布局

5.2背景属性

属性	描述
background-color	背景颜色，默认值transparent，即透明色
background-image：url	背景图像
background-size	背景图像尺寸 auto：默认值 使用背景图片保持原样 percentage：当使用百分值时，不是相对于背景的尺寸大小来计算的 而是相对于元素宽度来计算的 cover：整个背景图片放大填充整个元素 contain：让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者 高度正好适应所定义背景的区域
background-repeat	背景图像重复方式 repeat：沿水平和垂直两个方向平铺 no-repeat：不平铺，即只显示一次 repeat-x：只沿水平方向平铺 repeat-y：只沿垂直方向平铺
background-position	背景图像定位： Xpos Ypos:单位PX Xpos表示水平位置 Ypos表示垂直位置 X% Y%:使用百分比表示背景的位置 水平方向关键词：left、center、right 垂直方向的关键字：top、center、bottom 示例：background-position：200px 10x;
background	简写属性。在一条声明中设置所有背景属性，简写顺序：背景颜色→背景图片URL→背景图像定位→背景图像重复方式

 

6.CSS3线性渐变

设置渐变色属于背景图片的范畴

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

线性渐变语法：
linear-gradient(渐变方向，color1，color2，......);

实例：

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

更多详细渐变请看