CSS基础

字数统计1.7k

本文主讲：认识CSS、HTML内嵌入CSS样式的三种方式、CSS隐藏样式、CSS文字装饰样式、CSS鼠标悬停样式、标签组件定位等

掌握上面的知识足够爬虫工程师用了！

认识CSS

什么是 CSS

概念：CSS 也叫层叠样式表语言【没有变量、函数因此不是编程语言】，相当于 HTML 文档的化妆品，可以让 HTML 页面变得更好看，CSS 是依赖于 HTML 文档的，因此 CSS 样式是依附于 HTML 文档内的，在 HTML 文档内嵌入 CSS 样式有三种方式，分别是内联定义、内部样式块、外部引入 .css 文件

HTML内嵌入CSS样式的三种方式

HTML 文档内嵌入 CSS 样式的三种方式分别是什么？

第一种方式：内联定义，在 HTML 标签组件内定义 style 属性

第二种方式：内部定义样式块，在<head>标签内定义<style></style>标签样式块

第三种方式：外部引入 .css 文件，在<head>标签内定义<link />标签，通过 href 属性引入 .css 文件

HTML 文档嵌入 CSS 样式——内联定义 的具体做法

具体实现：在 HTML 任意标签内定义 style 属性，并给这个属性赋值【css样式】即可

style属性语法格式：style=“样式名1：样式值1；样式名2：样式值2；样式名3：样式值3……”

示例：

1
<input type="text" style="width=10px ; height=20px ; border=6px"/>

注意：

1：CSS样式不需要我们去背，用的时候直接去找文档
2：在 HTML 的任何标签内都可以定义 style 属性…..

image-20211007154902525

HTML 文档嵌入 CSS 样式——内部定义样式块的具体做法【掌握CSS选择器】

具体实现：在 <head> 标签内创建样式块标签<style></style>，并且在样式块标签内通过 CSS 选择器选中指定一个或多个标签后添加 CSS 样式

语法示例：

1
2
3
4
5
6
7
8
9
10
<head>

	<style type=”text/css“>
		#one{
			样式名1：样式值1；
			样式名2：样式值2；
			样式名3：样式值3
		}
	</style>
</head>

语法详解：找到 id 属性值为 one 的标签，为这个标签添加{ }内的所有样式…

注意：style 脚本块标签内的 type=”text/css“是固定写法哦…..

CSS选择器

CSS常见选择器分类：

标签选择器：通过标签名选取指定一个或多个标签… 示例： div 【找到 HTML 文档内所有的 div 标签】

id选择器：通过 id 属性值选取指定一个标签….. 示例：#one 【找到id属性值为one的那一个标签】

class选择器：通过 class 属性值选取指定一个或多个标签….. 示例：. students 【找到class属性值为 student 那一类的一个或多个标签】

注意：

1：标签选择器可以选取多个同名的标签，id 选择器只能选择一个标签，因为每一个标签的 id 属性值唯一

2：类【class】选择器可以选取一个或多个标签，因为不同标签的 class 属性值可以相同，这点和 id 属性值有区别哦

3：不同标签的 id 属性值肯定不相同，但是 class 属性值可以相同，因为 id 属性值是唯一的….

4：id 选择器的作用域最小，只能作用于一个标签组件，而标签选择器与类选择器可以作用于一个或者多个标签…..

第二种嵌入 CSS 样式的方式图示

image-20211007154943340

HTML 文档嵌入 CSS 样式——外部引入.css文件的具体做法

实现语法：在 <head> 标签内定义 <link /> 标签，通过这个标签内的 href 属性引入外部 .css 文件

注意：HTML 文档引入 CSS 样式的三种方式中，第三种方式是最常见的……

image-20211007155004775

CSS 选择器三种选择器方式对标签组件生效的优先级

优先级从低到高分别是：标签选择器 、 类选择器、id选择器

解释：如果三个选择器都选择了同一个标签组件，那么 id 选择器选择的标签组件添加的样式生效，其他两个选择器添加样式不会生效

image-20211007155020780

CSS隐藏样式

HTML 文档内如何为标签组件设置隐藏样式

效果实现：利用CSS选择器选取指定标签后为这个标签设置样式名为display，样式值为 none 的样式即可隐藏该标签

实现语法：

1
2
3
4
CSS选择器选取待隐藏样式的标签 {
	dispaly：none
		
}

image-20211007155044010

CSS文字装饰样式

HTML 内如何为指定标签添加文本装饰样式

效果实现：利用 CSS 选择器选取待添加文本装饰样式的标签【文本标签】，给这个标签添加样式名为text-decoration，属性值分别为none【无文本样式】、blink【文本闪烁】、underline【文本下划线】、line-through【贯穿线】、overline【上划线】的样式

语法示例：

1
2
3
4
5
#one{
		
	text-decoration : underline
		
}

语法讲解：利用 id 选择器找到 id 属性值为 one 的标签，为这个标签添加文本下划线的样式

image-20211007155106016

CSS鼠标悬停样式

怎么为 HTML 标签组件设置鼠标悬停样式效果

效果实现：利用 CSS 选择器选取待设置鼠标悬停效果的组件标签，通过 hover 实现效果

语法示例：

1
2
3
4
#one：hover{
	color：red；
	Font-size：20px
}

语法详解：利用 id 选择器选取 id 属性值为 one 的标签组件，当鼠标悬停在这个标签上面时，字体变为红色…，字体大小变为20px

注意：#one：hover 中冒号两边不能有空格！！！，否则设置悬停样式失败….

image-20211007155127015

怎么为 HTML 标签组件设置鼠标悬停后鼠标变为小手样式效果

语法实现：

1
2
3
4
5
#one：hover{
		
	cursor：point
		
}

image-20211007155151567

标签组件定位

HTML 中如何通过 CSS 样式对标签组件进行定位

定位实现：通过CSS选择器选取待定位的标签，给这个标签添加一个属性名为 position，属性值为absolute的样式后，在添加属性名为top属性值为像素与属性名为left，属性值为像素的样式即可对这个标签进行定位

语法实现：

1
2
3
4
5
6
#one{

	position：absolute；
	top：100px；
	left：100px
}

语法解释：利用 id 选择器选取 id 属性值为 one 的标签，为这个标签进行定位，这个标签组件的左上角距离浏览器页面顶部100像素，距离浏览器页面左面100像素

注意：对组件进行定位，是以该组件标签左上角为基准开始定位的

image-20211007155216770

CSS基础讲解完毕…..