CSS 基础介绍
Introduction to Basic CSS
CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式。
注意,CSS 的选择器区分大小写,因此要谨慎使用大写。
CSS 早已被所有主流浏览器采用,它允许你轻松控制以下样式:
颜色 color
背景 background
字体 font
位置 position
显示 display
边框 border
内边距 padding
外边距 margin
行高 line-height
装饰 text-decoration
过渡 transtion
变化 transform
动画 animation
使用 CSS 样式主要有三种方式:
- 内联样式–你可以直接在 HTML 元素里使用style属性。
- 内部样式–你可以在style标签里面声明样式规则。
- 外部样式–你可以创建一个.css文件,然后在文件中编写样式规则,最后在文 档中引用该文件。
尽管前两个方式也有人使用,但大部分开发人员更喜欢外部样式表,因为它可以将样式与元素分开,这提高了代码的可读性和重用性。
CSS 背后的思想是,通过选择器来定位 DOM(文档对象模型)的元素,然后将各种样式规则应用在元素上,从而改变元素在页面上的显示方式。
在本章中,你会看到我们是如何一步步将 CSS 样式应用到猫咪相册中,从而让相册变得丰富多彩起来。
1.2 CSS 基础
- 更改文本的颜色
- 使用元素选择器来设置元素的样式
- 使用 class 选择器设置单个元素的样式
- 使用 class 选择器设置多个元素的样式
- 更改元素的字体大小
- 设置元素的字体家族
- 引入谷歌字体
- 字体如何优雅降级
- 调整图片的大小
- 在元素周围添加边框
- 用 border-radius 添加圆角边框
- 用 border-radius 制作圆形图片
- 给 div 元素添加背景色
- 设置元素的 id
- 使用 id 属性来设定元素的样式
- 调整元素的内边距
- 调整元素的外边距
- 给元素添加负外边距
- 给元素的每一侧添加不同的内边距
- 给元素的每一侧添加不同的外边距
- 使用顺时针方向指定元素的内边距
- 使用顺时针方向指定元素的外边距
- 使用属性选择器来设置元素的样式
- 理解绝对单位与相对单位
- 给 HTML 的 Body 元素添加样式
- 从 Body 元素继承样式
- 样式中的优先级
- Class 选择器的优先级高于继承样式
- ID 选择器优先级高于 Class 选择器
- 内联样式的优先级高于 ID 选择器
- Important 的优先级最高
- 使用十六进制编码获得指定颜色
- 使用十六进制编码混合颜色
- 使用缩写的十六进制编码
- 使用 RGB 值为元素上色
- 使用 RGB 混合颜色
- 使用 CSS 变量一次更改多个元素
- 创建一个自定义的 CSS 变量
- 使用一个自定义的 CSS 变量
- 给 CSS 变量附加回退值
- 层级 CSS 变量
- 更改特定区域的变量
- 使用媒体查询更改变量
更改文本的颜色
现在让我们来修改一下文本的颜色。
我们通过修改h2元素的style属性的color值来改变文本颜色。
以下是改变h2元素为蓝色的方法:
<h2 style="color: blue;">CatPhotoApp</h2>
请注意行内style最好以;来结束。
请把h2元素的文本颜色设置为红色。
<h2 style="color:red;">CatPhotoApp</h2>
<main>
<a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
<p>猫咪最喜欢的三件东西:</p>
<ul>
<li>猫薄荷</li>
<li>激光笔</li>
<li>千层饼</li>
</ul>
<p>猫咪最讨厌的三件东西:</p>
<ol>
<li>跳蚤</li>
<li>打雷</li>
<li>同类</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor">室外</label><br>
<label><input type="checkbox" name="personality">忠诚</label>
<label><input type="checkbox" name="personality">懒惰</label>
<label><input type="checkbox" name="personality">积极</label><br>
<input type="text" placeholder="猫咪图片地址" required>
<button type="submit">提交</button>
</form>
</main>
使用元素选择器来设置元素的样式
在 CSS 中,页面样式的属性有几百个,但常用的不过几十个。
通过行内样式<h2 style="color: red;">CatPhotoApp</h2>,就可以修改h2元素的颜色为红色。
当我们只需要改变元素的某个样式时,行内样式最简单直观。当我们需要同时改变元素的很多样式时,层叠样式表往往是一个更好的选择。
在代码的顶部,创建一个style声明区域,如下方所示:
<style>
</style>
在style样式声明区域内,可以创建一个元素选择器,应用于所有的h2元素。例如,如果你想所有h2元素变成红色,可以添加下方的样式规则:
<style>
h2 {
color: red;}
</style>
注意,在每个元素的样式声明区域里,左右花括号({ 和 })一定要写全。你需要确保所有样式规则位于花括号之间,并且每条样式规则都以分号结束。
删除h2元素的行内样式,然后创建style样式声明区域,最后添加 CSS 样式规则使h2元素变为蓝色。
<h2>CatPhotoApp</h2>
<style>
h2 {
color: blue;}
</style>
<main>
<a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
<p>猫咪最喜欢的三件东西:</p>
<ul>
<li>猫薄荷</li>
<li>激光笔</li>
<li>千层饼</li>
</ul>
<p>猫咪最讨厌的三件东西:</p>
<ol>
<li>跳蚤</li>
<li>打雷</li>
<li>同类</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor">室外</label><br>
<label><input type="checkbox" name="personality">忠诚</label>
<label><input type="checkbox" name="personality">懒惰</label>
<label><input type="checkbox" name="personality">积极</label><br>
<input type="text" placeholder="猫咪图片地址" required>
<button type="submit">提交</button>
</form>
</main>
使用 class 选择器设置单个元素的样式
CSS 的class具有可重用性,可应用于各种 HTML 元素。
一个 CSSclass声明示例,如下所示:
<style>
.blue-text {
color: blue;
}
</style>
可以看到,我们在<style>样式声明区域里,创建了一个名为blue-text的class选择器。
你可以将 CSSclass选择器应用到一个HTML元素里,如下所示:
<h2 class="blue-text">CatPhotoApp</h2>
注意:在style样式区域声明里,class需以 . 开头。而在 HTML 元素里,class属性的前面不能添加.。
在style样式声明里,把h2元素选择器改为 .red-textclass 选择器,同时将颜色blue变为red。
在h2元素里,添加一个class属性,且值为’red-text’。
<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
<p>猫咪最喜欢的三件东西:</p>
<ul>
<li>猫薄荷</li>
<li>激光笔</li>
<li>千层饼</li>
</ul>
<p>猫咪最讨厌的三件东西:</p>
<ol>
<li>跳蚤</li>
<li>打雷</li>
<li>同类</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor">室外</label><br>
<label><input type="checkbox" name="personality">忠诚</label>
<label><input type="checkbox" name="personality">懒惰</label>
<label><input type="checkbox" name="personality">积极</label><br>
<input type="text" placeholder="猫咪图片地址" required>
<button type="submit">提交</button>
</form>
</main>
使用 class 选择器设置多个元素的样式
通过 CSS class 选择器,多个 HTML 元素可以使用相同的 CSS 样式规则。
你可以将red-textclass 选择器应用在第一个p元素上。
<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">点击这里可以获取更多<a href="http://freecatphotoapp.com" target="_blank">猫图</a>。</p>
<a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
<p>猫咪最喜欢的三件东西:</p>
<ul>
<li>猫薄荷</li>
<li>激光笔</li>
<li>千层饼</li>
</ul>
<p>猫咪最讨厌的三件东西:</p>
<ol>
<li>跳蚤</li>
<li>打雷</li>
<li>同类</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor">室外</label><br>
<label><input type="checkbox" name="personality">忠诚</label>
<label><input type="checkbox" name="personality">懒惰</label>
<label><input type="checkbox" name="personality">积极</label><br>
<input type="text" placeholder="猫咪图片地址" required>
<button type="submit">提交</button>
</form>
</main>
更改元素的字体大小
字体大小由font-size属性控制,如下所示:
h1 {
font-size: 30px;
}
在包含red-textclass 选择器的<style>声明区域的里,
创建一个p元素样式规则,并设置font-size为16px。
<style>
.red-text {
color: red;
}
p {
font-size: 16px;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
<p>猫咪最喜欢的三件东西:</p>
<ul>
<li>猫薄荷</li>
<li>激光笔</li>
<li>千层饼</li>
</ul>
<p>猫咪最讨厌的三件东西:</p>
<ol>
<li>跳蚤</li>
<li>打雷</li>
<li>同类</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor">室外</label><br>
<label><input type="checkbox" name="personality">忠诚</label>
<label><input type="checkbox" name="personality">懒惰</label>
<label><input type="checkbox" name="personality">积极</label><br>
<input type="text" placeholder="猫咪图片地址" required>
<button type="submit">提交</button>
</form>
</main>
设置元素的字体家族
通过font-family属性,可以设置元素里面的字体样式。
如果你想设置h2元素的字体为sans-serif,你可以用以下的 CSS 规则:
h2 {
font-family: sans-serif;
}
确保p元素使用monospace字体。
<style>
.red-text {
color: red;
}
p {
font-size: 16px;
}
p {
font-family: monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
<p>猫咪最喜欢的三件东西:</p>
<ul>
<li>猫薄荷</li>
<li>激光笔</li>
<li>千层饼</li>
</ul>
<p>猫咪最讨厌的三件东西:</p>
<ol>
<li>跳蚤</li>
<li>打雷</li>
<li>同类</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor">室外</label><br>
<label><input type="checkbox" name="personality">忠诚</label>
<label><input type="checkbox" name="personality">懒惰</label>
<label><input type="checkbox" name="personality">积极</label><br>
<input type="text" placeholder="猫咪图片地址" required>
<button type="submit">提交</button>
</form>
</main>
引入谷歌字体
除了大多数系统提供的默认字体以外,我们也可以使用自定义字体。网络上有各种各样的字体,不过在这个例子中,我们将会尝试使用Google字体库。
Google 字体是一个免费的字体库,可以通过在 CSS 里面设置字体的 URL 来引用。
因此,下一步,我们将引入和使用Google字体。
引入Google字体,你需要复制Google字体的 URL,并粘贴到你的 HTML 里面。在这个挑战中,我们需要引入Lobster字体。因此,请复制以下代码段,并粘贴到代码编辑器顶部,即放到style标签之前。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
现在你可以设置font-family属性为Lobster,来使用Lobster字体。例子如下:
font-family: FAMILY_NAME, GENERIC_NAME;.
GENERIC_NAME是可选的,其他字体不可用时便作为后备字体,在下一个挑战中可以得到体现。
字体名区分大小写,并且如果字体名含有空格,需要用引号括起来。例如,使用"Open Sans"字体需要添加引号,而Lobster字体则不需要。
创建一个 CSS 规则,font-family属性里设置为Lobster字体,并把这个字体应用到所有的h2元素。
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
p {
font-size: 16px;
font-family: monospace;
}
h2 {
font-family: Lobster;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
<p>猫咪最喜欢的三件东西:</p>
<ul>
<li>猫薄荷</li>
<li>激光笔</li>
<li>千层饼</li>
</ul>
<p>猫咪最讨厌的三件东西:</p>
<ol>
<li>跳蚤</li>
<li>打雷</li>
<li>同类</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor">室外</label><br>
<label><input type="checkbox" name="personality">忠诚</label>
<label><input type="checkbox" name="personality">懒惰</label>
<label><input type="checkbox" name="personality">积极</label><br>
<input type="text" placeholder="猫咪图片地址" required>
<button type="submit">提交</button>
</form>
</main>
字体如何优雅降级
所有浏览器都有几种默认字体。这些通用字体包括monospace,serif和sans-serif。
当字体不可用,你可以告诉浏览器通过 “降级” 去使用其他字体。
例如,如果你想将一个元素的字体设置成Helvetica,当Helvetica不可用时,降级使用sans-serif字体,那么可以这样写:
p {
font-family: Helvetica, sans-serif;
}
通用字体名字不区分大小写。同时,也不需要使用引号,因为它们是 CSS 关键字。
首先,添加monospace字体到h2元素里,它现在拥有着Lobster和monospace两种字体。
在上一个挑战里,你已经通过link标签引入谷歌Lobster字体。现在让我们注释掉谷歌Lobster字体的引入(使用我们之前学过的HTML注释),使字体失效。你会发现你的h2元素降级到了monospace字体。
<!--
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
-->
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, monospace;
}
p {
font-size: 16px;
font-family: monospace;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
<p>猫咪最喜欢的三件东西:</p>
<ul>
<li>猫薄荷</li>
<li>激光笔</li>
<li>千层饼</li>
</ul>
<p>猫咪最讨厌的三件东西:</p>
<ol>
<li>跳蚤</li>
<li>打雷</li>
<li>同类</li>
</ol>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor">室内</label>
<label><input type="radio" name="indoor-outdoor">室外</label><br>
<label><input type="checkbox" name="personality">忠诚</label>
<label><input type