花2w报培训的第三天

第三天

CSS

基本概念：

	C:cascading 一层一层 层叠
	S:style 风格 样式
	S:sheet 表 (语法格式 像 表)
全名：层叠样式表
书写位置：
	1写在页面标签的style属性中
	<a href="" style="css代码"></a>
	注意：一般不推荐，如果美化的内容多，那么标签很臃肿
	如果只是简单美化一两条属性，可以写在里面。
	2写在页面的style标签中
	<style>css代码</style>
	注意：一般嵌套在head标签中，学习中推荐，工作中不推荐，如果Style标签美化太多，页面就很臃肿。
	3	外部的css文件中（.css）
	通过link标签将外部的css文件引入进来，工作中推荐

语法规范

#标签的style属性中（直接编写键值对 key:value;）
	<a href="" style="属性名：属性值; 属性名:属性值;"></a>
#style标签和外部css文件中
	选择器（获取标签的方式）
	1.id选择器 （唯一标识）
		#id名{
		属性名：属性值;
		属性名：属性值;
		属性名：属性值;
}
	2.class选择器
		.class名{
		属性名：属性值;
		属性名：属性值;
		属性名：属性值;
}
	3.元素选择器
		标签名{
		属性名：属性值;
		属性名：属性值;
		属性名：属性值;
}
	4.其他
#复刻页面准备工作
偷图
用于美化的主要标签
	<div></div>盒子模型,万物皆可div 块级元素（占一整行）
	<span></span>局部文字美化 行级元素
#常见样式处理
	位置
		margin 外边距
			bug:如果div中的第一个子元素设置了上外边距，那么div也会和子元素一起下来上外边距合并的问题。
			解决方案：设置父级div的属性 overflow：hidden；
		position 位置
	大小
		width
		height
	背景
		background
	字体
		font
	文本内容
		text
	边框	
		border
	颜色
		color
	显示模式 display
		快级显示（最多） block
		行级显示（最少） inline
		隐藏 none

body （根据html）html（根据浏览器）本身没高度