css样式表分类 ，选择器，尺寸属性，边框阴影

1，什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)

2、CSS的作用

	1、以统一的方式实现样式的定义
	2、提高页面样式的可重用性和可维护性
	3、实现了内容（HTML）和表示（CSS）的分离
	HTML和CSS之间有什么关系？
	HTML：构建网页的结构
	CSS ：构建HTML元素的样式

3，样式表分类

样式表又分为
外部样式表(External style sheet)
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：

内部样式表(Internal style sheet)
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用

内联样式(Inline style)
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。

这是一个段落。

样式汇总：
color：red 字体颜色
font-size 字体大小
font-family:字体样式
background-color 背景颜色
width：宽度
height： 高度
字体使用实例（样式）
font-family 字体的种类
font-size 字号
color 字体的颜色
font-weigh 字体的粗细

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

四、CSS基础选择器

作用： 规范了页面中哪些元素能够使用定义好的样式
目的： 匹配页面元素（找到页面的元素）

1.通用选择器
作用：匹配页面中的所有元素
用法：*{}

标题为红色

段落也为红色

2.ID 选择器
（ID selector，IS）：使用 # 标识selector，语法格式：#S{…}（S为选择器名）

red text

3.类选择器

<p class="value">center text</p>

4.标签选择器（element selector，ES）：又叫标签选择器，

<p style="font-style:italic">italic text</p>	

5.后代选择器
（brother selector，BS）：

	<style>
	div p{
	  color:red;
		}
	</style>
	<div>
	  <p>no red text</p>
	  <div>no red text</div>
	  <p>red text</p>
	</div>

6.子代选择器（sub-selector，SS）：类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：A>B{…}（A、B为HTML元素/标签）。

red text

    <tr>
      <td>
        <p>no red text;</p>
      </td>
    </tr>
 
</div>

7.群组选择器
作用：选择器声明式以 ， 分割 的选择器列表

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

五、尺寸属性

1、作用：用户设置元素的宽度和高度 单位为px  百分比
2.宽度属性和高度属性
	width  height  设置元素的宽高
	max-width max-height  最大的宽度  和 最大的高度
	min-width min-height  最小的宽度  和 最小的高度
3.允许被修改高度和宽度的元素
	1.块级元素允许被设置宽高
	2.行内块大部分允许被设置宽高的 例如 表单控件  单选和复选 是不能修改尺寸
	3.存在width和height属性的元素 可以设置宽高的样式 img table
4.溢出
	使用尺寸属性限制元素大小的时候，如果内容所需要的空间太小大于元素本身，会导致溢出效果
	属性：
	overflow 
		visible	默认值。内容不会被修剪，会呈现在元素框之外。
		hidden	内容会被修剪，并且其余内容是不可见的。
		scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
		auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
		inherit	规定应该从父元素继承 overflow 属性的值。			

div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}

六、边框阴影

属性：  box-shadow
h-shadow  ：水平位置 必需的。水平阴影的位置。允许负值
v-shadow  ：垂直位置 必需的。垂直阴影的位置。允许负值
blur     ：模糊距离 可选。模糊距离
spread   ：阴影尺寸 可选。阴影的大小
color     ：颜色 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset     ：将外阴影变成内阴影  可选。从外层的阴影（开始时）改变阴影内侧阴影
box-shadow: h-shadow v-shadow blur spread color inset;