Css與html三種結合方式 Css四種選擇器
阿新 • • 發佈：2018-12-26
一、css與html的結合
三種方式、html與css結合如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 此處是方式二的實現： <style type="text/css"> div{ border: 1px solid red; } span{ border: 2px solid blue; } </style> --> <title>html css</title> 此處是方式三的實現： <link rel="stylesheet" type="text/css" href="../css/1.css"> </head> <body> 方式一、在標籤的style屬性上設定”key:value value;”，修改標籤樣式。 例如：分別定義兩個 div、span標籤， 分別修改每個 div 標籤的樣式為：邊框1個畫素，實線，紅色。 此處是方式一的實現： <div style="border: 1px solid red;">我是div標籤1</div> <div style="border: 1px solid red">我是div標籤2</div> <div>我是div標籤3</div> <div>我是div標籤4</div> <span style="border: 1px solid red">我是span標籤1</span> <span>我是span標籤2</span> <span>我是span標籤3</span>
方式一問題：這種方式的缺點？
1.如果標籤多了。樣式多了。程式碼量非常龐大。
2.可讀性非常差。
3.Css程式碼沒什麼複用性可方言。
方式二、 在head標籤中，使用style標籤來定義各種自己需要的css樣式。
格式如下：
xxx {
Key : value value;
}
問題：這種方式的缺點。
1.只能在同一頁面內複用程式碼，不能在多個頁面中複用css程式碼。
2.維護起來不方便，實際的專案中會有成千上萬的頁面，要到每個頁面中去修改。工作量太大了。
方式三、 使用html 的實現：
<link rel="stylesheet" type="text/css" href="./styles.css"> 標籤 匯入 css 樣式檔案。 標籤名選擇器格式: 標籤名{ css程式碼 }
二、css的三種選擇器和組合選擇器
（一）、標籤名選擇器
標籤名選擇器格式：
標籤名{
CSS
}
標籤名舉例實現：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> /* css選擇器一、標籤名選擇器 需求1：在所有div標籤上修改字型顏色為藍色，字型大小30個畫素。邊框為1畫素黃色實線。 並且修改所有span 標籤的字型顏色為黃色，字型大小20個畫素。邊框為5畫素藍色虛線。 */ div{ border: 1px yellow solid; color: blue; font-size: 30px; } span { border: 5px blue dashed; color: yellow; font-size: 20px; } </style> </head> <body> <!-- 例1：在所有div標籤上修改字型顏色為藍色，字型大小30個畫素。邊框為1畫素黃色實線。 並且修改所有span 標籤的字型顏色為黃色，字型大小20個畫素。邊框為5畫素藍色虛線。 --> <div>我是div標籤1</div><br /> <div>我是div標籤2</div> <span>我是span標籤1</span> <span>我是span標籤2</span> </body> </html>
（二）id選擇器
格式：
ID選擇器格式：
#id屬性值{
CSS程式碼
}
<style type="text/css">
#id004{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
#id003{
color: red;
font-size: 20px;
border: dotted blue 5px;
}
</style>
<!-- id選擇器
例1：分別定義兩個 div 標籤，
第一個div 標籤定義 id 為 id004 ，然後根據id 屬性定義css樣式修改字型顏色為藍色，
字型大小30個畫素。邊框為1畫素黃色實線。
第二個span 標籤定義 id 為 id003 ，然後根據id 屬性定義css樣式 修改的字型顏色為紅色，字型大小20個畫素。邊框為5畫素藍色點線。
-->
</head>
<body>
<div id="id004">div標籤1</div>
<span id="id001">span標籤1</span>
<div id="id002">div標籤2</div>
<span id="id003">span標籤3</span>
</body>
</html>
（三）class選擇器
型別選擇器的格式：
.class屬性值{
CSS程式碼
}
舉例如下：
需求1：修改 class 屬性值為 class01的 span 或 div 標籤，
字型顏色為藍色，字型大小30個畫素。邊框為1畫素黃色實線。
需求2：修改 class 屬性值為 class04的 div 或 span標籤，
字型顏色為灰色，字型大小26個畫素。邊框為1畫素紅色實線。
<style type="text/css">
.class001{
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
.class004{
clolr: grey;
font-size: 26px;
border: 1px red solid;
}
</style>
</head>
<body>
<div class="class004">div標籤1 class004</div>
<span class="class001">span標籤1 class001</span>
<div class="class003">div標籤2 class003</div>
<span class="class002">span標籤2 class002</span>
<div class="class004">div標籤3 class004</div>
<span class="class001">span標籤3 class001</span>
</body>
</html>
（四）組合選擇器
組合選擇器格式：
選擇器1，選擇器2{
CSS程式碼
}
如下：
<!--
例子：修改 class="class01" 的div 標籤 和 id="id01"
所有的span標籤，字型顏色為藍色，字型大小20個畫素。邊框為1畫素黃色實線。
-->
<style type="text/css">
.class01,#id01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<div class="class002">div標籤2 class002</div>
<span id="id01">span標籤1 id01</span>
<div class="class01">div標籤4 class001</div>
<span id="id03">span標籤3 id01</span>
<div id="id02">div標籤2 id02</div>
<span class="class002">span標籤2 class002</span>
<div class="class01">div標籤3 class001</div>
</body>
</html>