css(層疊樣式表)用於對web頁面進行樣式設計和布局——**例如,更改內容的字型、顏色、大小和間距,將其分割成多個列,或者新增動畫和其他裝飾功能。**本模組讓您開始掌握css的基本知識,包括選擇器和屬性、編寫css規則、將css應用於html、如何在css中指定長度、顏色和其他單元、級聯和繼承以及除錯css。
在開始這個模組之前,您應該:
基本熟悉電腦的使用,以及被動地使用網路(也就是說,只是看著它,消費內容)。
在安裝基本軟體時建立的基本工作環境,以及在處理檔案時詳細了解如何建立和管理檔案。
基本熟悉html,如html模組介紹中所述。
本模組包含以下文章,將帶您了解css的所有基本理論,並為您提供充分的機會來測試一些技能。
在這個模組中,我們從理論基礎開始,看看什麼是css,瀏覽器如何html變成乙個dom , css是如何應用於部分dom,一些非常基本的語法示例,**實際上是用來包含我們的css網頁。
什麼是css?
css(層疊樣式表)允許你建立漂亮的網頁,但是它是如何工作的呢?本文解釋了什麼是css,瀏覽器如何將html轉換為文件物件模型(dom), css如何應用於dom的某些部分,一些非常基本的語法示例,以及在web頁面中實際包含css的**。
css是如何工作的
當瀏覽器顯示文件時,它必須將文件的內容與其樣式資訊結合起來。它分兩個階段處理檔案:
瀏覽器將html和css轉換成dom(文件物件模型)。dom表示計算機記憶體中的文件。它將文件的內容與其樣式相結合。
瀏覽器顯示dom的內容。
解析 html /css 稱為dom ,然後顯示。
關於dom
dom具有類似樹的結構。**標記語言中的每個元素、屬性和文字片段都成為樹結構中的dom節點。**節點由它們與其他dom節點的關係定義。有些元素是子節點的父節點,子節點有兄弟節點。
理解dom有助於設計、除錯和維護css,因為dom是css和文件內容相遇的地方。
dom表示
讓我們通過乙個例子來了解dom和css是如何協同工作的,而不是冗長乏味的解釋。
讓我們假設以下html**:
>
let's use:
>
cascadingspan
>
>
stylespan
>
>
sheetsspan
>
p>
在dom中,與
元素對應的節點是父節點。它的子節點是乙個文字節點和對應於我們的元素的節點。span節點也是父節點,文字節點作為子節點:
p
├─ "let's use:"
├─ span
| └─ "cascading"
├─ span
| └─ "style"
└─ span
└─ "sheets"
應用css到dom
>
let's use:
>
cascadingspan
>
>
stylespan
>
>
sheetsspan
>
p>
應用下面的css:
span
瀏覽器將解析html並從中建立dom,然後解析css。因為css中唯一可用的規則有乙個span選擇器,所以它將把這個規則應用到三個span中的每乙個。
將css應用於html文件有三種不同的方法,您通常會遇到,其中一些比其他的更有用。在這裡,我們將簡要回顧每乙個。
外部/內聯/內部
接下來,我們將更詳細地研究css語法,看看屬性及其值如何形成宣告,多個宣告如何形成宣告塊,以及宣告塊和選擇器如何形成完整的css規則。我們通過檢視其他css語法特性(如注釋和空格)來結束本文。
注意:css是一種宣告性語言,這使得它的語法相當容易理解。此外,它還有乙個非常好的錯誤恢復系統,允許您在不破壞一切的情況下犯錯誤——例如,不理解的宣告通常會被忽略。缺點是很難理解錯誤從何而來。繼續讀下去,一切終將明了。
一些詞彙
選擇器 屬性/值。
css宣告:css宣告塊
宣告以塊的形式進行分組,每組宣告由乙個左大括號()封裝。
宣告塊中包含的每個宣告都必須用分號(;)分隔,否則**將無法工作(或者至少會產生意想不到的結果)。塊的最後乙個宣告不需要用分號結束,儘管這樣做通常被認為是一種很好的風格,因為它可以防止在用另乙個宣告擴充套件塊時忘記新增分號。
css語句
css規則是樣式表的主要構建塊—**css中最常見的塊。**但還有其他型別的塊,你偶爾會遇到- css規則是所謂的css語句的一種型別。其他型別如下:
@import 'custom.css';
這個at-rule將另乙個css檔案匯入到當前css中。
@media
(min-width
: 801px)
}
超越語法:讓css可讀正如您所看到的,css語法並不難編寫:您編寫了一些規則,如果您編寫錯誤,它們將被忽略。然而,即使這樣做有效,也有一些值得了解的最佳實踐可以使css**更易於使用和維護。
空白格
空白表示實際的空格、製表符和新行。您可以新增空白以使樣式表更具可讀性。
與html一樣,瀏覽器往往會忽略css中的大部分空白;很多空白只是為了提高可讀性。在我們下面的第乙個例子中,**每個宣告(和規則開始/結束)**都在自己的行上——這可以說是一種編寫css的好方法,因為它易於維護和理解:
body
@media
(min-width
: 70em) }
h1div p, #id:first-line
div p
div p + p
你可以像這樣寫完全一樣的css,去掉大部分空格——這和第乙個例子在功能上是一樣的,但我相信你會同意這有點難讀:
body
@media
(min-width
: 70em) }
h1div p, #id:first-line
div p
div p + p
您選擇的**布局通常是個人偏好,儘管當您開始在團隊中工作時,您可能會發現現有的團隊有自己的樣式指南,其中指定了要遵循的約定。
注釋:/* */
速記:
一些屬性,如字型、背景、填充、邊框和邊距,被稱為簡寫屬性——這是因為它們允許您在一行中設定多個屬性值,從而節省時間,並使您的**更整潔。
例如,這一行:
in the order top, right, bottom, left (the same order as an analog clock). there are also other
shorthand types, for example two values, which set for example
the padding for top/bottom, then left/right */
padding
: 10px 15px 15px 5px;
padding-top
: 10px;
padding-right
: 15px;
padding-bottom
: 15px;
padding-left
: 5px;
然而這一行:
background
: red url(bg-graphic.png) 10px 10px repeat-x fixed;
background-color
: red;
background-image
:url(bg-graphic.png)
;background-position
: 10px 10px;
background-repeat
: repeat-x;
background-scroll
: fixed;
CSS揭秘(引言)
1.當某些值相互依賴時,應該把 它們的相互關係用 表達出來 2.要把超連結的顏色設定為與頁面中其他文字相同,還是要用 inherit a 3.inherit 關鍵字對於背景色同樣非常有用 callout callout before 4.如何避免不必要的 查詢 1 使用百分比長度來取代固定長度。如果...
CSS揭秘(引言)
1 標準的制定過程 a 人員結構 w3c會員公司的成員 特邀專家 w3c工作人員 b 儘管 css3 非常流行,但它實際上並沒有在任何規範中定義過。它實際上是指乙個非正式的集合,包括css規範第三版再加上一些版本號還是1的新規範。2 css編碼技巧 a 儘量減少 重複 b 相信你的眼睛,而不是數字 ...
C語言語法
printf 01f n double 2 1 printf 02f n double 2 1 保留兩位小數 陣列賦值 include memset al,0,sizeof al 輸入浮點數 while scanf lf n eof 字串比較 include char a 11 1234567890...