CSS笔记

碰到前台页面展示，有时候会抓狂，ie，ff有时表现差别太大了，浏览器大混战，继续吧，早晚会书同文 车同轨的。上午恶补了下css，简单记录些笔记，放在这里，以后再来看。木有排版啊
===========================
CSS笔记：
    功能：
    CSS 指层叠样式表 (Cascading Style Sheets)
    样式定义如何显示 HTML 元素
    样式通常存储在样式表中
    为了解决内容与表现分离的问题
    外部样式表可以极大提高工作效率
    外部样式表通常存储在 CSS 文件中
    多个样式定义可层叠为一
   
    层叠次序：
    当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
    数字 4 拥有最高的优先权。
        1.浏览器缺省设置
        2.外部样式表
        3.内部样式表（位于 标签内部）
        4.内联样式（在 HTML 元素内部）
   
    CSS 语法:
    CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
    selector {declaration1; declaration2; ... declarationN }
        declaration 样式 ：{property: value}
        如果值为若干单词，则要给值加引号：p {font-family: "sans serif";}
    如果声明多的时候，为了方便：
        p {
            text-align: center;
            color: black;
            font-family: arial;
        }
   
    选择器的分组：
    h1,h2,h3,h4,h5,h6 {
                color: green;
            }
   
    继承及其问题：
    根据 CSS，子元素从父元素继承属性，如果不特殊声明。
    body  {
     font-family: Verdana, sans-serif;
     }

    td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

    p  { /*特殊声明,CSS这样来做注释*/
     font-family: Times, "Times New Roman", serif;
     }
     
    上面p的规则可以摆脱body的规则。
   
    元素(标签)选择器:
   
    派生选择器:
    派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
    你希望    列表    中的    strong    元素变为斜体字:
    li strong {
    font-style: italic;
    font-weight: normal;
    }
   
    id 选择器:
    id 选择器以 "#" 来定义。
    #red {color:red;}
   

这个段落是红色。

   
    id 选择器和派生选择器(后代选择器):
    在现代布局中，id 选择器常常用于建立派生选择器。
    #sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }
    上面的样式只会应用于出现在 id 是 sidebar 的元素内的 段落 。
    #sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

    #sidebar h2 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
    }
    id为sidebar中的p和h2都经过处理，与一般其他的p和h2不同。
   
    单独的选择器:
    id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：
    #sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }
   
    子元素选择器:>
   
    相邻兄弟选择器:+
   
    伪类: :(动作)
    CSS 伪类用于向某些选择器添加特殊的效果。
    selector : pseudo-class {property: value}
   
    伪元素: :(属性)
   
    content,padding,border,margin
    内边距属性(padding)是用来设置元素内容到元素边界的距离。
    边框属性(border)用来设定一个元素的边线；
    外边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离；
   
    类选择器:
    在 CSS 中，类选择器以一个点号显示：
    .center {text-align: center}
   

    This heading will be center-aligned
   

   
    和 id 一样，class 也可被用作派生选择器：
    .fancy td {
    color: #f60;
    background: #666;
    }
    元素也可以基于它们的类而被选择：
    td.fancy {
    color: #f60;
    background: #666;
    }
    在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
   
    属性选择器:
    下面的例子为带有 title 属性的所有元素设置样式：
    [title]
    {
    color:red;
    }
    下面的例子为 title="W3School" 的所有元素设置样式：
    [title=W3School]
    {   
    border:5px solid blue;
    }
    下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由 空格 分隔的属性值："hello world"
    [title~=hello] { color:red; }
    下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由 连字符 分隔的属性值："hello-world"
    [lang|=en] { color:red; }
   
    设置表单的样式:
    属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
    input[type="text"]
    {   
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
    font-family: Verdana, Arial;
    }
   
    input[type="button"]
    {
    width:120px;
    margin-left:35px;
    display:block;
    font-family: Verdana, Arial;
    }
   
    如何插入样式表:
        外部样式表
       
       
       
        内部样式表
       
       
       
        内联样式
       

This is a paragraph

        如果重叠了，根据优先级来确定.
   
    nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。

以上大部分摘自：
==over==