Html不能定義美觀樣式,於是需要CSS幫忙
以下為CSS寫法
p {
text-decoration:underline; <<文字格式為底線
}
CSS基本格式
標籤（Html）.Id(#).Class(.) {
屬性:值;
}
Element:標籤開頭，符合標籤都會套用
Class:以點開頭，可以套用於不同標籤
ID:以#開頭，單獨套用一個標籤
也可以選擇子標籤格式
父標籤 子標籤 {
屬性:值;
}
更能同時選取不同標籤
標籤1,標籤2... {
屬性:值;
}
在Class部份他還可以擁有不同的物件
標籤 class id .class {
屬性:值;
}
以下為在w3schools玩的範例
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
.b1.center {
text-align: center;
color: blue;
}
#b2.center {
text-align: center;
color: green;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<div class="b1 center">This paragraph will be blue and center-aligned.</div>
<div id="b2" class="center">This paragraph will be green and center-aligned.</div>
</body>
</html>
CSS Selectors參考網址:http://www.w3schools.com/cssref/css_selectors.asp
我們也可以對標籤的動作進行CSS撰寫，以下為範例
a:hover {
color:red;
}
CSS動作格式
標籤：動作 {
屬性:值;
}
動作有以下這四個
標籤:link <<未點擊連結
標籤:visited <<點擊連結
標籤:hover <<滑鼠滑到連結
標籤:active <<選到連結按住
a:hover參考網址:http://www.w3schools.com/cssref/sel_hover.asp
父標籤 子標籤:first-child { <<只作用在第一個子標籤
屬性:值;
}
這些CSS放置在
<head>
<style type="text/css">
CSS...
</style>
</head>
CSS顏色可用編碼，為十六進位
color:red;同於color:#FF0000;
#FF（紅色）FF（綠色）FF（藍色）
Html顏色以十六進位00~FF表示,轉十進位範圍有0~255
ui li {
display:inline; <<內容不換行
}
inline : 行列
block : 區域
inline參考網址:http://www.w3schools.com/cssref/pr_class_display.asp
以下為Padding範例
h2 {
padding:6px 3px 0 0;
}
Padding留白,可單獨設定一方如padding-top
可設定top,right,left,bottom
padding:top right bottom left;
以下為border範例
h2 {
border:6px solid black;
}
border邊框,可單獨設定一方如border-top
可設定top,right,left,bottom
border:width style color;
以下為margin範例
h2 {
margin:6px 0 6px 0;
}
margin邊界,可單獨設定一方如margin-top
可設定top,right,left,bottom
margin:top right bottom left;
padding,border,margin關係圖
padding是包圍在內容四周,而border包圍在padding和內容,margin是包圍在border和padding和內容
因為各家瀏覽器都有預設留白或邊界,所以可以寫
body {
padding:0;
margin:0;
border:0;
}
以下是Class範例
.nav {
padding-left:0;
}
<ul class="nav">....</ul>
也可以設定class底下的標籤
.nav a {
color:#FFFFFF;
}
<ul class="nav">
<li><a href="....">....</a></li>
...
</ul>
關於style,id,class,element優先權
Style.Id.Class.Html標籤優先權
0 (Style) , 0 (Id) , 0 (Class) , 0 (Element)
Style>Id>Class>Html標籤
以下為優先權範例
#content p{
color:#000; >>優先權為0,1,0,1
}
#content .fea{
color:#882; >>優先權為0,1,1,0
}
<div id="content">
<p class="fea">Good!</p>
<p>123456</p>
</div>
id.class優先權參考網址:http://blog.darkthread.net/post-2011-06-08-css-specificity.aspx
可以創個css檔方便管理，這也是現今許多網站會用的方式
main.css
a {
color:red;
}
在html檔中載入css
<head>
<link type="text/css" rel="stylesheet" href="main.css">
</head>
div是可以規劃版面區塊的標籤,以下為運用範例
body {
padding:0;
margin:0;
border:0;
}
.header {
padding:10px 10px 10px 10px;
background-color:#b56663;
}
.header a {
color:#ffffff;
}
.content {
padding:20px 20px 20px 20px;
border:1px solid #dddddd;
/* margin:top right bottom left; */
margin:30px auto 0 auto;
width:500px;
text-align:center
}
<body>
<div class="header">
....
</div>
<div class="content">
....
</div>
....
</body>
圖片運用分成三類
Content Images（內容附加圖片）
Layout Images（版面背景圖片）
User Interface Images(使用者介面附加圖片)
以下為img範例
<img src="images/abc.jpg" alt="abc">
img格式為
<img src="圖片資料夾/XXX.XX" alt="XXXX">
alt（替代文字）可以定義此圖片意思,對盲胞人士來說是貼切設定
alt使用原因參考網址:https://www.ptt.cc/bbs/Web_Design/M.1211941410.A.F01.html
圖片可以當成清單的標籤,但li有"."清單標籤,於是需要把預設清單格式為無
.photos {
list-style-type:none; <<設定清單格式為無
}
以下為background相關的範例
background-color:#000000;
background-image:url(images/abc.jpg);
background-position:left top;
background-position:20px 100px;
background-position:30% 80%;
background相關的格式為
background-color:顏色碼;
background-image:url(資料夾/XXXX.XXX);
background-position:水平 垂直;
補充position
前面為x座標,能用單字如left,right,center或是數值
後面為y座標,能用單字如top,bottom,center或是數值
position來玩玩參考網址:http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position_pixel
設定背景圖片重複屬性為
background-repeat:重複值;
repeat常用設定
repeat（預設）:重複圖片填滿x和y座標
repeat-x:重複圖片填滿x座標
repeat-y:重複圖片填滿y座標
no-repeat:不重複圖片
repeat來玩玩參考網址:http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-repeat&preval=initial
以下為float範例
float:left;
float格式為
float:元素對齊位置;
float常用設定
left:元素（可能是標籤,Id,Class）將會對齊左邊
right:元素（可能是標籤,Id,Class）將會對齊右邊
Clear:清除Float方向
Clear常見設定為left / right / both
以下為Clear範例
img {
float: left;
}
.clear {
clear: both;
}
只要套用clear格式後便不再跟著前面，導致圖跟文字重疊問題
Clear來玩玩看: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_class-clear
font相關的格式為
font-family:第一順字型,第二順字型,第三順字型
font-size:字型大小; 單位可用px,pt,em,%
font-size單位參考網址:http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
文字寬度格式為
font-weight:文字粗度;
weight常用設定
normal:普通
bold:粗體
數字:根據數字顯示粗體
文字樣式格式為
font-style:文字格式;
style常用設定
normal:普通
italic:斜體
設定文字列高格式為
line-height:一列高度值;
以下為form範例
<form>
<label>ABC</label>
<input type="text">
<input type="submit" value="Click to Submit">
</form>
input格式為
<input type="輸入格式">
type常用設定
text:輸入框
checkbox:多選框
radio:單選框
file:上傳檔案
password:密碼框
submit:按鈕
文字區塊
<textarea></textarea>
如果要針對submit設定CSS樣式
input[type=submit] {
width:120px;
font-size:30;
}
設定標籤下屬性的格式為
Html標籤[標籤屬性=值],[標籤屬性=值]..{
...
}
CSS Attribute Selectors參考網址:http://www.w3schools.com/css/css_attribute_selectors.asp
Overflow:超出框顯示方式;
Overflow常用設定為
visible顯示:文字不管超出都顯示
auto自動:根據哪邊超出生拉軸
hidden隱藏:超出就隱藏內容
scroll拉軸:右邊和下面都有拉軸
Position:位置決定種類;
Position常用設定為
static靜態:不會移動位置
relative相對:根據其他物件調整位置
absolute絕對:根據視窗大小位置
fixed調整:無論拉軸怎麼移動,都會在同個位置
留言列表
線上遊戲 (4)
