当前位置:   article > 正文

css美化网页元素

css美化网页元素

1.span标签的作用
能让某个文字或词语凸显出来

2.字体样式

属性

含义

示例

font-family

设置字体类型

font-family:"隶书";

font-size

设置字体大小

font-size:12px;

font-style

设置字体风格

font-style:italic;

font-weight

设置字体的粗细

font-weight:bold;

font

在一个声明中设置所有字体属性

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

font:italic bold 36px "宋体";

 3.font-size单位
px(像素)、em、cm、mm、pt、pc

4.font-style属性
normal、italic、oblique

5.font-weight

说明

normal

默认值,定义标准的字体

bold

粗体字体

bolder

更粗的字体

lighter

更细的字体

100200300400500600700800900

定义由细到粗的字体

400等同于normal700等同于bold

6.font属性
字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
p span{font:oblique bold 12px "楷体";}

7.文本属性

属性

含义

示例

color

设置文本颜色

color:#00C;

text-align

设置元素水平对齐方式

text-align:right;

text-indent

设置首行文本的缩进

text-indent:20px;

line-height

设置文本的行高

line-height:25px;

text-decoration

设置文本的装饰

text-decoration:underline;

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

9.text-align属性

说明

left

把文本排列到左边。默认值:由浏览器决定

right

把文本排列到右边

center

把文本排列到中间

justify

实现两端对齐文本效果

10.text-decoration

说明

none

默认值,定义的标准文本

underline

设置文本的下划线

overline

设置文本的上划线

line-through

设置文本的删除线

11.文本阴影
text-shadow : color  x-offset  y-offset  blur-radius;

12.超链接伪类
标签名:伪类名{声明;}
a:hover {
    color:#B46210;
    text-decoration:underline;
}

伪类名称

含义

示例

a:link

未单击访问时超链接样式

a:link{color:#9ef5f9;}

a:visited

单击访问后超链接样式

a:visited {color:#333;}

a:hover

鼠标悬浮其上的超链接样式

a:hover{color:#ff7300;}

a:active

鼠标单击未释放的超链接样式

a:active {color:#999;}

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

13.列表样式
list-style-type
————image
————position
list-style

14.背景样式
背景颜色:background-color属性
背景图像:background-image属性
背景重复方式:background-repeat属性
背景定位:background-position属性
背景样式简写:background属性

15.设置背景图像
背景重复方式:background-repeat属性
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺

16.背景定位

含义

Xpos  Ypos

单位:px

Xpos表示水平位置,Ypos表示垂直位置

X%  Y%

使用百分比表示背景的位置

XY方向关键词

水平方向的关键词:

leftcenterright

垂直方向的关键词:

topcenterbottom

17.线性渐变
linear-gradient ( position,  color1,  color2,…)
 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/150808
推荐阅读
相关标签
  

闽ICP备14008679号