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

文章目录

一、什么是CSS
二、CSS基本使用
- 2.1、行内式(内联样式)
- 2.2、内部样式
- 2.3、外部样式
- - 2.3.1、嵌入式
  - 2.3.2、导入式
三、选择器
- 3.1、基础选择器
- - 3.1.1、标签选择器
  - 3.1.2、id 选择器
  - 3.1.3、类选择器
  - 3.1.4、通配符选择器
- 3.2、复合选择器
- - 3.2.1、后代选择器
  - 3.2.2、子元素选择器(子代选择器)
  - 3.2.3、交集选择器
  - 3.2.4、并集选择器
  - 3.2.5、伪类选择器
四、字体/文本
- 4.1、字体常用样式
- 4.2、文本常用样式
五、背景
- 5.1、背景常用样式

一、什么是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···">

示例：


<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 样式设置集中写在只能放置在文档的和之间。

书写格式如下：

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

示例：


<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 标记引入外部CSS文件,语法如下:

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

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

示例：
it.css文件:（注意该文件中不需要书写