HTML CSS 層疊樣式表 一
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 層疊樣式表 一