什么是CSS？
CSS（Cascading Style Sheets，层叠样式表）是用于控制网页外观和布局的代码语言，它与 HTML 配合使用，可以让网页从“纯内容”变成“美观的界面”。CSS是一种样式语言，告诉网页浏览器如何呈现HTML元素。
CSS的类型
有三种主要的方式将CSS添加到你的HTML中，这三种方式分别是：
-
内联CSS：直接在HTML标签中
-
内部CSS：在HTML的
<head>中 -
外部CSS：单独的.css文件
接着我们就来看看这三种CSS的实际应用。
内联&内部CSS
代码示例：
<!DOCTYPE html>
<html><head><style>/* 这是内部CSS */body {background-color: #f0f0f0;font-family: Arial, sans-serif;}h1 {color: #333333;text-align: center;}</style>
</head><body><h1>欢迎来到CSS！</h1><p style="color: blue;">这是一个带有内联CSS的段落。</p>
</body></html>在这个例子中，我们同时使用了内部和内联CSS。内部的CSS在<style>标签中设置了整个页面的背景颜色和字体，并对<h1>元素进行了样式设置。<p>标签上的内联CSS使这个特定的段落变为蓝色。
外部CSS
现在从进行以下步骤：
-
为你的项目创建一个新文件夹。
-
在该文件夹中，创建一个HTML文件（例如，
index.html）和一个CSS文件（例如，styles.css）。 -
打开你的HTML文件并添加以下基本结构：
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<body><h1>欢迎来到CSS！</h1><p >这是一个带有内联CSS的段落。</p>
</body></html>创建并打开你的.css文件，随意命名，文章中的文件名为，让我们写下我们的第一个CSS规则：
<!DOCTYPE html>
<html>
<body><h1>欢迎来到CSS！</h1><p >这是一个带有内联CSS的段落。</p>
</body></html>我们在html文件中使用<link rel="stylesheet" href="style.css">链接外部.css文件，得到如下效果：
-
我们使用浅蓝色背景和字体设置了
<body>元素的样式。 -
<h1>居中，深灰色，并有轻微的文字阴影。保存两个文件并在浏览器中打开的HTML：
CSS属性
CSS有大量的属性可以玩转。以下是一些常见的：
这个时候，让我们添加一个段落并对其进行样式设置：
<link rel="stylesheet" href="styles.css">
<p class="intro">CSS太神奇了！它让我们以无数的方式设置网页样式。</p>在你的css文件中例子中的css文件为styles.css：
.intro {
font-size: 18px;
color: #4a4a4a;
line-height: 1.6;
margin: 20px;
padding: 15px;
border: 2px dashed #7caed6;
border-radius: 10px;
}这创建了一个带有虚线边框和圆角的样式段落。
为什么要麻烦用CSS？我们不是可以直接在HTML中设置样式吗？
-
关注点分离：CSS允许我们将表示（东西看起来如何）与结构（内容及其组织）分开。这使得我们的代码更干净，更容易维护。
-
一致性：使用CSS，你可以一次定义样式，然后跨多个页面应用。需要改变所有标题的颜色？在CSS文件中更改一次，然后就可以啦！
-
灵活性：CSS为你提供了对网页布局和外观的精细控制。从简单的颜色更改到复杂的动画，CSS都能做到。
-
响应性：CSS允许你创建适应不同屏幕尺寸的设计，确保你的网站在从智能手机到大型桌面显示器上都看起来很棒。
-
带宽效率：通过将样式信息移到单独的CSS文件，你可以减少HTML中的冗余，从而减小文件大小，加快加载时间。
CSS - 语法
类型选择器
类型选择器是CSS选择器中最简单的形式。它们针对特定HTML标签类型的所有元素。
p {
color: blue;
}在这个例子中，网页上的所有<p>（段落）元素都会被染成蓝色。
通用选择器
它针对页面上的每一个元素。它用一个星号（*）表示。
* {
margin: 0;
padding: 0;
}这个片段重置了所有元素的边距和内边距。
后代选择器
后代选择器允许你针对嵌套在其他元素内的元素。
p a {
text-decoration: none;
}这个规则会移除所有位于段落内的链接（<a>标签）的下划线。
类选择器
类选择器非常灵活。它们允许你将样式应用于具有特定类属性的元素。
.highlight {
background-color: yellow;
}任何带有class="highlight"的元素都将有黄色背景。
ID选择器
ID选择器与类选择器类似，但它们是为唯一元素设计的。每个ID在页面上只能使用一次
#header {
font-size: 24px;
font-weight: bold;
}这个样式将应用于带有id="header"的元素，它非常适合页面上独一无二的单个元素。
子选择器
子选择器比后代选择器更具体。它们只针对元素的直接子元素。
ul > li {
list-style-type: square;
}这个规则将项目符号更改为正方形，但仅针对作为<ul>元素直接子元素的<li>元素。
属性选择器
属性选择器允许你根据元素的属性或属性值来定位元素。
input[type="text"] {
border: 1px solid blue;
}这个规则将蓝色边框应用于所有文本输入字段。
多个样式规则
将多个样式规则应用于同一个选择器。每个规则应该单独一行，以提高可读性。
h1 {
color: navy;
font-size: 20px;
text-align: center;
}在这里我们给<h1>元素赋予了海军蓝色，大小为20像素，并居中对齐。
选择器分组
有时，我们可能会希望将相同的样式应用于多个选择器。这个时候可以将选择器分组在一起。
h1, h2, h3 {
font-family: Arial, sans-serif;
}这个规则将Arial字体（或者如果Arial不可用，则使用任何无衬线字体）应用于所有<h1>、<h2>和<h3>元素。
CSS 伪类选择器
伪类选择器目标处于特定状态的元素。
a:hover {text-decoration: underline;
}input:focus {outline: 2px solid blue;
}li:nth-child(odd) {background-color: #f0f0f0;
}这些样式会在鼠标悬停时给链接添加下划线，给聚焦的输入框添加蓝色轮廓，以及给每个奇数列表项添加浅灰色背景。
CSS 伪元素选择器
伪元素选择器允许你样式化元素的具体部分。
p::first-letter {font-size: 2em;font-weight: bold;
}h1::before {content: "? ";
}div::selection {background-color: yellow;
}这段代码放大并加粗了段落的第一个字母，给 h1 元素之前添加了一个指向手指表情符号，并将 div 中选中的文本背景设置为黄色。
现在，让我们将这些选择器类型总结在一个方便的表格中：
CSS - 溢出：掌握内容控制
什么是CSS溢出？
CSS溢出就像你往一个小盒子里塞了太多东西，盒子装不下了，这时候内容就会“溢出来”。用专业的话说，当元素的内容（比如文字、图片）超过了它自己设定的大小（比如固定宽高），多出来的部分就会溢出到盒子外面。
举个生活中的例子🌰：假设你有一个高10厘米的玻璃杯（相当于网页中的一个div容器），如果倒进去15厘米高的水（相当于内容），多出来的5厘米水就会溢出杯口，这就是“溢出”。
CSS溢出 - 使用可见和隐藏值
CSS溢出属性有两个基本值：visible和hidden。
visible（默认）
这是默认行为。就像说：“让它都露出来！”
<div class="overflow-visible">
<p>这是一个很长的段落，它将溢出其容器。</p>
</div>.css文件
.overflow-visible {
width: 100px;
height: 100px;
border: 1px solid black;
overflow: visible;
}就像给你的盒子装上轮子，以防你需要移动东西。
auto
这是一个智能选项。它只在必要时添加滚动条。
<div class="overflow-auto">
<p>这个内容只有溢出时才会出现滚动条。</p>
</div>
.overflow-auto {
width: 100px;
height: 100px;
border: 1px solid black;
overflow: auto;
}
CSS溢出 - 相关属性
更多控制的相关属性：
CSS溢出 - 相关属性
更多控制的相关属性：
| 属性 | 描述 | 示例 |
|---|---|---|
| overflow-x | 控制水平溢出 | overflow-x: scroll; |
| overflow-y | 控制垂直溢出 | overflow-y: hidden; |
| overflow-wrap | 指定当内容溢出包装元素时是否断字 | overflow-wrap: break-word; |
| text-overflow | 指定如何向用户表示不显示的溢出内容 | text-overflow: ellipsis; |
让我们看看这些属性的实际应用：
<div class="overflow-fancy">
<p>这是一个非常长的段落，其中有一些非常长的不可断开的单词。</p>
</div>.overflow-fancy {width: 100px;height: 100px;border: 1px solid black;overflow-x: scroll;overflow-y: hidden;overflow-wrap: break-word;text-overflow: ellipsis;white-space: nowrap;
}在这个例子中：
-
水平溢出将显示滚动条
-
垂直溢出将被隐藏
-
长单词将断开以适应宽度
