CSS 常用样式(分享)

简介

CSS (Cascading Style Sheets) 层叠样式表，用于美化网页的外观，是前端开发的必备技术。本文将会分享一些常用的 CSS 样式和用法，帮助读者更好地掌握 CSS 技能。

文本样式

文本颜色

color: red; /* 文本颜色为红色 */

文本大小

font-size: 16px; /* 文本大小为 16px */

文本加粗

font-weight: bold; /* 文本加粗 */

文本斜体

font-style: italic; /* 文本斜体 */

文本下划线

text-decoration: underline; /* 文本下划线 */

背景样式

背景颜色

background-color: blue; /* 背景颜色为蓝色 */

背景图片

background-image: url("bg.png"); /* 设置背景图片 */

边框样式

边框宽度

border-width: 1px; /* 边框宽度为 1px */

边框样式

border-style: solid; /* 边框样式为实线 */

边框颜色

border-color: black; /* 边框颜色为黑色 */

示例

示例一

在本示例中，我们将创建一个列表，应用了不同的文本样式。

<ul>
  <li style="color: red;">红色字体</li>
  <li style="font-size: 20px;">20px 字号</li>
  <li style="font-weight: bold;">加粗字体</li>
  <li style="font-style: italic;">斜体字体</li>
  <li style="text-decoration: underline;">带下划线</li>
</ul>

示例二

在本示例中，我们将创建一个带有背景图片的 div。

<div style="background-image: url('bg.png'); width: 500px; height: 250px;">
  <h1>这是一个漂亮的背景图</h1>
</div>

结论

通过学习本文，你可以更好地了解常用的 CSS 样式和用法，提升网页设计能力。除了文本、背景、边框等常用样式之外，还有很多其他 CSS 属性可供掌握。