ヾ(⌐ ■_■)— CSS简介篇-优快云博客

本文链接：https://blog.youkuaiyun.com/naoguoteng/article/details/127367078

本文介绍了CSS的主要作用，包括美化HTML、样式和HTML代码分离、精确布局等，并探讨了CSS的特性——继承性和层叠性。接着，详细阐述了CSS基本语法，并解析了CSS样式如何与HTML结合使用的三种方式：内联样式、内部样式和外部样式，强调了外部样式的高复用性。

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

CSS（Cascading Style Sheets）层叠样式表。该样式表的 主要作用就是来美化HTML标签 。经过之前的学习就会发现HTML标签会默认自带一些样式甚至会带有属性，但是只用HTML的默认样式来渲染已经满足不了我们当下丰富的需求了。这个时候就需要CSS样式表来充分渲染了。CSS样式的作用说详细点的话，可以分为以下几点：

实现了样式和html的代码分离
弥补html对属性的的控制不足
精确的控制页面的布局
可以提高页面的执行效率
css还有特殊的功能

在学习CSS之前，先补充一个小知识， HTML标签的分类 ，一般分为行(hang)标签，块标签和行内标签。

行标签：宽度不会默认占据一整行的标签，他的内容有多宽就占多宽，这种标签对上下移动不敏感。例如 font a b s标签。
块标签：默认会占据一整行的标签。例如 h1-----h6 ul li标签。
行内块标签：button img 不默认占据一行，但是还会具有一些块标签的特性。例如 button标签。

这个时候对这些特定特点的标签想要移动或者装饰呀，就可以用到CSS。只用默认样式是很难搞定的。此外还有两个概念， 纯净版行标签 和 纯净版块标签。都说了是纯净版啦，那意思就是没有任何东西修饰的标签就是纯净版的呗。例如纯净版行标签span，纯净版块标签div等等。让你画画，你是喜欢一张干干净净的白纸还是有字什么的草稿纸呀。纯净版的标签更方便CSS来装饰。

2.CSS的特性

CSS也具有自己的特性，主要是继承性和层叠性。那么具体是什么意思呢？客观瞧好~~~

(1)继承性

CSS继承性的意思就是给父级设置一些属性， 子级继承了父级的该属性 ，这就是我们的css中的继承。说通俗点，我给父级设置一个字颜色的属性，那么在这个父级下面的子级的字也会跟父级一样。(此时的案例只注重看解释的特性概念，相关的CSS知识后面会写到哦！)

<style>
   body{
      font-size:105px;
	  color:red;
   /* 这里面的语句后面的分号加不加都不影响 */
   }
   /* 被style标签包起来的就是在给body父级标签设置样式，设置了字体大小和颜色。 */
  </style>
 </head>
 <body>
    <p>查看文字内容</p>
	<!-- 此处的p标签就是子级标签，会受到父级的样式的影响。 -->
 </body>

效果如下：

(2)层叠性

层叠性就是指多种CSS样式的叠加。是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。层叠原则就是，如果 样式冲突，遵循的原则是就近原则，即CSS的书写位置。如果样式不冲突就不会被层叠掉。

效果如下：

3.CSS的基本语法

<style type="text/css">
选择器{
       属性1:属性值；
       属性2：属性值
       ......
     }
</style>

之前的案例代码对标签的修饰也是用的这种语法格式哦！

4.CSS样式如何与HTML结合使用

(1)内联样式

把CSS代码写在HTML标签的里面。这样写的缺点就是css代码书写凌乱并且没有办法复用。语法格式 ; <标签 style="样式的属性1:属性值;样式的属性2:属性值;......">

<body>
  <h1  style="color:red;font-size:50px;font-family:黑体">标签内部使用css</h1>
  <hr>
  <p style="background:cyan;color:red;font-family:宋体">在html标记的内部使用css</p>
 </body>

(2)内部样式

将CSS代码单独写在页面内部， 通过选择器，选择一个或多个标签，进行样式的控制 ，好处就是提高了CSS代码的复用性，缺点是一次只能控制一个html页面中html元素的样式。具体就是在head标签里面定义 style标签，style标签里面就可以书写CSS代码，对一个或多个标签，进行样式的控制。语法格式如上面介绍的格式一样。

<html>
	<head>
		<title>内部样式</title>
		<!--style  说明所要使用的标记 -->
		<!-- type="text/css"  说明这是一段css代码-->
		<style type="text/css">
			h3 {
				color: black;
				font-size: 35px;
				font-family: 黑体;
			}

			p {
				background: yellow;
				color: red;
				font-family: 宋体;
			}
		</style>
	</head>
	<body>
		<h3>在html文件的头部使用css</h3>
		<hr>
		<p>在html文件头部应用css(层叠样式表)</p>
	</body>

</html>

(3)外部样式

将CSS代码单独写在一个文件中 ，哪个html页面想要用这个样式，就可以引用该样式，复用性更高，一次可以控制一个或多个HTML页面的展示样式，非常推荐使用该方式。

基本语法：在head标签里面定义
<link rel="stylesheet"  type="text/css"  href="css样式表文件的存放位置">

rel="stylesheet" 是指在html文件中使用的是外部样式表文件
type="text/css" 指明该文件的类型是样式表文件
href="css样式表文件的存放位置" 样式表文件的地址（绝对路径或相对路径）

引入的前提就是先编写外部css文件，后缀为.css的文件。

<html>
	<head>
		<title> 外部样式 </title>
		<link rel="stylesheet" href="css/mycss.css">
	</head>
	<body>
		<h3>使用外部css</h3>
		<hr>
		<p>在html文件使用外部css(层叠样式表)</p>
	</body>

</html>

(小编也在努力学习更多哟!以后再慢慢分享的啦!)