【HTML基础-4】CSS样式详解

最新推荐文章于 2025-10-19 11:30:42 发布

原创

最新推荐文章于 2025-10-19 11:30:42 发布 · 2.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS样式

1 CSS样式概述

定义： CSS是Cascading Style Sheets的简称，中文名称为层叠样式表、级联样式表或样式表。
作用：实现内容与样式相分离，提高代码的可重用性和可维护性。
CSS样式：①元素内容的颜色color；元素内容的背景色background-color；③字体大小font-size等等。

CSS与HTML：

对比关系：HTML好比好比定义了一个文章的内容，而CSS就是定义这些内容的样式。
使用原则：尽可能使用CSS属性取代HTML属性，即提倡HTML与CSS分离。

2 CSS与HTML的三种组合方式

2.1 内联样式

形式：把样式表写在标签内部，作为标签的 style 属性的属性值出现。
适用性：当特殊的样式需要应用到个别元素时，就可以使用内联样式。
示例：

<html>
    <head>
        <meta charset="utf-8">  
    <title>
    testCSS1
    </title>
    </head>

    <body>
        <h1>格言 </h1>
    <div style="background-color:#000000;color: #ffffff;">没有对比</div>,<br/>
    <span style="color:red;font-size:30px;background-color: yellow;">就没有伤害