css整体感知+各种选择器

一、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;

}

不过效率不高，一般页面上不会出现。