HTML 样式-CSS

CSS (Cascading Style Sheets) 用于渲染 html 元素标签的样式。可以用来设置元素的背景颜色、文字的颜色、字体以及其他一些高级的样式。CSS 是在 HTML 4 开始使用的，是为了更好的渲染 HTML 元素而引入的。

通常来说，在 html 中使用 css 有三种方式：

内联样式：在 HTML 元素中直接使用 "style" 属性
内部样式表：在 HTML 文档头部 <head> 区域使用 <style> 元素来包含 CSS
外部引用：使用外部 CSS 文件

内联样式

在 html 元素中直接使用 style 属性，如：

背景色属性（background-color）定义一个元素的背景颜色；

字体属性（font-family）定义字体类型；

颜色属性（color）定义文字的颜色；

字体大小属性（font-size）定义字体的大小；

文本对齐方式属性（text-align）定义文字的对其方式，常用的取值有 center-居中对齐、right-居右对齐、left-居左对齐、justify-自适应。

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。即在 <head> 部分通过 <style> 标签定义内部样式表。如：

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，我们就可以通过更改一个文件来改变整个站点的外观。使用方法为：在 html 文件的 <head> 元素中通过 <link> 标签来引入外部样式。外部样式通常为 css 文件。

/* 设置 body 部分的样式 */
body {
    background-color:rgb(242, 242, 156);
}
/* 设置段落 p 的样式 */
p {
    color:rgb(220, 72, 72);
    background-color: aqua;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
    text-align: right;
}

涉及到的 html 代码为：

<!-- <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 内联样式示例</title>
</head> -->
<!-- 设置 body 部分背景颜色为浅黄色 -->
<!--  
<body style="background-color: rgb(242, 242, 156);">
-->
    <!-- 设置段落 p 标签的样式, 背景颜色(background-color)、文字颜色(color)、
        字体大小(font-size)、对齐方式(text-align)、字体(font-family) -->
    <!-- <p style="background-color: aquamarine; color: blueviolet; 
    font-size: 40px; text-align: j; font-family: Arial;">
        这是一个设置了样式的段落
    </p> -->

    <!-- 默认 hr -->
    <!-- <hr /> -->
    <!-- 设置 hr 的样式, height-高度, border-边框, dashed-虚线 -->
    <!-- <hr style="height: 1px; border: none; border-top: 10px dashed #175a9d;" /> -->
    
<!-- </body> -->
<!-- </html> -->

<!-- <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 内部样式示例</title>
    <style type="text/css">
        /* 设置 body 部分的背景为浅黄色 */
        body {
            background-color:rgb(242, 242, 156);
        }
        /* 设置段落 p 的样式 */
        p {
            color:rgb(220, 72, 72);
            background-color: aqua;
            font-size: 20px;
            font-family: 'Times New Roman', Times, serif;
            text-align: right;
        }
    </style>
</head>
<body>
    <p>
        内部样式使用示例
    </p>
    
</body>
</html> -->


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML 外部样式示例</title>
    <link rel="stylesheet" type="text/css" href="../resource/css/style1.css">
</head>
<body>
    <p>
        内部样式使用示例
    </p>
    
</body>
</html>

文章参考自：HTML CSS | 菜鸟教程

更多推荐

HTML 样式-CSS