Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > css引入方式和css选择器
Blogger Information
Blog 16
fans 0
comment 0
visits 16830
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引入方式和css选择器
刚哥哥
Original
648 people have browsed it

css引入方式：

css具有多种引入方式：

1、通过在开始标签内写style 属性 定义css 样式；（内联样式）；
  1. 内联样式定义css属性和值，它的优先级最高，相当于私人订制；
2、在head内通过style 元素定义css样式;（内嵌样式）
  1. 这种方式只在本html文档内有效，
3、通过引入外部css文件的方式引入css；（外联样式）
  1. 这种方式可以同时导入到多个html文档中同时使用，通过link标签导入；
4、在style元素内通过@import 关键字导入css样式，（导入方式）
  1. 用于从其他样式文件导入样式规则，@import url("使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url");

示例代码：

1、内联样式示例代码：

  1. <h1 style="color:red">css内联样式示例，内联css样式优先级最高</h1>

2、内嵌样式示例代码：

  1. <head>
  2.     <style>
  3.         h1 {
  4.             color:red;
  5.         }
  6.     </style>
  7. </head>
  8. <body>
  9.     <h1>内嵌样式代码演示，内嵌样式css只在当前html文档中有效</h1>
  10. </body>

3、通过引入外部css文件的方式引入css；（外联样式）

  1. <head>
  2.     <link rel="stylesheet" href="外部css文件路径"/>
  3. </head>

4、通过@import关键字导入css

  1. <style>
  2.     @import url("CssFileName.css");
  3. </style>

css选择器：

css有以下几种选择：

1、标签选择器；
  1. 语法：
  2.     h1{
  3.         属性：值；
  4.         }

注释：h1：标签

*（星号），代表所有元素

2、类选择器：
  1. 语法：
  2.         .top{
  3.             属性：值；
  4.             }

注释：top：类名

3、id选择器：
  1. 语法：
  2.             #top{
  3.                 属性:值;
  4.                 }

注释：top :id名；id在同一个html页面中，具有唯一性，唯一性有开发者自己把控，

4、上下文选择器：
  1. html是结构化文档，文档有父级、同级、后代；
  2. 语法格式：父级 目标元素{声明块}；
5、结构伪类选择器：

1、结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

  1.  2、:root 伪类
  2. ：root，匹配文档树的根元素，：root表示<html>元素，优先级高；
  4. 语法样式：
  5. :root { 样式属性 }
  6.     譬如，:root{background:red} ，表示将页面背景色设置为红        色。
  7.     声明全局CSS变量时 :root 很有用。
  9. 3、 :empty 伪类
  10.     :empty 伪类，代表没有子元素的元素。

4、nth-of-type(n)和:nth-last-of-type(n)选择器

  1. :nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素，

选择器示例代码：

1、标签选择器：

  1. h1 {
  2.     color:red;
  3. }
  4. <body>
  5.     <h1>h1标签</h1>
  6. </body>

2、类选择器：

  1.     .top {
  2.         border:1px solid red;
  3.     }
  4.     <body>
  5.         <div class="top">
  6.             1像素实线边框
  7.         </div>
  8.     </body>

3、id选择器：

  1.     #top {
  2.         border:2px solid red;
  3.     }
  4.     <body>
  5.         <div id="top">
  6.             2像素实线边框
  7.         </div>
  8.     </body>

4、上下文选择器：

  1.         <style>
  2.         ul li {
  3.             color:red;
  4.         }
  5.     </style>
  6. </head>
  7. <body>
  8.     <ul>
  9.         <li>上下文选择器1</li>
  10.         <li>上下文选择器2</li>
  11.         <li>上下文选择器3</li>
  12.         <li>上下文选择器4</li>
  13.         <li>上下文选择器5</li>
  14.     </ul>
  15. </body>

5、结构伪类选择器：

  1.        /* 选择奇数列 */
  2.         ul :nth-of-type(odd){
  3.             color:red;
  4.         }
  5.         /* 选择偶数列 */
  6.         ul :nth-of-type(even){
  7.            color: royalblue;
  8.            background-color: seagreen;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <ul>
  14.         <li>上下文选择器1</li>
  15.         <li>上下文选择器2</li>
  16.         <li>上下文选择器3</li>
  17.         <li>上下文选择器4</li>
  18.         <li>上下文选择器5</li>
  19.     </ul>
  20. </body>
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