css學習筆記之一

認識CSS樣式

CSS全稱爲“層疊樣式表 (Cascading Style Sheets)”,它主要是用於定義HTML內容在瀏覽器內的顯示樣式,如文字大小、顏色、字體加粗等。

如下列代碼:

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

使用CSS樣式的一個好處是通過定義某個樣式,可以讓不同網頁位置的文字有着統一的字體、字號或者顏色等

CSS代碼語法

css 樣式由選擇符聲明組成,而聲明又由屬性組成,如下圖所示:

選擇符:又稱選擇器,指明網頁中要應用樣式規則的元素,如本例中是網頁中所有的段(p)的文字將變成藍色,而其他的元素(如ol)不會受到影響。

聲明:在英文大括號“{}”中的的就是聲明,屬性和值之間用英文冒號“:”分隔。當有多條聲明時,中間可以英文分號“;”分隔,如下所示:

p{font-size:12px;color:red;}

注意:

1、最後一條聲明可以沒有分號,但是爲了以後修改方便,一般也加上分號。

2、爲了使用樣式更加容易閱讀,可以將每條代碼寫在一個新行內,如下所示:

p{
   font-size:12px;
   color:red;
}

CSS註釋代碼

就像在Html的註釋一樣,在CSS中也有註釋語句:用/*註釋語句*/來標明(Html中使用<!--註釋語句-->)。就像下面代碼:

內聯式css樣式,直接寫在現有的HTML標籤中

CSS樣式可以寫在哪些地方呢?從CSS 樣式代碼插入的形式來看基本可以分爲以下3種:內聯式、嵌入式和外部式三種。這一小節先來講解內聯式。

內聯式css樣式表就是把css代碼直接寫在現有的HTML標籤中,如下面代碼:

<p style="color:red">這裏文字是紅色。</p>

並且css樣式代碼要寫在style=""雙引號中,如果有多條css樣式代碼設置可以寫在一起,中間用分號隔開。如下代碼:

<p style="color:red;font-size:12px">這裏文字是紅色。</p>

嵌入式css樣式,寫在當前的文件中

嵌入式css樣式,就是可以把css樣式代碼寫在<style type="text/css"></style>標籤之間。如下面代碼實現把三個<span>標籤中的文字設置爲紅色:

<style type="text/css">
span{
color:red;
}
</style>

嵌入式css樣式必須寫在<style></style>之間,並且一般情況下嵌入式css樣式寫在<head></head>之間。

外部式css樣式,寫在單獨的一個文件中

外部式css樣式(也可稱爲外聯式)就是把css代碼寫一個單獨的外部文件中,這個css樣式文件以“.css”爲擴展名,在<head>內(不是在<style>標籤內)使用<link>標籤將css樣式文件鏈接到HTML文件內,如下面代碼:

<link href="base.css" rel="stylesheet" type="text/css" />

注意:

1、css樣式文件名稱以有意義的英文字母命名,如 main.css。

2、rel="stylesheet" type="text/css" 是固定寫法不可修改。

3、<link>標籤位置一般寫在<head>標籤之內。

三種方法的優先級

這三種樣式是有優先級的,記住他們的優先級:內聯式 > 嵌入式 > 外部式

但是嵌入式>外部式有一個前提:嵌入式css樣式的位置一定在外部式的後面。如右代碼編輯器就是這樣,<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面(實際開發中也是這麼寫的)。感興趣的小夥伴可以試一下,把它們調換順序,再看他們的優先級是否變化。

其實總結來說,就是--就近原則(離被設置元素越近優先級別越高)

但注意上面所總結的優先級是有一個前提:內聯式、嵌入式、外部式樣式表中css樣式是在的相同權值的情況下。

什麼是選擇器?

每一條css樣式聲明(定義)由兩部分組成,形式如下:

選擇器{
    樣式;
}

在{}之前的部分就是“選擇器”,“選擇器”指明瞭{}中的“樣式”的作用對象,也就是“樣式”作用於網頁中的哪些元素。比如右側代碼編輯器中第7行代碼中的“body”就是選擇器。

標籤選擇器

標籤選擇器其實就是html代碼中的標籤。如右側代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下面代碼:

p{font-size:12px;line-height:1.6em;}

上面的css樣式代碼的作用:爲p標籤設置12px字號,行間距設置1.6em的樣式。

類選擇器

類選擇器在css樣式編碼中是最常用到的。

語法:

.類選器名稱{css樣式代碼;}

注意:

1、英文圓點開頭

2、其中類選器名稱可以任意起名(但不要起中文噢)

使用方法:

第一步:使用合適的標籤把要修飾的內容標記起來,如下:

<span>膽小如鼠</span>

第二步:使用class="類選擇器名稱"爲標籤設置一個類,如下:

<span class="stress">膽小如鼠</span>

第三步:設置類選器css樣式,如下:

.stress{color:red;}/*類前面要加入一個英文圓點*/

ID選擇器

在很多方面,ID選擇器都類似於類選擇符,但也有一些重要的區別:

1、爲標籤設置id="ID名稱",而不是class="類名稱"。

2、ID選擇符的前面是井號(#)號,而不是英文圓點(.)

類和ID選擇器的區別

學習了類選擇器和ID選擇器,我們會發現他們之間有很多的相似處,是不是兩者可以通用呢?我們不要着急先來總結一下他們的相同點和不同點:

相同點:可以應用於任何元素
不同點:

1、ID選擇器只能在文檔中使用一次。與類選擇器不同,在一個HTML文檔中,ID選擇器只能使用一次,而且僅一次。而類選擇器可以使用多次。

2、可以使用類選擇器詞列表方法爲一個元素同時設置多個樣式。我們可以爲一個元素同時設多個樣式,但只可以用類選擇器的方法實現,ID選擇器是不可以的(不能使用 ID 詞列表)。

下面的代碼是正確的(完整代碼見右側代碼編輯器)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年級</span>下學期時,我們班上了一節公開課...</p>

上面代碼的作用是爲“三年級”三個文字設置文本顏色爲紅色並且字號爲25px。

下面的代碼是不正確

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年級</span>下學期時,我們班上了一節公開課...</p>

上面代碼不可以實現爲“三年級”三個文字設置文本顏色爲紅色並且字號爲25px的作用。

子選擇器

還有一個比較有用的選擇器子選擇器,即大於符號(>),用於選擇指定標籤元素的第一代子元素

.food>li{border:1px solid red;}

這行代碼會使class名爲food下的子元素li(水果、蔬菜)加入紅色實線邊框。

包含(後代)選擇器

包含選擇器,即加入空格,用於選擇指定標籤元素下的後輩元素。如右側代碼編輯器中的代碼:

.first  span{color:red;}

請注意這個選擇器與子選擇器的區別,子選擇器(child selector)僅是指它的直接後代,或者你可以理解爲作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇,而子選擇器是通過“>”進行選擇。

總結:>作用於元素的第一代後代,空格作用於元素的所有後代。

通用選擇器

通用選擇器是功能最強大的選擇器,它使用一個(*)號指定,它的作用是匹配html中所有標籤元素,如下使用下面代碼使用html中任意標籤元素字體顏色全部設置爲紅色:

* {color:red;}

僞類選擇符

更有趣的是僞類選擇符,爲什麼叫做僞類選擇符,它允許給html不存在的標籤(標籤的某種狀態)設置樣式,比如說我們給html中一個標籤元素的鼠標滑過的狀態來設置字體顏色:

a:hover{color:red;}

上面一行代碼就是爲a標籤鼠標滑過的狀態設置字體顏色變紅。

關於僞選擇符:

    關於僞類選擇符,到目前爲止,可以兼容所有瀏鑑器的“僞類選擇符”就是a標籤上使用:hover了(其實僞類選擇符還有很多,尤其是css3中,但是因爲不能兼容所有瀏鑑器)。其實:hover可以放在任意的標籤上,比如說p:hover,但是它們的兼容性也是很不好的,所以現在比較常用的還是a:hover的組合。

分組選擇符

當你想爲html中多個標籤元素設置同一個樣式時,可以使用分組選擇符(,),如下代碼爲右側代碼編輯器中的h1、span標籤同時設置字體顏色爲紅色:

h1,span{color:red;}

它相當於下面兩行代碼:

h1{color:red;}
span{color:red;}

繼承

CSS的某些樣式是具有繼承性的,那麼什麼是繼承呢?繼承是一種規則,它允許樣式不僅應用於某個特定html標籤元素,而且應用於其後代。比如下面代碼:如某種顏色應用於p標籤,這個顏色設置不僅應用p標籤,還應用於p標籤中的所有子元素文本,這裏子元素爲span標籤。

p{color:red;}

<p>三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>

但注意有一些css樣式是不具有繼承性的。如border:1px solid red;

p{border:1px solid red;}

<p>三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>

在上面例子中它代碼的作用只是給p標籤設置了邊框爲1像素、紅色、實心邊框線,而對於子元素span是沒用起到作用的。

特殊性

有的時候我們爲同一個元素設置了不同的CSS樣式代碼,那麼元素會啓用哪一個CSS樣式呢?我們來看一下面的代碼:

p{color:red;}
.first{color:green;}
<p class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>

p和.first都匹配到了p這個標籤上,那麼會顯示哪種顏色呢?green是正確的顏色,那麼爲什麼呢?是因爲瀏覽器是根據權值來判斷使用哪種css樣式的,權值高的就使用哪種css樣式。

下面是權值的規則:

標籤的權值爲1,類選擇符的權值爲10,ID選擇符的權值最高爲100。例如下面的代碼:

p{color:red;} /*權值爲1*/
p span{color:green;} /*權值爲1+1=2*/
.warning{color:white;} /*權值爲10*/
p span.warning{color:purple;} /*權值爲1+1+10=12*/
#footer .note p{color:yellow;} /*權值爲100+10+1=111*/

注意:還有一個權值比較特殊--繼承也有權值但很低,有的文獻提出它只有0.1,所以可以理解爲繼承的權值最低。

層疊

我們來思考一個問題:如果在html文件中對於同一個元素可以有多個css樣式存在並且這多個css樣式具有相同權重值怎麼辦?好,這一小節中的層疊幫你解決這個問題。

層疊就是在html文件中對於同一個元素可以有多個css樣式存在,當有相同權重的樣式存在時,會根據這些css樣式的前後順序來決定,處於最後面的css樣式會被應用。

如下面代碼:

p{color:red;}
p{color:green;}
<p class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>

最後 p 中的文本會設置爲green,這個層疊很好理解,理解爲後面的樣式會覆蓋前面的樣式。

所以前面的css樣式優先級就不難理解了:

內聯樣式表(標籤內部)> 嵌入樣式表(當前文件中)> 外部樣式表(外部文件中)

重要性

我們在做網頁代碼的時,有些特殊的情況需要爲某些樣式設置具有最高權值,怎麼辦?這時候我們可以使用!important來解決。

如下代碼:

p{color:red!important;}
p{color:green;}
<p class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>

這時 p 段落中的文本會顯示的red紅色。

注意:!important要寫在分號的前面

這裏注意當網頁製作者不設置css樣式時,瀏覽器會按照自己的一套樣式來顯示網頁。並且用戶也可以在瀏覽器中設置自己習慣的樣式,比如有的用戶習慣把字號設置爲大一些,使其查看網頁的文本更加清楚。這時注意樣式優先級爲:瀏覽器默認的樣式 < 網頁製作者樣式 < 用戶自己設置的樣式,但記住!important優先級樣式是個例外,權值高於用戶自己設置的樣式。

文字排版--字體

我們可以使用css樣式爲網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例子,下面代碼實現:爲網頁中的文字設置字體爲宋體。

body{font-family:"宋體";}

這裏注意不要設置不常用的字體,因爲如果用戶本地電腦上如果沒有安裝你設置的字體,就會顯示瀏覽器默認的字體。(因爲用戶是否可以看到你設置的字體樣式取決於用戶本地電腦上是否安裝你設置的字體。)
現在一般網頁喜歡設置“微軟雅黑”,如下代碼:

body{font-family:"Microsoft Yahei";}

body{font-family:"微軟雅黑";}

注意:第一種方法比第二種方法兼容性更好一些。

因爲這種字體即美觀又可以在客戶端安全的顯示出來(用戶本地一般都是默認安裝的)。

文字排版--字號、顏色

可以使用下面代碼設置網頁中文字的字號爲12像素,並把字體顏色設置爲#666(灰色):

body{font-size:12px;color:#666}

文字排版--粗體

我們還可以使用css樣式來改變文字的樣式:粗體、斜體、下劃線、刪除線,可以使用下面代碼實現設置文字以粗體樣式顯示出來。

p span{font-weight:bold;}

在這裏大家可以看到,如果想爲文字設置粗體是有單獨的css樣式來實現的,再不用爲了實現粗體樣式而使用h1-h6或strong標籤了。

文字排版--斜體

以下代碼可以實現文字以斜體樣式在瀏覽器中顯示:

p a{font-style:italic;}

<p>三年級時,我還是一個<a>膽小如鼠</a>的小女孩。</p>

文字排版--下劃線

有些情況下想爲文字設置爲下劃線樣式,這樣可以在視覺上強調文字,可以使用下面代碼來實現:

p a{text-decoration:underline;}

<p>三年級時,我還是一個<a>膽小如鼠</a>的小女孩。</p>

文字排版--刪除線

刪除線使用下面代碼就可以實現:

 .oldPrice{text-decoration:line-through;}

段落排版--縮進

中文文字中的段前習慣空兩個文字的空白,這個特殊的樣式可以用下面代碼來實現:

p{text-indent:2em;}
<p>1922年的春天,一個想要成名名叫尼克卡拉威(託比?馬奎爾Tobey Maguire 飾)的作家,離開了美國中西部,來到了紐約。那是一個道德感漸失,爵士樂流行,走私爲王,股票飛漲的時代。爲了追尋他的美國夢,他搬入紐約附近一海灣居住。</p>

注意:2em的意思就是文字的2倍大小。

段落排版--行間距

這一小節我們來學習一下另一個在段落排版中起重要作用的行間距屬性(line-height),如下代碼實現設置段落行間距爲1.5倍。

p{line-height:1.5em;}
<p>菲茨傑拉德,二十世紀美國文學巨擘之一,兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象爲"爵士樂時代"吟唱華麗輓歌,其詩人和夢想家的氣質亦爲那個奢靡年代的不二註解。</p>

段落排版--字間距、字母間距

文字間隔、字母間隔設置:

如果想在網頁排版中設置文字間隔或者字母間隔就可以使用    letter-spacing來實現,如下面代碼:

h1{
    letter-spacing:50px;
}
...
<h1>了不起的蓋茨比</h1>

注意:這個樣式使用在英文單詞時,是設置字母與字母之間的間距。

單詞間距設置

如果我想設置英文單詞之間的間距呢?可以使用word-spacing來實現。如下代碼:

h1{
    word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>

段落排版--對齊

想爲塊狀元素中的文本、圖片設置居中樣式嗎?可以使用text-align樣式代碼,如下代碼可實現文本居中顯示。(那麼什麼是塊狀元素呢?在後面的11-1、11-2小節中會講到。)

h1{
    text-align:center;
}
<h1>了不起的蓋茨比</h1>

同樣可以設置居左:

h1{
    text-align:left;
}
<h1>了不起的蓋茨比</h1>

還可以設置居右:

h1{
    text-align:right;
}
<h1>了不起的蓋茨比</h1>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章