CSS的初步认知

一，CSS的作用

1.以统一的方式实现样式的定义
2.提高页面样式的可重用性和可维护性
3.实现了内容（HTML）和表示（CSS）的分离

HTML和CSS之间的关系：

	HTML：构建网页的结构
	CSS ：构建HTML元素的样式

二、CSS的使用

1.内联样式

	将样式声明在元素的style属性中
	<p style="color;red（样式声明）">1</p>
	样式声明 表示一个具体的显示效果，可以多个同时存在的，多个样式之间用 ； 进行隔开
	每个样式声明都有两部分组成
	color：  样式属性
	red  ：  属性值
**2.内部样式表**
	1.在head里面加上一个  style标签
	2.在style中添加任意多的样式
			p{
				样式声明；
			}
	选择器：规范了页面中哪些元素能够使用定义好的样式

3.外部样式表

	1.创建一个单独的样式表文件保存样式规则
		在css文件夹下新建一个CSS文件  并在里面添加好样式
	2.在需要使用得页面上添加 link 标签 进行引入

4.引入方式的优先级
就近原则 谁离这个标签进 最后就是谁的样式

三、样式表的特性

1、继承性
子级标签可以直接使用父级元素声明好的样式 （大部分的CSS样式是可以被继承）
2.层叠性
可以同时写多个样式
3.优先级
低： 浏览器的缺省值
中： 就近原则
高： 内联样式
4.！improtant规则
作用： 强制调整优先级 （一定是最后显示的）
打破了优先级规则
加在样式后面

四、基础选择器

作用： 规范了页面中哪些元素能够使用定义好的样式
目的： 匹配页面元素（找到页面的元素）
1.通用选择器
作用：匹配页面中的所有元素
用法：*{}
2.标签选择器
作用：匹配当前所有这一类的标签
用法 p{}
3.类选择器

	作用：由css定义好，可以被任意标记的class属性值进行引用的选择器
	语法：
			1.在标签内 加上class属性
			2.在样式表中  .类名{} 进行引入
	注意： 类名或者ID名  不能以数字开头
			除了 _  -以外不能有其他的特殊字符

4.ID选择器
作用：针对指定ID值的元素去定义样式
语法： 1.在标签内加上ID属性
2.在样式表中 使用 #ID名{} 进行引入

优先级：  id > class >  p（标签）> *
权值;
	标签选择器：    0,0,0,1
	类选择器        0,0,1,0
	id选择器        0,1,0,0
	内联样式        1,0,0,0
	选择器的权值加到一起，大的优先；如果权值相同，后定义的优先

五、复杂选择器

1.群组选择器
作用：选择器声明式以 ， 分割 的选择器列表
列：#a,.b,p{}
2.后代选择器
后代： 只要是具备层级关系的元素
使用空格 隔开
列：.a ul li{}
3.子代选择器
子代：只具备一级层级的关系的元素
使用 > 隔开
列：.a>ul>li{}

可选样式：

	color: 字体颜色
	font-size   字体大小
	font-family:字体样式
	background-color  背景颜色
	width：宽度
	height： 高度
	字体使用实例（样式）
							font-family  字体的种类
							font-size    字号
							color        字体的颜色
							font-weight	  字体的粗细 :	normal  普通
																		lighter   细
																		bold      宽
	font-style  字体形状 ： italic  斜体
	letter-spacing  字符间距(px单位)
	text-decoration  字体划线 : overline  上划线
												line-through  中划线
												underline  下划线

六、边框

1.边框属性：

第一种：
		border-top
		border-bottom
		border-left
		boder-right
		三个属性   粗细  线型  颜色
		列：border-bottom:1px solid red;
第二种：
		border ：粗细  线型  颜色
		列：border: 1px solid red;
透明色：transparent

第三种：
用border写三角形

把块级元素的宽高都设为0px，用边框的宽度去形成三角形，三边为空，一边设颜色

效果

七、边框阴影

属性： box-shadow

h-shadow  ：水平位置
v-shadow  ：垂直位置
blur      ：模糊距离
spread    ：阴影尺寸
color     ：颜色
inset     ：将外阴影变成内阴影

一般缩写为：

八、轮廓

是绘制与元素周围的一条线，位于边框外

属性： 粗细 线型  颜色
			outline-width: 20px;
			outline-style: solid;
			outline-color: red;

列：

九、元素的分类

块级元素：inline
独占一行，对宽高设置有效，如果我们不给宽度的话，撑满整行，如果不给高度，高度会随着内容的变化而变化
行内元素：block
设置宽高是无效的，不独占一行多个标签是可以同时存在一行的。完全是靠内容撑开的。
行内块元素：inline-block
不是独占一行，设置宽高有效，并且可以多个标签存在一行。

可以使用  display属性 来改变元素的分类

十、盒子模型

组成：
内容 内边距 边框 外边距

边框：border
内边距：	padding   边框和内容之间的距离
		padding 存在一个值     上下左右都是改值
			存在两个值     上下一个值 左右一个值
			存在三个值      上   左右   下
			存在四个值     上右下左
	可以单独的去设置 例如  padding-top

外边距：margin  元素和元素之间的距离
	   可选值与padding相同