Anonymous
Anonymous asked in 電腦與網際網路程式設計 · 1 decade ago

網頁設計與CSS的一些問題

CSS是一種與HTML相似的語法?還是要架構於其他HTML或者XML之內的語法,是屬於輔助類型的?我現在只知道CSS是可以方便於日後更改網頁的一些字型、顏色,等樣式,我知道可以設定部分區域是哪些字型等,但可以設定表格內的圖檔或者是一些超連結嗎?因為自己做了一個80幾頁的網站,有時候一要改,沒天沒地的改,滑鼠都快被我點爆了

Update:

先感謝你的回答,看完一大串的解說,還是在說如何定義,那方面我比較沒什麼問題,因為你所說的CSS的內容,也只能修改樣式,不知道是否連超連結、圖片等,都能一並處理?

Update 2:

感謝你的回答,但是好像只能改超連結的樣式?卻不能改變超連結的網址,因為有時候突然要改網址,就得動手改80幾個,改到火都上來了

Update 3:

我是知道CSS能改許多網頁內的"樣式",猶如你所說,表格內的字體、大小、顏色,跟超連結文字的底色等等,但始終無法改變內容?

Update 4:

其實是自己傻了...忘記有頁框這東西,做到腦子壞了,感謝

2 Answers

Rating
  • 1 decade ago
    Favorite Answer

    CSS是什麼?

    Style Sheets是W3C組織於1996年公佈的Csacading Style Sheets Level 1 (CSS1) 所發展出來的,中文翻譯名稱多譯為『網際排版』。Style Sheets是一群體定義的集合,能夠讓網頁製作者自行定義文件中編排的方式,例如文字字體、字距、行距、大小等。讓段落文字在瀏覽器中能有更整齊、美觀的形式表現出來。而在IE4.0及Netscape4.0以後的版本都有支援這種排版的方式。

    而CSS和以前HTML3.0的語法有什麼不同呢?除了宣告方式有一點不同外,其它都沒有什麼不一樣,不過CSS的功能比HTML3.0強大了許多,也包含在HTML4.0的定義中。以下簡短地介紹CSS的使用方式。

    如何定義Style Sheets?

    先說明一下定義Style Sheets的方式,定義的方式大至有四種。

    1.直接定義:

    在下方的原始碼中把H1標記暫時改變成"字體:斜體"、"顏色:紅色"。例如:

    <H1 style = "font-style:itlic;color:red">紅色斜體的文字</H1>

    紅色斜體的文字

    以上這種只是用來暫時改變<H1>的屬性,當下次再用<H1>時,則會恢復成原定的屬性。例如:

    <H1>已經不是紅色斜體的文字了</H1>

    已經不是紅色斜體的文字了

    直接定義的方式多是用在要暫時改變標記時所使用,像是想要讓某一個段落中的一段文字較顯眼。

    2.使用<STYLE>標記:

    <STYLE>標記的使用方法如下,不過宣告的位置最好在<HEAD>和</HEAD>之間會比較不容易造成瀏覽器誤判。在範例中,可以清楚地看見如何定義一個格式(CLASS)來使用。

    <STYLE TYPE="TEXT/CSS">

    .ccc{font-family:標楷體;font-style:italic;color:red}

    </STYLE>

    <p class="ccc">使用ccc體裁格式的文字</p>

    使用ccc體裁格式的文字

    這種模式也可以改變一些標記的內定值。

    <STYLE TYPE="TEXT/CSS">

    H2{font-family:標楷體;font-style:italic;color:blue}

    </STYLE>

    <p class="ccc">使用自定的H2體裁格式的文字</p>

    <h2>使用自定的H2體裁格式的文字</h2>

    使用自定的H2體裁格式的文字

    由範例可以看出<H2>標記的功能已經和原來的功能不一樣了。在定義Style時,要特別注意一點,不同類型有不同的前置符號。在定義原有標記的內容時,不用加上前置符號。CLASS在定義體裁內容時,前置符號為"."。ID在定義圖層時,前置符號為"#"。

    3.使用<SPAN>標記:

    <SPAN>標記的使用方法如下,和第一個直接套用有點類似,但是<SPAN>可以用在某一句或是某一個字想要改變時所用的。在範例中,可以清楚地看見如何定義一個格式(CLASS)來使用。如:

    <P>HELLO, <SPAN STYLE=”color: red;”> THE WORLD~ ^__^</SPAN></P>

    這樣 THE WORLD就變成紅色的字子。而,HELLO 還是保留原來<P>的預設值。

    4.外掛方式:

    在看完CSS的各種定義方式後,你會不會覺得在編寫每張網頁時,都要定義那種多體裁很麻煩呢?在HTML4.0可以讓你由外部連接一個CSS的體裁定義檔來使用,不只減少訪客在讀取網頁時的份量,也減低編寫時的出錯率。而CSS的體裁定義檔也只是一般的文字檔,只是副檔名要為CSS。(p.s. 檔名.css)

    先寫一個CSS的定義檔:( 檔名為dhtml.css )

    File Name: dhtml.css

    <STYLE TYPE = "TEXT/CSS">

    .nouse {font-size:16pt}

    H4 {color:blue}

    .dhtml11{font-size:18pt}

    </STYLE>

    在HTML文件的<HEAD>標記中加入<LINK>標記,

    <LINK REL = STYLESHEET TYPE = "text/css" href = "dhtml.css">

    這樣就可以在這份HTML文件中使了dhtml.css裡CSS的相關定義囉!

    2009-11-12 15:19:03 補充:

    不過有一點要注意的,就是Netscape在引入外部CSS檔案時,會發生第一個CSS定義的體裁讀取不到。因此建議最好多加一個沒有使用的CSS定義在最前面。

    ●簡單來說CSS 是搭配著網頁使用的一種語法

    好處在於把網頁的內容和樣式分開

    CSS可以使用指向的方式,把不同的網頁指向同一個CSS的檔案

    有利於統一整個網站的樣式,讓風格更一致

    像你說的,如果一個網站有八十幾頁,你會改到昏天暗地

    用css只要改一次就OK了~

    ●更多css相關的資料跟解說你可以去邊看看: http://www.csie.nctu.edu.tw/~yctsao/t1/index.htm

    2009-11-16 14:09:17 補充:

    你好:

    CSS主要是管理網頁中「style(樣式) 」部分,也就是網頁中與「板面」(如:文字大小顏色、背景、連結、按鈕、表格…等)相關的部份都可以用CSS去做修改。

    【超連結的css樣式語法】

    一般來說,超連結常用的 CSS 語法,就是控制超連結的顏色與底線

    【圖片 CSS 樣式】

    針對整個多張圖片的大區塊設定樣式,如 border: 1px solid #666666; 1px = 邊線寬度 ; solid = 邊線樣式 ;接著的是色碼!!

    2009-11-16 14:09:20 補充:

    【圖片加上陰影語法】

    http://roy.nicetypo.com/contentbypermalink/4dcd306...

    【圖片加連結時的邊框顏色】

    http://roy.nicetypo.com/contentbypermalink/5acd82f...

    這兩個網頁有說明,你可以看看

    2009-11-16 14:11:53 補充:

    簡單來說,超連結、圖片等,都能一併修改的!!

    但範圍則是樣式的修改,如所有的圖片加上陰影、所有圖片的邊線寬度、邊線樣式...等

    超連結也是,如統一所有超連結的顏色與底線

    這樣說不知道你有沒有比較了解???

  • 1 decade ago

    內容就是內容 排版就是排版

    你要css改html 當然沒辦法

Still have questions? Get your answers by asking now.