教材:http://www.codeschool.com/courses/css-cross-country
- inline style
- 在
<head> </head>
裡面 - external link: 如
link rel="stylesheet" href="style.css"
- Element selector
- Class selector
- ID selector
- Compound selector :
h1#header
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, 2
優先權照
- external
<link>
<head>
- inline style
- !important
- 相同的 selector 重複的屬性,後寫的會覆蓋前面的。沒有重複的則會合併。
- 把元素從傳統的 document flow 中移除,然後浮動掛在指定的邊界上。
- 其他在 parent 元素的內容會繞著這個 float 的元素排列。
- float: left
- float: right
- float: none
- 浮動的元素從 parent 的左/右邊界開始排,不夠放的話會找另下一個可以停泊的邊界繼續排
- 如果浮動的元素高度不同,例如左邊的特別長,旁邊的元素的比他短,則下一個停泊的不會是左邊界,而是會停在左邊元素的右邊。(下一個可以停泊的邊界原則)
同時使用 float:left 與 float:right,寬度夠的話,會分列兩邊。如果寬度不夠,以先 claim 的會是第一排(靠右),後 claim 的會被扔到下一排(靠左)去。
<div>
<div class="content1"> </div>
<div class="content2"> </div>
</div>
.content1 {
float:right;
}
.content2 {
float:left;
}
- 狀況一:float 元素可能比旁邊的非 float 元素高。(因為 float 沒有高度)所以下一段會黏上來。
- 狀況二:所有的 children 都是 float。(因為 float 沒有高度)所以 container 看起來會太短。
- 但這一招移動 div 順序就會爆炸
- 背景和邊界不會被展延
失敗!
- 需要塞一個空的 element
- 看起來很礙眼
.group:before, .group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* IE6&7 */
}
<div class="group">
<div class="float-left"> </div>
<p> blah </p>
</div>
- 巢狀元素會自動繼承 parent 的 style
- 可以 override parent 的 style
- id 比 class 的優先權高
0,0,0,0
- 第一個數字:inline style
- 第二個數字:of ID selectors
- 第三個數字:of class selectors
- 第四個數字:of element seletors
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
由內往外是
- content area
- padding area
- border area
- margin area
寬度計算
box width = content width + padding width + border width
- 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
有四種
- 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
Renders in the normal flow, then shifted via positioning properties
Takes an element out of the normal flow for manual positioning
parent element 下 relative,內部需要定位的元素下 absolute,就不會超過邊界。
Affixes an element to a specific place in the window, where it will stay regardless of scrolling。(在螢幕上永遠保持不動,釘住)
- 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
p .content h3{
color: red;
}
.content {
margin: 15px 10px 0 20px; /* top right bottom left */ }
}
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 */
- 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>
.
- Typically found within block-level elemeiner 有多寬就延伸到多寬)
- Behave as though there is a line brethe content inside (只有內容的寬度)
- Do not generate a line break before and after the content (沒有斷行效果)
Tags that are inline by default include <span>
, <a>
, <em>
, <img>
- Same flow as an inline element but behave as a block element (可以玩 box model)
- Define a width, and the element width must be less than that of the parent container
- margin: 0 auto;
- text-align: center
多個 margin 疊在一起,會有 margin 重疊問題( margin 會合併計算,取最大的。假設第一個 div margin-bottom: 40px,第二個 div margin-top: 20px。則他們的距離æmeiner 有多寬就延伸到多寬)
-
Behave as though there is a line brethe content inside (只有one or more block element has:
-
Padding or border
-
Relative or abs容的寬度)
-
Do not generate a line break before and after the content (沒有斷行效果)
Tag2/ontent (沒有斷行效果)
Tags that are inline by default ines### inline-block
- Same flow as an inline element but behave as a block element (可以玩 box model)
##/)
- Content should be markewidth, and the element width must be less than that of the parent container
- margin: 0 auto;
- margin: 0 auto;
``` css
crop {
height: 300px;
width: 400px;
overflow: hidden;
}
.crop img {
height: 300px;
margin 會合併計算,取最大的。假設第一個 div margin-botïx。則他們的距離æmeiner 有多寬就延伸到多寬)
* Behave as though there is a line brethe conteimage-uploading instructions in your CMS
延伸閱讀:[Experiments with wide images](http://clagnut.com/sandbox/imagetest)
<hr>
### 圖片取代文字技巧
使用 text-indentand after the content (沒有斷行效果)
Tag2/ontent (沒有ædefault ines### inline-block
* Same flow as an inline element but behave as a block element (可以玩 box ç markewidth, and the element width must be less than that of the parent container
* margin: 0 auto;
### Centerimlner
* margin: 0 auto;
### Centering inline and inline-block elem)
Advantages to the sprite approach:
* Reduces number of HTTP image requests
* Removes loading flash / need for preload
#### 使用方法
Multiple images & states:
.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](http://w£文字技巧
使用 text-indentand after the content (沒有斷行æet ines### inline-block
* Same flow as an inline element but behave as a block element (可以玩 box ç mardolock element (可以玩 box ç markewidth, and the element width must bRe
* margin: 0 auto;
### Centerimlner
* margin: 0 auto;
### Centering inline and inline-block elem)
Advanta
<ine and inline-block elem)
Advantages to the sprite approach:
* Redommoves loading flash / need for preload
#### 使用方法
Multiple images & states:
.twitter, .githu` es & states:
.twitter, .github {
background: url(social.pngml
<blockquote>
Coffee? Hah! Our cocoa is far better.
<span></span>
</blockquote>
原本是對 blockquote span
下 styling。
改成對 blockquote:before
下 styling。
html 可以砍成
<blockquote>
Coffee? Hah! Our cocoa is far better.
</blockquote>