📌  相关文章
📜  什么是CSS(1)

📅  最后修改于: 2023-12-03 15:36:08.990000             🧑  作者: Mango

什么是 CSS？

CSS 指的是层叠样式表 (Cascading Style Sheets)，是一种用来控制网页外观的标记语言。它通常被用来描述网页中的字体、颜色、大小、布局等方面的样式。

CSS 的作用

CSS 可以对网页中的所有 HTML 标签应用样式。它可以使网页的外观更加美观，提升用户体验，同时也可以使网页更易于管理和修改。

相比于直接在 HTML 中写样式，使用 CSS 的好处有：

  • 可以将样式从网页中剥离出来，使 HTML 更加简洁易懂。
  • 可以在多个页面之间共享样式，从而提高开发效率。
  • 可以更方便地修改样式，只需修改一个 CSS 文件即可影响所有使用该样式的 HTML 页面。
如何使用 CSS
内部样式表

内部样式表是写在 HTML 文件头部的 <style> 标签中的 CSS 代码，它只影响该 HTML 文件中的样式。例如：

<!DOCTYPE html>
<html>
<head>
	<title>内部样式表</title>
	<style>
		body {
			background-color: lightblue;
		}
		h1 {
			color: white;
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>Welcome to my webpage</h1>
	<p>This is a paragraph.</p>
</body>
</html>
外部样式表

外部样式表是单独一个 CSS 文件，它可以被多个 HTML 文件共享。例如，在 style.css 文件中定义样式：

body {
    background-color: lightblue;
}
h1 {
    color: white;
    text-align: center;
}

在 HTML 中引入该样式表：

<!DOCTYPE html>
<html>
<head>
    <title>外部样式表</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Welcome to my webpage</h1>
    <p>This is a paragraph.</p>
</body>
</html>
内联样式

内联样式是直接写在 HTML 元素中的样式，它只影响该元素。例如：

<!DOCTYPE html>
<html>
<head>
	<title>内联样式</title>
</head>
<body>
	<h1 style="color: red; text-align: center;">Welcome to my webpage</h1>
	<p>This is a paragraph.</p>
</body>
</html>

注意：使用内联样式不太推荐，因为它会使 HTML 更加复杂，不易于维护。

CSS 的基本语法

CSS 的基本语法由选择器、属性和属性值组成。例如，下面的 CSS 代码给所有 <p> 元素设置了蓝色字体：

p {
    color: blue;
}

其中：

  • p 是选择器，表示选中所有的 <p> 元素。
  • color 是属性，表示修改文字颜色。
  • blue 是属性值，表示将文字颜色设置为蓝色。
总结

CSS 是控制网页外观的标记语言，它可以使网页更美观、更易于管理和维护。我们可以使用内部样式表、外部样式表和内联样式来定义样式，基本语法由选择器、属性和属性值组成。