css代碼編寫方式
- 嵌入編寫 將css代碼寫在html代碼文件中 必須將css代碼寫在style標記中（style標記是head的子標記）
- 外部編寫 將css代碼寫在單獨的css文件中（嵌入編寫和外部編寫語法一致）
html代碼中需要使用link標記將css文件引入
- 推薦使用外部編寫
- 一個css代碼文件中的樣式可以被多個html文件使用
- 代碼統一 風格統一
- html和css代碼徹底的分離 便于各自的代碼維護
css基本語法
選擇器{
屬性名：屬性值；
}
（選擇器 選擇的是需要樣式控制的標記）
- 選擇器的分類
- 標記選擇器 名字就是某一個標記的名字
標記選擇器可以一次選擇多個相同類型的標記 - 類選擇器（最常使用 ）名字是自定義的但是名字前必須加“.”（不能是數字開頭）
標記想要被類選擇器選擇到必須設置class屬性
類選擇器可以一次選擇多個不同類型的標記 - id選擇器 選擇器的名字是某個標記的id屬性值 名字前必須加“#”（不能是數字開頭）
id選擇器一次只能選擇一個標記
只想設置單獨一個標記時才會使用id選擇器
- css代碼具有層疊式特點 多個樣式代碼可以疊加在一個標記上同時生效
嵌入式編寫范例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- css代碼需要寫在style標記中-->
<style type="text/css">
h1{
color: green;
/* color 文字顏色樣式 */
background-color: orange;
/* background-color 背景顏色樣式 */
text-align: center;
/* text-align 文本對齊方式 */
}
h2{
color: blue;
text-align: right;
}
.x{
color: gray;
}
/* 類選擇器 */
#a2{
font-size: 50px;
}
/* id選擇器 */
</style>
</head>
<body>
<h1>我需要梅花</h1>
<h2>我不需要美化</h2>
<hr >
<big class="x">內容變大</big>
<small class="x">內容變小</small>
<strong id="a2">內容加粗</strong>
<!-- id屬性具備唯一性 標記設置id屬性 屬性值不能重復 -->
</body>
</html>
外部編寫范例
- css外部編寫.css
/* 嵌入編寫和外部編寫語法一致 */
.blue{
color: skyblue;
}
.nosmall{
font-size: 100px;
}
.border{
border: 10px dashed orange;
/* border 邊框樣式 需要三個值 粗細 樣式(虛實線) 顏色*/
/* solid實線框 dashed虛線框 */
}
#bg{
background-color: grey;
}
- css外部使用1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="外部編寫.css"/>
</head>
<body>
<em class="blue nosmall border" id="bg">內容傾斜</em>
</body>
</html>
- css外部使用2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="外部編寫.css"/>
</head>
<body>
<h2 class="blue">內容烏蘇所謂些啥都行</h2>
</body>
</html>
