css样式学习

1  在head标签中写

   

<style type="text/css">
        h2{
        color: red;     /*c tab   颜色*/
        font-size: 50px;    /*fz tab  字体大小*/
        background-color: green;  /* bgc tab 背景颜色*/
                font-weight: bold;     /*fwb tab 字体加粗*/
                text-decoration: underline;  /*tdu tab 字体下划线*/
                font-style: italic;   /*fsi  tab  斜体*/
        }    
</style>

2 id选择器 一个页面绝对不能有相同id,一个标签可以被多个选择器设置

<style type="text/css">
        
        #para2{
        color: red;
        }

</style>

<p>段落1</p>

<p id="para2">段落2</p>

<p>段落3</p>

3 class选择器，可以重复，任何标签都可以携带class。一个标签可以包含多个类。不能一个标签写多个class。类：公共样式提取出来，重复利用。

.para{
        color: red;

        }

.zhongyao{
        text-decoration: underline;

        }

<p class="para zhongyao">段落1</p>
<p class="para">段落2</p>

类上样式，id上行为。类选择器主要调样式，id主要给js调动画用

4 后代选择器 类选择器可以空格代表后代选择器

<style type="text/css">
       
       .div1 .li1 p{
          color: red;
       }
</style>

<div class="div1">
        <ul>
            <li class="li1">   <!-- 只作用这部分 -->
                <p>段落</p>   
                <p>段落</p>
                <p>段落</p>
            </li>
             <li>
                <p>段落</p>
                <p>段落</p>
                <p>段落</p>
            </li>
        </ul>
    </div>

5 交集选择器，交集选择器没有空格,交集选择器可以连续交(兼容到IE8),交集选择器，我们一般都是以标签名开头

IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。
windows xp 操作系统安装的IE6
windows vista 操作系统安装的IE7
windows 7 操作系统安装的IE8
windows 8 操作系统安装的IE9

windows10 操作系统安装的Edge

浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器

浏览器的市场占有率： http://tongji.baidu.com/data/

<style type="text/css">
       
       p.p1.teshu{
          color: red;
       }

</style>

<div class="div1">
        <ul>
            <li class="li1">   <!-- 只作用这部分 -->
                <p class="p1 teshu">段落</p>   
                <p>段落</p>
                <p>段落</p>
            </li>
             <li>
                <p>段落</p>
                <p>段落</p>
                <p>段落</p>
            </li>
        </ul>
    </div>
    <div>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>

6  并集选择器，用逗号分开

<style type="text/css">
        
       p,li{
        color: red;
       }

</style>

<div>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
    </div>
    <ul>
        <li>li</li>
        <li>li</li>
    </ul>

7 儿子选择器，IE7开始兼容

 div>ul{
        color: red;

       }

<div>
        <ul>
            <li>li</li>
            <li>li</li>
        </ul>

    </div>

8 序选择器 

 ul li:first-child{
        color: red;

       }

<div>
        <ul>
            <li>li</li>
            <li>li</li>
        </ul>

    </div>

对于不兼容的用class代替

<style type="text/css">
        
        ul li.first{
        color: red;
       }

</style>

<div>
        <ul>
            <li class="first">li</li>
            <li>li</li>
        </ul>

    </div>

9 下一个兄弟选择器

h3+p{
        color: red;

       }

 <div>
        <h3>h3</h3>
        <p>段落</p> <!-- 这行变红 -->
        <p>段落</p>
        <p>段落</p>
    </div>

未完待续。。。。。。