程序员

选择器和标签

CSS中有很多选择器,现在先把其中最常用的三种选择器整理一下相关用法和注意事项。顺便讲下常用的标签。

1、标签名选择器

即以标签名作为使用对象的选择器,对HTML里对应的标签使用样式,例如div{}、p{}等。一般我们拿到UI大姐给的PSD,先要分析大体的布局,哪些可以实现,哪些要和大姐讨论实现。其中可以实现的,还要注意提取公共样式,减轻工作量和精简代码。

2、class选择器

即类选择器,通过给需要设置格式的标签定义class,能用内部和外部方式引用CSS,为相同class名称的标签赋予样式。在标签名选择器的设定基础上增删改动具体的设定,在CSS里的样式为 .class{} 。优先级:class选择器>标签名选择器。

3、id选择器

即给标签设定唯一的ID,给其设定单独的格式,同样是在原来已有的两个选择器格式基础上修改。一个id名称只能在标签中出现一次,且当前html文档中只能出现一次。CSS里的样式为 #id{} 。优先级:id选择器>class选择器>标签名选择器。

4、群组选择器

即是将上述的多个选择器进行捆绑设定,精简代码,例如 p,div,ol,ul {}。

注意:如果是同一种选择器对同一个属性设定了不同的样式,那么以后设定的样式为准。

例如:div {  margin: 0 auto;

                  margin-left: 15px;  }

就会表现为左外边距15px。

常用的标签有三种属性,列一些常见的如下;

块属性标签(block):div, p , h1~h6, ul, ol , li; 

1. 特性–

1.1 块属性标签可以使用所有的css样式

1.2 块属性标签独占一行

行属性标签(inline) : span, a, em, strong, i, b;

2. 特性–

2.1 不支持设定宽高,大小由文本内容撑开

2.2 同排显示(遇到浏览器边界自动换行)

2.3 在使用margin时,上下margin失效

2.4 在使用padding时,上下padding存在,但是不合理,在开发中不建议使用

2.5 行属性标签在被浏览器解读时,换行被解析。

内联块/行间块属性标签(inline-block): img.

3. 特性–

3.1 支持宽高,在不设置宽高的时候,由内容撑开

3.2 同排显示(遇到浏览器边界自动换行)

3.3 正常使用css样式

3.4  内联块在被浏览器解读时,换行被解析。