- CSS3+DIV網頁樣式與布局案例課堂(第2版)
- 劉春茂
- 529字
- 2020-06-29 18:06:45
3.1 CSS基本語法
在網頁中加入CSS樣式的目的是將網頁內容代碼與網頁格式風格代碼分離開來,從而使網頁設計者可以對網頁的布局進行更多的控制。
3.1.1 CSS構造規則
CSS樣式表由若干條樣式規則組成,這些樣式規則可以應用到不同的元素或文檔來定義它們顯示的外觀。每一條樣式規則由三部分構成:選擇符(selector)、屬性(property)和屬性值(value),基本格式如下。
selector{property: value}
(1)selector可以采用多種形式,可以為文檔中的HTML標記,例如<body>、<table>、<p>等,也可以是XML文檔中的標記。
(2)property則是選擇符指定的標記所包含的屬性。
(3)value指定了屬性的值。如果定義選擇符的多個屬性,則屬性和屬性值為一組,組與組之間用分號(;)隔開。基本格式如下。
selector{property1: value1; property2: value2;… }
下面就給出一條樣式規則,如下所示。
p{color:red}
該樣式規則的選擇符為p,為段落標記<p>提供樣式,color為指定文字顏色屬性,red為屬性值。此樣式表示標記<p>指定的段落文字為紅色。
如果要為段落設置多種樣式,則可以使用下列語句。
p{font-family:"隸書"; color:red; font-size:40px; font-weight:bold}
3.1.2 CSS的注釋
CSS注釋可以幫助用戶對自己寫的CSS文件進行說明,如說明某段CSS代碼所作用的地方、功能、樣式等,以便后期維護一看即懂,同時在團隊開發網頁的時候,合理適當地注釋有利于團隊看懂CSS樣式是對應HTML哪里的,以便順利快速地開發DIV CSS網頁。
CSS的注釋樣式如下。
./* body定義 */ .body{ text-align:center; margin:0 auto;} /* 頭部css定義 */ .#header{ width:960px; height:120px;}
推薦閱讀
- Solaris 10系統管理
- 計算機網絡技術及應用
- Getting Started with Ghost
- HIS內核設計之道:醫院信息系統規劃設計系統思維
- 矛與盾:黑客攻防與腳本編程
- Dreamweaver+Flash+Photoshop網頁設計從入門到精通(微課精編版)
- 網頁設計與制作項目教程(HTML+CSS+Bootstrap)
- 現代網絡控制技術及應用
- 物聯網及其安全技術解析
- CSS新世界
- 撥得云開見日出:解構一個典型的云計算系統
- 云原生應用管理:原理與實踐
- 云原生:運用容器、函數計算和數據構建下一代應用
- Google Plus First Look:a tip-packed,comprehensive look at Google+
- 大型網站技術架構