HTML5教程
第一章 爬虫基础-前端CSS 2021-09-03
爬虫基础系列文章
介绍爬虫基础知识，包括网络，前端界面HTML,CSS, JS 等。
第一章 爬虫基础-网络传输协议 2021-09-03
第一章 爬虫基础-前端HTML 2021-09-03
前端CSS
- 爬虫基础系列文章
- 前言
- 1 CSS是什么
- 2 CSS四种引入样式
- 2.1 行内样式（内联式）
- 2.2 其余3种样式
- 3 CSS文本属性
- 3.1 CSS常用的文本样式
- 3.2 CSS 颜色表示
- 4 CSS选择器
- 4.1 ID、标签、类选择器
- 4.2 层级选择器
- 4.3 伪类、伪元素选择器
- 5 盒子模型
- 5.1 盒子相关设置
- 6 backgroud属性
- 7 CSS元素溢出
- 7.1 overflow参数：
- 8 浮动
- 8.1浮动特点：
前言
重点掌握：
1、掌握CSS中的各种选择器
2、熟悉CSS基础样式
1 CSS是什么
CSS是一种用来表现**HTML文件样式**的语言。CSS不仅可 以静态地修饰网页，还可以配合各种脚本语言动态地对 网页各元素进行格式化。CSS 能够对网页中元素位置的 排版进行像素级精确控制，支持几乎所有的字体字号样 式，拥有对网页对象和模型样式编辑的能力。
2 CSS四种引入样式
基本用法: 选择器 { 属性：值 }
2.1 行内样式（内联式）
在标签内使用style属性指定css代码，只能改变当前标签的样式。不能批量对某个标签生效。
<div style="color:red;">hello css</div>
2.2 其余3种样式
- 嵌入式：直接在html标签中的head的style属性写上样式 “属性1:值1;属性2: 值2;…”。 仅对当前页面生效。
- 外联式: 也可通过link标签，链接外部样式到页面中， 此为外联式， 所有的CSS 代码存在CSS文件中,便于维护,这个最常用 。 通过link 的
- 导入样式: import 是CSS 的写法, CSS2.1出现的概念, 存在一定的兼容性。
3 CSS文本属性
3.1 CSS常用的文本样式
-
color 设置文字的颜色，如： color:yellow;
-
font-size 设置文字的大小，如：font-size:15px;
-
font-family 设置文字的字体，如：font-family:‘微软雅黑’;
-
font-style 设置字体是否倾斜，如：font- style:‘normal’; 设置不倾斜，默认设置; font- style:‘italic’;设置文字倾斜
-
font-weight 设置文字是否加粗，如：font- weight:bold; 设置加粗 ; font-weight:normal 设置不加粗
-
line-height 设置文字的行高，设置行高相当于在每行文 字的上下同时加间距， 如：line-height:24px; 注意是本行文字的底部到下一行文字的底部算完整的行高
-
font: 同时设置文字的几个属性，建议按照如下顺序写： 是否加粗 字号/行高 字体；如： font:normal 24px/48px ‘宋体’;
-
text-decoration 设置文字的下划线，如：text- decoration:none; 将文字下划线去掉
-
text-indent 设置文字首行缩进，如：text- indent:24px; 设置文字首行缩进24px
-
text-align 设置文字水平对齐方式，如text- align:center 设置文字水平居中;
3.2 CSS 颜色表示
- 颜色英文名字表示，比如：green 绿色，red 红色
- rgb三原色表示，比如：rgb(0,0,0) 黑色， rbg(0,0,255) 蓝色
- 16进制数值表示，比如： #00FF00 绿色，#FFFF00 黄色
4 CSS选择器
4.1 ID、标签、类选择器
过id名来选择元素，元素的id名称不能重复，所以使 用id作为选择器只能对应一个页面上的元素，不能服 用。id一般来说是给程序使用，不推荐作为CSS选择器使 用。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器*/
div { color: blue;}
/*id 选择器*/
#box1 {color: red;}
/*类选择器*/
.b {color: blue}
.r {color: red;
font-size: 36px}
</style>
</head>
<body>
<div id="box">1</div>
<div id="box1">2</div>
<p class="b">字体为蓝色</p>
<p class="r">字体为？色</p>
<!-- 当多个类选择器同事修改一个标签的属性时, 会选择CSS样式中类选择器中的最后一个-->
<p class="r b">你猜我是什么颜色</p>
</body>
4.2 层级选择器
层级选择器主要是用来选择父元素下的子元素，或者子元素下的子元素，可以和标签元素结合使用，减少命名，也可以通过层级，防止命名冲突。综合使用以上三种选择器， .box1 p{color: gold;} box 下的 p 标签。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{color: red;}
.box1 p{color: gold;}
</style>
</head>
<body>
<div class="box1">
<p>我是box1中的P标签</p>
</div>
<p>我是单独的外部的P标签</p>
<div class="box2">
<p>P标签</p>
</div>
</body>
4.3 伪类、伪元素选择器
- 常用的伪类选择器 hover：设置当鼠标悬浮在元素上的时候的状态
- 伪元素选择器before和after：通过样式往标签中插入内容
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.a{color: blue}
.a:hover{
color: red;
}
.b:before{
content: "插入在前";
}
.c:after{
content: "插入在后";
}
</style>
</head>
<body>
<p class="a">悬浮以后颜色变红色</p>
<p class="b">before</p>
<p class="c">after</p>
</body>
代码效果呈现：
5 盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
设置对应的样式分别为：
- 盒子的宽度(width)
- 盒子的高度(height)
- 盒子内的内容和边框之间的间距(padding)
- 盒子的边框(border)
- 盒子与盒子之间的间距(margin)。
盒子的真实大小是：
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
5.1 盒子相关设置
设置宽高（width，height）：不是整个盒子的宽度、高度，指的内容的的宽度、高度。
设置内间距padding， padding同样可以指定设置某一个边，但是也可以全部都设置，
border-top-color: blue; /*设置顶部边框 的颜色为蓝色*/
border-top-width: 10px; /*设置顶部边框 线条粗细为10px*/
/*常用的有solid(实线) dashed(虚线) dotted(点线)*/
border-top-style: solid; /*设置顶部边 框线条为实线*/
border-top: blue 10px solid; /*三个顺序可以变 换*/
border: blue 10px solid; /*四个边设置的一样可以直接*/
compadding-top：30px; /* 设置顶部内间距为30px */
padding-left: 30px; /* 设置左边内间距为30px */
padding-right: 50px; /* 设置右边内间距为50px */
padding-bottom: 50px; /* 设置底部内间距为50px; */
/*padding的4个值是有特定位置的，按照顺时针的方向设置，分别是 上、右、下、左*/
padding: 30px 50px 50px 30px;
/*3个值*/ /*设置顶部内边距为30px，左右内边距为50px，底部内边距为30px*/
padding: 30px 50px 30px;
/*2个值*/ /*设置上下内边距为30px，左右内边距为50px*/
padding: 30px 50px;
/*一个值*/ /*设置四边内边距都为30px */
padding: 30px;
功能实现：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 556px;
height: 556px;
border: 2px red solid;
padding-left: 20px;
padding-right: 20px;
}
.title{
border-bottom: 2px red solid;
padding: 0;
line-height: 48px;
}
ul{
padding: 0;
}
li{
list-style: none;
}
.s{
margin-bottom: 14px;
height: 14px;
line-height: 14px;
border-bottom: 1px dashed black;
}
</style>
</head>
<body>
<div class="box1">
<div class="title">科技滚动新闻</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li class="s"></li>
</ul>
</div>
6 backgroud属性
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的。background可以分解为以下几个选项：
- background-color 设置背景颜色
- background-image 设置背景图片地址
- background-repeat 设置背景图片如何重复平铺
- background-position 设置背景图片的位置
- background-attachment 设置背景图片是固定还是随着页面滚动条滚动
而在实际工作中，会将上面的几个合并到一起来写，而且基本上都是这么来用的，这样做的性能会更好，兼容性也会更高。
<style>
div {
width: 800px;
height: 800px;
background: red url('img.png') center fixed;
/*“red”设置background-color；
“url(bg.jpg)”是设置background-image；
“no-repeat”是设置background-repeat；
“left center”是设置background-position；
“fixed”是设置background-attachment 每个设置之间用空格隔开，
不需要设置的可以不写，不写的 会使用默认值。 */
}
</style>
7 CSS元素溢出
当子元素所需大小超过了父元素的大小时，就会出现元素溢出的现象，此时就需要通过设置父元素的显示溢出元素的属性overflow来进行解决。
7.1 overflow参数：
- visible 默认值。不对溢出的元素做任何处理，直接呈现在元素框之外
- hidden 溢出元素会被修剪，溢出的部分不可见，此参数还可以清除浮动
- scroll 将隐藏所有溢出的内容并使滚动条出现在相关元素上。如果内容没有溢出，滚动条仍然可见，但被禁用。
- auto 和scroll非常相似，但滚动条仅在内容溢出时出现
- inherit 从父元素继承overflow属性的值
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 60px;
height: 120px;
border: 2px black solid;
overflow: auto;
}
</style>
</head>
<body>
<div>
<p>当子元素所需大小超过了父元素的大小</p>
</div>
8 浮动
实现下图效果需要使用到浮动。不设置浮动，会出现什么情况。
8.1浮动特点：
- 浮动元素有左浮动(**float:left;)**和右浮动(float:right;)两种
- 浮动的元素会向左或向右浮动，碰到父元素边界或其他元素才停下来
- 相邻浮动的块元素可以并在一行，如果超出父级元素宽度就自动换行
- 浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果
- 父元素如果没有设置尺寸(一般是不设置height)，父元素内整体浮动的元素无法撑开父元素时，需要清除父元素浮动。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 500px;
height: 140px;
border: 2px black solid;
}
.box2{
width: 100px;
height: 100px;
border: 1px red solid;
margin: 20px;
float: left;
}
.box3{
width: 100px;
height: 100px;
border: 1px red solid;
margin: 20px;
float: right;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
-
动态面包屑教程：新手入门指南12-21
-
动态主题处理教程：新手必读指南12-21
-
富文本编辑器教程：新手入门指南12-21
-
前端项目部署教程：从零开始的全面指南12-21
-
拖拽表格教程：轻松入门指南12-21
-
Element-Plus教程：新手入门与实战指南12-21
-
TagsView标签栏导航教程：轻松掌握标签栏导航12-21
-
动态表格实战：新手入门教程12-21
-
动态菜单项实战：一步步教你实现动态菜单项12-21
-
动态面包屑实战：新手教程12-21
-
富文本编辑器实战入门教程12-21
-
拖拽表格实战：新手必备教程12-21
-
前后端分离学习：从入门到实践的简单教程12-20
-
入职第一天，看了公司代码，牛马沉默了12-19
-
前后端分离资料详解：新手入门指南12-19
