pre ref text type size :active 选择器 ont
CSS 样式
- <style type="text/css">
- tt.tt1 {
- <style type="text/css">
- p { background-color:yellow; font-size:xx-small; }
- </style>
- <p style="background:red;font-size:xx-large">
- 今天天气好晴朗,处处好风光
- </p>
- <p>
- 今天天气好晴朗,处处好风光
- </p>
- <p>
- 今天天气好晴朗,处处好风光
- </p>
- <p>
- 今天天气好晴朗,处处好风光
- </p>
- <tt>
- 床前明月光,疑是地上霜。举头望明月,我叫郭德纲
- </tt>
样式 2 . 是 Class 选择器
- background-color:red;
- }
- tt.tt2 {
- font-size:xx-large;
- }
- tt.tt3 {
- background-color:red;
- }class="tt1">床前明月光,疑是地上霜。举头望明月,我叫郭德纲
- 床前明月光,疑是地上霜。举头望明月,我叫郭德纲
- 床前明月光,疑是地上霜。举头望明月,我叫郭德纲
- 床前明月光,疑是地上霜。举头望明月,我叫郭德纲
样式 3
- <style type="text/css">
- p { background-color:yellow; } tt { background-color:green; }
- </style>
- <p>
- 今天天气好晴朗,处处好风光
- </p>
- <p>
- 今天天气好晴朗,处处好风光
- </p>
- <p>
- 今天天气好晴朗,处处好风光
- </p>
- <p>
- 今天天气好晴朗,处处好风光
- </p>
- <tt>
- 床前明月光,疑是地上霜。举头望明月,我叫郭德纲
- </tt>
I 的选择器 #是 ID 选择器
- <style type="text/css">
- .p1 {
- background-color:red;
- }
- #p2 {
- background-color:green;
- }
- #p3 {
- background-color:blue;
- }
- #p4 {
- background-color:black;
- }
- <p class="p1">今天天气好晴朗</p>
- <p class="p1">今天天气好晴朗</p>
- <p id="p2">今天天气好晴朗</p>
- <p id="p3">今天天气好晴朗</p>
- <p id="p4">今天天气好晴朗</p>
关联选择器
- <style type="text/css">
- p em { background-color:red; }
- </style>
- <p>
- <em>
- 今天天气好晴朗
- </em>
- </p>
伪元素选择器
- a: link {
- color: #FF0000
- }
- /* 未访问时的状态 */
- texta: visited {
- color: #00FF00
- }
- /* 已访问过的状态 */
- a: hover {
- color: #FF00FF
- }
- /* 鼠标移动到链接上时的状态 */
- a: active {
- color: #0000FF
- }
- /* 鼠标按下去时的状态 */
- first - letter 伪元素,
- 匹配了第一个字母 (P: :first - line {第一行
- <style type="text/css">
- A:active {
- text-decoration:none;
- }
- A:hover {
- font-size:xx-large;
- }
- P::first-letter {
- font-size:xx-small;
- }
- P::first-line {
- font-size:xx-large;
- }
- </style>
- <p>晋太元中,武陵人捕鱼为业,缘溪行,绕路之远近,忽逢桃花林,夹岸数百步<br/>
- 晋太元中,武陵人捕鱼为业,缘溪行,绕路之远近,忽逢桃花林,夹岸数百步
- </p>
- <a href="#">超链接</a>
- <a href="#">超链接</a>
- <a href="#">超链接</a>
- <a href="#">超链接</a>
- <a href="#">超链接</
- 组合选择器
- <style type="text/css">
- h1, h2, h3, h4, h5, h6, td { background-color:red; }
- <h1>
- 我是一个粉刷匠
- </h1>
- <h2>
- 我是一个粉刷匠
- </h2>
- <h3>
- 我是一个粉刷匠
- </h3>
- <h4>
- 我是一个粉刷匠
- </h4>
- <h5>
- 我是一个粉刷匠
- </h5>
- <h6>
- 我是一个粉刷匠
- </h6>
Css+html
来源: http://www.bubuko.com/infodetail-2013604.html