https://llinux.cn/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/ 阿征的运维笔记 zh https://llinux.cn/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/css/ https://llinux.cn/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/css/ <h2 id="css-概述">CSS 概述<a class="td-heading-self-link" href="#css-%e6%a6%82%e8%bf%b0" aria-label="Heading self-link"></a></h2> <p>cascading style sheet，层叠样式表，控制HTML的布局和样式。</p> <h2 id="使用方式">使用方式<a class="td-heading-self-link" href="#%e4%bd%bf%e7%94%a8%e6%96%b9%e5%bc%8f" aria-label="Heading self-link"></a></h2> <p>三种使用方式，优先级从高到低依次为：内联样式、页内样式、外部样式。</p> <ol> <li> <p><strong>内联样式</strong>：内联样式是直接应用于HTML元素的样式，通过在元素的<code>style</code>属性中指定CSS样式。这种方式的优先级最高，因为它直接作用于元素本身，会覆盖其他方式定义的样式。</p> <p>例如：</p> <div class="highlight code-sample"> <div class="includecode" > <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">p</span> <span class="na">style</span><span class="o">=</span><span class="s">&#34;color: red; font-size: 16px;&#34;</span><span class="p">&gt;</span>这是内联样式的段落。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span></span></span></code></pre></div> </div> </div></li> <li> <p><strong>页内样式</strong>：页内样式是指将CSS样式直接写在HTML文件的<code>&lt;style&gt;</code>标签内，它作用于整个页面的特定部分。这种方式的优先级次于内联样式，但高于外部样式表。</p> <p>例如：</p> <div class="highlight code-sample"> <div class="includecode" > <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="nt">p</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">color</span><span class="p">:</span> <span class="kc">blue</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">font-size</span><span class="p">:</span> <span class="mi">18</span><span class="kt">px</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="p">}</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>这是页内样式的段落。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span></span></span></code></pre></div> </div> </div></li> <li> <p><strong>外部样式（常用）</strong>：外部样式是将CSS样式定义在外部的CSS文件中，然后通过<code>&lt;link&gt;</code>标签将其链接到HTML文档中。这种方式的优先级是最低的，只有当其他方式未定义某些样式时才会生效。</p> <p>例如：</p> <div class="highlight code-sample"> <div class="includecode" > <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text/css&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;styles.css&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>这是外部样式的段落。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span></span></span></code></pre></div> </div> </div></li> </ol> <p>在实际开发中，优先使用外部样式表，因为它有利于代码的组织和维护，同时也有利于提高页面加载速度和缓存利用率。</p> <h2 id="基本语法">基本语法<a class="td-heading-self-link" href="#%e5%9f%ba%e6%9c%ac%e8%af%ad%e6%b3%95" aria-label="Heading self-link"></a></h2> <ul> <li></li> </ul> <h2 id="heading">&mdash;<a class="td-heading-self-link" href="#heading" aria-label="Heading self-link"></a></h2> <p>CSS的基本语法包括选择器、属性和值的组合。以下是一些基本的语法规则：</p> <ol> <li> <p><strong>选择器（Selector）</strong>：用于选择要应用样式的HTML元素。选择器可以是元素的标签名、类名、ID等。常见的选择器有：</p> <ul> <li>标签选择器：如 <code>p</code>、<code>div</code>，选择所有该标签的元素。</li> <li>类选择器：如 <code>.class-name</code>，选择具有特定类名的元素。</li> <li>ID选择器：如 <code>#id-name</code>，选择具有特定ID的元素。</li> <li>后代选择器：如 <code>parent child</code>，选择某个元素的后代元素。</li> <li>组合选择器：将多个选择器组合在一起使用，如 <code>selector1, selector2</code>。</li> </ul> </li> <li> <p><strong>属性（Property）</strong>：指定要应用的样式属性，如字体、颜色、边框等。常见的属性有：</p> <ul> <li><code>color</code>：文本颜色。</li> <li><code>font-size</code>：字体大小。</li> <li><code>background-color</code>：背景颜色。</li> <li><code>border</code>：边框样式。</li> <li><code>margin</code>、<code>padding</code>：外边距和内边距等。</li> </ul> </li> <li> <p><strong>值（Value）</strong>：属性所对应的具体样式值。例如，<code>color: red;</code>中的值是<code>red</code>。</p> https://llinux.cn/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/html/ https://llinux.cn/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/html/ <h2 id="html-概述">HTML 概述<a class="td-heading-self-link" href="#html-%e6%a6%82%e8%bf%b0" aria-label="Heading self-link"></a></h2> <p>HTML (Hypertext Markup Language) 是一种用于创建网页的标记语言。它由一系列的元素（elements）组成，这些元素用标记来描述网页的结构。每个元素都由一对尖括号 <code>&lt; &gt;</code> 来标记，并且通常包含一个标签名和一些属性。HTML 元素通常是成对出现的，包括开始标签和结束标签，也有一些是自闭合的。</p> <p>让我们看一个简单的 HTML 示例：</p> <div class="highlight code-sample"> <div class="includecode" > <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="cp">&lt;!DOCTYPE html&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&#34;en&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;UTF-8&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>我的网页<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>欢迎来到我的网页！<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>这是一个简单的 HTML 示例。<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span></span></span></code></pre></div> </div> </div><p>这个示例中包含了 HTML 文档的基本结构：</p> <ul> <li> <p><code>&lt;!DOCTYPE html&gt;</code>: 声明 HTML 版本和文档类型。</p> </li> <li> <p><code>&lt;html&gt;</code>: HTML 文档的根元素，包含了整个 HTML 页面的内容。</p> </li> <li> <p><code>&lt;head&gt;</code>: 包含了文档的元信息，比如字符编码和标题等。</p> <ul> <li><code>&lt;meta charset=&quot;UTF-8&quot;&gt;</code>: 指定了文档使用的字符编码。</li> <li><code>&lt;title&gt;</code>: 指定了文档的标题，会显示在浏览器的标题栏中。</li> </ul> </li> <li> <p><code>&lt;body&gt;</code>: 包含了页面的主要内容。</p> </li> <li> <p><code>&lt;h1&gt;</code>: 标题元素，用于显示主要的标题。</p> </li> <li> <p><code>&lt;p&gt;</code>: 段落元素，用于显示文本段落。</p> </li> </ul> <p>HTML 还可以包含各种各样的元素，比如链接、图像、表格、列表等，以及可以用来控制页面布局和样式的元素。CSS 和 JavaScript 可以用来控制 HTML 元素的样式和行为。</p> <h2 id="html-文档结构">HTML 文档结构<a class="td-heading-self-link" href="#html-%e6%96%87%e6%a1%a3%e7%bb%93%e6%9e%84" aria-label="Heading self-link"></a></h2> <p>HTML 文档的结构通常包括以下几个主要部分：</p>