CSS簡介 CSS引入方式 CSS語法 基礎選擇器
阿新 • • 發佈：2021-01-09
-
cascanding style sheets （層疊樣式表）（級聯樣式表）
-
作用：
-
文字內容：文字大小，文字顏色，對齊方式。。。。
-
標籤的樣式 ： 背景色，邊框寬度顏色
-
頁面的佈局 ： 浮動，定位
-
css引入方式
-
行內式
-
行內式只作用於當前標籤
-
<div style="width: 200px;height: 200px;">1</div> -
特點：程式碼冗餘，結構層與表示層不分離。
-
-
內嵌式（文字內部引入）
-
只作用於當前文件
-
<head>
<style>
/* 標籤選擇器 */
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head> -
特點：程式碼相對清晰，結構層與表示層不完全分離
-
-
外鏈式（文字外部引入）
-
可以作用於任何文件，需要link標籤引入
-
<link rel="stylesheet" href="./css/index.css"> -
特點：程式碼非常清晰，結構層與表示層完全分離
-
css語法
-
屬性名：屬性值；屬性名：屬性值；屬性名：屬性值；屬性名：屬性值；。。。
-
屬性名：屬性值；-----一個css樣式宣告
-
color:red;
css引入方式優先順序
-
行內式最優先，內嵌式和外鏈式後引入生效
基礎選擇器
-
萬用字元選擇器
-
格式：
* {
屬性名:屬性值;
屬性名:屬性值;
屬性名:屬性值;
。
。
}
* 代表所有標籤
-
-
標籤選擇器
-
格式：
關鍵字 {
屬性名:屬性值;
屬性名:屬性值;
屬性名:屬性值;
。
。
}
-
-
類選擇器
-
格式：
.類名 {
屬性名:屬性值;
屬性名:屬性值;
屬性名:屬性值;
。
。
}
-
-
id選擇器
-
格式
#id名 {
屬性名:屬性值;
屬性名:屬性值;
屬性名:屬性值;
。
。
}
-
-
優先順序
-
id選擇器>類選擇器>標籤選擇器>萬用字元選擇器
-
-