CSS3美化网页元素

<span>标签

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

示例

<p>享受<span class="show">“五星级”</span>服务</p>
<p>在这里，有一群人默默支持你成就
      <span id="dream">梦想</span></p>
<p class="bird">选择<span>CSDN</span>，成就你的梦想</p>

字体样式

属性名	含义	举例
font-family	设置字体类型	font-family:"隶书";
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体属性	font:italic bold 36px "宋体";

font-family属性

示例

p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}

font-size属性

单位

• px（像素）
• em、rem、cm、mm、pt、pc

示例

h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}

font-style属性

normal、italic和oblique

font-weight属性

值	说明
normal	默认值，定义标准的字体
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100、200、300、400、500、600、700、800、900	定义由细到粗的字体 400等同于normal，700等同于bold

font属性

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

示例

p span{font:oblique bold 12px "楷体";}

文本样式

文本属性

属性	含义	举例
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

示例

color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);

排版文本段落

值	说明
left	把文本排列到左边。默认值：由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

文本修饰和垂直对齐

文本装饰 ：text-decoration属性

值	说明
none	默认值，定义的标准文本
underline	设置文本的下划线
overline	设置文本的上划线
line-through	设置文本的删除线

垂直对齐方式: vertical-align属性：middle、top、bottom

文本阴影

语法

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

color设置阴影颜色，x-offset表示X轴位移，用来指定阴影水平位移量，y-offset表示Y轴位移，用来指定阴影垂直位移量， blur-radius阴影模糊半径，代表阴影向外模糊的模糊范围

超链接伪类

伪类样式

语法

标签名:伪类名{声明;}

示例

a:hover {
	color:#B46210;
	text-decoration:underline;
}

使用CSS设置超链接

伪类名称	含义	示例
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

列表样式

list-style-type

值	说明	语法示例
none	无标记符号	list-style-type:none;
disc	实心圆，默认类型	list-style-type:disc;
circle	空心圆	list-style-type:circle;
square	实心正方形	list-style-type:square;
decimal	数字	list-style-type:decimal

list-style-image

list-style

示例

li {
	list-style:none;
}

网页背景

背景颜色 background-color

背景图像 background-image

语法

background-image:url(图片路径);

背景重复方式 background-repeat属性：

•       repeat：沿水平和垂直两个方向平铺
•       no-repeat：不平铺，即只显示一次
•       repeat-x：只沿水平方向平铺
•       repeat-y：只沿垂直方向平铺

背景定位  background-position属性

值	含义
Xpos  Ypos	单位：px， Xpos表示水平位置，Ypos表示垂直位置
X%  Y%	使用百分比表示背景的位置
X、Y方向关键词	水平方向的关键词： left、center、right 垂直方向的关键词： top、center、bottom

背景属性 background属性

背景尺寸 background-size

属性值	描述
auto	默认值，使用背景图片保持原样
percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover	整个背景图片放大填充了整个元素
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

线性渐变

语法

linear-gradient ( position,  color1,  color2,…)

 position定义渐变方向,  由color1向color2渐变