CSS3祕笈第三版涵蓋HTML5學習筆記13~17章

時間 2019-11-19

標籤 css3 css 祕笈第三涵蓋 html5 html 學習筆記欄目 CSS 简体版

原文原文鏈接

第13章，構建基於浮動的佈局

使用的是float（浮動）屬性

注：float:none值將取消全部浮動，一般只用來取消元素中已經應用的浮動。

切記：不須要給正文的div設計寬度，即便設計成固定寬度也不用

用浮動進行佈局

LayoutGala網站（ http://blog.html.it/layoutgala/）上提供了40種不一樣的CSS設計，但大多隻是基本框架，裏面只有<div>標籤及其定位用的CSS代碼

佈局生成器，Cridinator（ http://gridinator.com）提供了簡單的工具，用以建立複雜的多列網格系統

在浮動元素中浮動元素，會在列中增長列。

克服浮動問題

清除浮動和保持浮動

footer{
    clear:both;
}

清除元素兩邊的浮動

clear屬性值：left，right，both

在非浮動的外圍元素如<div>標籤中浮動元素，有可能形成當浮動元素高於div裏面的其餘內容時，從外圍元素的底部凸出來，

解決方法：

一、在外圍<div>底部添加一個清除元素

二、浮動外圍元素

三、利用overflow:hidden，在外圍元素中使用

四、使用Micro Clear Fix

多列布局

CSS3引入了multicolumn layout（多列布局）模塊，IE9及其更早版本不支持，multicolumns屬性能夠在W3C官網上找到： www.w3.org/TR/css3-multicol/，用以建立和預覽多列的在線工具： www.aaronlumsden.com/multicol/

第14章，響應式Web設計

響應式Web設計基礎知識

響應式Web設計簡稱RWD。

Ethan Marcotte在他的著做Responsive Web Design中詳細講解了RWD的步驟，原稿： http://www.alistapart.com/articles/responsive-web-design

RWD中結合了三大理念：用於佈局的彈性網絡、用於圖片和視頻的彈性媒體、爲不一樣屏幕寬度建立不一樣樣式的CSS媒體查詢

在網頁<head>中添加如下代碼（<title>標籤上方就是它最佳位置）能夠忽略手機瀏覽器對於網頁的自動縮放：

<meta name="viewport" content="width=device-width">

CSS的@viewport也能夠實現一樣的功能，應該將這個代碼放在全部樣式表前，但目前還有不少瀏覽器不支持，須要添加供應商前綴才行

@viewport{ width:device-width; }

媒體查詢

能夠根據目標瀏覽器的寬高給網頁分配樣式

使用媒體查詢的策略

一、調整列

二、彈性寬度

三、縮進空白空間

四、調整字號

五、修改導航菜單

六、在手持設備上隱藏內容

七、使用背景圖片

建立斷點

媒體查詢可給告訴瀏覽器在特定條件下使用特定的樣式，特定條件一般被稱爲斷點

如何進行斷點設置呢？簡單作法是在網頁中打開一個網頁，而後使用瀏覽器窗口句柄，讓窗口變窄，在某個點時設計將會變得很難看，這時能夠設置一個斷點，如此循環。通常來講會設計3個斷點，一個針對智能手機，一個針對平板電腦，一個針對桌面型瀏覽器

桌面型優先仍是手機版優先

建立媒體查詢

<link href="css/small.css" rel="stylesheet" media="(width:480px)">

只是新增了media屬性，設定條件

IE8及更早版本不支持，經過在文檔<head>中添加一些js，也可讓舊版IE支持媒體查詢，從 http://tinyurl.com/7w49a6z下載respond.js，引入：

<!--[if lte IE 8>
    <script src="respond.min.js"></script>
<![endif]-->

這種只針對精確的查詢，最好使用範圍值，即藉助max-width（小於等於）和min-width（大於等於）

關於瀏覽器查詢信息： www.w3.org/TR/css3-mediaqueries

彈性網格

HTML源碼的順序的重要性

重置盒模型

將固定寬度轉換成彈性網格

流式圖片

雖然彈性設計中列會隨着瀏覽器窗口變小而收縮，但圖片不會，這就可能致使圖片溢出邊界

可使用以下方式使圖片變成具備彈性：

一、首先，添加樣式：

img { max-width:100; }

二、將HTML中全部img標籤的height和width屬性刪除

流式圖片不足

圖片會伸展到列的100%寬度，這就可能發生拉伸超出它的天然寬度，發生形變和失真。

第15章，定位網頁上的元素

定位屬性的功能

CSS的position屬性能夠控制Web瀏覽器如何以及在和何處顯示特定的元素

CSS提供了4種類型的定位：

絕對定位：經過以pixel、em或percentage爲單位設定元素的左右上下方的位置對它進行定位。

注：不要在一個樣式中同時設定float屬性和任何一種定位，除了靜態定位和相對定位，absolute和fixed也不能和float屬性同時應用於同一個元素

相對定位：相對於它在HTML流中的當前位置進行定位，與絕對定位不一樣，其餘元素並不會佔據相對定位元素原來在HTML中所處的位置，相對定位最大的好處不是移動元素，而是給它內部絕對定位元素設定一個新的參照點

固定定位：固定定位元素會被鎖定在屏幕某個位置上。

靜態定位：只是表示網頁內容將遵循正常從上到下的HTML流

position屬性能夠改變任何一個元素的定位，使用如下4個關鍵字：static、absolute、relative、fixed

注：靜態定位元素將不支持如下要討論的任何一種定位值

設置定位值

Web瀏覽器窗口顯示區也被稱爲檢視區（viewport），有上、下、左、右4條邊，對應CSS屬性top、bottom、left、right

position屬性後面還有更多種屬性（top、bottom、left、right）

利用絕對定位在網頁上定位元素時，它的具體位置均取決於相關元素在其它標籤中所嵌套的位置：

一、若是一個標籤的位置是絕對定位的，且它又不在其餘任何設定了absolute、relative、fixed定位的標籤裏面，那它就是相對於瀏覽器窗口進行定位

二、若是一個標籤處在另外一個設定了absolute、relative、fixed定位的標籤裏，那它就是相對於另外一個元素的邊框進行定位

注：在CSS中，術語relative不徹底等同於它的本義，能夠解讀爲「相對於我」的意思。即當對一個標籤設置relative定位時，意思是「我內部全部定位元素應該相對於個人位置進行定位」

堆疊元素

通常來說，定位元素重疊時的堆疊順序是按照它們在網頁HTML代碼中的順序來決定，但能夠經過CSS屬性z-index來控制定位元素的堆疊順序：

z-index:3; 這個值爲數字，數字越大，越接近堆疊頂部，即出如今HTML頁面的前面，還可使用負值，將一個元素定位在其父元素或者其任意一個祖先元素之下。

注：IE7及更早版本不支持，z-index最大值是2147483647

隱藏部分網頁

絕對定位元素時經常使用CSS屬性visibility（可見性），隱藏部分網頁或顯示隱藏部分visibility:hidden（隱藏），visibility:visible（可見）

visibility:hidden與display:none相似，不過visibility會在HTML網頁留下空白，display不會

opacity屬性也能夠隱藏元素：opacity:0，徹底不可見，opacity:1，徹底可見

強大的定位策略

綜合使用position的定位

第四部分----CSS高級技術

第16章，設計打印頁面的CSS技術

Media樣式表的做用

CSS支持10種不一樣的媒體類型：all、braille、embossed、handheld、print、projection、screen、speech、tty、tv

應特別注意的3種媒體類型：

all：適用於每一種設備，當把樣式嵌入或經過外部樣式表進行連接時，用的就是這種方式

screen：只適用於顯示器

print：只適用於打印網頁

給外部樣式表指定媒體類型

<link rel="stylesheet" media="print" href="print.css">

技術上來講：@import url(print.css) print;也是能夠的，只是IE不支持

在樣式表中指定媒體類型

在樣式表中使用如下語句：

@media print{
     /*put your styles for printer in here*/
}

重寫文本樣式

使用pixel或em單位對於瀏覽器而言可能很好，但對打印機並不起做用。瀏覽器會根據本身的解釋將其轉換成打印的單位：點（pt），不一樣瀏覽器解釋不同，因此最好可以設置成針對打印機的樣式使用pt做爲單位

定義打印背景

一、取消背景元素

使用background:white;可直接將背景設置成白色，並取消圖片

二、保留背景元素

三、給打印添加分頁符

使用page-break-before和page-break-after屬性

page-break-before:always讓Web瀏覽器在一個指定樣式以前插入分頁符，是某個元素顯示在打印頁的頂部

page-break-after:always是某一個元素顯示在打印頁面最後

第17章，改正CSS設計習慣

一、添加註釋

二、組織樣式和樣式表

三、樣式命名要清晰

四、根據用途而不是外觀命名樣式

五、不根據位置命名

六、不使用含義模糊的名稱

七、使用多個類能夠節省時間

八、將樣式分組：把網頁上相關部位所採用的樣式集中在一塊兒，把用途相關的樣式集中在一塊兒

九、用註釋分隔樣式組

十、使用多個樣式表：可使用@import合併多個樣式表，再引入’

十一、消除瀏覽器的樣式衝突：即各個瀏覽器的默認樣式不一致，要對樣式重置

十二、使用派生選擇器：儘可能減小ID選擇器的使用，以及減小類的使用

高級：面向對象的CSS，可登陸網站： http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/，還能夠在如下網站查看OOCSS項目： https://github.com/stubbornella/oocss，另外一種方法稱做Scalable and Modular Architecture for CSS（簡稱SMACSS），這是一種建立可重用CSS組件的簡單樣式嚮導。可經過如下網站了解： http://smacss.com

1三、給IE嘗試不一樣的CSS

IE條件註釋基本結構：

<!--[if IE]>
    /*針對IE的樣式*/
<![endif]-->

非IE瀏覽器會當成HTML註釋並忽略

關於IE條件註釋更多信息，請登陸瞭解： http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

相關標籤/搜索

每日一句

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