第五章CSS3美化网页元素

一、为什么使用CSS

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

二、 < span> 标签

行内元素，能让某几个文字或者某个词语凸显出来

三、字体样式

<style>
/*字体样式*/
    .fontfamily{font-family: Verdana,"楷体";}
/*字体大小，单位px*/
    .fontsize{font-size: 24px;}
/*字体大小，单位em*/
    .fontsize{font-size: 2em;}
/*字体风格,默认*/
    .fontstyle{font-style: normal;}
/*字体风格,斜体*/
    .fontstyle1{font-style: italic;}
/*字体风格,倾斜体*/
    .fontstyle2{font-style: oblique;}
/*字体粗细,细*/
    .fontweight{font-weight: lighter;}
/*字体粗细,粗*/
    .fontweight1{font-weight: bold;}
/*字体粗细,默认400*/
    .fontweight2{font-weight: 400;}
/*字体粗细,粗700*/
    .fontweight3{font-weight: 700;}
/*字体粗细,默认*/
    .fontweight4{font-weight: normal;}
/*在一个声明中设置所有的字体属性*/
    .font{font:normal bold 12px "隶书";}
</style>

     <!--描述：font-family：字体样式 -->
    <p class="fontfamily">字体样式楷体</p>
     <!--描述：font-size：字体大小-->
    <p class="fontsize">字体大小单位px</p>
    <p class="fontsize1">字体大小单位em</p>
<!--描述：font-style：字体风格-->
    <p class="fontstyle">字体风格默认</p>
    <p class="fontstyle1">字体风格斜体</p>
    <p class="fontstyle2">字体风格倾斜体</p>
    <!--描述：font-weight：字体粗细-->
    <p class="fontweight">字体粗细更细</p>
    <p class="fontweight1">字体粗细粗</p>
    <p class="fontweight2">字体粗细数字400默认</p>
    <p class="fontweight3">字体粗细700粗</p>
    <p class="fontweight4">字体粗细</p>
    <!--描述：font：在一个声明中设置所有的字体属性
        按顺序：字体风格、字体粗细、字体大小、字体类型 -->
    <p class="font">在一个声明中设置所有的字体属性</p>

1.font-family字体类型

font-family列举一个或多个由逗号隔开的字体族
每个字体族由 <family-name> 或 <generic-name> 值指定。
<family-name>
一个字体族的名字。字体族名可以包含空格，但包含空格时应该用引号。
<generic-name>
通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体。
通用字体族名都是关键字，所以不可以加引号。
在列表的末尾应该至少有一个通用字体族名。

2.字体大小font-size

①通用单位
px:（像素） cm:厘米  mm:毫米 pc:百分比

em:相对长度单位。相对于当前对象内文本的字体尺寸
 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px 
②移动端常使用的单位
rem:根据网页的跟元素（html）来设置字体大小的
pt:磅,是一个物理长度单位，指的是72分之一英寸。
    pt=1/72(英寸), px=1/dpi(英寸)

3.字体风格font-style

normal:默认值
italic:斜体，如果当前字体没有可用的斜体版本，会选用倾斜体替代
oblique:倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体替代

4.字体粗细font-weight

5.在一个声明中设置所有的字体属性font

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

四、文本样式

1.文本颜色color

color：①英文单词，
②十六进制：#+6位数字；
每2位标识一种颜色，红绿蓝,数字越小颜色越浅；
黑色#000000白色#ffffff；
如果每2位数字都相同，可以省略一个数字
③CSS3新增：rgb(数字1，数字2，数字3)
数字越小颜色越浅,范围(0-255)
③CSS3新增：rgba(数字1，数字2，数字3，数字4)
数字4范围：0-1的小数，数字越小越透明

   .color1{color: blue;}
    .color2{color: #666;}
    .color3{color: #00BFFF;}
    .color4{color: rgb(5,5,5);}
    .color5{color: rgba(5,5,5,0.6);}
    .color6{color: transparent;}
<!--描述：color：文本颜色-->
    <p class="color1">文本颜色英文单词</p>
    <p class="color2">文本颜色十六进制每两个相同</p>
    <p class="color3">文本颜色十六进制</p>
    <p class="color4">文本颜色RGB</p>
    <p class="color5">文本颜色RGBA</p>
    <p class="color6">文本颜色特殊值透明</p>

2.块元素和行内元素

块元素：
宽默认100%，高度由内容决定，可以手动改变宽和高
行内元素：
宽和高由内容决定，不能修改

3.水平对齐方式text-align，对块元素生效

   .align1{text-align: left;}
    .align2{text-align: right;}
    .align3{text-align: center;}
    .align4{text-align: justify;}
 <!--描述：text-align：水平对齐方式,对块元素生效-->
    <p class="align1">左对齐</p>
    <p class="align2">右对齐</p>
    <p class="align3">居中</p>
    <p class="align4">两端对齐效果左对齐</p>   

4.首行缩进text-indent，对块元素生效

    .indent1{text-indent: 2em;}
    .indent2{text-indent: 20px;}
<!--描述：text-indent：首行缩进,对块元素生效-->
    <p class="indent1">首行缩进2个默认字体大小(中文)</p>
    <p class="indent2">首行缩进20像素</p>

5.行高line-height，对块元素和行内元素都生效

  .line1{line-height: 30px;}
    .line2{border:1px solid red;}
    .line2{line-height: 50px;}
    <!--描述：line-height：行高，对块元素和行内元素都生效-->
    <p class="line1">块元素</p>
    <p><span class="line2">行内元素</span></p>

6.文本装饰text-decoration

   .decoration1{text-decoration: none;}
    .decoration2{text-decoration: underline;}
    .decoration3{text-decoration: line-through;}
    .decoration4{text-decoration: overline;}
    <!--描述：text-decoration：文本装饰-->
    <p class="decoration1">默认文本装饰</p>
    <p class="decoration2">下划线文本装饰</p>
    <p class="decoration3">删除线文本装饰</p>
    <p class="decoration4">上划线文本装饰</p>

7.垂直对齐方式vertical-align

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

8.文本阴影text-shadow

1.语法

单个阴影
text-shadow : color  x-offset  x-offset  blur-radius;
多个阴影
text-shadow : color  x-offset  x-offset  blur-radius , ... ;
color:阴影颜色
x-offset:X轴位移，用来指定阴影水平位移量,正值在对象右边，负值在对象左边
x-offset:Y轴位移，用来指定阴影垂直位移量,正值在对象底部，负值在对象顶部
blur-radius;:阴影模糊半径，代表阴影向外模糊的模糊范围
默认值0，不具有模糊效果；只能是正值，值越大越模糊

.textshadow1{text-shadow: red 10px 10px 1px;}
.textshadow2{text-shadow: green 20px 20px 1px,blue 5px 5px 1px;}
<!--描述：text-shadow：文本阴影-->
<p class="textshadow1">一个文本阴影</p>
<p class="textshadow2">两个文本阴影</p>

2.浏览器兼容性

五、超链接伪类

设置伪类的顺序：a:link->a:visited->a:hover->a:active
不仅限于超链接,其他的无访问后样式

a{color: black;}
.link1 a:link{color: red;}    
.visited1 a:visited{color: blue;}
.hover1 a:hover{color: yellow;}
.active1 a:active{color: green;}
<!--描述：a:link:未单击访问-->
<p class="link1"><a href="">未单击访问(默认显示)</a></p>
<!--描述：a:visited:单击访问后-->
<p class="visited1"><a href="">单击访问后</a></p>
<!--描述：a:hover:鼠标悬浮元素上-->
<p class="hover1"><a href="">鼠标悬浮元素上</a></p>
<!--描述：a:active:鼠标点击未释放-->
<p class="active1"><a href="">鼠标点击未释放(点击以后不松手)</a></p>

1.超链接显示

2.超链接悬浮

3.超链接单击未释放

六、列表样式

1.list-style-type设置列表元素的样式

    .ullistoftype1{list-style-type: none;}
    .ullistoftype2{list-style-type: disc;}
    .ullistoftype3{list-style-type: circle;}
    .ullistoftype4{list-style-type: square;}
    .ullistoftype5{list-style-type: decimal;}
<!--描述：none:无序列表元素的样式无标记 -->
<ul class="ullistoftype1"><li>无序列表元素的样式无标记</li></ul>
<!--描述：disc:无序列表元素的样式实心圆 -->
<ul class="ullistoftype2"><li>无序列表元素的样式实心圆</li></ul>
<!--描述：circle:无序列表元素的样式空心圆 -->
<ul class="ullistoftype3"><li>无序列表元素的样式空心圆</li></ul>
<!--描述：square:无序列表元素的样式实心正方形 -->
<ul class="ullistoftype4"><li>无序列表元素的样式实心正方形</li></ul>
<!--描述：decimal:无序列表元素的样式数字 -->
<ul class="ullistoftype5"><li>无序列表元素的样式数字</li></ul>

<ol class="ollistoftype1" type="I">
<li>有序列表元素的样式I\Ⅱ\Ⅲ</li><li>有序列表元素的样式I\Ⅱ\Ⅲ</li>
</ol>
<!--描述：A:有序列表元素的样式A -->
<ol class="ollistoftype2" type="A">
<li>有序列表元素的样式ABC</li><li>有序列表元素的样式I\Ⅱ\Ⅲ</li>
</ol>
<!--描述：a:有序列表元素的样式a -->
<ol class="ollistoftype3" type="a">
<li>有序列表元素的样式abc</li><li>有序列表元素的样式I\Ⅱ\Ⅲ</li>
</ol>

2.list-style-image

指定一个能用来作为列表元素标记的图片
ul {
  list-style-image: url("图片地址")
}

3.list-style-position

指定标记框在主体块框中的位置

<!--描述：list-style-position:inside;
标记盒在主块盒的外面 -->
<ul class="liststyleposition1"><li>图片作为列表序号的定位</li></ul>
<!--描述：list-style-position:outside;默认值
标记盒是主要块盒中的第一个行内盒，处于元素的内容流之后。 -->
<ul class="liststyleposition2"><li>图片作为列表序号的定位</li></ul>

4.list-style

去除列表前面的小黑点
li {
list-style:none;
}

七、网页背景

1.背景颜色background-color

属性的值为颜色值或关键字"transparent"二者选其一
transparent：透明，在 CSS 中，它是一种颜色

2.背景图像background-image

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

3.背景重复方式background-repeat

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

4.背景定位background-position

5.背景属性background

background(颜色 网址 背景定位 背景不重复显示);

div{
/*定义网页内容宽度*/
width: 800px;
/*定义网页内容高度*/
height: 500px;
/*实现网页内容的边框*/
border: 10px royalblue solid;
/*定义网页背景颜色*/
background-color: yellowgreen;
/*定义网页背景图片*/
background-image: url(img/manor-3.jpg);
/*定义网页背景重复方式*/
background-repeat: no-repeat;
/*定义网页背景定位*/
background-position: center ;
/*background(颜色 网址 背景定位 背景不重复显示);*/
background: green url(img/manor-2.jpg) center 200px no-repeat;
}

6.背景尺寸background-size

percentage:充满较小的宽或高
cover:等比例放大，会导致图片被修剪
contain:充满较小的宽或高

八、CSS渐变

1.线性渐变

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

linear-gradient ( position渐变方向,  color1颜色1,  color2颜色2,…)

/*从上到下，由蓝变黄*/
#main1{background: linear-gradient(to bottom,blue,yellow);}
/*从上到下，由蓝变红在变黄*/
#main2{background: linear-gradient(to bottom,blue,red,yellow);}
/*从右到左，由绿变白*/
#main3{background: linear-gradient(to left,green,white);}
/*从左到右，由红变黑*/
#main4{background: linear-gradient(to right,red,black);}
/*从下到上，由橘变红*/
#main5{background: linear-gradient(to top,orange,red);}
/*定义块宽高100px，行内块元素*/
div{width: 100px;height: 100px;display: inline-block;}

2.径向渐变

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
径向渐变指的是从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）

/*从中间向外拉*/
#main1{background: radial-gradient(blue,yellow);}
/*自定义圆心位置渐变*/
#main2{background: radial-gradient(at right bottom,blue,red,yellow);}
/*自定义形状圆心位置渐变*/
#main3{background: radial-gradient(circle at 50% 50% ,green,white);}
/*自定义像素渐变*/
#main4{background: radial-gradient(50px 50px at 50% 50%,red,white);}
/*定义块宽高100px，行内块元素*/
div{width: 100px;height: 100px;display: inline-block;}

3.浏览器兼容性

4.浏览器兼容前缀

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