CSS技術（筆記）

時間 2020-03-27

標籤 css 技術筆記欄目 CSS 简体版

原文原文鏈接

2.1 CSS技術
1.簡介：它是疊層樣式表，cascading stytle sheet ，它的做用是加強網頁的顯示效果。
目的：使用css讓網頁內容和樣式分離，便於網站代碼後期的維護。
書寫規範：選擇器{屬性1:值1;屬性2:值2;} 提示：若是值爲若干單詞，則要給值加引號
實例：經過css樣式<div>標記進行設置
div{border:1px solid red;width:600px;height:400px;}
其中div爲選擇器，表示css樣式做用的HTML對象。Border屬性有三個值「1px solid red」
分爲表示1像素、實心邊框線、紅色。
CSS樣式的引入方式
注意：css不能單獨使用，必須和html網頁配合使用，引入css的四種方式：鏈入式、內嵌式、行內式、導入式。（內嵌式和鏈入式比較經常使用）
若是是比較小範圍的使用CSS，或者單個頁面使用，內嵌式比較方便；若是是大網站爲了方便維護和管理，就要使用鏈入式。css

行內式：直接在html標記裏面使用css樣式
語法：<div style="background-color: red">div的行內式效果</div>
內嵌式：
（1）語法：<style type="text/css">
css代碼
</style>
*注意：代碼的位置必定要放在<head>標記裏面。
例如：<html>
<head>
<meta charset="utf-8">
<title>css樣式的引入方式</title>
<style type="text/css">
h2 {text-align:center;}
div{
border:1px solid red;
width:300px;
height:200px;
color:bule;
}
</style>
</head>
<body>

<div style="background-color: red">div的行內式效果</div>

<h2>內嵌式css樣式</h2>
<div>使用style標記來實現內嵌式的效果，它的位置要放在<head>標記裏面，title的後面
</body>
</html>
3.鏈入式：
語法：<link type=’’text/css’’ href=’’外部css文件的名稱/路徑’’ rel=」stylesheet」><link>
步驟：
（2）建立一個css文件
div {
background-color:red ;
}

（3）在網頁裏面使用link標籤來引入外部的css文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link type="text/css" href="鏈入式.css" rel="stylesheet"</link>
</head>
<body>
<div>鏈入式實現的效果</div>
</body>
</html>
4.導入式：
（4）語法：<style type=’’text/css’’>br/>@import(「外部css的url」)
</style>
2.2 CSS選擇器和經常使用的屬性
1.標記選擇器：直接使用html標記做爲選擇器
好比：<div>標記選擇器</div>
語法：div{屬性:值;} html

類選擇器：直接使用HTML標記的class屬性的值做爲選擇器
好比：<div class=」divclass」>class選擇器</div>
語法：.divClass {屬性:值;}
ID選擇器：直接使用html標記的ID屬性的值做爲選擇器
好比：<div id=」divId」>id選擇器</div> 好比都寫在body的裏面、
語法：#divId {屬性:值;} 語法都寫在head裏面。Title的後面。
id屬性的值必須惟一
通配符選擇器:讓全部的標記顯示相同的樣式。
語法： *{屬性:值;}
選擇器之間的優先級：id選擇器>類選擇器>標記選擇器>通配符選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css選擇器</title>
<style type='text/css'>
/標籤選擇器：標籤+{}；在此設置的標籤屬性，瀏覽器打開此頁面時，選擇全部此標籤進行屬性設置/
div {background-color:red;}
/類選擇器：.+類名+{}；在此設置的類屬性，瀏覽器打開此頁面時，選擇全部此類進行屬性設置，優先級高於標籤選擇器/
.divClass {background-color:purple;}
/id選擇器：#+id名+{}；在此設置的id屬性，瀏覽器打開此頁面時，選擇此id進行屬性設置，優先級高於類選擇器和標籤選擇器/#divId {background-color:green;}</style></head><body><div>標記選擇器</div><div class="divClass">測試--選擇器</div><div class="divClass">標記選擇器</div><div id="divId">標記選擇器</div></body></html>

相關標籤/搜索

每日一句

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