什么是 CSS？
级联样式表 （CSS） 用于设置网页布局的格式。使用CSS，可以控制颜色，字体，文本大小，间距，元素如何定位和布局，使用什么图像或背景颜色，不同设备和屏幕尺寸的显示，等等。
提示：层叠一词意味着样式 应用于父元素也将应用于 父母。因此，如果您将正文文本的颜色设置为“蓝色”，则所有标题， 段落和正文中的其他文本元素也将获得相同的颜色（除非您指定 别的东西）！
使用CSS
可以通过 3 种方式将 CSS 添加到 HTML 文档中：
- 内联 - 通过使用 HTML 元素中的属性
style - 内部 - 通过使用部分中的元素
<style><head> - 外部 - 通过使用元素链接到外部 CSS 文件
<link>
内联 CSS
内联 CSS 用于将唯一样式应用于单个 HTML 元素。内联 CSS 使用 HTML 元素的属性style，例如：
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
内部 CSS
内部 CSS 用于定义单个 HTML 页面的样式。内部 CSS 在 HTML 页面的部分中定义在元素中<head><style>。下面的示例设置所有元素的文本颜色 （在该页面上）为蓝色，并将所有元素的文本颜色更改为红。此外，页面将以“粉蓝色”背景显示颜色：<h1><p>，有点像批处理。
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部 CSS
外部样式表用于定义许多 HTML 页的样式。若要使用外部样式表，要在每个 HTML 页的部分中添加指向该样式表的链接：<head>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
外部样式表可以在任何文本编辑器中编写。该文件不得包含任何 HTML 代码，并且必须使用 .css 扩展名保存。使用外部样式表，您可以通过更改一个文件来更改整个网站的外观！以下是“styles.css”文件：
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS 文字颜色、字体和大小
一些常用的 CSS 属性。
- CSS 属性定义要使用的文本颜色
color - CSS 属性定义要使用的字体
font-family - CSS 属性定义要使用的文本大小
font-size
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS 边框
CSS 属性定义边框 在 HTML 元素周围border，可以为几乎所有 HTML 元素定义边框。
p {
border: 2px solid powderblue;
}
CSS 填充
CSS 属性定义填充 （空格）在文本和边框之间padding
p {
border: 2px solid powderblue;
padding: 30px;
}
CSS 边距
CSS 属性定义边距 （空格）在边界之外margin
p {
border: 2px solid powderblue;
margin: 50px;
}
链接到外部 CSS
可以使用完整 URL 或相对于当前网页的路径引用外部样式表。
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
也可以链接到位于当前网站的 html 文件夹中的样式表：
<link rel="stylesheet" href="/html/styles.css">
还可以链接到与当前页位于同一文件夹中的样式表：
<link rel="stylesheet" href="styles.css">
网友评论