前端开发基础之
CSS
CaelumTian@SIPC115
这节课讲什么
- CSS基本语法
- 初级CSS选择器
- 继承和优先级
- 控制文本样式
CSS的组成
h1 {
color: red;
font-size: 16px;
}
/* 选择器:h1 */
/* 声明:color: red */
/* 属性:color */
/* 属性值:red */
/* 规则 */
使用CSS
<!-- 外链 -->
<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>
选择器
选择器用来从页面中选择元素,以给它们定义样式。
简单选择器
- 通配选择器
- 标签选择器
- ID选择器
- 类选择器
通配选择器
/* 匹配所有元素 */
* {
box-sizing: border-box;
}
标签选择器
/* 匹配所有p元素 */
p {
margin: 1em 0;
}
ID选择器
<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; }
选择器的特异度(Specificity)
选择器 | 内联 | 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>
字体属性
font-family
- 使用逗号分隔的字体的字体系列名称
- 初始值有浏览器设置决定,可继承
body {
font-family: Arial, sans-serif;
}
h1 {
font-family: "Microsoft Yahei", 宋体, Arial, sans-serif;
}
font-size
- 定义文字大小,可使用px丶半分比丶em丶rem等做单位
- 初始值为medium(由浏览器设置决定,一般16px),可继承
- 浏览器最小字体10px,
.slide-page li {
font-size:36px;
}
.richtext h4 {
font-size: 125%;
}
.continue {
font-size: 0.85em;
}
line-height
- 每行文字所占用的高度
- 初始值为normal,可继承
- 取值:<长度> | <数字> |<百分比>
- 段落文字一般取值 1.4 ~ 1.8
#header { line-height: 48px; }
#content .wrap { line-height: 1.6; }
font-style
- 定义文字以斜体还是正常方式显示
- normal 为正常方式。 italic 为斜体
- 默认值为noraml 可继承
font-weight
- 定义文字粗细程度
- 初始值为normal,可继承
- normal为正常粗细,bold为粗体
font
/* 斜体 粗细 大小/行高 字体*/
font: bold 14px/24px arial, sans-serif;
font: 12px/1.5 arial;
font: 14px serif;
color
- 指定文字颜色
- 初始值由浏览器决定(一般为黑色),可继承
颜色的表示:关键字
颜色取值
- HEX:#FF0000 (十六进制)
- RGB:rgb(255, 0, 0);
- RGBA:rgba(255, 0, 0, 0.3);
- HSL:
- Hue:色相(H)是色彩的基本属性,就是平常所属窦娥颜色名称,取值范围0 - 360
- Saturation:饱和度(S)是指色彩的纯度,越高色彩越醇,低则逐渐变灰。范围是(0 - 100%)
- Lightness:越高颜色越亮。范围是(0 - 100%)
- 例如:hsl(0, 50%, 50%) hsla(120, 50%, 30%, 0.5)
text-align
- 定义文本在容器内的对齐方式
- 初始值由HTML的dir属性决定,可继承
- 其他值:left | right | center | justify
text-decoration
- 定义了文本的一些装饰效果,比如下划线,删除线
- 初始值为none,可继承
- 其他值: underline | line-height | overline
下节课
- 基础盒模型:margin padding border width height
- 定位方式:position float
- 基本的布局方式:水平与垂直格式化
- 一些常见问题的解决。
SIPC115 CSS
By caelumtian
SIPC115 CSS
- 684