css小结1

css小结1

1 lable for标签：

   <label for="name"><input id="name" type="text"/>
则LABEL FOR为关联的表单元素的ID，
主要是点LABEL的时候，关联的元素也会获得焦点

2 em:相对于“当前元素的”的字体大小而言，比如当前元素的font-size为10PX,则1em=10pX,
如果当前元素无定义，则继承父元素的font-size，如果都无定义，则继承浏览器默认的，则为16PX；
比如首行缩进使用text-indent:2em:
   <style type="text/css">
        p
        {
            font-size:14px;
            text-indent:2em;
            width:360px;
        }
    </style>

3 1em=16px*1=16pX
   默认字体16PX*62.5%=10px，
则1em=10PX
   0.75em=7.5PX
比如：
    <style type="text/css">
        body{font-size:62.5%;}
        #p1{font-size:1em;}
        #p2{font-size:1.5em;}
        #p3{font-size:2em;}
    </style>
</head>
<body>
    <p id="p1">当前字体大小为1em，也就是10px</p>
    <p id="p2">当前字体大小为1.5em，也就是15px</p>
    <p id="p3">当前字体大小为2em，也就是20px</p>
</body>

4 CSS继承性：子的继承父亲的，比如
       <style type="text/css">
        #father{color:Red;font-weight:bold}
    </style>
</head>
<body>
    <div id="father">
       abc
        <div id="son">abc</div>
    </div>
但注意，比如A标签有默认样式，优先级比继承高，所以：
   <style type="text/css">
        #father{color:Red;font-weight:bold}
    </style>
</head>
<body>
    <div id="father">
       abc
        <a href="http://www.lvyestudy.com">abc</a>

    </div>
这个时候链接的A样式不会继承

5 层叠性
    同一个元素，如果定义多个样式，并且这些样式有相同权重，则最后的定义为准
   <style type="text/css">
        div{color:Red;}
        div{color:Orange;}
        div{color:Blue;}
    </style>

<div>abc</div>
    <div>abc</div>
    <div>abc</div>

则最后肯定全部为blue

   行内样式>(内部样式=外部样式）

如果内部样式和外部样式同时存在，则以最后引入的为准

如果继承方式冲突，则“最近的祖先获胜”:
       <style type="text/css">
        body{color:Red;}
        #grandfather{color:Green;}
        #father{color: Blue;}
    </style>
</head>
<body>
    <div id="grandfather">
        <div id="father">
            <div id="son">abc</div>
        </div>
    </div>
</body>
则颜色为BLUE,因为SON的最近祖先为father

6 指定样式冲突
   权值高的获胜。行内样式>id选择>class选择》元素选择
<style type="text/css">
        #lvye{color:Red;}
        .lvye{color:Green;}
        div{color:Blue;}
    </style>
</head>
<body>
    <div id="lvye" class="lvye">aabc</div>,因为ID元素选择权重高，所以为RED

7 当继承样式和指定样式发生冲突时，指定样式样式胜：
<style type="text/css">
        body{color:Red;}
        #outer{color:Green;}
        #outer #inner{color:Blue;}
        span{color:Purple;}
        strong{color:Black;}
    </style>
</head>
<body>
    <div id="outer">
        <p class="inner">
            <span><strong>ABC</strong></span>
        </p>
    </div>
这个时候，STONG因为是指定样式，所以依然为BLACK。

8 !important
   来改变优先规则，如果使用这个声明，则会覆盖CSS中任何声明

strong
        {
            color:Black !important;
        }
    </style>
</head>
<body>
    <div id="outer">
        <p class="inner">
            <span><strong>ABC</strong></span>

9 CSS的层次选择器
   1）后代选择器
      M N {} 选择所有后代选择器中 M元素内部的后代N 元素，（所有N元素）
   <style type="text/css">
        #first p{color:Red;}
    </style>
</head>
<body>
    <div id="first">
        <p>lvye的子元素</p>

   选择first后的所有P元素包括所有子元素；

2）子元素选择器
      M>N 只选择M元素内部的N元素，比如
   <style type="text/css">
        #first > p{color:Red;}
    </style>
</head>
<body>
    <div id="first">
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
        <div id="second">
            <p>lvye子元素的子元素</p>
            <p>lvye子元素的子元素</p>
        </div>
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>

则SECOND部分保持黑色，其他为红色；

3）兄弟选择器
       M~N {}
      选择M后面某一类兄弟元素：
<style type="text/css">
        #second~p{color:Red;}
    </style>
</head>
<body>
    <div id="first">
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
        <div id="second">
            <p>lvye子元素的子元素</p>
            <p>lvye子元素的子元素</p>
        </div>
        <p>lvye的子元素1</p>
        <p>lvye的子元素2</p>

则 <p>lvye的子元素1</p>
        <p>lvye的子元素2</p>
两行会变色
   4）相领选择器
        M+N {} 选择M元素后面的某一个相邻的兄弟元素N；
<style type="text/css">
        #second+p{color:Red;}
    </style>
</head>
<body>
    <div id="first">
        <p>lvye的子元素</p>
        <p>lvye的子元素</p>
        <div id="second">
            <p>lvye子元素的子元素</p>
            <p>lvye子元素的子元素</p>
        </div>
        <p>lvye的子元素1</p>
        <p>lvye的子元素</p>
    </div>
所以， <p>lvye的子元素1</p>变红色；

猜你喜欢