参考个人文章:http://www.zhuzhuman.com/nav-1/type-5/article/5.html
CSS用于定义HTML内容在浏览器内显示的样式,如文字大小,颜色,加粗,背景,位置,行高等等。
CSS3中新加了许多样式,还增加了动画。
例:p{color:red;}
css代码有两部分组成:选择符和声明。
p:选择符。
指页面里的p标签,选择符不仅能直接用标签名,还可以通过标签的id获取:#id名;class获取:.class名;等等
{color:red;}
{}里面为声明。用来写样式,声明由属性和值组成,属性和值用英文“:”隔开,
多条声明之间用英文“;”隔开,
最后一条声明可不加“;”,但为了方便修改常加上去。
为了方便阅读,可将每条代码单独写一行。
color属性(字体颜色)。red是属性值。
css书写分三种:内嵌式,嵌入式,外链式。
<p style="color:red;font-size:12px;">内嵌式p>
把css代码直接写在html元素的开始标签的style属性里面,书写规则同上。
<style type="text/css">
#myp{
color:red;
font-size: 12px;
}
style>
把css代码写在style标签里面,style标签一般放在head标签里面,其中#myp是根据id名获取的标签,某个标签起了id名myp,所以可以直接用#myp获取。
将样式写在一个.css类型的文件里面,然后使用link标签将该文件引入到页面里面。
/* 以.css结尾的文件,命名mycss.css */
#myspan{
font-weight: bold; /* 字体加粗 */
font-family: "宋体"; /* 字体是宋体 */
}
另外一个html文件,命名test.html;
<link rel="stylesheet" type="text/css" href="../css/mycss.css" />
如果一个元素分别用这三种方法定义了不同的字体颜色,那么这个字体显示哪一种颜色呢?
从本质上讲:元素样式是根据其权值来衡量的,权值高的优先显示。(权值后面会有解释)
如果先不考虑权值,三种样式优先级别:
内嵌式 > 嵌入式 > 外部式
即会显示内嵌式定义的那个颜色。(可以理解为就近原则,内嵌式离该标签最近,所以优先显示)
直接以标签名为选择符,例:
div{
width:100px;
height:100px;
}
给标签加一个id名(注:id名具有唯一性,一个html里面id名不能重复),css书写用“#”+“id名字”例:
<div id="mydiv">举个例子div>
相应的css书写:
#mydiv{
width:100px;
height:100px;
}
给标签加一个class名(注:class名不具唯一性,一个html里面的标签可以起相同class名,一个标签也可以起多个class名),css书写用“.”+“class名字”,类选择器可以修改所有叫该class名的标签样式。例:
<div class="example mydiv">举个例子div>
<p class="example">举个例子p>
相应的css书写:
.example{ /* div和p字体样式都会变为红色 */
color:red;
}
.mydiv{ /* div背景为黑色 */
background:#000000;
}
用于指定标签元素的第一代子元素(儿子),写法:父元素+“>”+第一代子元素。例
<style>
#box>ul{ /* div下的ul的外填充为0 */
margin:0;
}
#box>.myp{ /* #box下所有.myp字体颜色为红色 */
color:red;
}
style>
<div id="box">
<ul id="list">
<li>li>
ul>
<p class="myp">段落一p>
<p class="myp">段落二p>
div>
用于指定标签的所有后代(包括后代的后代)。写法:父元素+“ ”+子元素
<style>
.box span{ /* .box下的所有span标签字体颜色都能变为红色(不止第一代子元素)。 */
color:red;
}
style>
<div id="box">
<span>文本一span>
<p class="myp">
<span>文本二span>
p>
<p class="myp">
<span>文本三span>
p>
div>
作用于html里面所有标签。写法:“*”
*{ /* 说有标签的外边距为0,内填充为0 */
margin:0;
padding:0;
}
书写方式:元素+“:”+伪类名。
常用的a标签:
a:hover{/* 这个a标签鼠标滑过是字体变为红色 */
color:red;
}
a标签还有其他伪类,顺序为:a:link > a:visited > a:hover > a:active
其他标签也有:hover伪类。(IE6不支持a以外其他的伪类;IE6以上支持所有标签的hover伪类)
#####1-3-8 分组选择器#####
当一些标签拥有共同的样式,一个个写太麻烦,可以使用分组选择符。书写方法:元素+“,”+元素+“,”+元素+“,”+元素 等
h1,span,p,#mydiv,.box{
color:red; /* 上面这些标签的字体都为红色 */
}
书写方法:元素+条件元素
<style>
div#mydiv{ /* 拥有id名叫mydiv的div有1px的黑色边框 */
width:100px;
height:100px;
border:1px solid #000;
}
style>
<div>div>
<div id="mydiv">div>
元素样式都由哪些因素影响?
css的某些样式具有继承性,拥有这些样式的元素的子元素也会具有这个样式,比如:color(对a标签无效?),
<style>
div{ /* div字体为红色,里面的p标签颜色也为红色,但里面的a标签好像不会变红,需单独给a加该样式*/
color:red;
}
style>
<div>
1
<p>2p>
<a href="http://baidu.com">3a>
div>
前面讲到,样式显示本质是显示权值高的的那个样式。
不同选择符的权值不同:
1. 继承:权值为0.1
2. 标签、伪类、伪对象:权值为1
3. 类选择符、属性选择符:权值10
4. id选择符:权值100
5. 内联样式:权值1000
6. !important : 权值无穷
#mydiv .box p{} → 权值伪100+10+1=111。
同一元素,不同css样式,权值也一样。根据先后顺序,最后应用最后那个样式,类似就近原则。可以理解为后面覆盖了前面的样式。
p{
color:blue;
}
p{ /* 显示这个样式 */
color:red;
}
!important 设置最高权值
p{ /* !important写在;前面 */
color:red!important;
}