CSS介紹
CSS 指的是層疊樣式表* (Cascading Style Sheets), 描述了如何在屏幕、紙張或其他媒體上顯示 HTML 元素,節省了大量工作,并且可以同時控制多張網頁的布局
外部樣式表存儲在 CSS 文件中
CSS:也稱級聯樣式表。
CSS語法
選擇器指向您需要設置樣式的 HTML 元素。
聲明塊包含一條或多條用分號分隔的聲明。
每條聲明都包含一個 CSS 屬性名稱和一個值,以冒號分隔。
多條 CSS 聲明用分號分隔,聲明塊用花括號括起來。
示例:
在此例中,所有
元素都將居中對齊,并帶有紅色文本顏色:
p {color: red;text-align: center;
}
idea中建立css樣式
優先級
html與css優先規則:內聯樣式 > 外聯樣式
CSS 優先規則 :內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器
優先級使用
css外聯樣式:
<link href="css/myCSS.css" rel="stylesheet"/>
html5內聯樣式:
<!--內聯樣式-->
<style>div{border: 4px solid red;width: 300px;height: 300px;background: blue;}
</style>
優先級代碼示例
html5
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!--css樣式-->
<!--rel="stylesheet"不能省略-->
<link href="css/myCSS.css" rel="stylesheet"/>
<!--內聯樣式-->
<style>div{border: 4px solid red;width: 300px;height: 300px;background: blue;}
</style>
<body>
<div class="d1">DIV1</div>
<div class="d2">DIV2</div>
</body>
</html>
css
.d1{border: 1px solid red;width: 200px;height: 200px;background: blue;
}
.d2{border: 10px solid darkslategrey;width: 200px;height: 200px;background: yellow;
}
CSS常見屬性
內邊距:padding組件中元素到組件的邊距,元素到盒子的距離
外邊距:margin 盒子外面周邊的距離
一個盒子占用大小:盒子大小+外邊距大小