学习笔记（二）——CSS基础

最新推荐文章于 2024-05-03 21:35:17 发布

别呀

最新推荐文章于 2024-05-03 21:35:17 发布

阅读量316

点赞数 6

分类专栏： web入门

本文链接：https://blog.csdn.net/qq_46485161/article/details/116805125

版权

web入门专栏收录该内容

10 篇文章 2 订阅

订阅专栏

一、什么是CSS

CSS (全称Cascading Style Sheets，层叠样式表)是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。HTML 和CSS 就是“内容”和“形式”的关系，由HTML 组织网页的结构，而通过CSS 来决定页面的表现形式。

由于HTML 的主要功能是描述网页的结构，所以控制网页外观的能力很差，如无法精确调整文字大小、行距等结构，而且不能对多个网页元素进行统一的样式设置，只能一个一个元素地设置。使用CSS 可实现对网页的外观和排版进行更灵活的控制，使网页更美观。

CSS样式表是由一系列样式规则组成的，浏览器将这些规则应用到相应的元素上，CSS语言实际上是一种描述HTML 元素外观（样式）的语言。

二、CSS基本使用

**优先级：**行内式 > 内联式 > 外部式

2.1、行内式(内联样式)

所有 HTML 标记都有一个通用的属性 style，行内式就是将元素的 CSS 规则作为 style 属性的属性值写在元素的标记内。

书写格式如下：

<开始标签 style="css属性1:属性值1;css属性2:属性值2···">

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>
<body>
    <span style="color: aquamarine; font-size: 50px">大家好啊！</span>
</body>
</html>

结果展示：

行内式的优点是：由于 CSS 规则就写在标记内，其作用对象就是该元素，所以无须书写 CSS 的选择器。有时需要做测试或对个别元素设置 CSS 属性，这时可以使用这种方式，只需书写属性和值，但它没有体现出 CSS 统一设置许多元素样式的优势。

2.2、内部样式

内部样式也称嵌入式，将页面中的各种元素的 CSS 样式设置集中写在<style> 和</stytle> 之间，<style>标记是专用于引入嵌入式 CSS 的一个 HTML 标记，它只能放置在文档头部，即<style>···</style>只能放置在文档的<head>和</head>之间。

书写格式如下：

选择器{
	css属性1:属性值1;
	css属性2:属性值2;
	·····
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		span{
			color: aqua;
			font-size: 50px;
		}
	</style>
</head>
<body>
    <span>这是内部样式！</span>
</body>
</html>

结果展示：

为单一的网页设置样式，嵌入式很方便且最常用。但是对于一个包容很多网页的网站来说，如果每个网页都以嵌入式的方式设置各自的样式，不仅麻烦，冗余代码多，而且网站中各个页面的风格不好统一。因此，对于一个网站来说，通常都是编写独立的 CSS 文件，使用外部样式方法，引入到网站的所有 HTML网页文档中。

2.3、外部样式

当 CSS 样式需要应用于很多页面时.外部样式表(外部 CSS 文件)将是理想的选择。所谓外部样式表，就是将 CSS 规则写人到一一个单独的文本文件中,并将该文件的后缀名命名为. css。然后使用链接式或导人式的方法将外部 CSS 文件引人到HTML文件中，其优点是可以让很多个网页共享一个 CSS 文件设置的样式。

在学习 CSS 或制作单个网页时，为了方便可采取行内式或嵌人式方法引人 CSS ，但若要制作网站，则主要应采用链接式引人外部 CSS 文件，以便使网站内的所有网页风格统一。而且在使用外部样式表的情况下，可以通过改变一个外部 CSS 文件来改变整个站所有页面的外观。下面介绍引人外部 CSS 文件的方法。

2.3.1、嵌入式

链接式是在网页头部使用 HTML 标记<link>引入外部CSS文件,语法如下:

<link href="it.css" rel="stylesheet">

rel:定义当前文件与被链接文件之间的关系，stylesheet, 表示当前被链接的文件是一个样式表文件
href:定义样式表文件链接，可以是网络路径也可以是本地路径
这里的it.css是指你的css文件名

示例：
it.css文件:（注意该文件中不需要书写<style>标记）

span{
        color: aqua;
        font-size: 50px;
    }

it.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<link href="it.css" rel="stylesheet">
    <title>示例</title>
</head>
<body>
    <span>这是链接式！</span>
</body>
</html>

结果展示：

2.3.2、导入式

导入式是通过 CSS 规则中的@import 指令来导入外部 CSS 文件，语法如下：

<style>
	@import "it.css";  /*导入你的css文件*/
</style>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		@import "it.css";   /*这里文件和上面一样*/
	</style>
</head>
<body>
    <span>这是链接式！</span>
</body>
</html>
/*执行结果和上面链接式一样这里就不展示了*/

此外,这两种方式的显示效果也略有不同。使用链接式时，会在装载页面主体部分之前装载 CSS 文件,这样显示出来的网页从一开始就是带有样式效果的;而使用导人式时，要在整个页面装载完之后再装载 CSS 文件，如果页面文件比较大，则开始装载时会显示无样式的页面。从浏览者的感受来说,这是使用导人式的一个缺陷。

三、选择器

选择器就是为了选中文档中要应用样式的那些元素，为了能够灵活选中文档中的某类或某些元素,CSS定义了很多种选择器。其中,主要分为基础选择器和复合选择器两大类。

3.1、基础选择器

选择器优先级比较：id 选择器 > 类选择器 > 标签选择器

3.1.1、标签选择器

可以把某一类标签全部选择出来。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		span{   /*标签选择器*/  
			color: red;
			font-size: 50px;
		}
	</style>
</head>
<body>
    <span>标记选择器</span>
</body>
</html>

结果展示：

3.1.2、id 选择器

根据id属性值来进行选择，使用以#开头。

注意：要应用id 选择器，首先必须给某个元素添加 id 属性。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		#text{    /*注意以 # 开头，text为id名*/  /*id 选择器#text*/
			color: blue;  
			font-size: 50px;
		}
	</style>
</head>
<body>
    <span id="text">id 选择器</span>
</body>
</html>

结果展示：

3.1.3、类选择器

根据 class 属性值来进行选择,使用时以.开头。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		.text{      /*类选择器.text*/
			color: red;
			font-size: 50px;
		}
	</style>
</head>
<body>
    <span class="text">类选择器</span>
</body>
</html>

结果展示：

3.1.4、通配符选择器

匹配所有标签，使用以*开头。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		*{
			color: red;
			font-size: 20px;
		}
	</style>
</head>
<body>
    <span>span标签</span>
	<p>p标签</p>
	<h1>h1标签</h1>
	<div>div标签</div>
</body>
</html>

结果展示：

3.2、复合选择器

3.2.1、后代选择器

使用空格分隔开，如：

div a{
			color: chartreuse;
			font-size: 30px;
		}

后代选择器有什么用？以下面示例 2来讲，<div>就是爷爷，<ul>是儿子，<li>就是孙子，后代选择器可以将儿子和孙子的字体属性等全部修改掉。

示例 1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		div a{
			color: chartreuse;
			font-size: 30px;
		}
	</style>
</head>
<body>
    <!--把内部链接的a标签的字体改为绿色-->
	<div>
		<a href="https://www.baidu.com">儿子</a>
	</div>
	<a href="https://https://www.baidu.com">儿子</a>
</body>
</html>

结果展示：

示例 2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		.py ul{
			color: chartreuse;
			font-size: 30px;
		}
	</style>
</head>
<body>
    <!--把孙子字体改为绿色-->
	<div class="py">
		<ul>
			<li>孙子</li>
			<li>孙子</li>
		</ul>
	</div>
	<ul>
		<li>human</li>
		<li>human</li>
	</ul>
</body>
</html>

结果展示：

3.2.2、子元素选择器(子代选择器)

使用>分隔开，如：

		div>span{
			color: chartreuse;
			font-size: 30px;
		}

后代选择器的作用范围为全部后代，其范围比较广，根据需要有时我们会选择作用范围较小的子代选择器，其作用范围为：直接的亲属的子元素，不包含孙子元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		div>span{   /*如果我们这里用div span的话所有的span标签的字体都会发生改变*/
			color: chartreuse;
			font-size: 30px;
		}
	</style>
</head>
<body>

	<div>
		<span>儿子</span>
		<span>儿子</span>
		<span>儿子</span>
	</div>
	<div>
		<p>
			<span>孙子</span>
			<span>孙子</span>
			<span>孙子</span>
		</p>
	</div>

</body>
</html>

结果展示：

3.2.3、交集选择器

注意用.分隔

既是···又是···，以下例子为例：既是p标签又class为py

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		p.py{
			color: blue;
		}
	</style>
</head>
<body>
	<!--让p标签并且带有class=py变为蓝色-->
	<p class="py">蓝色</p>
	<p class="py">蓝色</p>
	<p>黑色</p>
	<p>黑色</p>
	<div class="py">蓝色</div>
	<div class="py">蓝色</div>
</body>
</html>

结果展示：

3.2.4、并集选择器

注意用,分隔开

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		p,span{
			color: blue;
		}
	</style>
</head>
<body>
	<!--让p标签和span标签字体变为蓝色-->
	<p>p标签</p>
	<p>p标签</p>
	<div>div标签</div>
	<div>div标签</div>
	<span>span标签</span>
	<span>span标签</span>
	<h1>h1标签</h1>
	<h1>h1标签</h1>
</body>
</html>

结果展示：

3.2.5、伪类选择器

伪类(pseudo-class)是用来表示动态事件、状态改变或者是在文档中以其他方法不能
轻易实现的情况——例如用户的鼠标悬停或单击某元素。总的来说，伪类可以对目标元
素出现某种特殊的状态应用样式。这种状态可以是鼠标停留在某个元素上，或者是访问
一个超链接。伪类允许设计者自由指定元素在一种状态下的外观。

常用的伪类有4个，分别是: link(链接)、: visited(已访问的链接)、hover(鼠标悬停状态)和:active(激活状态)。其中前面两个称为链接伪类，只能应用于链接a元素，后两种称为动态伪类，理论上可以应用于任何元素,但IE6只支持a元素的上述伪类。其他的一些伪类如:focus(获得焦点时的状态)因为在IE 6中不支持，所以用得较少。

为了更直观的学习，下面以<a>标签为例：

超链接 a 标签的4个伪类

伪类	作业
a:link	正常浏览状态的样式
a:visited	被单击过的超链接的样式风格
a:hover	鼠标指针悬停在超链接上时的风格
a:active	当前激活(在鼠标单击与释放之间发生)的样式风格

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		a:link{
			color: blue;
		}
		a:visited{
			color: chartreuse;
		}
		a:hover{
			color: darkorange;
		}
		a:active{
			color: blueviolet;
		}
	</style>
</head>
<body>
	<a href="http://www.baidu.com" style="font-size: 50px">百度一下</a>
</body>
</html>

结果展示：
在这里插入图片描述

四、字体/文本

4.1、字体常用样式

CSS属性	含义	举例
font-family	字体类型	font-family=“宋体”
font-weight	字体粗细	font-weight:bold字体加粗
font-style	字体样式	font-style：italic字体倾斜
font-size	字体大小	font-size:100px

复合样式

font:font-style font-weight font-size font-family

如：

div{
	font:italic bold 100px "宋体"
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		span{
			font-size: 40px;
			font-family: "微软雅黑 Light";
			font-weight: bold;
			font-style: italic;
		}
		/*span{*/     /*复合样式*/
			/*font:italic bold 40px "微软雅黑 Light"*/
		/*}*/
	</style>
</head>
<body>
	<span>pyhton</span>
</body>
</html>

结果展示：

4.2、文本常用样式

CSS属性	含义	举例
text-align	对齐方式	text-align:center
text-indent	首行缩进	text-indent:2em
text-decoration	文本线	text-decoration:underline
letter-spacing	字距	letter-spacing:1.5px
text-transform	大小写转换	text-transform:uppercase
word-spacing	词距	word-spacing:10px
line-height	行高	line-height:30px

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		p{
			text-align: center;
			text-indent: 2em;
			letter-spacing: 1.5px;
			word-spacing: 10px;
			line-height: 30px;
		}

	</style>
</head>
<body>
	<p>这个世界，有儒；有道；有佛；有妖；有术士。警校毕业的许七安幽幽醒来，
		发现自己身处牢狱之中，三日后流放边陲.....他起初的目的只是自保，
		顺便在这个没有人权的社会里当个富家翁悠闲度日。......多年后，许七安回首前尘，
		身后是早已逝去的敌人，以及累累白骨。滚滚长江东逝水，浪花淘尽英雄，是非成败转头空。 青山依旧在，几度夕阳红。</p>
</body>
</html>

结果展示：

五、背景

5.1、背景常用样式

CSS属性	含义	可用值
background-color	背景颜色	命名颜色、十六进制颜色等
background-image	背景图片	url(URL)
background-repeat	背景铺盖	repeat、repeat-x、repeat-y、no-repeat
background-attachment	背景图固定还是随内容滚动	scroll、fixed
background-size	背景大小	width、height
background-position	背景定位	[left \| center \| right] [top \| center \| bottom]或[x%] [y%]或[x-pos] [y-pos]

复合样式
（顺序固定）

background:颜色 图片 是否平铺 固定还是滚动 背景定位/背景大小

如：

background: red url('图片.png') no-repeat scroll center/100px 100px

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
	<style>
		div{
			width: 300px;
			height: 300px;
			background-color: yellow;
			background-image: url("https://www.cc148.com/files/article/image/44/44955/44955s.jpg");
			background-repeat: no-repeat;
			background-position: center;
			background-size: 100px 150px;
			/*复合样式*//*background: yellow url('https://www.cc148.com/files/article/image/44/44955/44955s.jpg') no-repeat center/100px 150px*/
		}
	</style>
</head>
<body>
	<div>

	</div>
</body>
</html>