CSS3学习的一些细节(1)

284 阅读2分钟
  1. 对body标签使用font中的字体样式,一般均能使全体文本发生相应的改变,而使用font-size不能改变标题的字体大小;另外当规定了某标签中的某种样式,在body中相应样式的修改不会对其发生影响,应该是标签优先级的原因;
  2. 使用color可以对超链接标签文字的颜色进行修改,通过text-decoration还可以删除下划线,这样做出来的链接文字更美观;
  3. 使用后代选择器和子代选择器需要注意:
    后代选择器的格式为:元素1 元素2 {样式声明}<br>,例如:ol p {}
    子带选择器的格式为:元素1>元素2 {样式声明}<br>,例如:ol>p {}
    

      接着看下面这段代码

    <ol>
        <li>
            <p>我是ol的孩子</p>
        </li>
        <p>
            <li>我是ol的孩子</li>
        </p>
    </ol>
    

      此种情况下若使用后代选择器,两个p中的句子都会被选中,而子代选择器只会选中第二个p中的句子;
      其实这里关于后代和子代的理解有个坑,比如上面的代码中第一个p是ol的后代,且是ol的孙子,因此子代选择器无法选中;但对于第二个p来说,li是p的儿子,也是ol的孙子,选中了第二个p便等于选中了此p里面的li,这不是间接地选中了ol的孙子吗,怎么又变成儿子了呢。这一点看上去显而易见,但稍微多想一下,便很容易绕进去。
      另外,关于这段代码,li和p的嵌套顺序调换似乎不影响浏览器中的显示,具有有什么规范和区别还需要进一步的学习;

  4. 链接伪类的四大选择器一般按link,visited,hover,active顺序书写,否则会出现某个样式无法实现的情况;通常修改链接需要单独给a标签改变样式,在body或包含a标签的其他标签中修改并不会影响a标签的样式;
  5. 文字类的块元素如p和标题h内不能再存放其他块元素,但盒子类的块元素如div可以存放文字类块元素,另外div内也可以继续存放div;
  6. 使文本行高line_height与盒子的高度height相等,可以实现文字垂直居中的效果;
  7. 用背景图片的方式带入img标签插入图片,可以更好地调节图片位置等属性,实际中用的更多;
  8. 多通过类选择器来对几个相同的标签进行区别,这等于对标签进行重命名,对重命名的标签进行选择并修改样式操作,其效力等同于原标签;