admin管理员组

文章数量:1794759

HTML 样式

HTML 样式

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 文件。

    <link> 标签指定链接到 style.css 的文件，style.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

    版权声明：本文标题：HTML 样式 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971791a123969.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。