技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

Web基础CSS快速入门

 收录于 Web
   约 2818 字   预计阅读 6 分钟 
https://bing.ee123.net/img/rand?artid=146143450

Web基础：CSS快速入门

什么是CSS？

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

https://i-blog.csdnimg.cn/img_convert/b0923c6d88e4e514a8ac22d3ea48aac4.png

CSS的类型

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

  1. 内联CSS：直接在HTML标签中
  2. 内部CSS：在HTML的 <head> 中
  3. 外部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使这个特定的段落变为蓝色。

https://i-blog.csdnimg.cn/img_convert/207d027690eea32abc4443de219bd492.png

外部CSS

现在从进行以下步骤：

  1. 为你的项目创建一个新文件夹。
  2. 在该文件夹中，创建一个HTML文件（例如， index.html ）和一个CSS文件（例如， styles.css ）。
  3. 打开你的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：

https://i-blog.csdnimg.cn/img_convert/472bfcea5480ff86330b1c68a94356be.png

CSS属性

CSS有大量的属性可以玩转。以下是一些常见的：

https://i-blog.csdnimg.cn/img_convert/78fda226e4f71497f6dc20928d75e058.png

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

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

这创建了一个带有虚线边框和圆角的样式段落。

https://i-blog.csdnimg.cn/img_convert/eb94606dcaf51789fe39df2f4bc767db.png

为什么要麻烦用CSS？我们不是可以直接在HTML中设置样式吗？
  1. 关注点分离 ：CSS允许我们将表示（东西看起来如何）与结构（内容及其组织）分开。这使得我们的代码更干净，更容易维护。
  2. 一致性 ：使用CSS，你可以一次定义样式，然后跨多个页面应用。需要改变所有标题的颜色？在CSS文件中更改一次，然后就可以啦！
  3. 灵活性 ：CSS为你提供了对网页布局和外观的精细控制。从简单的颜色更改到复杂的动画，CSS都能做到。
  4. 响应性 ：CSS允许你创建适应不同屏幕尺寸的设计，确保你的网站在从智能手机到大型桌面显示器上都看起来很棒。
  5. 带宽效率 ：通过将样式信息移到单独的CSS文件，你可以减少HTML中的冗余，从而减小文件大小，加快加载时间。

https://i-blog.csdnimg.cn/img_convert/4e9331643676ecd949b9db10e330cc1c.png

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 中选中的文本背景设置为黄色。

现在，让我们将这些选择器类型总结在一个方便的表格中：

https://i-blog.csdnimg.cn/img_convert/4e8b342b6525829d33721ef9e34511b1.png

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

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

https://i-blog.csdnimg.cn/img_convert/96dd2a593792b79c4a5f90104e853519.png

auto

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

<div class="overflow-auto">
<p>这个内容只有溢出时才会出现滚动条。</p>
</div>
.overflow-auto {
width: 100px;
height: 100px;
border: 1px solid black;
overflow: auto;
}

https://i-blog.csdnimg.cn/img_convert/3d57d1d94ceec32cb6390898a0e94082.png

CSS溢出 - 相关属性

更多控制的相关属性：

https://i-blog.csdnimg.cn/img_convert/5942744be58ef1f95aea71c123697e84.png

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

在这个例子中：

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

https://i-blog.csdnimg.cn/img_convert/5de62e0b5af90f1acaf8971f4432a072.png

更新于 2025-03-10
 前端, Tensorflow, Css
返回 | 主页