歡迎來(lái)到 常識(shí)詞典網(wǎng) ， 一個(gè)專(zhuān)業(yè)的常識(shí)知識(shí)學(xué)習(xí)網(wǎng)站！
[ Ctrl + D 鍵 ]收藏本站
前幾天 Code School 的 CSS Cross Country 課程釋出了。這一集是我相當(dāng)期待的一集，整理和澄清了非常多「非?；A(chǔ)但如果觀念不好」就會(huì)搞得一塌糊塗的 CSS 知識(shí)。
看完把筆記整理在這裡，不過(guò)相較於原網(wǎng)站，我寫(xiě)的算是非常簡(jiǎn)陋的版本。
我相當(dāng)強(qiáng)烈推薦大家購(gòu)買(mǎi)回去和練習(xí)，相信會(huì)對(duì)自己的 CSS 掌握能力有高度的提升。
Ch1Style 生效的位置inline style在
<head> </head> 裡面external link: 如 link rel="stylesheet" href="style.css"SelectosElement selectorClass selectorID selectorCompound selector : h1#headerAdvanced Selectorref: 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優(yōu)先權(quán)照
external<link><head>inline style!important相同的 selector 重複的屬性，後寫(xiě)的會(huì)覆蓋前面的。沒(méi)有重複的則會(huì)合併。Float定義把元素從傳統(tǒng)的 document flow 中移除，然後浮動(dòng)掛在指定的邊界上。其他在 parent 元素的內(nèi)容會(huì)繞著這個(gè) float 的元素排列。種類(lèi)float: leftfloat: rightfloat: noneStacking order浮動(dòng)的元素從 parent 的左/右邊界開(kāi)始排，不夠放的話會(huì)找另下一個(gè)可以停泊的邊界繼續(xù)排如果浮動(dòng)的元素高度不同，例如左邊的特別長(zhǎng)，旁邊的元素的比他短，則下一個(gè)停泊的不會(huì)是左邊界，而是會(huì)停在左邊元素的右邊。（下一個(gè)可以停泊的邊界原則）floating left & right同時(shí)使用 float:left 與 float:right，寬度夠的話，會(huì)分列兩邊。如果寬度不夠，以先 claim 的會(huì)是第一排(靠右），後 claim 的會(huì)被扔到下一排（靠左）去。
1234
<div> <div class="content1"> </div> <div class="content2"> </div></div>123456
.content1 { float:right;}.content2 { float:left;}clear: both )但這一招移動(dòng) div 順序就會(huì)爆炸背景和邊界不會(huì)被展延失??！
manual clearing （手動(dòng)在下面塞一個(gè)空的 div，對(duì)它下clear: both)需要塞一個(gè)空的 element看起來(lái)很礙眼正解技巧 ( self-cleared )1234567891011
.group:before, .group:after { content: ""; display: table;}.group:after { clear: both;}.group { zoom: 1; /* IE6&7 */}1234
<div class="group"> <div class="float-left"> </div> <p> blah </p></div>0,0,0,0
第一個(gè)數(shù)字：inline style第二個(gè)數(shù)字：of ID selectors第三個(gè)數(shù)字：of class selectors第四個(gè)數(shù)字：of element seletors12345
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由內(nèi)往外是
content areapadding areaborder areamargin area寬度計(jì)算
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 positioningRenders in the normal flow, then shifted via positioning properties
Absolute positioningTakes an element out of the normal flow for manual positioning
定位技巧parent element 下 relative，內(nèi)部需要定位的元素下 absolute，就不會(huì)超過(guò)邊界。
Fixed positioningAffixes an element to a specific place in the window, where it will stay regardless of scrolling。（在螢?zāi)簧嫌肋h(yuǎn)保持不動(dòng)，釘住）
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;}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 */Block elements: Tags that are block-level by default: <div>, <p>, <ul>, <ol>, <li> and <h1> through <h6>.
Tags that are inline by default include <span>, <a>, <em>, <img>
多個(gè) margin 疊在一起，會(huì)有 margin 重疊問(wèn)題（ margin 會(huì)合併計(jì)算，取最大的。假設(shè)第一個(gè) div margin-bottom: 40px，第二個(gè) div margin-top: 20px。則他們的距離會(huì)是 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 & normalizeEric Meyer’s Reset CSS Normalize.css
Ch6Content Image 與 Layout imageContent should be marked up as inline imagesLayout elements should be defined as background imagesImage Cropping123
<li class="crop"> <img src="snowboard.jpg" alt="Snowboard" /></li>123456789
crop { height: 300px; width: 400px; overflow: hidden;}.crop img { height: 300px; width: auto;}其實(shí)沒(méi)有多少好的方法，建議取代方案：
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 （網(wǎng)路不夠快時(shí)，hover 感覺(jué)畫(huà)面會(huì)閃一下）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 classAllow you to conditionally select an element based on state or position
last-childnth-child (an+b)延伸閱讀：
Meet the Pseudo Class SelectorsCSS Reference # 支援瀏覽器列表psuedo element1234
<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';}1234
<blockquote>Coffee? Hah! Our cocoa is far better.<span></span></blockquote>原本是對(duì) blockquote span 下 styling。
改成對(duì) blockquote:before 下 styling。
html 可以砍成
123
<blockquote>Coffee? Hah! Our cocoa is far better.</blockquote>延伸閱讀：A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
下一篇:CMSTOP適用對(duì)象 下一篇 【方向鍵 ( → )下一篇】
上一篇:兼容移動(dòng)設(shè)備的WEB設(shè)計(jì)要設(shè)計(jì)幾個(gè)分辨率版本 上一篇 【方向鍵 ( ← )上一篇】
快搜