CSS入门（网页皮肉）——知识汇总①

本文链接：https://blog.youkuaiyun.com/pipihan21/article/details/104597426

本文深入讲解CSS中的选择器，包括元素、ID与类选择器的使用，并探讨内部、内联及外部样式表的区别与优势。重点介绍外部样式表如何优化多页面样式管理，提升页面加载速度，以及代码分离带来的便利。

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

CSS知识汇总①

选择器

元素选择器：
<style type="text/css">
	h1{
		color: （字体颜色）;
		background-color: （背景颜色）;
		text-align: 
	}
</style>
ID选择器
<style type="text/css">
	#名字{
		color:;
		background-color: ;
		text-align: ;
	}
</style>
<body>
	<p id="名字"></p>
</body>
类选择器：（最实用）
<style type="text/css">
	.名字{
		color:;
		background-color: ;
		text-align: ;
	}
</style>
<p class="名字"></p>

CSS样式表类型
内部样式表:代码写在style元素内
内联样式表:将代码写在HTML元素的style属性内
外部样式表:将代码写在单独的CSS文件内(需要引入CSS文件)

<link rel="stylesheet" type="text/css" href="CSS文件路径">

优点:1）外部样式可以解决多页面样式重复的问题
2) 有利于浏览器缓存，从而提高页面响应速度
3）有利于代码分离（HTML和CSS），更容易阅读和维护
常见样式声明：

<style type="text/css">
	div{
		color:文字颜色;
		表示方法(三元色混合而成)：
		rgb(色值,色值,色值)
		hex(#十六进制)
		background-color:背景色;
		text-align:;元素内部文字的水平排列方式
		font-size: 文字大小(px em);
		font-family:文字模样；
		font-style:表示字体形式，通常设置为斜体;
		font-weight: 文字粗细程度(数字或预设值)
		font-decoration:文本修饰，给文本加线;
		text-indent: 首行文本缩进(px em)
		line-height: 每行的文本的高度，值越大，每行文本的距离越大，设置行高为容器的高度
		一般设置为纯数字，表示当前文本的字体大小
		width:;容器宽度
		height: ;容器高度
	}
</style>