有关HTML、CSS、HTML5的细碎知识2

细碎知识点1：链接: link.
1. font简写方法
font:font-style font-variant font-weight font-size/line-height font-family
要求：
（1）font-style font-variant font-weight 是可选的，并且可以任意组合，但是必须出现在 font-size 前面。
（2）font-size 必须写，指定字体大小。
（3）line-height 是可选的，当设置的数字后面没有带单位，代表的是本身元素的大小的多少倍。
（4）font-family 设定字体的系列，必要。

2. 伪类
伪类使用的一般顺序：link,visited,hover,focus,active，可以同时设置多个状态。
使用方法：

a:link {
	color: red; //当这个链接未被访问过则会显示红色
}

link：未访问过的状态；
visited：已访问过的状态；
hover：悬浮于之上的状态；
focus：获得焦点的状态（需要使用到键盘而不是鼠标）；
active：活跃中的状态。

能够隔行进行修改样式的伪类：nth-child

p:nth-child(even){ //偶数的P段落是红色的背景
	background-color: red;
}

p:nth-child(odd){ //奇数的P段落是绿色的背景
	background-color: green;
}

或者
p:nth-child(2n){ //选中偶数
	background-color: red;
}

p:nth-child(2n+1){ //选中奇数
	background-color: green;
}

3. float浮动布局和绝对定位布局的相同点和区别
相同点：
使用了float浮动和绝对定位以后的元素都脱离正常的元素流，即从按代码编写的排版布局中脱离出来，不再占有位置。
区别：
使用float浮动的元素依旧会被流中的文字元素感知，即当正常流中的文字遇到float元素以后会自动围绕浮动元素排版，并且可以使用clear进行浮动清理。
但是使用了绝对定位布局的元素则会被正常流中的元素完全忽略，并不会围绕绝对定位布局的元素进行布局，会直接被绝对定位布局的元素覆盖，也不能使用clear进行浮动清理。

4. 使用table进行布局

//HTML大体布局
<div id = "tableContainter">
	<div id = "tableRow">
		<div id = "main">
			...
		</div>
		<div id = "sidebar">
			...
		</div>
	</div>
</div>

//CSS样式布局
div#tableContainter {
	display: table;
}
div#tableRow {
	display: table-row;
}
#main{
	display: table-cell;
}
#sidebar{
	display: table-cell;
}

5. 表格相关
在< table >标签中可以通过添加< caption >标签来给表格增加一个标题。
caption-side 设置标题的位置，比如：caption-side:bottom;即设置标题在表格下方。

border-spacing 是单元格之间的空间，也就是边框距离。
border-collapse 用于折叠边框，可以把两个紧挨的合并成一个边框，比如：border-collapse:collapse;

6. ul中的li样式设置

li {
	list-style-type: disc; //默认类型，实心黑圆点
	list-style-type: circle; //空心圆圈
	list-style-type: square; //实心黑方块
	list-style-type: none; //无样式
}

自定义标记：

li {
	list-style-image: url(...);
}

7. HTML5中新增输入类型
（1）数字输入

<input type="number" min="0" max="20" step="2">
//使用min和max来限制允许输入的数值，通过step设置步长

（2）范围输入

<input type="range" min="0" max="20" step="5">
//使用min和max来限制允许输入的数值，通过step设置步长

（3）颜色输入

<input type="color">

（4）日期输入

<input type="date">

（5）email输入

<input type="email">

（6）tel输入

<input type="tel">

（7）url输入

<input type="url">

8. fieldset和legend
fieldset将公共的元素组织在一起，legend为他们提供一个标签名字

<fieldset>
	<legend>标签名称</legend>
	<input type="checkbox" name="spice" value="salt" /> Salt <br />
	<input type="checkbox" name="spice" value="pepper" /> Pepper <br />
	<input type="checkbox" name="spice" value="garlic" /> Garlic 
</fieldset>

9. 伪元素
可以用来选择元素的某些部分，比如：

p:first-letter {
	font-size: 3em; // 把段落的第一个字母放大
}

p:first-line{
	font-style: italic; //把第一行设置为斜体
}

10. 属性选择器

img[width] {
	border: black thin solid; //选中包含width属性的img
}

img[height="300"] {
	border: red thin solid; //选中height=“300”的img
}

img[alt~="flowers"] {
	border: #ccc thin solid; //选中alt属性包含单词“flowers”的img
}

11. 按兄弟选择

h1+p {
	font-style: italic; //选择所有紧跟在一个h1元素后面的段落
}