CSS3层叠样式表
一.CSS基础
CSS语法结构和常用单位
二.在HTML5引用CSS3的方法
导入样式：@import “....”
链接样式：link标签
三.CSS3常用选择器
四.美化字体和段落
字体：font-family
字号：font-size
字体风格：font-style
字体加粗：font-weight
小写字母转换为大写字母：font-variant
字体颜色：color
对齐方式：text-align 和 vertical-align
字体下划线：text-decoration
缩进：text-indent
添加阴影：text-shadow
首字母大写效果：text-transform
文本溢出效果：text-overflow
统一字体大小：font-size-adjust
行高：line-height
五.美化网页图片
最大宽度和高度：max-width max-height
图片对齐方式：text-align vertical-align
图文混排：float标签
边距：padding-top padding-right padding-bottom padding-left
六.美化背景和边框
背景颜色：background-color
背景图片：background-image
背景重复方式：background-repeat
背景图像滚动or固定：background-attachment
背景图像位置：background-position（background-origin设置position的相对位置）
背景图像大小：background-size
指定背景绘制区域：background-clip
复合设置：background：A B C ...
边框风格：border-style（实线，虚线等等）
边框宽度：border-width
边框颜色：border-color
复合属性：border:
七.美化网页菜单（CSS3列表）
设置列表项标记：list-style-type
用图片作为列表项：list-style-image
复合属性：list-style
八.美化表格和表单的样式
表格边框是否合并：border-collapse
边框宽度：border-width
边框颜色：border-color
表格标题位置：caption-side
是否显示表格中的空单元格：empty-cells
表单布局形式：table-layout
相邻单元格的边框间的距离：border-spacing
添加圆角边框：border-radius
使用图片作为对象的边界：border-image
九.美化超链接和鼠标样式
一.CSS基础
1.CSS结构
基本格式：selector{properties1：value1；properties2：value2...}
eg：p{ font-family:"隶书"; color:red； }
2.CSS 3 常用单位：颜色单位+长度单位
长度单位：绝对单位+相对单位a.命名颜色
p { color : red; }
b.RGB颜色red green blue
p{ color : rgb(100,100,100)}
c.十六进制颜色#RRGGBB，RR，GG，BB的最大值为FF
p { color：#FF0000 } 红色
d.HSL色彩模式
H：色调
S：饱和度
L：亮度
语法表示：hsl(<length>,<percentage1>,<percentage2>)
length : 表示色调Hue，（-360-360）
percentage1：表示饱和度Saturation，0%-100%
percentage2：表示亮度Lightness，0%-100%
e.HSLA色彩模式
hsla（<length>,<percentage1>,<percentage2>，<opacity>）
opacity : 透明度0-1 eg：0.7
f.RGBA色彩模式
rgba（r，g，b，<opacity>）
p{ color : rgba(100,100,100,0.7)}
g.网络安全色
红，绿，蓝三种基本色从 0 , 51 , 102 , 153 , 204 , 255 中取值,组成6*6*6种颜色
绝对单位：
a.英寸（in）。一英寸=2.54cm。
b.厘米（cm）。
c.毫米（mm）.
d.磅（pt）。72磅等于一英寸，即2.54cm。
相对单位：
a.em em用于给定字体的font-size值，例如一个元素字体大小为12pt，那么1em=12pt。
b.px像素
二.在HTML5使用CSS3方法
<style type="text/css">
....
</style>
1.导入样式
<head>
<style type="text/css">
@import "1.css"
@import "2.css"
</style>
</head>
2.链接样式
link标签：指定外部资源
<head>
<link rel="stylesheet" type="text/css" href="../demo.css"/>
<p>it is a new day！</p>
<h1>are you sure？</h1>
</head>
p{ color: red }
h1{ color:red }
属性：
1.rel（必选）：决定了浏览器对待 link 元素的方式。
值
描述
alternate
链接到当前文档的替代版本（比如另一种语言的译本）。
author
链接到当前文档的作者。
help
链接到当前文档的帮助文档。
icon
当前文档的图标资源。
license
链接到当前文档的版权信息。
next
表示当前文档是集合中的一部分，且集合中的下一个文档是被链接的文档。
prefetch
预先获取的资源（先进性缓存）。
prev
表示当前文档是集合中的一部分，且集合中的上一个文档是被链接的文档。
search
针对当前文档的搜索工具。
stylesheet
载入外部链式表。
2.type:规定被链接文档/资源的 MIME 类型。
type="text/css"
3.href ：指定URL
4.media：指定被链接的资源将针对哪一种媒体/设备进行优化。（print）
设备：
将样式用于打印预览或打印页面。
screen
将样式用于计算机屏幕。
运算符：
值
描述
and
逻辑与操作符。
not
逻辑非操作符。
,
逻辑或操作符。
属性：
值
描述
width
规定目标显示区域的宽度。可使用 "min-" 和 "max-" 前缀。
例子：media="screen and (min-width:500px)"height
规定目标显示区域的高度。可使用 "min-" 和 "max-" 前缀。
例子：media="screen and (max-height:700px)"
orientation
规定目标显示器/纸张的方向。可能的值："portrait" 或 "landscape"
例子：media="all and (orientation: landscape)"aspect-ratio
规定目标显示区域的宽度/高度比。可使用 "min-" 和 "max-" 前缀。
例子：media="screen and (aspect-ratio:16/9)"
color
规定目标显示器的 bits/color。可使用 "min-" 和 "max-" 前缀。
例子：media="screen and (color:3)"color-index
规定目标显示器可以处理的颜色数。可使用 "min-" 和 "max-" 前缀。
例子：media="screen and (min-color-index:256)"monochrome
规定单色帧缓冲中的 bits/pixel。可使用 "min-" 和 "max-" 前缀。
例子：media="screen and (monochrome:2)"resolution
规定目标显示器/纸张的像素密度 (dpi 或 dpcm)。可使用 "min-" 和 "max-" 前缀。
例子：media="print and (resolution:300dpi)"scan
规定 TV 显示器的扫描方式。可能的值："progressive" 和 "interlace"。
例子：media="tv and (scan:interlace)"grid
规定输出设备是否是网格或位图。可能的值："1" 为网格，否则为 "0"。
例子：media="handheld and (grid:1)"
三.CSS3常用选择器
1.标签选择器
tagName { property ：value }
2.类选择器
.classvalue { property : value }
3.ID选择器
#idvalue { property : value }
4.全局选择器(对页面所有HTML使用同一种标记)
*{property: value}
5.伪类选择器
<a></a>标签链接颜色
四种状态：link（）未访问
visited（已访问）
active（**链接）
hover（鼠标停留在链接上）
a:link{color：red}
a:visited{color：blue}
a:active{color：white}
a:hover{color：green}
6.选择器声明
集体声明：
h1,h2,p { color : red }
多重嵌套声明：
<body>
<p>123456<a href="#">789</a></p>
</body>
<style type="text/css">
p{color:blue}
p a{color:red}
</style>
四.美化网页字体与段落
1. 字体
font-family：name（宋体，黑体，隶书）【考虑显示兼容问题，通常设置多个字体】
font-family：“Times New Roman”【有空格，用引号】
2. 字号
font-size：数值 | inherit | xx-small...
3. 字体风格
font-style：normal（默认值），italic（斜体），oblique（倾斜），inherit（继承）
4. 字体加粗
font-weight：100~900（数值越大，越粗）normal【400】 (默认)，bold700（粗），bolder，和lighter（更细）
5. 将小写字母转换成大写字母（相对尺寸会变小）
font-variant：normal，small-caps，inherit
6. 字体颜色
color：red....or#00FF00....
7. 字体水平对齐方式
text-align：left（默认），right，center和justify
当文本对齐设置为"justify"时，每行都被拉伸。
8.字体垂直对齐方式
vertical-align：top，middle和bottom。
9.字体下划线
text-decoration：none - 默认值，这定义了一个正常的文本
inherit - 从其父元素继承此属性
overline - 在文本上方绘制水平线
underline - 在文本下方绘制水平线
line-through - 在文本中绘制水平线（替换HTML <s>标记）
10. 缩进
text-indent：数值
11.添加阴影
text-shadow：第一个值：定义阴影在x（水平）方向的距离
第二个值：定义y（垂直）方向的距离
第三个值：定义阴影的模糊
第四个值：设置颜色
12. 首字母大写效果
text-transform：uppercase，lowercase，capitalize（首字母大写）
13.设置文本溢出效果
text-overflow：clip（），elipsis（）
14. 统一字体大小
font-size-adjust：0.5,1...
15.行高
line-height: 数值
五.美化网页图片
1.max-width和max-height（设置其中一个属性，相对另一个同比例变化）
2.text-align 和vertical-align（设置图片的对齐方式）
text-align : left center righ
vertical-align ：
baseline：默认值，字母abcd的底部
text-bottom;文字底部，大概会和字母g的底部
middle:整体的中部
top：整个容器的顶部
bottom：整个容器的底部
super：上标的位置
sub：下标的位置,会比textbottom低一点(super 比text-top 低一点，原因不清楚)
数值：相对于baseline的高度，可以是负值，（经常用以修复 checkbox radio 与文字不对其问题，负值向下，正值向上）
3. 图文混排
float：定义元素在哪个方向浮动
| 值 | 说明 （索引中有详细介绍） |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置。 |
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
4.padding-top 上边距 10px
padding-right 右边距
padding-bottom 下边距
padding-left 左边距
六.美化网页背景和边框
背景：
1.background-color ：设置背景颜色
2.background-image：设置背景图片
background-image：url（图片路径）
3.background-repeat：
| 值 | 说明 |
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
4.background-attachment：设置背景图像是固定的还是与页面的其余部分一起滚动；
| 值 | 说明 |
| scroll | 背景图片随页面的其余部分滚动。这是默认 |
| fixed | 背景图像是固定的 |
| inherit | 指定background-attachment的设置应该从父元素继承 |
| local | 背景图片随滚动元素滚动 |
5.background-position：设置背景图像的起始位置。
| 值 | 说明 |
| A（top、left、right、bottom、center）两两组合 | 如果仅规定了一个关键词，那么第二个值将是”center”。默认值：0% 0%。 |
| B（x% y%） | 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另一个值将是 50%。 |
| C(xpos ypos) | 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。可以混合使用 % 和 position 值。 |
6.background-size：设置背景图片大小
| 值 | 说明 |
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| no-repeat | 背景图像将仅显示一次。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
值 说明 padding-box 从padding区域开始显示背景 border-box 从border区域开始显示背景 content-box 从content区域开始显示背景
8.background-clip属性指定背景绘制区域。
| 值 | 说明 |
| border-box | 默认值。背景绘制在边框方框内（剪切成边框方框）。 |
| padding-box | 背景绘制在衬距方框内（剪切成衬距方框）。 |
| content-box | 背景绘制在内容方框内（剪切成内容方框）。 |
9.复合属性：
background：background-color background-clip background-position...
边框：
1.border-style
属性：
| 值 | 说明 |
| none | 定义无边框。 |
| hidden | 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
| inherit | 规定应该从父元素继承边框样式。 |
2.border-width.
属性：
| 值 | 描述 |
| thin | 定义细的上边框。 |
| medium | 默认值。定义中等的上边框。 |
| thick | 定义粗的上边框。 |
| length | 允许您自定义上边框的宽度。 |
| inherit | 规定应该从父元素继承边框宽度。 |
4.复合属性设置：
border：border-style|border-color|border-width（无序）
p { border ： red 12px dashed }
7.美化网页菜单（列表）
CSS3列表
1.无序列表
<ul list-style-type：disc>
<li>无序列表项<li>
<li>无序列表项<li>
<li>无序列表项<li>
</ul>
2.有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
2.自定义列表
<dl>
<dt>电脑</dt>
<dd>是一种能够按照程序运行的电子设备</dd>
</dl>list-style-type：设置或检索对象的列表项所使用的预设标记
| 值 | 描述 |
| disc | 实心圆 |
| circle | 空心圆 |
| square | 实心方块 |
| decimal | 阿拉伯数字 |
| lower-roman | 小写罗马数字 |
| upper-roman | 大写罗马数字 |
| lower-alpha | 小写英文字母 |
| upper-alpha | 大写英文字母 |
| none | 不使用项目符号 |
| armenian | 传统的亚美尼亚数字 |
| cjk-ideographic | 浅白的表意数字 |
| georgian | 传统的乔治数字 |
| lower-greek | 基本的希腊小写字母 |
| hebrew | 传统的希伯莱数字 |
| hiragana | 日文平假名字符 |
| hiragana-iroha | 日文平假名序号 |
| katakana | 日文片假名字符 |
| katakana-iroha | 日文片假名序号 |
| lower-latin | 小写拉丁字母 |
| upper-latin | 大写拉丁字母 |
list-type-position：设置在何处放置列表项标记
| 值 | 描述 |
| inside | 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 |
| outside | 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 |
| inherit | 规定应该从父元素继承 list-style-position 属性的值。 |
list-style-image：url（图片路径）使用图像来替换列表项的标记
| 值 | 描述 |
| URL | 图像的路径。 |
| none | 默认。无图形被显示。 |
| inherit | 规定应该从父元素继承 list-style-image 属性的值。 |
list-style：是设置list-style-type，list-style-image和list-style-position的简写
属性
list-style： list-style-type list-style-position list-style-image（按顺序）
8.美化表格和表单的样式
1.border-collapse：separate | collapse | inherit
2.border-width
3.border-color
4.caption-side：设置表格标题的位置
| 值 | 说明 |
| top | 默认值。把表格标题定位在表格之上。 |
| bottom | 把表格标题定位在表格之下。 |
| inherit | 规定应该从父元素继承 caption-side 属性的值。 |
5.empty-cells：设置是否显示表格中的空单元格
| 值 | 说明 |
| hide | 不在空单元格周围绘制边框。 |
| show | 在空单元格周围绘制边框。默认。 |
| inherit | 规定应该从父元素继承 empty-cells 属性的值。 |
6.table-layout：设置表单的布局形式
| 值 | 说明 |
| automatic | 默认。列宽度由单元格内容设定。 |
| fixed | 列宽由表格宽度和列宽度设定。 |
| inherit | 规定应该从父元素继承 table-layout 属性的值。 |
7.border-spacing 属性设置相邻单元格的边框间的距离。
| 值 | 说明 |
| length length | 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个 length 参数，那么定义的是水平和垂直间距。 如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。 |
| inherit | 指定应该从父元素继承border - spacing属性的值 |
| 值 | 描述 |
| length | 定义圆角的形状。 |
| % | 以百分比定义圆角的形状。 |
| 值 | 说明 |
| border-image-source | 用在边框的图片的路径。 |
| border-image-slice | 图片边框向内偏移。 |
| border-image-width | 图片边框的宽度。 |
| border-image-outset | 边框图像区域超出边框的量。 |
| border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched) |
9.美化超链接和鼠标
a:link - 定义正常的未访问链接的样式
a:visited - 定义访问链接的样式
a:active - 一旦你点击链接，链接就会**
a:hover - 当鼠标悬停时，链接悬停
当为链接设置样式时，必须遵循以下规则：
◊a:hover 必须在a:link和a:visited之后
◊a:active 必须在a:hover之后
设置鼠标光标样式：cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
style=“cursor：属性值”
| 值 | 说明 （索引中有详细介绍） |
| auto | 默认。浏览器设置的光标。 |
| url | 需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 |
| auto | 默认。浏览器设置的光标。 |
| crosshair | 光标呈现为十字线。 |
| pointer | 光标呈现为指示链接的指针（一只手） |
| move | 此光标指示某对象可被移动。 |
| e-resize | 此光标指示矩形框的边缘可被向右（东）移动。 |
| ne-resize | 此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
| nw-resize | 此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
| n-resize | 此光标指示矩形框的边缘可被向上（北）移动。 |
| se-resize | 此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
| sw-resize | 此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
| s-resize | 此光标指示矩形框的边缘可被向下移动（北/西）。 |
| w-resize | 此光标指示矩形框的边缘可被向左移动（西）。 |
| text | 此光标指示文本。 |
| wait | 此光标指示程序正忙（通常是一只表或沙漏）。 |
| help | 此光标指示可用的帮助（通常是一个问号或一个气球）。 |