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關係圖

CSS框框    

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調整:無論拉軸怎麼移動,都會在同個位置

 

 

arrow
arrow
    全站熱搜

    o迷苓o 發表在 痞客邦 留言(0) 人氣()