Home
ProgramLanguage
DataBase
Err Window Line MEGA SEO IDE Media Google UnixTimestamp Virus
Office
OperatingSystem
MultimediaDesign
Adobe
Photoshop
Illustrator
Corel
DRAW
Painter
PaintShop
會聲會影
Pinta
GIMP
Krita Desktop
Inkscape
Arduino
CSS (Cascading Style Sheets)

由來 :
HTML標籤原本被設計為定義文檔內容.
透過使用 <H1>(這是標題) <P>(這是段落) <Table>(這是表格) 讓瀏覽器去呈現文檔
由於主要的兩種瀏覽器 Netscape 和 Internet Explorer 不斷將新的 HTML 標籤與屬性添加到 HTML 規範中
使得文檔內容變得越來越複雜, 為了解決這個問題, W3C 於 HTML 4.0 之外創造出樣式(style)

語法 :
主要由兩個部分構成 : 1.選擇器 2.一或多條聲明
1. 選擇器 : 通常是 HTML 的元素 ( 例如 : H1 {} , P {} ..)
分組 : 用逗號分隔, 可讓多個元素套用相同聲明 ( 例如 : H1, H2ㄝH3{color:red;} )
* 子元素會繼承父元素的屬性, 但不一定瀏覽器都支援繼承, 如 Netscape 4 , 這時就可用分組的方式.
* 若想脫離繼承, 則針對要脫離的屬性做聲明即可.

2. 聲明 : 由一個屬性與一個值組成 ( 例如 : {color:red;} , {font-size:4px;} , {font-family:"sans serif";} )
* color 與 font-size 為屬性 , red 與 4px 為值
* red也可改用十六進位的 #FF0000 , #F00 或 RGB 的 rgb(255,0,0) , rgb(100%,0%,0%)
* 若值為多個單字時, 要加雙引號 "sans serif"

注意項目 :
1. 若為多重聲明, 則需用分號將每個聲明分開, 隨然最後一句可不加, 但還是建議都加減少出錯的可能性
2. 為了增加可讀性, 每個聲明可換行. 空格不影響瀏覽器的解讀, 但更顯分明.
3. 除了 HTML 的 class 與 id 外, 對於 CSS 大小寫是沒差別的.



宣告編碼方式
@charset "UTF-8";
註解
/**/
body{}
未連結過
a:link {}
已連結過
a:visited {}
滑鼠按下
a:active {}
滑鼠經過
a:hover {}


table {}

tr {}

td {}

.XXX {}


多數 CSS3 屬性,建議加上瀏覽器識別,如
•Firefox : 以 -moz- 開頭
•Google Chrome / Safari : 以 -webkit- 開頭
•Opera : 以 -o- 開頭
•IE 9/10 : 以 -ms- 開頭


.接Class名稱
#接ID名稱

引用多重Class
ex:

引用.a跟.b的設定
嵌入套用
匯入套用 @import url("style.css") 【媒體類別】; 值 適用於
all 所有媒體類別
aural 言語合成器
braille 布拉耶點字法 (盲人用) 媒體
handheld 掌上型媒體
print 列印
projection 投射媒體
screen 電腦螢幕
tty 固定字寬 (fixed-pitch) 的媒體
tv 電視類的媒體
四種套用方式
行內套用 (Inline)

This is font size 16.


嵌入套用 (Embed)
外部連接套用 (External Link) 匯入套用 (Import) text-decoration: none; mso-style-parent:""; margin:0; padding:0; position fixed /*背景顏色*/
background:#fff url(images/demo.gif);
/*行距*/
line-height:22px;
/*間距*/
letter-spacing:3px;
/*顏色*/
color: #6a3906;


/*字體大小*/
font-size:15px;
8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22

inherit medium small smaller x-small xx-small large larger x-large xx-large

/*字體*/ font-family:"Calibri","sans-serif"; font-family:Georgia, Palatino, serif; font-family:Times, "Times New Roman", serif;

/*字粗細體*/ font-weight:bolder;
normal:預設字體,通常不需要特別寫出來。
bold:粗體。
bolder:比粗體更粗一點的字體。
lighter:比預設字體更細的文字。
數字:直接給 400~900 的數字。400=normal;700=bold。 HTML則是用 b 或 strong 來達到粗體文字的效果。

/*邊框*/ border:3px green solid;
邊框粗細;顏色;樣式
/*邊框*/ border:3px green solid;
單邊框粗細;顏色;樣式
border-left 代表左邊框 border-top 代表上邊框 border-bottom 代表下邊框 border-right 代表右邊框
/*邊框寬度*/ border-width:3px;border-style:solid;
邊框寬度3px

/*圓角*/ border-radius:8px;border-style:solid;
邊框圓角8px效果

/*邊暈*/ box-shadow: 2px 2px 5px #ccc;
邊框暈效果

/*邊框顏色*/ border-color:#6a3906;border-width:3px;border-style:solid;
四邊同顏色
/*邊框顏色 上下,左右*/ border-color:pink blue;border-width:3px;border-style:solid;
兩邊不同顏色
/*邊框顏色 上,右,下,左*/ border-color:pink blue green black;border-width:3px;border-style:solid;
四邊不同顏色

/*邊框樣式*/ border-style:solid;
四邊同框線
/*邊框樣式 上下,左右*/ border-style:dashed double;
兩邊不同框線
/*邊框樣式 上,右,下,左*/ border-style:dashed double solid outset;
四邊不同框線
有實線(solid)、點線(dotted)、虛線(dashed)、雙實線(double)、無實線(none) opacity:0.9;/* IE6 不支援*/ FILTER: Alpha(opacity=80);

超出框線的內容會被隱藏超出框線的內容會被隱藏
overflow:hidden;超出框線內容隱藏
text-overflow:ellipsis;在內容超出時,在後方補上逗號
white-space:nowrap;內容強制顯示一行


圖繞文:
123
321

float:left;
margin:5px;
(left圖置左right圖置右none不變inherit繼承)


圖片陰影效果:



圖片立體陰影效果:





position
static (預設值): 這代表元素會被放在預設的地方。如果 position 的值是被設定為 statics 的話,那 top、bottom、left、和 right 的值就都沒有意義了。
•absolute: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時,元素也會跟著改變位置。
•relative: 這代表元素被放的地方將會與預設的地方有所不同。不同的程度是依照 top、bottom、left、和 right 的值而定。
•fixed: 這代表元素會被放在瀏覽器內的某個位置 (依 top、bottom、left、和 right 的值而定)。當使用者將網頁往下拉時,元素的位置不會改變。
top, right, bottom, left

每一個方向 (top, right, bottom, left) 的位置值可以是長度、百分比、或是 auto。



overflow 屬性是用來設定當內容放不下時的處理方式。可能的值包括:

visible: 內容完全呈現,不管放得下放不下。
•hidden: 放不下的內容就不顯示出來。
•scroll: 無論內容放得下放不下,都加入上下捲軸及左右捲軸的功能。
•auto: 當內容放不下時,加上捲軸的功能。




z-index



z-index 屬性是用來決定元素重疊的順序。換言之,當兩個元素有重疊的情況時,z-index 值將會決定哪一個元素在上面。z-index 值比較大個元素會被放在上面。

自適應網頁設計 又稱 響應式網頁設計 (Responsive Web Design)

自適應網頁設計真的有比較好嗎?瀏覽時的解析度越來越多變化,要怎樣才能不論什麼解析度都能完美的呈現呢?
隨者時代的進步智慧型手機、平板、電腦。。。,不同的裝置螢幕尺寸都不同,內容要怎麼呈現才會比較好呢?


強制換頁
在標籤後換頁 { page-break-after: always }
在標籤前換頁 { page-break-before: always }
<p style="page-break-after:always">&nbsp;</p>



CSS設定文字選取時的顏色
list-style: none; overflow: hidden; /* 超過範圍隱藏 */ white-space: nowrap; /* 不斷行 */ display: inline; /* 水平排列 */ display: inline-block; /* 水平內顯示為區塊 */
| 關於我們 | 聯絡我們 | 更新記錄 |
版權所有 轉載必究 服務專線: