CSS-Basic & Styling
大綱
 Basic
 顯示優先順序
 Selector Id & Class
 Styling
 Backgrounds
 Text
 Fonts
 Links
 Lists
 Tables
Basic - 顯示優先順序
 Browser default
 External style sheet
 <link rel="stylesheet" type="text/css" href="mystyle.css">
 Int...
Basic - Selector Id & Class
 使用#定義Id
 將id 定義為red的html element 顏色改為紅色
 #red{ color: red; }
 使用.定義Class
 將class定義為cente...
Styling - Backgrounds
 Background-color : color
 color :
 HEX #ff0000 rgb(255,255,255) red
 Background-image: url(„img...
Styling - Text
 Color : blue;
 HEX #00ff00 rgb(255,255,255)
 Text-align: center;
 Right
 Text-decoration: none;
 ove...
Styling - Font
 Font-family: "Times New Roman",Times,serif;
 Font-style: normal;
 Italic oblique (斜體)
 Font-size: 16 p...
Styling - Links
 Links states:
 a:link – a normal, unvisited link
 a:visited – a link the user has visited
 a:hover – ...
Styling - Lists
 使用於定義無序ul、有序列表ol
 List-sytle-type: circle;
 Square upper-roman lower-alpha
 list-style-image: url(„im...
Styling - Tables
 border: 1px solid black;表格邊框
 border-collapse:collapse;摺疊邊框為單一邊框
 width:100%;
 height:50px;
 text-a...
Upcoming SlideShare
Loading in …5
×

20131004 - Css - Basic & Styling by 懿鋆

249 views

Published on

20131004 - Css Basic & Styling

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

20131004 - Css - Basic & Styling by 懿鋆

  1. 1. CSS-Basic & Styling
  2. 2. 大綱  Basic  顯示優先順序  Selector Id & Class  Styling  Backgrounds  Text  Fonts  Links  Lists  Tables
  3. 3. Basic - 顯示優先順序  Browser default  External style sheet  <link rel="stylesheet" type="text/css" href="mystyle.css">  Internal style sheet (in the head section)  <style>  div {  Width: 100px;  }  </style>  Inline style (inside an HTML element)  <div style=“width: 100px;” ></div>  若定義相同的樣式則判斷顯示優先權,愈下面愈優先顯示  不同樣式則有層疊的效果,類似圖層的感覺
  4. 4. Basic - Selector Id & Class  使用#定義Id  將id 定義為red的html element 顏色改為紅色  #red{ color: red; }  使用.定義Class  將class定義為center的html element 文字置中  .center {text-align: center; }  使用html element 名稱 定義 selector  將div的顏色改為綠色  div {color: green; }
  5. 5. Styling - Backgrounds  Background-color : color  color :  HEX #ff0000 rgb(255,255,255) red  Background-image: url(„img.gif‟)  Background-repeat: repeat  repeat-x repeat-y no-repeat  Background-position: right top  x% y% xpos ypos
  6. 6. Styling - Text  Color : blue;  HEX #00ff00 rgb(255,255,255)  Text-align: center;  Right  Text-decoration: none;  overline line-through underline  Text-transform: capitalize;  Uppercase lowercase  Text-indent: 50px;  1cm 10%
  7. 7. Styling - Font  Font-family: "Times New Roman",Times,serif;  Font-style: normal;  Italic oblique (斜體)  Font-size: 16 px;  1 em (pixels/16 = em)  使用 %與 Em 解決不同瀏覽器 resize 問題  Body {font-size: 100%;}  H1{font-size: 2em;}  p {font-size: 0.8em;}
  8. 8. Styling - Links  Links states:  a:link – a normal, unvisited link  a:visited – a link the user has visited  a:hover – a link when the user mouse over it  a:active - a link the moment it is clicked  Rules:  Hover 必須在 link & visited 之後定義  Active 必須在 hover 之後定義  常搭配Text-decoration、background-color 樣式使用
  9. 9. Styling - Lists  使用於定義無序ul、有序列表ol  List-sytle-type: circle;  Square upper-roman lower-alpha  list-style-image: url(„img.gif');  解決跨瀏覽器的問題  設定ul  設定 list-style-type: none; 移除list標記  設定padding & margin 為 0px,跨瀏覽器相容性  設定ul中的li  設定background-image,並設定background-repeat : no-repeat;  設定background-position與padding-left
  10. 10. Styling - Tables  border: 1px solid black;表格邊框  border-collapse:collapse;摺疊邊框為單一邊框  width:100%;  height:50px;  text-align:right;  vertical-align:bottom;  padding:15px;  background-color:green;  color:white;

×