day 5

CSS选择器

选择器分为两种，一种是基础选择器，一种是高级选择器

基础选择器：标签选择器，id选择器，类名选择器

高级选择器：后代选择器，交集选择器，并集选择器

 

标签选择器

选择方法：通过标签名称去进行选择

书写方法：标签名

选择范围：HTML文档中所有的同名标签

基本使用：

 

 

 

 

需要注意的是标签选择器无视嵌套规则，都能进行识别加载

 

 用途：实现全选同名标签，可以设置公共样式

缺点：只能进行全选，不能进行单独的布局样式

 

 

id选择器

通过标签上的id属性进行选择

书写方法：#id属性值（自定义）

选择范围：只能选中一个标签

基本使用：

 

特点： id其实就是标签的身份证号，具有唯一性。所以一个页面当中，不允许有同名id属性，id属性的权重高

缺点：只能实现单选

 

 

类名属性

通过标签上的class属性进行选择

书写方法：.匹配对应的class属性值

选择范围：选中所有同名的class属性标签

基本使用：

 

 

 

 一个标签的class属性值可以有一个或者是多个

多个class属性之间使用空格隔开

 

id和class属性的命名规范：第一个字符必须使字母，后面的字符可以使字母，数字，下划线

 

 

通配符选择器

书写方法：*

选择范围：选择包含heml标签在内的所有标签、

通配符*后面添加的样式，每一个标签都会加载一次

我们通常使用清除页面的默认样式

基本使用：

 

 

 

 清除页面的默认内外边距

 

 

  高级选择器

后代选择器：通过标签之间的后代关系去决定选择某个范围内的元素

书写方法：使用空格连续连接多级选择器

作用：通过标签之间的后代关系去决定选择某个范围内的元素。具有精确匹配性

基本使用：

 

 

 

 

attention：后代关系不一定是父子关系，只要是后代关系就行

 

 表示选择类名为box后代中的li

 

 

交集选择器

作用：进行满足所有选择器条件的匹配

书写方法：将多个选择器连接书写，中间没有空格，无需加任何符号

基本使用：

 

 

 

 

并集选择器

并级选择器有“和”的意思，代表多个标签设置同样的属性

书写方法：将多个选择器使用逗号进行连接，最后一个不加逗号

选择范围：多个选中标签的集合

 

 

 

 并级选择器非常灵活，可以结合多种选择器使用，医用逗号进行分割从而区分属性

 

 

 

CSS的层叠性和继承性

继承性：只需要给祖先元素设置文字属性，后代元素就能加载这个属性，这个特性叫做继承性

 

 

 

 CSS能够继承的只有文字属性，比如color,font-size,font-family

 

 

层叠性

CSS样式表又叫做“层叠式”样式表

 

 浏览器效果

 

 

 

 

 通过上面的案例，我们发现一个标签可以被多个选择器选中，并设置对应的属性

 

如果多个标签设置同一属性的话：

 

 

 

 

 

 

后面两个选择器设置的内容被“杠”掉了，我们叫做被层叠了，这个就是css的层叠性

 

选择器的权重：

id选择器>class类名选择器>标签选择器

如果被多个选择器同时选中，首先看id的，如果没有id的，看class的，如果没有class的，看标签的

 快捷键：div#box1.box2 代表快速生成id选择器和类名选择器

 

 案例：

 

 如果遇到复杂的选择器，学会数选择器，方法是首先将所有的选择器罗列出来，从id选择器开始比较，如果id选择器能比较出大小，则选择id选择器数目最多的，如果id选择器数量相同或者没有id选择器，则比较类名选择器，则选择数量最多的，如果类名选择器数量相同或者没有，则比较标签选择器，数量多的获胜，如果所有选择器数量相同，后写的覆盖先写的。

 

上面的案例是所有的选择器都选中同一个元素p，所以需要书权重的数量

 

 

 

 如果都没有选择中对应标签，就看谁离得近，离得近的就是被选中的（就近原则），如果选中的都是同一个元素，再去数权重

 如果此时选中同一级别，则需要数权重

conclusion：

遇到了复杂的选择器，首先看是否同时选中了同一个元素，如果都选择的是同一个元素，则数权重，如果层级不同，如有的是父级，有的是爷爷级，则采用就近原则。谁离得近听谁的，如果所有的权重一样，选择位置也一样，则后书写的覆盖先写的

 

 

 

一、Fireworks

fireworks是一款图形编辑软件，作用是用来绘制图形，主要用来测量css相关属性。

和Photoshop类型，不同的是fireworks比ps更简单。

 

作用是用来放大或者缩小画布

快捷键ctrl+鼠标滚轮