欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css基础知识

程序员文章站 2022-05-08 11:09:20
...

元素的样式来源举例说明

  • 浏览器默认样式
  • 用户自定义样式

浏览器默认样式

css基础知识
body标签外边框默认占8个像素

用户自定义样式

  • 行内样式表（行内式）

<div style="color: #f40; font-size: 18px">淘宝红</div>

  • 内部样式表（嵌入式）
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head charset="UTF-8">
    4. 

  4.     <title>嵌入式</title>
    5. 

  5.     <style>
    6. 

  6.       div {
    7. 

  7.         width: 100px;
    8. 

  8.         height: 100px;
    9. 

  9.         background-color: #f40;
    10. 

  10.       }
    11. 

  11.     </style>
    12. 

  12.   </head>
    13. 

  13.   <body>
    14. 

  14.     <div></div>
    15. 

  15.   </body>
    16. 

  16. </html>
    17.
  • 外部样式表（链接式）
    需要两个文件,一个.html 后缀，一个.css 后缀，并且需要在.html 文件引入.css 文件
    css基础知识 
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head charset="UTF-8">
    4. 

  4.     <title>链接式</title>
    5. 

  5.     <link rel="stylesheet" href="./style.css" />
    6. 

  6.   </head>
    7. 

  7.   <body>
    8. 

  8.     <div></div>
    9. 

  9.   </body>
    10. 

  10. </html>
    11. 

    

  1. div {
    2. 

  2.   width: 100px;
    3. 

  3.   height: 100px;
    4. 

  4.   background-color: #f40;
    5. 

  5. }
    6.

基本选择器

  • 通配选择器
    

  1. * {
    2. 

  2.   background-color: #424242;
    3. 

  3. }
    4.
  • 标签选择器

<div></div>

    

  1. div {
    2. 

  2.   width: 100px;
    3. 

  3.   height: 100px;
    4. 

  4.   background-color: #f40;
    5. 

  5. }
    6.
  • 属性选择器

<a href="#">示例</a>

    

  1. a[href] {
    2. 

  2.   color: #f40;
    3. 

  3. }
    4.
  • 类选择器

<div class="demo"></div>

    

  1. .demo {
    2. 

  2.   width: 100px;
    3. 

  3.   height: 100px;
    4. 

  4.   background-color: #f40;
    5. 

  5. }
    6.
  • id 选择器

<div id="box"></div>

    

  1. #box {
    2. 

  2.   width: 100px;
    3. 

  3.   height: 100px;
    4. 

  4.   background-color: #f40;
    5. 

  5. }
    6.

css 复合选择器（对基础选择器进行组合）

    

  1. <ul class="nav">
    2. 

  2.   <li class="list-item">导航1</li>
    3. 

  3.   <li class="list-item checked">导航2</li>
    4. 

  4.   <li class="list-item">导航3</li>
    5. 

  5. </ul>
    6.

1.后代选择器

元素1 元素2

  • 选择元素 1 里面的所有元素 2
  • 元素 2 可以是儿子，也可以是孙子，只要是元素 1 的后代即可
    

  1. .nav .list-item {
    2. 

  2.   display: inline-block;
    3. 

  3.   background-color: #f40;
    4. 

  4. }
    5.

2.子选择器

元素1 > 元素2

  • 元素 2 必须是元素 1 的亲儿子，其孙子，重孙指令不归它管辖。
    

  1. .nav > .checked {
    2. 

  2.   display: inline-block;
    3. 

  3.   background-color: #f40;
    4. 

  4. }
    5.

3.分组选择器

    

  1. h1,
    2. 

  2. h2,
    3. 

  3. h3,
    4. 

  4. h4,
    5. 

  5. h5,
    6. 

  6. h6 {
    7. 

  7.   unicode-bidi: isolate;
    8. 

  8. }
    9.

4.伪类选择器

  1. <a href="#">示例</a>
    

  1. a:link {
    2. 

  2.   color: #333;
    3. 

  3.   text-decoration: none;
    4. 

  4. }
    5. 

  5. a:visited {
    6. 

  6.   color: orange;
    7. 

  7. }
    8. 

  8. a:hover {
    9. 

  9.   color: skyblue;
    10. 

  10. }
    11. 

  11. a:active {
    12. 

  12.   color: green;
    13. 

  13. }
    14.

选择器的权重

选择器 权重
通配符 0,0,0,0
标签、伪元素 0,0,0,1
class、属性、伪类 0,0,1,0
id 0,1,0,0
行间样式 1,0,0,0
!important =无穷大

class 与 id 选择器的区别

  1. 类选择器可以被多个对象使用（可以选出一个或多个标签）
  2. id 选择器就像身份证号码，唯一，不能重复使用（一次只能选择一个标签）
  3. 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

上一篇： html基础知识01

下一篇： 数组计算操作

推荐阅读