css day1

1.  插入样式表

      外部样式表

        <head>

        <link rel="stylesheet" href="xxx.css" type="text/css">

        </head>

      内部样式表

        <head>

          <style type="text/css">xxxx</style>

        </head>

      内联样式

        <a style="color:red">hi</a>

      优先级比较:外部样式表<内部样式表<内联样式表

2.  选择器

      类选择器

        HTML  <div class="z"></div>

        css    .z{backgroundcolor:red}

      标签选择器

        HTML  <p></p>

        css    p{color:grey}

        调用了此css文件的网页在用到p的时候他的css样式都会得到继承

 

      id选择器

        HTML  <p id="select"></p>

        css    #select{color:green}

        id选择器在同一个页面内只能被使用一次,id是唯一的。

      派生选择器包括子选择器,后代选择器,相邻兄弟选择器

      

      子选择器

        HTML  <p><strong>haha</strong></p>

             <p><em>lalala<strong>123</strong></em></p>

             <p><em>wuwu</em><strong>233</strong></p>

        css    p>strong{color:red}

        此选择器代表strong的上一级必须是p才有效,两者之间不能穿插其他标签

        haha就具有效果,但是123就不具有效果,因为strong的上一级是em

        但是233还是具有效果,因为em和strong标签是同级的。

      

      后代选择器

        HTML  <p><em>haha</em></p>

        CSS   p em{color:red}

        此选择器只要是在p标签中的em都会具有效果,中间穿插其他标签也无妨。

      

      类选择器和ID选择器的派生选择器

        例如类选择器

        HTML  <div class="air><p>red</p></div>

        css    .air p{color:red}

        类名为 air 的比<p>更大的元素内部的p标签里都是红色,air可以使div也可以是其他标签的选择器。

 

        基于类被选择的元素

        HTML  <p class="ballon">hi</p>

        css    p.ballon{color:red}

posted @ 2016-03-28 10:36  swii  阅读(117)  评论(0编辑  收藏  举报