智慧的網絡爬蟲之CSS概述
? CSS 是“Cascading Style Sheet”的縮寫，中文意思為“層疊樣式表”，用于描述網頁的表現形式。如網頁元素的位置、大小、顏色等。css的主要作用是定義網頁的樣式。
CSS樣式
1. 行內樣式
行內樣式：直接定義在
HTML標簽的style屬性中
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!--行內樣式--><p style="color: green;">段落</p><p style="color: blueviolet;">段落</p><p style="color: plum;">段落</p></body>
</html>
2. 內嵌樣式
在
HTML頭部（<head>標簽內）的<style>標簽中定義CSS樣式。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p{background-color: black;color: blue;}</style>
</head>
<body>
<div><p>第一段落</p><p>第二段落</p><span>一個span標簽</span>
</div>
</body>
</html>
3. 外部樣式
將
CSS樣式定義在一個.css格式的文件中，然后使用 HTML 的<link>標簽將這個.css格式的樣式文件應用到HTML文檔中。
css文件
div{background: aquamarine;
}
p{color: red;background: black;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="d1.css">
</head>
<body>
<div><p>這是第一段落</p><p>這是第二段落</p><span>這是一個span標簽</span>
</div>
</body>
</html>
樣式優先級
行內樣式 > 內嵌樣式 > 外部樣式 注意：盡量不要在同一個Html文件中使用多種樣式
- 如果樣式是固定并且不修改并且很少情況，使用內部樣式
- 如果樣式針對當前
html頁面做的樣式，并且代碼量不是很大的的情況下， 使用內聯樣式 - 如果樣式是通用，且
css代碼很多，使用外部樣式，需要創建一個css文件，引入。
CSS選擇器
1. 通用選擇器
通用選擇器用星號
*表示，它不匹配某個特定的HTML元素，而是匹配HTML文檔中的每個元素,開發中通常使用通用選擇器來清除HTML元素中默認的內外邊距
通用選擇器格式：*{}* {margin: 0 auto;padding: 0;
}
2. 標簽選擇器
根據標簽的名字 進行選擇匹配
標簽選擇器格式：標簽名{}p{color: red
}
span{color: blue
}
3. ID選擇器/類選擇器
根據標簽的
ID屬性或者class屬性來匹配，ID選擇器的定義需要用到#，后面緊跟ID屬性值，類選擇器的定義需要用到一個英文的句號.，后面緊跟class屬性的值
ID選擇器格式： #ID名{}
#d1{background: aquamarine;
}類選擇器格式：.類名{}
.c1{background: black;
}<div><span id="d1">ID選擇器</span><span class="c1">類選擇器</span>
</div>4. 層級選擇器
- 后代選擇器
- 子選擇器
<div><span id="d1">ID選擇器</span><br><span class="c1">類選擇器</span><br><a href="#"><span>這是一個超鏈接</span></a><ul><li><span>這是第一項</span></li><li><span>這是第二項</span></li></ul>
</div>span標簽是div標簽的后代標簽，a標簽也是div的后代標簽后代選擇器的格式： 父標簽名 子標簽名{} 通過父標簽去定位找到子標簽 能夠匹配到div下面所有符合條件的標簽
子代選擇器的格式： 父標簽 > 子標簽{} 通過父標簽去定位找到子標簽 能夠匹配到div下直系的子標簽后代選擇器使用
div span{color: red
}子代選擇器使用
div > span{background: black;
}
5. 組合選擇器
組合選擇器可以將同樣的樣式應用到多個選擇器中，每個選擇器中用逗號隔開
<div><span id="d1">ID選擇器</span><br><span class="c1">類選擇器</span><br><a href="#"><span>這是一個超鏈接</span></a><ul><li><span>這是第一項</span></li><li><span>這是第二項</span></li></ul>
</div>樣式代碼
span,a{color:red
} /* 該樣式將會運用在所有的span標簽和a標簽中 */#d1,.c1{color:blue
} /* 該樣式將會運用在所有id屬性為d1,class屬性為c1的標簽中 */
6、偽類選擇器
偽類選擇器是一種特殊的選擇器，可以用來選擇處于特定狀態的元素，例如未被訪問的鏈接、已被訪問的鏈接、鼠標懸停在上面的元素、活動元素和獲得焦點的表單元素等
:link偽類選擇器：選擇所有未被訪問的鏈接。:visited偽類選擇器：選擇所有已被訪問的鏈接。:hover偽類選擇器：選擇鼠標懸停在上面的元素。:active偽類選擇器：選擇活動元素，即鼠標按下未彈起的元素。:focus偽類選擇器：選擇獲得焦點的元素，一般是表單元素，如類。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>span:hover{color: red;}a:link{color: red;}a:active{color: blue;}a:visited{color: yellow;}a{font-size: larger;}</style>
</head>
<body>
<div class="f"><div class="box1"><span>這是一個span標簽</span></div><div class="box2"><a href="#">這是一個鏈接</a></div>
</div>
</body>
</html>
CSS盒子模型
盒子模型是網頁設計中經常用到的一種思維模型，由四個部分構成，從內到外分別為內容區（
content）、內邊距（padding）、邊框（border）和外邊距（margin），CSS為這四個部分提供了一系列相關屬性，通過對這些屬性的設置可以豐富盒子的表現效果。
盒子的組成
- 外邊距：
margin - 內邊距：
padding - 邊框：
border - 內容：
content
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Title</title><style>div {background-color: lightgrey;width: 300px;border: 25px solid green;padding: 25px;margin: 25px;}</style>
</head>
<body><h2>盒子模型演示</h2><p>CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。</p><div>這里是盒子內的實際內容。有 25px 內間距，25px 外間距、25px 綠色邊框。</div>
</body>
</html>
1. margin
- 盒子的外邊距，是透明的 只能設置他的邊距
margin包含了上下左右四條邊，開發者可以單獨設置每一條邊的邊距。
margin-top：上邊距
margin-buttom：下邊距
margin-left：左邊距
margin-right：右邊距
2. padding
-
盒子的內邊距
-
與外邊距不同，
padding不是只能完全透明的，可以設置背景顏色和圖片。 -
與
margin類似，padding包含了上下左右四條邊，開發者可以單獨設置每一條邊的邊距。
padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充
3.border
border表示盒子的邊界，它可以設置成可見的，樣式多樣的。border像margin和padding一樣可以分別對每一條邊進行設置。
border-top：上邊界
border-bottom：下邊界
border-left：左邊界
border-right：右邊界
浮動
浮動可以使一個元素脫離自己原本的位置，并在父元素的內容區中向左或向右移動，直到碰到父元素內容區的邊界或者其它浮動元素為止
float屬性有三個可選值，如下表所示：
| 值 | 描述 |
|---|---|
left | 元素向左浮動 |
right | 元素向右浮動 |
none | 默認值，元素不浮動 |
當父元素未設置高度時，父元素的高度會取決于子元素的高度。當子元素設置浮動后，會脫離文檔流，造成子元素的內容在父元素外出現，這種情況下，父元素的高度可能會塌陷到0
<!DOCTYPE html>
<html>
<head><style>.box{border: 2px solid red;height: 400px;width: 312px;}.div1{height: 100px;width: 100px;float: left;border: 2px solid yellow;}.div2{float: left;height: 100px;width: 100px;border: 2px solid blue;}.div3{height: 100px;width: 100px;float: left;border: 2px solid black;}</style>
</head>
<body><div class="box"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div></div>
</body>
</html>
清除浮動
元素浮動之后，會對周圍的元素造成一定的影響，為了消除這種影響您可以使用 clear 屬性來清除浮動，屬性的可選值如下：
| 值 | 描述 |
|---|---|
left | 左側不允許浮動元素 |
right | 右側不允許浮動元素 |
both | 左右兩側均不允許浮動元素 |
定位
CSS中的position屬性用來設置元素在頁面中的位置，通過該屬性您可以把任何屬性放置在任何您認為合適的位置。position常用的屬性值有relative,absolute,fixed
| 屬性名 | 描述 |
|---|---|
position: relative | 相對定位，即相對于元素的正常位置進行定位，不會對其他元素造成影響 |
position: absolute | 絕對定位，相對于第一個帶有定位屬性的父元素進行定位 默認是瀏覽器 |
position: fixed | 固定定位，相對于瀏覽器的創建進行定位 |
相對定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box1{width: 100px;height: 100px;background-color: black;opacity: 0.5; /*透明度*/position: relative;left: 150px;top: 150px;}.box2{width: 200px;height: 200px;background-color: green;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>
絕對定位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box1{width: 100px;height: 100px;background-color: black;opacity: 0.5; /*絕對定位 不會保留原來的位*/position: absolute;left: 150px;top: 150px;}.box2{width: 200px;height: 200px;background-color: green;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>
th: 100px;
height: 100px;
background-color: black;
opacity: 0.5;
/絕對定位 不會保留原來的位/
position: absolute;
left: 150px;
top: 150px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
