1.css选择器，字体常见属性

１.1  选择器：选择页面上的某一个元素。

1.0标签选择器：

2.0类选择器： .类名

3.0id选择器:   #id名

4.0使用类选择器和id选择器的注意点：

类名和id名的命名规则**

１.2  字体样式相关的属性：

Font:Font-style font-weight font-size font-family;

二.  其它选择器：

１   通配符：

作用：用于作用于页面上所有的标签.

代码：

<style>

      * {

            属性名1：属性值1;

            属性名2：属性值2;

            .......

}

</style>

注意：通配符在进行选择的时候，会去遍历页面上所有的标签，并且给这些标签设置对应的属性。

缺点：性能太低。一般情况不建议使用。

基础班中有很长一段时间用这个属性来做css的reset.

２   后代选择器：

作用：选择一个标签中所有后代标签里满足条件的标签。

代码：

 选择器 选择器 选择器｛

     属性名1：属性值1;

            属性名2：属性值2;

            .......

 

｝

 

解读：去.father下面找.son元素，再找.son下面所有的p标签。

３   子元素选择器

作用：得到 当前标签中的直接子元素（直接放在标签下面没有经过任何标签的嵌套）

代码：

选择器>选择器｛

     属性名1：属性值1;

            属性名2：属性值2;

            .......
｝

具体代码：

注意：上面的代码中只有与羊相关的标签才会变色。

４   并集选择器：

作用：将两种类型的元素全部选择出来。

代码：

选择器 ，选择器｛

属性名1：属性值1;

            属性名2：属性值2;

            .......

｝

具体代码：

==》

.son p {

     Color: red;

}

.mao p {
     color: red;

}

 

 

 

５   交集选择器：

作用：从两个集合中选择中它们相同部分：

代码：

选择器选择器 {
            属性名1：属性值1;

            属性名2：属性值2;

            .......

}

注意：两个选择器之间是没有空格的。

 

P标签中不能放div。

三.  Css的三大特性

１   继承

作用：给父元素设置一个属性，然后子元素可以使用

应用：如果页面上有很多的文件都是红色，并且大小都是20px，那么这个时候给每个元素单独设置会很麻烦，所以可以考虑继承。

注意：将来在写代码的时候，我们的css初始化，与页面文字的整体颜色一般会先设置。

什么样的属性才可以继承呢？

凡是以line-,text-,font-开头的属性都是可以继承。

２   层叠

是页面处理冲突属性的一个能力。

如果多个选择器为同一个元素设置了不同的属性它们会同时作用于这个元素。

如果多个选择器为同一个元素调协了相同的属性它们会发生层叠。

层叠的最终结果跟优先级有关系。

３   优先级

优先级从大到小

！important>Id>类>标签>通配符>继承>浏览器默认

权重：

４   ！Important:最高级。

作用：将对应选择器的优先级设置为最高级。

注意：！Important属性是不能继承的

５   如果选择器混合作用，那么如何确定我们的优先级？

通过权重来进行比较。

如何计算权重：

数标签：

先数id,如果id相等再数类如果id不相等id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。

注意：比较权重的时候一定要注意：我们的选择器一定要命中对应的标签才可能让标签拥有对应的属性。

四.  层叠，优先以及权重之间的关系

层叠是css的一特性，如果两个相同的属性作用于同一标签，它们会发生层叠。如果多个复合选择器，同时作用于我们的同一标签，优先级就不好计算了，就要计算权重，通过比较权重，来先出优先级最高的选择器。

层叠是优先级的一种表现。

权重是优先级的计算法则。

五.  背景：

１   Background-color:背景颜色;

作用：设置背景颜色。

２   Background-image:背景图片

作用：设置背景图片，默认情况下是平铺（如果图片不能占满整个容器，所以会让图片铺满整个容器）

３   Background-repeat:是否平铺

作用：设置背景图片是否平铺。

取值：（no-repeat,repeat-x,repeat-y）

No-repeat:不重复。

Repeat-x:在x轴方向平铺

 

Repest-y:在y轴方向平铺

 

 

 

 

４   Background-position:背景图片的位置。

取值：

４.1  方位名词：

top :上   bottom:下  left:左 right: 右   center:中

两类：

水平方向：left：左  center:中   right: 右

垂直方向：top:  上  center: 中  bottom:下

４.2  具体的像素：

两个方向：水平方向，垂直方向

５   连写方式：

background:basckground-color background-image background-repeat background-postion;

六.  元素的显示方式：

１   块级元素：

特点：单独占一行，可以给这个元素设置宽高。

display(显示方式):block;

所属标签：div,p,h1,ul,li,ol,dl

２   行内元素：

特点：可以多个标签放在同一行，但是给标签设置宽高没有作用。

display(显示方式):inline;

所属标签：

span,b,u,i,s,ins,del,strong,em

３   行内块级元素：

特点：可以多个标签放在同一行，并且可以标签设置宽高。

display(显示方式):inline-block;

img

４   元素显示方式的转换：

只需要修改display属性就可以了。