CSS~页面美化与布局控制

1)css:页面的美化 + 布局控制

2)概念
	(1)cascading style sheets: 层叠样式表
	(2)层叠:多个样式可以作用在同一个html的元素上,同时生效
	   样式表: 样式

3)好处:
	(1)功能比较强大
		html属性样式比较少, css多

	(2)解耦: 将内容的展示和样式的控制分离
		1:降低耦合度解耦.
		2:让分工协作更容易.
		3:能提高开发效率.

	跟设置不同主题一样.

4)css和html结合的3种方式:
	(1)内联样式(不推荐使用--》样式控制和元素展示没有分离)
		在标签内使用style指定css代码:
			键值对构成;

	(2)内部样式(比较常用)
		head标签内定义style标签,style标签的标签体内容就是css的代码:
			选择器{属性}

	(3)外部样式(推荐)
		1.定义css的资源文件
		2.在head标签内,定义link标签,引入外部的资源文件

		常规写法:
		<link rel="stylesheet" href="css/a.css">

		了解一下另外一种写法:
		<style>
        	@import "css/a.css";
    	</style>

5)css语法
	(1)格式:
		选择器{
			对应的属性名: 属性值;
			对应的属性名: 属性值;
			对应的属性名: 属性值;
			...
		}

		说明:
			选择器-->来筛选具有相似特征的元素.

			每一对属性需要使用;隔开,最后一对属性可以不加;

6)选择器有哪些?
	(1)基础选择器
		1.id选择器
			语法:#id属性值{}
				id最好唯一

		2.元素选择器
			语法:选择具有相同标签名称的元素
				标签名称

			注意: id选择器优先级高于元素选择器

		3.类选择器
			选择具有相同的class属性值的元素

			语法: .class属性值{}


		优先级: id选择器> 类选择器 > 元素选择器


	(2)扩展选择器
		1.*: 通用选择器,任意元素都被选中

		2.并集选择器:
			选择器1,选择器2{
			}

		3.子选择器: 去筛选选择器1下的选择器2
			选择器1 选择器2{}

		4.父选择器: 控制的是div里面的内容
			div > p {

			}

		5.属性选择器: 选择元素名称,属性名=属性值的元素
			语法: 元素名称[属性名="属性值"]{

			}

			// input标签,文本是输入框的
			input[type='text']{
            	border: 5px solid;
        	}

        6.伪类选择器: 选择一些元素具有的状态
        	语法: 元素:状态{}
        		如:	<a>
        			状态:
        				link
        				visited
        				active: 正在访问状态
        				hover

        	控制鼠标: 放上去后, 点击后, 访问后

7)css中的属性
	(1)字体、文本
		font-size: 字体大小
		color: 文本颜色
		text-align: 对齐方式
		line-height: 行高

	(2)背景
		background: url("img/xx.png") no-repeat center;

	(3)边框	
		border: 设置边框，符合属性 

	(4)尺寸
		width: 宽度
		height: 高度

	(5)盒子模型
		margin: 外边距
			以我自己为视角,设置我相对于外边的距离.

			margin: auto -->水平居中

		padding: 内边距
			我内部还有个小框框,我相对于小框框。
			默认情况下 内边距 影响最终盒子的大小. 

			通过设置: box-sizing: border-box

		float: 浮动
			left：
			right:

	说明:
		把每一个元素看成一个盒子;
		对页面布局的控制