CSS简单入门

CSS

页面的美化和布局控制

1、概念：Cascading Style Sheets 层叠样式表

层叠：多个样式可作用在同一个html的元素上，同时生效

2、好处：

	1、功能强大
	2、将内容展示和样式控制分离
			*降低耦合度。解耦
			*让分工协作更容易
			*提高开发效率

3、CSS的使用：CSS与html结合方式

	1、内联样式：在标签内使用style属性指定css代码
	2、内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码
	3、外部样式：1、定义css资源文件 2、在head标签内，定义link标签，引入外部的资源文件

注意：
*1，2，3种方式css作用范围越来越大
*1方式不常用，常用2，3方式

4、CSS语法：

格式：
选择器{
  属性名1:属性值1
  属性名2:属性值2
…
}
*选择器：筛选具有相同特征的元素
注意：
 &emsp每一对属性需要使用；隔开，最后一对属性可以不加；

5、选择器：筛选具有相似特征的元素

分类：

1、基础选择器
id选择器：选择具体的id属性值的元素,建议在一个html页面中id值唯一
*语法：#id属性值{ }
元素选择器：选择具有相同标签名称的元素
*语法：标签名称{ }
*注意：id选择器优先级高于元素选择器
类选择器：选择具有相同class属性值的元素
*语法：.class属性值{ }
*注意：类选择器优先级大于元素选择器
2、扩展选择器
选择所有元素
*语法：*{ }
并集选择器：
*语法：选择器1，选择器2{ }
子选择器：筛选选择器1元素下的选择器2元素
*语法：选择器1 选择器2{ }
父选择器：筛选选择器2的父元素选择器
*语法：选择器1 > 选择器2
属性选择器：选择元素名称，属性名=属性值的元素
*语法：元素名称[属性名=’属性值‘]{ }
伪类选择器：选择一些元素具有的状态
*语法：元素：状态{ }
如：<a>
	状态：	link
			visited
			active
			hover

6、属性

1、字体、文本
font-size:字体大小
color:文本颜色
text-align:对齐方式
line-height:行高
2、背景
background
3、边框
border:设置边框，复合属性
4、尺寸
width:宽度
height:高度
5、盒子模型
margin:外边距
padding:内边距
默认情况下内边距会影响整个盒子的大小
box-sizing:border-box;
设置盒子的属性，让width和height就是最终盒子的大小

float:浮动
left
right