CSS應用基礎教程(1) 基本認識

來源:互聯網
上載者:User
css|基礎教程
關 於 C S S 的 概 論

  CSS是『Cascading Style Sheets』的簡稱,中文翻為「串接樣式表」,也有人只翻為「樣式表」。CSS用以作為網頁的排版與風格設計,在所謂的「新式網頁」裡 ,CSS不容置疑是相當重要的一環。CSS是以既有的基礎,用以彌補既存HTML 規格裡的不足,也讓網頁的設計更為靈活。

  這份教學檔案就要來為您介紹CSS的應用羅!在這邊並不介紹CSS的所有規格 ,僅就您在網頁寫作上較常用到,較可能用到的文法部份及應用的方法來為您作介紹。也 由於現在兩瀏覽器的相容是漸行漸遠,將貼心地為您註明支援該文法的瀏覽器。而IE從 3.0開始便支援部份文法了,這點也會為為您註明的。
各 章 節 的 概 略 介 紹

  為了您參考與學習上的方便,在這裡先為您大略地說明一下這份教學檔案各章節所包含的內容吧!讓您在參考時有個方向與概念。基本上,前兩章著重於概念與基本認知的建立,也就是一些為您做一些劄根的工作;第三章則為您補充在應用與設定上的一些其它方式或特性的說明與介紹。而第四章到第六章則著重於文法、參數與性質的介紹,也 就是真正建立在樣式表裡面的東東。

第一章 CSS的基本認識: 就是本章啦!就介紹您一些CSS基本概念與認識。第二章 CSS的應用方式: 為您介紹CSS的基本宣告、應用方法與特性介紹。第三章 CSS的應用補充: 為您介紹CSS的其它宣告方式、應用與特性介紹。第四章 頁面性質的CSS: 為您介紹頁面性質的CSS相關文法、參數與性質。第五章 文字性質的CSS: 為您介紹文字性質的CSS相關文法、參數與性質。第六章 區塊性質的CSS: 為您介紹區塊性質的CSS相關文法、參數與性質。
應 用 上 的 基 本 認 識

  應用CSS並不困難,但是請您先參考這裡的基本認識,對一些用語有了一點基本概念後,對於您在看後面的教學會有助益,看起來也才不會太吃力!

一、基本用語的認識: 元件(element):亦即HTML基本文法中的標籤(tag)。
屬性(attribute):用以描述標籤特性的屬性。
例如: <HR WIDTH="90%">中,HR為標籤,WIDTH為屬性,而80%即為WIDTH屬性的值。性質(property):用以描述元件的特性。相當於HTML基本 文法中的屬性。
樣式(style):擁有一組或數組的性質,用以描述元件特性。
挑選者(selector):套用樣式的元件。
例如:

H3{ COLOR : BLUE }中,H3為挑選者,COLOR為性質,BLUE為COLOR性質的值。

二、基本單位的認識:
有相對單位與絕對單位兩種單位 表達方式。
相對單位:

『em』:相對於字母高度的比例因素。
『en』:相對於字型大小的比例因素。
『%』:相對於長度單位(通常是目前字型的大小)的百分比例。絕對單位: 『in』:英寸。
『cm』:公分。
『mm』:公釐。
『px』:像素(系統預設單位)。
『pc』:pica,印刷活字單位。
『pt』:像點。

相對關係:1in= 6pc= 72pt= 2.54cm= 25.4mm

三、顏色使用的認識:

顏色的表示共有五種方式。
『#RRGGBB』: 以三個00到FF的十六進位值分別表示0到255十進位值的紅、綠、藍三原色數值。『#RGB』: 簡略標記法,只用三個0到F的十六進位值分別表示紅、綠、藍三原色數值。而事實上,瀏覽器會自動擴充為六個十六進位的值,如『#ABC』將變為『#AABBCC』。但是,顯見這樣的 標記法並不精確。『rgb(R,G,B)』: 以0到255十進位值的紅、綠、藍三原色數值來表示顏色。『rgb(R%,G%,B%)』: 以紅、綠、藍彼此相對的數值比例來表示顏色,如『rgb(60%,100%,75%)』。『Color_Name』: 直接以顏色名稱來表示顏色,共有141種標準的顏色名稱。

四、URL標記法的認識: CSS的URL表示共有五 種方式,且都為合法宣告,您可以自行選用。
URL(http://yourweb/path/file_name)
URL('http://yourweb/path/file_name')
URL("http://yourweb/path/file_name")
URL( 'http://yourweb/path/file_name' )
URL( "http://yourweb/path/file_name" )

  有了這些基本認識與概念後,接下來就要來為您介紹CSS的應用方法羅!



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。