Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS规则引入html文档的方式及CSS常用选择器
Blogger Information
Blog 8
fans 0
comment 0
visits 4939
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规则引入html文档的方式及CSS常用选择器
择善而从
Original
572 people have browsed it

CSS规则引入html文档的方式，CSS常用选择器

1. 实例演示css规则的三种引入到html文档中的方式

  • 行内样式: 使用style属性，仅对于使用了这个属性的当前元素有效
    1. <h3 style="color:red">行内样式，仅设置了本h3元素的颜色</h3>
  • 内部样式: 使用 style 标签，仅对当前文档的元素有效 
    1. <head>
    2.   <meta charset="UTF-8">
    3.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    4.   <title>内部样式</title>
    5.   <style>
    6.       h3 {
    7.           color: red;
    8.       }
    9.   </style>
    10. </head>
    11. <body>
    12.   <h3>内部样式，设置了本文档中h3元素的颜色</h3>
    13.   <h3>这个h3元素的颜色也同时被设置了</h3>
    14. </body>
  • 外部样式: 使用 link 标签，对所有引入这个css样式表的html文档有效
    1. /* file:style.css */
    2. h3 {
    3.  color:red;
    4. }
    1. <!-- 外部样式1.html -->
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>外部样式1</title>
    8.   <link rel="stylesheet" href="css/style.css">
    9. </head>
    10. <body>
    11.   <h3>外部样式，设置了本文档中h3元素的颜色</h3>
    12.   <h3>这个h3元素的颜色也同时被设置了</h3>
    13. </body>
    14. </html>
    1. <!-- 外部样式2.html -->
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>外部样式2</title>
    8.   <link rel="stylesheet" href="css/style.css">
    9. </head>
    10. <body>
    11.   <h3>外部样式，同样也设置了这个文档中h3元素的颜色</h3>
    12.   <h3>同样，这个h3元素的颜色也被设置了</h3>
    13. </body>
    14. </html>
    对于一个网站来说,许多页面元素的样式是相同的,将这些相同样式剥离出来,形成独立的CSS文档，可以实现模块化，便于后期调整修改。

    2. 实例演示选择器

    演示html

    1. <!-- demo2.html -->
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>选择器使用</title>
    8.   <link rel="stylesheet" href="css/css_demo2.css">
    9. </head>
    10. <body>
    11.   <ul id="idxz">
    12.       <li class="classxz">PHP</li>
    13.       <li class="classxz">JAVA</li>
    14.       <li class="classxz1">C#</li>
    15.       <li class="classxz">PYTHON</li>
    16.   </ul>
    17. </body>
    18. </html>
  • 标签选择器
    1. /*标签选择器 返回一组此标签*/
    2. li{
    3.   border:1px soild red;
    4. }
  • class选择器
    1. /*类选择器 一组 使用方式 .类名*/
    2. .classxz{
    3.   color:red;
    4. }
  • id选择器
    1. /*id 选择器 浏览器不保证唯一性由开发者自定义 使用方式 #id*/
    2. #idxz{
    3.   background-color:blue;
    4. }
  • 上下文选择器
    1. /* 后代选择器  所有层级*/
    2. ul li{
    3.   color:blue;
    4. }
    5. /*子元素选择器  仅父子层级*/
    6. body>ul>li{
    7.   background-color:red;
    8. }
    9. /*同级相邻选择器*/
    10. .classxz1+li{
    11.   background-color:bule;
    12. }
    13. /*同级所有选择器*/
    14. classxz~li{
    15.   color:yellow;
    16. }
  • 结构伪类选择器
    1. /*伪类选择器*/
    2. /* 匹配任意位置的元素:nth-of-type(an+b) */
    3. /* an+b: an起点,b是偏移量, n = (0,1,2,3...) */
    4. /* 匹配第3个li */
    5. ul li:nth-of-type(0n+2) {
    6.   background-color: violet;
    7. }
    8. /* 0乘以任何数都等于0,通常直接写偏移量就可以 */
    9. ul li:nth-of-type(2) {
    10.   background-color: violet;
    11. }
    12. /*  反向获取任意位置的元素: `nth-last-of-type(an+b)` */
    13. /* 选择倒数2个 */
    14. ul li:nth-last-of-type(-n+2) {
    15.   background-color: violet;
    16. }
    17. /* 选择所有索引为偶数的子元素, */
    18. ul li:nth-of-type(2n) {
    19.   background-color: yellow ;
    20. }
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