CSS学习

马丽娜 發表於 2023-12-9 20:43:00

学习CSS 
 
一、概述
 
CSS（层叠样式表）是一种用于描述HTML（或XML和SVG等其他标记语言）文档样式的样式表语言。它被广泛用于网页和用户界面的设计和布局。通过使用CSS，开发人员可以分离内容和样式，使网页更易于维护，提高用户体验。
 
二、学习资源
 
W3Schools、菜鸟教程 
三、核心概念
 
选择器：选择器是用于选择你想要样式化的HTML元素的模式。它们可以包括元素名称、类、ID、属性、属性值等。例如，在以下的HTML代码中：
 
html
Hello, world!
可以使用类选择器 .highlight 来样式化这个段落：
 
css
.highlight
{  
  color: red; 

}
属性和值：属性是设置的样式属性，例如字体、颜色、边距、背景等。值为属性设置的具体数值。例如，可以设置color属性为red来改变文本颜色：
 
css
color: red;
声明块：声明块包含选择器、属性和值，以及一个分号。例如：selector { property: value; }
 
层叠：CSS中的层叠是指多个样式可以应用于同一个元素，但它们之间会有优先级。优先级高的样式会覆盖优先级低的样式。可以通过!important规则来强制一个样式具有最高优先级：
 
css
p {  
  color: blue !important;  
}
单位：CSS中的单位可以是像素（px）、百分比（%）、em、rem等。它们用于定义值的大小。例如，可以使用px来设置一个元素的宽度为100像素：
 
css
width:
100px;
布局：CSS布局涉及到的概念包括盒模型、定位（相对、绝对、固定和粘性定位）、浮动和Flexbox等。盒模型是CSS布局的基础，每个元素都被视为一个盒子，这个盒子包含了该元素的内容，以及可能存在的内边距和外边距。Flexbox是一个用于创建复杂布局的布局模型，允许在不同屏幕尺寸和设备上提供灵活的布局解决方案。
 
响应式设计（Responsive Design）：响应式设计是指网页能够自适应不同大小的屏幕和设备。这通常通过媒体查询、弹性布局和流式布局等技术实现。例如，可以使用媒体查询来改变不同屏幕尺寸下的布局：
 
css
@media
screen and (max-width: 600px) {  
  body { 

    background-color: lightblue;  
  }  
}
在屏幕宽度小于600像素时，背景颜色将变为浅蓝色。
四、如何更好地使用
<p style="border: 0; margin: 0; padding: 0; line-height: 2em; overflow-wrap: break-word; word-break: break-all; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgba(51, 51, 51, 1)">CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
<p style="border: 0; margin: 0; padding: 0; line-height: 2em; overflow-wrap: break-word; word-break: break-all; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgba(51, 51, 51, 1)">CSS 可以通过以下方式添加到HTML中:
<ul style="border: 0; margin-top: 1em; margin-right: 0; margin-bottom: 1em; padding: 0; line-height: 16.8px; list-style-type: none; color: rgba(51, 51, 51, 1); font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; font-size: 12px">
<li style="border: 0; margin: 0 0 1em 1em; padding: 0 0 0 1.5em; line-height: 1.5em; font-size: 14px; word-break: break-all; background-image: url("./assets/img/bullet.png"); background-repeat: no-repeat; background-position: 0 0.5em">内联样式- 在HTML元素中使用"style" 属性</li>
<li style="border: 0; margin: 0 0 1em 1em; padding: 0 0 0 1.5em; line-height: 1.5em; font-size: 14px; word-break: break-all; background-image: url("./assets/img/bullet.png"); background-repeat: no-repeat; background-position: 0 0.5em">内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS</li>
<li style="border: 0; margin: 0 0 1em 1em; padding: 0 0 0 1.5em; line-height: 1.5em; font-size: 14px; word-break: break-all; background-image: url("./assets/img/bullet.png"); background-repeat: no-repeat; background-position: 0 0.5em">外部引用 - 使用外部 CSS 文件</li>

</ul>
<p style="border: 0; margin: 0; padding: 0; line-height: 2em; overflow-wrap: break-word; word-break: break-all; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgba(51, 51, 51, 1)">最好的方式是通过外部引用CSS文件.
<h2 style="border: 0; margin: 2px 0; padding: 0; font-size: 1.8em; line-height: 1.8em; color: rgba(51, 51, 51, 1); font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif">内部样式表</h2>
<p style="border: 0; margin: 0; padding: 0; line-height: 2em; overflow-wrap: break-word; word-break: break-all; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgba(51, 51, 51, 1)">当单个文件需要特别样式时，就可以使用内部样式表。可以在<head> 部分通过 <style>标签定义内部样式表:
<pre class="prettyprint prettyprinted"><head><styletype="text/css">
body {background-color:yellow;}
p {color:blue;}</style></head></pre>
<p style="border: 0; margin: 0; padding: 0; line-height: 2em; overflow-wrap: break-word; word-break: break-all; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgba(51, 51, 51, 1)"> 
<hr style="background-color: rgba(212, 212, 212, 1); color: rgba(212, 212, 212, 1); height: 1px; border: 0; clear: both; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; font-size: 12px">
<h2 style="border: 0; margin: 2px 0; padding: 0; font-size: 1.8em; line-height: 1.8em; color: rgba(51, 51, 51, 1); font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif">外部样式表</h2>
<p style="border: 0; margin: 0; padding: 0; line-height: 2em; overflow-wrap: break-word; word-break: break-all; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", Arial, sans-serif; color: rgba(51, 51, 51, 1)">当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<pre class="prettyprint prettyprinted"><head><linkrel="stylesheet"type="text/css"href="mystyle.css"></head></pre>
<p style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin: 0; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)">学习CSS：从入门到精通
<p style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)">一、概述
<p style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)">CSS（层叠样式表）是一种用于描述HTML（或XML和SVG等其他标记语言）文档样式的样式表语言。它被广泛用于网页和用户界面的设计和布局。通过使用CSS，开发人员可以分离内容和样式，使网页更易于维护，提高用户体验。
<p style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)">二、学习资源
<ol style="box-sizing: border-box; padding: 0 0 0 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-right: 0; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)">
<li style="box-sizing: border-box; padding-top: 0; padding-right: 0; padding-bottom: 0; -webkit-font-smoothing: antialiased; list-style: inherit; font-family: PingFang-SC-Regular; margin-top: 0; margin-right: 0; margin-bottom: 0; line-height: 1.75; position: relative">W3Schools：这是一个非常全面的在线学习资源，提供了关于CSS的入门教程和参考手册。</li>
<li style="box-sizing: border-box; padding-top: 0; padding-right: 0; padding-bottom: 0; -webkit-font-smoothing: antialiased; list-style: inherit; font-family: PingFang-SC-Regular; margin-top: 6px; margin-right: 0; margin-bottom: 0; line-height: 1.75; position: relative">MDN Web Docs：这是一个由Mozilla维护的开发者资源，提供了关于各种Web技术的详细文档，包括CSS。</li>
<li style="box-sizing: border-box; padding-top: 0; padding-right: 0; padding-bottom: 0; -webkit-font-smoothing: antialiased; list-style: inherit; font-family: PingFang-SC-Regular; margin-top: 6px; margin-right: 0; margin-bottom: 0; line-height: 1.75; position: relative">CSS Tricks：这是一个由Chris Coyier维护的博客，提供了大量的CSS技巧和教程。</li>
</ol>
<p style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)">三、核心概念
<ol style="box-sizing: border-box; padding: 0 0 0 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-right: 0; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)">
<li style="box-sizing: border-box; padding-top: 0; padding-right: 0; padding-bottom: 0; -webkit-font-smoothing: antialiased; list-style: inherit; font-family: PingFang-SC-Regular; margin-top: 0; margin-right: 0; margin-bottom: 0; line-height: 1.75; position: relative">
选择器（Selectors）：选择器是用于选择你想要样式化的HTML元素的模式。它们可以包括元素名称、类、ID、属性、属性值等。例如，在以下的HTML代码中：
</li>
</ol>
<div class="code-header" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0; align-items: center; background: rgba(227, 232, 246, 1); border-radius: 7px 7px 0 0; display: flex; height: 34px"><span class="code-lang" style="box-sizing: border-box; padding: 0 0 0 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Semibold; margin: 0; color: rgba(18, 6, 73, 1); flex: 1 0 auto; font-size: 16px; font-weight: 600; letter-spacing: 0; text-align: justify">html<span class="code-copy" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Regular; margin: 0; align-items: center; color: rgba(120, 134, 164, 1); display: flex; font-size: 13px; letter-spacing: 0; line-height: 14px; text-align: justify; user-select: none"><span class="code-copy-text" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0 20px 0 7px">复制代码</div>
<div class="code-wrapper" style="box-sizing: border-box; padding: 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; background-color: rgba(238, 240, 247, 1); line-height: 24px; overflow: auto">
<table class="hljs hljs-ln" style="padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin-right: 0; margin-left: 0; background: rgba(0, 0, 0, 0); color: rgba(84, 84, 84, 1); font-size: 15px; line-height: 24px">
<tbody style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="1"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="1"><p class="highlight">Hello, world!</p></td>
</tr>
</tbody>
</table>
</div>
<p style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)">我们可以使用类选择器 <code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px">.highlight</code> 来样式化这个段落：
<div class="code-header" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0; align-items: center; background: rgba(227, 232, 246, 1); border-radius: 7px 7px 0 0; display: flex; height: 34px"><span class="code-lang" style="box-sizing: border-box; padding: 0 0 0 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Semibold; margin: 0; color: rgba(18, 6, 73, 1); flex: 1 0 auto; font-size: 16px; font-weight: 600; letter-spacing: 0; text-align: justify">css<span class="code-copy" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Regular; margin: 0; align-items: center; color: rgba(120, 134, 164, 1); display: flex; font-size: 13px; letter-spacing: 0; line-height: 14px; text-align: justify; user-select: none"><span class="code-copy-text" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0 20px 0 7px">复制代码</div>
<div class="code-wrapper" style="box-sizing: border-box; padding: 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; background-color: rgba(238, 240, 247, 1); line-height: 24px; overflow: auto">
<table class="hljs hljs-ln" style="padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin-right: 0; margin-left: 0; background: rgba(0, 0, 0, 0); color: rgba(84, 84, 84, 1); font-size: 15px; line-height: 24px">
<tbody style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="1"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="1"><span class="hljs-selector-class" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; color: rgba(217, 30, 24, 1); font-size: 15px; line-height: 24px">.highlight {</td>
</tr>
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="2"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="2">color: red;</td>
</tr>
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="3"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="3">}</td>
</tr>
</tbody>
</table>
</div>
<ol style="box-sizing: border-box; padding: 0 0 0 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-right: 0; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)" start="2">
<li style="box-sizing: border-box; padding-top: 0; padding-right: 0; padding-bottom: 0; -webkit-font-smoothing: antialiased; list-style: inherit; font-family: PingFang-SC-Regular; margin-top: 0; margin-right: 0; margin-bottom: 0; line-height: 1.75; position: relative">
属性（Properties）和值（Values）：属性是你想要设置的样式属性，例如字体、颜色、边距、背景等。值是你为属性设置的具体数值。例如，你可以设置<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px">color</code>属性为<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px">red</code>来改变文本颜色：
</li>
</ol>
<div class="code-header" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0; align-items: center; background: rgba(227, 232, 246, 1); border-radius: 7px 7px 0 0; display: flex; height: 34px"><span class="code-lang" style="box-sizing: border-box; padding: 0 0 0 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Semibold; margin: 0; color: rgba(18, 6, 73, 1); flex: 1 0 auto; font-size: 16px; font-weight: 600; letter-spacing: 0; text-align: justify">css<span class="code-copy" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Regular; margin: 0; align-items: center; color: rgba(120, 134, 164, 1); display: flex; font-size: 13px; letter-spacing: 0; line-height: 14px; text-align: justify; user-select: none"><span class="code-copy-text" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0 20px 0 7px">复制代码</div>
<div class="code-wrapper" style="box-sizing: border-box; padding: 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; background-color: rgba(238, 240, 247, 1); line-height: 24px; overflow: auto">
<table class="hljs hljs-ln" style="padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin-right: 0; margin-left: 0; background: rgba(0, 0, 0, 0); color: rgba(84, 84, 84, 1); font-size: 15px; line-height: 24px">
<tbody style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="1"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="1">color: red;</td>
</tr>
</tbody>
</table>
</div>
<ol style="box-sizing: border-box; padding: 0 0 0 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-right: 0; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)" start="3">
<li style="box-sizing: border-box; padding-top: 0; padding-right: 0; padding-bottom: 0; -webkit-font-smoothing: antialiased; list-style: inherit; font-family: PingFang-SC-Regular; margin-top: 0; margin-right: 0; margin-bottom: 0; line-height: 1.75; position: relative">
声明块（Declaration Block）：声明块包含选择器、属性和值，以及一个分号。例如：<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px">selector { property: value; }</code>
</li>
<li style="box-sizing: border-box; padding-top: 0; padding-right: 0; padding-bottom: 0; -webkit-font-smoothing: antialiased; list-style: inherit; font-family: PingFang-SC-Regular; margin-top: 6px; margin-right: 0; margin-bottom: 0; line-height: 1.75; position: relative">
层叠（Cascading）：CSS中的层叠是指多个样式可以应用于同一个元素，但它们之间会有优先级。优先级高的样式会覆盖优先级低的样式。你可以通过<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px">!important</code>规则来强制一个样式具有最高优先级：
</li>
</ol>
<div class="code-header" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0; align-items: center; background: rgba(227, 232, 246, 1); border-radius: 7px 7px 0 0; display: flex; height: 34px"><span class="code-lang" style="box-sizing: border-box; padding: 0 0 0 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Semibold; margin: 0; color: rgba(18, 6, 73, 1); flex: 1 0 auto; font-size: 16px; font-weight: 600; letter-spacing: 0; text-align: justify">css<span class="code-copy" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Regular; margin: 0; align-items: center; color: rgba(120, 134, 164, 1); display: flex; font-size: 13px; letter-spacing: 0; line-height: 14px; text-align: justify; user-select: none"><span class="code-copy-text" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0 20px 0 7px">复制代码</div>
<div class="code-wrapper" style="box-sizing: border-box; padding: 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; background-color: rgba(238, 240, 247, 1); line-height: 24px; overflow: auto">
<table class="hljs hljs-ln" style="padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin-right: 0; margin-left: 0; background: rgba(0, 0, 0, 0); color: rgba(84, 84, 84, 1); font-size: 15px; line-height: 24px">
<tbody style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="1"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="1">p {</td>
</tr>
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="2"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="2">color: blue !important;</td>
</tr>
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="3"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="3">}</td>
</tr>
</tbody>
</table>
</div>
<ol style="box-sizing: border-box; padding: 0 0 0 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-right: 0; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)" start="5">
<li style="box-sizing: border-box; padding-top: 0; padding-right: 0; padding-bottom: 0; -webkit-font-smoothing: antialiased; list-style: inherit; font-family: PingFang-SC-Regular; margin-top: 0; margin-right: 0; margin-bottom: 0; line-height: 1.75; position: relative">
单位（Units）：CSS中的单位可以是像素（px）、百分比（%）、em、rem等。它们用于定义值的大小。例如，你可以使用<code class=" inline" style="box-sizing: border-box; padding: 1px 4px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0 2px; font-size: 12.75px; tab-size: 4; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px">px</code>来设置一个元素的宽度为100像素：
</li>
</ol>
<div class="code-header" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0; align-items: center; background: rgba(227, 232, 246, 1); border-radius: 7px 7px 0 0; display: flex; height: 34px"><span class="code-lang" style="box-sizing: border-box; padding: 0 0 0 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Semibold; margin: 0; color: rgba(18, 6, 73, 1); flex: 1 0 auto; font-size: 16px; font-weight: 600; letter-spacing: 0; text-align: justify">css<span class="code-copy" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Regular; margin: 0; align-items: center; color: rgba(120, 134, 164, 1); display: flex; font-size: 13px; letter-spacing: 0; line-height: 14px; text-align: justify; user-select: none"><span class="code-copy-text" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0 20px 0 7px">复制代码</div>
<div class="code-wrapper" style="box-sizing: border-box; padding: 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; background-color: rgba(238, 240, 247, 1); line-height: 24px; overflow: auto">
<table class="hljs hljs-ln" style="padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin-right: 0; margin-left: 0; background: rgba(0, 0, 0, 0); color: rgba(84, 84, 84, 1); font-size: 15px; line-height: 24px">
<tbody style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="1"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="1">width: 100px;</td>
</tr>
</tbody>
</table>
</div>
<ol style="box-sizing: border-box; padding: 0 0 0 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-right: 0; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)" start="6">
<li style="box-sizing: border-box; padding-top: 0; padding-right: 0; padding-bottom: 0; -webkit-font-smoothing: antialiased; list-style: inherit; font-family: PingFang-SC-Regular; margin-top: 0; margin-right: 0; margin-bottom: 0; line-height: 1.75; position: relative">
布局（Layout）：CSS布局涉及到的概念包括盒模型、定位（相对、绝对、固定和粘性定位）、浮动和Flexbox等。盒模型是CSS布局的基础，每个元素都被视为一个盒子，这个盒子包含了该元素的内容，以及可能存在的内边距和外边距。Flexbox是一个用于创建复杂布局的布局模型，它允许你在不同屏幕尺寸和设备上提供灵活的布局解决方案。
</li>
<li style="box-sizing: border-box; padding-top: 0; padding-right: 0; padding-bottom: 0; -webkit-font-smoothing: antialiased; list-style: inherit; font-family: PingFang-SC-Regular; margin-top: 6px; margin-right: 0; margin-bottom: 0; line-height: 1.75; position: relative">
响应式设计（Responsive Design）：响应式设计是指网页能够自适应不同大小的屏幕和设备。这通常通过媒体查询、弹性布局和流式布局等技术实现。例如，你可以使用媒体查询来改变不同屏幕尺寸下的布局：
</li>
</ol>
<div class="code-header" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0; align-items: center; background: rgba(227, 232, 246, 1); border-radius: 7px 7px 0 0; display: flex; height: 34px"><span class="code-lang" style="box-sizing: border-box; padding: 0 0 0 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Semibold; margin: 0; color: rgba(18, 6, 73, 1); flex: 1 0 auto; font-size: 16px; font-weight: 600; letter-spacing: 0; text-align: justify">css<span class="code-copy" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: PingFangSC-Regular; margin: 0; align-items: center; color: rgba(120, 134, 164, 1); display: flex; font-size: 13px; letter-spacing: 0; line-height: 14px; text-align: justify; user-select: none"><span class="code-copy-text" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important; margin: 0 20px 0 7px">复制代码</div>
<div class="code-wrapper" style="box-sizing: border-box; padding: 14px; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; background-color: rgba(238, 240, 247, 1); line-height: 24px; overflow: auto">
<table class="hljs hljs-ln" style="padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin-right: 0; margin-left: 0; background: rgba(0, 0, 0, 0); color: rgba(84, 84, 84, 1); font-size: 15px; line-height: 24px">
<tbody style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="1"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="1">@media screen and (max-width: 600px) {</td>
</tr>
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="2"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="2">body {</td>
</tr>
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="3"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="3">background-color: lightblue;</td>
</tr>
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="4"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="4">}</td>
</tr>
<tr style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; margin: 0; line-height: 24px">
<td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px; color: rgba(190, 191, 208, 1); letter-spacing: 0; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; text-wrap: nowrap; width: 30px" data-line-number="5"> </td>
<td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: Consolas, Monaco, monospace; margin: 0; font-size: 15px; line-height: 24px" data-line-number="5">}</td>
</tr>
</tbody>
</table>
</div>
<p style="box-sizing: border-box; padding: 0; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: rgba(5, 7, 59, 1)">在屏幕宽度小于600像素时，背景颜色将变为浅蓝色。 
来源：https://www.cnblogs.com/chen-zeyang/p/17878795.html

頁: [1]

琼殿技术论坛's Archiver

CSS学习