標籤：src 像素 span char 問題： 標籤 http com 選擇
CSS，全拼Cascading Style Sheets，層疊樣式表，用於控制html<body>的元素的樣式和布局。
一、CSS的三種引用方式
1.內嵌
<div style="width:200px;height:200px;color:red;background-color:blcak"></div>
內嵌 樣式為寬200像素，像素必須加px或者em或者百分比；寬度為200像素；字型顏色為紅色；背景顏色為黑色；可以無限添加屬性，用分號;隔開。
2習慣上加到<head>裡，也可以加到<body>裡。
<head>
<style type="text/css">
*{ *表示所有的，這個控制器會去掉所有元素的內外邊距
margin：0px;
padding:0px;
}
div{ 標籤選取器，通常用於取消<a>標籤樣式
width:200px; 這個標籤選取器會把所有DIV設定成200X200的紅色方塊。
height:200px;
background-color:red;
}
#ID{ id選取器 會把id為ID的元素改成這個選取器的樣式
id選取器的優先順序會高一點
}
.CLASS{ class選取器 會把class名為CLASS的元素改為這個樣式
}
以上幾個選取器比較常用
#ID span{ 子代選取器 會修改id為ID的標籤下的span標籤
一般用於修改某個id或者class下的標籤
}
.CLASS1,CLASS2 { 並欄選取器 會修改class為CLASS1和CLASS2的兩類標籤
可以同時修改多個class的標籤
}
並欄選取器還有一種類型 在div的class名中以空格並列多個class名 則該div會執行多個選取器的樣式
.c4{ }
.c5{ }
<div class="c4 c5"></dic> 該DIV應該在<body>內
</style>
</head>
3.從外部參考
引用格式為
<link type="text/css" rel="stylesheet" href="引用的檔案.css"
在css檔案裡 不需要加<style>標籤，直接寫選取器即可。
三種方式的優先順序依次降低，直接內嵌在標籤裡最高，在head裡寫其次，從外部參考最低。
三、課上練習
/*<style type="text/css" >原則上要加到head裡面 type屬性的意思是樣式表 可以不加*/ * { /* *表示所有的選取器 */ margin:0px 0px 10px 0px; padding:0px; } div { /*標籤選取器*/ width:100px; height:100px; background-color:red; } #d1 { /*ID選取器*/ background-color:blue; } #d2 span { /*子代選取器*/ color:white; } .c1 { /*class選取器*/ background-color:black; } .c2, .c3 { /*並欄選取器*/ background-color:yellow; } .c4 { background-color:cyan; } .c5 { color:red; } /*</style> 在樣式表裡面 style是不需要加的 直接寫選取器即可*/
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>樣式表練習</title> <link type="text/css" rel="stylesheet" href="css/css1.css" /> <!--link 連結器 type類型是文本/樣式 rel(relationship)關係是樣式表 用href定位連結的樣式表css1.css--></head><body> <div style="width:200px;height:100px;background-color:#b2b2b2"></div> <!--div單獨用無意義 必須加樣式style 屬性值可以無限加 用;隔開--> <div></div> <div id="d1"></div> <div id="d2"> <span>浮生半日閑</span> </div> <span>浮生半日閑</span> <div class="c1"></div> <div class="c2">C2</div> <div class="c3">C3</div> <div class="c4 c5">蝶魂</div> <!--優先順序問題：引用樣式表優先順序最低，然後是加在head裡的樣式 最高的是加在div標籤裡的樣式 head裡的樣式標籤 *（所有）是最低的 然後依次是標籤選取器，class選取器，ID選取器。--></body>
四、
HTML CSS 層疊樣式表 一
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
