search

博客列表 >css的模块化，css引入方式，简单选择器，上下文选择器，伪类选择器

css的模块化，css引入方式，简单选择器，上下文选择器，伪类选择器

豌豆君
豌豆君原创
2020年12月25日 00:13:18631浏览

css样表

style.css

  1. h1 {
  2.     color: violet;
  3. }
  1. footer {
  2.     height: 80px;
  3.     background-color: #555;
  4.     color: white;
  5. }

header.css

  1. header {
  2.     height: 50px;
  3.     background-color: #ddd;
  4. }

stylePublic.css

  1. /* 导入公共页眉 */
  2. /* @import url(css/header.css); */
  3. @import url(./header.css);
  4. /* 导入公共页脚 */
  5. /* @import url(css/footer.css); */
  6. @import url(./footer.css);
  8. main {
  9.     min-height: 500px;
  10.     background-color: lightcyan;
  11. }
  13. /* css的模块化：
  14. 1.将公共样式部他进行分离，并创建一些独立的样式表来保存它
  15. 2.使用@import指令将这些独立的公共样式表引入到指定的css文档或标签中 */

css的基本语法 之代码

  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>css的基本语法</title>
  8.     <!-- 任何元素如果想引入到html文档中，必须要使用一个适当的标签，css也不例外 -->
  9.     <style>
  10.         /* 通过style标签引入的css规则，仅适用于当前的页面(html文档) */
  11.         /* css: 层叠样式表，用来设置页面中元素的样式，布局 */
  12.         h1 {
  13.             color: violet;
  14.         }
  15.         /* h1: 选择器 */
  16.         /* {...}：声明块，由一个或多个由分号分隔的样式声明构成 */
  17.         /* h1 + {...}: 选择器 + 声明块 = 规则 */
  18.     </style>
  19. </head>
  20. <body>
  21.     <h1>php.cn</h1>
  22. </body>
  23. </html>

css引入方式:

内部样式 之代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>css引入方式:内部样式</title>
  7.     <!-- 1.内部样式：在html文档内用<style>定义-->
  8.     <style>
  9.         h1 {
  10.             /* 声明：属性和值组成 */
  11.             color: violet;
  12.             border: 1px solid #000;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <h1>php.cn中文网</h1>
  18. </body>
  19. </html>

外部样式表/公共样式表/共享样式表 之代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>css引入方式：外部样式表/公共样式表/共享样式表</title>
  7.     <!-- 2.外部样式表/公共样式表/共享样式表：使用link标签引入外部公共样式表 -->
  8.     <!-- <style>
  9.         /* h1 {
  10.             color: violet;
  11.             border: 1px solid #000;
  12.         } */
  13.         /* @import url(css/style.css); */
  14.     </style> -->
  15.     <link rel="stylesheet" href="css/style.css">
  16. </head>
  17. <body>
  18.     <h1>php.cn中文网</h1>
  19. </body>
  20. </html>

style属性设置样式 之代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>css引入方式：style属性设置样式</title>
  7.     <link rel="stylesheet" href="css/style.css">
  8. </head>
  9. <body>
  10.     <h1>php.cn中文网</h1>
  11.     <!-- 给第2个h1自定义样式 -->
  12.     <!-- 3.通过style属性给指定元素自定义/定制样式 -->
  13.     <h1 style="color: teal;">php.cn英文网</h1>
  14. </body>
  15. </html>
  16. <!-- 
  18. 任何元素如果想引入到html文档中，必须要使用一个适当的标签，css也不例外
  20. 内部样式：仅对当前文档的元素有效，使用style标签
  21. 外部样式：适用于所有引入了这个css样式的html文档,使用link标签
  22. 行内样式：仅适用于当前的页面中指定的元素，使用style属性 
  23. -->

样式表的模块化1 之代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>样式表的模块化</title>
  7.     <style>
  8.         header {
  9.             height: 50px;
  10.             background-color: #ddd;
  11.         }
  13.         main {
  14.             min-height: 500px;
  15.             background-color: lightcyan;
  16.         }
  18.         footer {
  19.             height: 80px;
  20.             background-color: #555;
  21.             color: white;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <header>页眉</header>
  27.     <main>主体</main>
  28.     <footer>页脚</footer>
  29. </body>
  30. </html>

样式表的模块化2 之代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>样式表的模块化</title>
  7.     <link rel="stylesheet" href="./css/stylePublic.css">
  8. </head>
  9. <body>
  10.     <header>页眉</header>
  11.     <main>主体</main>
  12.     <footer>页脚</footer>
  13. </body>
  14. </html>

选择器

简单选择器 之代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>选择器1：简单选择器</title>
  7.     <style>
  8.         /* 1.标签选择器，返回一组 */
  9.         li {
  10.             background-color: violet;
  11.         }
  12.         /* 2. 类选择器：返回组 */
  13.         li[class="on"] {
  14.             background-color: thistle;
  15.         }
  16.         /* class选择器可简化为 .  */
  17.         .at {
  18.             background-color: tomato;
  19.         }
  20.         /* 3.id选择器：返回一个（注意不是唯一 因为浏览器不检查id的唯一性，必须由开发者自行保证） */
  21.         li[id="foo1"]{
  22.             background-color: rebeccapurple;
  23.         }
  24.         /* id选择器使用 # 简化 */
  25.         #foo2 {
  26.             background-color: turquoise;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <ul>
  32.         <li>item1</li>
  33.         <li class="on">item2</li>
  34.         <li>item3</li>
  35.         <li class="on">item4</li>
  36.         <li class="at">item5</li>
  37.         <li id="foo1">item6</li>
  38.         <li id="foo1">item7</li>
  39.         <li id="foo2">item8</li>
  40.     </ul>
  41. </body>
  42. </html>

上下文选择器 之代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>选择器2：上下文选择器</title>
  7.     <style>
  8.         /* 因为html是一个结构化的文档：每一个元素在文档中有确切的位置 */
  9.         /* 所以根据元素的上下文环境来选择是完全没有问题 */
  10.         /* 1.后代选择器 */
  11.         ul li {
  12.             background-color: lightblue;
  13.         }
  14.         /* ----------------------------------------------------- */
  15.         /* 2. 子元素选择器：仅父子层级 */
  16.         body>ul>li {
  17.             background-color: teal;
  18.         }
  19.         /* 3. 同级相邻选择器：仅选中与之相邻的第一个兄弟元素 */
  20.         .start + li {
  21.             background-color: thistle;
  22.         }
  23.         /* 4. 同级后面所有选择器：选中与之相邻的后面所有兄弟元素 */
  24.         .end ~ li {
  25.             background-color: yellow;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <ul>
  31.         <li>item1</li>
  32.         <li class="start">item2</li>
  33.         <li>item3</li>
  34.         <li>item4
  35.             <ul>
  36.                 <li>item4-1</li>
  37.                 <li>item4-2</li>
  38.                 <li>item4-3</li>
  39.             </ul>
  40.         </li>
  41.         <li>item5</li>
  42.         <li class="end">item6</li>
  43.         <li>item7</li>
  44.         <li>item8</li>
  45.     </ul>
  46. </body>
  47. </html>

伪类选择器 之代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>选择器3：伪类选择器（结构相关，难点重点）</title>
  7.     <style>
  8.         /* 1.匹配任意位置的元素： ：nth-of-type(an+b)
  9.         /* an+b: an步量，b是偏移量(第几个开始)，n = （0，1，2，3...） */
  10.         /* 匹配第3个li */
  11.         /* ul li:nth-of-type(0n+3){
  12.             background-color: violet;
  13.         } */
  14.         /* 0乘以任何数都等于0，通常直接写偏移量就可以 */
  15.         /* ul li:nth-of-type(3){
  16.             background-color: violet;
  17.         } */
  18.         /* 选择所有元素 */
  19.         /* ul li:nth-of-type(1n){
  20.             background-color: violet;
  21.         }  */
  23.         /* 如果只是为了全选，这样做没意义，还不如标签选择器来得直接，但是一旦带上偏移量就完全不同了 */
  24.         /* ul li:nth-of-type(1n+3) {
  25.             background-color: violet;
  26.         } */
  27.         /* 1乘以任何数都等于自己，所以省去1 */
  28.         /* ul li:nth-of-type(n+3) {
  29.             background-color: violet;
  30.         } */
  31.         /* ul li:nth-of-type(n+8) {
  32.             background-color: violet;
  33.         } */
  34.         /* ---------------------------------------------------------------------- */
  35.         /* 2. 反向获取任意位置的元素：nth-last-of-type(an+b) */
  36.         /* ul li:nth-last-of-type(-n+3) {
  37.             background-color: violet;
  38.         } */
  39.         /* 我只选择倒数第3个，直接命中 */
  40.         /* ul li:nth-last-of-type(3) {
  41.             background-color: violet;
  42.         } */
  44.         /* ---------------------------------------------------------------------- */
  45.         /* 3.选择所有索引为偶数的子元素，2，4，6，8... */
  46.         /* ul li:nth-of-type(2n) {
  47.             background-color: violet;
  48.         } */
  49.         /* 选择所有索引为奇数的子元素，1，3，5，7... */
  50.         /* ul li:nth-of-type(2n-1) {
  51.             background-color: violet;
  52.         } */
  53.         /* ul li:nth-of-type(2n+1) {
  54.             background-color: violet;
  55.         } */
  56.         /* 偶数行：even */
  57.         /* ul li:nth-of-type(even) {
  58.             background-color: violet;
  59.         } */
  60.         /* 奇数行：odd */
  61.         /* ul li:nth-of-type(odd) {
  62.             background-color: violet;
  63.         } */
  65.         /* ---------------------------------------------------------------------- */
  66.         /* 3. 选择第一个子元素: :first-of-type */
  67.         /* :nth-of-type(1) 的语法糖 :first-of-type */
  68.         /* ul li:first-of-type {
  69.             background-color: violet;
  70.         } */
  71.         /* 4. 选择最后一个元素: :last-of-type */
  72.         /* :nth-last-of-type(1) 的语法糖 :last-of-type */
  73.         /* ul li:last-of-type {
  74.             background-color: violet;
  75.         } */
  76.         /* :nth-of-type(an+b)这是最核心的一个选择器，其它的相关选择器都是它的语法糖 */
  77.         /* :nth-of-type(),:first-of-type,:last-of-type,这些都是快捷方式 */
  78.         /* ----------------------------------------------------------------------- */
  79.         /* ul:last-of-type li:last-of-type {
  80.             background-color: violet;
  81.         } */
  82.         /* 如果只想匹配父元素中唯一子元素，使用 :only-of-type就可快速实现 */
  83.         ul li:only-of-type {
  84.             background-color: violet;
  85.         }
  86.     </style>
  87. </head>
  88. <body>
  89.     <ul>
  90.         <li>item1</li>
  91.         <li>item2</li>
  92.         <li>item3</li>
  93.         <li>item4</li>
  94.         <li>item5</li>
  95.         <li>item6</li>
  96.         <li>item7</li>
  97.         <li>item8</li>
  98.         <li>item9</li>
  99.         <li>item10</li>
  100.     </ul>
  101.     <ul>
  102.         <li>我是个程序员</li>
  103.     </ul>
  104. </body>
  105. </html>

总结：

css引入方式

  • 内部样式：仅对当前文档的元素有效，使用style标签
  • 外部样式：适用于所有引入了这个css样式的html文档,使用link标签
  • 行内样式：仅适用于当前的页面中指定的元素，使用style属性

选择器

简单选择器

  • 标签选择器 ( li {} )
  • 类选择器 ( li[class=”on”] {} 简化 .on {})
  • id选择器（ li[id=”foo1”]{} 简化 #foo1 {}）

上下文选择器

  • 后代选择器 (只要后代有，无论深度)
  • 子元素选择器 (仅父子层级)
  • 同级相邻选择器 (仅选中与之相邻的第一个兄弟元素)
  • 同级后面所有选择器 (选中与之相邻的后面所有兄弟元素)

伪类选择器

  • an+b: an步量，b是偏移量(第几个开始)，n = （0，1，2，3…）
  • 匹配任意位置的元素: ：nth-of-type(an+b)
  • 反向获取任意位置的元素: ：nth-last-of-type(an+b)
  • 选择第一个子元素: :first-of-type
  • 选择最后一个元素: :last-of-type
  • 偶数行：:nth-of-type(even)
  • 奇数行：:nth-of-type(odd)
  • 如果只想匹配父元素中唯一子元素：:only-of-type
  • 最核心的一个伪类选择器：:nth-of-type(an+b)这是最核心的一个选择器，其它的相关选择器都是它的语法糖
上一条：grid布局属性介绍下一条：酱茄pro小程序发布直播和地理位置功能（WordPress小程序）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多