【CSS教学课程 (入门篇)】8个章节 - 由浅入深学习CSS
这是一篇全面，适合新手看的CSS教学入门课程（2021年更新）。
在这篇文章，你会学习到：
- CSS的基本概念
- CSS Selector
- CSS Statement 文字篇
- CSS Statement 实用篇
- CSS Box Model
- CSS Position
- 其他CSS
- Responsive CSS
我们会从新手角度，分开8个章节，由浅入深，教授你所有你要知道的CSS编程知识。
准备好了吗？我们开始吧！
目录
第1章
CSS基本概念
第2章
CSS Selector
第3章
CSS Statement 文字篇
第4章
CSS Statement 实用篇
第5章
CSS Box Model
第6章
CSS Position
第7章
其他CSS
第8章
Responsive CSS
第1章CSS 基本概念
CSS可以让HTML更美丽。
换句话说，CSS负责控制网页的外观，包括静态与动态元素，以及手机板的外观。
CSS就如设计排版工具，只要掌握得好，你通过CSS设计出各种精美的网页。
让我带大家由浅入深，去学习CSS吧！
让我们先来看看，CSS的基本概念。
CSS 基本概念
当我们学懂了HTML后，下一步就需要学习CSS。
(如果你不懂HTML，可以先看看：HTML教学课程 -入门篇)
学习CSS的作用是，在制作一个网站外观时，能把外观制作的更美观一些。
首先，我们打开Visual studio code，我想你试试在你的Code Editor上，跟我一起输入来学习。
我们一起开一个新的文件，这个文件可以选择放置在你的桌面中，然后新增一个「CSS」的文件夹。
之后，我们打开Visual studio code，按File -> Open，
来打开这个「CSS」的文件夹。
然后在CSS右手边的空白位，右键开立一个新文件，叫「index.html」。
然后尝试一下功能是否正常，比如输入
123
来看看。
储存完后，大家可以尝试一下用Chrome来打开这个File文件来看看。
如果在Chrome看到「123」，就代表你己经成功设定这个文件档。
学CSS的第一件事，就在p这里，隔一隔空格，
然后输入：
style='color:red;'
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
你会发现了，通过输入这个内容后，「123」文字原来会变成了红色的。
原来，我们第一样学习CSS的东西就是，
可以透过attribute，来为每个HTML元素加上CSS。
而每一项外观的改变，都可以用不同的CSS statement去做。
比方说，有些CSS statement能改变字型的大小、有些CSS statement能改变颜色、有些CSS statement能改变透明度等等。
分开CSS和HTML
然而，实际写CSS时，我们通常会把CSS和HTML分开。
我们一起来看看分开CSS和HTML的好处是什么吧。
就像以下例子，假设现在你有很多个p Tag。
如果每一个p Tag中都有不同的CSS，那你的program就会很混乱(如下图般)。
123
123
123
123
所以，关于CSS，有一个很重要的概念，
就是将HTML和CSS分开来输入。
意思就是把图中间这些style全部抽出来。
所以，现在大家一起跟我输入，
我们会在文件最上的位置，制作一个叫style Tag的东西，
style Tag只需要制作一次便可以，
而在style Tag中输入的东西，
就不再是HTML的内容了，而是输入CSS的语法。
我们一起尝试在style Tag中输入:
如图中的p{}，然后按enter。(下图)
在p{}中输入color:red，
p{color:red;}
储存完后，大家可以尝试一下用Chrome来开启这个File文件来看看。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
这个p{}是代表什么呢？
原来，p{}就是CSS Selector。
CSS Selector可以让档案知道，在下面内容中，有哪一个HTML Element是需要被它指到的。
在上图中这个环节中，p{}正是指示下面全部的p Tag。
而color:red;又代表什么意思？
其实「color:red;」就是CSS statement，指示文字的颜色是红色。
「color」是CSS statement的Property，而「red」就是该statement的Value 。
CSS Statement的写法就是 property:value;
每一句CSS statement都会有一个分号，这样一句一句地输入。
就是这样，我们便成功地，将HTML归类为HTML，CSS归类为CSS了。
其实，学习CSS有两个困难的地方。
第一个困难的地方是，怎么学写CSS selector。
第二个困难的地方是，怎么学写CSS statement。
CSS selector要注意的地方，就是怎么「正确地」写出CSS selector。
因为有时候在你内文中，不会只有一个p Tag，而是会有很多其他的element。
那要怎样才能明确地指中你要做style的Tag呢？
下一章就会与大家一起学习， 4种最常用的CSS selector吧。
第2章CSS Selector
CSS Selector是CSS中最繁复的概念。
因为它是概念上的东西，你必须完全明白才能使用。
就新手而言，CSS Selector共有4种，它们分别是：
- Element Type Selector
- Id Selector
- Class Selector
- Descendant Selector
准备好了吗？我们开始吧！
Element Type Selector
上文提到，怎么做才能明确地指中你要做style的Tag呢？
其实方法有四种，第一种，就是Element Type Selector。
这个输入法是最简单的，
例如上图内文它是p Tag，只需在上面输入「p{}」来作CSS的Selector。
再来，如果上图内文是h1 Tag，那上面便输入h1{}作CSS Selector便可以了。
所以，Element Type Selector要注意的地方是，
就是当CSS Selector指的地方，下文中就会指中内文的全部东西。
就如上图中，当下文有3个h1的时候，CSS指中的h1，便会包含上图中的3个的h1了。
假如有h1是在p Tag当中，也会同样被影响到。
Element Type Selector会影响到所有的HTML element，无论这些HTML element有没有被其他东西包著。
在这个例子, p中所有的h1，通通都被影响到。
假设，你创作一个不存在的Tag，
比如是：jack Tag，
同样地，CSS也会明确指中jack Tag的位置。
如果有时候，大家只想指向其中一个p Tag，又要怎样做呢？
比如是中间那个p Tag，
那么，用以上CSS Selector，便行不通了。
因为你也知道，
Element Type Selector一指向，便会指向所有的p Tag(如上图般)。
Id Selector
由于Tag Selector会让全部tag都受到影响。若你只需要指定选择一个tag的话，你可以使用id或class selector。
原来以上两种功能：id与class，其实都是attribute，
两种都是类似更改名称的方法，这些attribute就是放到HTML之中。
现在，我们尝试在2个p Tag中，分别加入两个id：
第一个p Tag，输入id='jack'，
第二个p Tag，输入id='peter'。
然后我们在CSS style Tag中，更改为#jack。
这里要注意一下，原来我们不能直接输入「jack」，
因为输入「jack」的意思，是指向下文中的jack Tag，这是错误的输入法。
正确指向id的名称，
是输入「#」来指向其id，所以是输入「#jack」。
储存完后，大家可以尝试一下用Chrome来打开这个File文件来看看。
是不是成功将第一个p Tag变成红色字呢！
Id还有一个特点，
就系它是独立的，独一无二的设定来的。
比喻上图中，HTML p Tag中id为jack，
那么在这个文件当中，就不会有另一个element的id，可以称为「jack」了。
Class Selector
明白了id Selector后，就要来到第三种方法，名叫Class Selector。
class与id的方法也十分相似的，
它们都是attribute来的，但当中的分别，我会在下文中一一解说。
我们一起尝试在第三个p Tag中，输入class='linda'，
123
然后在CSS style Tag中，更改成「.linda」。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
储存完后，大家可以尝试一下用Chrome来打开这个File文件来看看。
是不是成功将第三个p Tag变成红色字呢！
这里你会发现到，
「#」是指向id的，
「.」是指向class的。
你可能会问，
为什么id与class那么相似，为何要分两种CSS Selector呢？
其实，第一个特点是，class与id有著不同之处的，
id是独一无二的，
而class可以有很多，不断重复地使用。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
比如上图中，有3个p Tag中，都是class为linda，
那么的CSS Selector，都会一同影响到全部的linda。
Class Selector并不是unique的。你有一个p tag的class是linda，其他tag的class也可以是linda。
Class Selector的第二个特点是，同一个HTML element可以有很多个不同的class。
如上图般，大家可以看到，
在输入linda后，又可以输入mary，更可以输入paul。
每一个名称与名称之间，隔一隔空格便可以了。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
这里注意的是，这个class不是叫「linda mary paul」，
而是又可以叫「linda」，又可以叫「mary」，又可以叫「paul」。
如果我要指它的话，只需要输入其中一个class便可以，
就如上图中的「.mary」，也会成功指向其中的p Tag。
最后，还有一个特点，就是id与class是可以同时并存，
如果要指向上图中的这个p Tag，
只需要指向输入#peter，或者输入.linda， 都可以指中同样的HTML Element。
以上便是id selector与class selector的基本概念了。
Descendant Selector
其实，id selector与class selector也不是解决到, 所有selector上的问题，
所以这时候，就要来到最后一个selector，也是最复杂的selector来的，
名称叫descendant selector。
为何是最复杂的selector呢？
我们一起来看看吧！
我们一起输入div Tag，然后内层输入h1 Tag及p Tag。
而在div外面也输入另一个p Tag。
这个div会有一个class叫paul。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
这时候你会发现，
原来selector .paul p会指到div中的p Tag, 而不是div外面的p tag。
Descendant selector就是格格。比方说, .paul p, 就是代表:
要指中所有的p Tag, 而这些p tag, 是需要让class paul包著。
就如上图中，
虽然会有两个p Tag，
可是class=' paul p' ，是明确指明要有class paul中的p Tag。
所以你会见到「222」变成红色字，而「333」是不会变成红色字。
为何我会说明这个selector会很复杂呢？
原因是，这个selector可以无限延伸下去。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
会怎样复杂呢？
我尝试在h1这里，再加入一个span Tag，内文输入「AAA」。
然后CSS Selector改为.paul h1 span，
.paul h1 span{color:red;}
你便会看到内文「AAA」更改为红色字。
这里会指所有span，而这些span必需要被h1包著，
而h1更要在paul中包著。
最后，有一点要留意的是，这个指法是不限层数的。
不限层数是什么意思呢？
例如上图中，输入.paul span作为Selector，
同样地，也会成功指中内文中的span的AAA变成红色字。
虽然中间有一层是h1，但是没有关系。
因为只要这个span，是被paul包著的，便会成功被指中。
另外一个例子，
只要span是被paul所包著，那么，全部span都会被指中，就如上图般。
以上这个，便是最复杂的descendant selector了。
大家好好练习吧！
第3章CSS Statement 文字篇
了解完CSS Selector后，就要正式进入学习CSS Statement。
在这个环节，你将会学习CSS Statement的文字篇：
- Font Size 字体大小、
- Letter Spacing 字距
- Line-Height 行距、
- Font-Weight 粗幼度、
- Text-decoration:underline 底线、
- Font Style 斜体、
- Opacity 透明度、
- Text-align:center 文字对应、
- Font-family 转字型。
让我们开始吧！
CSS 文字篇
CSS statement比较CSS selector相对简单，
因为，如果你有不会的CSS statement，你其实可以通过Google来搜索，也会找到其写法。
比如，大家可以看看这一个教学网站：w3schools.com/css
这是一个非常详尽的CSS英文网站，你把它当成是CSS字典来用就好了。
由于CSS statement有那么多，所以我们都要分门别类来学习。
第一个类别，便是CSS文字篇！
文字篇会有很多的CSS style，以下我会一步步教授大家。
首先，先输入上图中的p Tag与style Tag，
格式要与我上面的输入手法一致，
开了style Tag后，
按图中相对应得位置，来隔一隔空格，
输入p{}，在{}中输入「color:red;」。
p{color:red;}
而p Tag的内文可以输入「This is a boy.」。
This is a boy.
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
上图中输入的颜色，一直都是用普通的红色实色。
其实除了实色的红色外，红色也会有很多不同的深浅色调。
那么，我们可以怎样去表达出来呢？
我们先Google搜索一下「Color Picker」，
你会看到，原来每一种颜色，都有一种code来代表的。
这里我们最常用的，就是HEX code，
你会看到#及6位英文数字「#XXXXXX」便是HEX code了。
例如上图中的「#fcba03」，我们一起输入：
我们把red更改为#fcba03，
所以是输入「color:#fcba03;」。
p{color:#fcba03;}
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
储存完后，大家可以尝试一下用Chrome来开启这个File文件来看看。
是不是成功将红色更改成这个黄色呢？
除了HEX code外，另一个可以用RBG，
你会看到RGB有3只数目字，比如图中的252,186,3。
输入方法就是「color:rgb(252,186,3);」，
p{color:rgb(252,186,3);}
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
还有一种常用的方法，就是rgba，这个rgba就是多了一个数目字，
这个数字是在0至1中间，就是透明度。
我们尝试输入0.4，0.4是有少许透明的效果。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
这个功能什么时候会用到呢？
就是当你只想改动颜色做透明的时候，就可以使用这个方法了。
Font Size 字体大小
除了改变字体颜色是最常用之外，第二个常用的，就是改变font size。
我们一起在CSS中输入「font-size:40px;」，如上图般。
p{font-size:40px;}
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
储存完后，大家可以尝试一下用Chrome来开启这个File文件来看看。
我们成功地，将文字变大了。
这里要注意的是，也会有人用em，或者用percentage作单位。
Letter Spacing 字距
学会了改变字体颜色及字体大细后，
接下来，要学习的便是letter spacing。
letter spacing的意思是字与字之间的距离(字距)。
我们一起在CSS中输入「letter-spacing: 10px;」，如上图般，
p{letter-spacing: 10px;}
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
储存完后，大家可以尝试一下用Chrome来开启这个File文件来看看。
我们成功地，将字之间的距离增加。
这种效果，常见用于标题，
因为有时候，在设计上把字距拉阔，能增加一些现代感的效果。
Line-Height 行距
学懂了字距后，当然还有行距啦！
接著要学习的，就是line-height了。
什么是line-height呢？
line-height其实是行与行之间的距离(行距)。
我们在p Tag内文中，
输入来隔一隔行，再输入「This is a girl.」。
然后输入「line-height: 1.5;」，如上图般，
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
储存完后，大家可以尝试一下用Chrome来开启这个File文件来看看。
我们成功地，将行与行之间的距离增加。
其实你也可以选择输入pixel来达成，
比如输入20px这样子。
所以大家多多练习一下，
好好使用这个功能，来设计出美丽的文字排版。
Font-Weight 粗幼度
字体排版除了要掌握空间感的设计，少不了的当然是字体的粗幼度啦！
所以接著要学习的，就是font-weight，
意思就是字的粗幼度(分别于100-900)。
我们一起输入「font-weight: 500;」，看看字体粗幼度500是怎样的效果。
p{font-weight: 500;}
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
其实，改动字体效果的粗幼度，可以从100设定至900之内，大家可按设计风格，来调教合适自己想要的效果。
Text-decoration:underline 底线
我们学懂了粗幼度后，尝试再增加一试有趣功能，比如是增加字体底线。
我们一起输入「text-decoration:underline;」，
p{text-decoration:underline;}
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
看看是不是成功地增加了底线效果。
Font Style 斜体
有时候，为了因应设计效果，都会经用需要改动字体为斜体，
现在我们一起来看看，Font Style是怎样输入的。
我们一起输入「font-style:italic;」，
p{font-style:italic;}
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
Font style最常用的效果，是把字型变为斜体，
输入完后，看看是不是成功地变为斜体效果。
Opacity 透明度
如果以上功能都不够已满足做设计的效果，比如需要改变透明度。
那么，我们就需要学习改变透明度的功能了。
大家跟我一起输入「Opacity:0.5;」，
p{Opacity:0.5;}
将透明度改为0.5，
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
输入完后，看看是不是成功地改造成有透明效果。
Text-align:center 文字align
有时候为了方便空间感的排位，有时候我们都会需要改动文字的版面位置，到底能怎样做的呢？
这时候，我们就需要用text-align:center(文字align)的功能了。
这个功能是对应文字来align left/center/right。
我们会迟点再教这个text-align的细节，这里大家先初步了解期功用为先。
我们一起输入「text-align:right;」，
p{text-align:right;}
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
输入完后，看看是不是成功地将整个p Tag内容改为靠右的版面呢！
Font-family 转字型
来到最后的文字基础教学了，除了以上不同种类的文字改动功能外，大家还需面学习的是，怎样去转变字型。
有关转字型，之后我会再用一篇字型篇来说明，
这里大家可以先了解怎样输入。
我们一起尝试输入，例如「font-family:sans-serif;」，
p{font-family:sans-serif;}
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
而上图中的文字字型，本身内设定已是sans-serif字体。
然后，我们在sans-serif前面尝试输入「Arial,」，
这个意思便是向电脑指示，有「Arial」便用arial字型，
如果没有，便改为使用「Sans-serif」字型。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
除了Default的字型，大家更可以自行输入import其他字型，
我们常用的方法是, 使用font face或Google font来import。
以上教学，便是基本文字的CSS Statement。
第4章CSS Statement 实用篇
只有CSS文字篇，其实是不够的。
接下来，我们需要学习CSS的各种实用性功能。
在实用篇中，你将会学习到更多不同的CSS Statement，包括：
- CSS width、
- CSS height、
- CSS background、
- CSS overflow。
准备好了吗？我们马上开始CSS的实用篇吧！
CSS 实用篇
接下来，我们来到下一个CSS Statement，
会学习一些比较实用的东西。
实用篇会教授大家的包括有，
width、height、background、overflow。
我们首先输入一个style Tag及div Tag，
然后有style Tag中输入div{}，
内层输入background:red;，
下一行输入width:200px;，
下一行输入height:200px;。
上文意思是background输入成红色，
width是代表宽度200px，
height是代表高度200px。
储存完后，大家可以尝试一下用Chrome来开启这个File文件来看看。
我们成功地弄了一个红色的box，
阔度与高度都是200px。
然后我们尝试在div Tag内层，输入更多的p Tag。
储存完后，然后在Chrome refresh这个File文件来看看。
你会发现，这些p Tag的文字，有部分离开了红色box。
这时候可以怎样解决这个问题？
我们可以加一个Tag叫「overflow:hidden;」，
div{overflow:hidden;}
这功能是让离开了红色box的文字，不会再显示出来。
另一个方法，是输入「overflow:scroll;」，
div{overflow:scroll;}
多出了的文字，就会弄了一条scroll bar来包著。
第5章CSS Box Model
Box Model是整个CSS Statement中其中一个最常用的概念。
接下来，我们需要学习Box Model的各种功能。
Box Model共有3样东西：
- Border、
- Margin、
- Padding。
准备好了吗？我们马上开始吧！
CSS Box Model
接著，我们还有更多的CSS Statement要学习，Box Model是整个CSS Statement中其中一个最常用的概念。
Box Model包括：
- border
- margin
- padding
这些我们简称为CSS的box model。
Box Model是一个很重要的概念来的，
简单来说，每一个元素，比方说一段文字，它的边界就是Border。Border与文字中间的空间就是Padding。Border外的空间就是Margin。
这里要注意一下，
现实中的border线位不会那么粗的，通常是一条黑线而已。
正常情况是不会show出来的，
即是没有border的形状的，大概意思是有一条无形的border线位。
了解到基本概念后，
现在我们一起动手输入Box Model吧！
我们在style内输入「border:5px solid black;」，
div{border:5px solid black;}
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
Solid是代表实色，颜色使用了black黑色，及5px的阔度。
储存完后，然后在Chrome refresh这个File文件来看看。
你看不看到，我们成功弄了有一条黑色的border。
这种输入法是左上下右同时间都有，
如果只想落其中一条线，又可以怎样做呢？
我们把border输入-top，黑线便会落到上面的位置。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
还有border-left，是左边位置。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
接著是border-bottom，是下边位置。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
然后是border-right，是右边位置。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
之后，我们尝试输入padding:50px;
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
padding就是border入面的位置，
储存完后，然后在Chrome refresh这个File文件来看看。
你会发现到内容123的上下左右，多了50px的红色空白位置。
同样地，padding也可以只输入上左下右其中一面，输入法如下：
padding-top，上面位置，
padding-left，左面位置，
padding-bottom，下面位置，
padding-right，右面位置。
另外还有一些比较懒的输入法，
比如上图这样，输入「50px 10px」。
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
意思是，50px代表上下位置，10px代表左右位置。
也有另一种懒人包的输入法，就是输入4个数字，
4个数字代表的位置，
是顺时针方向：上、右、下、左。
比如上图的：
上50px，
右10px，
下20px，
左40px。
这种较懒的输入法，padding可以，border也都可以的。
除了改动Box内部，还可以改动Box的外部位置。
改动Box的外部位置功能，就是margin。
Margin就是上面，border外面的位置，
我们一起输入：
margin:50px;
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
储存完后，然后在Chrome refresh这个File文件来看看。
你会看到，margin就是上图中绿色圈的位置。
Margin与padding及border一样，也可以使用较懒的输入法。
这里大家也要注意的是，
有一种常用的输法是：
margin:0 auto;
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
到底是什么意思呢？
意思是margin的上下位置是0，
左右是auto(意思是将这个div置中)。
很多都是配合有width的情况下使用。
学到这里，大家都明白了什么叫Box Model了吗？
以上便是CSS Box Model的全部教学内容，
记得多加练习喔。
第6章CSS Position
接下来，我们会学习更多关于CSS Position的CSS Statement。
在这篇中，你将会学习到更多的CSS语法，包括：
- CSS Display、
- CSS Position。
准备好了吗？我们开始吧！
CSS Display
CSS display是一个很常用的CSS语法。
首先我们整理以下介面输入：
原来每一个element，本身也有一个东西叫display。
display通常是inline(平排)，或是block(隔行)。
每一个tag其实本身有已有一个display property。
例如div、p、h1是block；a、span是inline。
但我们可以透过CSS，把这个display property改变。
例如, 当两个div Tag在一起的时候，你会发现是这样显示的。
如果想更改这个预设，
我们是可以输入「display:inline-block;」，
div{display:inline-block;}
就会更改了它的预设显示。
比如下图这样：
如果你把Display转回block, 就会变为原先那样。
现在尝试输入两个a Tag，你会看到是平排的。
然后在style Tag的内层中，输入a{}，
再输入「display:inline-block;」，
现在，你会发现成功把a Tag的变成隔行显示了。
另一个最常见的display是「display:none;」，
div{display:none;}
会将整个div Tag的内容被消失了。
这个功能其实非常好用的，
由其是有时需要更改模板，更改一些template，
而有时又改不了HTML，就只可以靠CSS去更改了。
当你不想要某一些元素，
你就可以用「display:none;」的方法来解决了。
CSS Position
接下来，我们就要学习CSS Position。
CSS的Position分为四种，
- postion:static、
- postion:relative、
- postion:fixed、
- postion:absolute。
第一种：postion:static
第一种position是「position:static;」，
就会把内容由上至下显示，又不会重叠在一起的。
其实你平常不输入position static，它本身就是预设为position static的。
第二种：postion:relative
第二种position是「position:relative;」，
Relative其实与Static很相似的，
只不过position relative可以再定义一个左上角座标。
什么叫定义「左上角座标」？
我们尝试一起输入「top:400px;」及「left:400px;」看看，
上边及左边都加入了400px，你会看到整个内容都移了出走。
这个功能就是「position:relative;」了。
第三种：postion:fixed
第三种position是「position:fixed;」，
Fixed其实与relative都是一样的，但fixed的特别位是可以把它定格。
什么意思呢？
当我先输入了很多个p Tag后，
你会现无论我怎样移动视窗的上下位置，红色box是定格在视窗这个位置的。
这就是「position:fixed;」的功用了。
第四种：postion:absolute
最后一个position，也是最复杂的一个，
就是「position:absolute;」。
这是一个比较复杂的方法，
我们首先整理一下以下格式。
然后跟著我一起输入p{}，
内层再输入：
position:absolute;
top: 10px;
left: 10px;
什么是Position Absolute呢？
Position Absolute就是对比包著它的element，它的位置是什么。
就如图中的p Tag，包著的element就是这个div，
对比这个div，它现在的位置就是top 10 left10了。
同样地，也可以把top与left，
更改输入为bottom及right。
所以你会发现到，
position absolute和position fixed
都会把东西重叠在一起
position relative和position static
就不会将东西重叠在一起。
以上便是CSS Position的基本教学。
第7章其他CSS
大家学习完学习CSS Position篇后，其实还有其他CSS的功能也是经常用到的，
在CSS其他篇中，你将会学习到更多的CSS语法，包括：
- CSS Float、
- CSS 文字转State、
- CSS 左右置中、
- CSS 跟随次序。
准备好了吗？我们开始吧！
CSS Float
来到其他CSS的部分，首先学习到的是CSS Float，
Float的功能，可以是将相片放在一些文字的旁边。
首先，我们先去Google搜寻一张相片，比如是pig。
找到一张pig的相片后，
按著相片，右键「在新分页中开启图片」，把这个连结放在img tag。
然后，再加上width 400的attribut：
，
然后再输入p Tag，
内容输入123。
如果这时候，你想将文字123改在图片右边，
又可以怎样做呢？
你可以在style Tag中输入img{}，
再内层中输入「float:left;」，
img{float:left;}
储存完后，然后在Chrome refresh这个File文件来看，
已成功将文字改在图片的右边作显示了。
原来float这个CSS Statement，
就是说，对比下一个element， 这个HTML element的位置是在哪里。
上图例， img Tag的下一个element，
就是p Tag。
因此，img tag就会在p tag的左边了。
我们尝试输入多3组p Tag，
你会发现，原来这个float会一直影响下去的。
所有的p Tag文字，都会改动去了图片的右手边。
假如不想第三个p Tag被影响到，
又可以怎样做呢？
我们可以在第三个p Tag，使用「clear:both;」。
看！第三个p Tag现在不被影响了。
CSS 文字转State
之后我们要学习的，就是CSS文字转State的功能了。
CSS文字转State这功能，最常用的是在a Tag之中，
首先，我们一起输入一个a Tag：
然后在style Tag，输入a{}，内层再输入color:red;。
a{color:red;}
你会看到click me是红色的。
接著，在style Tag，隔一隔行，输入a:hover{}，
内层再输入color:green;。
你会发现，只要当你的箭咀移动到click me，
便会从红色字自动变成绿色字。
可以在这个基础上，增加更加多的CSS Statement，比如加入：
a:hover{font-size: 60px;}
当你的箭咀移动到click me，文字便会自动变大了。
CSS 左右置中
接下来要学习的，就是CSS左右置中功能。
一般而言，有分两种情况：
第一种情况是，左右置中整个div Tag。
第二种情况是，左右置中div内的文字或图片。
第一种情况 , 我们先给这个div一个阔度。
我们一起输入div Tag，
内层p Tag，内容输入123。
然后在style Tag输入div{}，内层输入：
width: 300px;
border: 1px solid black;
margin:0 auto;
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
做了一个box后，你可以使用「margin:0 auto;」，
便可以把整个div置中了。
第二种情况, 就是要置中一个div入面的文字。
在style Tag输入div{}，内层输入：
text-align: center;
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
这样就会把div中的文字全部置中了。
大家这里要注意一下，
这个「text-align: center;」不是输入在p Tag那里的，
而是输入在包住它的div那里的，才会正确。
而图片也是一样, 会被这个text align center影响到。
CSS 跟随次序
CSS跟随次序是什么意思呢？
大家一起看看以下例子：
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
你会看到，这个p Tag，有两个Selector也会指到它
一个是红色，另一个是蓝色。
好了, 我们再试试在p Tag中输入：
style='color: yellow;'
现在, 有3个Selector也指到这个p Tag: 红, 蓝, 黄。它究竟会跟随那一个CSS Selector呢？
你会发现，p tag是变了黄色的。
原来, 如果有同样数个Selector指同一个HTML Element, 它会首先跟inline style。(也就是黄色)
如果没有inline style，
下一个跟随的，便会是同一页style Tag中的Selector。
如果同一页没有style Tag，程式便会跟随external CSS file。
做一下总结，CSS基本的跟随次序是：
首先，是自身的style attribute，
接著，是同一个HTML的style tag，
最后，是外部CSS File。
此外, 程式会跟随一个「更精准」的selector来指。
图中有两个selector，都是指到p tag。
div p{}与p{}那一个更精准？
当然是div p{}，所以你会看到颜色是指向了red那里。
如果没有「更精准」的Selector，
程式就会跟随最底的那一个Selector，
就如上图中的蓝色。
如果你想override这个跟随次序，可以怎样做呢？
你可以使用「!important」。
你只需要在red后面，输入：
「!important」
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
因为这是一条override了其他所有的跟随次序。
温馨提示一下，
这个!important不建议大家用太多，
因为当你把内文中，全部都用这方法输入「!important」，
跟随次序就会变得复杂, 变得都没意思了。
第8章Responsive CSS
大家以为学习完其他CSS后，便学懂了基本CSS功能了吗？
当然不是啦，其实以上都是PC版面的排版，其实还有mobile、responsive的CSS运作方法。
而mobile原理，其实与PC一样，目的都是美化screen size，让mobile的外观也设计精美。
准备好了吗？
我们马上开始学习Responsive CSS吧！
Responsive CSS
接著，我们终于来到Responsive CSS分享，
会与大家分享mobile、responsive的CSS运作方法。
其实mobile原理与PC一样，
目的都是美化screen size，让mobile的外观也设计精美。
我们通常会用media screen去做Responsive。
我们首先整理一下编程内容：
输入一个p Tag，内文123，
输入一个style Tag，内层p{}，再输入color:blue;
这时候，123是出现blue颜色字。
接下来，在style Tag中开一行新行，输入：
@media only screen and (max-width:900px) {}
内层再输入：
color:red;
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
你会发现到，只要将萤幕拉放至900px的时候，
文字会从蓝色变成红字。
然后，我们在style Tag再输入多一个：
@media only screen and (max-width:600px) {}
这次内层输入：
color:blue;
See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
你会发现到，只要将萤幕拉放至600px的时候，
文字会从红色变回蓝字了。
透过使用media screen, 你可以在不同的screen size, 行不同的CSS style, 从而去做到Responsive的效果。
最后注意一点是，
Screen的阔度是从高至底，
先输入大一点px，接著才会输入细一点的px。
而正常阔度输入至600px已经足够，
目前智能手机，大多都是300px至到600px。
第二种我们常会用到的，
就是max width。
现在我们输入img，加入一张图片连结，width为800px。
你会发现，萤幕拉细后，图片不懂自行缩小。
所以，这时候，我们在style Tag中，
找回900px那个media screen，
然后隔行，输入一个img{}，内文输入：
max-width: 100%;
你会发现，
只要当萤幕拉至900px，
图片的阔度会自动缩放至100%来显示出来。因为图片的最大阔度为100%。
有时候, desktop的东西太复杂的话，
你可以把整个div都display none，
然后，开一个新的div，就只有mobile才display block出来，
这样也是我们做Responsive Layout的一个常用方法。
总结
恭喜你！
经历了8个章节，你终于学习完了基本的CSS。
然而，此刻如果你想用HTML和CSS去从头开始，去制作网站的话，你还是会觉得很吃力的。
这是绝对正常的！
因为学习了基本CSS后，我们还要借助一些framework，例如bootstrap，才能轻松地编写外观。
今天，基本的CSS编程知识就去到这里。
大家好好温习以上的知识吧～加油！