二、CSS【Cascading Style Sheets层叠样式表】

1.简介
  1)html:在一个网页中负责的事情是一个页面的结构。（内容）
  2)css（层叠样式表）---Cascading Style Sheets：在一个网页中主要负责了页面的数据样式。


2.编写css代码的方式：
  1)外链式：引人外部的css文件。   -----推荐使用！
         A.调用格式1：使用link标签。-----推荐使用！
    格式：<link href="css文件的路径" rel="stylesheet" type="text/css">
    例子：<link href="css.css" rel="stylesheet" type="text/css">  
B.调用格式2：使用<style>引人
    格式：<style type="text/css">
            @import url("css.css");
   </style>

  2)外联式：在style标签中编写css代码。
        缺点： 只能用于本页面中，复用性不强。
格式： <style type="text/css">
             编写的代码。如：
  color:#FOO;
     </style>
 
  3)内联式：直接在html标签中使用style属性编写。
       缺点：  只能用于本标签中，复用性不强。
       格式：  <p style="color:#OFO">新闻 </p>


3.css知识
  1)注释---【/* 内容  */】
  
  2)选择器：找到对应的数据进行样式化。
    A.标签选择器：就是找到所有指定的标签进行样式化。
 格式： 
     标签名{
 样式1;样式2....
 }
    B.类选择器：使用类选择器首先要给html标签指定对应的class属性值。
 <p class="one">
 格式：
     .class的属性值{
 样式1;样式2....
 }
 例子：
     .one{
 background-color:#OFO;
 color:#FOO;
 }
 注意事项：
     a.html元素的class属性值一定不能以数字开头。
 b.类选择器的样式是要优先于标签选择器的样式。
   顺序：类选择器---->标签选择器
    C.ID选择器：使用id选择器首先要给html元素添加一个id的属性值。
 <p id="two">
 格式：
     #id属性值{
 样式1;样式2....
 }
 注意事项:
          a.优先级最高。
   顺序:id选择器--->类选择器--->标签选择器
 b.id的属性值也是不能以数字开头的。
 c.id的属性值在一个html页面中只能出现一次。（测试是不出问题）
D.交集选择器：就是对选择器1中的选择器2里面的数据进行样式化。
    格式： 
     选择器1 选择器2{
 样式1;样式2....
 }
E.并集选择器：对指定的选择器进行统一的样式化。
 格式： 
     选择器1，选择2...{
 样式1;样式2....
 }
F.通过选择器：
 格式： 
     *{
 样式1;样式2....
 }
I.伪类选择器：状态
     a:link {color: #FF0000}/* 未访问的链接 */
          a:visited {color: #00FF00} /* 已访问的链接 */
          a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
          a:active {color: #0000FF} /* 选定的链接 */
  1和2可以换顺序，3、4固定
  应用：table
      例子：tr:hover{ background-color:#O6F;}

  3)常用的css样式
    A.操作背景的属性
 a.background-color:#CCC;  设置背景颜色
 b.background-image:url(？);   设置背景图片
 c.background-repeat:no-repeat; 设置背景图片是否要重复
     repeat 默认。背景图像将在垂直方向和水平方向重复。 
             repeat-x 背景图像将在水平方向重复。 
             repeat-y 背景图像将在垂直方向重复。 
             no-repeat 背景图像将仅显示一次。 
             inherit 规定应该从父元素继承 background-repeat 属性的设置。 
 d.background-position:400px 100px;  设置背景图片的位置，第一个参数为左上角的左边距离，第二个参数为上边距离。
B.操作文本的样式
 a.color:#FOO;  颜色
 b.font-size:16px;  字体大小
 c.line-height:40px;  行高
 d.letter-spacing:10px;  字间隙
 e.text-align:center; 字体方向
   f.text-decoration:none;  字体修饰
    none 无
             underline 下画线 
             overline 上画线
             line-through 中间穿过的线
             blink  闪烁（目前浏览器不支持，看不到效果）
 g.text-transform:uppercase;
    none 默认。定义带有小写字母和大写字母的标准的文本。 
             capitalize 文本中的每个单词以大写字母开头。 
             uppercase 定义仅有大写字母。 
             lowercase 定义无大写字母，仅有小写字母。 
             inherit 规定应该从父元素继承 text-transform 属性的值。


4.特殊
    1) <input type="text" placeholder="请输入用户名">用于提示用户/>
    2) border-radius:0.7em 边框的圆角 ---------???
    3) font-weight:bold; 文本字体粗细  粗  还有bolder
        font-style:italic; 文本款式---如斜体  斜体还有：oblique  、italic
 
5.表格CSS table属性
        1)border-collapse:设置是否把表格边框合并为单一的边框。
2)border-spacing:设置分隔单元格边框的距离。 ------仅作用于“separated border”模式
3)caption-side:设置表格标题的位置。-------top   ------bottom
4)empty-cells:设置是否显示表格中的空单元格。  ------仅作用于“separated border”模式
5)table-layout:设置显示单元、行和列的算法。
例子：
/*表格属性*/
 table{
    border-collapse:collapse;  /*合并单一的边框。 */
/* border-collapse:separate;*/
 
border-spacing:20px;  /*设置分隔单元格边框的距离。----"separated borders"*/

/* caption-side:top;   设置表格标题的位置 */
caption-side:bottom;

/*empty-cells:show;  */ /*设置是否显示表格中的空单元格。----"separated borders"*/
empty-cells:hide;

table-layout:fixed;  /*固定长度，不足下一行*/   英文会很长，中文会控制。
/*table-layout:auto;*/
 }


6.表框的属性
        1)width：宽
2)height:高
3)border-style:dotted(（点）solid（实体）、double（双实线）、dashed（虚线）
4)border-color:边框颜色
5)border-bottom-color:边框底部颜色
6)border-top-width:边框顶部宽度
7)border-bottom-style:边框底部款式 ---上、右、下、左（顺时针类似）


7.盒子模型
        1)内边距（padding）和外边距（margin）
2)例子：
div{
border-style:solid;
width:100px;
height:100px;
/* 内边距 */
padding-left:10px;
padding-top:20px;
}

.one{
margin-bottom:30px;
}




.two{
margin-left:700px;
}

8.定位
        1)相对定位:相对于元素原本的位置进行移动的。position:relative;
2)绝对定位：相对于整个页面而言。position:absolute;
3)固定定位：相对于整个浏览器而言。position:fixed;
4)默认定位：默认值，没有定位。position:static;