zoukankan      html  css  js  c++  java
  • CSS笔记

    优先级:

    一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

    1. 浏览器缺省设置
    2. 外部样式表
    3. 内部样式表(位于 <head> 标签内部)
    4. 内联样式(在 HTML 元素内部)

     CSS框模型


    可以按照上、右、下、左(顺时针)的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:

    h1 {padding: 10px 0.25em 2ex 20%;}

    类选择器还是 ID 选择器?

    在类选择器这一章中我们曾讲解过,可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素,而且它还可以应用到更多元素。

    区别 1:只能在文档中使用一次

    与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。

    区别 2:不能使用 ID 词列表

    不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。

    区别 3:ID 能包含更多含义

    类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。


    CSS换行

    强制不换行
    p { white-space:nowrap; }

    自动换行

    p { word-wrap:break-word; word-break:normal; }

    强制英文单词断行

    p { word-break:break-all; }

    *注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。

    span { display:block; } 


    CSS 选择器参考手册

    选择器描述
    [attribute] 用于选取带有指定属性的元素。
    [attribute=value] 用于选取带有指定属性和值的元素。
    [attribute~=value] 用于选取属性值中包含指定词汇的元素。
    [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
    [attribute^=value] 匹配属性值以指定值开头的每个元素。
    [attribute$=value] 匹配属性值以指定值结尾的每个元素。
    [attribute*=value] 匹配属性值中包含指定值的每个元素。

  • 相关阅读:
    1+x LNMP + WordPress
    1+X Samba
    1+X NFS
    1+x FTP
    1+x LVM
    笔记(全)
    前端性能优化整理总结
    Event Loop我知道,宏任务微任务是什么鬼?
    深入探讨深拷贝浅拷贝两兄弟
    react后台管理系统路由方案及react-router原理解析
  • 原文地址:https://www.cnblogs.com/andriy2012/p/5504356.html
Copyright © 2011-2022 走看看