CSS学习(三)

       类选择器:以点号开头,针对所有拥有某一类的元素。
         /*所有拥有center类的元素均居中*/
         .center {text-align:center; }
        <p class="center">居中显示</p>
        <h1 class="center">居中显示</h1>

        类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
        和 id 一样,class 也可被用作派生选择器.
         .center p {
                     text-align:center;
                   }
        元素也可以基于它们的类而被选择.
         p .center {
                     text-align:center;
                    }

         属性选择器:对带有指定属性的HTML元素指定样式。
           /*带有title属性的所有元素设置为红色*/
         [title] {
                   color:red;
                  }
         /*title属性值="abc"的所有元素设置为红色*/
         [title=abc] {
                      color:red;
                     }
          /*包含指定值的title属性的所有元素设置为红色,适用于由空格分隔的属性值*/
         [title~=abc] {
                      color:red;
                      }
          /*带有包含指定值的 lang 属性的所有元素设置为红色,适用于由连字符分隔的属性值*/
         [lang|=en] {
                    color:red;
                    }

         插入样式表的三种方法
         外部样式图:当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。
            <head>
                 <link rel="stylesheet" type="text/css" rel="fileName.css" />
          </head>

         内部样式图:当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表。
            <head>
                 <style type="text/css">
                   p {color:red; font-size:10px}
                 </style>
          <head>

          内联样式:要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
            <p style="color: sienna; margin-left: 20px">
            This is a paragraph
          </p>

          如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

           注:大部分内容均参考copy自 http://www.w3school.com.cn/css/index.asp

你可能感兴趣的:(css)