CSS中常用的样式

最新推荐文章于 2025-05-13 06:22:21 发布

Shuo Zhang

最新推荐文章于 2025-05-13 06:22:21 发布

阅读量266

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/NSSWTT/article/details/104321097

HTML 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍CSS中的常用属性，包括背景颜色、宽度、高度等布局属性，以及文字颜色、字体大小、对齐方式等文本样式属性。通过实例展示了如何使用这些属性进行网页布局和美化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. 常用的css属性
Background-color: 背景颜色。快捷方式： bc+tab。
颜色的给值方式：
a.颜色单词。比如：red，yellow，blue等等。
b.十六进制颜色值。和UI设计师配合的时候。比如：#00000, #FFFFFF。
c.三原色RGB。R：red红，G：green绿，B：blue蓝。取值范围：0~255。 Rgb(值1，值2，值3)
d.Rgba。R：red，G：green，B：blue，A：alpha透明度。取值范围:0~1，可以取中间的小数，0.1,0.2。取0是全透，取1是不透。
Width：宽度。单位：px。快捷方式： w值+tab。
Height：高度。单位：px。快捷方式： h值+tab。

二. 和文字相关的css属性
Color：文字颜色。取值方式可以有4种。
Font-size: 字体大小。单位：px。默认字体大小是16px，字体大小最小可以设置为12px。
Font-weight:；给值方式1：可以给100~900的值方式2：bold，bolder。
Text-align: 文本水平对齐方式。 Left左对齐，right右对齐，center居中对齐。
Font-family: 设置文字字体。比如：kait楷体，simhei黑体,simsun宋体。
Font-family: 值1，值2，值3….;
Text-indent: 首行缩进，单位：px。 Em当前文字大小的倍数，2em，就是当前文字大小的2倍。
Text-decoration: 文本装饰器。 Underline下划线，overline上划线,line-througn中划线，none去掉装饰。
Line-height: 设置文本的行高。如果标签元素内只有一行文本，可以通过设置line-height：元素高度（height）;来实现一行文字垂直居中的效果。
Letter-spacing: 单位：px。设置每个字或者每个字母之间的间距。
Word-spacing: 单位：px。设置单词之间的间距，注意：单词与单词之间通过空格间隔。

举个栗子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用的css样式</title>
		<style type="text/css">
			.example{
				/*常用的样式*/
				/*1.背景颜色: background-color*/
				background-color: yellow;
				/*2.宽度  width 快捷方式：w值+tab*/
				width: 500px;
				/*3.高度 height  快捷方式：h值+tab*/
				height:200px;
				
				/*文本样式*/
				/*1.文字颜色： color*/
				color: red;
				/*2.文字大小*/
				font-size: 30px;
				/*3.文字粗细*/
				font-weight: bold;
				/*4.文字的水平对齐方式*/
				text-align: left;
				/*5.文字的字体样式*/
				font-family: kaiti;
				/*6.文本缩进 2*30px 字体大小的2倍*/
				text-indent: 2em;
				/*7.文本装饰*/
				text-decoration: underline;
				/*8.文字行高*/
				line-height: 60px;
				/*9.设置字母的间距*/
				letter-spacing: 20px;
				/*10.设置单词之间的间距*/
				word-spacing: 100px;
			}
		</style>
	</head>
	<body>
		<p class="example">优秀的人总是不约而的走在一起</p>
	</body>
</html>

栗子图示：