spotlight_title
幫助一開始研究 css 的網友們
css 的簡介以及基本屬性說明


★何謂 css 與標籤?

 css 為「Cascading Style Sheets」的縮寫
 中文稱為 : 串聯樣式表
 應用在網頁中可控制版面的色彩、文字、背景、排版... 等
 可使原始檔更為精簡,可縮短讀取時間唷!!

 常常聽會寫 css 的人說「標籤」,到底是什麼意思呢?
 標籤,顧名思義,就是為某個區塊貼上屬於他的標籤.
 以此標籤寫入 css 樣式後,就可以幫此區塊編輯樣式囉!!

 有些標籤是相同的,有些標籤是唯一的,怎麼分辨呢?
 開啟網頁原始檔後,常常會出現 :
 <div id="links"> 或 <div class="box">
 這就代表此 div 區塊已經被貼上屬於它的標籤了
 「id」和「class」又有什麼分別呢?
 id 代表此網頁中只有唯一一個此標籤,不能有重複
 class 代表此網頁中可有數個同樣為此標籤的區塊,可以重複

 只要運用這些標籤,編輯 css 之後,頁面就可以美輪美奐了唷!!


★基本樣式指定說明

 font-size: 10px; /*文字大小,可以 px 或 pt 為單位*/
 font-family: arial; /*文字字型,一般常用為 arial 或 verdana*/
 color: #色碼; /*內容顏色,即文字的顏色,可參閱網路色碼表*/
 width: 123px; /*寬度,以 px 為單位*/
 height: 456px; /*高度,以 px 為單位*/
 background: #色碼 url(圖片網址) no-repeat fixed left top; /*背景指定*/
  註:色碼即背景色,url(圖片網址) 請貼入圖片網址
    no-repeat 表不重複顯示
    可改成 repeat (重複顯示)、repeat-x (重複 x 軸)、repeat-y (y 軸)
    fixed 表鎖定背景不隨捲軸捲動,刪除則反之
    left top 表示圖片開始位置,表左上
    可改right top (右上)、left bottom (左下)、right bottom (右下)
      left center (左中)、right center (右中)、center top (中上)
      center bottom (中下)、center center (置中)
    或是以百分比指定位置 100% 100% 表最右下,0% 0% 最左上
    前者為 x 軸指定,後者為 y 軸指定
    ↑ 也可用 px 微調或精確指定背景位置
 line-height: 18px; /*行高,可以 px、pt、百分比為單位*/
 border: 1px solid #色碼; /*框線指定*/
  註:依序為「框線粗細」、「框線樣式」、「框線顏色」
    solid 表直線,dotted 表點線 (2px以上較為明顯)
    dashed 表虛線,double 表雙框線 (3px以上較為明顯)
    此為整圈框線指定,可分開指定上下左右之框線~
    border-top: ; /*上框線*/
    border-bottom: ; /*下框線*/
    border-left: ; /*左框線*/
    border-right: ; /*右框線*/
 padding: 10px 20px 10px 20px; /*區塊空白距離*/
 margin: 5px 0px 5px 0px; /*區塊邊界距離*/
  註:空白與邊界怎麼分別?
    簡單說來就是此區塊框線外與內的空白距離唷!!
    欲指定框線外的距離,即 margin
    欲指定框線內的巨哩,即 padding
    依序是 : 上、右、下、左,若為 margin: 5px; 即上下左右皆 5px
    也可以分開指定上下左右~
    padding-top、margin-left:;... (與框線設定方式相同,以此類推)
 text-align: left; /*文字靠左對齊*/
 text-align: right; /*文字靠右對齊*/
 text-align: center; /*文字置中對齊*/
 letter-spacing: 1px; /*文字間距*/
  註:使用文字間距時,斷行會出現要 enter 兩次才可順利斷行的問題
    此時可以在樣式表加入 br { letter-spacing: 0px; } 解決

--
以上,待續
可參考各大教學網站
, ,

Leah 發表在 痞客邦 PIXNET 留言(24) 人氣()


留言列表 (24)

發表留言
  • HeartStealer
  • 辛苦你了
    給你按按摩
  • moeco
  • 謝謝李亞寫了這個教學
    期待絕對位置的教學篇~^^
    辛苦了!
  • jertsai
  • 李亞開班授課了呢^0^
    哈哈..我要報名...
  • kelly9992210
  • 辛苦你了~這些真的都好實用!
  • keisha
  • 讚啦~
    實在太實用了說。。。
    辛苦了!
  • kusomao
  • 你還是寫了
    哈哈
    --
  • damiao508
  • :D

    等待好久的教學>"<
    耶~~
    辛苦你辣~~!!
    :)
  • babys520
  • = = 恩 來這學習的真多呢 哈哈
  • 柔柔
  • 咻咻----

    辛苦溜~~~
    謝謝你的教學!!
    ^_______^
  • iso
  • 哦哦!
    原來是這樣子XD
    之前再OEC看很久都看不懂 OTL
  • hahalive
  • 李亞姐加油!!

    -
    這是初級篇...?!
    看的頭昏眼花...不過大概懂了...!
    希望趕快把絕對位置弄會...!:)
  • disillusion
  • 感謝李亞的教學,看完後有了解一些
    不過還是搞不清楚絕對位置啊,期待教學囉,辛苦了。
  • lesleah
  • ★丰
    報名個什麼勁呀~
    你都偷偷跑到留言板問~ 呀哈哈!!
    ★哭嗽毛
    我還是寫了 orz
    因為避免被問一些基礎 css 的問題
    所以就寫一下~ 這樣就直接請他看此文即可~
    喔呀~ XD
  • ring052
  • 我領悟到其中的奧秘了(炸飛)
    (CCS白痴OEC又看不懂XD)

    辛苦你了(拍肩)
  • redkate
  • 謝謝leah 的教學
    也因此我把血紅變了顏色>.<"

    我改了你的樣式 (所以現在來通知一聲,如果不行的話請告訴我,我會撤掉...)

    想問 隱藏的標籤的用法
    之前無名有的那一篇已經看不到了
    文章回應的comments Rss看了實在很不喜歡
    我想隱藏掉(Rss)這標籤 卻不知道要把displaynone放在哪

    如果leah有空回答的話 謝謝.
  • 韋
  • 謝謝李亞姐教導:)
  • 瑜
  • :)

    好實用,, 轉走分享給更多人 ^__________^ 謝謝`!
  • 小羽
  • 謝謝教學~
    懂了好多 ^^
  • ljja
  • 想學CSS好久了
    謝謝你的教學
    好實用的呢
    感謝感謝
  • nastasia
  • 李亞~你的那篇延伸閱讀連得還是舊帳號的網址唷!
    記得改一下唷!(笑)
  • sskc40819
  • wow:"))慢慢了解!
  • yzx050129
  • 丁丁看過沒- -

    阿阿阿阿 我或許有點笨- -

    結果我拿留言板開刀 還是不會- -

    位置似乎通通不對(?)

    歐歐歐 歐賣尬 ( 被巴 )

    拜託那個好心人士講解講解- -

    通通看不懂,不過大大講解的好用心

    我有看到心哦( 被揍- - )
  • iriscarousel
  • 3Q

    超棒的
    雖然有些地方我還要慢慢吸收 (熊太笨)
    不過真的好棒喔~
    ^口^
  • smallsoo
  • Leah

    嘿嘿,我來了我來了,很久沒跟你聊天了:D
    知道我是誰嗎(一定不知道,我改ID了@@)
    我是小蘇啦:}