前端开发基础之

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）

继承

继承

某些属性会自动继承其父元素的值，除非显示指定一个值

<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
• 基本的布局方式：水平与垂直格式化
• 一些常见问题的解决。