CSS 知识点

什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

样式解决了一个很大的问题

HTML 标签原本被设计为用于定义文档内容，如下实例：

这是一个标题

这是一个段落。

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

CSS的使用方式
1.行内样式（内联样式）
<标签 style=“属性名1:属性值1;属性名2:属性值2;…”></标签>

2.页面嵌入（内部样式表）
	在head标签里面增加一个子标签
	<style>
		选择器{
			属性名1:属性值1;
			属性名2:属性值2;
			......
		}
	</style>
	
	
3.外部文件（外部样式表）
	在head标签里面增加一个子标签
	<link rel="stylesheet" href="css文件的路径" />
	
4.外部导入样式
	主要用在样式初始化。因为有一些标签有自己的样式，我们需要清空，方便自己计算
	
	@import url("reset.css");表示在一个css文件中导入另一个css文件
	css语法：   （符号都是英文的）
	选择器{
		属性名1:属性值1;
		属性名2:属性值2;
		......
	}

2.css中常用选择器
1.ID选择器
使用id选择器：在元素上面增加一个id属性,id属性的属性值不用用数字开头
一个页面中只能有一个id属性值
css中id选择的表示方法用 # 表示
2.class选择器
使用class选择器：在元素上增加一个class属性，class属性的属性值不能用数字开头
一个页面中可以有多个class属性值
css中class选择器的表示方法用 . 表示
3.标签选择器
直接写标签名
4.组合选择器
选择器直接用,分隔开即可
5.子代选择器
> 只针对子代
6.后代选择器
用空格表示，包含着子代选择器
7.通用选择器
* 针对于所有的标签
8.:hover 叫伪类选择器
当你的鼠标放上去的时候，会变化成的样子
权值 10
3.选择器的权中重
内联样式 1000
id 100
class 10
标签 1
通用 0
boss !important 只要出现，就以这个为主
div{
width: 500px!important;
height: 500px!important;
color: #f00!important;
background-color: #ff0!important;
}

	权重越高，冲突部分的样式就以权重高的为主，并不是说这个选择器没有用了，而是里面冲突的样式
	权重仅仅只能作为参考
		
	权重的计算
	不需要管子代和后代的
	如果权重相同，就近原则。以后定义的为准

表单及形式
list-style: none;
cursor: none; /设置鼠标的样式/
display: block; /*元素分为三大类,设置元素的显示方式
行内 inline
块级 block
行内块 inline-block
none 无
display: inline; 改变元素的属性，例如把行内元素改为块级元素属性

CSS 盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
![在面的图片说明了盒子模型(Box Model)：

CSS box-model
不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

边框阴影
.box{
width: 300px;
height: 400px;
/border: 1px solid black;/
margin: 20px auto;
/*
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:必须 阴影的水平偏移距离 + 右偏移 - 左偏移
v-shadow:必须 阴影的垂直偏移距离 + 下偏移 -上偏移
blur: 模糊距离
spread：阴影的尺寸
color 阴影的颜色
inset 将默认的外阴影更改为 内阴影
*/
box-shadow: 0px 0px 5px #f00 inset;
}