Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css基础知识
Blogger Information
Blog 12
fans 0
comment 0
visits 5957
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基础知识
sea
Original
377 people have browsed it

元素的样式来源举例说明

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

浏览器默认样式

body
body标签外边框默认占8个像素

用户自定义样式

  • 行内样式表（行内式）

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

  • 内部样式表（嵌入式）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head charset="UTF-8">
  4.     <title>嵌入式</title>
  5.     <style>
  6.       div {
  7.         width: 100px;
  8.         height: 100px;
  9.         background-color: #f40;
  10.       }
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <div></div>
  15.   </body>
  16. </html>
  • 外部样式表（链接式）
    需要两个文件,一个.html 后缀，一个.css 后缀，并且需要在.html 文件引入.css 文件
    文件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head charset="UTF-8">
  4.     <title>链接式</title>
  5.     <link rel="stylesheet" href="./style.css" />
  6.   </head>
  7.   <body>
  8.     <div></div>
  9.   </body>
  10. </html>
  1. div {
  2.   width: 100px;
  3.   height: 100px;
  4.   background-color: #f40;
  5. }

基本选择器

  • 通配选择器
  1. * {
  2.   background-color: #424242;
  3. }
  • 标签选择器

<div></div>

  1. div {
  2.   width: 100px;
  3.   height: 100px;
  4.   background-color: #f40;
  5. }
  • 属性选择器

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

  1. a[href] {
  2.   color: #f40;
  3. }
  • 类选择器

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

  1. .demo {
  2.   width: 100px;
  3.   height: 100px;
  4.   background-color: #f40;
  5. }
  • id 选择器

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

  1. #box {
  2.   width: 100px;
  3.   height: 100px;
  4.   background-color: #f40;
  5. }

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

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

1.后代选择器

元素1 元素2

  • 选择元素 1 里面的所有元素 2
  • 元素 2 可以是儿子，也可以是孙子，只要是元素 1 的后代即可
  1. .nav .list-item {
  2.   display: inline-block;
  3.   background-color: #f40;
  4. }

2.子选择器

元素1 > 元素2

  • 元素 2 必须是元素 1 的亲儿子，其孙子，重孙指令不归它管辖。
  1. .nav > .checked {
  2.   display: inline-block;
  3.   background-color: #f40;
  4. }

3.分组选择器

  1. h1,
  2. h2,
  3. h3,
  4. h4,
  5. h5,
  6. h6 {
  7.   unicode-bidi: isolate;
  8. }

4.伪类选择器

  1. <a href="#">示例</a>
  1. a:link {
  2.   color: #333;
  3.   text-decoration: none;
  4. }
  5. a:visited {
  6.   color: orange;
  7. }
  8. a:hover {
  9.   color: skyblue;
  10. }
  11. a:active {
  12.   color: green;
  13. }

选择器的权重

选择器 权重
通配符 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 搭配使用。
Correcting teacher：PHPzPHPz

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