css常用样式

最新推荐文章于 2025-11-08 20:20:04 发布

原创最新推荐文章于 2025-11-08 20:20:04 发布 · 181 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

在html设计中，css扮演着很重要的角色，它不仅可以美化网页，还提高用户体验，使得网站更加吸睛，下面就将介绍一些css中最常用的样式。

一.字体属性

字体属性是css中十分基础且重要的，他们改变文本的外观，让文本更加美观，其中包括

字体类型 ( font-family )：定义了文本的类型，例如，可以设置为 "Arial" 或 "宋体" 等

字体大小（font-size）：用于调整文字的大小，常见的有px （像素）、 em （相对于父元素的字体大小）等
字体粗细 ( font-weight )：可以设置为 normal 、 bold 或数字（如 400 代表正常， 700 代表加粗）
字体风格 ( font-style )：可以设置为 normal 、 italic （斜体）或 oblique （倾斜）

二. 文本属性

文本属性可以让文本看起来更加生动和具有表现力。常见的文本属性包括：

颜色 ( color )：用于设置文本的颜色，可以通过颜色名称、十六进制值或RGB值等方式指定

水平对齐 ( text-align )：可以设置文本的对齐方式，如 left （左对齐）、 center （居中）或 right （右对齐）
修饰 ( text-decoration )：用于给文本添加下划线、删除线等效果，例如 underline 、 line-through
缩进 ( text-indent )：设置段落首行的缩进量
行高 ( line-height )：用于调整行间距，使文本更加易于阅读。

以下是上述的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css常用样式</title>
</head>
<body>
    <p style="font-family: 宋体;">我是宋体</p>
    <p style="font-size: 10px;">我是10像素大的字体</p>
    <p style="font-weight: bold;">我是粗字体</p>
    <p style="font-style: italic;">我是斜体</p>
    <p style="color: red ;">我是红色的字体</p>
    <p style="text-align: center;">我是居中的字体</p>
    <p style="text-decoration: underline;">我是增加下划线的字体</p>

运行结果如下