1fy07h 发表于 2024-6-30 08:08:55

CSS 三种样式


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本节<span style="color: black;">咱们</span>要学习一下 CSS 样式的几种形式，在<span style="color: black;">实质</span>应用中向 HTML 中引入 CSS 样式的<span style="color: black;">办法</span>有三种，分别是行内样式、内部样式、<span style="color: black;">外边</span>样式。<span style="color: black;">咱们</span>会依次学习这三种方式的优缺点以及应用场景，本节<span style="color: black;">咱们</span>先来讲一下行内样式。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">什么是行内样式</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">行内样式，其实从它的名字就<span style="color: black;">能够</span>看出来它的特点，<span style="color: black;">便是</span>直接在 HTML 标签中<span style="color: black;">运用</span> style 属性设置 CSS 样式。例如像下面<span style="color: black;">这般</span>的：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;p style="font-size: 18px;"&gt;行内样式&lt;/p&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">HTML 中的 style 属性<span style="color: black;">供给</span>了一种改变所有 HTML 元素样式的<span style="color: black;">经过</span><span style="color: black;">办法</span>，语法格式如下所示：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;标签 style="样式声明1;样式声明2;样式声明3"&gt;&lt;/标签&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">要记得用在<span style="color: black;">每一个</span>样式声明之间<span style="color: black;">运用</span>分号 ; 分隔哟，否则样式会失效的。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">示例：</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如下面这段代码，<span style="color: black;">经过</span> CSS 行内样式，将<span style="color: black;">第1</span>个段落中的字体设置<span style="color: black;">成为了</span> 20px，颜色为红色，加粗<span style="color: black;">表示</span>。第二个段落中的字体<span style="color: black;">体积</span>设置为 16px，颜色为绿色，倾斜<span style="color: black;">表示</span>：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!DOCTYPE&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"utf-8"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>CSS学习(9xkd.com)<span style="color: black;">&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">p</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"font-size: 20px;color: red;font-weight: bold;"</span><span style="color: black;">&gt;</span>侠课岛欢迎你！<span style="color: black;">&lt;/</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">p</span> <span style="color: black;">style</span><span style="color: black;">=</span><span style="color: black;">"font-size: 16px;color: green;font-style: italic;"</span><span style="color: black;">&gt;</span>侠课岛欢迎你！<span style="color: black;">&lt;/</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在浏览器中演示效果：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-f4d83e9487368b23e38d3ea2355a7a91_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">什么是内嵌样式</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内嵌样式<span style="color: black;">便是</span>将 CSS 代码写在 HTML 页面中的 &lt;head&gt; 标签中的 &lt;style&gt; 标签内。<span style="color: black;">由于</span>它与 HTML 内容<span style="color: black;">位置于</span>同一个文件中，<span style="color: black;">因此</span>叫做内嵌样式表。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">示例：</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如下面这个例子<span style="color: black;">便是</span><span style="color: black;">运用</span>了内嵌样式：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!DOCTYPE&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">meta</span> <span style="color: black;">charset</span><span style="color: black;">=</span><span style="color: black;">"utf-8"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>CSS学习(9xkd.com)<span style="color: black;">&lt;/</span><span style="color: black;">title</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">h2</span><span style="color: black;">{</span>
      <span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">lightsalmon</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">p</span><span style="color: black;">{</span>
      <span style="color: black;">color</span><span style="color: black;">:</span><span style="color: black;">limegreen</span> <span style="color: black;">;</span>
      <span style="color: black;">font-size</span><span style="color: black;">:</span> <span style="color: black;">18</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">line-height</span><span style="color: black;">:</span> <span style="color: black;">20</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">span</span><span style="color: black;">{</span>
      <span style="color: black;">color</span><span style="color: black;">:</span> <span style="color: black;">mediumpurple</span><span style="color: black;">;</span>
      <span style="color: black;">font-weight</span><span style="color: black;">:</span> <span style="color: black;">bold</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">head</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">h2</span><span style="color: black;">&gt;</span>《木兰花令 拟古决绝词》<span style="color: black;">&lt;/</span><span style="color: black;">h2</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>人生若只如初见，何事秋风悲画扇<span style="color: black;">&lt;/</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>等闲变却故人心，却道故人心易变。<span style="color: black;">&lt;/</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>骊山语罢清宵半，泪雨零铃终不怨。<span style="color: black;">&lt;/</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>何如薄幸锦衣郎，<span style="color: black;">&lt;</span><span style="color: black;">span</span><span style="color: black;">&gt;</span>比翼连枝当日愿。<span style="color: black;">&lt;/</span><span style="color: black;">span</span><span style="color: black;">&gt;&lt;/</span><span style="color: black;">p</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">body</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">html</span><span style="color: black;">&gt;</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在浏览器中的演示效果：</p>




流星的美 发表于 2024-8-30 03:18:24

楼主发的这篇帖子，我觉得非常有道理。

nqkk58 发表于 2024-10-17 06:11:41

谷歌网站排名优化 http://www.fok120.com/

nykek5i 发表于 2024-10-22 03:28:29

软文发布论坛开幕式圆满成功。 http://www.fok120.com

wrjc1hod 发表于 2024-10-29 00:19:23

同意、说得对、没错、我也是这么想的等。

1fy07h 发表于 2024-10-30 11:33:26

期待你更多的精彩评论，一起交流学习。
页: [1]
查看完整版本: CSS 三种样式