CSS教程： CSS（上）

時間 2020-03-04

標籤 css 教程欄目 CSS 简体版

原文原文鏈接

CSS（上）css

什麼是CSS

官方描述：
用於描述用標記語言編寫的文檔的外觀和格式。雖然最經常使用於更改用HTML和XHTML編寫的網頁和用戶界面的樣式，但該語言能夠應用於任何類型的XML文檔，包括純XML，SVG和XUL。與HTML和JavaScript一塊兒，CSS是大多數網站使用的基礎技術，用於建立具備視覺吸引力的網頁，Web應用程序的用戶界面以及許多移動應用程序的用戶界面。css3

人話：
層疊樣式表也就是CSS，是你在HTML以後應該學習的第二門技術。git

HTML用於定義內容的結構和語義，CSS用於設計風格和佈局。好比，您可使用CSS來更改內容的字體、顏色、大小、間距，將內容分爲多列，或者添加動畫及其餘的裝飾效果，進而對頁面的版面佈局和外觀樣式的美化。github

用於（加強）控制網頁樣式並容許將樣式信息與網頁內容分離的一種標記性語言。CSS 不須要編譯,能夠直接由瀏覽器執行(屬於瀏覽器解釋型語言)。web

例：chrome

h1 {
 color: red;
 font-size:25px;
}
h1選擇器  color  屬性   red屬性值

基礎

基礎選擇器
引入方式
書寫格式
文字屬性
盒子模型
Emmet語法

一、HTML的侷限性

若是直接利用html頁面書寫頁面，頁面的美觀達不到要求，若是要添加一些簡單樣式利用html屬性添加會是代碼複雜臃腫，因此咱們要使用css進行頁面的美化；
編程

二、CSS做用以及初識

Css的做用：
主要是用來進行頁面的版面佈局和外觀樣式的美化；segmentfault

使用css的原理：
可以將結構html和樣式css分離書寫，簡化代碼，提升可閱讀性；
瀏覽器

三、css引入方式

01 行內樣式：

直接在標籤的開始標籤身上添加一個 style=「」屬性，而後在引號裏面書寫css屬性和屬性值便可，沒有實現結構和樣式分離，儘可能不用

02 內部樣式：

書寫在head標籤裏面，title標籤下面，以一對style標籤包裹，實現告終構和樣式的半分離；

03 css外部連接：

外部連接的步驟：

1. 新建：.css格式的css文件，直接書寫選擇器以及css樣式；
1. 引用：利用link標籤引入新建的css文件，要配合link的三個屬性  rel關係，type文件類型（能夠不寫） ，href文件路徑； [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link)

使用外部連接的好處：

1. 實現告終構和樣式的徹底分離，代碼簡介，可讀性強；
1. 一個css樣式能夠共享，若是兩個頁面的標籤樣式徹底一致，就可使用同一個css文件，而後分別鏈接過來便可；

四、CSS 書寫格式

選擇器 { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3；…… }
選擇器：指定CSS樣式做用的HTML對象（要更改樣式的標籤），花括號內是對該對象設置的具體樣式。
屬性和屬性值：以鍵值對的形式出現，屬性和屬性值之間用英文的冒號 ’ : ’ 連接；

五、CSS選擇器

選擇器的做用：把想要選擇的元素標籤選擇出來。
選擇器的分類：基礎選擇器和複合選擇器

基礎選擇器

a. 標籤選擇器

以標籤名稱命名的選擇器，能夠把將頁面中全部的同類元素所有選中；
注意：若是咱們選中了改標籤，頁面中全部的該標籤就會被所有選中，全部不建議你們直接使用標籤選擇器；

a,p,div,li,ul{
    color:red;
}
/*頁面上全部的a,p,li,ul都會將字體顏色設置爲紅色，不過優先級最低*/

b. 類選擇器

使用方式：在css裏面用點「 . 」 + 類名稱 +{ css鍵值對 } 進行樣式定義;
調用：在html裏面哪一個標籤須要，就在開始標籤敲空格class=「類名稱」進行調用；
命名規則：不能用純數字、不能數字開頭的、不能中文命名，建議不要用特殊符號；能夠用英文單詞或者拼音命名，能夠以數字結束
多類名調用：一個標籤身上只能使用一個class，若是想要調用多個類名咱們能夠在一個class裏面直接以空格隔開直接書寫另外一個類名稱便可；

<p class="test">我愛你</p>
<style>
    .test{
        color:red;
    }
    /*類選擇器經過class屬性來綁定一個類名，樣式經過. + ‘class’來實現關聯，優先級低於id選擇器*/
  /* 工程實踐中咱們通常推薦使用類選擇器*/
</style>

c. id 選擇器

類選擇能夠重複使用，只要樣式一致就能夠重複的使用同一個類名稱；
id選擇器是惟一的不能重複使用，一個id名稱一個頁面只能出現一次；

<p id="test">若是說命運是應許之地，那麼在這一刻，你並不知道將來會如何勾連</p>
<style>
    #test{
        color:red;
    }
    /*id選擇器經過id屬性來綁定一個惟一id，樣式經過# + ‘id’來實現關聯，優先級較高*/
</style>

d. 通配符選擇器 *

一個表示選中全部標籤，匹配頁面的全部標籤，下降頁面獲得響應時間，不建議使用；
實際工做中用的最多的是下面的代碼
{ margin: 0; padding: 0; }

e. 屬性選擇器

<a class="test" src='/test.html'>一輩子須惜少年時，那能白首下書帷。</a>
<style>
   [src^="test"]{
       color:blue;
   }
   .test[src]{
       color:red;
   }
   /*屬性選擇器經過[attr=*]來選擇具備該屬性的元素，屬性值支持通配符(不作具體詳解)形式，優先級較低，多種選擇器能夠結合使用，上例中，後者優先級高於前者，因此呈現的字體爲紅色。*/
</style>

f. 子元素和後代元素選擇器

<p>我不會變色（穿越人海，只爲與你相擁）</p>
<ul>
   <li>我是子元素<span>我是子子元素（夢魂縱有也成虛 那堪和夢無）</span></li>
   <li>我是第二個子元素（我心匪石，不可轉也）</li>
   <li>
       <li>我是li裏面的li（夜夜除非，美夢留人睡）</li>
   </li>
</ul>
<p>我會變紅</p>
<style>
   ul li{
       margin-left:20px;
   }
   /*經過空格隔開的方式選擇全部子元素，這樣，ul裏面的全部li都會應用到左邊距20px的樣式,包括li裏面的li*/
   ul>li{
       padding-left:20px;
   }
   /*經過選擇器 > 選擇器 來選擇直接子元素，意思是說，只有第一級的li會被應用成左內邊距20px,而li裏面的li不會被應用到。*/
   ul + p{
       background-colo:red;
   }
   /*經過 選擇器 + 選擇器 來選擇兄弟元素，這樣讓下面的p元素的背景色爲紅色，而第一個p標籤的背景色不會變。*/
</style>

https://codepen.io/AlexZ33/pen/YzzRPBW

這裏着重實踐下 相鄰兄弟選擇器 經常使用場景

https://codepen.io/AlexZ33/pen/qBBeeBz

g. 僞類選擇器

px
em
rem
僞類專門用來表示元素的一種的特殊的狀態。好比：訪問過的超連接，好比普通的超連接，好比獲取焦點的文本框。當咱們須要爲處在這些特殊狀態的元素設置樣式時，就可使用僞類。
:link,表示普通的連接（沒訪問過的連接）
:visited,表示訪問過的連接
:hover,表示鼠標移入的狀態
:active,表示的是超連接被點擊的狀態
:focus,表示文本框獲取焦點

說明：

ps: :hover和:active也能夠爲其餘元素設置(ie6不支持)
普通標籤支持:hover,:focus,其餘僞類只有一些特定的標籤才支持，好比說：a標籤支持:visited,:active,link；button支持:active,:focus。舉例：

<a class="test" src='/test.html'>我是鏈接</a>
<button>點我我就綠</button>
<style>
   a:link{
       color:blue;
   }
   /*鏈接未被訪問過，爲blue顏色*/
   a:visited{
       color:red;
   }
   /*訪問以後，變成紅色*/
   a:hover{
       font-size:40px;
   }
   /*鼠標一上去，字體變大*/
   button:focus{
       color:green;
   }
   /*點擊按鈕，按鈕聚焦，會變成綠色*/
   button:active{
       color:red;
   }
   /*點擊按鈕的過程當中，按鈕顏色會變紅*/
</style>

https://codepen.io/AlexZ33/pen/abbQONO

H. 僞元素選擇器

p:first-letter

做用：選擇p中第一個字符

p:first-line,選擇p中的第一行
:before,表示元素最前邊的部分，通常before都須要結合content這個樣式一塊兒使用，經過content能夠向before或after的位置添加一些內容
:after,表示元素的最後邊的部分

簡單用法：
https://codepen.io/AlexZ33/pen/WNNYvoa?&editable=true

複雜實踐：
https://codepen.io/AlexZ33/pen/XWWybaJ
經常使用的HTML和CSS content屬性特殊字符概括

使用before僞元素實現麪包屑

i. 子元素僞類選擇器

:first-child 能夠選中第一個子元素
:last-child 能夠選中最後一個子元素
:nth-child(XXX) 能夠選中任意位置的子元素,該選擇器後邊能夠指定一個參數，指定要選中第幾個子元素,even 表示偶數位置的子元素,odd 表示奇數位置的子元素。
:first-of-type、:last-of-type、:nth-of-type和:first-child這些很是的相似，只不過child，是在全部的子元素中排列，而type，是在當前類型的子元素中排列

https://codepen.io/AlexZ33/pen/dyyQaPG

j.

六、CSS選擇器權重

權重主要分爲 4 個等級：

第一等：表明內聯樣式，如: style=""，權值爲1000
第二等：表明ID選擇器，如：#content，權值爲100
第三等：表明類，僞類和屬性選擇器，如.content，權值爲10
第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲1

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>選擇器權重</title>
    <meta name="description" content="選擇器權重">
    <meta name="author" content="Way Lau, www.waylau.com"/>
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">

    <style type="text/css">
        #redP p {
            /* 權值 = 100+1=101 */
            color: #F00; /* 紅色 */
        }

        #redP .red em {
            /* 權值 = 100+10+1=111 */
            color: #00F; /* 藍色 */

        }

        #redP p span em {
            /* 權值 = 100+1+1+1=103 */
            color: #FF0; /*黃色*/
        }
    </style>
</head>
<body>
<div id="redP">
    <p class="red">red
        <span><em>em red</em></span>
    </p>

    <p>red</p>
</div>
</body>
</html>

最終頁面效果以下：
https://codepen.io/AlexZ33/pen/QWWVYpR

相似示例：

沒法改變顏色的標籤

七、CSS優先級

遵循以下法則：

選擇器都有一個權值，權值越大越優先；
當權值相等時，後出現的樣式表設置要優於先出現的樣式表設置；
創做者的規則高於瀏覽者：即網頁編寫者設置的 CSS 樣式的優先權高於瀏覽器所設置的樣式；
繼承的 CSS 樣式不如後來指定的 CSS 樣式；
在同一組屬性設置中標有!important規則的優先級最大
!important > 行內樣式>ID選擇器 > 類選擇器 > 標籤 > 通配符 > 繼承 > 瀏覽器默認屬性

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>!important 用法</title>
    <meta name="description" content="!important 用法">
    <meta name="author" content="Way Lau, www.waylau.com"/>
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">

    <style>
        .test {
            color: #f00 !important;
            color: #000;
        }

        .test2 {
            color: #f00 !important;
        }

        .test2 {
            color: #000;
        }

        .test3 {
            color: #000;
        }

        .test3 {
            color: #f00;
        }
    </style>
</head>
<body>
<div class="test">同一條樣式內，!important 優先級高</div>
<div class="test2">在分散的樣式條目內，!important 優先級高</div>
<div class="test3">沒有被覆蓋</div>
</body>
</html>

https://codepen.io/AlexZ33/pen/dyyqaVZ

八、數值與單位

九、背景和邊框

背景知識

border
- https://www.runoob.com/css/css-border.html
border-radius --> [border-radius(圓角)]()[-Css3演示]() --> https://codepen.io/AlexZ33/pen/YzzRwLy
box-shadow --> Box Shadow(陰影)-Css3演示 -->
border-image
background ：
- https://www.w3school.com.cn/css/css_background.asp
- https://www.runoob.com/css/css-background.html

注意：Internet Explorer 9+ 支持 border-radius 和 box-shadow 屬性。Firefox、Chrome 以及 Safari 支持全部新的邊框屬性。對於 border-image，Safari 5 以及更老的版本須要前綴 -webkit-。 Opera 支持 border-radius 和 box-shadow 屬性，可是對於 border-image 須要前綴 -o-

一、半透明邊框

假設咱們想給一個容器設置一層白色背景和一道半透明的邊框，咱們最初的嘗試多是這樣的：

border: 10px solid hsla(0, 0%, 100%, .5);
background: #fff;

除非你對背景和邊框的工做原理很是地熟悉，不然展現出來的結果可能讓你摸不着頭腦，由於咱們的背景會從它的半透明邊框透上來。以下圖所示：

解決方案

默認狀況下，背景會延伸到邊框所在的區域下層，即便你使用的是不透明的實色邊框。幸運的是，在CSS3中，咱們能夠經過bakcground-clip屬性來調整上述默認行爲。這個屬性的初始值是border-box，若是不但願背景侵入到邊框所在的範圍，咱們能夠把它的值設爲padding-box，即：

border: 1px solid hsla(0, 0%, 100%, .5);
background: #fff;
background-clip: padding-box

https://codepen.io/AlexZ33/pen/rNBPGOj

二、多重邊框

目前爲止，咱們大多數人可能用過（或濫用過）box-shadow來生成投影。不太爲人所知的是，它還接受第四個參數（叫作擴張半徑），經過指定正值和負值，可讓投影面積加大或減少。一個正值的擴張半徑加上兩個爲零的偏移量以及爲零的模糊值，獲得的投影其實就像一道實線邊框：

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

使用box-shadow的另外一個好處是它支持逗號分隔語法，咱們能夠建立任意數量的投影（邊框）

ackground: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

須要注意的是，box-shadow是層層疊加的，第一層投影位於最頂層。所以，須要按照此規律調整擴張半徑
https://codepen.io/AlexZ33/pen/LYYXpvX

高級案例：
https://alexz33.github.io/CSS3_demo/css3_picshadow.html

三、border實現三角形

用css畫三角形很簡單，就是將一個塊元素寬高設置爲0，而後給某一邊設一個比較厚的寬度
利用盒子的均分原理，盒子都是矩形或者正方形，從形狀的中心，向4個上下左右劃分4個部分。

保證元素是塊級元素，設置元素的邊框，不須要顯示的邊框使用透明色transparent。

因此，若是你要一個向上或者向下的三角:border-left和border-right就是transparent，而border-bottom可見則三角向上，border-top可見則三角向下

https://codepen.io/AlexZ33/pen/MWWzMdm

四、圓角/陰影/過渡

九、文字文本樣式

咱們將詳細介紹文本/字體樣式的全部基本原理，包括設置文字的粗細，字體和樣式，文字的屬性簡寫，文字的對齊，和其餘效果，以及行和字母間距。

用於樣式文本的 CSS 屬性一般能夠分爲兩類，咱們將在本文中分別觀察。

字體樣式: 做用於字體的屬性，會直接應用到文本中，好比使用哪一種字體，字體的大小是怎樣的，字體是粗體仍是斜體，等等。
文本佈局風格: 做用於文本的間距以及其餘佈局功能的屬性，好比，容許操縱行與字之間的空間，以及在內容框中，文本如何對齊。

可細緻學習文章：

CSS中的文字樣式涉及什麼？

01 文字大小font-size

font-size文字大小，經常使用的單位是px像素，通常是有默認的字體大小16px，可是咱們建議你們一開始就在body中設置一個默認大小；

02 文字字體設置font-family

font-family取值能夠取一個或者多個，若是取多個值要用英文的逗號隔開，表示先找第一個字體若是沒有就日後面查找，依次類推；
若是是漢語的文字或英文單詞之間有空格，都要要用英文狀態的引號引發來；

font-family:Arial,」Microsoft Yahei」，「微軟雅黑」；

unicode字體

在CSS中設置字體名稱,能夠直接寫中文,可是在文件編碼(GB2312, UTF-8等)不匹配時會產生亂碼的錯誤.XP系統不支持相似微軟雅黑的中文
方案一:能夠用英文來代替
方案二:在CSS直接使用unicode編碼來寫字體名稱能夠避免這個錯誤,使用unicode寫中文字體名稱,瀏覽器能夠正確的解析

03 文字的粗細設置font-weight

加粗：font-weight:bold; font-weight:700;
不加粗：font-weight:normal; font-weight:400;

04 文字的傾斜樣式控制font-style

傾斜：font-style:italic;
不傾斜：font-style:normal;
注意：實際工做中咱們通常會使用font-style:normal;讓em和i不傾斜；

05 字體的顏色控制 color

顏色取值：

a、直接寫英文單詞yellow red等等
b、16進製表示#aabbcc或者#abc
c、rgb（）如rgb（0，0，0）
d、rgba(),如rgba（0,0,0,0.5）a爲透明度

經常使用測試顏色16進制：

黑色系列：#000； #333； #666； #9999；
灰色系列：#ccc； #eee； #ddd； #dedede；
紅色：#f00；

06 文字居中設置text-align

text-align有三個取值left、center、right, text-align只控制盒子裏面的內容的對齊；
文本居中：text-align:center;

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align

07 文本的行高設置line-height

line-height取值爲數字，能夠設置文字行與行之間的距離；
line-height:30px; 表示行高30px

08 文本的首行縮進 text-indent

text-indent首行縮進，取值爲具體的像素值或者直接em，1em等於一個字的大小；

09 文本裝飾線條修飾text-decoration

text-decoration:none; 沒有線
text-decoration：underline；下劃線
text-decoration:line-through; 中劃線/刪除線
text-decoration:overline;上劃線
注意：實際工做中咱們用的最多的是沒有線 text-decoration:none;，主要是給超連接a標籤去除默認的下劃線；通常放在css的最前面將頁面全部a的樣式都去除；

10 字體綜合寫法

font：是否傾斜是否加粗 文字大小/ 行高 字體；
font: font-style font-weight font-size/line-height font-family;
注意:**

使用font的綜合書寫的時候必定要按照順序書寫，屬性之間用空格隔開，若是沒有的屬性能夠省略不寫，文字大小和字體是必需要書寫的；
實際工做中通常只用：font:文字大小字體；

11 自定義字體@font-face

之前 CSS3 的版本，網頁設計師不得不使用用戶計算機上已經安裝的字體。
使用 CSS3，網頁設計師可使用他/她喜歡的任何字體。
當你發現您要使用的字體文件時，只需簡單的將字體文件包含在網站中，它會自動下載給須要的用戶。
您所選擇的字體在新的 CSS3 版本有關於@font-face規則描述。
您"本身的"的字體是在 CSS3 @font-face 規則中定義的。
注意：Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字體。
Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字體)和.otf(OpenType)字體字體類型）。
Chrome, Safari 和 Opera 也支持 SVG 字體/摺疊。
Internet Explorer 一樣支持 EOT (Embedded OpenType) 字體。
在 @font-face 規則中，您必須首先定義字體的名稱（好比 FontAwesome ），而後指向該字體文件 fontawesome-webfont.woff 。

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.woff');
}

.font6 {
    font-family: 'FontAwesome', sans-serif;
    font-size: 14px;
    color: pink;
    line-height: 1.3em;
}

源碼參見 https://gitee.com/turingitclub/css-learning/tree/dev/base中 base 目錄下的 font.html

十二、格式化列表

<h2>Shopping (unordered) list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ul>
  <li>Humous</li>
  <li>Pitta</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h2>Recipe (ordered) list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ol>
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

<h2>Ingredient description list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<dl>
  <dt>Humous</dt>
  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
  <dt>Pitta</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>

如今，若是你去到例子的展現頁面，並使用瀏覽器開發者工具查看那些列表元素，你會注意到若干個默認的樣式預設值：

<ul> 和 <ol> 元素設置margin的頂部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); （在這裏注意的是瀏覽器默認字體大小爲16px）。
<li> 默認是沒有設置間距的。 --> 怎樣設置列表間距？
<dl> 元素設置 margin的頂部和底部: 16px(1em) ，無內邊距設定。
<dd> 元素設置爲： margin-left 40px (2.5em)。
在參考中提到的 <p> 元素設置 margin的頂部和底部: 16px(1em)，和其餘的列表類型相同。

a、處理列表間距

/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Description list styles */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}

第一條規則集設置一個網站字體，基準字體大小爲10px。頁面上的全部內容都將繼承該規則集。
規則集2和3爲標題、不一樣的列表類型和段落以及設置了相對字體大小（這些列表的子元素將會繼承該規則集），這就意味着每一個段落和列表都將擁有相同的字體大小和上下間距,有助於保持垂直間距一致。
規則集4在段落和列表項目上設置相同的 line-height ，所以段落和每一個單獨的列表項目將在行之間具備相同的間距。這也將有助於保持垂直間距一致。
規則集5-7適用於描述列表 - 咱們在描述列表的術語和其描述上設置與段落和列表項相同的行高，以及 margin-bottom 爲1.5 rem（與段落（p）和列表項目（li））相同。再次強調一遍，這裏很好地實現了一致性！咱們還使描述術語具備粗體字體，所以它們在視覺上脫穎而出。

a、列表特色樣式

list-style-type : 設置用於列表的項目符號的類型，例如無序列表的方形或圓形項目符號，或有序列表的數字，字母或羅馬數字。
list-style-position : 設置在每一個項目開始以前，項目符號是出如今列表項內，仍是出如今其外。
list-style-image: 容許您爲項目符號使用自定義圖片，而不是簡單的方形或圓形。

1三、CSS樣式化連接

當爲 links 添加樣式時, 理解利用僞類有效地創建連接狀態是很重要的，以及如何爲連接添加樣式來實現經常使用的功能，好比說導航欄、選項卡。咱們將在本文中關注全部這些主題。

第一件須要理解的事情是連接狀態的概念，連接存在時處於不一樣的狀態，每個狀態均可以用對應的僞類來應用樣式:

Link (沒有訪問過的): 這是連接的默認狀態，當它沒有處在其餘狀態的時候，它可使用:link 僞類來應用樣式。
Visited: 這個連接已經被訪問過了(存在於瀏覽器的歷史紀錄), 它可使用 :visited 僞類來應用樣式。
Hover: 當用戶的鼠標光標恰好停留在這個連接，它可使用 :hover 僞類來應用樣式。
Focus: 一個連接當它被選中的時候 (好比經過鍵盤的 Tab 移動到這個連接的時候，或者使用編程的方法來選中這個連接 HTMLElement.focus()) 它可使用 :focus 僞類來應用樣式。
Active: 一個連接當它被激活的時候 (好比被點擊的時候)，它可使用 :active 僞類來應用樣式。

a. 默認樣式

https://codepen.io/AlexZ33/pen/jOOQXpa

當你觀察默認樣式的時候，你也許會注意到一些東西:

連接具備下劃線。
未訪問過的 (Unvisited) 的連接是藍色的。
訪問過的 (Visited) 的連接是紫色的.
懸停 (Hover) 在一個連接的時候鼠標的光標會變成一個小手的圖標。
選中 (Focus) 連接的時候，連接周圍會有一個輪廓，你應該能夠按 tab 來選中這個頁面的連接 (在 Mac 上, 你可能須要使用_Full Keyboard Access: All controls_ 選項，而後再按下 Ctrl + F7 ，這樣就能夠起做用)
激活 (Active) 連接的時候會變成紅色 (當你點擊連接時，請嘗試按住鼠標按鈕。)

有趣的是，這些默認的樣式與20世紀90年代中期瀏覽器早期的風格幾乎相同。這是由於用戶知道以及期待連接就是這樣變化的，若是連接的樣式不一樣，就會讓一些人感到奇怪。不過這不意味着你不該該爲連接添加任何樣式，只是你的樣式不該該與用戶預期的相差太大，你應該至少：

爲連接使用下劃線，可是不要在其餘內容上也用下劃線，以做區分。若是你不想要帶有下劃線的連接，那你至少要用其餘方法來高亮突出連接。
當用戶懸停或選擇 (hover 或者 focused) 的時候，使連接有相應的變化，而且在連接被激活(active) 的時候，變化會有一些不一樣。可使用如下CSS屬性關閉/更改默認樣式：
color 文字的顏色
cursor 鼠標光標的樣式，你不該該把這個關掉，除非你有很是好的理由。
outline 文字的輪廓 (輪廓有點像邊框，惟一的區別是邊框佔用了盒模型的空間，而輪廓沒有；它只是設置在背景圖片的頂部)。outline 是一個有用的輔助功能，因此在把它關掉以前考慮清楚；你至少應該將懸停 (hover) 狀態的樣式同時應用到選中 (focus) 狀態上。

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

記住這個順序

這個順序是重要的，由於連接的樣式是創建在另外一個樣式之上的，好比第一個規則的樣式會應用到全部後續的樣式，若是當一個連接被激活 (activated) 的時候，它也是處於懸停 (hover) 狀態的。若是你搞錯了順序，那麼就可能不會產生正確的效果。要記住這個順序

b 將樣式應用到一些連接

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;     
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}

https://codepen.io/AlexZ33/pen/jOOQJwE

1四、文本自動換行

word-break

1五、文本自動換行2

若是你碰到一個比自身容器長的文本，這個技巧對你頗有用。在這個示例中，默認時，無論容器的寬度，文本都將水平填充。

1六、長單詞與URL自動換行

1七、使用服務端字體

Web Font
@font-face

1八、修改字體種類而保持字體尺寸不變

font-size-adjust

1九、文字效果

CSS3 文本效果是這樣一個術語用來在正常的文本中實現一些額外的特性。
主要是兩個屬性的 CSS3 文本效果,以下:

text-shadow
word-wrap

注意:Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow 屬性。全部的主流瀏覽器支持自動換行（word-wrap）屬性。Internet Explorer 9及更早IE版本不支持 text-shadow 屬性

text-shadow

文本陰影。您指定了水平陰影，垂直陰影，模糊的距離，以及陰影的顏色：

.text-shadow {
    text-shadow: 10px 10px 10px #6AAFCF;
}

word-wrap

換行。 CSS3中，自動換行屬性容許您強制文本換行 - 即便這意味着分裂它中間的一個字：

.word-wrap {
    word-wrap: break-word;
    width: 150px;
    border: 1px solid #ff0000;
}

屬性

屬性	描述	CSS
hanging-punctuation	規定標點字符是否位於線框以外。	3
punctuation-trim	規定是否對標點字符進行修剪。	3
text-align-last	設置如何對齊最後一行或緊挨着強制換行符以前的行。	3
text-emphasis	向元素的文本應用重點標記以及重點標記的前景色。	3
text-justify	規定當 text-align 設置爲 "justify" 時所使用的對齊方法。	3
text-outline	規定文本的輪廓。	3
text-overflow	規定當文本溢出包含元素時發生的事情。	3
text-shadow	向文本添加陰影。	3
text-wrap	規定文本的換行規則。	3
word-break	規定非中日韓文本的換行規則。	3
word-wrap	容許對長的不可分割的單詞進行分割並換行到下一行。	3

源碼

https://codepen.io/AlexZ33/pen/JjobjWB

十二、盒子模型

全部的元素都被一個個的「盒子（box）」包圍着

盒子類型

塊級盒子（Block box）和內聯盒子（Inline box）

在 CSS 中咱們普遍地使用兩種「盒子」 —— 塊級盒子 (block box) 和內聯盒子 (inline box)。這兩種盒子會在頁面流（page flow）和元素之間的關係方面表現出不一樣的行爲:
一個被定義成塊級的（block）盒子會表現出如下行爲:

盒子會在內聯的方向上擴展並佔據父容器在該方向上的全部可用空間，在絕大數狀況下意味着盒子會和父容器同樣寬
每一個盒子都會換行
width 和 height 屬性能夠發揮做用
內邊距（padding）, 外邊距（margin）和邊框（border）會將其餘元素從當前盒子周圍「推開」

除非特殊指定，諸如標題(<h1>等)和段落(<p>)默認狀況下都是塊級的盒子。
若是一個盒子對外顯示爲 inline，那麼他的行爲以下:

盒子不會產生換行。
width 和 height 屬性將不起做用。
內邊距、外邊距以及邊框會被應用可是不會把其餘處於 inline 狀態的盒子推開。

用作連接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默認處於 inline 狀態的。
咱們經過對盒子display 屬性的設置，好比 inline 或者 block ，來控制盒子的外部顯示類型。

常見block類型：

常見inline類型：

span
a

display

display CSS 屬性指定了元素的顯示類型，它包含兩類基礎特徵：

用於指定元素怎樣生成盒模型——
外部顯示類型定義了元素怎樣參與流式佈局的處理，
內部顯示類型定義了元素內子元素的佈局方式。

/* <display-outside> values
外部顯示類型 */
display: block;
display: inline;
display: run-in;

/* <display-inside> values
內部顯示類型 */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

block vs inline

示例1： https://codepen.io/AlexZ33/pen/WNNWLJV
示例2：改變display屬性 --> https://codepen.io/AlexZ33/pen/abbxPjw

示例3：

完整的 CSS 盒模型應用於塊級盒子，內聯盒子只使用盒模型中定義的部份內容。模型定義了盒的每一個部分 —— margin, border, padding, and content —— 合在一塊兒就能夠建立咱們在頁面上看到的內容

inline-block

inline-block類型是CSS2.1中追加的一個盒模型。

line-block類型屬於block類型盒的一種，可是在顯示時它具備inline類型盒的特色：

div元素的樣式代碼中將display屬性設定爲「inline-block」，則與設置成"inline" 顯示相同
修改對應的width，height，發現，兩個inline-block類型寬度發生了變化，兩個inline類型元素未變化

https://codepen.io/AlexZ33/pen/yLLrWaM

inline-block類型執行並列顯示

CSS2.1以前，若是要在一行並列顯示多個block類型的元素，則須要使用float屬性或者position屬性,可是這樣會使樣式變得比較複雜。
CSS2.1追加了inline-block類型，使並列顯示多個block類型變得很是簡單。

使用float屬性將div元素並列顯示：

https://codepen.io/AlexZ33/pen/WNNWBdo

使用inline-block將div元素並列顯示

**https://codepen.io/AlexZ33/pen/QWWPRBp

默認狀況下使用inline-block類型時並列顯示的元素的垂直對齊方式能夠經過vertical-align屬性更改

使用inline-block顯示水平菜單

CSS2.1以前，對於水平菜單的實現須要使用到float屬性。
通常會利用ul列表和li列表

li元素屬於block類型下的list-item類型，所以若是須要讓li元素並列顯示，須要使用float屬性

使用float屬性顯示水平菜單

https://codepen.io/AlexZ33/pen/pooBmmp

使用inline-block顯示水平菜單

**https://codepen.io/AlexZ33/pen/abbxgoX

另外，還可讓a元素也屬於inline-block類型，而後使用背景色，並指定寬度，使a元素佔據整個菜單。
https://codepen.io/AlexZ33/pen/abbxgOM

怎麼解決li之間的間隙

緣由分析：

緣由是：瀏覽器的默認行爲是把inline元素間的空白字符（空格換行tab）渲染成一個空格，也就是咱們上面的代碼<li>換行後會產生換行字符，而它會變成一個空格，固然空格就佔用一個字符的寬度，因此你懂的...

解決方案：

方法一：既然是由於<li>換行致使的，那就能夠將<li>代碼所有寫在一排

方法二：

li {
 float: left; 
}

inline-table

CSS2中新增的另外一種盒類型： inline-table類型

https://codepen.io/AlexZ33/pen/GRRLbdE

結果中表格先後的文字處於不一樣行中，由於table元素屬於block類型，因此不能和其餘文字處於同一行，但若是將table元素修改爲inline-block類型，就能夠處於同一行了。

list-item類型

若是在display屬性中將元素設定爲list-item類型，能夠將多個元素做爲列表來顯示，同時在元素的開頭加上列表標記。
https://codepen.io/AlexZ33/pen/vYYMqQx

run-in類型 & compact類型

表格相關類型

none類型

display: none

注意它和 visibility: hidden; 的區別

各個瀏覽器對各類類型支持狀況

盒中容納不下的內容顯示

overflow屬性

overflow
overflow-x & overflow-y
text-overflow
::-webkit-scrollbar

對盒使用陰影

box-shadow

指定針對元素的寬度與高度的計算方法

CSS中組成一個塊級盒子須要:

Content box: 這個區域是用來顯示內容，大小能夠經過設置 width 和 height.
Padding box: 包圍在內容區域外部的空白區域；大小經過 padding 相關屬性設置。
Border box: 邊框盒包裹內容和內邊距。大小經過 border 相關屬性設置。
Margin box: 這是最外面的區域，是盒子和其餘元素之間的空白區域。大小經過 margin 相關屬性設置

1三、做業: 用css寫一個網頁

一、https://gitee.com/turingitclub/css-learning/tree/dev/task01 task1
二、 ie的盒子模型和 chrome的盒子模型有什麼不同？

--> 參考文檔： https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model

三、學習task2今天講到的內容，照着代碼

1四、Emmet語法

標籤名+tab鍵能夠生成整個標籤；例如：div 表示生成div標籤；
標籤數字+tab鍵能夠按照數字生成對應的個數標籤；例如：p3表示3生成3個p；
若是是父子級關係能夠直接用>鏈接+tab：例如：div>p 表示div嵌套p標籤；
若是是兄弟關係就直接用+加tab；例如：div+p 表示div和p標籤是同級元素；
若是要寫類名和id名稱直接早標籤後面跟. 和#便可；例如：div.box === <div class=「box」></div> div#box === <div id=「box」></div> ；
若是想要生成有順序的類名，直接在類名後面加$+數字；