#预格式文本
保留输入的文本格式
1
2
3
4
5
6
| <pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
|
#缩写和首字母缩写
1
2
3
| <abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
|
#文字方向
文字效果从左向右显示
1
2
3
| <bdo dir="rtl">
Here is some Hebrew text
</bdo>
|
#删除字效果和插入字效果
1
| <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
|
#块引用
使用blockquote元素引用长的句段，节
1
2
3
| <blockquote>
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
|
使用p元素引用短的句段览器通常会在 q 元素周围包围引号
例：WWF 的目标是“构建人与自然和谐相处的”世界。
1
| <p>WWF 的目标是 <q>构建人与自然和谐相处的世界。</q></p>
|
#选择器
派生选择器
只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id。
例1:
1
2
3
4
5
6
7
8
9
10
11
12
| <style>
li strong {
font-style: italic;
font-weight: normal;
}
</style>
<body>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
</body>
|
例2：
strong和h2元素里的字是红色，h2元素里的strong元素里的字是蓝色
1
2
3
4
5
6
7
8
9
10
11
| strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
|
ID选择器
可作为单独的选择器/派生选择器
1
2
3
4
5
6
7
8
| <style>
#red {color:red;}
#green {color:green;}
</style>
<body>
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
</body>
|
类选择器
*类名的第一个字符不能使用数字
1
2
3
4
5
6
7
8
| <style>
.center {text-align: center}
</style>
<body>
<h1 class="center">
This heading will be center-aligned
</h1>
</body>
|
作为派生选择器使用时
例：类名为fancy里的td（表格）元素 的设置
1
2
3
4
| .fancy td {
color: #f60;
background: #666;
}
|
也可以基于类被选择
例：表格里，类被设置为fancy的表格将是带有灰色背景的橙色
1
2
3
4
5
6
7
8
9
| <style>
td.fancy {
color: #f60;
background: #666;
}
</style>
<body>
<td class="fancy">
</body>
|
*你可以应用多个class到一个元素，只需要在多个class之间用空格分开即可
1
| <img class="class1 class2">
|
小结：
ID具有唯一性，Class具有普遍性 ID是唯一的，所以尽量在结构外围使用，通常用于页面布局
Class是可重复的，所以尽量在结构内部使用，通常用于样式定义 ID的样式优先级高于Class
#固定链接
想为你的网站添加一个a元素，但此时你还不知道要将它们链接到哪儿，此时可以使用固定链接
#alt属性
alt属性，也被称为alt text, 是当图片无法加载时显示的替代文本
1
| <img src="www.your-image-source.com/your-image.jpg" alt="your alt text">
|
#列表
无序列表
1
2
3
4
5
6
| <ul type="disc/circle/square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
|
有序列表
1
2
3
4
5
6
| <ol type="a/A/i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
|
定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合
自定义列表以<dl>标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以<dd>开始
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
1
2
3
4
5
6
| <dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
|
#预定义文本
1
| <input type="text" placeholder="this is placeholder text">
|
#单/复选按钮
每一个单选按钮都应该嵌套在它自己的label(标签)元素中 所有关联的单选按钮应该使用相同的name属性
例：给你的表单添加两个单/复选按钮，一个叫indoor，另一个叫outdoor，设置你的单选按钮的name属性为indoor-outdoor,第一个按钮默认被选中
1
2
| <label><input type="radio/checkbox" name="indoor-outdoor" checked>indoor</label>
<label><input type="radio/checkbox" name="indoor-outdoor">outdoor</label>
|
#Html布局
padding(内边距)、margin(外边距)、border(边框)
元素的 padding 控制元素内容content和元素边框 border 之间的距离 元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离,为负值时元素将变大
#继承
例1：当body与class的属性冲突时，class属性会覆盖掉body元素的属性
1
2
3
4
5
6
7
8
9
10
11
| <style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text{
color:pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>
|
例2:在<style>部分中 class 的声明中，第二个声明总是比第一个具有优先权。因为 .blue-text 是第二个声明，它覆盖了 .pink-text 属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text{
color:blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>
|
例3：最高优先级!important
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
|
小结：
!important>行内样式>id选择器>class选择器>嵌入式