css教程：CSS基本介紹！_CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

What You Should Already Know
Before you continue you should have some basic understanding of the following:
在繼續前你應該具備相關的基礎知識：HTML / XHTML

What is CSS? 什么是CSS？
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one

CSS 意思就是疊層樣式表
樣式定義了HTML元素怎樣去顯示
樣式一般存儲在樣式表中
樣式添加到HTML4.0中用來解決問題
利用外部樣式表可以提高你的工作效率
外部樣式表存儲在CSS文件中

Styles Solve a Common Problem
用樣式來解決一個共同的問題

HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.
As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the <font> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.
To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.
All major browsers support Cascading Style Sheets.

HTML標簽起初被設計成為定義文檔的內容。通過使用像<h1>,<p>,<table>這樣的標簽他們應該表達的是"這是一個標題","這是一個段落","這是一張表格",而布局該由瀏覽器來處理并非使用格式化標簽.
作為兩大瀏覽器 - 網景和 IE - 不斷的添加新的HTML標簽和屬性(像<font>標簽和顏色屬性)來初始HTML的規格,這讓建立清楚的HTML文檔內容并從形式中分離出來變的越來越困難.
為了解決這個難題,W3C 這個非贏利的,建立標準的組織,為HTML4.0增加了樣式
所有主流瀏覽器都支持樣式表

Style Sheets Can Save a Lot of Work
樣式表可以提高工作效率

Styles sheets define HOW HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS document!
CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

樣式表定義元素怎樣去顯示,就像在HTML3.2中字體標簽和顏色屬性一般保存在一個外部的.css文件一樣.外部樣式表能夠讓你改變所有出現在你WEB中的外觀和布局,而僅僅通過編輯一個單獨的CSS文檔.(原理就是一動多變)
CSS是一個在設計領域中的突破,因為它答應開發者一下就能控制多個WEB頁的樣式和布局.作為譯名WEB開發者你可以為每個HTML元素和應用他的每個頁面定義一個你想要的樣式.來實現全面的改變,簡單的改變樣式,所有與之相關的元素都會自動更新

Multiple Styles Will Cascade Into One

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.
樣式表答應樣式信息用多種方式來定義.樣式可以在一單獨的HTML元素中指定,在<head>元素中或在一外部CSS文件中.甚至多個外部樣表能集中在一個單一的HTML文檔中

Cascading order

What style will be used when there is more than one style specified for an HTML element?
當多于一種的樣式指定一HTML元素時使用怎樣的樣式呢?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
一般說來所有樣式有下面的規則(第四個最有優先性)

Browser default
瀏覽器默認
External style sheet
外部樣式表
Internal style sheet (inside the <head> tag)
內嵌樣式表(在<head>標簽內)
Inline style (inside an HTML element)
行內樣式(在一HTML元素內)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).
所以寫在HTML元素中的樣式有最高的優先權(寫在HTML元素內的),它會替代其他形式的樣式.