1、在head標簽中引入css文件

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

2、語法：<label for="控件id名稱">

注意：標簽的?for屬性中的值應當與相關控件的?id屬性值一定要相同。

checkbox中多選，radio單選。

3、CSS樣式優先級：內聯式>嵌入式>外部式

內聯式：<spanstyle="color:pink">超酷的互聯網</span>

嵌入式：<styletype="text/css">span{??color:red;? }</style>

外部式：<linkhref="style.css" rel="stylesheet"type="text/css">

4、css中的類選擇器語法：

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

<span class="類選器名稱">文本</span>

ID選擇器語法：

#setGreen{??color:green;? }

<span id="setGreen">公開課</span>

注意：ID選擇器只能在文檔中使用一次，而類選擇器可以使用多次。可以使用類選擇器詞列表方法為一個元素同時設置多個樣式，而ID選擇器不行。如：

.stress{

???color:red;

}

.bigsize{

???font-size:25px;

}

<p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節公開課...</p>

5、還有一個比較有用的選擇器子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素。如右側代碼編輯器中的代碼：.food>li{border:1px solid red;}

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

6、包含選擇器，即加入空格,用于選擇指定標簽元素下的后輩元素。如右側代碼編輯器中的代碼：.first? span{color:red;}

這行代碼會使第一段文字內容中的“膽小如鼠”字體顏色變為紅色。

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

?

總結：>作用于元素的第一代后代，空格作用于元素的所有后代。

?

7、偽類選擇符

更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給html不存在的標簽（標簽的某種狀態）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態來設置字體顏色：

a:hover{color:red;}

上面一行代碼就是為a標簽鼠標滑過的狀態設置字體顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入鼠標滑過字體顏色變為紅色特效。

關于偽選擇符：

??? 關于偽類選擇符，到目前為止，可以兼容所有瀏鑒器的“偽類選擇符”就是a標簽上使用：hover了（其實偽類選擇符還有很多，尤其是css3中，但是因為不能兼容所有瀏鑒器，本教程只是講了這一種最常用的）。其實:hover可以放在任意的標簽上，比如說p:hover，但是它們的兼容性也是很不好的，所以現在比較常用的還是a:hover的組合。

?

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

如下代碼：

p{color:red!important;}

p{color:green;}

<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>

這時 p 段落中的文本會顯示的red紅色。注意：!important要寫在分號的前面。

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

p{text-indent:2em;}

<p>1922年的春天，一個想要成名名叫尼克卡拉威（托比?馬奎爾TobeyMaguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>

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

段落排版--行間距（行高）? p{line-height:2em;}

10、元素分類--塊級元素

什么是塊級元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設置display:block就是將元素顯示為塊級元素。如下代碼就是將內聯元素a轉換為塊狀元素，從而使a元素具有塊狀元素特點。

a{display:block;}

塊級元素特點：

1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。

2、元素的高度、寬度、行高以及頂和底邊距都可設置。

3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。

11、元素分類--內聯元素

在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的內聯元素（行內元素）（inline）元素。當然塊狀元素也可以通過代碼display:inline將元素設置為內聯元素。如下代碼就是將塊狀元素div轉換為內聯元素，從頁使用div元素具有內聯元素特點。

內聯元素特點：

1)和其他元素都在一行上；

2)元素的高度、寬度、行高及頂部和底部邊距不可設置；

3)元素的寬度就是它包含的文字或圖片的寬度，不可改變。

12、盒模型--邊框?

盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。

如下面代碼為div來設置邊框粗細為2px、樣式為實心的、顏色為紅色的邊框：

div{

???border:2px? solid? red;

}

上面是border代碼的縮寫形式，可以分開寫：

div{

???border-width:2px;

???border-style:solid;

???border-color:red;

}

注意：

1、border-style（邊框樣式）常見樣式有：

dashed（虛線）| dotted（點線）| solid（實線）。

2、border-color（邊框顏色）中的顏色可設置為十六進制顏色，如:

border-color:#888;//前面的井號不要忘掉。

3、border-width（邊框寬度）中的寬度也可以設置為：

thin | medium | thick（但不是很常用），最常還是用象素（px）。

總結

以上是生活随笔為你收集整理的css细节(实习第1天)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。