HTML5和CSS3开发第五章知识点

一：网页文本
1.<span>标签是用来组合HTML文档中的行内元素，他没有固定的格式。
2.字体样式：
 font-famliy:设置字体类型   font-size：设置字体大小  font-style：设置字体风格  font-weight：设置字体的粗细  
  font：在一个声明中设置所有字体属性
<注意：英文字体：verdana  选择字体是否含空格：“Times New Roman”

3.字体风格：normal italic oblique 标准字样，斜体字样，倾斜字样。
4.字体的粗细：normal：默认值，标准字样  bold:粗体字体  bolder:更粗字体 ligter：更细的字体
5.字体属性：p span{font:oblique bold 12px “楷体”;}

二:排版网页文本
  color：设置文本颜色 text-align：设置元素水平对齐方式  text-indent：设置首行文本缩进 line-height：设置文本的行高
  text-decoration：设置文本装饰
 1.文本颜色
   （1.rgb 以上R G B三个参数，正整数为0~255；百分比的取值为0%~100%，
   （2.rgba 在rgb基础上控制了alpha透明度的参数，其中透明通道值为0~1   h1{colo：rgba（0,0,255,0.5）}
 2.水平对齐方式
   left:文本排列左边  right：文本排列右边 center：文本排列居中 justify：实现两端文本对齐效果
 3.首行和行高
   p{line-height：28px；text-indent:2em;}
 4.文本装饰（text-decoration）
   none:默认值，标准文本 underline：设置文本的下划线  overline：设置文本的上划线  line-through:设置文本的删除线
 5.垂直对齐方式
  1.p,img{vertical-align：middle;}
 6.文本阴影
 text-shadow：color x轴移动 （x-offset）y轴移动（y-offset） 模糊半径（blur-radius）；
  color：阴影颜色，定义绘制阴影时所使用的颜色，如果不设置这个值，则会使文本的颜色作为阴影的颜色。
  x-offset:用来指定阴影部分水平位移量，其值可以是正或负，如果为正在右边，为负在左边。
  y-offset：用来指定阴影部分垂直位移量，其值可以是正或负，如果为正在右边，为负在左边。
  blur-radius:阴影模糊半径，代表阴影向外模糊的模糊范围。值越大阴影向外模糊的范围越大，阴影的边缘就越模糊。这个值
  只能是正值，如果为0，表示不具有模糊效果。

 三：设置超链接和列表样式
  a:link（单机访问前的超链接样式） a:visited（单机访问后的超链接样式） a:hover(鼠标悬浮其上的超链接样式)
  a:active（单机未释放的超链接样式）
   
 列表样式：list-style-type：
 none:无标记符号 disc：实心圆（默认类型） circle：空心圆  square：实心正方形  decimal：数字
 
 四：背景样式
  div布局页面
   背景颜色：(background-color)和背景图像（background-image)两种方式。  特殊值：transparent（透明的）
   背景图像引入：background-image:url（"图片路径"）

  背景重复方式：（background-repeat）
                 1.repeat:沿水平和垂直两个方向平铺。
                 2.no-repeat:不平铺，及图片只显示一次。
                 3.repeat-x：只沿水平方向平铺。
                 4.repeat-y：只沿垂直方向平铺。
  背景定位：（background-position）
             1.Xpos Ypos :像素值
             2.X% Y% ：百分比表示背景位置  
             3.X,Y方向：水平方向关键值（left,center,right）垂直方向关键值（top: center,bottom：）
  背景尺寸：background-size:auto；（默认值，无变化。）
                             ：（改成固定像素点）
             background-size:cover；（整个图片放大填充）注意：（居中加background-position:center；）
                            ：contain(可以让背景图片保持本身的宽高比例，将背景图片缩放到宽度或高度正好适应定义的区域）
         
  五：CSS3渐变
             linear-gradient（position，color，color）
      浏览器：TE 加前缀：-ms-
              火狐     ：-moz-
              谷歌     ：-webkit-
          
       渐变的方向：to bottom :颜色从顶部到底部。 to left:颜色从右到左。  to right：颜色从左到右。
                   to top left:右下方到左上方。  to top ringht:颜色从左下方到右上方。  
                   to bottom left:颜色从右上方到左下方。 to bottom right:颜色从左上方到右下方
        注意：径向渐变radial-gradient。径向渐变是圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个新的
              起点朝所以方向混合。