国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

讀后總結--精通css高級web標準解決方案(第二版)

leone / 3113人閱讀

摘要:無論是否移動,元素仍然占據原來的空間。絕對定位絕對定位使元素的位置與文檔流無關,因此不占據空間。

為啥讀這本書

現在前端圈子過于浮躁,掌握基礎無疑比掌握一個js框架重要

css怎么都能寫出來,但是要寫的好寫得快還得多讀書

css魔法推薦的,讀完這個讀讀css揭秘

當然,根本原因還是覺得自己掌握不好

開始總結吧~ 一. 基礎知識

經過上世紀沒有 css的痛苦時的混沌時期,人們開始了進步之路
1.語義化標簽:提高可讀性和更合適默認樣式
2.設置ID和類名:上一步的加強,同時也為樣式提供鉤子(hook)
3.如何分配ID和類名:保持與表現方式無關,應該根據“他們是什么”,而不是“它們外觀如何命名”
4.選擇ID還是類名:類應該應用于概念上相似的元素,這些元素可以出現在同一個頁面上的多個位置,而ID應該應用于不同的唯一的元素
5.不應該亂用類名:這樣會導致文檔增加很多無意義的類,可以結合后代選擇器+標簽選擇器的形式避免
6.刪除不必要的div:比如ul外套div是完全沒有必要的
7.css版本

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

8.html版本

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

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

二. css選擇器

1.常用選擇器(現代瀏覽器制霸):標簽選擇器,后代選擇器,ID選擇器,類選擇器,通用選擇器
2.偽類選擇器:根據文檔結構之外的其他條件對元素應用樣式

:link和:visited稱為鏈接偽類,只能應用于錨元素
:hover、:active、:focus稱為動態偽類,上可以應用于任何元素
:hover、:active,IE6只能應用于錨鏈接:focus完全忽略
:active、:focus,IE7完全忽略但:hover正常使用

3.高級選擇器:IE6不支持,但是不會導致css報錯,會忽略。請記住,對于重要功能或站點功能避免使用(不考慮兼容老瀏覽器除外)

子選擇器(>)、相鄰選擇器(+):IE7支持,但html元素之間不能有注釋

屬性選擇器

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、h1、div     一般從上到下一個一個排列
行內框(內聯元素) display:inline;    a、span       水平排列,可使用垂直內邊距、邊框、外邊距,但不能使用水平內邊距、邊框、外邊距;修改高度唯一方法是修改行高

7.display:inline-block;css2.1新屬性(>=IE8)將塊級元素像行內元素顯示
8.匿名塊框:將一些文本添加到一個塊級元素的開頭時,可以:first-line為元素指定樣式

匿名塊級元素
塊級元素

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.圓角框

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

HeadLine

Content

.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:多個背景圖片

HeadLine

Content

.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

.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;

持續更新中。。。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115301.html

相關文章

  • 說說我的web前端之路,分享些前端的好書

    摘要:推薦高性能網站建設指南高性能網站建設進階指南理由在讀完前幾本書之后我們對前端的性能和自己的代碼的效率已經達到相當的高度了,然后我們在接觸一些前端工程師的一些精髓。   WEB前端研發工程師,在國內算是一個朝陽職業,這個領域沒有學校的正規教育,大多數人都是靠自己自學成才。本文主要介紹自己從事web開發以來(從大二至今)看過的書籍和自己的成長過程,目的是給想了解JavaScript或者是剛...

    PascalXie 評論0 收藏0
  • 說說我的web前端之路,分享些前端的好書

    摘要:推薦高性能網站建設指南高性能網站建設進階指南理由在讀完前幾本書之后我們對前端的性能和自己的代碼的效率已經達到相當的高度了,然后我們在接觸一些前端工程師的一些精髓。   WEB前端研發工程師,在國內算是一個朝陽職業,這個領域沒有學校的正規教育,大多數人都是靠自己自學成才。本文主要介紹自己從事web開發以來(從大二至今)看過的書籍和自己的成長過程,目的是給想了解JavaScript或者是剛...

    Integ 評論0 收藏0
  • 說說我的web前端之路,分享些前端的好書

    摘要:推薦高性能網站建設指南高性能網站建設進階指南理由在讀完前幾本書之后我們對前端的性能和自己的代碼的效率已經達到相當的高度了,然后我們在接觸一些前端工程師的一些精髓。   WEB前端研發工程師,在國內算是一個朝陽職業,這個領域沒有學校的正規教育,大多數人都是靠自己自學成才。本文主要介紹自己從事web開發以來(從大二至今)看過的書籍和自己的成長過程,目的是給想了解JavaScript或者是剛...

    sugarmo 評論0 收藏0
  • 資源大放送

    摘要:這是我收集的一些資源,分享給大家,全部放在百度網盤,有需要的請轉存到自己的網盤或者下載,以免網盤鏈接失效,另外還有幾百的視頻文件存在網盤,需要的加全部分享在空間,自己可以去下載與權威指南配套源碼禪意花園高清源碼基礎教程權威指南參考手冊鋒利 這是我收集的一些資源,分享給大家,全部放在百度網盤,有需要的請轉存到自己的網盤或者下載,以免網盤鏈接失效,另外還有幾百G的視頻文件存在網盤,需要的加...

    lidashuang 評論0 收藏0

發表評論

0條評論

leone

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<