选择器和标签_html/css_WEB-ITnose
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 内联块在被浏览器解读时,换行被解析。