一、css
1.1css整体感知
css是cascading style sheet层叠式样式标的简写
css的最新版是css3,现在写的笔记是css2.1
<style type="text/css">
p{
color:red;
font-size:30px;
text-align:center;
text-decoration:underline;
font-weight:bold;
}
h{
color:bule;
font-size:500px;
font-weight:bold;
backgroud-color:pink;
}
</style>
p,h是选择器。
1.2一些常见的属性
1.字符颜色:color:red;
2.字号大小:font-size:400px;
3.背景颜色:backgroud-color:bule;
4.加粗:font-weight:bold;
5.不加粗:font-weight:normal;
6.斜体:font-style:italic;
7.不斜体:font-style:normal;
8.下划线:text-decoration:underline;
9.无下划线:text-decoration:none;
二,基础选择器
2.1标签选择器
<h1>前端知识</h1>
<span>基础班</span>
注意:
1)所以的标签,都可以是选择器。比如ul ,li,label,dt,di,h等
2)无论这个标签藏的有多深,一定能被选上。
3)选择的是所以的,而不是一个。
2.2id选择器
<p>我是一个段落</p>
<p id="paz">我是一个段落2</p>
<p>我是段落3</p>
css:
<style type="text/css">
#paz{
color:red;
}
</style>
id选择器的符号是“#”,id不能重复。
任何的html标签都可以有id属性,这个标签的名字,可以任意取,但是:
1)只能有字母,数字,下划线。
2)必须以字母开头
3)不能和标签同名。
2.3类选择器
. 就是类的符号。类的英语是class。所谓类,就是class属性,class属性和id属性非常相似,任何符号都可以携带class属性。
class属性可以重复,比如页面上多个标签都可以有一样的class属性。
<h3 class="teshu"> 我是h3</h3>
<p class="teshu">我是p</p>
<p class="teshu">我是一个p</p>
css里面用 . 来表示类:
.teshu{
color:red;
同一个标签,可能同时的属于多个类。用空格隔开,
<h3 class="teshu zhongyao">我是一个h3</h3>
这样h3就同时属于teshu类和zhongyao类。、
总结:
1)class可以重复,同一个页面可以有多个标签同时属于某个类
2)同一个标签也可以同时携带多个类
不要试图用一个类名,把某个标签的样式都写完,这个标签要多携带几个类,共同造成这个标签的样式。
每个类要尽可能小,要有公共的概念,能够让更多的标签使用。
尽可能用class,id一般是js用的。
三、高级选择器
3.1后代选择器
<style type="text/css">
.div p{
color:red;
}
</style>
空格可以多次出现:
空格就代表后代,是后代不一定是儿子。
.div .liz p{
color:red;
}
3.2交集选择器
h3.te选择的元素是同时满足两个条件:必须是h3标签,必须又是te标签。交集选择器没有空格。
{
div.red 交集
div .red 后代
}
交集选择器一般都是用标签名开的头,比如h3.teshu ,p.special
3.3并集选择器
逗号表示并集。
h3,li{
color:red;
}
3.4通配符
*就表示所有的元素
*{
color:red;
}
不过效率不高,一般页面上不会出现。