Web基础：CSS快速入门

什么是CSS？

CSS（Cascading Style Sheets，层叠样式表）是用于控制网页外观和布局的代码语言，它与 HTML 配合使用，可以让网页从"纯内容"变成"美观的界面"。CSS是一种样式语言，告诉网页浏览器如何呈现HTML元素。

CSS的类型

有三种主要的方式将CSS添加到你的HTML中，这三种方式分别是：

内联CSS：直接在HTML标签中
内部CSS：在HTML的<head>中
外部CSS：单独的.css文件

接着我们就来看看这三种CSS的实际应用。

内联&内部CSS

代码示例：

html 复制代码

<!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文件并添加以下基本结构：

html 复制代码

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="style.css">
<body>
  <h1>欢迎来到CSS！</h1>
  <p >这是一个带有内联CSS的段落。</p>
</body>

</html>

创建并打开你的.css文件，随意命名，文章中的文件名为，让我们写下我们的第一个CSS规则：

html 复制代码

<!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有大量的属性可以玩转。以下是一些常见的：

这个时候，让我们添加一个段落并对其进行样式设置：

html 复制代码

<link rel="stylesheet" href="styles.css">
<p class="intro">CSS太神奇了！它让我们以无数的方式设置网页样式。</p>

在你的css文件中例子中的css文件为styles.css：

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标签类型的所有元素。

css 复制代码

p {
color: blue;
}

在这个例子中，网页上的所有<p>（段落）元素都会被染成蓝色。

通用选择器

它针对页面上的每一个元素。它用一个星号（*）表示。

css 复制代码

* {
margin: 0;
padding: 0;
}

这个片段重置了所有元素的边距和内边距。

后代选择器

后代选择器允许你针对嵌套在其他元素内的元素。

css 复制代码

p a {
text-decoration: none;
}

这个规则会移除所有位于段落内的链接（<a>标签）的下划线。

类选择器

类选择器非常灵活。它们允许你将样式应用于具有特定类属性的元素。

css 复制代码

.highlight {
background-color: yellow;
}

任何带有class="highlight"的元素都将有黄色背景。

ID选择器

ID选择器与类选择器类似，但它们是为唯一元素设计的。每个ID在页面上只能使用一次

css 复制代码

#header {
font-size: 24px;
font-weight: bold;
}

这个样式将应用于带有id="header"的元素，它非常适合页面上独一无二的单个元素。

子选择器

子选择器比后代选择器更具体。它们只针对元素的直接子元素。

css 复制代码

ul > li {
list-style-type: square;
}

这个规则将项目符号更改为正方形，但仅针对作为<ul>元素直接子元素的<li>元素。

属性选择器

属性选择器允许你根据元素的属性或属性值来定位元素。

css 复制代码

input[type="text"] {
border: 1px solid blue;
}

这个规则将蓝色边框应用于所有文本输入字段。

多个样式规则

将多个样式规则应用于同一个选择器。每个规则应该单独一行，以提高可读性。

css 复制代码

h1 {
color: navy;
font-size: 20px;
text-align: center;
}

在这里我们给<h1>元素赋予了海军蓝色，大小为20像素，并居中对齐。

选择器分组

有时，我们可能会希望将相同的样式应用于多个选择器。这个时候可以将选择器分组在一起。

css 复制代码

h1, h2, h3 {
font-family: Arial, sans-serif;
}

这个规则将Arial字体（或者如果Arial不可用，则使用任何无衬线字体）应用于所有<h1>、<h2>和<h3>元素。

CSS 伪类选择器

伪类选择器目标处于特定状态的元素。

css 复制代码

a:hover {
  text-decoration: underline;
}

input:focus {
  outline: 2px solid blue;
}

li:nth-child(odd) {
  background-color: #f0f0f0;
}

这些样式会在鼠标悬停时给链接添加下划线，给聚焦的输入框添加蓝色轮廓，以及给每个奇数列表项添加浅灰色背景。

CSS 伪元素选择器

伪元素选择器允许你样式化元素的具体部分。

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（默认）

这是默认行为。就像说："让它都露出来！"

css 复制代码

<div class="overflow-visible">
<p>这是一个很长的段落，它将溢出其容器。</p>
</div>

.css文件

css 复制代码

.overflow-visible {
width: 100px;
height: 100px;
border: 1px solid black;
overflow: visible;
}

就像给你的盒子装上轮子，以防你需要移动东西。

auto

这是一个智能选项。它只在必要时添加滚动条。

css 复制代码

<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;`

让我们看看这些属性的实际应用：

css 复制代码

<div class="overflow-fancy">
<p>这是一个非常长的段落，其中有一些非常长的不可断开的单词。</p>
</div>

css 复制代码

.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;
}

在这个例子中：

水平溢出将显示滚动条
垂直溢出将被隐藏
长单词将断开以适应宽度