CSS入門
什麼是CSS
CSS的全稱是Cascading Style Sheets，層疊樣式表
CSS的作用是：可以給網頁中的每一個元素設置樣式，讓網頁更加精美，完全沒有使用CSS的網頁：基本就是一堆從上到下、從左到右挨在一起的文字和圖片。
CSS官方文檔
https://www.w3.org/standards/techs/css
https://www.w3.org/TR/CSS22/
https://www.w3.org/TR/CSS22/propidx.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS
CSS樣式的書寫格式
冒號:左邊是樣式名，冒號:右邊是樣式值
CSS引入方式
CSS提供了3種方法，可以將CSS樣式應用到元素上
- 內聯樣式（inline style）
- 文檔樣式表（document style sheet）、內嵌樣式表（embed style sheet）
- 外部樣式表（external style sheet）
內聯樣式表
將樣式直接寫在元素的style屬性上
<div style="color: brown;background: burlywood;">文字內容</div>
內嵌樣式表
將樣式寫在head元素的style元素中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
選擇器{
屬性名：屬性值；
}
*/
/*單個選擇器*/
h1{
color: burlywood;
font-size: 50px;
}
/* 並集選擇器 */
h1,p,a{
color:darkgreen;
}
/*類選擇器*/
.red{
color: red;
}
</style>
</head>
<body>
<h1>網頁的標題</h1>
<p>網頁段落</p>
<a href="#">百度一下</a>
<div class="red">hahah</div>
</body>
</html>
外部樣式表
樣式寫在單獨的CSS文件中，然後在當前網頁的head元素中用link元素引用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 使用link引入
<link rel="stylesheet" href="css/03_css引入_外聯樣式表.css"> -->
<!-- @import -->
<style>
@import url(css/03_css引入_外聯樣式表.css);
</style>
</head>
<body>
<!--外部樣式表-->
<h1>網頁的標題</h1>
<p>網頁段落</p>
<a href="#">百度一下</a>
<div>hahah</div>
</body>
</html>
CSS
/*指定css文件編碼*/
@charset "utf-8"
/*單個選擇器*/
h1{
color: burlywood;
font-size: 50px;
}
/* 並集選擇器 */
h1,p,a{
color:darkgreen;
}
/*類選擇器*/
.red{
color: red;
}
如果兩個CSS文件中有相同的樣式，後面的會層疊前面的。
<!-- 使用link引入 -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/03_css引入_外聯樣式表.css">
CSS選擇器（selector）
什麼是CSS選擇器
按照一定的規則選出符合條件的元素，爲之添加CSS樣式
歸類
- 通用選擇器（universal selector）
- 元素選擇器（type selectors）
- 類選擇器（class selectors）
- id選擇器（id selectors）
- 屬性選擇器（attribute selectors）
- 組合（combinators）
- 僞類（pseudo-classes）
- 僞元素（pseudo-elements）
通用選擇器（universal selector）
<style>
/*通配選擇器*/
*{
/* color:darkgreen; */
background-color:red;
}
</style>
元素選擇器（type selectors）
div{
background-color: red;
}
類選擇器（class selectors）
.one{
color: royalblue;
}
<div class="one">我是div元素</div>
class&id
class注意點
- 一個元素可以有多個class值，每個class之間用空格隔開
- class值如果由多個單詞組成，單詞之間可以用中劃線-、下劃線_連接，也可以使用駝峯標識
- 最好不要用標籤名作爲class值
id選擇器（id selectors）
id注意點
- 一個HTML文檔裏面的id值是唯一的，不能重複
- id值如果由多個單詞組成，單詞之間可以用中劃線-、下劃線_連接，也可以使用駝峯標識
- 最好不要用標籤名作爲id值
設置網頁圖標
<link rel="shortcut icon" href="https://g.csdnimg.cn/static/logo/favicon.ico" type="image/x-icon">
- link元素的rel屬性不能省略，用來指定文檔與鏈接資源的關係
- 一般rel若確定，相應的type也會默認確定，所以可以省略type
- 網頁圖標支持的圖片格式是ico、png，常用大小是16x16、24x24、32x32（單位：像素）
駝峯標識
- 小駝峯: 第一個單詞的首字母小寫, 後面遇到一個單詞首字母就大寫
- html class小駝峯
- js 函數名字
- 大駝峯: 所有的單詞首字母都大寫
- js中定義類的名字
span元素
- 默認情況下，跟普通文本幾乎沒差別
- 用於區分特殊文本和普通文本，比如用來顯示一些關鍵字