, 前几篇介绍的HTML只是比较常用的一部分。其他的还需自行了解。
sublime里面的emmet语法快捷键,百度云地址:http://pan.baidu.com/s/1eR1Frk2 密码:fdnp
emmet语法加快了代码的书写。比如在sublime里面输入: .box1>a[#]{$}*4
会得到
<div class="box1">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
一、CSS的整体感知
css是cascading style sheet 层叠式样式表的简写。它为标签提供样式,呈现在网页上。
例如下面定义一个div,没有设置宽高,在网页中什么也不显示。所有需要CSS设置标签样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="nav"></div>
</body>
</html>
CSS样式引入有三种:嵌入样式表、链接外部样式表、内嵌样式(优先级最高)。
嵌入样式表:用<style></style>
标签对。
链接外部样式表:用link标签引入外部样式文件。文件以 .css结尾。
内嵌样式:<li style="font-size: large;color: red" >Bigbang</li>
引入位置:<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href=""> href为文件路径。
<style></style>
</head>
二、选择器
想要设置一个标签属性,肯定要选择中它。
1.标签选择器
标签选择器是选择页面中所有的同类标签。
比如下面是设置了页面中所有div的宽度和高度,背景颜色。
<style>
div {
width: 100px; emmet语法:w100px再tab
height: 100px;
background-color: #000;
}
</style>
2.id选择器
id就像人的身份证一样,是唯一的。
#banner {
width: 100px;
height: 100px;
background-color: #000;
} 只选中id为banner的div
<body>
<div id="banner"></div>
</body>
3.类选择器
一个标签可以有多个class,中间用空格隔开。一个class也可以被多个标签拥有。
.banner {
width: 100px;
height: 100px;
background-color: #000;
} 只选中class(类名)为banner的div
<body>
<div class="banner tab"></div>
</body>
4.后代选择器
<body>
<div class="div1">
<p>我是p1</p>
<div>
<p>我是p2</p>
</div>
</div>
</body>
直接后代选择器:.div1>p 选择的是.div1的直接后代<p>我是p1</p>
,直接后代为div的儿子而不是孙子辈。
<style>
.div1>p {
color: red;
}
</style>
后代选择器:.div1 p 选择的是.div1的所有后代p
<style>
.div1 p {
color: red;
}
</style>
5.交集选择器
交集选择器,我们一般都是以标签名开头。
eg: div.special {} 该标签要同时满足是div而且类名是special的才可以选中。div.special中间没有空格
6.并集选择器
eg: div, p {} 选中所有div和p,并集选择器通常用在设置两个标签相同样式时。
7.通配符
*{
效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。
}
8.相邻兄弟选择器
选择离自己最近的兄弟
9.属性选择器
为具有某个属性的HTML元素定义样式。(CSS3介绍)
上面是CSS中的基本选择器,CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度。以后会一一介绍。
三、CSS的继承性和层叠性
继承性:
有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。
color、 text-开头的、line-开头的、font-开头的。这些都是可以继承的。
这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承。
层叠性:
层叠性:就是css处理冲突的能力。这个很重要。
当对同一个标签设置样式时,会因为标签选择器权重的问题,一些选择器会被层叠掉。
权重计算:id的数量,类的数量,标签的数量
先比较id,有id的优先,再看数量,数量一样;再比较class,依次类推。
特别:在计算权重之前,要看看是不是选中了要设置的那个标签,如果没有,则权重为0。
当所有都没有选中,那么有一个就近原则:谁描述的近,听谁的。
并集选择器要分开计算:
权重问题的深入:
同一个标签,携带了多个类名,有冲突:
!important标记
给一个属性提高权重。这个属性的权重就是无穷大。
!important需要强调3点:
1) !important提升的是一个属性,而不是一个选择器
2) !important无法提升继承的权重,该是0还是0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
color: red!important;
}
p {
color: green;
}
</style>
</head>
<body>
<div>
<p class="p1" id="p2">我是什么颜色?</p>
</div>
</body>
</html>
3)!important不影响就近原则
如果大家都是继承来的(没有选中,权重为0),按理说应该按照“就近原则”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
color: red!important;
}
ul {
color: green;
}
</style>
</head>
<body>
<div>
<ul>
<p class="p1" id="p2">我是什么颜色?</p>
</ul>
</div>
</body>
</html>