css小白一枚妒御。對于css是真心不懂久锥,所以這篇文章也是看著網(wǎng)上的資料,邊理解邊整理的先壕,受益良多瘩扼。
1 css樣式控制html文件的方式
1.1 內(nèi)嵌式
CSS一般位于HTML文件的頭部,即<head>
與</head>
標記內(nèi)垃僚,并且以<style>
開始集绰,以</style>
結(jié)束,例如如下的代碼定義了<body>
標記使用的字號:
<style type="text/css">
body {
font-size: 10px;
}
</style>
1.2 行內(nèi)樣式
采用<style=" ">
的格式把樣式寫在HTML中的任意行內(nèi)谆棺,“=”右邊的屬性設(shè)置放入雙引號中栽燕,多個屬性用“;”分隔。
例如改淑,下面的樣式控制段落文字的字號和顏色:
<div style="font-size: 10pt; color: #FF6600;"></div>
1.3 鏈接式
CSS的定義既可以在HTML文檔內(nèi)部碍岔,也可以單獨在外部文件(例如style.css)中定義。把編輯好的CSS文檔保存成外部文件朵夏,然后在<head>
中添加如下所示的代碼:
<link rel="stylesheet" href="style.css" type="text/css">
1.4 導(dǎo)入式
導(dǎo)入樣式和鏈接樣式的功能基本相同,只是語法和運作方
式上略有區(qū)別.
導(dǎo)入的樣式表在HTML文件初始化時,會被導(dǎo)入到HTML
文件內(nèi),作為文件的一部分,類似內(nèi)嵌式的效果蔼啦。
鏈接式樣式表則是在HTML的標記需要格式時才以鏈接的方式引用。
導(dǎo)如樣式表常用格式:
@import url(sheet1.css)
@import url(“sheet1.css”)
@import url(‘sheet1.css’)
@import sheet1.css
@import “sheet1.css”
@import ‘sheet1.css’
Css樣式四種嵌入方式優(yōu)先級
行內(nèi)樣式優(yōu)先級最高,
其次是采用<link>
標記的鏈接式,
再次是位于<style></style>
之間的內(nèi)嵌式,
最后是@import
導(dǎo)入式.
2 css選擇器
選擇器(selector)是CSS中很重要的概念,所有HTML
語言中的標記都是通過不同的CSS選擇器進行控制的仰猖。
2.1 標記選擇器
一個HTML頁面由很多不同標記組成捏肢,而CSS標記選擇器就是聲明哪些標記采用哪種CSS樣式。
2.2 類別選擇器
所有標記都可通過class屬性設(shè)置類選擇器
例如:
<html>
<head> <title>class選擇器</title>
<style type="text/css">
.one{
color:red; /* 紅色 */
font-size:18px; } /* 文字大小 */
.two{
color:green; /* 綠色 */
font-size:20px; } /* 文字大小 */
.three{
color:cyan; /* 青色 */
font-size:22px; } /* 文字大小 */
</style>
</head>
<body>
<p class="one">class選擇器1</p>
<p class="two">class選擇器2</p>
<p class="three">class選擇器3</p>
<h3 class="two">h3同樣適用</h3>
</body>
</html>
顯示如下:
2.3 ID選擇器
ID選擇器的使用方法跟class選擇器基本相同饥侵,不同之處在于ID選擇器只能在HTML頁面中使用一次鸵赫,因此其針對性更強。在HTML的標記中只需要利用id屬性躏升,就可以直接調(diào)用CSS中的ID選擇器辩棒,格式如下:
例如:
<html>
<head>
<style type="text/css">
#cuti {font-weight:bold;}
</style>
</head>
<body>
<p id="cuti">這是一行加粗的文本</p>
<p>這是一行普通文本</p>
</body>
</html>
顯示如下: