python自动化（二）前端基础：2.CSS基础
一.CSS简介
CSS我们可以简单的理解为一种用来修饰HTML的层叠样式表。我们项目的前端页面往往是十分美观的，如果使用HTML自带的属性来设置页面的样式（字体，颜色，位置等）会十分麻烦，而CSS就是专门用来设置HTML样式的。
CSS的优点：
- 减少 HTML 页面体积 （CSS 效果 是针对多个 HTML 元素是可以复用的
- 使网页维护简单 （样式和 HTML）+
- 职责明确
- 美化网页样式
二.CSS的使用
1.CSS的引用方式
css样式的写法有三种：
- 行内样式
把样式写在标签内部，需要在标签中添加一个属性style，在style中定义样式 - 内部样式表
在head中定义一个style标签，在这个标签中写当前页面的样式 - 外部样式表
在html文件外创建.css结尾的文件，在文件中写css样式，引入页面需要使用link标签
行内样式表
在需要引用CSS的标签中，定义一个style标签。在标签内设置key/value。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
head>
<body>
<div style="font-size:30px;color:red;">行内样式表div>
body>
html>
内部样式表
在head中定义一个style标签，在这个标签中写当前页面的样式
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
.box{
font-size: 40px;
color: rgb(0,255,0);
}
style>
head>
<body>
<div class="box">内部样式表div>
body>
html>
外部样式表
在html文件外创建.css结尾的文件，在文件中写css样式，引入页面需要使用link标签
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="style.css">
head>
<body>
<div class="box">外部样式表div>
<div class="box1">外部样式表div>
body>
html>
2.CSS选择器
一个页面中会有多个标签的样式是一样的，这是我们可以使用选择器来选择所以满足条件的标签来统一设置CSS属性值，提升复用性。
- id选择器：
需要在标签上添加 id 属性，给id属性一个变量名，css中通过#container找到对应元素，然后可以统一设置样式。 - class选择器
需要在标签上添加 class 属性，给class属性一个变量名，css中通过.box找到对应的元素，然后可以统一设置样式。 - 标签选择器：
直接找标签的名称(div,span,a,p,input)，然后设置样式 - 通用选择器：* 代表所有
- 子集选择器：父级>子集(选中父级的下一级的对应标签)
- 后代选择器：父级 后代（选择父级下的所有对应标签，无论是第几代）
举例：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" href="./style.css">
head>
<body>
<div class="news">
<ul id="list0">
<li>
<h3>猫咪1h3>
<img src="./maomi/maimi1.jpg" alt="图片加载失败" class="pic">
<p>猫咪1简介p>
<p>猫咪社p>
li>
<li>
<h3>猫咪1.5h3>
<img src="./maomi/maomi2.jpg" alt="图片加载失败" class="pic">
<p>猫咪1.5简介p>
<p>猫咪社p>
li>
ul>
div>
<div class="news">
<ul id="list1">
<li>
<h3>猫咪2h3>
<img src="./maomi/maomi3.jpg" alt="图片加载失败" class="pic">
<p>猫咪2简介p>
<p>猫咪网p>
li>
ul>
div>
body>
html>
/*类选择器*/
.news{
margin-left: 50px;
}
/*id选择器*/
#list0{
list-style: none;
}
/* /*后代选择器+id选择器*/
.news #list1{
list-style: none;
}
/*后代选择器+标签选择器*/
.news #list0 li{
border-bottom: 3px solid #000;
}
/*子集选择器*/
li>h3{
display: inline-block;
}
/*通用选择器*/
*{
margin: 0;
padding: 0;
}
3.CSS盒模型
盒模型（每一个标签都是盒模型，都可以看成是一个盒子）
盒模型都有以下几个属性：
- content : 写入内容的地方
- padding：内边距,撑开内容和边框直接的距离
- border：边框
- margin：外边距
注意：
-
块级元素、行内-块级元素可以设置宽高，这里设置的宽和高指的是content的宽高
-
padding/margin/border都是是四个方向上，四个方向上的值可以不同。四个方向：上为top，下为bottom，左为left，右为right。 -
border由三个属性组成：宽度(border-width)、样式(border-style)、颜色(border-color)
-
border的简写方式：
border:1px(宽度) solid(实线)/dotted(点线)/dashed(虚线) #000(颜色);(三个属性没有顺序要求）例如：border-bottom:3px red solid;（只设置下边框） -
padding/margin的简写：
- 第一种形式：只有一个值，这时四个方向都使用这个值
padding:10px; - 第二种形式：两个值，这时上和下10px,左和右是20px;
padding:10px 20px; - 第三种形式：三个值，这时上10，左右20px，下30px
padding:10px 20px 30px; - 第四种形式：四个值，上10 ，右20 ，下30，左40
padding:10px 20px 30px 40px;
- 第一种形式：只有一个值，这时四个方向都使用这个值
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 400px;
border: 1px solid #000;
margin: 50px auto;
}
.first{
width: 200px;
height: 100px;
border: 2px dotted red;
display: inline-block;
padding: 20px;
margin-right: 50px;
}
.second{
width: 200px;
height: 100px;
border: 2px dashed blue;
display: inline-block;
}
style>
head>
<body>
<div class="box">
<div class="first">firstdiv>
<div class="second">seconddiv>
div>
body>
html>
4.CSS字体设置
CSS中设置字体的常用字段如下：
- font-family: 设置字体(宋体、微软雅黑)
- font-size:字体大小
- ont-weight:字体粗细
5.CSS背景设置
CSS设置背景的常用字段如下：
- 背景颜色：比背景图片更靠近底层。background-color
- 背景图片：background-image:url(‘图片路径’)
- 背景图片大小：background-size:x轴方向 y轴方向
- 背景定位：background-position:x轴方向 y轴方向（默认是从左上角开始定位）
- 背景重复：background-repeat:no-repeat; repeat-x; repeat-y;
运行效果如下：
6.其他小知识点：
- 宽：width
- 高：height
- 行高：line-height
- 文字对齐效果：text-align:center/left/right
- 溢出隐藏：overflow:hidden
- 垂直对齐方式：vertical-align：top/middle/bottom
- hover属性：鼠标放上去的效果，鼠标离开后会恢复到原来的效果
元素:hover{}
7.浮动
-
什么是浮动：让元素脱离文档流，“漂”起来。
-
文档流：前端页面在浏览器中展示时是从左上角开始排练，横向从左到右依次排练行内元素或行内块元素，纵向是从上到下依次排练块级元素。
-
浮动关键字：float: left / right
-
浮动后：元素会脱离文档流，"漂"在离它最近的上一个块级元素之后，变成行内-块级元素
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
div{
border: 1px solid #000;
}
.two{
float: left;
}
style>
head>
<body>
<div class="first">firstdiv>
<div class="two">twodiv>
<div class="three">threediv>
body>
html>
结果如下：
元素浮动后一个问题：
浮动元素后面元素会受浮动影响，使用浮动后需要清除浮动
清除浮动方案：
1.添加一个空标签，给空标签设置clear属性 clear:left / right / both
2.给有浮动的元素添加一个父级元素，然后让父级元素清除浮动(overflow: hidden;)
8.定位
- 定位关键字：position
- 定位方式：相对定位、绝对定位、固定定位
- 相对定位(relative)：是元素本身相对自己的一个偏移量，但不脱离文档流
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 400px;
border: 1px solid #000;
}
.one{
width: 100px;
height: 100px;
border: 1px dotted red;
/*相对定位*/
position: relative;
top: 100px;
}
style>
head>
<body>
<div>
<div class="one">hahadiv>
div>
body>
html>
结果如下：
- 绝对定位(absolute)：是元素相当于父级(会有一个相对定位)的一个偏移量，是脱离文档流的
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
height: 400px;
border: 1px solid #000;
}
.one{
width: 100px;
height: 100px;
border: 1px dotted red;
float: left;
/*绝对定位*/
position: absolute;
top: 100px;
}
.ck{
width: 100px;
height: 100px;
border: 1px dotted red;
float: left;
}
style>
head>
<body>
<div class="box">
<div class="one">hahadiv>
<div class="ck">参考盒子div>
div>
body>
html>
-
固定定位(fixed)：相当于浏览器窗口定位，不会随页面滚动发生位置改变，也是脱离文档流的
定位有四个方向： top:相对顶部的偏移量 bottom:相对顶部的偏移量 left:相对左边的偏移量 right:相对右边的偏移量