CSS：层叠样式表

CSS的功能

  • 设定元素样式
  • 设定元素布局

CSS的工作流

浏览器拉取到CSS之后会进行解析，浏览器基于选择器的不同类型找到不同的选择器，将不同的规则应用在对应的DOM节点中，并添加节点的依赖样式——渲染树。

元素样式来源

  • 默认样式

    由浏览器提供，例如h1、h2等

    1. <h1>hello</h1>

  • 自定义样式

    • 行内样式（内联样式）通过style属性实现
      1. <h1 style="color: red">hello</h1>
    • 文档样式（内部样式）通过上style标签实现
      1. <style>
      2.   h1 {
      3.     color: green;
      4.   }
      5. </style>
    • 外部样式通过引入外部CSS文件实现
      先用link标签引入外部css
      1. <link rel="stylesheet" href="demo.css" />
      在外部css中设置h1的样式
      1. h1 {
      2. color: blue;
      3. }

可以看到样式的优先级是内联样式>内部样式>外部样式>默认样式

  • 继承样式

    继承规则

    • 子级标签可以继承父级标签的颜色,字体,字号等样式
    • 子级标签无法继承父级标签的盒模型样式,例如border等样式无法被继承
      如
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8" />
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. <title>Document</title>
      8. </head>
      9. <body>
      10. <style>
      11.   div {
      12.     color: green;
      13.     border: 1px solid black;
      14.   }
      15. </style>
      16. <div>
      17.   hello
      18.   <h1>hello</h1>
      19. </div>
      20. </body>
      21. </html>


      此处h1继承的border与父级div是一个border。

基本选择器和上下文选择器

  • 基本选择器

    • 通过标签选择

      在内部样式中直接写标签名即可
      1. <style>
      2.   h1 {
      3.     color: green;
      4.   }
      5. </style>

    • 通过class或id选择

      1. <style>
      2.   #userid {
      3.       /* id选择 */
      4.     color: green;
      5.   }
      6.   .username {
      7.       /* class选择 */
      8.     color: black;
      9.   }
      10. </style>

    • 通过其他属性选择

      id名前面添加“#”，class名前面加“.”
      在标签名后加[属性=“属性名”]
      1. <style>
      2.   h1[title="a"] {
      3.     color: red;
      4.   }
      5. </style>
      6. <h1 title="a">hello</h1>
      7. <h1 title="b">hello</h1>
      得到

    • 群组选择

      通过“，”分割各元素，可实现群组选择
      1. <style>
      2.   h1[title="a"],
      3.   h1[title="b"] {
      4.     color: red;
      5.   }
      6. </style>
      7. <h1 title="a">hello</h1>
      8. <h1 title="b">hello</h1>

  • 上下文选择器

    • 子元素选择

      通过>来实现选择子元素
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7. <title>Document</title>
      8. </head>
      9. <body>
      10. <ul class="list">
      11.     <li class="item">item1</li>
      12.     <li class="item">item2</li>
      13.     <li class="item">item3</li>
      14.     <li class="item">item4</li>
      15.     <li class="item">item5</li>
      16. </ul>
      17. <style>
      18.     ul.list > li {
      19.         color: red;
      20.     }
      21. </style>
      22. </body>
      23. </html>

    • 后代元素选择

      通过父元素后面加空格，来实现后代元素选择
      1. <html lang="en">
      2. <head>
      3. <meta charset="UTF-8" />
      4. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      6. <title>Document</title>
      7. </head>
      8. <body>
      9. <ul class="list">
      10.   <li class="item">item1</li>
      11.   <li class="item">item2</li>
      12.   <ul class="item">
      13.     item3
      14.     <li class="chirld">name1</li>
      15.     <li class="chirld">name2</li>
      16.     <li class="chirld">name3</li>
      17.     <li class="chirld">name4</li>
      18.     <li class="chirld">name5</li>
      19.   </ul>
      20.   <li class="item">item4</li>
      21.   <li class="item">item5</li>
      22. </ul>
      23. <style>
      24.   ul.list li {
      25.     color: red;
      26.   }
      27. </style>
      28. </body>
      29. </html>

    • 相邻兄弟元素选择

      通过父元素后加“+”，来实现相邻元素单个选择，父元素后加“~”实现该子元素后所有子元素选择
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
      7. <title>Document</title>
      8. </head>
      9. <body>
      10. <ul class="list">
      11.     <li class="item">item1</li>
      12.     <li class="item second">item2</li>
      13.     <li class="item">item3
      14.         <li class="chirld">name1</li>
      15.         <li class="chirld">name2</li>
      16.         <li class="chirld">name3</li>
      17.         <li class="chirld">name4</li>
      18.         <li class="chirld">name5</li>
      19.     </li>
      20.     <li class="item">item4</li>
      21.     <li class="item">item5</li>
      22. </ul>
      23. <style>
      24.     li.item.second + * {
      25.         color: red;
      26.     }
      27. </style>
      28. </body>
      29. </html>

选择器权重

  • 选择器权重的作用

    • 在css代码中,出现同一个元素,被多个选择器选择,只有权重最高的选择器代码生效

    • 权重让代码可以进行有效的升级,避免代码升级时反复修改代码

  • 权重的计算方式

    css将 id,class,tag看成一个”三位整数”,id -> 百位, class -> 十位, tag -> 个位,选择器每有一个tag,那么该选择器权重+1,每有一个class权重+10,每有一个id权重+100,将三者结果相加得到最终的权重

  • 为什么不推荐用id和tag

    • id会使该代码权重过高,导致代码更新较为麻烦,不具有弹性。

    • tag标签数量较少,而calss可以任意命名。

更多相关文章

  1. android Widgets
  2. Android(安卓)仿微信Activity左右切换 【全局配置Activity显示动
  3. Android(安卓)对话框【Dialog】去除白色边框代码
  4. 关于CheckBox样式问题
  5. Android(安卓)对话框【Dialog】去除白色边框代码
  6. 转：Android(安卓)对话框【Dialog】去除白色边框代码
  7. android TextView自定义字体样式
  8. android 登陆、提交数据或加载数据时提示页面
  9. 剖析Android(安卓)线性布局中的权重（layout_weight）(解答疑惑)

随机推荐

  1. LinearLayout和RelativeLayout 属性对比
  2. Android示例大全教学视频
  3. Android应用的LinearLayout中嵌套Relativ
  4. Android SDK版本名和API level对照表
  5. SDK1.5下 android判断是否存在网络
  6. android文件操作OpenFileInput OpenFileO
  7. android 判断是白天还是晚上，然后设置地图
  8. Android 系统开发学习杂记
  9. Android Gradle 构建工具(Android Gradle
  10. Android开发中如何定义和使用数组