1.
a:link 未访问过的链接
a:visited 已访问过的链接
a:hover 鼠标滑过的链接、
a:active 已选中的链接
2.
first-child选择元素的第一个子元素
如：p:first-child 选中第一个p
p>i:first-child 选中p元素里子元素i里的第一个i
p：first-child i 选中第一个p元素里的i元素们
3.
：lang类使你有能力为不同的语言定义特殊的规则
例如： 为q元素定义引号类型，这个q的lang 值为no
p:lang(no){……}
……
<body>
<p>some context<q lang="no">a quote in a paragraph</p>some context</p>
</body>
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位</title>
<style>
div{border:1px solid red; width:100px; height:100px;}
div:nth-child(3)/* 指body里的第三个div */{ position: relative;left:200px; }
</style>
</head>
<body>
<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div>
</body>
</html>
5.
font-variant 把段落设置为小型大写字母体
值：normal 默认值，浏览器会显示一个标准的字体
small-caps 浏览器会显示小型大写字母的字体
inherit 规定应该从父元素继承次属性的值
6.
p:first-line 给p元素的第一行设置样式
属性：word-spacing/letter-spacing/text-decoration/line-height/clear/color properties/font properties/background properties/vertical-align
p:first-letter 给p元素的第一个字母设置样式
属性：color properties/font properties/background properties/margin properties/padding properties/borderproperties/text-decoration/vertical-align/text-transform/line-height/float/clear
伪元素可与css类结合：
p.artical:first-letter 为类为class的段落设置首字母
p.first-letter{color:#ff0000;font-size:xx-large;}
p.first-line{color:#0000ff;font-variant:small-caps;}
设置段落的第一个字母颜色为红色，字体大小为xx-large；设置第一行里其余部分字体颜色为蓝色，并以小型大写字母显示，段落中其余部分将以默认字体大小和颜色来显示。
：before 伪元素可以在元素的内容前面插入新内容。
h1:before{content:url(/statics/imges/course/smelly.gif);}
:after同理
7.
list-style设置所有列表属性：
list-style-type:square/circle/disc/upper-roman/lower-roman/none/lower-alplha/upper-alpha/……
list-style-position：inside(列表项目标记放置在文本以内)/outside/inherit
list-style-image：url("/i/arrow.gif")
inherit
body
{ background-image:url('/statics/images/w3c/logo.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
9.
ul{
list-atyle-type;none;
padding:0px;
margin:0px;
}
ul li{
background-image:url(aqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
10.外部样式表：
<head><link rel="stylesheet"type="text/css"href="">
内部样式表：
<head><style>
hr{color:sienna;}
p{margin-left:20px;}
body{background-image:url("");}
</style></head>
内连样式：
<p style="color:sineea;margin-left:20px;">这是一个段落</p>
多重样式：某些属性在不同的样式表中被同样的选择器定义。那么属性值将从更具体的样式表中被继承过来。
world-space 字间距
unicode-bidi 设置或返回文本是否被重写
vertical-align:（text-top）设置元素的垂直对齐
white-space 设置元素中空白的处理方式
letter-space 设置字符的间距
direction 设置文本的方向
字体样式：font-style:normal(正常显示文本)/italic（斜体）/oblique(倾斜的字体)
font-size:字体大小
1em=16px
字体加粗：font-weight:normal(动议标准的字符)/bold（加粗）/bolder(更粗)/lighter（更细的字符）
字体的转变：font-variant:normal(显示一个标准的字体)/inherit/small-caps(显示小型大写的字体)
list-style-type:制定列表项标记的类型（none/circle/square/dise实心/demical阿拉伯数字/lower-alpha小写字母/lower-roman小写罗马字体/upper-alpha大写字母/upper-roman大写罗马字体）
text-align文字水平对齐
ertical-align 文字垂直对齐
padding-top/bottom
padding:3px 7px 2px 7px;
content常指文字、图片等元素，但是也可以是小盒子（DIV嵌套）
一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。
元素内容占据的空间是由 width 属性设置的，
这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
15.
CSS边框(border) 可自定义样式、宽度以及颜色。
border-style属性定义边框的样式 值：
none: 默认无边框
dotted: 点线框
dashed: 虚线框
solid: 实线边界
double: 定义两个边界 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界 效果取决于边界的颜色值
ridge： 定义3D脊边界 效果取决于边界的颜色值
inset： 定义一个3D的嵌入边框 效果取决于边界的颜色值
outset： 定义一个3D突出边框 效果取决于边界的颜色值
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
左、右边框是 solid
border-style:dotted;
四面边框是 dotted
border-width 属性为边框指定宽度
值可为：2px/0.1em/thin/medium(默认值)/thick（浓的）
border-color设置边框的颜色，它一次可以接受最多 4 个颜色值。 值可为：red/rgb(255,0,0)/#ff0000/transparent(透明)
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
outline-style:none/dotted/dashed/double/groove/inset/outset/ridge
outline-color:
outline-width:thin/thick/medium
16.
css padding属性的百分比值是相对于父元素的width计算的，如果改变了父元素的width，则她们也会改变。
不同侧面的填充：
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Padding属性，可以有一到四个值。
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
padding:25px 50px;
上下填充为25px
左右填充为50px
padding:25px;
所有的填充都是25px
17.
<style>
html {height:90%;}
body {height:90%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="/attachments/cover/cover_css.png"
width="95" height="84" /><br>
<img class="big" src="/attachments/cover/cover_css.png"
width="95" height="84" /><br>
<img class="small" src="/attachments/cover/cover_css.png"
width="95" height="84" />
</body>
18.
display属性设置元素如何显示，visibility设置是否显示
隐藏元素：display：none（直接消失）或visibility:hidden（隐藏的元素会占用与为隐藏之前一样的空间，仍然影响布局。）
块元素是一个元素 占用全部宽度 在前后都是换行符。例：<h1><p><div>
块元素是一个元素 占用全部宽度 在前后都是换行符。例：<h1><p><div>
块元素是一个元素 占用全部宽度 在前后都是换行符。例：<h1><p><div>
内敛元素例子：<span><a>
class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
19.
border-collapse 用于表格属性, 表示表格的两边框合并为一条。
当一个元素的visibility被设置为collapse值后，对于一般的元素表现跟hidden一样。但如果是table相关的元素。如table行，table group,table列，table column group，它的表现跟display:none一样，它们占用的空间会释放。
20.
4种定位方法:
a.html的默认值 静态定位不会受到top/bottom/left/right影响
b.positin:fixed 元素相对于浏览器窗口固定。
c.position:relative
top/bottom/left/right:-50px; 元素相对于原来的位置的改变
d.position:absolute.
top/bottom/left/right:50px; 元素的位置相对于最近的已定位父元素。若没有已定位的父元素，那么它的位置相对于<html>
Absolutely定位的元素和其他元素重叠。不占据空间。
z-index指定了一个元素的堆叠顺序。一个元素可有正数或负数的堆叠顺序。（哪个元素该放在前面哪个元素该放在后面。）
21.
border-collapse: collapse;设置边框是否合并
box-shadow向框添加一个或多个阴影。该属性是由逗号分割的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来确定，省略长度的值是0.
语法：
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:水平阴影的位置
v-shadow:垂直阴影的位置
blur：模糊距离
spread：阴影的尺寸
color：阴影的颜色
inset：将外部阴影改为内部阴影。
22.
display元素规定应该生成的框的类型。
值：
none
block 显示为块级元素
inline 元素显示为内联元素，元素前后没有换行符
inline-block 显示为行内块元素
list-term 元素会作为列表显示
run-in 元素会根据上下文作为块级元素或内联元素
table 元素作为块级元素表格显示
inline-table 作为内敛元素表格显示
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
23.
内联元素特点：
和其他元素都在一行上；
高度、行高、和顶以及底边距都不可改变；
宽度就是它的文字或图片的高度，不可改变；
内敛元素只能容纳文本或其他内敛元素，通常被包括在块级元素中使用。常见的内敛元素有“a/b/br”
2 abbr – 缩写
3 acronym – 首字母缩写
4 b – 粗体(不推荐)
5 bdo – bidi override
6 big – 大字体
7 br – 换行
8 cite – 引用
9 code – 计算机代码(在引用源码的时候需要)
10 dfn – 定义字段
11 em – 强调
12 font – 字体设定(不推荐)
13 i– 斜体
14 img – 图片
15 input – 输入框
16 kbd – 定义键盘文本
17 label – 表格标签
18 q – 短引用
19 s – 中划线(不推荐)
20 samp – 定义范例计算机代码
21 select – 项目选择
22 small – 小字体文本
23 span – 常用内联容器，定义文本内区块
24 strike – 中划线
25 strong – 粗体强调
26 sub – 下标
27 sup – 上标
28 textarea– 多行文本输入框
29 tt – 电传文本
30 u – 下划线
31 var – 定义变量
25.
可以使用任何的HTML元素来打开下拉菜单。如：span/ div /a<button>
26.
cursor属性规定要显示的光标类型
值：
url 需使用的自定义光标的url(在此列表的末端始终定义一个普通的光标，以防没有由url定义的可用光标。)
defaul 默认是一个箭头
aut 默认浏览器设置的光标
pointer 光标呈现出一只手
move 此光标指示某对象可被移动
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
27.
overflow : visible | auto | hidden | scroll
参数：
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且 clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
28.
opacity 属性设置元素的不透明级别。
默认值： 1
继承性： no
29.
filter:alpha(opacity=60); 这是ie的alpha滤镜
opacity是透明度 范围0 - 100
100就是完全透明了
30.
background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）
例：
img.home{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
解释：宽度：46px;高度：44px; - 定义我们使用的那部分图像
background:url(img_navsprites.gif) 0 0; -定义背景图像的位置（左0px,右0px）
这是使用图像拼合最简单的方法
31.
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。
"voice-family" 属性被设计为针对听觉用户终端
"font-size"属性可用于屏幕和印刷媒体
sans - serif字体比较适合在屏幕上阅读，而serif字体更容易在纸上阅读。
32.
@media 规则允许在相同样式表为不同媒体设置不同的样式。
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
33.
CSS 属性 选择器
顾名思义，CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。
34.
属性选择器：
title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。
提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。
语法：<element title="value">
属性和值选择器：
[title=w3cschool]
{
border:5px solid green;
}
属性和值的选择器 - 多值：
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
[title~=hello] { color:blue; }
包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
[lang|=en] { color:blue; }
表单样式
属性选择器样式无需使用class或id的形式:
例：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
35.
<a href="#"style="background-color:red;color:white"></a>
使用"#"表示转到一个固定链接。
36.
placeholder text（占位符）是用户在 input 框输入任何内容之前放置在 input 框中的预定义文本。
你可以创建如下所示的占位符：
<input type="text" placeholder="this is placeholder text">
37.
你可以使用HTML来构建跟服务器交互的Web表单。你可以通过在form元素上添加一个action属性来执行此操作。
action属性的值指定了表单提交到服务器的地址。
38.在表单里添加input输入框和button按钮
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">button</button>
</form>
给你的文本输入框添加 required属性，这样用户不填写输入框就无法提交表单。
单选按钮是 input 输入框的一种类型。 每个单选按钮都应该嵌套在自己的 label(标签) 元素中。
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
每一个复选按钮都应嵌套在其自己的 label元素中。 所有关联的复选按钮输入应该具有相同的 name属性。
<input type="checkbox" name="personality">
注意：type与name之间得有空格。input元素中各属性之间得有空格。
使用 checked 属性，你可以设置一个单选框和复选框默认被选中
39、可以设置多重图像
body{ background-image:url(/i/bg_flower.gif),url(/i/bg_flower_2.gif)； }
background-orign:规定背景图片的定位区
语法： background-origin: padding-box|border-box|content-box;
在盒的边上面 |在盒的边上 |在盒内的内容那
background-clip:属性规定背景的绘制区域
语法： background-clip: border-box|padding-box|content-box;
40.
:focus选择器 对获得焦点的选择器可设置样式。如对input设置样式：
input:focus{background-color:yellow;}
:first-letter{} 如：p:first-letter{font-color:red;}
对p元素的首字母设置为红色
：first-line 对所有某元素的首行设置样式
：first-child 对所有某元素的第一个子标签
：before 在某个元素前插入内容
：after 在某个元素后插入内容
element1~element2 如：p~ul 选择前面有p元素的每个ul元素
[attribute^=value] 如：a[src^"https"] 选择src属性的属性值以"https"开头的每个<a>元素
：lang(language) 选择lang属性的属性值为language的元素，并给其设置样式 如：
p:lamg(en){background-color;}
解释：给lang属性的值以en开头的p元素设置样式
[attribute$=value] 如：a[src$=".pdf"] 选择以.pdf结尾的src的a元素
[attribute*=value] 如：a[src*="aaa"] 选择src属性里有"aaa"字符串的每个a元素
：first-of-type 如:p：first_of-type 设置第一个p
:last-of-type
:only-of-type(n) p:only-of-type 设置父元素唯一的p
：only-child 设置父元素唯一的子元素
:nth-child（n） 设置父元素的第n子元素
:last-child 父元素最后一个子元素
:nth-last-child（n）
：nth-of-type p：nth-of-type(2) 设置属于父元素第二个p元素的样式
：nth-last-of-type(n) 同上，但是是从最后一个元素开始
：root 选择文档的根元素
：empty 选择没有子元素的每个某元素
：target 设置元素里某url链接的地址里内容的样式
：disabled 设置某元素禁用
a:link 未访问过的链接
a:visited 已访问过的链接
a:hover 鼠标滑过的链接、
a:active 已选中的链接
2.
first-child选择元素的第一个子元素
如：p:first-child 选中第一个p
p>i:first-child 选中p元素里子元素i里的第一个i
p：first-child i 选中第一个p元素里的i元素们
3.
：lang类使你有能力为不同的语言定义特殊的规则
例如： 为q元素定义引号类型，这个q的lang 值为no
p:lang(no){……}
……
<body>
<p>some context<q lang="no">a quote in a paragraph</p>some context</p>
</body>
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>相对定位</title>
<style>
div{border:1px solid red; width:100px; height:100px;}
div:nth-child(3)/* 指body里的第三个div */{ position: relative;left:200px; }
</style>
</head>
<body>
<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div>
</body>
</html>
5.
font-variant 把段落设置为小型大写字母体
值：normal 默认值，浏览器会显示一个标准的字体
small-caps 浏览器会显示小型大写字母的字体
inherit 规定应该从父元素继承次属性的值
6.
p:first-line 给p元素的第一行设置样式
属性：word-spacing/letter-spacing/text-decoration/line-height/clear/color properties/font properties/background properties/vertical-align
p:first-letter 给p元素的第一个字母设置样式
属性：color properties/font properties/background properties/margin properties/padding properties/borderproperties/text-decoration/vertical-align/text-transform/line-height/float/clear
伪元素可与css类结合：
p.artical:first-letter 为类为class的段落设置首字母
p.first-letter{color:#ff0000;font-size:xx-large;}
p.first-line{color:#0000ff;font-variant:small-caps;}
设置段落的第一个字母颜色为红色，字体大小为xx-large；设置第一行里其余部分字体颜色为蓝色，并以小型大写字母显示，段落中其余部分将以默认字体大小和颜色来显示。
：before 伪元素可以在元素的内容前面插入新内容。
h1:before{content:url(/statics/imges/course/smelly.gif);}
:after同理
7.
list-style设置所有列表属性：
list-style-type:square/circle/disc/upper-roman/lower-roman/none/lower-alplha/upper-alpha/……
list-style-position：inside(列表项目标记放置在文本以内)/outside/inherit
list-style-image：url("/i/arrow.gif")
inherit
8.
定位页面背景图像：
<style>body
{ background-image:url('/statics/images/w3c/logo.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
9.
ul{
list-atyle-type;none;
padding:0px;
margin:0px;
}
ul li{
background-image:url(aqpurple.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
10.外部样式表：
<head><link rel="stylesheet"type="text/css"href="">
内部样式表：
<head><style>
hr{color:sienna;}
p{margin-left:20px;}
body{background-image:url("");}
</style></head>
内连样式：
<p style="color:sineea;margin-left:20px;">这是一个段落</p>
多重样式：某些属性在不同的样式表中被同样的选择器定义。那么属性值将从更具体的样式表中被继承过来。
11
.text-transform:capitalize/none/inherit/uppercase/lowercase
text-indent 所有元素的第一行都可以缩进一个给定的长度world-space 字间距
12
.text-shadow 设置文本阴影
line-height:设置行高unicode-bidi 设置或返回文本是否被重写
vertical-align:（text-top）设置元素的垂直对齐
white-space 设置元素中空白的处理方式
letter-space 设置字符的间距
direction 设置文本的方向
字体样式：font-style:normal(正常显示文本)/italic（斜体）/oblique(倾斜的字体)
font-size:字体大小
1em=16px
字体加粗：font-weight:normal(动议标准的字符)/bold（加粗）/bolder(更粗)/lighter（更细的字符）
字体的转变：font-variant:normal(显示一个标准的字体)/inherit/small-caps(显示小型大写的字体)
list-style-type:制定列表项标记的类型（none/circle/square/dise实心/demical阿拉伯数字/lower-alpha小写字母/lower-roman小写罗马字体/upper-alpha大写字母/upper-roman大写罗马字体）
13.
table,th,td{border:1px solid black}
border-collapse设置表格的边框是否被折叠成一个单一的边框或隔开 table{border-collapse:collapse;}text-align文字水平对齐
ertical-align 文字垂直对齐
padding-top/bottom
padding:3px 7px 2px 7px;
14.
css盒模型：封装html元素 包括：边距（margin）、边框（border）、填充（padding）、内容（content）
content（内容）就是盒子里装的东西，padding（内边距）就是怕盒子里装的东西损坏而添加的泡沫或者其他抗震防挤压的辅料，border（边框）就是盒子本身了，margin（外边距）则说明盒子摆放的时候不能全部堆在一起，要留一定空隙。content常指文字、图片等元素，但是也可以是小盒子（DIV嵌套）
一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。
元素内容占据的空间是由 width 属性设置的，
这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
15.
CSS边框(border) 可自定义样式、宽度以及颜色。
border-style属性定义边框的样式 值：
none: 默认无边框
dotted: 点线框
dashed: 虚线框
solid: 实线边界
double: 定义两个边界 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界 效果取决于边界的颜色值
ridge： 定义3D脊边界 效果取决于边界的颜色值
inset： 定义一个3D的嵌入边框 效果取决于边界的颜色值
outset： 定义一个3D突出边框 效果取决于边界的颜色值
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
左、右边框是 solid
border-style:dotted;
四面边框是 dotted
border-width 属性为边框指定宽度
值可为：2px/0.1em/thin/medium(默认值)/thick（浓的）
border-color设置边框的颜色，它一次可以接受最多 4 个颜色值。 值可为：red/rgb(255,0,0)/#ff0000/transparent(透明)
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
outline-style:none/dotted/dashed/double/groove/inset/outset/ridge
outline-color:
outline-width:thin/thick/medium
16.
css padding属性的百分比值是相对于父元素的width计算的，如果改变了父元素的width，则她们也会改变。
不同侧面的填充：
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Padding属性，可以有一到四个值。
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
padding:25px 50px;
上下填充为25px
左右填充为50px
padding:25px;
所有的填充都是25px
17.
<style>
html {height:90%;}
body {height:90%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="/attachments/cover/cover_css.png"
width="95" height="84" /><br>
<img class="big" src="/attachments/cover/cover_css.png"
width="95" height="84" /><br>
<img class="small" src="/attachments/cover/cover_css.png"
width="95" height="84" />
</body>
18.
display属性设置元素如何显示，visibility设置是否显示
隐藏元素：display：none（直接消失）或visibility:hidden（隐藏的元素会占用与为隐藏之前一样的空间，仍然影响布局。）
块元素是一个元素 占用全部宽度 在前后都是换行符。例：<h1><p><div>
块元素是一个元素 占用全部宽度 在前后都是换行符。例：<h1><p><div>
块元素是一个元素 占用全部宽度 在前后都是换行符。例：<h1><p><div>
内敛元素例子：<span><a>
class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
19.
border-collapse 用于表格属性, 表示表格的两边框合并为一条。
当一个元素的visibility被设置为collapse值后，对于一般的元素表现跟hidden一样。但如果是table相关的元素。如table行，table group,table列，table column group，它的表现跟display:none一样，它们占用的空间会释放。
20.
4种定位方法:
a.html的默认值 静态定位不会受到top/bottom/left/right影响
b.positin:fixed 元素相对于浏览器窗口固定。
c.position:relative
top/bottom/left/right:-50px; 元素相对于原来的位置的改变
d.position:absolute.
top/bottom/left/right:50px; 元素的位置相对于最近的已定位父元素。若没有已定位的父元素，那么它的位置相对于<html>
Absolutely定位的元素和其他元素重叠。不占据空间。
z-index指定了一个元素的堆叠顺序。一个元素可有正数或负数的堆叠顺序。（哪个元素该放在前面哪个元素该放在后面。）
21.
border-collapse: collapse;设置边框是否合并
box-shadow向框添加一个或多个阴影。该属性是由逗号分割的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来确定，省略长度的值是0.
语法：
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:水平阴影的位置
v-shadow:垂直阴影的位置
blur：模糊距离
spread：阴影的尺寸
color：阴影的颜色
inset：将外部阴影改为内部阴影。
22.
display元素规定应该生成的框的类型。
值：
none
block 显示为块级元素
inline 元素显示为内联元素，元素前后没有换行符
inline-block 显示为行内块元素
list-term 元素会作为列表显示
run-in 元素会根据上下文作为块级元素或内联元素
table 元素作为块级元素表格显示
inline-table 作为内敛元素表格显示
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
23.
内联元素特点：
和其他元素都在一行上；
高度、行高、和顶以及底边距都不可改变；
宽度就是它的文字或图片的高度，不可改变；
内敛元素只能容纳文本或其他内敛元素，通常被包括在块级元素中使用。常见的内敛元素有“a/b/br”
24.
2 abbr – 缩写
3 acronym – 首字母缩写
4 b – 粗体(不推荐)
5 bdo – bidi override
6 big – 大字体
7 br – 换行
8 cite – 引用
9 code – 计算机代码(在引用源码的时候需要)
10 dfn – 定义字段
11 em – 强调
12 font – 字体设定(不推荐)
13 i– 斜体
14 img – 图片
15 input – 输入框
16 kbd – 定义键盘文本
17 label – 表格标签
18 q – 短引用
19 s – 中划线(不推荐)
20 samp – 定义范例计算机代码
21 select – 项目选择
22 small – 小字体文本
23 span – 常用内联容器，定义文本内区块
24 strike – 中划线
25 strong – 粗体强调
26 sub – 下标
27 sup – 上标
28 textarea– 多行文本输入框
29 tt – 电传文本
30 u – 下划线
31 var – 定义变量
25.
可以使用任何的HTML元素来打开下拉菜单。如：span/ div /a<button>
26.
cursor属性规定要显示的光标类型
值：
url 需使用的自定义光标的url(在此列表的末端始终定义一个普通的光标，以防没有由url定义的可用光标。)
defaul 默认是一个箭头
aut 默认浏览器设置的光标
pointer 光标呈现出一只手
move 此光标指示某对象可被移动
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。
27.
overflow : visible | auto | hidden | scroll
参数：
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且 clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
28.
opacity 属性设置元素的不透明级别。
默认值： 1
继承性： no
29.
filter:alpha(opacity=60); 这是ie的alpha滤镜
opacity是透明度 范围0 - 100
100就是完全透明了
30.
background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）
例：
img.home{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
解释：宽度：46px;高度：44px; - 定义我们使用的那部分图像
background:url(img_navsprites.gif) 0 0; -定义背景图像的位置（左0px,右0px）
这是使用图像拼合最简单的方法
31.
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。
"voice-family" 属性被设计为针对听觉用户终端
"font-size"属性可用于屏幕和印刷媒体
sans - serif字体比较适合在屏幕上阅读，而serif字体更容易在纸上阅读。
32.
@media 规则允许在相同样式表为不同媒体设置不同的样式。
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
33.
CSS 属性 选择器
顾名思义，CSS 属性选择器就是指可以根据元素的属性以及属性值来选择元素。
34.
属性选择器：
title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。
提示：title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。
语法：<element title="value">
属性和值选择器：
[title=w3cschool]
{
border:5px solid green;
}
属性和值的选择器 - 多值：
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
[title~=hello] { color:blue; }
包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
[lang|=en] { color:blue; }
表单样式
属性选择器样式无需使用class或id的形式:
例：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
35.
<a href="#"style="background-color:red;color:white"></a>
使用"#"表示转到一个固定链接。
36.
placeholder text（占位符）是用户在 input 框输入任何内容之前放置在 input 框中的预定义文本。
你可以创建如下所示的占位符：
<input type="text" placeholder="this is placeholder text">
37.
你可以使用HTML来构建跟服务器交互的Web表单。你可以通过在form元素上添加一个action属性来执行此操作。
action属性的值指定了表单提交到服务器的地址。
38.在表单里添加input输入框和button按钮
<form action="/submit-cat-photo">
<input type="text" placeholder="cat photo URL" required>
<button type="submit">button</button>
</form>
给你的文本输入框添加 required属性，这样用户不填写输入框就无法提交表单。
单选按钮是 input 输入框的一种类型。 每个单选按钮都应该嵌套在自己的 label(标签) 元素中。
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
每一个复选按钮都应嵌套在其自己的 label元素中。 所有关联的复选按钮输入应该具有相同的 name属性。
<input type="checkbox" name="personality">
注意：type与name之间得有空格。input元素中各属性之间得有空格。
使用 checked 属性，你可以设置一个单选框和复选框默认被选中
39、可以设置多重图像
body{ background-image:url(/i/bg_flower.gif),url(/i/bg_flower_2.gif)； }
background-orign:规定背景图片的定位区
语法： background-origin: padding-box|border-box|content-box;
在盒的边上面 |在盒的边上 |在盒内的内容那
background-clip:属性规定背景的绘制区域
语法： background-clip: border-box|padding-box|content-box;
40.
:focus选择器 对获得焦点的选择器可设置样式。如对input设置样式：
input:focus{background-color:yellow;}
:first-letter{} 如：p:first-letter{font-color:red;}
对p元素的首字母设置为红色
：first-line 对所有某元素的首行设置样式
：first-child 对所有某元素的第一个子标签
：before 在某个元素前插入内容
：after 在某个元素后插入内容
element1~element2 如：p~ul 选择前面有p元素的每个ul元素
[attribute^=value] 如：a[src^"https"] 选择src属性的属性值以"https"开头的每个<a>元素
：lang(language) 选择lang属性的属性值为language的元素，并给其设置样式 如：
p:lamg(en){background-color;}
解释：给lang属性的值以en开头的p元素设置样式
[attribute$=value] 如：a[src$=".pdf"] 选择以.pdf结尾的src的a元素
[attribute*=value] 如：a[src*="aaa"] 选择src属性里有"aaa"字符串的每个a元素
：first-of-type 如:p：first_of-type 设置第一个p
:last-of-type
:only-of-type(n) p:only-of-type 设置父元素唯一的p
：only-child 设置父元素唯一的子元素
:nth-child（n） 设置父元素的第n子元素
:last-child 父元素最后一个子元素
:nth-last-child（n）
：nth-of-type p：nth-of-type(2) 设置属于父元素第二个p元素的样式
：nth-last-of-type(n) 同上，但是是从最后一个元素开始
：root 选择文档的根元素
：empty 选择没有子元素的每个某元素
：target 设置元素里某url链接的地址里内容的样式
：disabled 设置某元素禁用
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
