CSS基础

最新推荐文章于 2025-12-22 23:19:01 发布

原创最新推荐文章于 2025-12-22 23:19:01 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

本文介绍了CSS的基础知识，包括选择器的使用、盒子模型的概念以及在HTML中的实际应用案例。从行内CSS、内部CSS到外部CSS，详细阐述了CSS样式的设置方式。此外，还讲解了基础选择器如标签选择器、类选择器和ID选择器，以及高级选择器如分组选择器和属性选择器。最后，通过一个综合案例展示了如何使用CSS制作小票，包括设置样式、布局和引入外部CSS文件等技巧。

文章目录

CSS
三,盒子模型
- --1,概述
- --2,练习
四,HTML CSS的综合案例
- --1,制作小票
- - 创建CSS文件,存放css代码
  - 创建html文件,引入css文件

CSS

–1,概述

全称是层叠样式表 stylesheet ,作用是用来修饰HTML网页.
语法: 选择器{ 属性名:属性值 ; 属性名:属性值 ; 样式3…}
学习重点: 选择器 + 各种属性
位置:
1, 行内CSS:只作用在当前行, 给当前元素使用style属性来修饰样式

<h1 style="text-align:center;">我是h1</h1>

2, 内部CSS: 在HTML代码里使用style标签,包裹着CSS代码.提高了CSS代码的复用性
3, 外部CSS: 把HTML代码和CSS代码分离,在HTML中引入CSS文件

–2,入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css</title>
		<!-- style标签是HTML提供的,写css代码 -->
		<style>
			/* CSS语法:选择器{样式} */
			div{/* 选中div */
				text-align: center;/* 文字居中 */
			} 
		</style>
	</head>
	<body>
		<!--style属性用来设置样式  属性名:属性值; -->
		<h1 style="text-align:center;">我是h1</h1><!-- 设置文本居中 -->
		
		<div>我是div1</div>
		<div>我是div2</div>
	</body>
</html>

–3,基础选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css</title>
		<!-- 用HTML提供的style标签包裹css代码 -->
		<style>
			/* 1.标签名选择器:根据标签的名字选中 */
				div{/* 练习1:修饰div的样式 */
					color: red;/* 字的颜色 */
					background-color: darkgray;/* 背景色 */
					border-style:dashed;/* 边框的样式,虚线 */
					border-color:blue;/* 边框的颜色 */
				}
				span{/* 练习2:修饰span的样式 */
					font-size: 30px;/* 字号 字体 */
					font-family: "黑体";/* 字体 */
				}
			/* 2.class选择器:根据class属性的值选中元素,class的值能相同
				步骤:给元素加class属性+通过.获取元素 
			*/
				.a{/* 练习3:修饰div1的样式*/
					font-size: 25px;/* 字号 */
				}
				.b{/* 练习4:修饰span1的样式 */
					opacity:0.4 ;/* 透明度 0.0~1.0,数值越小越透明 */
				}
			/* 3.id选择器:根据id属性的值选中元素,要求id的值不能相同 
				步骤:给元素添加id属性 + 通过#获取值
			*/
				#c{/* 练习5:修饰a2的样式 */
					border-style: solid; /* 边框的样式:实线*/
					border-radius: 25px; /* 圆角 */
				}
		</style>
	</head>
	<body>
		<div class="a">我是div1</div>
		<div>我是div2</div>
		<span class="b">我是span1</span>
		<span>我是span2</span>
		<a class="a b">我是a1</a> <!--同时拥有a b两种样式的修饰-->
		<a id="c">我是a2</a>
	</body>
</html>

–4,高级选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 CSS高级选择器</title>
		<style>
			/* 1.分组选择器:把多种选择器的结果,组成一组进行修饰,逗号隔开 */
				a , input{ /* 利用标签名选择器,选中一组元素,修饰样式 */
					/* 边框: 宽度 样式 颜色; */
					border:1px dashed red;
				}
				/* 利用基本选择器,选中一组元素,修饰样式 */
				.x , #y , input{
					font-size: 20px;
				}
			/* 2.属性选择器:按照标签的属性来选择元素,标签名[属性名]*/
				a[href]{ /* 选中拥有href属性的a标签*/
					font-size: 50px;
				}
				input[type='text']{/* 选中type="text"的input设置背景色 */
					background-color: green;
				}
		</style>
	</head>
	<body>
		<a class="x">我是a1</a>
		<a href="#" class="x">我是a2</a>
		<a href="#" id="y">我是a3</a>
		<input type="text" />
		<input type="password" placeholder="请您输入密码..."/>
		<input type="text" />
	</body>
</html>

三,盒子模型

–1,概述

CSS认为HTML里的每个元素都是一个盒子.
外边距margin: 盒子间的距离,可以设置左边距,右,上,下
边框border: 盒子的边框,可以设置宽度/颜色/样式
内边距padding: 盒子里的内容和盒子的边框的距离,可以设置左边距,右,上,下
内容: 可以设置 width 和 height

–2,练习

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 外边距: 单选框是一个盒子    男也是一个盒子   两个盒子的距离margin -->
		<input type="radio" style="margin: 20px;"/>男 
		
		<!-- 内边距: 一个盒子里, 内容到边框的距离padding -->
		<input type="text" placeholder="你好" style="padding: 20px;"/>
		
	</body>
</html>

四,HTML CSS的综合案例

–1,制作小票

在这里插入图片描述

创建CSS文件,存放css代码

body{/* 统一网页风格*/
	width: 400px;/* 宽度 */
	font-size: 15px;/* 字号 */
}
/* 修改字号 */
.a{/* class选择器,选中网页中class=a的元素 */
	font-size: 30px;
}
/* 修饰文字居中 */
.b{
	/* text-align: center; */
	padding-left: 100px;/* 内边距 */
}
/* 修饰水平线 */
hr{
	border:1px dashed green; /* 宽度 虚线 绿色*/
}
/* 修饰文本缩进/首行缩进 */
#note{
	text-indent:30px;
}
/* 修饰图片居中 */
img{
	padding-left: 80px;
}

创建html文件,引入css文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 小票</title>
		<!-- 1.松耦合,分离了HTML和css代码,在网页里引入css文件 -->
		<link rel="stylesheet" href="1.css"/>
		
	</head>
	<body>
		<div>顾客联</div>
		<div class="a">请您留意取餐账单号</div>
		<div class="b">自取顾客联</div>
		<div>永和大王(北二环西路店)</div>
		<div>010-6211313</div>
		<div class="b">--结账单--</div>
		<div class="a">账单号:P000009</div>
		<div>账单类型：堂食</div>
		<div>人数：1</div>
		<div>收银员：张静</div>
		<div>开单时间：2018-04-17 07:24:29</div>
		<div>结账时间：2018-04-17 07:24:38</div>
		<hr />
		<table>
			<tr>
				<th>数量</th>
				<th>品项</th>
				<th>金额</th>
			</tr>
			<tr>
				<td>1</td>
				<td>油条豆浆套餐<br /> 1X--油条<br />1X--现磨豆浆(热/甜)   </td>
				<td>7.00</td>
			</tr>
		</table>
		<hr />
		<table>
			<tr>
				<td width="180px">支付宝花呗一元早餐</td>
				<td>3.00</td>
			</tr>
			<tr>
				<td>合计</td>
				<td>4.00</td>
			</tr>
			<tr>
				<td>支付宝</td>
				<td>1.00</td>
			</tr>
			<tr>
				<td>支付宝补贴</td>
				<td>3.00</td>
			</tr>
		</table>
		<hr />
		<div>打印时间：2018-04-17 07:24:38</div>
		<hr />
		<div id="note">根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。</div>
		<img src="2.png"/>
		<div>官网：www.yonghe.com.cn</div>
		<div>加盟热线：86-21-60769397 或 86-21-60769002</div>
		
	</body>
</html>