编程基础—CSS—学习笔记-CSDN博客

本文链接：https://blog.csdn.net/qq_46965422/article/details/129659710

本文介绍了CSS的三种引入方式：行内样式、内部样式表和外部样式表，讨论了各自的优缺点。同时，讲解了CSS的基本语法结构以及选择器的使用，包括全局选择器、标签选择器、类选择器和ID选择器，强调了它们在CSS中的重要性。

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

编程基础—CSS—学习笔记

CSS的引入方式

行内样式表

需要在对应的标签上面加上一个style属性：style=“CSS代码”

优势:书写比较方便

缺点:代码冗余，CSS代码和HTML代码没有分离

<p style="color: red; font-size: 50px; font-weight: 600; font-family:幼圆;">这是一个段落</p>
<p style="color: red; font-size: 50px; font-weight: 600; font-family:幼圆;">这是一段新闻 </p>

在这里插入图片描述

内部样式表

需要一个style标签

规范来说通常将style标签放在head标签中

优势：没有冗余代码了，CSS和HTML代码进行分离，方便进行维护

缺点：CSS文件没有和HTML文件的分离

<!DOCTYPE htm1>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>内部样式表</title>
		<!--内部样式表-->
		<style>
			h1{
				color: greenyellow;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<h1>今天天气好啊</h1>
		<h1>马上要放假啦</h1>
	</body>
</html>

在这里插入图片描述

外部样式表

这是开发中最常用的，也是最规范的

需要一个单独的CSS文件
在这里插入图片描述

然后通过link标签引入外部的CSS：

<!DOCTYPE htm1>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>外部CSS</title>
	<!--引入外部CSS-->
	<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
	<p>快要毕业啦</p>
	<p>要开始工作了</p>
	<h1>新的阶段新的开始</h1>
</body>

在这里插入图片描述

语法

行内的语法：

所有的CSS代码写在style属性中

<标签style="css属性1:属性值1;css属性2:属性值2;...css 属性n:属性值n"/>

标签的属性：

属性与属性值之间用=号连接

属性与属性之间用空格隔开

css的属性：

属性与属性值之间用:号连接

属性与属性之间用;隔开

非行内的语法：

选择器{
	CSS属性1:属性值1;
	CSS属性2:属性值2;
	......
	CSS属性n:属性值n;
}

选择器入门

全局选择器

* 表示所有	所有的标签

*{
	margin:0;
	padding:0;
}

标签选择器

作用于对应的标签

当前页面所有同名的标签
在这里插入图片描述

类选择器

关键字：class

需要在标签上面去创建一个class属性

类是可以重复的

作用于所有相同class属性的标签
在这里插入图片描述

ID选择器

id选择器是唯一的，不能出现重名

需要在对应的标签上面加上id属性

作用于有对应id的标签。

识别符号是：#
在这里插入图片描述

CSS知识点

在这里插入图片描述