(摘要)陳鍾誠老師的JavaScript課程(3)- CSS 網頁排版格式

CSS的功用

CSS(Cascading Style Sheets, 串接樣式表),用來輔助html,美化網頁顯示畫面,包括「字體、大小、顏色、邊框、背景」等。

Html文件可以用三種方式使用CSS

使用彈性由小到大依序為(1)直接內嵌式 (2)變數內嵌式  (3)外連式。

(1)直接內嵌式(Inline):

Using a style attribute in HTML elements.

在特定標籤的開始標籤中加上類似style="background-color:black; color:white;"的語法。

(2)變數內嵌式(Internal):

Using a <style> element in the HTML <head> section.

在<head>…</head>中用類似下面的語法,使指定的相關標籤都採用該語法。

<style>
th { background-color:black; color:white; } <!--使th標籤都套用此語法-->
</style>

(3)外連式(External)

Using one or more external CSS files.

在<head>…</head>中用類似下面的語法,使指定的相關標籤都採用該語法。

<link rel="stylesheet" type="text/css" href="mystyle.css">

另外產生一個檔案mystyle.css,包含內容如下:
th { background-color:black; color:white; }

此外,可以在特定標籤的開始標籤中指定id或class,如:
<div id="topbar">頂區塊</div>
<div class="classA">A 區塊</div>

再使用以下方式css套用到特定的id或class:
.classA table { ... }               // 套用到 class="classA" 內部的 table 標記
#topbar { ....}                     // 套用到 id="topbar" 的元素上
table .classA a { .... }    // 套用到 table 內具有 class="classA" 類別裏的超連結 a 標記上。
.classA, #topbar { ... }            // 套用到 class="classA" 或 id="topbar" 的元素上
#topbar a, .classA a { ....}        // 套用到 id="topbar" 或 class=".classA" 裏的 a 元素上

常用的css範例

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  line-height:160%;
}

h1, h2, h3, h4, h5, h6 {
  color:#333333;
  margin: 0;
  font-family: '標楷體', 'Times New Roman';
  font-weight: bold;
}

p {
  margin: 10px 0 15px 0;
  font-size:100%;
}

li {
  font-size:100%;
}

footer p {
  color: #f2f2f2;
}

a {
  text-decoration: none;
  color: #007edf;
  text-shadow: none;

  transition: color 0.5s ease;
  transition: text-shadow 0.5s ease;
  -webkit-transition: color 0.5s ease;
  -webkit-transition: text-shadow 0.5s ease;
  -moz-transition: color 0.5s ease;
  -moz-transition: text-shadow 0.5s ease;
  -o-transition: color 0.5s ease;
  -o-transition: text-shadow 0.5s ease;
  -ms-transition: color 0.5s ease;
  -ms-transition: text-shadow 0.5s ease;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #373737;
  margin-bottom: 20px;
  text-align: left;
  margin-left:auto; 
  margin-right:auto;
}

th {
    padding: 10px;
    background-color:black;
    color:white;
}

td {
  padding: 10px;
  border: 1px solid #373737;
}

em { font-weight:bold; }

#topbar {
  margin: 0;
  padding: 1px;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  background-color:black;
  color:white;
  color:white;
  width:95%;
  text-align:right;
  font-weight:bold;
}

#content {
  margin:10px;
  padding:10px;
}

pre {
  border: 1px solid #373737;
  background-color:#dddddd;
  color:#333333;
  font-size:medium;
  width:95%;
  padding:10px;
}

img {
  border: 1px solid #373737;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.figure .caption {
  text-align:center;
}

#footer {
  text-align:center;
  font-size:small;
  color:#666666;
  margin: 10px;
  padding: 10px;
}

參考資料:

  1. 陳鍾誠 – CSS 網頁排版格式
  2. w3schoos.com – HTML Style – CSS
 
 
Advertisements

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s