前端基礎入門二（CSS）

時間  2019-12-05
標籤 前端 基礎 入門 css 欄目 CSS 简体版
原文   原文鏈接

回顧上一節HTML 思惟導圖

圖片描述

CSS課程目標

  1. 學會使用CSS選擇器
  2. 熟記CSS樣式和外觀屬性
  3. 熟練掌握CSS各類選擇器
  4. 熟練掌握CSS各類選擇器
  5. 熟練掌握CSS三種顯示模式
  6. 熟練掌握CSS背景屬性
  7. 熟練掌握CSS三大特性
  8. 熟練掌握CSS盒子模型
  9. 熟練掌握CSS浮動

10.熟練掌握CSS定位
11.熟練掌握CSS高級技巧強化CSShtml

CSS的發展歷程

從HTML被髮明開始，樣式就以各類形式存在。不一樣的瀏覽器結合它們各自的樣式語言爲用戶提供頁面效果的控制。最初的HTML只包含不多的顯示屬性。html5

隨着HTML的成長，爲了知足頁面設計者的要求，HTML添加了不少顯示功能。可是隨着這些功能的增長，HTML變的愈來愈雜亂，並且HTML頁面也愈來愈臃腫。因而CSS便誕生了。git

CSS初識

CSS(Cascading Style Sheets) 美化樣式github

CSS一般稱爲CSS樣式表或層疊樣式表（級聯樣式表），主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。算法

CSS以HTML爲基礎，提供了豐富的功能，如字體、顏色、背景的控制及總體排版等，並且還能夠針對不一樣的瀏覽器設置不一樣的樣式。chrome

引入CSS樣式表（書寫位置）

CSS能夠寫到那個位置？ 是否是必定寫到html文件裏面呢？瀏覽器

內部樣式表

內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標籤中，而且用style標籤訂義，其基本語法格式以下：服務器

<head>
<style type="text/CSS">
    選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>

語法中，style標籤通常位於head標籤中title標籤以後，也能夠把他放在HTML文檔的任何地方。ide

type="text/CSS" 在html5中能夠省略， 寫上也比較符合規範， 因此這個地方能夠寫也能夠省略。工具

行內式（內聯樣式）

內聯樣式，又有人稱行內樣式、行間樣式、內嵌樣式。是經過標籤的style屬性來設置元素的樣式，其基本語法格式以下：

<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>

語法中style是標籤的屬性，實際上任何HTML標籤都擁有style屬性，用來設置行內式。其中屬性和值的書寫規範與CSS樣式規則相同，行內式只對其所在的標籤及嵌套在其中的子標籤起做用。

外部樣式表（外鏈式）

鏈入式是將全部的樣式放在一個或多個以.CSS爲擴展名的外部樣式表文件中，經過link標籤將外部樣式表文件連接到HTML文檔中，其基本語法格式以下：

<head>
  <link href="CSS文件的路徑"  rel="stylesheet" />
</head>

注意： link 是個單標籤哦!!!

該語法中，link標籤須要放在head頭部標籤中，而且必須指定link標籤的三個屬性，具體以下：

href：定義所連接外部樣式表文件的URL，能夠是相對路徑，也能夠是絕對路徑。
type：定義所連接文檔的類型，在這裏須要指定爲「text/CSS」，表示連接的外部文件爲CSS樣式表。
rel：定義當前文檔與被連接文檔之間的關係，在這裏須要指定爲「stylesheet」，表示被連接的文檔是一個樣式表文件。

三種樣式表總結（位置）

clipboard.png

CSS樣式規則

使用HTML時，須要聽從必定的規範。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先須要瞭解CSS樣式規則，具體格式以下：
圖片描述

在上面的樣式規則中:

1.選擇器用於指定CSS樣式做用的HTML對象，花括號內是對該對象設置的具體樣式。
2.屬性和屬性值以「鍵值對」的形式出現。
3.屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。
4.屬性和屬性值之間用英文「:」鏈接。
5.多個「鍵值對」之間用英文「;」進行區分。
能夠用段落 和 表格的對齊的演示。

選擇器（重點）

要想將CSS樣式應用於特定的HTML元素，首先須要找到該目標元素。在CSS中，執行這一任務的樣式規則部分被稱爲選擇器（選擇符）。

CSS基礎選擇器

標籤選擇器（元素選擇器）

標籤選擇器是指用HTML標籤名稱做爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的CSS樣式。其基本語法格式以下：

標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤選擇器最大的優勢是能快速爲頁面中同類型的標籤統同樣式，同時這也是他的缺點，不能設計差別化樣式。

標籤選擇器 能夠把某一類標籤所有選擇出來 div span

類選擇器

類選擇器使用「.」（英文點號）進行標識，後面緊跟類名，其基本語法格式以下：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標籤調用的時候用 class=「類名」 便可。

類選擇器最大的優點是能夠爲元素對象定義單獨或相同的樣式。 能夠選擇一個或者多個標籤

小技巧：
1.長名稱或詞組可使用中橫線來爲選擇器命名。
2.不建議使用「_」下劃線來命名CSS選擇器。

輸入的時候少按一個shift鍵;
瀏覽器兼容問題 (好比使用_tips的選擇器命名，在IE6是無效的)
能良好區分JavaScript變量命名(JS變量命名是用「_」)

3.不要純數字、中文等命名， 儘可能使用英文字母來表示。

案例：

<head>
        <meta charset="utf-8">
        <style>
        span {
            font-size: 100px;
        }
        .blue {
            color: blue;
        }
        .red {
            color: red;
        }
        .orange {
            color: orange;
        }
        .green {
            color: green;
        }
        </style>
    </head>
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>

多類名選擇器

咱們能夠給標籤指定多個類名，從而達到更多的選擇目的。
注意：

  1. 樣式顯示效果跟HTML元素中的類名前後順序沒有關係,受CSS樣式書寫的上下順序有關。
  2. 各個類名中間用空格隔開。

多類名選擇器在後期佈局比較複雜的狀況下，仍是較多使用的。

<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>

id選擇器

id選擇器使用「#」進行標識，後面緊跟id名，其基本語法格式以下：

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中，id名即爲HTML元素的id屬性值，大多數HTML元素均可以定義id屬性，元素的id值是惟一的，只能對應於文檔中某一個具體的元素。

用法基本和類選擇器相同。

id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不容許有相同名字的id對象出現，可是容許相同名字的class。

類選擇器（class） 比如人的名字， 是能夠屢次重複使用的， 好比 張偉 王偉 李偉 李娜

id選擇器 比如人的身份證號碼， 全中國是惟一的， 不得重複。 只能使用一次。

d選擇器和類選擇器最大的不一樣在於 使用次數上。

通配符選擇器

通配符選擇器用「*」號表示，他是全部選擇器中做用範圍最廣的，能匹配頁面中全部的元素。其基本語法格式以下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例以下面的代碼，使用通配符選擇器定義CSS樣式，清除全部HTML標記的默認邊距。

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

注意：

這個通配符選擇器，就像咱們的電影明星中的夢中情人， 想一想它就行了，可是它不會和你過日子。

CSS字體樣式屬性

font-size:字號大小

font-size屬性用於設置字號，該屬性的值可使用相對長度單位，也可使用絕對長度單位。其中，相對長度單位比較經常使用，推薦使用像素單位px，絕對長度單位使用較少。具體以下：
圖片描述

font-family:字體

font-family屬性用於設置字體。網頁中經常使用的字體有宋體、微軟雅黑、黑體等，例如將網頁中全部段落文本的字體設置爲微軟雅黑，可使用以下CSS樣式代碼：

p{ font-family:"微軟雅黑";}

能夠同時指定多個字體，中間以逗號隔開，表示若是瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。

經常使用技巧：

  1. 如今網頁中廣泛使用14px+。
  2. 儘可能使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug。
  3. 各類字體之間必須使用英文狀態下的逗號隔開。
  4. 中文字體須要加英文狀態下的引號，英文字體通常不須要加引號。當須要設置英文字體時，英文字體名必須位於中文字體名以前。
  5. 若是字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
  6. 儘可能使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

CSS Unicode字體

font-weight:字體粗細

字體加粗除了用 b 和 strong 標籤以外，可使用CSS 來實現，可是CSS 是沒有語義的。

font-weight屬性用於定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。
小技巧：數字 400 等價於 normal，而 700 等價於 bold。 可是咱們更喜歡用數字來表示。

font-style:字體風格

字體傾斜除了用 i 和 em 標籤以外，可使用CSS 來實現，可是CSS 是沒有語義的。

font-style屬性用於定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值以下：

normal：默認值，瀏覽器會顯示標準的字體樣式。

italic：瀏覽器會顯示斜體的字體樣式。

oblique：瀏覽器會顯示傾斜的字體樣式。
小技巧：平時咱們不多給文字加斜體，反而喜歡給斜體標籤（em，i）改成普通模式。

font:綜合設置字體樣式 (重點)

font屬性用於對字體樣式進行綜合設置，其基本語法格式以下：

選擇器{font: font-style  font-weight  font-size/line-height  font-family;}

使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。

注意：其中不須要設置的屬性能夠省略（取默認值），但必須保留font-size和font-family屬性，不然font屬性將不起做用。

CSS外觀屬性

color:文本顏色

color屬性用於定義文本的顏色，其取值方式有以下3種：

1.預約義的顏色值，如red，green，blue等。

2.十六進制，如#FF0000，#FF6600，#29D794等。實際工做中，十六進制是最經常使用的定義顏色的方式。

3.RGB代碼，如紅色能夠表示爲rgb(255,0,0)或rgb(100%,0%,0%)。

須要注意的是，若是使用RGB代碼的百分比顏色值，取值爲0時也不能省略百分號，必須寫爲0%。

line-height:行間距

ine-height屬性用於設置行間距，就是行與行之間的距離，即字符的垂直間距，通常稱爲行高。line-height經常使用的屬性值單位有三種，分別爲像素px，相對值em和百分比%，實際工做中使用最多的是像素px

通常狀況下，行距比字號大7.8像素左右就能夠了。

text-align:水平對齊方式

text-align屬性用於設置文本內容的水平對齊，至關於html中的align對齊屬性。其可用屬性值以下：

left：左對齊（默認值）

right：右對齊

center：居中對齊

text-indent:首行縮進

text-indent屬性用於設置首行文本的縮進，其屬性值可爲不一樣單位的數值、em字符寬度的倍數、或相對於瀏覽器窗口寬度的百分比%，容許使用負值, 建議使用em做爲設置單位。

1em 就是一個字的寬度 若是是漢字的段落， 1em 就是一個漢字的寬度

text-decoration 文本的裝飾

text-decoration 一般咱們用於給連接修改裝飾效果

clipboard.png

開發者工具（chrome）

此工具是咱們的必備工具，之後代碼出了問題，咱們首先第一反應就是：

「按F12」或者是 「shift+ctrl+i」 打開 開發者工具。

菜單： 右擊網頁空白出---查看
小技巧：

  1. ctrl+滾輪 能夠 放大開發者工具代碼大小。
  2. 左邊是HTML元素結構 右邊是CSS樣式。
  3. 右邊CSS樣式能夠改動數值和顏色查看更改後效果。

CSS複合選擇器

複合選擇器是由兩個或多個基礎選擇器，經過不一樣的方式組合而成的,目的是爲了能夠選擇更準確更精細的目標元素標籤。

交集選擇器

交集選擇器由兩個選擇器構成，其中第一個爲標籤選擇器，第二個爲class選擇器，兩個選擇器之間不能有空格，如h3.special。
![圖片描述

記憶技巧：交集選擇器 是 而且的意思。 即...又...的意思

好比：   p.one   選擇的是： 類名爲 .one  的 段落標籤。

用的相對來講比較少，不太建議使用。

並集選擇器

並集選擇器（CSS選擇器分組）是各個選擇器經過逗號鏈接而成的，任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），均可以做爲並集選擇器的一部分。若是某些選擇器定義的樣式徹底相同，或部分相同，就能夠利用並集選擇器爲它們定義相同的CSS樣式。
圖片描述

記憶技巧：

並集選擇器 和 的意思， 就是說，只要逗號隔開的，全部選擇器都會執行後面樣式。

好比 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個選擇器都會執行顏色爲紅色。 一般用於集體聲明。

後代選擇器

後代選擇器又稱爲包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生嵌套時，內層標籤就成爲外層標籤的後代。
圖片描述
子孫後代均可以這麼選擇。 或者說，它能選擇任何包含在內 的標籤。

子元素選擇器

子元素選擇器只能選擇做爲某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 進行鏈接，注意，符號左右兩側各保留一個空格。
圖片描述

好比： .demo > h3 {color: red;} 說明 h3 必定是demo 親兒子。 demo 元素包含着h3。

僞類選擇器

僞類選擇器用於向某些選擇器添加特殊的效果。好比給連接添加特殊效果， 好比能夠選擇 第1個，第n個元素。

爲了和咱們剛纔學的類選擇器相區別， 類選擇器是一個點 好比 .demo {} 而咱們的僞類 用 2個點 就是 冒號 好比 :link{}

連接僞類選擇器

  • :link / 未訪問的連接 /
  • :visited / 已訪問的連接 /
  • :hover / 鼠標移動到連接上 /
  • :active / 選定的連接 /

    注意寫的時候，他們的順序儘可能不要顛倒 按照 lvha 的順序。 love hate 愛上了討厭 記憶法 或者 lv 包包 很是 hao

a {   /* a是標籤選擇器  全部的連接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
        }
a:hover {   /* :hover 是連接僞類選擇器 鼠標通過 */
            color: red; /*  鼠標通過的時候，由原來的 灰色 變成了紅色 */
}

CSS註釋

CSS規則是使用 / 須要註釋的內容 / 進行註釋的，即在須要註釋的內容前使用 「/」 標記開始註釋，在內容的結尾使用 「/」結束。

例如：p {
font-size: 14px; / 全部的字體是14像素大小/
}

標籤顯示模式（display）

HTML標籤通常分爲塊標籤和行內標籤兩種類型，它們也稱塊元素和行內元素。具體以下：

塊級元素(block-level)

每一個塊元素一般都會獨自佔據一整行或多整行，能夠對其設置寬度、高度、對齊等屬性，經常使用於網頁佈局和網頁結構的搭建。

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。

塊級元素的特色：

（1）老是重新行開始

（2）高度，行高、外邊距以及內邊距均可以控制。

（3）寬度默認是容器的100%

（4）能夠容納內聯元素和其餘塊元素。

行內元素(inline-level)

行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，通常不能夠設置寬度、高度、對齊等屬性，經常使用於控制頁面中文本的樣式。

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。

行內元素的特色：

（1）和相鄰行內元素在一行上。

（2）高、寬無效，但水平方向的padding和margin能夠設置，垂直方向的無效。

（3）默認寬度就是它自己內容的寬度。

（4）行內元素只能容納文本或則其餘行內元素。（a特殊）

注意：
  1. 只有 文字才 能組成段落 所以 p 裏面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裏面不能放其餘塊級元素。
  2. 連接裏面不能再放連接。

塊級元素和行內元素區別

塊級元素的特色：
（1）老是重新行開始
（2）高度，行高、外邊距以及內邊距均可以控制。
（3）寬度默認是容器的100%
（4）能夠容納內聯元素和其餘塊元素。

行內元素的特色：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin能夠設置，垂直方向的無效。
（3）默認寬度就是它自己內容的寬度。
（4）行內元素只能容納文本或則其餘行內元素。

行內塊元素（inline-block）

在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，能夠對它們設置寬高和對齊屬性，有些資料可能會稱它們爲行內塊元素。

行內塊元素的特色：
（1）和相鄰行內元素（行內塊）在一行上,可是之間會有空白縫隙。
（2）默認寬度就是它自己內容的寬度。
（3）高度，行高、外邊距以及內邊距均可以控制。

標籤顯示模式轉換 display

塊轉行內：display:inline;

行內轉塊：display:block;

塊、行內元素轉換爲行內塊： display: inline-block;

CSS書寫規範

開始就造成良好的書寫規範，是你專業化的開始。

空格規範

【強制】 選擇器 與 { 之間必須包含空格。

示例： .selector { }

【強制】 屬性名 與以後的 : 之間不容許包含空格， : 與 屬性值 之間必須包含空格。

示例：

font-size: 12px;

選擇器規範

【強制】 當一個 rule 包含多個 selector 時，每一個選擇器聲明必須獨佔一行。

示例：

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建議】 選擇器的嵌套層級應不大於 3 級，位置靠後的限定條件應儘量精確。

示例：

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

屬性規範

【強制】 屬性定義必須另起一行。

示例：

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【強制】 屬性定義後必須以分號結尾。

示例：

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

CSS 三大特性

層疊 繼承 優先級 是咱們學習CSS 必須掌握的三個特性。

CSS層疊性

個屬性經過兩個相同選擇器設置到同一個元素上，那麼這個時候一個屬性就會將另外一個屬性層疊掉

好比先給某個標籤指定了內部文字顏色爲紅色，接着又指定了顏色爲藍色，此時出現一個標籤指定了相一樣式不一樣值的狀況，這就是樣式衝突。

通常狀況下，若是出現樣式衝突，則會按照CSS書寫的順序，以最後的樣式爲準。

  1. 樣式衝突，遵循的原則是就近原則。 那個樣式離着結構近，就執行那個樣式。
  2. 樣式不衝突，不會層疊

CSS繼承性

所謂繼承性是指書寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用於父元素便可。

簡單的理解就是： 子承父業。

注意：恰當地使用繼承能夠簡化代碼，下降CSS樣式的複雜性。子元素能夠繼承父元素的樣式（text-，font-，line-這些元素開頭的均可以繼承，以及color屬性）

CSS優先級

定義CSS樣式時，常常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。

在考慮權重時，初學者還須要注意一些特殊的狀況，具體以下：

繼承樣式的權重爲0。即在嵌套結構中，無論父元素樣式的權重多大，被子元素繼承時，他的權重都爲0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。

行內樣式優先。應用style屬性的元素，其行內樣式的權重很是高，能夠理解爲遠大於100。總之，他擁有比上面提升的選擇器都大的優先級。

權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具備最大的優先級，或者說排在最後的樣式優先級最大。

CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說無論權重如何以及樣式位置的遠近，!important都具備最大優先級。

CSS的特性

總結優先級：

  1. 使用了 !important聲明的規則。
  2. 內嵌在 HTML 元素的 style屬性裏面的聲明。
  3. 使用了 ID 選擇器的規則。
  4. 使用了類選擇器、屬性選擇器、僞元素和僞類選擇器的規則。
  5. 使用了元素選擇器的規則。
  6. 只包含一個通用選擇器的規則。
  7. 同一類選擇器則遵循就近原則。

總結：權重是優先級的算法，層疊是優先級的表現

CSS 背景(background)

CSS 能夠添加背景顏色和背景圖片，以及來進行圖片設置。

clipboard.png

背景圖片(image)

語法：

background-image : none | url (url)

參數：
none : 　無背景圖（默認的）
url : 　使用絕對或相對地址指定背景圖像
background-image 屬性容許指定一個圖片展現在背景中（只有CSS3才能夠多背景）能夠和 background-color 連用。 若是圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。 若是有背景圖片平鋪，則會覆蓋背景顏色。

小技巧： 咱們提倡 背景圖片後面的地址，url不要加引號。

背景平鋪（repeat）

語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y
參數： 
repeat : 　背景圖像在縱向和橫向上平鋪（默認的）
no-repeat : 　背景圖像不平鋪
repeat-x : 　背景圖像在橫向上平鋪
repeat-y : 　背景圖像在縱向平鋪 
設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。
repeat-x : 　背景圖像在橫向上平鋪  
repeat-y : 　背景圖像在縱向平鋪

背景位置(position)

語法：

background-position : length || length

background-position : position || position

參數：
length : 　百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位
position : 　top | center | bottom | left | center | right

說明：
設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值爲：(0% 0%)。
若是隻指定了一個值，該值將用於橫座標。縱座標將默認爲50%。第二個值將用於縱座標。

注意：

  1. position 後面是x座標和y座標。 可使用方位名詞或者 精確單位。
  2. 若是和精確單位和方位名字混合使用，則必須是x座標在前，y座標後面。好比 background-position: 15px top; 則 15px 必定是 x座標 top是 y座標。

實際工做用的最多的，就是背景圖片居中對齊了。

背景附着

語法：

background-attachment : scroll | fixed

參數：
scroll : 　背景圖像是隨對象內容滾動
fixed : 　背景圖像固定
說明：
設置或檢索背景圖像是隨對象內容滾動仍是固定的。

背景簡寫

background屬性的值的書寫順序官方並無強制標準的。爲了可讀性，建議你們以下寫：

background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);

最後一個參數是alpha 透明度 取值範圍 0~1之間
注意： 背景半透明是指盒子背景半透明， 盒子裏面的內容不收影響。

導航欄案例

使用技巧：在一行內的盒子內，咱們設定行高等於盒子的高度，就可使文字垂直居中。

<head>
        <meta charset="utf-8">
        <style>
        body {
            background-color: #000;
        }
        a {
            width: 200px;
            height: 50px;
            /* background-color: orange; */
            display: inline-block;  /* 把a 行內元素轉換爲行內塊元素 */
            text-align: center;  /* 文字水平居中 */
            line-height: 50px;  /* 咱們設定行高等於盒子的高度，就可使文字垂直居中 */
            color: #fff;
            font-size: 22px;
            text-decoration: none;  /* 取消下劃線 文本裝飾 */
        }
        a:hover {  /* 鼠標通過 給咱們的連接添加背景圖片*/
            background: url(images/h.png) no-repeat; 
        }
        </style>
    </head>
    <body>
    <a href="#">專區說明</a>
    <a href="#">申請資格</a>
    <a href="#">兌換獎勵</a>
    <a href="#">下載遊戲</a>
    </body>

盒子模型（CSS重點）

其實，CSS就三個大模塊： 盒子模型 、 浮動 、 定位，其他的都是細節。要求這三部分，不管如何也要學的很是精通。

所謂盒子模型就是把HTML頁面中的元素看做是一個矩形的盒子，也就是一個盛裝內容的容器。每一個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

看透網頁佈局的本質
把網頁元素好比文字圖片等等，放入盒子裏面，而後利用CSS擺放盒子的過程，就是網頁佈局。
圖片描述

盒子模型（Box Model）

圖片描述

盒子邊框（border）

邊框就是那層皮。橘子皮、柚子皮、橙子皮。

語法：

border : border-width || border-style || border-color

邊框屬性—設置邊框樣式（border-style）
邊框樣式用於定義頁面中邊框的風格，經常使用屬性值以下：

none：沒有邊框即忽略全部邊框的寬度（默認值）

solid：邊框爲單實線(最爲經常使用的)

dashed：邊框爲虛線  

dotted：邊框爲點線

double：邊框爲雙實線

盒子邊框寫法總結表

clipboard.png

表格的細線邊框

之前學過的html表格邊框很粗，這裏只須要CSS一句話就能夠美觀起來。 讓咱們真的相信，CSS就是咱們的白馬王子（白雪公主）。

table{ border-collapse:collapse; } collapse 單詞是合併的意思

border-collapse:collapse; 表示邊框合併在一塊兒。

圓角邊框(CSS3)

今後之後，咱們的世界不僅有矩形。radius 半徑（距離）

語法格式：

border-radius: 左上角  右上角  右下角  左下角;

內邊距（padding）

padding屬性用於設置內邊距。 是指 邊框與內容之間的距離。

padding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距

clipboard.png

外邊距（margin）

margin屬性用於設置外邊距。 設置外邊距會在元素之間建立「空白」， 這段空白一般不能放置其餘內容。

margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距 右外邊距 下外邊距 左外邊
取值順序跟內邊距相同。

外邊距實現盒子居中
可讓一個盒子實現水平居中，須要知足一下兩個條件：

  1. 必須是塊級元素。
  2. 盒子必須指定了寬度（width）

而後就給左右的外邊距都設置爲auto，就可以使塊級元素水平居中。
實際工做中經常使用這種方式進行網頁佈局，示例代碼以下：

.header{ width:960px; margin:0 auto;}

文字盒子居中圖片和背景區別

  1. 文字水平居中是 text-align: center
  2. 盒子水平居中 左右margin 改成 auto
text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改成 auto 就闊以了 */
  1. 插入圖片 咱們用的最多 好比產品展現類
  2. 背景圖片咱們通常用於小圖標背景 或者 超大背景圖片
section img {  
        width: 200px;/* 插入圖片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入圖片更改位置 能夠用margin 或padding  盒模型 */
        margin-left: 50px; /* 插入當圖片也是一個盒子 */
    }

aside {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
    
        background-size: 200px 210px; /*  背景圖片更改大小隻能用 background-size */
        background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
    }

清除元素的默認內外邊距

爲了更方便地控制網頁中的元素，製做網頁時，可以使用以下代碼清除元素的默認內外邊距：

* {
       padding:0;         /* 清除內邊距 */
       margin:0;          /* 清除外邊距 */
    }

注意： 行內元素是隻有左右外邊距的，是沒有上下外邊距的。 內邊距，在ie6等低版本瀏覽器也會有問題。
咱們儘可能不要給行內元素指定上下的內外邊距就行了。

content寬度和高度

使用寬度屬性width和高度屬性height能夠對盒子的大小進行控制。
width和height的屬性值能夠爲不一樣單位的數值或相對於父元素的百分比%，實際工做中最經常使用的是像素值。
大多數瀏覽器，如Firefox、IE6及以上版本都採用了W3C規範，符合CSS規範的盒子模型的總寬度和總高度的計算原則是：

/*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內盒尺寸計算（元素實際大小）*/
  Element Height = content height + padding + border （Height爲內容高度）
  Element Width = content width + padding + border （Width爲內容寬度）

注意：
一、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標籤和 input除外）。
二、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的狀況。
三、若是一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。

盒子模型佈局穩定性

開始學習盒子模型，同窗們最大的困惑就是， 分不清內外邊距的使用，什麼狀況下使用內邊距，什麼狀況下使用外邊距？

答案是： 其實他們大部分狀況下是能夠混用的。 就是說，你用內邊距也能夠，用外邊距也能夠。 你以爲哪一個方便，就用哪一個。

可是，總有一個最好用的吧，咱們根據穩定性來分，建議以下：

按照 優先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）。

width >  padding  >   margin

緣由：

  1. margin 會有外邊距合併 還有 ie6下面margin 加倍的bug（討厭）因此最後使用。
  2. padding 會影響盒子大小， 須要進行加減計算（麻煩） 其次使用。
  3. width 沒有問題（嗨皮）咱們常用寬度剩餘法 高度剩餘法來作。

盒子陰影

語法格式：

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內/外陰影；
  1. 前兩個屬性是必須寫的。其他的能夠省略。
  2. 外陰影 (outset) 可是不能寫 默認 想要內陰影 inset
div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
            /* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色  內/外陰影； */
            box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
            
}

浮動(float)

前面咱們說過，網頁佈局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？

CSS的定位機制有3種：普通流（標準流）、浮動和定位。

什麼是浮動？

元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。

在CSS中，經過float屬性來定義浮動，其基本語法格式以下：

選擇器{float:屬性值;}

clipboard.png

佈局流程

爲了提升網頁製做的效率，佈局時一般須要遵照必定的佈局流程，具體以下：

一、肯定頁面的版心（可視區）。
二、分析頁面中的行模塊，以及每一個行模塊中的列模塊。
三、製做HTML結構 。
四、CSS初始化，而後開始運用盒子模型的原理，經過DIV+CSS佈局來控制網頁的各個模塊。
一列固定寬度且居中
圖片描述

最普通的，最爲經常使用的結構

清除浮動的方法

其實本質叫作閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到裏面，讓父盒子閉合出口和入口不讓他們出來影響其餘元素。

在CSS中，clear屬性用於清除浮動，其基本語法格式以下：

選擇器{clear:屬性值;}

clipboard.png

定位(position)

元素的定位屬性主要包括定位模式和邊偏移兩部分
一、邊偏移

clipboard.png
也就說，之後定位要和這邊偏移搭配使用了， 好比 top: 100px; left: 30px; 等等
二、定位模式(定位的分類)
在CSS中，position屬性用於定義元素的定位模式，其基本語法格式以下：
選擇器{position:屬性值;}
position屬性的經常使用值

clipboard.png

絕對定位

當position屬性的取值爲absolute時，能夠將元素的定位模式設置爲絕對定位。

四種定位總結

clipboard.png

CSS高級技巧

所謂的界面樣式， 就是更改一些用戶操做樣式， 好比 更改用戶的鼠標樣式， 表單輪廓等。可是好比滾動條的樣式改動受到了不少瀏覽器的抵制，所以咱們就放棄了。 防止表單域拖拽

鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針採用何種系統預約義的光標形狀。

cursor :  default  小白 | pointer  小手  | move  移動  |  text  文本

鼠標放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移動</li>
  <li style="cursor:text">我是文本</li>
</ul>

儘可能不要用hand 由於 火狐不支持 pointer ie6以上都支持的儘可能用

輪廓 outline

是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。

outline : outline-color ||outline-style || outline-width

可是咱們都不關心能夠設置多少，咱們平時都是去掉的。

最直接的寫法是 ： outline: 0; 或者 outline: none;

<input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none 這個單詞能夠防止 火狐 谷歌等瀏覽器隨意的拖動 文本域。

右下角能夠拖拽：

<textarea></textarea>

右下角不能夠拖拽：

<textarea  style="resize: none;"></textarea>

之前咱們講過讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;

之前咱們還講過讓文字居中對齊，是 text-align: center;

字體設計推薦網站

http://icomoon.io

icomoon字庫

IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它容許用戶選擇他們所須要的圖標，使它們成一字型。 內容種類繁多，很是全面，惟一的遺憾是國外服務器，打開網速較慢。

推薦網站： http://www.iconfont.cn/
阿里icon font字庫

http://www.iconfont.cn/

這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可使用AI製做圖標上傳生成。 一個字，免費，免費！！

fontello

http://fontello.com/

在線定製你本身的icon font字體圖標字庫，也能夠直接從GitHub下載整個圖標集，該項目也是開源的。

Font-Awesome

http://fortawesome.github.io/...

這是我最喜歡的字庫之一了，更新比較快。目前已經有369個圖標了。

Glyphicon Halflings

http://glyphicons.com/

這個字體圖標能夠在Bootstrap下無償使用。自帶了200多個圖標。

Icons8

https://icons8.com/

提供PNG免費下載，像素大能到500PX
轉換ico圖標

咱們能夠本身作的圖片，轉換爲 ico圖標，以便放到咱們站點裏面。 http://www.bitbug.net/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程