CSS（修饰HTML基础）

目录

CSS技术

什么是CSS

CSS的用法

选择器

标签名选择器

class选择器

id选择器

分组选择器

盒子模型

margin（外边距）

border（边框）

padding（内边距）

元素类型的补充

块级元素

行内元素

行内块元素

永和门店系统

 用户注册练习

---

CSS技术

什么是CSS

CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

CSS的用法

需求::将单元格内文字居中显示

	
		
		
		
		
		
		
		
		
	
	
		

			

				
你好1
				
你好2
			
			

				
你好3
				
你好4
			
		
	

选择器

所谓的选择器就是在HTML中帮助我们选中想要修饰的标签。

标签名选择器

选中网页中的所有元素

class选择器

给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开。

123
 

id选择器

id属性的值在整个HTML中作为唯一标识的存在。

可以通过ID值选中指定的元素（#id值）

123
/* 使用id选中元素 */
#p1{
	text-indent: 200px; /* 首行缩进*/
}

分组选择器

/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */
.a,.b,#p1{
	background-color: #000000;
}

属性选择器

根据属性条件选中符合条件的元素来设置样式（逗号隔开）

盒子模型

指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。

 

margin（外边距）

男

border（边框）

#div2{
border:10px solid yellow;/*实线*/
border:10px dashed yellow;/*点状*/
border:10px dotted yellow;/*虚线*/
}

padding（内边距）
 

用户名:

元素类型的补充

块级元素

默认情况下，块级元素独占一行（div , p，h1~h6）

可以设置宽和高。如果不设置宽和高，其中宽是默认填满父元素，而高是由内容

外边距、边框、内边距都可以设置

行内元素

默认情况下，多个行内元素处在同一行

不能设置宽和高

左右外边距、边框、内边距都可以设置，上下外边距设置无效

行内块元素

既具备行内元素的特征，还具备块级元素的特征

永和门店系统

	
		
		
		
		
			
	
	
		
顾客联
		
请您留意取餐账单号
		
自取顾客联
		
永和大王(北二环西路店)
		
010-62112313
		
--结账单--
		
账单号:P00000009
		
账单类型:食堂
		
人数:1
		
收银员:张静
		
开单时间:2018-04-17 07:24:11
		
结账时间:2018-04-17 07:24:22
		

		

			

				
数量
				
品项
				
金额
			
			

				
1
				

					油条豆浆套餐

					1X--油条

					1X--现磨豆浆(热/甜)
				
				
7.00
			
		
		
		

		

			

				
支付宝花呗一元早餐
				
-3.00
			
			

				
合计
				
4.00
			
			

				
支付宝
				
1.00
			
			

				
支付宝补贴
				
3.00
			
		
		

		打印时间:2018-04-17 07:24:22
		

		

			根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。
		
		

			
		
		
官网：www.yonghe.com.cn
		
加盟热线：86-21-60769397 或 86-21-60769002

	

 用户注册练习

 

 

​​​​

	
		
		
		
		
		
	
	
		
		
 
			
用户注册

					
					

						

							
						
					
					

						

							支持中文、字母、数字、“-”、“_”的组合，4-20个字符
						
					
					

						

							
						
					
					

						

							建议使用数字、字母和符号两种以上的组合，6-20个字符
						
					
					

						

							
						
					
					

						

							两次密码输入不一致
						
					
					

						

							
							或
							 验证邮箱
						
					
					

						

							
							我已阅读并同意 
							《京淘用户注册协议》