CSS基础

大猩猩爱吃薯片

已于 2023-11-12 11:49:57 修改

阅读量44

点赞数

文章标签： css 前端

于 2023-10-15 11:38:38 首次发布

本文链接：https://blog.csdn.net/zxzx1289/article/details/133839852

版权

本文介绍了CSS的基本概念，包括其作用、书写位置（内部样式、外部样式和行内样式），以及主要的选择器类型（标签选择器、类选择器、id选择器和通配符选择器）。此外，还详细讲解了盒子尺寸、背景色、文字控制属性如字体大小、字体样式、颜色等。

摘要由CSDN通过智能技术生成

1、什么是CSS

层叠样式表 (Cascading Style Sheets ，缩写为 CSS ），是一种 样式表 语言，用来描述 HTML 文档的呈现 （ 美化内 容）。

书写位置： title 标签下方添加 style 双标签， style 标签里面书写 CSS 代码。

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css</title>
		<style>
			h1{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>css</h1>
	</body>
</html>

效果图：

2、CSS的引入

2.1内部样式表：CSS代码写在style标签里面

2.2外部样式表：将CSS代码写在CSS文件中，然后在HTML中使用link标签引入

2.3行内样式：配合js使用，CSS直接写在标签的style属性值里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!-- 外部样式 -->
		<link rel="stylesheet" href="#">
		<title>css</title>
		<!-- 内部样式 -->
		<style>
			h1{
				color: red;
			}
		</style>
	</head>
	<body>
		<!-- 行内样式 -->
		<h1 color="red">css</h1>
	</body>
</html>

3、选择器

作用： 查找标签 ，设置样式。

3.1标签选择器

标签选择器：使用标签名作为选择器 → 选中同名标签设置相同的样式。

例如： p, h1, div, a, img......

注意：标签选择器 无法差异化 同名标签的显示效果。

3.2类选择器

作用：查找标签， 差异化 设置标签的显示效果。

步骤： 1.定义类选择器 → . 类名

2.使用类选择器 → 标签添加 class=" 类名 "

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css</title>
		<style>
		/* 定义类选择器 */
		.red {
		color: red;
		}
		</style>
	</head>
	<body>
		<!-- 使用类选择器 -->
		<div class="red">这是 div 标签</div>
		<div class="red size">div 标签</div>
	</body>
</html>

注意： 1.类名自定义 ，不要用纯数字或中文，尽量用英文命名

2.一个类选择器 可以供多个标签使用

3.一个标签可以使用多个类名 ，类名之间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如： news-hd 。

3.3id选择器

作用：查找标签，差异化设置标签的显示效果。

场景： id 选择器一般配合 JavaScript 使用，很少用来设置 CSS 样式

步骤： 1.定义 id 选择器 → #id 名

2.使用 id 选择器 → 标签添加 id= "id 名 "

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css</title>
		<style>
		/* 定义id选择器 */
		#red {
		color: red;
		}
		</style>
	</head>
	<body>
		<!-- 使用id选择器 -->
		<div id="red">这是 div 标签</div>
		<div id="red">div 标签</div>
	</body>
</html>

规则：同一个 id 选择器在一个页面只能使用一次。

3.4通配符选择器

作用：查找页面所有标签，设置相同样式。

通配符选择器： * ，不需要调用 ，浏览器自动查找页面所有标签，设置相同的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css</title>
		<style>
		/* 通配符选择器 */
		*{
		color: red;
		}
		</style>
	</head>
	<body>
		<!-- 使用id选择器 -->
		<div>这是 div 标签</div>
		<div>div 标签</div>
	</body>
</html>

经验：通配符选择器可以用于 清除标签的默认样式 ，例如：标签默认的外边距、内边距。

4、盒子尺寸个背景色

属性名	作用
width	宽度
height	高度
background-color	背景色

5、文字控制属性

5.1字体大小

属性名： font-size

属性值：文字尺寸， PC 端网页最常用的单位 px

5.2字体样式

作用：清除文字默认的倾斜效果

属性名： font-style

属性值 1.正常（不倾斜）：normal

2.倾斜： italic

5.3行高

作用：设置多行文本的间距

属性名：line-height

属性值 1.数字 + px

2.数字（当前标签 font-size 属性值的倍数）

5.4单行文字垂直居中

垂直居中技巧： 行高属性值等于盒子高度属性值

注意：该技巧适用于单行文字垂直居中效果

5.5字体族

属性名：font-family

属性值：字体名

5.6font复合属性

使用场景：设置网页文字公共样式

复合属性：属性的简写方式， 一个属性对应多个值的写法 ，各个属性值之间用空格隔开。

font: 是否倾斜 是否加粗 字号 / 行高字体（必须按顺序书写）

注意：字号和字体值必须书写，否则 font 属性不生效。

5.7文本缩进

属性名： text-indent

属性值： 1.数字 + px

2.数字 + em （推荐： 1em = 当前标签的字号大小 ）

5.8文本对齐方式

作用：控制内容水平对齐方式

属性名： text-align

属性值	效果
left	左对齐
center	居中对齐
right	右对齐

text-align 本质是控制内容的对齐方式，属性要设置给内容的父级。

5.9文本修饰线

属性名： text-decoration

属性值	效果
none	无
underline	下划线
line-through	删除线
overline	上划线

5.10文字颜色

颜色表达方式	属性值	说明	使用场景
颜色关键词	颜色英文单词	red、green、blue	学习测试
rgb表示法	rgb（r,g,b）	r,g,b表示红绿蓝三个原色，取值：0-255	了解
rgba表示法	rgba（r,g,b,a）	a表示透明度，取值：0-1	开发使用，实现透明色
十六进制表示法	#RRGGBB	#000000,#ffcc00,简写：#000，#fc0	开发使用(设计稿复制)