search

博客列表 >css第一课

css第一课

深海
深海原创
2021年03月23日 14:38:36415浏览

css

第一课

样式

1.内链样式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <!-- 内部样式,仅作用于当前的html文档 -->
  9.     <style>
  10.       h1 {
  11.         color: green;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <h1>css内链样式 </h1>
  17.   </body>
  18. </html>

2.行内样式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.    <!-- 行内样式,仅适用于当前元素,优先级要高于style标签设置的内部样式 -->
  10.   <h1 style="color: red">css行内样式 </h1>
  11. </html>

3.引用样式

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="style.css" />
  8.     <!-- 引用了文件style.css样式,仅适用于当前元素,优先级要高于style标签设置的内部样式 -->
  9.     <title>Document</title>
  10.   </head>
  11.   <body>
  12.     <h1>css引用样式</h1>
  13.   </body>
  14. </html>

类

1.ID、class选择器本质上是属性选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>基本选择器</title>
  8.     <style>
  9.       li {
  10.         background-color: #000;
  11.       }
  13.       li.on {
  14.         background-color: #fff;
  15.       }
  17.       li#foo {
  18.         background-color: #fe3213;
  19.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <ul>
  25.       <li id="foo">第一行</li>
  26.       <li class="on">第二行</li>
  27.     </ul>
  28.   </body>
  29. </html>

2.上下文选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>上下文选择器</title>
  8.     <style>
  9.       /* 根据元素的位置来选择 */
  10.       /* 后代选择器 */
  11.       /* 0,0,2 */
  12.       ul li {
  13.         background-color: #000000;
  14.       }
  16.       /* 只选中子元素,忽略孙元素 */
  17.       /* 0,0,3 */
  18.       body ul li {
  19.         background-color: #f10404;
  20.       }
  22.       /* 同级相邻  可以是+号 也可以是空格*/
  23.       .start  + li {
  24.         background-color: #ffff00;
  25.       }
  26.       .start   li {
  27.         background-color: #ffff00;
  28.       }
  30.       /* 同级所有兄弟 */
  31.       .start ~ li {
  32.         background-color: #3e0cf3;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <ul>
  38.       <li>item1</li>
  39.       <li class="start">item2</li>
  40.       <li>item3</li>
  41.       <li>
  42.         item4
  43.         <ul>
  44.           <li>item4-1</li>
  45.           <li>item4-2</li>
  46.           <li>item4-3</li>
  47.         </ul>
  48.       </li>
  49.       <li>item5</li>
  50.     </ul>
  51.   </body>
  52. </html>

3.伪类 (好好消化)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>伪类</title>
  8.     <style>
  9.       /* 结构伪类: 选择子元素, 要有一个父元素做为查询起点 */
  10.       /* .list > :nth-child(3) {
  11.         background-color: violet;
  12.       } */
  13.       /* 匹配任何位置的元素
  14.       n = (0,1,2,3,4....) */
  15.       /* .list > li:nth-child(0n + 3) {
  16.         background-color: violet;
  17.       } */
  19.       /* 分组伪类结构选择器,推荐使用 */
  20.       .list > li:nth-of-type(3) {
  21.         background-color: cyan;
  22.       }
  24.       /* 选择中第一个p  */
  25.       .list > p:nth-of-type(1) {
  26.         background-color: lightgreen;
  27.       }
  29.       .list > li:nth-of-type(1) {
  30.         background-color: lightgreen;
  31.       }
  32.       /* 最后一个li  */
  33.       .list > li:nth-of-type(7) {
  34.         background-color: green;
  35.       }
  37.       /* 最后一个p  */
  38.       .list > p:nth-of-type(3) {
  39.         background-color: lightblue;
  40.       }
  42.       .list p:last-of-type {
  43.         background-color: blue;
  44.       }
  46.       .list p:first-of-type {
  47.         background-color: red;
  48.       }
  50.       /* 选择倒数第三个li  */
  51.       .list > li:nth-last-of-type(3) {
  52.         background-color: yellow;
  53.       }
  55.       ul li:only-of-type {
  56.         background-color: yellow;
  57.       }
  59.       /* 选择任何一个: :nth-of-type(n)
  60.       选择第一个: :first-of-type
  61.       选择最后一个: :last-of-type
  62.       选择倒数某一个: :nth-last-of-type()
  63.       唯一子元素的元素: :only-of-type 这里只的item11 */
  64.     </style>
  65.   </head>
  66.   <body>
  67.     <ul class="list">
  68.       <li>item1</li>
  69.       <li>item2</li>
  70.       <li>item3</li>
  71.       <li>item4</li>
  72.       <li>item5</li>
  73.       <li>item6</li>
  74.       <p>item7</p>
  75.       <p>item8</p>
  76.       <li>item9</li>
  77.       <p>item10</p>
  78.     </ul>
  80.     <ul>
  81.       <li>item11</li>
  82.     </ul>
  83.   </body>
  84. </html>
  85. `

上一条：php如何用get方式写一个简单的API接口并返回Json下一条：css基础、选择器、模块化组件
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议