HTML/CSS
Classes and Layout
Class
在網頁製作的過程中，我們常會使用CSS進行網頁介面的美化，但若每一種tag只能有一種樣式，實在太不人性了，因此我們可以使用Class來指定設定某些tag，藉由class套用格式，讓網頁製作更為方便、快速如果要套用CSS格式，我們可以這樣
---------------------------------------------------
ul{color:#000000} --修改所有ul的文字顏色改為#000000
ul li{color:#000000} --修改所有ul中的li，將文字顏色改為#000000
或是指定特定項目
---------------------------------------------------
ul li:first-child{color:#000000} --修改ul中的第一個li的文字顏色
但是只有這樣還是不夠，藉由class能改變特定某幾個tag，讓製作更為方便
---------------------------------------------------
<ul class="nav"> --將ul套用class:nav
<p class="nav"> --將p套用class:nav
.nav{color:#000000} --在style裡設定classs:nav的屬性，套用到所有class:nav的tag，在class名稱最前面要加一個點
只有有指定class的tag會被改變，其他tag並不會被改變(在這裡只有這個ul、p會改變，其他的ul、p不會改變)
當然也可以指定class下的某個tag
---------------------------------------------------
.nav a{color:#000000} --這樣子會套用到所有class:nav裡的a，比如
<ul class="nav">
<li><a href="......">abc</a></li> --會改變a的顏色
<li><a href="......">123</a></li> --會改變a的顏色
</ul>
如果同時有兩種CSS會依照順序，後面蓋掉前面，比如
---------------------------------------------------
<ul class="nav">......</ul>
.nav{padding-left:0;}
ul{padding-left:10px}
以上情況該ul的padding-left為10，因為後面的會將前面的覆蓋，所以通常會將class許在後面
---------------------------------------------------
ul{padding-left:10px}
.nav{padding-left:0;}
Move CSS to a single file
有時候多的網頁會使用部分相同的CSS，但如果要複製到每一個網頁十分麻煩，且不易進行維護，所以我們可以將CSS單獨變成一個檔案.css
---------------------------------------------------
abc.html
<head>
<style type="text/css">
h1{
color:#000000;
padding-left:10px;
}
.
.
.
</style>
我們可以將CSS單獨存入一個檔案main.css
---------------------------------------------------
main.css
h1{
color:#000000;
padding-left:10px;
}
.
.
.
將原本abc.html內的css刪除，加入<link>，rel是relationship的縮寫
---------------------------------------------------
abc.html
<head>
<link type="text/css" rel="stylesheet" href="main.css">
</head>
只要將css檔與html檔放在一起，且加上link，便可以將css套用到多個html，至於css的寫法與之前完全一樣，不須做更動，只要更改css檔案，便可以變更多個html
Div division tag
在排版的時候除了上述的方式，還有div tag，這個tag能將版面分為多個部分
---------------------------------------------------
<div class="nav"> --div也可以指定class
<ul class="nav">
<li><a href="......">abc</a></li> --會改變a的顏色
<li><a href="......">123</a></li> --會改變a的顏色
</ul>
<li><a href="......">abc</a></li> --會改變a的顏色
<li><a href="......">123</a></li> --會改變a的顏色
</ul>
</div>
置中
如果設定div的寬度小於網頁寬度，可以將margin的左右都設定為auto，這樣div就會置中了
.nav{margin:3px auto 3px auto;}
.nav{text-align:center;} --text-align可以將文字置中
沒有留言:
張貼留言