cascading style sheets. html 專有名詞組成要素 : 段落標籤 : 段落屬性 : 段落...

Cascading Style Sheets

HTML 專有名詞組成要素 : <p class=“c1”> 段落 </p> 標籤 : <p class=“c1”> 段落 </p> 屬性 : <p class=“c1”> 段落 </p> 屬性名稱 : <p class=“c1”> 段落 </p> 屬性值 : <p class=“c1”> 段落 </p> 組成要素內容 : <p class=“c1”> 段落 </p> 組成要素名稱 : <p class=“c1”> 段落 </p>

CSS Separate Style From Structure of a Web Page

Specify point size and font of text; Set margins within a web page; Create a distinctive style for individual

web pages or sets of web pages; Format style to one element of a web

page or to a numerous pages; Control color of different elements of a

web page; Etc.

CSS 的 Box( 框盒 )

margin ( 邊界 )

內容

border ( 框線 )padding ( 內距 )

所有要素內容均放入 Box 中

顯示文字與畫像等組成要素區域

通常為透明狀態

Font Appearance of an Element

HTML code<H3 align="center"> <font

face="times new roman, times, serif" color="#800000">special

Collections</a></font></h3>

CSS ruleH3 {Font-family: times new roman,

'serif';Color: #800000;Text-align: center;}

Huan-Jyh Shyur

Understanding Style Rules

The style characteristics for an HTML element are expressed by Style Rules Style Rules .

A set of style rules is called a Style Style SheetSheet.

Style rules are contained in the <STYLE> element in the document’s <HEAD> section.

<Head><Style type=“text/css”>P {color:blue; font-size: 24pt;}</Style></Head>


A Style RuleStyle Rule is composed of two parts: a selector ( 選擇器 ) and a declaration.

TH {color: red;}. The SelectorSelector indicates the element to

which the rule is applied. The DeclarationDeclaration determines the

property values of a selector.

Selector Declaration

“*” Selector

若使用 ” *” 作為 selector ，則樣式將套用至所有要素

Example:* { font_size:36pt }


The PropertyProperty specifies a characteristic, such as color, font-family, position, and is followed by a colon (:).

The ValueValue expresses specification of a property, such as red for color, arial for font family, 12 pt for font-size, and is followed by a semicolon (;).

P {color: red;}

Property Value

Using the <STYLE> Element The <STYLE> element is always

positioned in the <HEAD> section of the document.

The <STYLE> element always contains <TYPE> attribute. The value “text/css” defines the style language as Cascading Style Sheets.

<Head><Style type=“text/css”>P {color:blue; font-size: 24pt;}</Style></Head>

Using External Style Sheet Style Rules can be expressed in an

external Style Sheet - a text document that doesn’t contain any HTML code. There is no <STYLE> element in an external style sheet.

External Style Sheet has a .css extension.h1, h2, h3

{font-family: verdana, arial, 'sans serif'; color: #9933FF; text-align: center;}

Linking to an External Style Sheet

To link a Web page to an external style sheet a <LINK> element should be added within <HEAD> element of a document with the URL to a style sheet. It tells the browser to find a specified style sheet.<Head><Title>Demo_1</Title><Style type=“text/css”><Link href=“style_1.css” Rel=“stylsheet”></Style></Head>

Linking to an External Style Sheet

<Head><Title>Demo_1</Title><Style type=“text/css”>

<Link href=“style1.css” Rel=“stylsheet”></Style></Head>

HREF attribute states the relative URL to the

style sheet

The REL attribute describes the relationship between the current

document and the document identified by the href attribute

.class{} 與 #ID {}

Example:CSS

.sample { color: #ffffff; background: #006600; } #special { color: #ffffff; background: #006600; }HTML <p class=“sample”> 段落 </p> <p id=“special”> 段落 </p>

Using the Class Attribute Selector

CLASS is an HTML attribute that assigns a class name to any HTML element on a Web page.

Can be used to identify which style sheet rules should be applied for the particular element of a Web page

A.nav:link {color:#FF3300; text-decoration: none;}

Class Selector

Element

Using the Class Attribute Selector

A class name is created by declaring a style rule and adding (.) flag character indicating that the selector is a class selector.

Add it to HTML code of a Web page by using the CLASS attribute.

A.nav:link {color:#FF3300; text-decoration: none;}

<a href="http://www.eric.org" class="nav">ERIC</a>

設定連結樣式

a:link 尚未點選的連結 a:visited 已經點選過的連結 a:hover 滑鼠游標移到連結上方時 a:active 按下滑鼠鍵時

Examplea.menu:link { color:#330000; background:#ffffff; text-decoration:none; font-size: 11pt; font-weight: bolder; }

a.menu:visited { color:#330000; background:#ffffff; text-decoration:none; font-size: 11pt; font-weight: bolder;}

a.menu:hover {/* 當滑鼠移到超連結上時，顯示底線，且顏色變紅色 */ color:#00CCFF; background:#ffffff; text-decoration:underline; font-size: 11pt; font-weight: bolder;

}

適用於特定範圍的要素範圍對象 { } 範圍範圍對象 { }

ExampleCSS:li p { color: #ffffff; background: #990000; }HTML:<p> 段落 </p><ul> <li><p> 段落 </p></li><ul>

針對第一個字母設定樣式

適用對象 : first-letter { }

Exampleh1:first-letter {

font-size:1.2em; color: #339900; }

CSS 的注解

/* 註解 */

樣式優先順序

使用者指定之樣式 : 使用 !important 標記 p{color:#FFFFFF !important}

構成該網頁之原始樣式使用者指定之樣式 : 未使用 !important

標記瀏覽器的預設樣式

cascading style sheets. html 專有名詞 組成要素 : 段落 標籤 : 段落 屬性 : 段落...

Documents

cascading style sheets. html 專有名詞組成要素 : 段落標籤 : 段落屬性 : 段落...