第五章

第五章##

CSS3美化网页元素####

1.标签

1.基本语句
<span>...</span>

2.字体样式（font）

1.字体类型
font-family
例：p{font-family: "楷体";}
    body{font-family: "楷体";}

2.字体大小
font-size
例：h1{font-size:24px;}

3.字体风格
font-style
例：h1{font-style:italic;}

4.字体粗细
font-weight
例：h1{font-weight:bold;}

5.字体属性
font
例：h1{font:italic bold 36px "宋体";}
注：字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

3.文本样式（text）

1.文本颜色
color
例：color:#A983D8;

2.水平对齐
text-align
例：text-align:right;

3.首行缩进
text-indent
例：text-indent:20em;

4.文本行高
line-height
例：line-height:25px;

5.文本装饰
text-decoration
例：text-decoration:underline；
注：none                默认值，定义的标准文本
    underline           设置文本的下划线
    overline            设置文本的上划线
    line-through        设置文本的删除线

6.垂直对齐
vertical-align
例：vertical-align：middle；
注：middle
    top
    bottom
    
7.文本阴影
text-shadow : color  x-offset  y-offset  blur-radius;
注：“color”，阴影颜色；
    “x-offset”，X轴位移，用来指定阴影水平位移量；
    “y-offset”，Y轴位移，用来指定阴影垂直位移量；
    “blur-radius”，阴影模糊半径，代表阴影向外模糊的模糊范围

4.超链接伪类

1.伪类基本样式
标签名:伪类名{声明;}
用于向某些选择器添加特殊样式

2.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；
    语句前的“标签名”的功能，可以换成“.class”或“#id”等，以使用其他选择器功能

5.列表样式（list）

1.列表类型
list-style-type
例：ul {list-style-type : square}

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

2.列表项图像
list-style-image
例：ul li {list-style-image : url(xxx.gif)}

6.背景样式（background）

1.背景颜色
background-color
例：p {background-color: gray;}

2.背景图像
background-image:url(图片路径);
例：body {background-image: url(/i/eg_bg_04.gif);}

3.背景重复方式
background-repeat
例：body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }
注：repeat            沿水平和垂直两个方向平铺
    no-repeat         不平铺，即只显示一次
    repeat-x          只沿水平方向平铺
    repeat-y          只沿垂直方向平铺
    
4.背景定位
background-position
例：body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }
注：Xpos；Ypos        单位：px，Xpos表示水平位置，Ypos表示垂直位置
    X%；Y%            使用百分比表示背景的位置
    X、Y方向关键词     水平方向的关键词：left、center、right
                      垂直方向的关键词：top、center、bottom

5.背景属性
background
例：.title {
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	text-indent:1em;
	line-height:35px;
	background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
   }
注：相同类型的属性样式可写在同一属性词后（简写需要按照一定的先后顺序，否则可能无法识别）

7.背景尺寸

1.基本代码
background-size

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CThbqifN-1610870317172)(D:\笔记\背景尺寸.PNG)]

8.CSS3渐变

1.线性渐变
linear-gradient ( position,  color1,  color2,…)
功能为：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
注：“position”为渐变方向
例：-webkit-linear-gradient(red, yellow, green)；
（兼容Webkit内核的浏览器）


2.径向渐变
radial-gradient ( position,  color1,  color2,…)
功能为：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
例：-webkit-radial-gradient(red, yellow, green)；
（兼容Webkit内核的浏览器）

3.渐变兼容
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-