CSS学习2

乌鸦不像写字台

已于 2024-08-30 15:43:40 修改

阅读量500

点赞数 6

分类专栏： css学习文章标签： css 学习前端

于 2024-08-29 20:01:49 首次发布

本文链接：https://blog.csdn.net/qq_54641174/article/details/141686739

版权

css学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS外观属性

一、文本颜色
二、行间距
三、对齐方式
四、首行缩进
五、字间距
六、单词间距
七、颜色半透明
八、文字阴影

一、文本颜色

1. 英文描述

<html>
	<head>
		<title>颜色</title>
		<style>
			.red {
				color: red; /*red green blue pink*/
				}
		</style>
	</head>
	<body>
		<ol>
			<li class="red"></li>
		</ol>
	</body>
</html>

2. 十六进制

重点记住这种！

<html>
	<head>
		<title>颜色</title>
		<style>
			.red {
				color: red; /*red green blue pink*/
				}
			li:first-child {
				color: #FF6600;
				}
		</style>
	</head>
	<body>
		<ol>
			<li >1</li>
			<li class="red">2</li>
		</ol>
	</body>
</html>

3. RGB表示法

<html>
	<head>
		<title>颜色</title>
		<style>
			.red {
				color: red; /*red green blue pink*/
				}
			li:first-child {
				color: #FF6600;
				}
			#rgb {
				color: rgb(255,0,0);
				}
		</style>
	</head>
	<body>
		<ol>
			<li >1</li>
			<li class="red">2</li>
			<li id="rgb">3</li>
		</ol>
	</body>
</html>

二、行间距

line-height用于设置行间距，即行高。属性单位有三种，px，相对值ex，百分比%。

<html>
	<head>
		<title></title>
		<style>
			p {
				line-height: 25px;
				}
		</style>
	</head>
	<body>
		<p>
			########
		</p>
	</body>
</html>

三、对齐方式

text-align设置水平对齐方式，常见的有三种，left，center，right。

<html>
	<head>
		<title></title>
		<style>
			h3 {
				text-align: center;
				}
		</style>
	</head>
	<body>
		<h3>
			########
		</h3>
	</body>
</html>

四、首行缩进

text-indent设置首行缩进，1em为一个字的宽度。

<html>
	<head>
		<title></title>
		<style>
			p {
				line-height: 25px;
				text-indent: 2em;
				}
		</style>
	</head>
	<body>
		<p>
			########
		</p>
	</body>
</html>

五、字间距

letter-spacing:2px;

六、单词间距

针对英文，中文无效。
word-spacing:10px;

以下的内容是CSS3新增的属性。

七、颜色半透明

color:rgb(0,0,0,a) a是alpha透明的意思，取值在0~1之间。

<html>
	<head>
		<title></title>
		<style>
			p {
				color: rgb(0,0,0,0.5);
				}
		</style>
	</head>
	<body>
		<p>
			########
		</p>
	</body>
</html>

八、文字阴影

text-shadow:水平位置垂直位置模糊距离颜色;
水平位置和垂直位置不可以省略，其余两个可以省略。
水平位置设置水平左右；
垂直位置设置垂直上下；
模糊距离设置阴影虚实，越大越虚；
颜色设置影子颜色。

<html>
	<head>
		<title></title>
		<style>
			p {
				text-shadow: 1px 2px 3px rgb(0,0,0,0.5);
				
				}
		</style>
	</head>
	<body>
		<p>
			########
		</p>
	</body>
</html>