[讀書筆記] CSS 基礎技巧懶人包

标签： css 技巧 | 发表时间：2012-01-29 14:24 | 作者：
出处：http://blog.xdite.net/

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

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

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

Ch1

Style 生效的位置

  • inline style
  • 在 <head> </head> 裡面
  • external link: 如 link rel="stylesheet" href="style.css"

Selectos

  • Element selector
  • Class selector
  • ID selector
  • Compound selector : h1#header

Advanced Selector

ref: Taming Advanced CSS Selectors

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

cascade order

優先權照

  • external <link>
  • <head>
  • inline style
  • !important
  • 相同的 selector 重複的屬性，後寫的會覆蓋前面的。沒有重複的則會合併。

Float

定義

  • 把元素從傳統的 document flow 中移除，然後浮動掛在指定的邊界上。
  • 其他在 parent 元素的內容會繞著這個 float 的元素排列。

種類

  • float: left
  • float: right
  • float: none

Stacking order

  • 浮動的元素從 parent 的左/右邊界開始排，不夠放的話會找另下一個可以停泊的邊界繼續排
  • 如果浮動的元素高度不同，例如左邊的特別長，旁邊的元素的比他短，則下一個停泊的不會是左邊界，而是會停在左邊元素的右邊。（下一個可以停泊的邊界原則）

floating left & right

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

1
2
3
4

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

1
2
3
4
5
6

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

Ch2

clearfix

為什麼要使用 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 )

1
2
3
4
5
6
7
8
9
10
11

      
.group:before, .group:after {
   content: "";
   display: table;
}
.group:after {
   clear: both;
}
.group {
   zoom: 1; /* IE6&7 */
}
.group 要下在 parent node
1
2
3
4

      <div class="group">
   <div class="float-left"> </div>
   <p> blah </p>
</div>

Inheritance & Specificity

  • 巢狀元素會自動繼承 parent 的 style
  • 可以 override parent 的 style
  • id 比 class 的優先權高

優先權算法

0,0,0,0

  • 第一個數字：inline style
  • 第二個數字：of ID selectors
  • 第三個數字：of class selectors
  • 第四個數字：of element seletors
1
2
3
4
5

      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,0
p { color: #fff !important; }

越大的可以把祖先蓋掉。

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

Ch3

box model

由內往外是

  • content area
  • padding area
  • border area
  • margin area

寬度計算

box width = content width + padding width + border width

overflow

  • visible: the default value, which allows content to extend beyond container boundaries
  • auto: adds a scrollbar as needed when content overflows
  • hidden: hides content that extends beyond the container
  • scroll: adds a scrollbar at all times, even if unneeded

positioning

有四種

  • static
  • relative
  • absolute
  • fixed

定義

  • Elements have a position value of static by default
  • Using a value other than static causes an object to become a positioned element
  • Positioned elements may use the top, left, bottom, and right properties for placement

Relative 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-index

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

延伸閱讀： Understanding CSS z-index

Ch4

整理 CSS code

用 ,

1
2
3

      p .content h3{
   color: red;
}

padding/margin 上右下左

1
2
3

      .content {
   margin: 15px 10px 0 20px; /* top right bottom left */ }
}

其他綜合

1
2
3
4
5

         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 types

block

  • Stretch 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>.

inline

  • Typically 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-block

  • Same flow as an inline element but behave as a block element (可以玩 box model)

水平置中技巧

Centering a block-level element

  • Define a width, and the element width must be less than that of the parent container
  • margin: 0 auto;

Centering inline and inline-block elements

  • text-align: center

Ch5

margin 重疊問題

多個 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 border
  • Relative or absolute positioning
  • A float left or right

延伸閱讀： Collapsing margins

rest & normalize

Eric Meyer’s Reset CSS Normalize.css

Ch6

Content Image 與 Layout image

  • Content should be marked up as inline images
  • Layout elements should be defined as background images

Image Cropping

1
2
3

      <li class="crop">
  <img src="snowboard.jpg" alt="Snowboard" />
</li>

1
2
3
4
5
6
7
8
9

      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 images
  • Resize them server-side
  • Provide image-uploading instructions in your CMS

延伸閱讀： Experiments with wide images

Ch7

圖片取代文字技巧

使用 text-indent: -9999px;

1
2
3
4
5
6
7

      .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 request
  • Image is not preloaded （網路不夠快時，hover 感覺畫面會閃一下）

Advantages to the sprite approach:

  • Reduces number of HTTP image requests
  • Removes loading flash / need for preload

使用方法

Multiple images & states:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

延伸閱讀: Spritecow

Ch8

psuedo class

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

  • last-child
  • nth-child (an+b)

延伸閱讀：

psuedo element

1
2
3
4

      <article>
   <p>Coffee? Hah! Our cocoa is far better.</p>
   <p>Visit from 4-5 for cocoa happy hour!</p>
</article>

1
2
3

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

利用 before, after 技巧

取代掉無用 element

1
2
3
4

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

原本是對 blockquote span 下 styling。

改成對 blockquote:before 下 styling。

html 可以砍成

1
2
3

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

利用 before, after 實作縮排

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

相关 [css 技巧] 推荐：

10个非常不错的CSS技巧

- - CSDN博客Web前端推荐文章
在这里，巧妙的运用CSS的技巧，可以让你不用修改HTML就能得到很好的博客或者模板外观. 我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷. 设计模版和博客主题时，我经常“不断推敲和尝试CSS（Hit and Trial CSS ），我只看哪种配色方案和哪种CSS属性的结合能使页面的元素更完美.

CSS技巧荟萃：了解CSS页面布局和加载流程

- - 前端观察
如果你开发web相关应用或者网站的话，肯定知道CSS对于页面布局的重要性. 在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局. 在我们开始正式的介绍页面流程前，我们需要简单了解几种不同类型的html元素，以及它们的缺省显示方式. 这里我们主要重点介绍两个类型的元素：. 如果大家关心html5的话，你应该知道在HTML5中也包含了几个新的元素，例如，section，article等等，但是仍旧遵循这里我们介绍的显示类型.

响应式设计的5个CSS实用技巧

- - Web App Trend
正如我在教程 响应式Web设计三步走当中所讲的，响应式的Web设计其实并不难，但是要让元素在布局切换时能够平滑过渡就比较考验技巧了. 现在我分享在编码时常用的五个CSS技巧并举例说明. 这些技巧都是使用简单的CSS属性，如min-width、max-width、overflow 和相对属性值，但是这些属性在响应式设计中发挥着很大的作用.

[讀書筆記] CSS 基礎技巧懶人包

- - Blog.XDite.net
前幾天 Code School 的 CSS Cross Country 課程釋出了. 這一集是我相當期待的一集，整理和澄清了非常多「非常基礎但如果觀念不好」就會搞得一塌糊塗的 CSS 知識. 看完把筆記整理在這裡，不過相較於原網站，我寫的算是非常簡陋的版本. 我相當強烈推薦大家購買回去和練習，相信會對自己的 CSS 掌握能力有高度的提升.

【转载】最新的Javascript和CSS应用技巧荟萃

- - HTML5研究小组
随着前端技术的发展， javascript和 css在网站和web应用中展现出强大的统治力，特别是随着HTML5和CSS3的标准的成熟，我们可以使用javascript和css开发出你想都没有想到过的特效和动画，在今天的这篇文章中，我们将介绍一组相关CSS和javascript的强大教程和插件，希望大家喜欢.

网页设计师必备的10个CSS技巧

- - 博客 - 伯乐在线
CSS是网页设计师的基础，对CSS的了解能使他们能够设计出更加美观别致的网页. 使用CSS技巧来巧妙地处理CSS是非常令设计师着迷的事情. 在CSS的深海世界里有很多有意思的东西，你只需要找到最适合你的就好. 当然我们不可能一下子就记住所有CSS的规则和语法，但为了以后的发展我们还是应该记住那些非常有用的CSS技巧.

打印样式CSS的技巧和要点

- - Web前端 - ITeye博客
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果. 我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果：. 使用响应式布局设置打印的效果. 打印背景图片和颜色，在合适的时候. 添加显示的网址或页面链接，以供参考. 使用css filter 提高打印的图形效果. 针对打印的样式，而不是屏幕显示样式.

前端工程師必看: 十大 CSS 技巧

- - 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY
底下內容來自於原網站，在加上筆者的一些補充. 用 firebug 或 console 來除錯. 在 Firefox 還沒有推出 Developer Tools 時，大家一定是用 Firebug 來除錯，2006 年 Firebug 第一版 release 出來，讓 web 開發者可以更快速的瞭解網站除錯，也可以透過 Firebug 來瞭解網站的 performance.

你需要知道的三个CSS技巧

- - 外刊IT评论
各种浏览器之间的竞争的白热化意味着越来越多的人现在开始使用那些支持最新、最先进的W3C Web标准的设备，以一种更具交互性的方式来访问互联网. 这意味着我们终于能够利用更强大更灵活的 CSS来创造更简洁，更好维护的浏览器前端代码. 现在让我们来看一看一些也许你还不知道的让人兴奋的CSS 功能. 在CSS中用attr()显示HTML属性值.

用于响应式设计的9个CSS技巧

- - CSDN博客Web前端推荐文章
现在越来越多的网站文本链接已取消下划线，而这已成为一种 WEB设计趋势，尤其是在做响应式网站时. 下面提供一段简单的CSS代码，可以轻松取消文本链接下划线：. tjkdesign.com给大家，里面提供了许多CSS技巧，帮助你在页面中嵌入响应式视频（ . 3.Rollover文本链接. 越来越多的人喜欢在手机上浏览网页，这使得Rollover链接变得越来越流行.