CSS笔记2

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. 1.       所有标签都能够当做选择器，比如说body、h1、ul、span等等
2. 2.       不管当前的标签藏的多深，都能够被选上
3. 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;    }

总结：

1. 任何的标签都可以有id，id的命名要以字母开头，可以有下划线、数字、大小写严格区分，也就是mm与MM是二个不同的id
2. 同一个页面上的不能重复，即使是不一样的标签，也不能有相同的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; }