H5——CSS

CSS 即层叠样式表，主要用于对页面的装饰。
使HTML专注于网页的内容，CSS专注于网页的表现
提供了丰富的格式化功能
可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式
CSS与浏览器
并不是所有的CSS的样式都被浏览器支持
不同的浏览器对CSS的实现有细微的不同，需要特别注意

导航

html中引入CSS的方法
 CSS基本语法
 CSS中长度单位的定义
 CSS中颜色的定义
 CSS中和字体格式有关的属性
 CSS中和文本段落格式有关的属性
 掌握盒子模型
 掌握背景色、背景图片
 Display属性
 “文档流”定位
 列表样式
 元素不可见

html中引入CSS的方法

在html页面中有多种方式可以引入 CSS

行内样式
直接使用标记的style属性
style=" width:100px; height:100px; background-color:#F00;”
内嵌样式
在HTML中，使用<style></style>标记，将样式写在<style>标记内
注意：<style>标记要指定type属性为text/css
链接样式(外链式)
将CSS写入单独的一个文件中，注意该文件的文件扩展名为 .css
在HTML文档中使用<link>标记引入css文件
<link>标记需要指定两个属性：type和rel（relationship）
例：< link type=“text/css” rel=“stylesheet” href=“sy.css" />
使用导入样式
使用@import指令可以将css文件中的css样式导入到不同的地方
导入式的结果和直接书写是同样的效果
导入式可以共享样式代码
可以在内嵌式里使用导入，也可在css文件中使用
导入样式的使用方法
@import url(“sheet1.css”);
@import “sheet1.css”;

当页面中同时具有多种样式时，优先级按就近原则，即使用最近的一个样式（行内》内嵌》链接）

CSS 基本语法

CSS使用多种选择器来确定要定义的HTML标记
CSS使用大量的属性来定义HTML文档的表现
设置属性的不同的值来实现不同的显示效果
基本语法：选择器{属性：属性值；}

选择器
CSS修饰html标签的基础就是选择符，即可以通过多种选择符来选择要修饰的html标签

通配符选择器
选择对象：所有标签
语法：* {font-family: “宋体”}
类型（标记）选择器
选择对象：使用标签名做选择符
语法：p {font-size: “8”}
ID选择器
选择对象：对应id名的元素
语法：＃idname {…}
类（class）选择器
选择对象：使用此类名的元素
语法：.classname {…}
包含选择器
选择对象：被嵌套标签包含的元素
语法：选择符a　选择符b {…}

px 和 em
px：像素
根据显示器分辨率的不同，像素的大小也是不同的
em：以当前字符的高度为基准
如果当前字体的高度为12px，那么1em就是12px
注意：一般以font-size为准，如果没有定义font-size，则以浏览器默认大小（16px）为准
cm/mm/pt/pc
主要用在非显示器输出上，如打印
如果网页在显示器上显示，则这些单位将转换为一定的像素显示，即长度也是依靠显示器分辨率的

颜色表达

网页中颜色采用RGB模式显示（显示器）
RGB颜色在CSS中的表达方式

直接使用颜色的英文单词，如red
注意：很多浏览器不支持颜色的单词表示
使用三色的数值，如rgb(120,222,100)
注意：数值在0~255之间
- 使用三色的百分比，如rgb(10%,20%,100%)
  red rgb(255,0,0) blue rgb(0,0,255) black(0,0,0)
  green rgb(0,255,0) white rgb(255,255,255)
使用三色数值的十六进制，如#0000ff
注意：推荐使用这种方式，十六进制值前加#
rgb red #ff0000 #f00 blue #0000ff #00f black #000000 #000
green #00ff00 #0f0 white #ffffff #fff

字体格式

font-family：指定字体
可以为文字指定多个字体，不同字体间用“，”隔开
字体名字中间有空格的，要用双引号引起来
font-size：字体大小
多用px/em单位
font-style：字体倾斜效果
normal不倾斜、oblique和italic倾斜
Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！
font-weight：字体粗细
大多浏览器可以实现：正常和加粗效果
normal：正常粗细
bold：粗体
bolder：加粗体
lighter：比正常粗体细
100~900：数字越大，字体越粗
text-transform：英文字母大小写转换
capitalize：单词首字母大写
uppercase：全部大写
lowercase：全部小写
text-decoration：文本装饰
underline：文字加下划线
line-through：文字加删除线
overline：文字加上划线

文本段落

text-indent
段落内容首行缩进（悬挂缩进）
字词间距
- 英文文本
  letter-spacing 字母和字母间距 : normal / 数值
  word-spacing 单词和单词间距
- 中文文本
  letter-spacing 字和字之间的间距
overflow:visible（默认）/hidden（超出部分隐藏）/scroll（出现滚动条）/auto（浏览器自动处理）内容溢出处理
text-overflow：clip（不显示省略标记，简单裁切） | ellipsis （文本溢出显示省略标记）文本溢出处理 white-space： normal / pre（空白被保留）/nowrap（不换行）/…元素空白的处理
line-height：段落内部的行高
注意：文字在每一行自动上下居中
text-align
文本的水平位置
- left，左对齐（默认值）
- right,右对齐
- center,居中对齐
- justify,两端对齐
- justify对于主要用于英文
  只能对多行中的非最后一行进行两端对齐
vertical-align：baseline/top/text-top/middle/bottom/… 垂直对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

盒子模型

我们用盒子来描述一个div元素，甚至是其他块元素。某些方面，他们就像是一个盒子一样。

盒子大小

width 和 height
只定义内容的大小，不包含边框和边距
如果内容太多，超过了width或height，那么默认情况下将忽略width或height的设置
overflow属性 (overflow-x overflow-y)
定义内容超过width和heigth时的显示方式
scroll;使用滚动条，不论内容是否超出
auto;根据情况，如果内容超出了width，则出现横向滚动条，如果内容超过了height，则出现纵向滚动条，否则不显示滚动条
hidden;超出部分被隐藏
visible;默认值，忽略width或height
边框
边框的三个方面(webkit、firefox和ie)
- width,边框的宽度
- color,边框的颜色
- style,边框的样式（border-style:dotted、solid、double、dashed; ）
边框的综合定义
分开单独设置，
例：border-width:1px; border-color:#00f; border-style:solid;
使用综合属性
例：border:1px #00f solid
注意：三个值没有先后顺序，中间用空格隔开
四边独立设置
单边分开设置
例：
border-left-width:1px;
border-left-color:#00F;
border-left-style:solid;
使用综合属性
例：
border-left:1px #00F solid
边距
padding（内边距）
边框和内容之间的空白宽度
注意：这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度
padding的综合设置
例：padding:2px;(四个内边距都为2px)
padding的单边设置
例：padding-left:2px;(左边的边框和内容之间的距离为2px)
margin（外边距）
标签和它相邻的标签之间的空白宽度
外边距的设置是相叠加的
margin的综合设置
例：margin:10px;(和四边临近的标签的距离都为10px)
margin的单边设置
例：margin-left:10px;(标签距左边10px)
<body>标签的margin代表内容与浏览器边框的距离
两个行内元素的margin-right和margin-left，采用“和”
两个块元素的marign-top和margin-bottom，采用“最大值

背景

background-color：定义标签的背景颜色
background-image：定义背景图片,可定义多背景
ackground-repeat：定义背景图片的显示方式
repeat，图片重复
repeat-x，图片横向重复
repeat-y，图片纵向重复
no-repeat，图片不重复
background-position：定义背景图片的位置
直接使用两个定位单词，例:background-position: right top;
使用x、y坐标，例:background-position: 20px 30px;
background-size：定义背景图片的大小
background-size: length | percentage | cover | contain;
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。（可能会裁剪图片）
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。(可能会出现空白
background-origin ：定义背景图片的渲染位置
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
background-attachment定义背景图片是否固定或者随着页面的其余部分滚动
background-attachment：fixed（固定）| scroll（默认）

display属性

CSS使用display设置的标签的显示方式
block“块”元素
inline“行内”元素
inline-block 行内块元素
none 隐藏
<div>主要用于HTML文档中独立的“大块”内容
<span>主要用于HTML文档中需要特别定义的内容

文档流定位

float
造成标签“浮动”，影响“文档流”的空间
float:left;“左浮动”
float:right;”右浮动”
对span元素添加一个float:left，span元素已经“块”化。

除了基于“文档流”的定位，CSS还定义了标签的其他定位方式，CSS使用position属性指定标签的定位方式
position的值
static，默认值，即使用基于“文档流”的定位
relative，相对定位，即在“文档流”的基础上，结合left和top属性，相对定位
absolute，绝对定位，即脱离“文档流”，并基于它的“包含框”，使用left和top属性来定位
fixed，固定定位，即特殊的绝对定位，即它的“包含框”为浏览器

position:relative;：相对定位
相对与原来的位置，使用left,right进行偏移原来的位置对于后继元素的定位(float)依然有效对于使用float的元素，realative也同样起作用
position:absolute;：绝对定位
绝对定位脱离了”文档流“，使用绝对定位时，注意找准”包含框“，即包含该标签，并且距它最近的，position不等于static的标签如果没有，那么将以浏览器左上角为准来定位
只定义position:absolute;没设置left和top，标签位置仍安“文档流”定位，但已经“脱离文档流”
float：具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。
介绍4种清除浮动的方法
1.为父元素添加overflow:hidden
2.为父元素增加height
3.clear:both。通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。
4.伪类消除

列表样式

list-style-type 列表样式类型
disc/circle/square
list-style-image 列表样式图片
list-style-position 列表样式位置
outside / inside

元素不可见

display:none
visibility：visible/hidden
opacity:0-1
光标样式
cursor:pointer/help/wait/url(),auto