css入门_七步诗的css代码-优快云博客

本文链接：https://blog.youkuaiyun.com/routing666/article/details/86638385

本文深入解析CSS的基础知识，包括层叠样式表的作用、语法结构、文字控制属性、盒子特性及内外边距设置。探讨了类和ID选择器、通配符选择器的使用，以及如何实现标签的居中对齐。同时，介绍了背景属性、复合选择器的运用，并讲解了网页布局中浮动属性的应用。

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

【CSS简介】

css(Cascading Style Sheets)指的是层叠样式表，作用是负责网页的样式外观。
简介：我们学习css，主要分为两部分，一是css属性（核心），一部分是css选择器。

【CSS语法】

书写css需要准备一个环境，就是一对style标签，需要放在head内部。
css样式条的语法结构：选择器{属性:值}

选择器指的是选择标签的不同方式；
css属性重新定义键值对的基本格式：K:v;
多个属性之间用分号隔开，例如：color:red;

【css文字控制三属性】

color——控制文字的颜色
font-size——控制文字的字号，单位：px
font-family——控制文字的字体

text-align——控制内容的水平对齐方式；

注意事项：style标签有一个配合使用的标签属性：type="text/css"，作用是保证浏览器的兼容性；（可写可不写）

例如：

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		h1{ color: red; font-size: 50px; font-family: "宋体"; text-align: center}
		p{color: green; font-size: 50px; font-family: "宋体"; text-align: center }
	</style>
</head>

<body>
	<h1>七步诗</h1>
	<p>煮豆燃豆萁</p>
	<p>豆在釜中泣</p>
	<p>本是同根生</p>
	<p>相煎何太急</p>
</body>
</html>

【盒子特性】

【盒子标签】

div——大盒子，它是一个可以存放任何内容的标签，就是一个容器，没有语义；京城用来给网页布局分区；
span——小盒子，也是一个容器，一般用来存放文字或小图片；相对于div来说语义较轻；

【实体化标签】
实体化指的是画盒子，给出一个标签的范围尺度。

实体化三属性：

width——宽度
height——高度
background——背景

【盒子显示模式】

任何的标签都会有两种特点中的一点：一是独占一行，可以人为指定宽高；另外一种是多个排列在一起，不能人为指定宽高；

这两种特点专业的称之为盒子的显示模式（display），所有的标签按照显示模式可以分为两类：

块级标签，典型代表：div；特点是独占一行，直接指定尺寸；不指定尺寸就充满父级；
行内标签：典型代表：span；特点是：多个排列在一起，不能直接指定尺寸；默认尺寸跟内容一样；

为什么标签会有这两种特点？
主要是因为所有标签都有一个display属性值；
块级标签：display:block；
行内标签：display:inline；

（可以通过改变display的属性值来改变这一特点）

<html>
<head>
<meta charset="utf-8">
<title>02盒子标签</title>
	<style>
		div{width: 200px; height: 100px; background: blue}
		p{width: 300px; height: 100px; background: green}
		span{width: 900px; height: 400px; background: #0CF1E7}
		a{width: 900px; height: 400px; background: yellow}
	</style>
</head>

<body>
	<div>大盒子</div>
	<p>段落</p>
	<span>小盒子lalalalalallalaalllalalal&nbsp;lalall</span>
	<a href="#">超链接</a>
	
</body>
</html>

在css中有一种显示模式具有块级和行内标签的特点：行内块标签：inline-block；

行内块标签可以指定宽高，且可以多个排列在一起，如果不指定宽高，尺寸就是内容的尺寸

（在实体化标签的过程中，如果一个标签没有实体化成功，可能就是显示模式没有转换；
一般情况下都是在块级和行内之间进行切换，很少用到行内块；）

<html>
<head>
<meta charset="utf-8">
<title>02盒子标签</title>
	<style>
		div{width: 200px; height: 100px; background: blue}
		p{width: 300px; height: 100px; background: green}
		span{width: 200px; height: 200px; background: #0CF1E7; display: inline-block}
		a{width: 200px; height: 200px; background: yellow; display: inline-block}
	</style>
</head>

<body>
	<div>大盒子</div>
	<p>段落</p>
	<span>小盒子</span>
	<a href="#">超链接</a>
	
</body>
</html>

【css盒子的内外边距】

内边距：padding
外边距：margin

【边框属性基础】

在css中边框属性通过border表示，它是一个复合属性有多个值，值与值通过空格隔开；
基本结构：border: 粗细类型颜色；
边框类型常用的有三种： solid 实线；dashed 虚线；dotted 点线；

一个标签的边框是由4部分组成的，也可以单独设置某个方向的值，例如：border-top
四个方向：top right bottom left;

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	h3{width: 500px; background: pink; border-top:1px solid red; border-right:1px dotted green; border-bottom: 1px dashed yellow;border-left: 2px dotted blue}
	p{margin-top: 100px; width: 500px;background: pink;border: 1px dashed red;border-left:1px dotted #000000}
</style>
<body>
	<h3>css简介</h3>
	<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</body>
</html>

【css的bui属性】

简介：在css中，css属性可以分为两大部分，一部分是文字控制属性，另一部分是区块控制属性，例如：宽度，高度，间距等。

font-weight：

bold：加粗效果；
normal：普通字体不加粗；

text-decoration：

underline：下划线；
line-through：贯穿线（删除线）
overline：上划线；
none：清除线；

font-style:

italic：斜体

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		p{text-align: center; font-weight: bold; text-decoration: underline; font-style: italic}
	</style>
</head>

<body>
<p>	中午不睡<br>

	下午崩溃。</p>
</body>
</html>

【选择器】

【类和id选择器】
简介：在css中，可以给标签另区两种名称，一种是类名，一种是id名。

类选择器：通过class属性命名；特点：可以重复使用，一个类名可以应用给多个标签；
id选择器：通过id属性命名；特点：唯一，同一个id名称只能应用给一个标签；

书写关系：

类选择器通过点语法：例如： .box{}
id选择器通过#书写；例如： #box{}

注意事项：在css中，选择器的命名不能以数字开头；

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		/*div{width: }*/
		.small{width: 100px; height:100px; background: pink;}
		.big{width: 200px;height: 150px; background: blue;}
		.normal{width: 150px; height:100px; background: red;}
		#myid{width: 100px; height:100px; background: yellow;}
	</style>
</head>

<body>
	<div class="big">大盒子</div>
	<div class="normal">中盒子</div>
	<div class="small">小盒子</div>
	<div id="myid">id名称</div>
</body>
</html>

【通配符选择器】

简介：通配符选择器通过*（星号）表示，作用是将整个网页body中的标签选中；
通配符选择器经常用来清空标签的默认间距；在html中，很多标签都默认带有内外边距，但是在网页制作中，这些边距我们是不需要的，所以需要进行清空，方法就是通过通配符选择器选中；
清空的时候需要清空三个属性：padding, margin, border, 都设置为0即可；

默认状态如：

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		h1{background: pink; }
		p{background: green;}
	</style>
</head>

<body>
	<h1>标题标题标题</h1>
	<p>duanluoduanluo</p>
</body>
</html>

使用通配符选择器：

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		*{margin: 0px; border: 0px; padding: 0px;}
		h1{background: pink; }
		p{background: green;}
	</style>
</head>

<body>
	<h1>标题标题标题</h1>
	<p>duanluoduanluo</p>
</body>
</html>

（在<style></style>里面加*{margin: 0px; border: 0px; padding: 0px;} ）

【基础选择器的权重】

权重指得是一个标签有多个选择器样式时谁生效。
基础选择器的权重：针对性越强，权重越高。
id选择器>类选择器>标签选择器>通配符选择器。

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		#mybox{background: purple;}
		.box{background:pink;}
		div{width: 100px;height: 100px; background: green;}
		*{background: tan;}
	</style>
</head>

<body>
	<div class="box" id="mybox"></div>
	<div class="box" ></div>
	<div class="box" ></div>
	<div></div>
	<div></div>
</body>
</html>

【css的居中对齐】

在css中，有文字的居中对齐，还有标签的居中对齐，其中标签的对齐方式价值更高。
实现一个标签的水平居中的方式是：设置它的左右外边距都为auto即可。（设置 margin-left:auto;实现右对齐，设置margin-right:auto;实现左对齐）

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		div{width: 200px; height: 200px; border: 1px solid #000; text-align: center;margin-left: auto; margin-right: auto;}
	</style>
</head>

<body>
	<div>执子之手<br>
与子偕老</div>
</body>
</html>

【内外边距的简写方式】
在css中，内外边距有1-4个值的简写方式：

一个值：表示4个方向是一样的；
两个值：表示上下和左右的方向；
三个值：表示上和左右和下的方向；
四个值：表示按顺时针分布：上右下左的方向。

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		.big{border: 1px solid #000; background: yellow; display: inline-block;}
		.small{width: 100px; height: 100px; background: pink; border: 1px solid #000; margin: 10px 20px 30px 40px;}
	</style>
</head>

<body>
	<div class="big"><div class="small"></div></div>
</body>
</html>

【背景属性】

简介：在css中，背景属性通过background控制，它是一个复合属性。

【基本结构】

background：背景颜色背景图平铺方式水平位置垂直位置固定模式。

例如： background: pink url(pic.jpg) no-repeat left top fixed;

平铺方式： no-repeat 不平铺； repeat-x 横向平铺；repeat-y 纵向平铺。
背景图定位坐标的书写方式：

方向特殊值：水平位置：left center right ；垂直位置：top center bottom；
具体像素值：例如 100px 100px ；可以接受负值。

如果背景图固定模式为fixed，可实现背景图固定于屏幕。

注意事项：应用背景图的标签左上角是坐标远点（0 0）点。

背景属性的单独控制：

background-color——背景颜色
backgound-image——背景图片
background-repeat——背景平铺方式
background-position——背景定位

【复合选择器】

简介：在css中，常用的复合选择器有：后代选择器、并集选择器、交集选择器。

【后代选择器】

通过一个空格表示后代关系，通过父级标签找到它的后代标签；

例如：box span{} 表示选中box里面的span标签；

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		ol li{border: 1px solid #000;}
		.box span{background: red;}
	</style>
</head>

<body>
	<ul>
		<li>liebiaoneirong</li>
		<li>liebiaoneirong</li>
		<li>liebiaoneirong</li>
	</ul>
	<ol>
		<li>liebiaoneirong</li>
		<li>liebiaoneirong</li>
		<li>liebiaoneirong
			<ul>
				<li>neirong3</li>
				<li>neirong3</li>
			</ul>
		</li>
	</ol>
	<div>
		<span>neirong</span>
	</div>
	<div class="box">
		<span>neirong2</span>
	</div>
</body>
</html>

【并集选择器】

多个选择器用逗号隔开表示共同选中，作用是一起选中书写样式；

例如：

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		h1,p,ol li,.box span{background: red;}
	</style>
</head>

<body>
	<h1>标题</h1>
	<p>段落</p>
	<ul>
		<li>liebiaoneirong</li>
		<li>liebiaoneirong</li>
		<li>liebiaoneirong</li>
	</ul>
	<ol>
		<li>liebiaoneirong</li>
		<li>liebiaoneirong</li>
		<li>liebiaoneirong
		</li>
	</ol>
	<div>
		<span>neirong1</span>
	</div>
	<div class="box">
		<span>neirong2</span>
	</div>
</body>
</html>

【交集选择器】

（也称为指定式选择器）

通过不同选择器连续书写，表示指定选择；作用是选中指定的标签；

例如：p.box{}表示选中带有box类名的那个p标签。

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		div.box{background: red;}
		span.box{background: green;}
	</style>
</head>

<body>
	<div>大盒子</div>
	<div class="box">dahezi</div>
	<div>大盒子</div>
	<p>段落</p>
	<span>小盒子</span>
	<span class="box">小盒子</span>
	<span>小盒子</span>
</body>
</html>

【行高属性】

简介：从一行文本的中心基线向上和向下同时延伸组成的距离就是行高，也就是通常所说的行间距。

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		.a{width:300px;border:1px solid #000;margin: 100px auto;line-height: 0;}
		.b{width:300px;border:1px solid #000;margin: 100px auto;line-height: 30px;}
		.c{width:300px;border:1px solid #000;margin: 100px auto;line-height: 45px;}
	</style>
</head>

<body>
	<div class="a">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
	<p class="b">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
	<p class="c">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</body>
</html>

【行高属性的应用】
行高经常用来制作文字的垂直居中。
如果想要实现一行文本在一个盒子中的垂直居中，设置它的行高等于盒子的高度即可。

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		div{width:300px;height: 300px; border:1px solid #000;margin: 100px auto;line-height:300px;}
		
	</style>
</head>

<body>
	<div>文字文字文字文字文字文字文字</div>
	
</body>
</html>

行高的测量：从一行文本顶端到下一行文本顶端组成的这个距离就是行高高度：

行高属性：line-height

【网页布局】

简介：任何复杂的网页都是由标签堆砌而成；网页布局是什么？网页布局其实指的是标签的不同排列方式；这些排列方式看起来复杂，其实只要两种：上下垂直排列和左右水平排列；而且水平排列实在垂直排列的基础上进行拆分排列。

【浮动属性】
float 表示浮动属性，它的值：left right（没有center）作用是实现盒子的水平排列，要么是左对齐，要么是右对齐。

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		.box{width: 1000px; height: 300px; background: blue; margin: 0 auto;}
		.box div{width: 300px; height: 300px; background: pink;} 
		.left{float: left}
		.center{float: left; margin: 0 50px;}
		.right{float: left;}
	</style>
</head>

<body>
	<div class="box">
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
	</div>
</body>
</html>

注意事项：

网页布局中，最稳定的怕列方式就是块级标签上下垂直排列；
在网页布局中为了保证结构的稳定，同级标签中只能有一种排列方式，要么是上下垂直排列，要么是左右水平排列；

【超链接伪类】

简介：伪类是一种状态，或者是一种功能；它并不是默认的样式，只有在被触发后才会生效。

a:link表示超链接默认样式；
a:visited表示超链接访问过后的样式；这个伪类基本不用；
a:hover表示超链接当鼠标移上去时的样式；
a:active表示鼠标点击不松开（选中）时的样式；

书写顺序： l v h a
在css中，所有的伪类都是以冒号开头；

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		a:link{color: #ccc;text-decoration: none;}
		a:visited{color: green;}
		a:hover{color: red;text-decoration: underline;}
		a:active{color: yellow;}
	</style>
</head>

<body>
	<a href="#">我是超链接</a>
</body>
</html>