CSS-简介（与html三种结合方式，四种选择器）

我没得冰阔落.

已于 2022-03-19 12:05:19 修改

阅读量387

点赞数

分类专栏： javaweb 文章标签：服务器 java 前端 css html

于 2022-03-03 17:06:37 首次发布

本文链接：https://blog.youkuaiyun.com/chenxingxingxing/article/details/123256905

版权

本文详细介绍了CSS（层叠样式表）的基础知识，包括其与HTML的三种结合方式：内联样式、内部样式和外部样式。此外，还探讨了CSS选择器的使用，如标签名选择器、ID选择器、类选择器和组合选择器，展示了如何通过这些选择器来定义和应用样式。

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

1、css简介

css全称是 Cascading Style Sheets，翻译就是层叠式样式表。它描述了如何在浏览器上显示html元素，为html的元素属性做统一的规范。

2、css与html的三种结合方式

		1、内联样式：在标签的style属性里面设置style=“属性：值 ； 属性：值”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body >
		
		<!-- 设计div标签1：边框为黑色，大小为两像素,实线，字体为红色
		设计div标签2：边框为绿色，大小为5像素,虚线 -->
		<div style="border: black 2px solid; color: #FF0000;">这是div标签1</div>
		<div style="border: green 5px dashed;">这是div标签2</div>
		<br />
		<br />
<!-- 		设计di标签1：边框为黑色，大小为两像素,实线，字体为红色
		设计div标签2：边框为绿色，大小为5像素,虚线-->
		<span style="border: black 2px solid; color: #FF0000;">这是span标签1</span>
		<span style="border: green 5px dashed">这是span标签2</span>

	</body>
</html>

在这里插入图片描述

	2.内部样式：在head标签里面插入style标签

格式为：
<style type=“text/css”>
标签名{
属性：属性值；
属性：属性值；
}
</style>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
   
				border: black 1px solid;
				color: red;
			}
		
			span{
   
				border: green 2px dashed;
				color: greenyellow;
			}
		</style>
	</head>
	<body>
		<div>div标签1</div>
		<div>div标签2</div>