CSS2
---恢复内容开始---
1. CSS基础选择器
html负责结构 ,css负责样式,js负责行为
css写在head标签里面,容器style标签
<style type="text/css"> body{ background-color: pink; } </style> |
常见的属性:
h1{ color: blue; font-size: 60px; font-weight: normal; text-decoration: underline; font-style:italic; ; } |
1.1标签选择器
就是使用html中的标签对来当做选择器
- 1. 所有标签都能够当做选择器,比如说body、h1、ul、span等等
- 2. 不管当前的标签藏的多深,都能够被选上
- 3. 选择的是所有的,而不是某一个,所有这是共性,而不是特性
<style type="text/css"> a{ /*去掉下划线*/ text-decoration: none; } </style> |
1.2类选择器
.就是类的符号。类的英文class
所谓的类,就是class的属性,任何的标签是不是都可以携带class属性
class的属性可以重复使用,比如页面上可能有多个标签都有bg这个类
<h1 class="bg">我是h1</h1> <h1>我是h1</h1> <h1>我是h1</h1> <p class="bg">我是p</p> <p>我是p</p> <p class="bg">我是p</p> <a href="#" class="bg">我是a</a> |
Css中里面用.表示类:
.bg{ background-color: yellow; } |
同一个标签,可能同时属于多个类,用空格隔开
<h1 class="bg" class="ft">我是h1</h1> 错误写法 初学者最常见的错误 |
正确的写法
<p class="bg ft">我是p</p> 正确的写法,使用空格隔开 |
总结:
1) class是可以重复使用,也就是说,同一个页面上可能有多个标签属于某一个类
2) 同一个标签可以同时携带多个类,但是必须使用空格隔开(注意一个空格)
类的使用,决定一个人css的水平
1.3、 id选择器
#表示选择id
#lh{ color: red; font-size: 30px; font-weight: bold; } |
总结:
- 任何的标签都可以有id,id的命名要以字母开头,可以有下划线、数字、大小写严格区分,也就是mm与MM是二个不同的id
- 同一个页面上的不能重复,即使是不一样的标签,也不能有相同的id,也就是:如果有一个p的id叫做haha,那这个界面上所有元素的id都不能叫haha。
到底使用id还是用class? 答案:尽可能的用class,除非特殊情况可以用id id是js用的,也就是说,js通过id属性得到标签,所有css层尽量不用id,要不然js就会别扭,另外一层,我们认为一个有id的元素,默认会有动态效果
|
就是一个标签,可以同时被多种选择器(class,标签,id)选中,这些选择器都可以选上同一个标签,来控制标签的内容(html),动作(js),排版(css)。
二、css高级高级选择器
2.1、后代选择器
<style type="text/css"> .div1 p{ color: red; } </style> |
空格就是代表后代 ,div1 p 就是.div1的后代中所有p 强调一下,选择的是后代,后代不一定是儿子,可能是孙子或者曾孙 |
div class="div1"> <ul> <li> <p>段落</p> <p class="p1">段落</p> <p>段落</p> </li> </ul>
</div> |
能够被下面的选择器选择上
.div1 p{ color: red; } |
所以,看到这个选择器要知道是后代选择器,不是一般普通选择器
后代选择器,就是一种平衡:共性、特性的平衡。当要把某个部分的所有的什么的内容(标签),进行样式改变的时候,就要想到后代选择器,描述是先祖结构
2.2 交集选择器
h3.special{ color: red; } |
选择的元素要同时满足二个条件:必须是h3标签,然后必须有同一个(special)类选择
注意交集选择器没有空格
并且当前的交集器可以连续交
h3.special.continue{ text-decoration: underline; } |
3.3 并集选择器(分组选择器)
h3,li{ color: green; } |
用逗号就表示并集
3.4 通配符*
*代表所有的元素,效率不高,如果页面上的标签,效率越低,所以这个标签使用频率不多
*{ margin : 0px; padding: 0px; } |
---恢复内容结束---