前端Html5/Css3—CSS美化

第五章 CSS美化

5.1 字体样式

<span></span>能让某几个文字或者某个词语凸显出来

5.1.1 font-family字体类型

• font-family

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

5.1.2 font-size字体大小

• font-size属性

px（像素）

em、rem、cm、mm、pt、pc

/* em   父亲元素字体大小*em
				如：父亲元素字体大小为10px,子元素字体大小为2em
				则2em相当于20px(10*2em)
				
	rem  根(html)元素字体大小*rem */

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

5.1.3 font-style字体风格

• font-style属性

5.1.4 font-weight字体粗细

• font-weight属性

5.1.5 font属性

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

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

5.2 文本属性

5.2.1 text-align:属性值如下

• 当line-heigh和容器height一致时候，可以实现垂直居中

5.2.2 text-decoration:属性值如下

div{
				/* underline:文本下划线
				overline:文本上划线
				line-through:文本删除线 */
				text-decoration: underline;
			}

vertical-align:图片文字对齐方式

属性：middle、top、bottom

5.2.3 text-shadow文本阴影

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

	span{
				text-shadow: #0000FF 1px 1px 2px;
			}

5.3 color属性

RGB：

• 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
• rgb(r,g,b) : 正整数的取值为0～255

RGBA

• 在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

color:#A983D8;

color:#EEFF66;

color:rgb(0,255,255);

/* 0.5表示透明程度 */
color:rgba(0,0,255,0.5);

5.4 超链接样式

<a href=""></a>

5.5 list-style-type列表样式

• list-style-type:none/disc/circle/square/decimal
• list-style-image:

5.6 background-color背景颜色

5.7 background-img背景图像

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

5.7.1 背景重复方式

background-repeat属性

5.8 background-position背景定位

5.9 背景属性简写

background:url(../image/arrow-down.gif) 20px 10px no-repeat;

5.10 background-size背景尺寸

5.11 linear-gradient渐变

线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等,默认情况下是从上到下

div{
   /*兼容Webkit内核的浏览器*/
  -webkit-linear-gradient ( position,  color1,  color2,…)

  /* 从上到下渐变 */
  background: linear-gradient(blue, pink);
  
  /* 指定为从右到左渐变 */
   background: linear-gradient(to right, blue, pink);
  
  /* 多种颜色渐变 */
  background: linear-gradient(red, yellow, blue, orange);
  
  /* 从 10%的位置开始渐变*/
  background: linear-gradient(blue, 10%, pink);
}

径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合