CSS---初出茅廬

其實原來學過css,但是用的不多,不過最近忽然又使用的比較頻繁,所以複習一下,也順便做一下筆記。
1、CSS聲明總是以分號(;)結束,聲明組以大括號({})括起來:

p
{
color:red;
text-align:center;
}

2、註釋用 /*這是註釋*/

3、id 和 class 選擇器:

id選擇器:

id 選擇器可以爲標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 “#” 來定義。

#para1
{
text-align:center;
color:red;
}

class選擇器:

class 選擇器用於描述一組元素的樣式,class 選擇器有別於id選擇器,class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中,類選擇器以一個點"."號顯示。

.center {text-align:center;}

注意:id選擇器和class選擇器都不建議使用數字開頭的命名方式,部分瀏覽器可能不起作用。
4、CSS樣式的插入有三種方式:

外部樣式:

外部樣式可以在任何文本編輯器中進行編輯。
文件不能包含任何的 html 標籤。應該以 .css 擴展名進行保存。
建議把引入放在頭部:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
/*引入文件中只有css,例:*/
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

內部樣式:

使用 <style> 標籤在文檔頭部定義內部樣式

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

內聯樣式:

由於要將表現和內容混雜在一起,內聯樣式會損失掉許多優勢。
請慎用這種方法,例如當樣式僅需要在一個元素上應用一次時。
要使用內聯樣式,你需要在相關的標籤內使用樣式(style)屬性。
Style 屬性可以包含任何 CSS 屬性。

<p style="color:sienna;margin-left:20px">這是一個段落。</p>

總結:

優先級:
內聯樣式)Inline style > (內部樣式)Internal style sheet >(外部樣式)External style sheet > 瀏覽器默認樣式
注意事項:
不要在屬性值與單位之間留有空格(如:“margin-left: 20 px” ),正確的寫法是 “margin-left: 20px” 。
如果外部樣式放在內部樣式的後面,則外部樣式將覆蓋內部樣式。 外部樣式和內部樣式,誰在後,誰就覆蓋前一個重複的部分。

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