Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS基础知识
Blogger Information
Blog 6
fans 0
comment 0
visits 5982
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS基础知识
王硕的博客
Original
619 people have browsed it

CSS 基础知识

1. 层叠解决样式冲突的 3 种方案

1.样式表的来源 2.选择器的优先级 3.源码的顺序

2. 样式表的来源（自定义样式）

  1. 当前文档:<style>
  2. 当前元素的属性:style="..."
  3. 外部公共样式：<link > 引入

3. 选择器的优先级

  • tag < class < id < style(当前元素属性)

4. 源码的顺序

  • 当前选择器，以元素最后定义的属性为准

5. 用户代理样式（非自定义样式）

  • 用户代理：就是浏览器
  • 展示浏览器的默认样式

6. 选择器的优先级方案

案例 id class tag 标示
html body header h1 0 0 4 0,0,4
body header.page-header h1 0 1 3 0,1,3
.page-header .title 0 2 0 0,2,0
#page-title 1 0 0 1,0,0

7. 注意

  • 尽可能不使用!important

  • 尽可能不要用id

  • 为什么要少用或不用 id?

    • 原因级别太高，丧失了灵活性
  • 为什么尽可能不用 tag?
    • 因为 css 的本质是为了样式复用
  • 尽可能使用 class 来完成样式表

8. 继承(inherit)

  • 有的属性可以被继承，如颜色，字体，有的不行，如盒模型
  • 两个关键字
    • inherit : 继承
    • initail : 初始值(依赖浏览器)

9. 案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <style>
  7.       /* 1.简单优先级 */
  8.       .title {
  9.         color: red;
  10.       }
  11.       #page-title {
  12.         color: green;
  13.       }
  15.       /* 2.复杂优先级 */
  16.       /*0,0,4  */
  17.       html body header h1 {
  18.         color: red;
  19.       }
  20.       /* 0,1,3 */
  21.       body header.page-header h1 {
  22.         color: sienna;
  23.       }
  24.       /* 0,2,0 */
  25.       .page-header .title {
  26.         color: slateblue;
  27.       }
  28.       /* 1,0,0 */
  29.       /* 不建议使用id，级别太高，平常建议使用class */
  30.       #page-title {
  31.         color: rgb(128, 0, 96);
  32.       }
  33.     </style>
  34.     <title>CSS测试</title>
  35.   </head>
  36.   <body>
  37.     <header class="page-header">
  38.       <!-- 标签元素优先级最高
  39.     style > id > class > tag(html标签)
  40.     -->
  41.       <!-- <h1 id="page-title" class="title" style="color: hotpink">
  42.       我在php中文网学习php
  43.     </h1> -->
  44.       <h1 id="page-title" class="title">我正在php中文网学习php</h1>
  45.     </header>
  46.   </body>
  47. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：一个元素长啥样, 与一个女孩是一样的, 要么是天生的默认值, 要么是化妆后的自定义值, 理解了这个, 一切都舒服了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post