讀後總結--精通css高級web標準解決方案（第二版）

時間 2019-12-06

標籤讀後總結精通 css 高級 web 標準解決方案第二欄目 CSS 简体版

原文原文鏈接

爲啥讀這本書

如今前端圈子過於浮躁，掌握基礎無疑比掌握一個js框架重要css
css怎麼都能寫出來，可是要寫的好寫得快還得多讀書html
css魔法推薦的，讀完這個讀讀css揭祕前端
固然，根本緣由仍是以爲本身掌握很差html5

開始總結吧~

一. 基礎知識

通過上世紀沒有 css的痛苦時的混沌時期，人們開始了進步之路
1.語義化標籤：提升可讀性和更合適默認樣式
2.設置ID和類名：上一步的增強，同時也爲樣式提供鉤子（hook）
3.如何分配ID和類名：保持與表現方式無關，應該根據「他們是什麼」，而不是「它們外觀如何命名」
4.選擇ID仍是類名：類應該應用於概念上類似的元素，這些元素能夠出如今同一個頁面上的多個位置，而ID應該應用於不一樣的惟一的元素
5.不該該亂用類名：這樣會致使文檔增長不少無心義的類，能夠結合後代選擇器+標籤選擇器的形式避免
6.刪除沒必要要的div：好比ul外套div是徹底沒有必要的
7.css版本css3

版本     時間    特色
  css1    1996    字體顏色外邊距等
  css2    1998    增長浮動，等位以及更高級的選擇器
  css2.1  2002    修正上一個版本錯誤，精確的描述css的瀏覽器實現
  css3

8.html版本web

版本         時間    特色
  html4.01    1999
  xhtml1.0    2000    4.01的xml版本，語法嚴格按照xml格式
  html5
  xhtml2              流產

9.文檔類型：經過讀取doctype來了解試用哪一個文檔類型定義（DTD），由此知道使用html哪一個版本，並添加有效性驗證
10.瀏覽器呈現模式：標準模式、混雜模式（向後兼容，但會致使意想不到的bug）、幾乎標準模式
11.DOCTYPE切換對應的呈現模式：詳情可查看 https://hsivonen.fi/doctype/express

二. css選擇器

1.經常使用選擇器（現代瀏覽器制霸）：標籤選擇器，後代選擇器，ID選擇器，類選擇器，通用選擇器
2.僞類選擇器：根據文檔結構以外的其餘條件對元素應用樣式瀏覽器

:link和:visited稱爲連接僞類，只能應用於錨元素
:hover、:active、:focus稱爲動態僞類，上能夠應用於任何元素
:hover、:active,IE6只能應用於錨連接:focus徹底忽略
:active、:focus,IE7徹底忽略但:hover正常使用

3.高級選擇器：IE6不支持，可是不會致使css報錯，會忽略。請記住，對於重要功能或站點功能避免使用（不考慮兼容老瀏覽器除外）緩存

子選擇器（>）、相鄰選擇器（+）：IE7支持，但html元素之間不能有註釋app
屬性選擇器

4.css使用優先級：用戶!important>做者!important>做者>用戶>瀏覽器默認
5.選擇器使用優先級：全部選擇器基數相加最高者顯示

內聯樣式：                   1000
ID選擇器：                   100
類、僞類、屬性選擇器：         10
標籤選擇器、僞標籤選擇器：      1

6.繼承：有的css屬性會繼承
7.@import：這種方法能夠引用css文件，可是會致使文檔加載緩慢，不建議使用
8.註釋：/**/主要用於分割css結構
9.css結構分割：做者提倡使用單一css，不敢苟同，可以使用scss等編譯工具來優化編碼（不過寫這本書時候沒有），但css結構分割時必須的，以避免結構混亂
10.優化樣式表：刪除註釋，刪除無用空格換行，開啓gzip壓縮

三. 盒模型

1.概述：頁面上每一個元素被看作一個矩形框，這個框由元素的內容（content）、內邊距（padding）、邊框（boder）和外邊框（margin）組成。此外，css2.1增長outline屬性（IE7如下不支持），與border屬性不一樣，outline繪製在元素框之上，因此不影響元素的大小或定位
2.標準盒模型寬度：盒子寬度 = contentWidth + padding(Left + Right) + boder(Left + Right) + margin(Left + Right)，即若是設置元素寬度表面只設置content寬度
3.IE盒模型：盒子寬度 = 設置元素的寬度，即padding，boder，margin都從盒子內算起，content佔剩下部分（其實挺科學的不是）
4.box-sizing:css3的這一屬性能夠指定盒模型爲標準盒模型仍是IE盒模型
5.外邊距疊加：當兩個或更多垂直外邊距相遇時，它們將造成一個外邊距。這個外邊距的高度等於兩個發生疊加的外邊距的高度中的較大者，另外，行內框、浮動框或絕對定位框之間的外邊距不會疊加。
6.定位概述：

名稱               屬性            例            特色
塊框（塊級元素）   display:block;    p、h一、div     通常從上到下一個一個排列
行內框（內聯元素） display:inline;    a、span       水平排列，可以使用垂直內邊距、邊框、外邊距，但不能使用水平內邊距、邊框、外邊距；修改高度惟一方法是修改行高

7.display:inline-block;css2.1新屬性（>=IE8）將塊級元素像行內元素顯示
8.匿名塊框：將一些文本添加到一個塊級元素的開頭時，能夠:first-line爲元素指定樣式

<div>
    匿名塊級元素
    <div>塊級元素</div>
</div>

9.相對定位：相對定位的元素，它將出如今它所在位置，而後經過設置垂直或水平位置，讓這個元素「相對於」他的起點移動。不管是否移動，元素仍然佔據原來的空間。
10.絕對定位：

絕對定位使元素的位置與文檔流無關，所以不佔據空間。
絕對定位元素相對於距離它最近的那個已定位的祖先元素肯定。若是元素沒有已定位元素，那麼就相對於畫布或html元素
z-index會控制這些框的疊放次序。
IE6bug:相對於的相對定位框的右邊或下面時，相對定位框須要設定尺寸，要否則會相對於畫布

11.浮動

浮動的框能夠左右移動，知道它的外邊緣碰到包含框或另外一個浮動塊的邊緣。
浮動框再也不文檔的普通流中，因此普通流中的塊框表現的就像浮動框不存在同樣
浮動框會讓文本元素縮進環繞
阻止環繞能夠爲其使用clear屬性（其原理是給文本內容足夠且精確的高度）
父元素內部的子元素若是使用浮動會使得父元素高度塌陷

父元素高度塌陷和清除浮動的解決方法

.clearfix:after{content:'';display:table;clear:both}
.cleafix{*zoom:1;}
或者
.clearfix:after{content:'';display:block;overflow:hidden;clear:both}
.cleafix{*zoom:1;}

四. 背景圖像

1.背景圖像基礎

基礎用法:background-image:url(/img/pattern.gif);
平鋪:background-repeat:repeat-x;
背景顏色（沒有被覆蓋圖片的區域會顯示此顏色，在漸變末尾比較經常使用）:background-color:#ccc;
能夠爲背景區域設定寬高，多用於顯示logo
背景圖片顯示位置（標題上添加項目符號，如點）:background-position:left center;
background-position也能夠設置數字;若是是像素,會以圖片左上角爲對應點出如今背景圖片指定位置;若是是百分比:會以圖片上的指定數字爲對應點
背景css簡寫:background:#ccc url(/img/bullet.gif) no-repeat left center;

2.圓角框

固定寬度圓角框:兩個圓角背景圖一個位於框頂一個位於框底

<div class="box">
    <h2>HeadLine</h2>
    <p class="content">Content</p>
</div>

.box{
    width:419px;
    background:#effce7 url(/img/bottom.gif) no-repeat left bottom;
}

.box h2{
    background:url(/img/top.gif) no-repeat left top;
}

p.content也能夠設置背景顏色 但要保證repeat-y

滑動門圓角框:與固定寬度類似，不過把圓角設定在左上、左下、右上、右下並指定父容器寬度，嵌套很複雜不推薦

css3實現圓角1：多個背景圖片

<div class="box">
    <h2>HeadLine</h2>
    <p>Content</p>
</div>

.box{
    background-image: url(/img/top-left.gif),
                      url(/img/top-right.gif),
                      url(/img/bottom-left.gif),
                      url(/img/bottom-left.gif),
    background-repeat: no-repeat,
                       no-repeat,
                       no-repeat,
                       no-repeat,
    background-position: top left,
top right,
bottom left,
bottom right,
}

不支持瀏覽器會顯示直角框

css3實現圓角2：border-radius

.box{
    -moz-border-radius:1em;
    -webkit-border-radius:1em;
    border-radius:1em;
}

css3實現圓角3：border-image
```
.box{
    -webkit-border-image:url(/img/corners.gif) 25% 25% 25% 25% / 25px round round;
}
```
將背景圖片分爲9個宮格中間部分爲內容其餘部分爲邊框

3.陰影

簡單css陰影： div.陰影 > img

<div class="img-weapper">
    <img src="xxx.jpg" width="300" height="400"></img>
</div>

.img-wrapper{
    background: url(/img/shadow.gif) no-repeat bottom right;
    // 爲了div具備水平伸展性把div浮動
    clear:right;
    float:left;
}
img{
    margin:-5px 5px 5px -5px;
    /* 也能夠用相對位置進行偏移
        position:relative;
        left:-5px;
        top:-5px;
     */
}

box-shadow

img{
    -webkit-box-shadow:3px 3px 6px #666;
    -moz-box-shadow:3px 3px 6px #666;
    box-shadow:3px 3px 6px #666; // 垂直偏移 水平偏移 陰影寬度 陰影顏色
}

4.透明度

css不透明度：其子元素會繼承不建議使用

.alert{
    opacity:0.8;
    filter:alpha(opacity=80); // ie老瀏覽器使用方法
}

RGBa

.alert{
    background-color:rgba(0,0,0,0.8);
}

PNG透明度:png文件支持透明度，可是IE6不直接支持，hack方法以下或使用htc文件顯示

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=/img/my-image.png',sizingMethod='crop');
// 此行代碼會致使css無效，建議單獨提出或者使用ie6條件註釋

五. 對連接應用樣式

1.簡單的連接樣式

連接僞類選擇器

:hover{} // 鼠標懸停處的元素
:active{} // 被激活點擊的元素
:focus{} // 經過鍵盤移動到元素上時，應該與懸停(hover)同樣

連接僞選擇器瀏覽器支持：IE7如下不支持在除連接以外的其餘元素使用僞類選擇器
連接僞選擇器順序很重要，不對的話可能致使失效
```
a:link, a:visited, a:hover, a:focus, a:active
```

2.連接下劃線

簡單的連接修飾：text-decoration: none/underline;或者邊框替代

奇特的連接下劃線

// 圖片下劃線
a:link, a:visited {
    color:#666;
    text-decoration:none;
    background:url(/img/underline.gif) repeat-x left bottom;
}

//動畫下劃線
a:hover, afocus, a:active{
    background-image:url(/img/underline-hover.gif);
}

3.已訪問連接的樣式：防止用戶回溯能夠在visited選擇器中加一個已訪問圖片

// 圖片下劃線
a:visited {
    padding-right:20px;
    background:url(/img/underline.gif) no-repeat right middle;
}

4.爲連接目標設置樣式：若是想爲被連接的錨點設置樣式能夠選擇:target僞類選擇器，爲css3屬性
5.突出顯示不一樣類型的連接：爲了區分站內、站外、郵件、等不一樣種類連接形式能夠在連接後加一個圖片區分

a[href^="http:"] {
    padding-right:20px;
    background:url(/img/externalLink.gif) no-repeat right top;
}

6.建立相似按鈕的連接：連接只能用於請求數據，而不是更改數據

a{
    display:block;
    width:6.6em;
    line-height:1.4;
    text-align:center;
    text-decoration:none;
    border:1px solid #66a300;
    background-color:#8cca12;
    color:#fff;
}

簡單的鼠標改變顏色效果

a:hover, a:focus{
    background-color:#f7a300;
    border-color:#ff7400;
}

鼠標改變圖像效果:原理和上面同樣，不過須要把text-indent設置爲看不見的位置，而且圖片和按鈕css大小一致
Pixy鼠標改變圖像效果:使用上述方法會出現由於再次請求而致使圖片閃爍問題，建議使用雪碧圖方法，不過在IE上依舊會再次請求致使閃爍，使用下面css能夠緩存IE背景圖片
```
html{
    filter: expression(document.execCommand("BackgroundImageCache",false,true));
}
```

純css工具提示：當鼠標懸停在元素上時出現提示，核心代碼以下：

a.tooltip{
    position:relative;
}
a.tooltip:hover span{
    display:block;
    position:absolute;
    top:1em;
    left:2em;
}

六. 列表樣式和建立導航條

1.基本列表樣式

爲了添加定製的項目符號，可使用list-style-image屬性，可是這種方法對圖像位置控制能力不強。更經常使用的方法是關閉項目符號，而且將定製的項目符號做爲背景添加到列表元素上

須要將列表的內外邊距設置爲0

ul{
    margin:0;
    padding:0;
    list-style-type:none;
}
li{
    background:url(/img/bullet.gif) no-repeat 0 50%;
    padding-left:30px;
}

2.水平導航條:實現思路float:left;

持續更新中。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。