【前端学习】D2-1：CSS入门

最新推荐文章于 2024-07-18 17:34:14 发布

甜鲸鱼

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量330

点赞数

分类专栏：前端学习文章标签： css 前端学习

本文链接：https://blog.csdn.net/weixin_47678542/article/details/129362379

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

前言
系列文章目录
1 CSS简介
2 CSS基础选择器
3 CSS字体属性
4 CSS文本属性
5 CSS的引入方式
6 综合案例
7 Chrome调试工具使用
- 7.1 打开调试工具
- 7.2 使用调试工具

前言

这篇文章为我跟随pink老师重新系统学习前端时做的一些笔记。

系列文章目录

【前端学习】D1：HTML简介与HTML标签
 【前端学习】D2-1：CSS入门
 【前端学习】D2-2：CSS基础

1 CSS简介

CSS的主要使用场景是美化网页，用于布局页面。

1.1 HTML的局限性

HTML只关注内容的语义，主要做结构，显示元素内容。
样式很丑，且臃肿繁琐。

1.2 CSS网页的美容师

CSS是层叠样式表（Cascading Style Sheets）的简称，有时也会称之为CSS样式表或级联样式表。
CSS也是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

1.3 CSS语法规范

使用HTML时，需要遵从一定的规范，CSS也是如此。CSS规则由两个主要的部分构成：选择器与一条或多条声明。

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。
属性时对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“:”分开。
多个键值对之间用英文“;”进行区分。

<head>
	<style>
		p {
			color: red;
			font-size: 12px;
		}
		/*
		选择器 {
			属性: 值;
		}
		*/
	</style>
</head>

1.4 CSS代码风格

以下代码书写风格不是强制规范，而是符合实际开发书写方式。

1.4.1 样式格式书写

紧凑格式

h3 { color: deeppink; fontsize: 20px; }

展开格式

h3 {
	color: deeppink;
	fontsize: 20px;
}

推荐第二种格式，更直观。

1.4.2 样式大小写风格

h3 {
	color: deeppink;
}

h3 {
	COLOR: DEEPPINK;
}

推荐样式选择器、属性名、属性值关键字全部使用小写字母，特殊情况除外。

1.4.3 空格规范

属性值前面，冒号后面，保留一个空格。
选择器（标签）和大括号中间保留空格。

h3 {
	color: deeppink;
}

2 CSS基础选择器

2.1 CSS选择器的作用

选择器（选择符）就是根据不同需求把不同的标签选出来。简单来说，就是选择标签。

2.2 选择器分类

选择器分为基础选择器和复合选择器两个大类。

基础选择器是由单个选择器组成的。
基础选择器又包括标签选择器、类选择器、id选择器和通配符选择器。

2.3 标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签。

优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。

标签名 {
	属性1: 属性值1;
	属性2: 属性值2;
	属性3: 属性值3;
	...
}

2.4 类选择器（*）

2.4.1 普通的类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，但不能使用标签名）。
长名称或词组可以使用中横线来为选择器命名，如user-form。
不要使用纯数字、中文等命名，尽量使用英文字母来表示。
命名要有意义。
命名规范：HTML编码规范 - (WEB前端命名规范)

.类名 {
	属性1: 属性值1;
	...
}

结构需要用class属性来调用类：

<div class="类名"></div>

2.4.2 多类名的使用方式

可以给一个标签指定多个类名，从而达到更多的选择目的。
使用方式：

在标签class属性中写多个类名。
多个类名中间必须用空格分开。

这个标签就可以分别具有这些类名的样式。

<head>
	<style>
	.red {
		color: red;
	}
	.font20 {
		font-size: 20px;
	}
	</style>
</head>
<body>
	<div class="red font20"></div>
</body>

2.4.3 多类名的使用场景

可以把一些标签元素相同的样式（公共的部分）放到一个类里面，这些标签都可以调用这个公共的类，然后在调用自己独有的类，从而节省CSS代码，统一修改也非常方便。

<head>
	<style>
		.red {
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.green {
			width: 100px;
			height: 100px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="red">红色盒子</div>
	<div class="green">绿色盒子</div>
	<div class="red">红色盒子</div>
</body>

可以改写成：

<head>
	<style>
		.box {
			width: 100px;
			height: 100px;
		}
		.red {
			background-color: red;
		}
		.green {
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="box red">红色盒子</div>
	<div class="box green">绿色盒子</div>
	<div class="box red">红色盒子</div>
</body>

2.5 id选择器（*）

id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中以“#”来定义。
id属性只能在每个HTML文档中出现一次，一般用于页面唯一性的元素上。（与类选择器的最大不同）

#id名 {
	属性1: 属性值1;
	...
}

结构需要用id属性来调用：

<div id="id名"></div>

2.6 通配符选择器（*）

在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

通配符选择器不需要调用，自动就给所有的元素添加样式。
特殊情况下才使用，如清除所有元素标签的内外边距。

* {
	属性1: 属性值1;
	...
}

3 CSS字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）。

3.1 字体系列

CSS使用font-family属性定义文本的字体系列。

各种字体之间必须使用英文状态下的逗号隔开，系统按序使用
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

p { font-family: '微软雅黑'; }
div { font-family: 'Microsoft Yahei', Arial, Helvetica; }

3.2 字体大小

CSS使用font-size属性定义字体大小。

px（像素）大小事网页开发的最常用单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，尽量给一个明确值大小，不要默认大小
可以给body指定整个页面的字体大小

p { font-size: 20px; }

3.3 字体粗细

CSS使用font-weight属性定义字体粗细，实际开发中提倡使用数字。

.bold { font-weight: bold; }
.bold { font-weight: 700; }

属性值	描述
normal	默认值（不加粗）
bold	定义粗体（加粗）
100-900	400等同于normal，700等同于bold，注意数字后不跟单位

3.4 文字样式

CSS使用font-style属性设置文本的风格。

p { font-style: normal; }

属性值	描述
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

3.4 字体复合属性写法

字体属性可以把文字样式综合来写，这样可以更节约代码。

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，而且每个属性间以空格隔开
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用

div {
	font-style: italic;
	font-weight: 700;
	font-size: 16px;
	font-family: 'Microsoft Yahei';
}

改写为：

div {
	/* font: font-style font-weight font-size/line-height font-family; */
	font: italic 700 16px 'Microsoft Yahei';
}

4 CSS文本属性

CSS Text（文本）可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

4.1 文本颜色

color属性用于定义文本的颜色。

div {
	color: red;
}

表示	属性值
预定义的颜色值	red，green，blue
十六进制（开发中最常用）	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

4.2 对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式。

div {
	text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

4.3 装饰文本

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。

div {
	text-decoration: underline;
}

属性值	解释
none	没有装饰线（默认值，最常用）
underline	下划线。链接<a></a>自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

4.4 文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
em是一个相对单位，就是当前元素1个文字（font-size）的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

div {
	text-indent: 10px;
	text-indent: 2em;
}

属性值	解释
none	没有装饰线（默认值，最常用）
underline	下划线。链接<a></a>自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

4.5 行间距

line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。行间距由上间距、文本高度、下间距三部分构成。

p {
	line-height: 26px;
}

5 CSS的引入方式

按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：

5.1 行内样式表（行内表）：修改简单样式

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。

style其实就是标签的属性。
在双引号中间，写法要符合CSS规范。
可以设置当前标签的样式。
书写繁琐，并没有体现出结构与样式相分离的思想，所以不推荐大量使用
称为行内式引入。

<div style="color: red; font-size: 12px;"></div>

5.2 内部样式表（嵌入式）：练习时常用

内部样式表（内嵌样式表）是写到HTML页面内部的，是将所有的CSS代码抽取出来，单独放到一个<style></style>标签中。

<style></style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head></head>标签中。
可以控制整个页面的样式。
代码结构清晰，但是并没有实现结构与样式完全分离。
通常称为嵌入式引入。

<style>
	div {
		color: red;
	}
</style>

5.3 外部样式表（链接式）：开发中常用

实际开发都是外部样式表，适合于样式比较多的情况。核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步：

新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
在HTML页面中，使用<link></link>标签引入这个文件。

<link ref="stylesheet" href="CSS文件路径"></link>

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。