CSS的基礎學習

時間 2019-11-19

標籤 css 基礎學習欄目 CSS 简体版

原文原文鏈接

CSS學習css

--------學習資源html

http://www.csszengarden.com/web

CSS語法檢查http://jigsaw.w3.org/css-validator/安全

配置CSS的方法：學習

1.行內式spa

行內式經過直接設置元素的style屬性來引入css.net

<div style="width: 100px; height: 100px;">行內式</div>htm

優勢：元素的樣式簡單明瞭blog

缺點：代碼不易維護utf-8

2.內嵌式

經過在head標籤中加入style標籤來引入CSS

<head>

/*樣式*/

</style>

</head>

缺點：不能被多個頁面重複使用

3.連接式

經過link標籤來引入CSS文件

<head>

</head>

優勢：頁面在加載元素的同時也會加載其樣式

缺點：增長了http請求

4.導入式

經過在head標籤中加入style標籤及@import來引入CSS

<head>

@import""

</style>

</head>

缺點：導入式會在整個頁面加載完畢後，再加載CSS文件，這樣會致使頁面在打開時，先顯示的是無樣式的頁面，閃爍一下以後，頁面纔有了樣式

CSS選擇符和聲明：

CSS語法基礎

CSS樣式規則選擇符

選擇符能夠是HTML元素名稱，類名或id

CSS樣式規則聲明

聲明是你要設置的CSS屬性（例如顏色）及其值

一個選擇符要配置多個屬性能夠用分號（；）

例：body{color: blue; background-color: yellow}將網頁配置成黃底藍字

若是須要更多的顏色就能夠參考http://webdevbasics.net/color的」網頁安全調色板」

body{color: #3399cc; background-color: #FFFFCC}將網頁配置成淺黃底中藍字

配置內聯CSS：

經過修改style實現

可是若是在body內<p style="color: red">文本 </p>就會覆蓋了body的全局樣本。若是有10個段落都須要以這種方式配置，就會形成大量冗餘代碼，所以並不高效

配置嵌入CSS：

嵌入樣式應用於整個網頁文檔，這種樣式要放到網頁head部分的<style>元素中。

例子：

<head>

<title>Trillium Media Design</title>

<style>

body{ background-color: #E6E6FA;color: #191970}、

h1{background-color: #AEAED4;color: #191970}

</style>

</head>

配置外部CSS：

當CSS位於網頁文檔外部的時候，CSS的靈活性與強大才真正的顯露無疑。外部樣式表是包含CSS樣式的文本文件，使用.css拓展名。這種.css文件經過link元素與網頁關聯。所以多個網頁能夠關聯一個.css文件。.css文件不包含任何HTML標記----它只含CSS樣式規則

優勢是隻需在一個文件內配置樣式

Link元素

Link元素位於網頁的head部分，是獨立標記(void標記).link元素使用三個屬性：rel , href和type

rel屬性的值是」stylesheet」
href屬性的值是.css文件名
type的屬性的值是」text/css」,這個是CSS的MIME類型。Type在HTML5中可選，但在XHTML中必須

例如

CSS的class, ID和後代選擇符

------這些東西都要放在<style></style>裏

例子 <style>

.feature{color : #FF0000;}

main p {color : #00ff00;}

#new {color: #FF00CC;}

</style>

Class選擇符:

Class選擇符配置一類CSS規則，並將其應用於網頁的一個或多個區域，配置一類樣式時，要將選擇符配置成類名。在類名前添加句點符號（.）。類名必須以字母開頭，可包含數字，連字號和下劃線可是不能有空格，如下代碼配置名爲feature的一類樣式

.feature{color: #FF0000;}

一類的樣式能夠應用於任何元素。這是使用class屬性作到的

例：<li class=」feature」>123456</li>

ID選擇符：

Class用於網頁上屢次響應使用，而id在每一個網頁上只能使用一次。配置id時記得在前面添加#號

#content{color:#333333;}

後代選擇符:

用後代選擇符在容器元素的上下文配置一個元素。

例如：將main元素中的段落配置成綠色文本

main p {color : #00ff00;}

span元素

<span>元素在網頁中定義一個上下不留空的內聯區域。以<span>標記開頭,以</span>結尾。適合格式化一個包含在其餘區域（好比<p>

,<blockquote>或<div>)中的區域。

CSS的層疊（局部優先，做用範圍越小越優先）

例如導入的.css中body { background-color: #FFFFCC（黃色）;

color: #000000（黑色）; }

可是同時又在html的head中定義

<style>

body { color: #0000FF（藍色）; }

</style>

顯示的頁面爲黃底藍字

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。