css小结1-CFANZ编程社区

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>变红色；