基础CSS
基础CSS部分的确较之前的内容有了很多改进，而且所有的内容都没有像有些教程硬性地灌输各种属性的内容，而是根据案例将不同的属性串起来，如果仔细分析案例会发现，教程内容也是在润物细无声地告诉你这些属性该怎么设置，可以用于哪些场景。
具体内容包括：
- CSS选择器（元素选择器、类选择器、ID选择器、属性选择器）
- 选择器之间设置CSS的优先级：！important > 内联 > ID> 类 > 元素
- 设置文本样式的基本方式，包括调整字体大小及使用的大小单位、引入字体
- 设置颜色的基本方式，包括使用颜色名称、16进制颜色代码、RGB值
- 设置盒模型的基本方式，包括padding, margin, border等
- 对html根元素进行设置及设置的继承
- 如何使用css变量
- 如何使用媒介查询，以及结合媒介查询修改css设置
以下是这一节内容的思维导图和习题解答：
Introduction to Basic CSS
-
1
<h2 style="color: red;">CatPhotoApp</h2>
Use CSS Selectors to Style Elements
1
2
3
4<style>
h2 {color: blue;}
</style>
<h2>CatPhotoApp</h2>Use a CSS Class to Style an Element
1
2
3
4
5
6
7<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>Style Multiple Elements with a CSS Class
1
2
3
4
5
6
7
8
9<style>
.red-text {
color: red;
}
</style>
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>Change the Font Size of an Element
1
2
3
4
5
6
7
8<style>
.red-text {
color: red;
}
p {
font-size: 16px;
}
</style>Set the Font Family of an Element
1
2
3
4
5
6
7
8
9
10<style>
.red-text {
color: red;
}
p {
font-size: 16px;
font-family: monospace;
}
</style>-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<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> Specify How Fonts Should Degrade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<!-- <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>-
1
2
3
4
5
6
7<style>
.smaller-image {
width: 100px;
}
</style>
...
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a> Add Borders Around Your Elements
1
2
3
4
5
6
7
8
9<style>
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
}
</style>
...
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>Add Rounded Corners with border-radius
1
2
3
4
5
6
7
8<style>
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 10px;
}
</style>Make Circular Images with a border-radius
1
2
3
4
5
6
7
8<style>
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>Give a Background Color to a div Element
1
2
3
4
5
6
7<style>
.silver-background {
background-color: silver;
}
</style>
<div class="silver-background">-
1
<form id="cat-photo-form" action="/submit-cat-photo">
Use an id Attribute to Style an Element
1
2
3
4
5<style>
#cat-photo-form {
background-color: green;
}
</style>Adjust the Padding of an Element
1
2
3
4
5
6
7<style>
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
}
</style>Adjust the Margin of an Element
1
2
3
4
5
6
7
8<style>
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: 20px;
}
</style>Add a Negative Margin to an Element
1
2
3
4
5
6
7
8<style>
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: -15px;
}
</style>Add Different Padding to Each Side of an Element
1
2
3
4
5
6
7
8
9<style>
.blue-box {
background-color: blue;
color: #fff;
padding: 40px;
padding-bottom: 20px;
padding-right:20px;
}
</style>Add Different Margins to Each Side of an Element
1
2
3
4
5
6
7
8
9<style>
.blue-box {
background-color: blue;
color: #fff;
margin: 40px;
margin-bottom: 20px;
margin-right:20px;
}
</style>Use Clockwise Notation to Specify the Padding of an Element
1
2
3
4
5
6
7<style>
.blue-box {
background-color: blue;
color: #fff;
padding:40px 20px 20px 40px;
}
</style>Use Clockwise Notation to Specify the Margin of an Element
1
2
3
4
5
6
7<style>
.blue-box {
background-color: blue;
color: #fff;
margin:40px 20px 20px 40px;
}
</style>Use Attribute Selectors to Style Elements
1
2
3
4
5<style>
[type="checkbox"] {
margin: 10px 0 15px;
}
</style>Understand Absolute versus Relative Units
1
2
3
4
5
6
7<style>
.red-box {
background-color: red;
margin: 20px 40px 20px 40px;
padding: 1.5em;
}
</style>-
1
2
3
4
5<style>
body {
background-color:black;
}
</style> Inherit Styles from the Body Element
1
2
3
4
5
6
7
8
9<style>
body {
background-color: black;
color: green;
font-family:monospace;
}
</style>
<h1>Hello World</h1>Prioritize One Style Over Another
1
2
3
4
5
6
7
8
9
10
11
12<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>Override Styles in Subsequent CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>Override Class Declarations by Styling ID Attributes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
#orange-text {
color:orange;
}
</style>
<h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>Override Class Declarations with Inline Styles
1
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
Override All Other Styles by using Important
1
2
3
4
5<style>
.pink-text {
color: pink ;
}
</style>Use Hex Code for Specific Colors
1
2
3
4
5<style>
body {
background-color: #000000;
}
</style>-
1
2
3
4
5
6
7
8
9
10
11
12
13
14<style>
.red-text {
color: #FF0000;
}
.green-text {
color: #00FF00;
}
.dodger-blue-text {
color: #1E90FF;
}
.orange-text {
color: #FFA500;
}
</style> -
1
2
3
4
5
6
7
8
9
10
11
12
13
14<style>
.red-text {
color: #F00;
}
.fuchsia-text {
color: #F0F;
}
.cyan-text {
color: #0FF;
}
.green-text {
color: #0F0;
}
</style> Use RGB values to Color Elements
1
2
3
4
5<style>
body {
background-color: rgb(0, 0, 0);
}
</style>-
1
2
3
4
5
6
7
8
9
10
11
12
13
14<style>
.red-text {
color: rgb(255, 0, 0);
}
.orchid-text {
color: rgb(218, 112, 214);
}
.sienna-text {
color: rgb(160, 82, 45);
}
.blue-text {
color: rgb(0, 0, 255);
}
</style> Use CSS Variables to change several elements at once
1
2
3
4
5
6
7<style>
/* change code below */
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
/* change code above */
</style>-
1
2
3
4
5<style>
/* add code below */
--penguin-skin: gray;
/* add code above */
</style> -
1
2
3
4
5<style>
/* change code below */
background: var(--penguin-skin);
/* change code above */
</style> Attach a Fallback value to a CSS Variable
1
2
3
4
5<style>
/* change code below */
background: var(--pengiun-skin, black);
/* change code above */
</style>-
1
2
3
4
5
6
7<style>
:root {
/* add code below */
--penguin-belly: pink;
/* add code above */
}
</style> Change a variable for a specific area
1
2
3
4
5
6
7
8
9
10
11
12
13<style>
:root {
--penguin-skin: gray;
--penguin-belly: pink;
--penguin-beak: orange;
}
.penguin {
/* add code below */
--penguin-belly: white;
/* add code above */
}
</style>Use a media query to change a variable
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<style>
:root {
--penguin-size: 300px;
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
}
@media (max-width: 350px) {
:root {
/* add code below */
--penguin-size: 200px;
--penguin-skin: black;
/* add code above */
}
}
</style>