Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css第一课
Blogger Information
Blog 6
fans 0
comment 0
visits 3140
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第一课
深海
Original
416 people have browsed it

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. `

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