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