CSS学习小结-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS学习小结。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

css的两种使用方式：

①内嵌样式表

②导入外部样式表（实际开发常用）<link href="...." rel="stylesheet"/>

选择器：

①标签选择器：通过标签种类决定

②类选择器：class="..."

③id选择器：id="..."

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div {
				font-family: serif;
				/*字体*/
				font-style: italic;
				/*斜体*/
				text-decoration: lightblue line-through;
				/*字体装饰*/
				line-height: 10px;
				/*行高*/
				letter-spacing: normal;
				/*字符之间的距离*/
				text-indent: 2em;
				/* 缩进 */
				text-align: center;
				/* 居中 */
			}
		</style>
	</head>
	<body>
		<div>
			据介绍，ChatGPT 新增的语音功能由一个新文本到语音模型提供支持，能够仅通过文本和几秒钟的语音样本生成“类似人类的音频”，OpenAI 也请了专业配音演员合作创作了 5 种声音。与此同时，OpenAI
			还用了其开源语音识别系统 Whisper 将语音转录为文本。
		</div>
	</body>
</html>

伪类：

表示标签一种特殊状态。

语法：

选择器:hover 鼠标悬停状态

选择器:active 鼠标点击后状态

选择器:focus 向拥有键盘输入状态

CSS列表修饰：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			li {
				list-style-type: square;
				/* 列表图标样式square/none *//
				list-style-image: url();
				/* 列表图标图片样式 */
				list-style-position: inside;
				/* 图标位置 */
				list-style: ;
				/* 简写 */
			}
		</style>
	</head>
	<body>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</body>
</html>