css基础
/*······*/:在css中添加注释。
内层样式覆盖外层样式
CSS(层叠样式表语言)：配置网页文本、颜色、页面布局。
优点：更多排版和页面布局控制
样式和结构分离
样式可以存储
文档变得更小
网站维护更容易
配置css的方法：（就近原则）
内联样式：<body style="color:red;">
嵌入样式：<style>
body{color:red;}
</style>
外部样式：<link rel="stylesheet href="color.css">
导入样式
区别：外部样式会产生缓存，第二次使用时使用的是缓存中的样式
内部样式不会产生缓存，会随着页面刷新而刷新
必需的属性:type
text/css
可选的属性:media screen
tty
tv
projection
handheld
print
braille
aural
all
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。
CSS规则包含一个选择符（html元素名称、类名、id）
和一个声明（css属性、值）
*选择器：
通配符选择器
class 和 id 名称对大小写是敏感的。
class选择符：可在网页多次应用。
.feature{color:red;}
<li class="feature（可随意命名，但不能以数字开头）"></li>
id选择符：在每个网页只能应用一次。（优先识别1）
#content{color:red;}
<div id="content"></div>
标签选择器：body{color:red;}
属性选择器 a[href] {color:red;}
后代选择符：
#content p{color:red;}
分组选择器：ul,ol{color:red;}
上下文选择器 (contextual selectors)/派生选择器:ul .c{color:red;}
CSS 子元素选择器 div>>span {color:red;}
CSS 相邻兄弟选择器 p++div {color:red;}
p~div {color:red;}
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
span元素：定义一个上下示留空的内联区域
<p><span class=""featuer>yes</span></p>
<span> 标签被用来组合文档中的行内元素。
配置元素之间的边距：margin-bottom:0;
W3C提供免费的标记语言语法校验服务，http://validator.w3.org/
校验外部的一个css样式表，http://jigsaw.w3.org/css-validator
图片：
图片类型：
GIF/JPEG/PNG/WebP
像素化、缩略图
img：<img src="" height="" width="" alt="" alig="">
图片链接无边框：
img{border-style:none;}
配置背景图片：
body{background-image:url();}
背景图片是在网页中滚动还是固定：
background-attachment
scroll(相对文本固定)/fixed（相对网页固定）
背景图片平铺行为：
background-repeat:
repeat/repeat-y/repeat-x/no-repeat/speat/round.
定位背景图片：
background-position
left/top/center/bottom/right
background:url(image/logo.jpg) no-repeat -85px 85px;(图向左移动85px，向下移动85px)
配置多张背景图片：
渐进式增强：从基本功能开始，逐渐增强用户体验。
配置收藏图标：
<link rel="icon" herf="" type="image/x-icon">
type属性的值是文件的MIME类型，
.ico图标文件的MIME类型默认是image/x-icon.
opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明
filter:alpha(opacity=x) IE8 以及更早的版本使用滤镜，
x 能够取的值从 0 到 100。值越小，越透明
图像映射：热点（hotspot）
map：name/id.
area：href/shape(coords)/alt/title.
img：src/usrmap/alt/width/height.
<img src="" usemap="#mymap"/>
<map name="mymap">
<area shape="circle" coords="60,60,80" href=""></area>
</map>
字体：
times new roman(默认字体)
(@font-face)
font {font:normal 40px "MV Boli";} (粗细 大小 体系)
font-family 规定元素的字体系列。
body{font-family:Verdana,Arial,sana-serif;}
font-style 属性定义字体的风格。
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
font-variant 属性设置小型大写字母的字体显示文本（normal/small-caps ）
font-size 设置字号。
普通文本（比如段落）的默认大小是 16 像素 (16px=1em)
font-weight font-weight 属性设置文本的粗细(100-900)
100 对应最细的字体变形
900 对应最粗的字体变形
400 等价于 normal
700 等价于 bold(粗体)
font-style 设置倾斜显示的文本。
（normal(默认)、italic=<i>=<em>、oblique）
文本：
line-height 修改文本行的空白的大小写，通常配置成百分比值。
text-shadow 设置文本阴影。
text-align 配置文本和内联元素在快元素中的对齐方式。
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
text-indent 配置元素中第一行文本的缩进。
word-spacing 属性增加或减少单词间的空白（即字间隔）。
letter-spacing 属性增加或减少字符间的空白（字符间距,汉字间距）。
text-transform 属性控制文本的大小写。
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
text-decoration 属性规定添加到文本的修饰。
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
white-space 属性设置如何处理元素内的空白。
值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许
direction 属性规定文本的方向 / 书写方向。
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
unicode-bidi 属性设置文本的方向。
normal
元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。
embed
如果是一个行内元素，这个值对于双向算法会打开附件的一层嵌套。
bidi-override
这会为行内元素创建一个覆盖。
链接：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
列表：
list-style-type 属性设置列表项标记的类型
none 无标记。
disc 默认。标记是实心圆
circle 标记是空心圆
square 标记是实心方块
decimal 数字。。。。。
list-style-image 属性使用图像来替换列表项的标记
list-style-position 属性设置在何处放置列表项标记
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside 默认值。保持标记位于文本的左侧
。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
list-style 简写属性在一个声明中设置所有的列表属性
ul{list-style:square inside url('/i/arrow.gif');}
表格：
border-radius:10px; 圆角
border-collapse 设置是否把表格边框合并为单一的边框
border-spacing 设置分隔单元格边框的距离
caption-side 设置表格标题的位置
top 默认值。把表格标题定位在表格之上
bottom 把表格标题定位在表格之下
empty-cells 设置是否显示表格中的空单元格
hide 不在空单元格周围绘制边框
show 在空单元格周围绘制边框。默认
table-layout 设置显示单元、行和列的算法
automatic 默认。列宽度由单元格内容设定
fixed 列宽由表格宽度和列宽度设定
轮廓（outline）是绘制于元素周围的一条线，
位于边框边缘的外围，可起到突出元素的作用
outline 在一个声明中设置所有的轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
outline-width 设置轮廓的宽度
thin 规定细轮廓。
medium 默认。规定中等的轮廓。
thick 规定粗的轮廓。
length 允许您规定轮廓粗细的值。
框模型：
display 属性规定元素应该生成的框的类型
element : 元素。
padding : 内边距，也有资料将其翻译为填充
border : 边框（-top/right/bottom/left）
{border: medium double rgb(250,0,255)}（宽度 风格 颜色）
border-style 属性用于设置元素所有边框的样式，
或者单独地为各边设置边框样式（见outline-style）
border-width 属性为边框指定宽度。
border-color 属性设置四条边框的颜色
transparent 默认值。边框颜色为透明。
margin : 外边距，也有资料将其翻译为空白或空白边
(可通过将左和右外边距设置为 "auto"，来对齐块元素,使页面居中)
auto:告诉浏览器自动计算边距。
外边距合并 当两个垂直外边距相遇时，它们将形成一个外边距，
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，
行内框、浮动框或绝对定位之间的外边距不会合并
定位：
position 属性规定元素的定位类型
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
元素框从文档流完全删除，元素原先在正常文档流中所占的空间会关闭
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位
relative 生成相对定位的元素，相对于其正常位置进行定位。
原本所占的空间仍保留
static 默认值。没有定位，元素出现在正常的流中
overflow 如果元素中的内容超出了给定的宽度和高度属性，
overflow 属性可以确定是否显示滚动条等行为。
scroll 滚动条
visible 默认 自动溢出
hidden 自动截断溢出部分
auto 设置浏览器来自动地处理溢出
clip 元素被剪裁到这个形状内，并显示出来 clip:rect(0px 50px 200px 0px)
vertical-align 在文本中垂直排列图象{vertical-align:text-top}
z-index 默认为0，Z-index 1 拥有更高的优先级
浮动：
float 属性定义元素在哪个方向浮动
clear 属性规定元素的哪一侧不允许其他浮动元素。
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
伪类：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
:first-line 伪元素用于向文本的首行设置特殊样式
:first-letter 伪元素用于向文本的首字母设置特殊样式：
:before 伪元素可以在元素的内容前面插入新内容。
:after 伪元素可以在元素的内容之后插入新内容。content?
分类：
cursor 属性规定要显示的光标的类型（形状）
display 属性规定元素应该生成的框的类型（不保留原本位置）
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。
clear 设置一个元素的侧面是否允许其他的浮动元素
visibility 设置元素是否可见或不可见
/*······*/:在css中添加注释。
内层样式覆盖外层样式
CSS(层叠样式表语言)：配置网页文本、颜色、页面布局。
优点：更多排版和页面布局控制
样式和结构分离
样式可以存储
文档变得更小
网站维护更容易
配置css的方法：（就近原则）
内联样式：<body style="color:red;">
嵌入样式：<style>
body{color:red;}
</style>
外部样式：<link rel="stylesheet href="color.css">
导入样式
区别：外部样式会产生缓存，第二次使用时使用的是缓存中的样式
内部样式不会产生缓存，会随着页面刷新而刷新
必需的属性:type
text/css
可选的属性:media screen
tty
tv
projection
handheld
braille
aural
all
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。
CSS规则包含一个选择符（html元素名称、类名、id）
和一个声明（css属性、值）
*选择器：
通配符选择器
class 和 id 名称对大小写是敏感的。
class选择符：可在网页多次应用。
.feature{color:red;}
<li class="feature（可随意命名，但不能以数字开头）"></li>
id选择符：在每个网页只能应用一次。（优先识别1）
#content{color:red;}
<div id="content"></div>
标签选择器：body{color:red;}
属性选择器 a[href] {color:red;}
后代选择符：
#content p{color:red;}
分组选择器：ul,ol{color:red;}
上下文选择器 (contextual selectors)/派生选择器:ul .c{color:red;}
CSS 子元素选择器 div>>span {color:red;}
CSS 相邻兄弟选择器 p++div {color:red;}
p~div {color:red;}
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
span元素：定义一个上下示留空的内联区域
<p><span class=""featuer>yes</span></p>
<span> 标签被用来组合文档中的行内元素。
配置元素之间的边距：margin-bottom:0;
W3C提供免费的标记语言语法校验服务，http://validator.w3.org/
校验外部的一个css样式表，http://jigsaw.w3.org/css-validator
图片：
图片类型：
GIF/JPEG/PNG/WebP
像素化、缩略图
img：<img src="" height="" width="" alt="" alig="">
图片链接无边框：
img{border-style:none;}
配置背景图片：
body{background-image:url();}
背景图片是在网页中滚动还是固定：
background-attachment
scroll(相对文本固定)/fixed（相对网页固定）
背景图片平铺行为：
background-repeat:
repeat/repeat-y/repeat-x/no-repeat/speat/round.
定位背景图片：
background-position
left/top/center/bottom/right
background:url(image/logo.jpg) no-repeat -85px 85px;(图向左移动85px，向下移动85px)
配置多张背景图片：
渐进式增强：从基本功能开始，逐渐增强用户体验。
配置收藏图标：
<link rel="icon" herf="" type="image/x-icon">
type属性的值是文件的MIME类型，
.ico图标文件的MIME类型默认是image/x-icon.
opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明
filter:alpha(opacity=x) IE8 以及更早的版本使用滤镜，
x 能够取的值从 0 到 100。值越小，越透明
图像映射：热点（hotspot）
map：name/id.
area：href/shape(coords)/alt/title.
img：src/usrmap/alt/width/height.
<img src="" usemap="#mymap"/>
<map name="mymap">
<area shape="circle" coords="60,60,80" href=""></area>
</map>
字体：
times new roman(默认字体)
(@font-face)
font {font:normal 40px "MV Boli";} (粗细 大小 体系)
font-family 规定元素的字体系列。
body{font-family:Verdana,Arial,sana-serif;}
font-style 属性定义字体的风格。
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
font-variant 属性设置小型大写字母的字体显示文本（normal/small-caps ）
font-size 设置字号。
普通文本（比如段落）的默认大小是 16 像素 (16px=1em)
font-weight font-weight 属性设置文本的粗细(100-900)
100 对应最细的字体变形
900 对应最粗的字体变形
400 等价于 normal
700 等价于 bold(粗体)
font-style 设置倾斜显示的文本。
（normal(默认)、italic=<i>=<em>、oblique）
文本：
line-height 修改文本行的空白的大小写，通常配置成百分比值。
text-shadow 设置文本阴影。
text-align 配置文本和内联元素在快元素中的对齐方式。
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
text-indent 配置元素中第一行文本的缩进。
word-spacing 属性增加或减少单词间的空白（即字间隔）。
letter-spacing 属性增加或减少字符间的空白（字符间距,汉字间距）。
text-transform 属性控制文本的大小写。
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
text-decoration 属性规定添加到文本的修饰。
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
white-space 属性设置如何处理元素内的空白。
值 空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许
direction 属性规定文本的方向 / 书写方向。
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
unicode-bidi 属性设置文本的方向。
normal
元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。
embed
如果是一个行内元素，这个值对于双向算法会打开附件的一层嵌套。
bidi-override
这会为行内元素创建一个覆盖。
链接：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
列表：
list-style-type 属性设置列表项标记的类型
none 无标记。
disc 默认。标记是实心圆
circle 标记是空心圆
square 标记是实心方块
decimal 数字。。。。。
list-style-image 属性使用图像来替换列表项的标记
list-style-position 属性设置在何处放置列表项标记
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside 默认值。保持标记位于文本的左侧
。列表项目标记放置在文本以外，且环绕文本不根据标记对齐
list-style 简写属性在一个声明中设置所有的列表属性
ul{list-style:square inside url('/i/arrow.gif');}
表格：
border-radius:10px; 圆角
border-collapse 设置是否把表格边框合并为单一的边框
border-spacing 设置分隔单元格边框的距离
caption-side 设置表格标题的位置
top 默认值。把表格标题定位在表格之上
bottom 把表格标题定位在表格之下
empty-cells 设置是否显示表格中的空单元格
hide 不在空单元格周围绘制边框
show 在空单元格周围绘制边框。默认
table-layout 设置显示单元、行和列的算法
automatic 默认。列宽度由单元格内容设定
fixed 列宽由表格宽度和列宽度设定
轮廓（outline）是绘制于元素周围的一条线，
位于边框边缘的外围，可起到突出元素的作用
outline 在一个声明中设置所有的轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
none 默认。定义无轮廓。
dotted 定义点状的轮廓。
dashed 定义虚线轮廓。
solid 定义实线轮廓。
double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
outline-width 设置轮廓的宽度
thin 规定细轮廓。
medium 默认。规定中等的轮廓。
thick 规定粗的轮廓。
length 允许您规定轮廓粗细的值。
框模型：
display 属性规定元素应该生成的框的类型
element : 元素。
padding : 内边距，也有资料将其翻译为填充
border : 边框（-top/right/bottom/left）
{border: medium double rgb(250,0,255)}（宽度 风格 颜色）
border-style 属性用于设置元素所有边框的样式，
或者单独地为各边设置边框样式（见outline-style）
border-width 属性为边框指定宽度。
border-color 属性设置四条边框的颜色
transparent 默认值。边框颜色为透明。
margin : 外边距，也有资料将其翻译为空白或空白边
(可通过将左和右外边距设置为 "auto"，来对齐块元素,使页面居中)
auto:告诉浏览器自动计算边距。
外边距合并 当两个垂直外边距相遇时，它们将形成一个外边距，
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，
行内框、浮动框或绝对定位之间的外边距不会合并
定位：
position 属性规定元素的定位类型
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
元素框从文档流完全删除，元素原先在正常文档流中所占的空间会关闭
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位
relative 生成相对定位的元素，相对于其正常位置进行定位。
原本所占的空间仍保留
static 默认值。没有定位，元素出现在正常的流中
overflow 如果元素中的内容超出了给定的宽度和高度属性，
overflow 属性可以确定是否显示滚动条等行为。
scroll 滚动条
visible 默认 自动溢出
hidden 自动截断溢出部分
auto 设置浏览器来自动地处理溢出
clip 元素被剪裁到这个形状内，并显示出来 clip:rect(0px 50px 200px 0px)
vertical-align 在文本中垂直排列图象{vertical-align:text-top}
z-index 默认为0，Z-index 1 拥有更高的优先级
浮动：
float 属性定义元素在哪个方向浮动
clear 属性规定元素的哪一侧不允许其他浮动元素。
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
伪类：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
:first-line 伪元素用于向文本的首行设置特殊样式
:first-letter 伪元素用于向文本的首字母设置特殊样式：
:before 伪元素可以在元素的内容前面插入新内容。
:after 伪元素可以在元素的内容之后插入新内容。content?
分类：
cursor 属性规定要显示的光标的类型（形状）
display 属性规定元素应该生成的框的类型（不保留原本位置）
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。
clear 设置一个元素的侧面是否允许其他的浮动元素
visibility 设置元素是否可见或不可见
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
