第五章 CSS3美化网页

第五章 CSS3美化网页

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

1.字体样式

• font-family：p{font-family:Verdana,“楷体”;}

• font-size：单位：px、em（父元素大小 X em）、rem（根元素大小 X rem）、cm、pt、pc、mm

• font-style：normal、italic（斜体）、oblique（倾斜体）

• font-weight：normal（400）、bold（粗体/700）、bolder（更粗的）、lighter（更细的）

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

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

2.文本样式

• 颜色 color:RGB->rgb(r,g,b) : 正整数的取值为0～255 （rdba: a 是透明度 0~1）

  

• 水平对齐方式 text-align用于块级元素（left、right、center、justify–两端对齐）

  //图片水平居中
  img{
      clear: both;
      display: block;
      margin: auto; 
  }
  

• 首行缩进 text-indent(单位：em/px)

• 行高 line-height(px)

• 文本修饰 text-decoration

  none:默认值

  underline：下划线

  overline：上划线

  line-through：删除线

• 垂直对齐 vertical-align（middle、top、bottom）

• 文本阴影 text-shadow（color:阴影颜色、x-offset：阴影水平位移量、y-offset：阴影垂直位移量、blur-radius：阴影向外模糊的模糊范围）

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

3.超链接伪类

• 伪类样式（标签名：为类名{声明;}）

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

• CSS设置超链接（顺序：a:link->a:visited->a:hover->a:active）

  a:link	鼠标未单击访问时样式（初始样式）
  a:visited	单击访问后样式
  a:hover	鼠标悬浮样式
  a:active	单机未释放时的样式

4.列表样式

• list-style-type

• list-style

• list-style-image

• list-style-position

  

5.网页背景

• 背景颜色 background-color

• 背景图像 background-image:url(路径)

• 背景重复方式 background-repeat

  repeat：沿水平和垂直两个方向平铺

  no-repeat：不平铺，即只显示一次

  repeat-x：只沿水平方向平铺

  repeat-y：只沿垂直方向平铺

• 背景定位 background-position

  

• 背景属性 background

  .title {
  	font-size:18px;
  	font-weight:bold;
  	color:#FFF;
  	text-indent:1em;
  	line-height:35px;
  	background:url(../image/arrow-down.gif) 205px 10px no-repeat;
  }
  

• 背景尺寸 background-size(auto：默认、percentage：相对于元素宽度计算、cover：填充整个元素、contain：保持本身宽高比例，缩放到适应所定义背景区域)

• CSS3渐变

  1. 线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

     linear-gradient ( 渐变方向,  第一种颜色,  第二种颜色,…)
     -webkit-linear-gradient ( position,  color1,  color2,…)
     

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

  3. 浏览器兼容

     IE浏览器是Trident内核，加前缀：-ms-

     Chrome浏览器是Webkit内核，加前缀：-webkit-

     Safari浏览器是Webkit内核，加前缀：-webkit-

     Opera浏览器是Blink内核，加前缀：-o-

     Firefox浏览器是Mozilla内核，加前缀：-moz-