编程常识

CSS基础技巧懒人包

生活词典 changshi.cidiancn.com

阅读: 355

前幾天 Code School 的 CSS Cross Country 課程釋出了。這一集是我相當期待的一集，整理和澄清了非常多「非常基礎但如果觀念不好」就會搞得一塌糊塗的 CSS 知識。

看完把筆記整理在這裡，不過相較於原網站，我寫的算是非常簡陋的版本。

我相當強烈推薦大家購買回去和練習，相信會對自己的 CSS 掌握能力有高度的提升。

Ch1Style 生效的位置inline style在 <head> </head> 裡面external link: 如 link rel="stylesheet" href="style.css"SelectosElement selectorClass selectorID selectorCompound selector : h1#headerAdvanced Selector

ref: Taming Advanced CSS Selectors

#sidebar h2— 0, 1, 0, 1h2.title — 0, 0, 1, 1h2 + p — 0, 0, 0, 2#sidebar p:first-line — 0, 1, 0, 2cascade order

優先權照

external <link><head>inline style!important相同的 selector 重複的屬性，後寫的會覆蓋前面的。沒有重複的則會合併。Float定義把元素從傳統的 document flow 中移除，然後浮動掛在指定的邊界上。其他在 parent 元素的內容會繞著這個 float 的元素排列。種類float: leftfloat: rightfloat: noneStacking order浮動的元素從 parent 的左/右邊界開始排，不夠放的話會找另下一個可以停泊的邊界繼續排如果浮動的元素高度不同，例如左邊的特別長，旁邊的元素的比他短，則下一個停泊的不會是左邊界，而是會停在左邊元素的右邊。（下一個可以停泊的邊界原則）floating left & right

同時使用 float:left 與 float:right，寬度夠的話，會分列兩邊。如果寬度不夠，以先 claim 的會是第一排(靠右），後 claim 的會被扔到下一排（靠左）去。

1234
<div> <div class="content1"> </div> <div class="content2"> </div></div>

123456
.content1 { float:right;}.content2 { float:left;}

Ch2clearfix為什麼要使用 cleafix狀況一：float 元素可能比旁邊的非 float 元素高。（因為 float 沒有高度）所以下一段會黏上來。狀況二：所有的 children 都是 float。（因為 float 沒有高度）所以 container 看起來會太短。常用 clearfix 技巧clear with a subsequent elemet ( 在下面的元素放 clear: both )但這一招移動 div 順序就會爆炸背景和邊界不會被展延

失敗！

manual clearing （手動在下面塞一個空的 div，對它下 clear: both)需要塞一個空的 element看起來很礙眼正解技巧 ( self-cleared )
1234567891011
.group:before, .group:after { content: ""; display: table;}.group:after { clear: both;}.group { zoom: 1; /* IE6&7 */}

.group 要下在 parent node
1234
<div class="group"> <div class="float-left"> </div> <p> blah </p></div>

Inheritance & Specificity巢狀元素會自動繼承 parent 的 style可以 override parent 的 styleid 比 class 的優先權高優先權算法

0,0,0,0

第一個數字：inline style第二個數字：of ID selectors第三個數字：of class selectors第四個數字：of element seletors
12345
p { color: #fff; } # 0,0,0,1.intro { color: #98c7d4; } # 0,0,1,0#header { color: #444245; } # 0,1,0,0<h1 style="color: #000;">Mogul</h1> # 1,0,0,0p { color: #fff !important; }

 

越大的可以把祖先蓋掉。

延伸閱讀：[Don’t use ID selectors in CSS]screwlewse/2010/07/dont-use-id-selectors-in-css/

Ch3box model

由內往外是

content areapadding areaborder areamargin area

寬度計算

box width = content width + padding width + border width

overflowvisible: the default value, which allows content to extend beyond container boundariesauto: adds a scrollbar as needed when content overflowshidden: hides content that extends beyond the containerscroll: adds a scrollbar at all times, even if unneededpositioning

有四種

staticrelativeabsolutefixed

定義

Elements have a position value of static by defaultUsing a value other than static causes an object to become a positioned elementPositioned elements may use the top, left, bottom, and right properties for placementRelative positioning

Renders in the normal flow, then shifted via positioning properties

Absolute positioning

Takes an element out of the normal flow for manual positioning

定位技巧

parent element 下 relative，內部需要定位的元素下 absolute，就不會超過邊界。

Fixed positioning

Affixes an element to a specific place in the window, where it will stay regardless of scrolling。（在螢幕上永遠保持不動，釘住）

z-No z- or equal z- = overlap determined by placement in DOM （後放的疊在先放的上面）Higher values appear above lower values（ z- 比較大的在比較上面）Elements must be positioned for z- to take effect. Use relative if you’re not interested in moving the object （必須先被「定位」，才能使用 z-)

延伸閱讀： Understanding CSS z-

Ch4整理 CSS code用 ,
123
p .content h3{ color: red;}

padding/margin 上右下左
123
.content { margin: 15px 10px 0 20px; /* top right bottom left */ }}

其他綜合
12345
 font: 16px/18px bold italic sans-serif; /* size/line-height weight style family */ background: #000 url(image.jpg) no-repeat center top; /* color image repeat x-pos y-pos */ list-style: disc inside none; /* style position image */ margin or padding: 0 10px 0 10px / 0 10px 0 / 0 10px; /* top right bottom left / top right&left bottom / top&bottom right&left */ border: 3px solid #ccc; /* width style color */

Display typesblockStretch the full width of their container ( container 有多寬就延伸到多寬)Behave as though there is a line break before and after the element （有斷行效果）Full box model can be manipulatedDisplay Types

Block elements: Tags that are block-level by default: <div>, <p>, <ul>, <ol>, <li> and <h1> through <h6>.

inlineTypically found within block-level elements (通常可以在 block 元素裡找到)Only take up the space of the content inside （只有內容的寬度）Do not generate a line break before and after the content （沒有斷行效果）

Tags that are inline by default include <span>, <a>, <em>, <img>

inline-blockSame flow as an inline element but behave as a block element (可以玩 box model)水平置中技巧Centering a block-level elementDefine a width, and the element width must be less than that of the parent containermargin: 0 auto;Centering inline and inline-block elementstext-align: centerCh5margin 重疊問題

多個 margin 疊在一起，會有 margin 重疊問題（ margin 會合併計算，取最大的。假設第一個 div margin-bottom: 40px，第二個 div margin-top: 20px。則他們的距離會是 40px ，而不是 60px）。

解決重疊技巧：

Collapsing margins will not occur when one or more block element has:

Padding or borderRelative or absolute positioningA float left or right

延伸閱讀： Collapsing margins

rest & normalize

Eric Meyer’s Reset CSS Normalize.css

Ch6Content Image 與 Layout imageContent should be marked up as inline imagesLayout elements should be defined as background imagesImage Cropping
123
<li class="crop"> <img src="snowboard.jpg" alt="Snowboard" /></li>

123456789
crop { height: 300px; width: 400px; overflow: hidden;}.crop img { height: 300px; width: auto;}

其實沒有多少好的方法，建議取代方案：

Resize images to a square < height and width of all of your imagesResize them server-sideProvide image-uploading instructions in your CMS

延伸閱讀：Experiments with wide images

Ch7圖片取代文字技巧

使用 text-indent: -9999px;

1234567
.logo { background: url(logo.png); display: block; height: 100px; width: 200px; text-indent: -9999px;}

 

css spirite 技巧為什麼要使用 CSS spirite

Issues with swapping background images:

Adds an extra HTTP requestImage is not preloaded （網路不夠快時，hover 感覺畫面會閃一下）

Advantages to the sprite approach:

Reduces number of HTTP image requestsRemoves loading flash / need for preload使用方法

Multiple images & states:

12345678910111213141516
 itter, .github { background: url(social.png); display: block; height: 100px; width: 100px; text-indent: -9999px;}.github { background-position: -100px 0;}itter:hover, itter:focus { background-position: 0 -100px;}.github:hover, .github:focus { background-position: -100px -100px;}

 

延伸閱讀: Spritecow

Ch8psuedo class

Allow you to conditionally select an element based on state or position

last-childnth-child (an+b)

延伸閱讀：

Meet the Pseudo Class SelectorsCSS Reference # 支援瀏覽器列表psuedo element
1234
<article> <p>Coffee? Hah! Our cocoa is far better.</p> <p>Visit from 4-5 for cocoa happy hour!</p></article>

123
article p:last-child:after { content: '\2744';}

利用 before, after 技巧取代掉無用 element
1234
<blockquote>Coffee? Hah! Our cocoa is far better.<span></span></blockquote>

原本是對 blockquote span 下 styling。

改成對 blockquote:before 下 styling。

html 可以砍成

123
<blockquote>Coffee? Hah! Our cocoa is far better.</blockquote>

利用 before, after 實作縮排

延伸閱讀：A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

编程知识 编程常识 03-17

分享常识给亲友.

下一篇:兼容移动设备的WEB设计要设计几个分辨率版本 下一篇 【方向键 ( → )下一篇】

上一篇:CMSTOP适用对象 上一篇 【方向键 ( ← )上一篇】