学习笔记——CSS基础
Posted 别呀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习笔记——CSS基础相关的知识，希望对你有一定的参考价值。
文章目录
一、什么是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标签以上是关于学习笔记——CSS基础的主要内容，如果未能解决你的问题，请参考以下文章