Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 210322 CSS 样式与选择器
Blogger Information
Blog 18
fans 0
comment 0
visits 11032
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
210322 CSS 样式与选择器
xyphpblog
Original
828 people have browsed it

1. CSS

CSS: Cascading Style Sheets
语法：
Selector {
  property : value;
}
例：
div {
  color: red;
}

2. 添加CSS到HTML方式

2.1 外部样式（模块化）

2.1.1 在<head>标签中使用<link>标签引入

  1. <head>
  2.     <link rel="stylesheet" href="my-style-sheet.css">
  3. </head>

2.1.2 在<head></head>标签中使用<style>和@import

  1. <head>
  2.     <style>
  3.         @import url(css/style.css);
  4.     </style>
  5. </head>

注：当页面分成多个部分如<header>,<main>,<footer>时，可以将他们写成单独的.css文件，并用@import将它们引入到一个.css文件中如index.css，最后在HTML页面中引入index.css

2.2 内部样式

在<head>标签中的<style>标签中定义样式

  1. <head>
  2.     <style>
  3.         body {
  4.             font-family: Arial, Helvetica, sans-serif;
  5.         }
  6.     </style>
  7. </head>

2.3 行内样式

在元素的style属性中定义样式

  1. <body>
  2.     <p style="color: #263238;">Smoke me a kipper, I'll be back for breakfast"</p>
  3. </body>

3.CSS 选择器

3.1 简单选择器：

  1. 标签选择器 li{}
  2. class选择器 .male{}
  3. 属性选择器 a[target]{} input[type=”text”]{}
  4. id选择器 #stu{}
  5. 群组选择 h1,h2,h3{}
  6. 通配选择 *{}

3.2 后代，子代，同级 组合选择器

  1. 后代选择器 div li{}
  2. 子代选择器 div > p{}
  3. 同级相邻选择器（之后的） li.red + li
  4. 同级所有选择器(之后的) li.red ~ li

3.3 伪类选择器

分组

  1. :first-of-type
  2. :last-of-type
  3. only-of-type
  4. :nth-of-type(n)
  5. :nth-last-of-type(2n+1)

不分组

  1. :first-child
  2. :last-child
  3. only-child
  4. :nth-child(n)
  5. :nth-last-child(2n+1)

例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Intel cpu</title>
  9.     <style>
  10.         @import url(css/index.css);
  11.     </style>
  13. </head>
  14. <body>
  16.     <ul>
  17.         <!-- U -->
  18.         <li>
  19.             <span>U</span>
  20.             <ul>
  21.                 <li>
  22.                     <span>i7</span>
  23.                     <ul>
  24.                         <li class="i7">i7-1068G7</li>
  25.                         <li class="i7">i7-1065G7</li>
  26.                     </ul>
  27.                 </li>
  28.                 <li>
  29.                     <span>i5</span>
  30.                     <ul>
  31.                         <li class="i5">i5-1035G7</li>
  32.                         <li class="i5">i5-1035G4</li>
  33.                         <li class="i5">i5-1035G1</li>
  34.                     </ul>
  35.                 </li>
  36.                 <li>
  37.                     <span>i3</span>
  38.                     <ul>
  39.                         <li class="i3">i3-1005G1</li>
  40.                     </ul>
  41.                 </li>
  42.             </ul>
  43.         </li>
  44.         <!-- Y -->
  45.         <li>
  46.             <span>Y</span>
  47.             <ul>
  48.                 <li>
  49.                     <span>i7</span>
  50.                     <ul>
  51.                         <li class="i7">i7-1060G7</li>
  52.                     </ul>
  53.                 </li>
  54.                 <li>
  55.                     <span>i5</span>
  56.                     <ul>
  57.                         <li class="i5" id="i5g7">i5-1030G7</li>
  58.                         <li class="i5" id="i5g4">i5-1030G4</li>
  59.                     </ul>
  60.                 </li>
  61.                 <li>
  62.                     <span>i3</span>
  63.                     <ul>
  64.                         <li class="i3">i3-1000G4</li>
  65.                         <li class="i3">i3-1000G1</li>
  66.                         <li id="unknown01">???</li>
  67.                         <li id="unknown02">???</li>
  68.                     </ul>
  69.                 </li>
  70.             </ul>
  71.         </li>
  72.     </ul>
  74. </body>
  75. </html>

CSS样式（分成三部分）：

  1. ustyle.css
  2. ystyle.css
  3. global.css
  4. index.css

最后效果，随便试一下，自然是很丑的。 其他伪类待练习-

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