學習筆記

層疊樣式表 Cascading Style Sheet

不要使用Table進行頁面佈局，它僅僅用於顯示錶格式的信息

內部樣式表

 <style type=」text/css」>

  ….

 </style>

外部樣式表引用

<link rel=」stylesheet」 type=」text/css」 href=」css/global.css」 >

<link rel=」stylesheet」 type=」text/css」 href=」css/forms.css」 >

 

<style type=」text/css」>

@import url(css/global.css);

@import url(css/forms.css);

</style>

決定用ID選擇器和選擇器應當遵循的規則：

1. 要在一張網頁上屢次使用某一種樣式時，必須使用類選擇器
2. 用ID選擇器來識別每張網頁上只出現一次的部分，好比側邊欄或頁腳
3. 考慮用ID選擇器避免樣式衝突，ID選擇器優先級大於類選擇器

 

羣選擇器 h1,p,#banner{color:#F1CD33;}

通用選擇器 * 選擇每個標籤

派生選擇器 h1 string {color:red}

僞類選擇器

A:link 未點擊過的

A:visited 點擊過的

A:hover  點擊中的

A:active 

:first-child

:focus  input:focus{background-color:  #FFFCCC;}

//IE6和IE7不支持 可經過js來實現。

高級選擇器

子選擇器 body>h1 選擇body下全部的h1標籤

兄弟選擇器 h2+p

屬性選擇器

Img[title]{…}

A[href=www.baidu.com]{color=」red」;font-weight:bold;}

Input[type=」text」]{..}

A[href^=」http://」]  ^= 表示以….開始

A[href$=」.pdf」]   $=表示以….結束

Img[src*=」headshot」] *=表示含有…的

 

權重值排名 內建樣式 1000分＞ID選擇器 100分＞類選擇器 10分＞標籤選擇器 1分

若是權重值相同，則區最後一個樣式。

僞元素 如:first-line一般被看成標籤選擇器對待

僞類  如:link 被看成類對待。

聲明瞭！important 屬性的將不會被覆蓋

#nav a{color:red;}

A{color: teal !important};

//IE6處理時會有問題

要使文本變斜體，在樣式中寫入如下代碼

Font-style:italic;

確保文本爲非斜體，像這樣

Font-style:normal;

文本大、小寫、首字母大寫

Text-transform:uppercase;

Text-transform:lowercase;

Text-transform:capitalize;

Text-transform:none;

文本修飾text-decoration：

下劃線underline、上劃線overline、中劃線line-through、閃爍blink、 none

字間距

letter-spacing:10px; letter-spacing:-10px;

line-height:120%; 默認120%；

對齊文本

Text-align:center;

首行縮進

Text-indent:15px;

無序列表ul  有序列表ol

List-style-type:disc、circle、square

List-style-type:decimal、decimal-leading zero、upper-alpha、lower-alpha、upper-roman、lower-roman、lower-greek、none；

list-style-position:inside、outside、

邊距衝突時，瀏覽器只會應用它們中較大的那一個，不但願這樣能夠才用top padding

bottom padding解決

display:inline 行類元素

display:block 塊級元素

display:none  隱藏

 overflow屬性

 overflow:visible

 overflow:scroll:添加滾動條，一使用就出現滾動條

 overflow:auto :要使滾動條變成可選就用auto選項，須要時才添加滾動條。

 Overflow:hidden:隱藏超出部分

解決IE6浮動BUG

Margin-left:-3px;

Zoom:1;

背景圖片

Background-image:url(「…」);

Background-repeat:no-repeat、repeat、repeat-x、reeat-y

Background-position:top、center、bottom

Background-position:5px 8px;

Background-position:20px 20px;

 

底部問題

Html{

      Height:100%;

}

//IE7以及更早的版本不會出現這個問題

//打印網頁的話背景圖片不會被打印出來，須要的話需使用<img>標籤

滾動頁面而背景圖片未repeat 但願看到背景圖片可使用

Background-attachment:fixed;、scroll

快捷屬性

Background:background-color、background-image、background-attachment、background-position

Body{

        Background:#FFF url(bullseye.gif) scroll center center no-repeat;

}

瀏覽器通常都會給<img>標籤添加邊框線，除非<img>的邊框爲0

防止給,<img>添加邊框線能夠這樣

Img{border:none};

表格：

控制表格單元之間的空間

<table cellspacing=」10」>//在每一個表格間插入10px空間，若是設置成0講徹底消除間隙

消除雙邊框：

Table{border-collapse:collapse};

IE6bug

雙邊距 解決辦法 設置屬性display:inline、zoom:1;

3px間隙

浮動列與非浮動列之間額外插入3px空間

非浮動列沒有設定寬度或高度

Zoom：1；

非浮動列設有寬度或高度

*html #mainColumn{margin-left:0;}

*html #sidebar{margin-right:-3px;}

或者所有浮動

#mainColumn{float:left;}

IE6以前的版本不支持固定定位；

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

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

IE6不支持固定定位 解決辦法

html #banner{position: absolute;}

打印

給外部樣式添加指定媒體類型

<link rel=」stylesheet」 type=」text/css」 media=」print」 href=」print.css」/>

<link rel=」stylesheet」 type=」text/css」 media=」screen,projection,handheld」 href=」screen.css」/>

顯示超連接地址

A:after{

   Content:」(「attr(href)」)」;

}

/*IE6雙邊距bug*/

* html ….{display:inline;}

CSS3新特性

CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），
  對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
  增長了更多的CSS選擇器  多背景 rgba