CSS学习笔记（1）

1.css的书写位置

a.内联样式，在标签里面通过style来设置元素样式，缺点是只能改变这个标签的样式

b.内部样式表，将样式编写到head中的style标签里，可以通过选择器来选中元素来设置样式，可同时修改多处，并能全部应用，

缺点是只能对一个网页起作用，不能跨页面复用

c.外部样式表，将css样式编写到一个外部的css文件中，然后通过link标签进行引入，只需引用便可在不同页面中进行复用。

同时网页进行加载时，只需加载css文件一次，更易缓存，提高了加载速度。

2.css基础语法

选择器+声明块：通过选择器可以选中页面中的指定元素，通过声明块可以为选中元素修改样式，一个样式对应一个样式值，名值之间用：连接，每个值用;结尾

3.常用选择器

也可以利用选择器进行快速创建元素

a.元素选择器

如p{}，可对所有p标签设置样式

b.id选择器，

通过对标签设置id属性，然后用#xxx{}来设置样式，

但id不能重复设置

c.class选择器，

class解决了id不能重复的问题，且可以给具体元素设置多个class

通过给标签设置class属性，然后就用.xxx{}进行样式设置
d.通配选择器

选中页面中的所有元素，*{}

e.内联样式

直接在指定标签修改样式，优先级最高

4.复合选择器

选择器可以合在一起用，但有元素选择器时要把元素选择器放在最前面，

同时多个选择器之间可以通过交并运算来设置具体元素的格式

交集：选择器1选择器2选择器3...选择器n{}

并集：选择器1，选择器2{}

5.关系选择器

子元素是被直接被父元素包含的元素，

父元素是直接包含子元素的元素

祖先元素是包含后代的元素

后代元素是被祖先元素包含的元素

子元素选择器：选择指定父元素的子元素 父元素>子元素{}

后代选择器：选择指定祖先元素的后代元素  祖先元素  后代元素{}

兄弟选择器：

a.选择下一个兄弟：前一个+下一个{}

b.选择下面所有兄弟：前一个~某个标签{}

6.属性选择器

[属性]选择含有指定属性的元素

[属性=属性值]选择含有指定属性和值的元素

[属性=^属性值]选择指定属性值以指定内容开头的元素

[属性=$属性值]选择指定属性值以指定内容结尾的元素

[属性=*属性值]选择指定属性含有指定值的元素

7.伪类选择器

不存在的特殊的类，用来表示某些特殊元素，

比如第一个元素，被鼠标点中的元素，鼠标移入的元素等

使用：开头，常用的有：

：first child{}第一个子元素

：last child{}最后一个子元素

：nth child（n）选中第n个元素

如果（）内是n，即表示选中所有元素

此外如果是2n或者evev是选中偶数，

2n+1或者odd是选中奇数

：first of type{}是选中同类的第一个

：not （）{}

否定伪类，将指定元素从选择器中去除

*************************************************************************************

超链接的伪类：用来表示超链接的特殊状态

a：link{}用来选中未访问过的（或者正常的）超链接元素

a：visited{}用来选中访问过的超链接元素

a：hover{}用来选中鼠标移入的超链接元素(也可以用来设置其他元素)

a：active{}用来选中鼠标选中的超连接元素(也可以用来设置其他元素)

（由于历史记录等隐私问题，故只能设置链接的颜色）

8.伪元素选择器

 表示页面中并不真实存在的元素或者说是特殊的位置，

伪元素开头用：：，

比如：：first letter{}选择第一个字母设置样式，

：：first  line{}选择第一行设置样式，

：：selection{}用于鼠标选中的内容设置样式

：：before{content=“ ”   }选中元素最开始

：：after{content=“  ”    }选中元素最末尾

after和before必须用content添加新内容，且添加的新内容在网页中不能被选中；

比如引用q标签，就应用了after和before使得被引用内容的两边添加了不能被选中的双引号

9.样式的继承

我们为一个元素设置的样式会同时应用到它的子元素上，

发生在祖先和后代之间，是为了方便我们的开发，

可以把一些通用的样式设置在共同的祖先元素上，这样只需要一次就可以给所有元素设置样式

注意：并不是所有样式都会被继承，比如背景布局相关的等不会被继承，如果这些被继承的话可能会出现比较严重的问题

10.选择器的权重（优先级）

当我们通过不同的选择器选中相同的元素并且为相同的样式设置不同的值时，此时发生了样式的冲突

当发生样式冲突时，由选择器的优先级决定

选择器权重

 内联样式                  1.0.0.0

 id选择器                   0.1.0.0

 类和伪类选择器       0.0.1.0

 元素选择器              0.0.0.1

 通配选择器              0.0.0.0

 继承的样式             没有优先级

比较优先级时，如果是选择器的交集则是把优先级相加再进行比较，

如果是选择器的并集，则分别计算，互不干扰

如果优先级相同，则优先使用靠下的样式（相当于被覆盖了）

可以在一某个样式的后边添加！important，则会使该样式获得最高的优先级