CSS小结

1. 外部链接css的方式：
   <link rel = "stylesheet" type = "text/css" href = "*.css"/>
2. 内部css的使用方式：
   <style type = "text/css">
css代码;
</style>
3. 外部的CSS的好处：
   
   • 重用。
   • 修改同步更新，不需要一个一个修改。
   • 设置不同的输出设备。
     <link rel = "stylesheet" type = "text/css" href = "1.css" media = "screen"/>
<link rel = "stylesheet" type = "text/css" href = "2.css" media = "handheld"/>
4. 在一个样式表中引入另一个样式表：
   @import "1.css";
5. 选择器的使用：
   
   • 一般选择器：直接用元素。比如直接h1；
   • 通用选择器：适用于全部的元素。*{…}
   • 类选择器：指定特定的class。
     
     • h1.classname：这种适用于h1元素中class属性的值为classname的元素。
     • .classname：这种适用于任何元素中class属性的值是classname的元素。
   • 子选择器：选择某种依赖关系的元素。比如td>b，表示td元素的直接子元素b的元素。
   • 后继选择器：某种依赖关系的元素。比如 table b,表示table中的b元素。
6. 字体类别：
   
   • font-family:这是字体，比如serif,monospace等。
     
     • 具体用法：
       font-family : arial,sans-serif;
表示首选arial字体，如果机器中没有arial字体，则选用sans-serif字体。
   • font-size：大小。
     
     • 具体用法：
       font-size：12px;
表示字体大小为12像素。
   • font-weight：表示是否为粗体。
     
     • 具体用法：
       font-weight：bold；
表示为粗体。
   • font-style：表示是否是斜体。
     
     • 具体用法：
       font-style：italic；
表示为斜体。
7. 文本类别：
   
   • text-align：表示文本的位置。可选为left,right,center;
     
     • 具体用法：
       text-align：center；
表示文本在中央。
   • text-decoration：表示文本是否要下划线、删除线等。可选为underline\line-through;
     
     • 具体用法：
       text-decoration：underline;
表示文本下方有下划线。
   • color：表示文本的颜色。
     
     • 具体用法：
       color：red；
表示颜色是红色。
   • text-indent：文本缩进多少。
     
     • 具体用法：
       text-indent：2px；
表示缩进2个像素。
   • line-height：表示行之间的宽度。
     
     • 具体用法：
       line-height：2px;
表示行之间间隔2像素。
8. 文本伪类：
   
   • first-letter：对于第一个字母特别着重。形如：open；
     
     • 具体用法：
       p：first-letter{....}
   • first-line：对于第一行特别着重。形如：I am xiazdong；
     
     • 具体用法：
       p：first-line{...}
9. 边框类别：可用于任何元素的边框。
   
   • border-width：表示边框的宽度。
     
     • 具体用法：
       border-width：2px;
表示边框的宽度为2px。
   • border-style：表示边框的类型。可选：solid,dotted
     
     • 具体用法：
       border-style：solid；
表示边框是实线。
   • border-color：表示边框的颜色。
     
     • 具体用法：
       border-color：red；
表示边框的颜色为红色。
   • padding：表示边框和文本的距离。
     
     • 具体用法：
       padding：2px；
表示边框和文本距离为2像素。
   • margin：表示边框的距离。
     
     • 具体用法：
       margin：2px；
表示边框之间距离为2像素。
   • width：框的宽度。
   • height：框的高度。
   • max-height和min-height：框的最大高度和最小高度。
   • max-width和min-width：框的最大宽度和最小宽度。
   • overflow：表示框是否要滚动条。
     
     • 具体用法：
       overflow：scroll；
表示边框需要滚动条。
10. 背景类别：
    
    • background-color：表示背景颜色。
      
      • 具体用法：
        background：blue;
    • background-image：表示背景的图片。
      
      • 具体用法：
        background-image：url("apple.jpg")；
表示背景来自apple.jpg文件。
    • background-position：表示背景图片的位置。可选:(1)20%,30%(2)left(3)center….
      
      • 具体用法：
        background-position：center;
表示图片在中心。
    • background-attachment：表示图片是否会随着滚动条移动而变化。可选：fixed,scroll
      
      • 具体用法：
        background-attachment：fixed;
表示图片不会变化。
    • background-repeat：表示图片是否会重复。可选：no-repeat,repeat,repeat-x,repeat-y;
      
      • 具体用法：
        background-repeat：no-repeat；
表示不会重复。
11. 列表类别：
    
    • list-style-type：表示前标的样式。可选：disc(默认),circle,square,none,decimal,lower-roman;
      
      • 具体用法：
        list-style-type：square；
表示用方块进行标号。
    • list-style-position：表示标号的位置。可选：inside,outside;
      
      • 具体用法：
        list-style-position：outside;
12. 表类别：
    
    • border-collapse：是否应该显示每一个边框；可选：collapse或separate;
      
      • 具体用法：
        border-collapse：separate；
表示每个边框都会显示，不会合并。
    • border-spacing：边框之间的距离；
      
      • 具体用法：
        border-spacing：15px;
表示边框之间距离为15像素。
13. 外边框类别：和边框的区别是不占用空间。
    
    • outline-style：
    • outline-color：
    • outline-width：
14. :before和:after伪元素：
    
    • :before:用于指定在哪些元素之前加哪些内容。
      
      • 具体用法：
        h1:before{content:"这里是h1内容：";}
这样在h1的前面会加上这个字符串。
    • :after和：before正好相反。
15. 链接类别：
    
    • 伪类：能够使得链接在不同状态下的样式不同。
    • link：当一般状态下。
    • visited：访问完后。
    • active：当激活链接时。
    • hover：当停留在链接上时。
    • 具体用法：
      a:link{
color:red;
}
a:hover{
color:blue;
}
a:visited{
color:black;
}
链接一般状态为红色，鼠标停留在链接上时是蓝色，访问完后是黑色。
16. 其他类别：
    
    • display:用于将内联框显示为外部框或反过来。
      
      • 具体用法：
        display:block；
    • cursor：用于指定鼠标指针的样式。
    • visibility：某个元素是否显示。
17. 相对定位（relative）：相对于普通定位进行偏移，但是这个相对定位的元素没有剥离出普通定位，即如果有三个段落，如果第二个段落移开了，但是空间还是依然保留，不会被第三个段落占用。
    
    • 具体用法：
      position:relative;
top:30px;
left:30px;
18. 绝对定位（absolute）：被排除在普通定位之外，其他类似相对定位。如果有三个段落，如果第二个段落移开了，则空间被第三个段落占用。
    
    • 具体用法：
      position:absolute;
top:30px;
left:30px;
19. 固定定位（fixed）：完全脱离普通定位，而是固定在窗体的某一个位置，不论滚动条移动也不会变化。
    
    • 注意：z-index特性可以设置多个元素重叠时，元素的叠放次序，z-index越大，则越靠顶。
    • 具体用法：
      position:fixed;
top:0px;
left:0px;
表明这个框不动，并且在最顶部。
20. 浮动定位float：脱离普通定位，并且包含在框中，但不会重叠。指定float后，需要指定width特性，为了确定框的宽度。
    
    • 具体用法：
      float:left;
width:100px;
表明某个元素放在左边，并且宽度为100像素。