智慧的网络爬虫之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;
}
