忍者ブログ

Someone's 自我成就坊

ただのヒキコモリです。 *月宮あゆたん愛するサイト*
RECENT ENTRY RECENT COMMENT
台灣 高美溼地 2012 夏至
(12/29)
121229 雜談
(12/29)
2012 要結束了
(12/27)
acer 4752g
(08/24)
BLOG 改版
(06/03)
KOTOKO ASIA TOUR 2012 IN TAIWAN
(05/14)
キッキングホース★ラプソディ
(04/22)
無題
[08/15 RalfX]
無題
[02/27 狼桑]
無題
[02/26 和製ホーリックス]
無題
[03/05 月]
無題
[12/26 motorolaz]
無題
[08/04 Microleft]
無題
[06/03 覺]

2024/04/18
21:46		 [PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2006/08/26
05:05		 CSS 網頁樣式表

老人看了感觸很深(滅) CSS確實是很便利的東西,我當初做網頁的時候可是對大量物件感到反感

為了寫網頁而去學HTML ->CSS ->PHP +SQL(死在半途) 現在該說BLOG的時代真棒嗎(煙)



CSS 網頁樣式表

中央研究院計算中心

張錦堂

2003年10月23日

2002年10月

2000年9月

Web 世界的未來

  • 在各式各樣的設備上使用 Web 資料 (例如電腦螢幕，印表機，手持設備螢幕等等)
  • 同一個內容的資料能在不同設備上呈現

網頁設計守則一 (Rule #1)

  • Separate Content and Presentation
  • No <FONT FACE="Arial" SIZE="4" COLOR="#FFFFFF"> tag
  • Use CSS (Cascading Style Sheets)

參考網站

範例

  1. 範例一: 顯示範例的結果
  2. link without underline
  3. box using <DIV>
  4. fixed background (Example)
  5. control line height
  6. control margin
  7. CSS in Action

格式說明

規則 (rule)

selector { property: value; }

選擇條件 { 屬性: 屬性值; }

h1 {color: blue;}

h1 i {
    font-family: 細明體, gill, helvetica, sans-serif;
    font-size: 16pt;
    font-weight: bold;
}

h3, b {
    font-weight: bold;
    color: red;
}

<h1>This is a <i>CSS</i> class</h1>

<h3>Lots of student</h3>
<p>Learning <b>CSS</b></p>

Internal / External / Inline

Internal

<html>
<head>
<title>title</title>
<style type="text/css">
h1 { color: blue }
</style>
</head>
<body>.....</body>
</html>

External

<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="cool.css" title="Cool">
</head>
<body>....</body>
</html>

Inline

<html>
<head>
<title>title</title>
</head>
<body>
<p style="color: green">The paragraph is green.</p>
</body>
</html>

Cascading Order

  1. Browser default
  2. External Style Sheet
  3. Internal Style Sheet (inside the tag)
  4. Inline Style (inside HTML element)

Class 及 ID

<h1 class="exmaple-title">This is a CSS class</h1>

<h3 id="place">電腦教室</h3>

.example-title {
    font-size: 18pt;
}

#place {
    font-style: italic;
}

Font properties

font-family

BODY { font-family: gill, helvetica, sans-serif }

<family-name>

<generic-family>

  • 'serif' (e.g. Times)
  • 'sans-serif' (e.g. Helvetica)
  • 'cursive' (e.g. Zapf-Chancery)
  • 'fantasy' (e.g. Western)
  • 'monospace' (e.g. Courier)

font-style

Value:

normal | italic | oblique

font-weight

Value:

STRONG { font-weight: bolder }

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font-size

Value:

<absolute-size>

<relative-size> 

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
[ larger | smaller ] [ xx-small | x-small | small | medium | large | x-large | xx-large ] <absolute-size> | <relative-size> | <length> | <percentage>

font

Value:

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }

[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
from An Introduction to Type

  • X-height
    The height of the body, minus ascenders and descenders, which is equal to the height of the lowercase ‘x’.
Serif (襯線字體)
Tapered corners on the ends of the main stroke. Serifs originated with the chiseled guides made by ancient stonecutters as they lettered monuments. Some serif designs may also be traced back to characteristics of hand calligraphy. Note that serif type is typically thick and thin in stroke weight.
The etymology of "serif" is obscure, but in any case almost as recent as the face. The oldest citations in the Oxford English Dictionary are 1841 for sans serif, which the OED gives as sanserif, and 1830 for serif. Indeed, the OED speculates that serif was a back formation from sanserif. On the other hand, Webster's Third New International Dictionary traces serif to the Dutch schreef meaning "stroke", and ultimately through German schreiben and Latin scribere, both also meaning "to write".
The OED's earliest citation for grotesque in this sense is 1875, giving "stone-letter" as a synonym. It would seem to mean "out of the ordinary" in this usage, as in art grotesque usually means "elaborately decorated". Other synonyms include Doric and Gothic.

Sans serif font

Serif font

(Serifs highlighted)


Sans serif (無襯線字體)
From the French, meaning “without serif”. A typeface which has no serifs.Sans serif typefaces are typically uniform in stroke width.

Color and background

color

EM { color: red }

background-color

H1 { background-color: #F00 }

background-image

BODY { background-image: url(marble.gif) } P { background-image: none }

background-repeat

Value:

BODY {
    background: red url(pendant.gif);
    background-repeat: repeat-y;
}

repeat | repeat-x | repeat-y | no-repeat

background-attachment

BODY {
    background: url(pendant.gif);
    background-attachment: fixed;
}

background-position

Value:

BODY {
    background-image: url(logo.png);
    background-attachment: fixed;
    background-position: bottom right;
}

[<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]

background

Value:

BODY { background: url(banner.jpeg) top center }

<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>

Box - Formatting Model

 _______________________________________
|                                       |
|           margin (transparent)        |
|   _________________________________   |
|  |                                 |  |
|  |        border                   |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     padding               |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  content            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

          |    element width    |
|               box width               |

margin-top
margin-right
margin-bottom
margin-left

H1 { margin-left: 2em }

margin

BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

padding-top
padding-right
padding-bottom
padding-left

BLOCKQUOTE { padding-top: 0.3em }

padding

H1 { background: white; padding: 1em 2em; }

border-width

H1 { border-width: thin }

border-color

border-style

Value:

#xyz { border-style: solid}

none | dotted | dashed | solid | double | groove | ridge | inset | outset

border

P { border: solid red }

<DIV> 及 <SPAN> 標籤

<DIV> block 形式的標籤

<DIV CLASS="example">
Table of content
1. 簡介
2. 功能
</DIV>

<SPAN> 文字內容中的標籤

<p>This is a <SPAN CLASS="xyz">short</SPAN> paragraph.</p>

單位 (Unit)

Length units

P  { font-size: 12px }    /* pixels, relative to canvas */
H1 { margin: 0.5in }      /* inches, 1in = 2.54cm */
H2 { line-height: 3cm }   /* centimeters */
H3 { word-spacing: 4mm }  /* millimeters */
H4 { font-size: 12pt }    /* points, 1pt = 1/72 in */
H4 { font-size: 1pc }     /* picas, 1pc = 12pt */

Percentage units

P { line-height: 120% }   /* 120% of the element's 'font-size' */
H1 { margin: 0.5em }      /* ems, the height of the element's font */
H1 { margin: 1ex }        /* x-height, ~ the height of the letter 'x' */

Color units

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }
EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

URL

BODY { background: url(http://www.bg.com/pinkish.gif) }

Pseudo-classes

Anchor pseudo-classes

A:link, A:visited, A:active { text-decoration: underline }

A:link { text-decoration: none }

A:link { color: red }       /* unvisited link */
A:visited { color: blue }   /* visited links */
A:active { color: lime }    /* active links */

常用屬性

line-height

Value:

DIV { line-height: 120%; font-size: 10pt } /* percentage */

normal | <number> | <length> | <percentage>

text-align

Value:

DIV.center { text-align: center }

left | right | center | justify

text-indent

P { text-indent: 3em }

display

Value:

IMG { display: none }

block | inline | list-item | none
PR
COMMENT FORM
COMMENT
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
URL
FONT COLOR
PASS

TRACK BACK

トラックバックURLはこちら
<<< PREV  → HOME ←   NEXT >>>