html" title=爬虫>爬虫系列总目录
本章节介绍html" title=爬虫>爬虫基础知识,包括网络,前端界面HTML,CSS, JS 等。
第一章 html" title=爬虫>爬虫基础-网络传输协议
第一章 html" title=爬虫>爬虫基础-请求与响应头
第一章 html" title=爬虫>爬虫基础-前端HTML
第一章 html" title=爬虫>爬虫基础-前端CSS
第一章 html" title=爬虫>爬虫基础-前端JavaScript
前端CSS
- html" title=爬虫>爬虫系列总目录
- 前言
- 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属性指定html" title=css>css代码,只能改变当前标签的样式。不能批量对某个标签生效。
html"><div style="html" title=css>css">color:red;">hello html" title=css>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选择器使 用。
html"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>html" title=css>css">
/*标签选择器*/
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 标签。
html"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>html" title=css>css">
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:通过样式往标签中插入内容
html"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>html" title=css>css">
.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同样可以指定设置某一个边,但是也可以全部都设置,
html"> 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; /*四个边设置的一样可以直接*/
html"> 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;
功能实现:
html"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>html" title=css>css">
.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属性是html" title=css>css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的。background可以分解为以下几个选项:
- background-color 设置背景颜色
- background-image 设置背景图片地址
- background-repeat 设置背景图片如何重复平铺
- background-position 设置背景图片的位置
- background-attachment 设置背景图片是固定还是随着页面滚动条滚动
而在实际工作中,会将上面的几个合并到一起来写,而且基本上都是这么来用的,这样做的性能会更好,兼容性也会更高。
html"> <style>html" title=css>css">
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属性的值
html"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>html" title=css>css">
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),父元素内整体浮动的元素无法撑开父元素时,需要清除父元素浮动。
html"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>html" title=css>css">
.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>