博客列表 >CSS规则引入html文档的方式及CSS常用选择器

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

择善而从
择善而从原创
2020年12月17日 17:28:11571浏览

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. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议