Loading deck
CaelumTian@SIPC115
h1 {
color: red;
font-size: 16px;
}
/* 选择器:h1 */
/* 声明:color: red */
/* 属性:color */
/* 属性值:red */
/* 规则 */
<!-- 外链 -->
<link rel="stylesheet" href="/path/to/style.css">
<!-- 嵌入 -->
<style type="text/css">
li { margin: 0; list-style: none; }
p { margin: 1em 0; }
</style>
<!-- 内联 -->
<p style="margin:1em 0">Example Content</p>
选择器用来从页面中选择元素,以给它们定义样式。
/* 匹配所有元素 */
* {
box-sizing: border-box;
}
/* 匹配所有p元素 */
p {
margin: 1em 0;
}
<div id="example">Example Content</div>
<style type="text/css">
/* 匹配id为example的元素
* 注意:id的值在一个HTML中必须是唯一的
*/
#example {
font-size: 14px;
line-height: 1.6;
}
</style>
<p class="warning">这是一条警告信息</p>
<!-- 可以给一个元素指定多个class,用空格隔开 -->
<div class="warning icon">这是另外一条警告信息</div>
<style type="text/css">
.warning {color: orange;}
.icon {color: red;}
</style>
<label><i class="icon-user"></i>用户名:</label>
<input type="text" name="username" disabled>
<label><i class="icon-key"></i>密码:</label>
<input type="password" name="password" required>
input[disabled] { background: #eee; color: #999; }
input[type="password"] { border-color: #999 }
[class^=icon-] { display: inline-block; vertical-align: middle; }
<p class="warning">这是一条警告信息</p>
<div class="warning icon">这是另外一条警告信息</div>
p.warning { color: orange; }
<ul class="menu">
<li>item 1</li>
<li>
item 2
<ul>
<li>subitem 1</li>
<li>subitem 1</li>
</ul>
</li>
<li>item 3</li>
</ul>
.menu li { } /* 后代选择器 */
.menu>li { } /* 亲子选择器 */
h1 { margin: 1em 0; color: #333; font-size: 16px; }
.richtext p { margin: 1em 0; color: #333; }
ul li { margin: 1em 0; color: #333; }
h1,
.richitext p,
ul li { margin: 1em 0; color: #333; }
h1 { font-size: 16px; }
a:link { ... } /* 未访问过的链接 */
a:visited { ... } /* 已访问过的链接 */
a:hover { ... } /* 鼠标移到链接上的样式 */
a:active { ... } /* 鼠标在连接上按下时的样式 */
input:focus { ... } /* 获得焦点时的样式 */
<h1 id="title" class="text">段落文字</h1>
#title { font-size: 18px; }
h1.text { font-size: 14px; }
选择器 | 内联 | ID个数 | (伪)类个数 | 标签个数 | 特异度 |
---|---|---|---|---|---|
#nav .list li a:hover | 0 | 1 | 2 | 2 | 0122 |
.hd ul.links a | 0 | 0 | 2 | 2 | 0022 |
某些属性会自动继承其父元素的值,除非显示指定一个值
<p>
这是一个继承
<em>的测试</em> 看这里
<strong>颜色</strong>.
</p>
<style type="text/css">
p { color: #666; }
em { color: red; }
</style>
body {
font-family: Arial, sans-serif;
}
h1 {
font-family: "Microsoft Yahei", 宋体, Arial, sans-serif;
}
.slide-page li {
font-size:36px;
}
.richtext h4 {
font-size: 125%;
}
.continue {
font-size: 0.85em;
}
#header { line-height: 48px; }
#content .wrap { line-height: 1.6; }
/* 斜体 粗细 大小/行高 字体*/
font: bold 14px/24px arial, sans-serif;
font: 12px/1.5 arial;
font: 14px serif;