西西軟件園多重安全檢測下載網站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁西西教程DreamWeaver → CSS入門教程:關于CSS樣式表

CSS入門教程:關于CSS樣式表

相關軟件相關文章發(fā)表評論 來源:網絡時間:2010/4/28 12:15:06字體大小:A-A+

作者:佚名點擊:178次評論:1次標簽: 教程

  • 類型:商務模板大。5.0M語言:中文 評分:10.0
  • 標簽:
立即下載

本例為CSS入門系列教程,在這一課中我們將學習CSS的樣式表,主要學習在學習css之前你應該掌握哪些基礎知識,認識CSS以及如何使用CSS,希望能給對網頁制作感興趣的朋友帶來幫助~~

CSS入門教程之關于CSS樣式表

一.在學習css之前你應該掌握哪些基礎知識

1.什么是網頁,什么是超文本語言(html)。
2.會使用Dreamweaver等常用的網頁編輯器。

Dreamweaver是現(xiàn)今最好的網站編輯工具之一,而Dreamweaver8增加的對CSS的支持更是你容易得來使用CSS,用它來給制作網頁的 CSS樣式表會更簡單、更方便。本教程教你如何利用Dreamweaver8在頁面中加入CSS,你不用死記硬背的記代碼標記,也不用去看很厚的CSS手冊,你就可以輕松自如的在網頁中運用CSS。不過首先你要對CSS有一定的了解。因此,本教程的前面4章為CSS理論知識,主要是對CSS的全面介紹,希望讀者看后對CSS的語法、結構、應用有一個全面的了解;后面4章為DW實戰(zhàn),主要是教你如何利用Dreamweaver8靈活運用CSS在網頁中。閱讀此文前,你需要對HTML有一定的了解,并會使用Dreamweaver。

二.認識CSS

CSS就是Cascading Style Sheets,中文翻譯為“層疊樣式表”,簡稱樣式表,它是一種制作網頁的新技術。

網頁設計最初是用HTML標記來定義頁面文檔及格式,例如標題<h1>、段落<p>、表格<table>、鏈接<a>等,但這些標記不能滿足更多的文檔樣式需求,為了解決這個問題,在1997年W3C(The World Wide Web Consortium)頒布HTML4標準的同時也公布了有關樣式表的第一個標準CSS1, 自CSS1的版本之后,又在1998年5月發(fā)布了CSS2版本,樣式表得到了更多的充實。W3C把DHTML(Dynamic HTML)分為三個部分來實現(xiàn):腳本語言(包括JavaScript、Vbscript等)、支持動態(tài)效果的瀏覽器(包括Internet Explorer、Netscape Navigator等)和CSS樣式表。

注意:CSS需要IE4(Internet Explorer 4.0)和NC4(Netscape 4.0)以上的瀏覽器支持,有些效果需要更高版本的瀏覽器支持。

三.怎樣使用CSS

如果你使用的是Dreamweaver MX 2004以上的版本,在定義文字字體、顏色、大小等屬性的時候,查看一下代碼你會發(fā)現(xiàn)有這樣的一部分在head區(qū)域:

<style type="text/css">
<!--
.STYLE2 {
font-size: 16pt;
font-family: "Courier New", Courier, monospace;
font-weight: bold;
color: #FF3300;
}
-->
</style>

那么恭喜你,你已經使用了CSS設計網頁。
那么除了這種調用CSS的方法外,還有別的嗎?回答是“當然有了”,下面是系統(tǒng)介紹

標記加注法(in-line):
如果只有一個HTML標記需要設定樣式,則可在該標記內,加上屬性

style=" "

以個別修訂樣式。

頁面內嵌法:

<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>

外部調用法:

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

雙表法調用樣式表

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
<style type="text/css" media="all">@import url( css/style.css );</style>

為什么要寫兩次呢?

實際上一般情況下用外聯(lián)法調用(就是第一句)就足夠了。我這里使用雙表調用只是一種示例。其中的"@import"命令用于輸入樣式表。而"@import"命令在netscape 4.0版本瀏覽器是無效的。也就是說,當你希望某些效果在netscape 4.0瀏覽器中隱藏,在4.0以上或其它瀏覽器中又顯示的時候,你可以采用"@import"命令方法調用樣式表。

    PPT教程
    (30)PPT教程
    教程的模板都是關于如何制作的基礎的模板,還有著一些特定的個體的教程的制作,例如一些漫畫圖片等等的教程。教程主要為大家講解了關于基礎的的制作,還有著一些模板中的小的技巧,如何運用模板中的一些操作來達到自己想要的效果,在教程中都可以找到對應的答案。教程是專門用于制作演示文稿俗稱幻燈片。廣泛運用于各種會議產品演示學校教學等。學會如何制作,成為提升工作效率的好幫手。包含有很多的功能,我們可以根據(jù)個人喜歡和...更多>>
    • PPT教程圖文詳解模板

      09-23 / 400KB

      推薦理由:要制作一份好的PPT的模板出來,首先要知道PPT的制作方法,那么制作一份簡單的PPT的模板,是我們要學會掌握的
    • 制作PPT教程模板

      09-23 / 6.0M

      推薦理由:PPT的模板的使用,可以說是在我們的工作、生活、學習中都十分的常見,那么在PPT的模板的制作中,有著一些常
    • 漫畫教程PPT模板

      09-23 / 5.5M

      推薦理由:我們在日常生活中經常會看到很多漫畫人物形象,讓人忍俊不禁,總是非常形象生動,雖說帶一點夸張的效果,卻
    • 網絡主播教程PPT模板

      09-19 / 1.0M

      推薦理由:高速發(fā)展的互聯(lián)網科技衍生了很多過去所沒有的職業(yè)。網絡游戲主播就是九零后愛游戲的少年們非常喜歡憧憬的一
    • 字體設置教程PPT

      08-19 / 138KB

      推薦理由:這是一份教程類的PPT,模板從以圖文結合形式詳細地分享了如果講單一的字體設置成有顏色的多彩字體。小編感覺
    • 木板字制作PPT教程模板

      08-19 / 1.7M

      推薦理由:在制作PPT的過程中,我們經常需要運用到一些藝術字體,例如木板字,木板字在PPT當中的運用能讓整個PPT帶有復

    相關評論

    閱讀本文后您有什么感想? 已有人給出評價!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(1)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字數(shù): 0/500 (您的評論需要經過審核才能顯示)