【前端】CSS

跟着大佬学前端之CSS

前言

学习目标

• 了解 CSS 概念
• 学习 CSS 选择器并会使用
• 学习 CSS 布局

1. CSS 概念

1.1 CSS是什么

CSS是层叠样式表。从功能上简单理解，HTML可看作是网页的骨架，CSS则对网页进行布局和美化。

CSS本质不会对逻辑产生影响，但部分样式可能会造成布局或图标的变动，与交互有一定的关系。

1.2 CSS主要形式

CSS 主要由三种方式实现：

• 内联样式
  内联样式是在具体HTML标签内，通过style属性设置，如：

  <div style="color: red">红色段落</div>

• 内部样式
  内部样式的位置在html的head标签里，在style标签内设置。

  <head>
    <meta charset="UTF-8">
    <title>三种引入方式</title>
    <style>
      #d1{
        color: green;
      }
    </style>
  </head>
  <body>
    <h1 id = "d1">内部样式，绿色标题</h1>
  </body>

• 外部样式
  外部样式即将各种样式写在一个CSS文件中，在head中引入。

  <link rel="stylesheet" href="myCSS.css">

为了便于学习与文件管理，本文的示例采取外部样式的引入方式。跟练的读者具体CSS文件请自行命名。

1.3 CSS语法

css的语法
selector {property: value}
即 选择器{属性:值}

2. 选择器

CSS 选择器是 CSS 语法的重要组成部分，目的是以什么样的规则选择什么样的元素。

选择器也有分类，例如 id选择器、元素选择器、类选择器、伪类选择器等等非常多种类的选择器。不同的选择器有不同的作用范围与代码复用结果，选择器手册可参考：
菜鸟教程-选择器手册

篇幅有限，以下介绍我们入门建议学的以及常见和常用的选择器。

2.1 元素选择器

元素选择器的选择器名就是标签名。元素选择器的作用域是整个html中对应的所有标签。

元素选择器示例
此处我们用元素选择器将strong标签以及em标签的元素颜色变换一下：

strong {
  color: red;
}

em {
  color: blue;
}

2.2 id选择器

元素选择器的选择范围是全部对应标签。实际开发中，我们会想让某个元素有特定的样式。此时我们可以选用id选择器。

示例
例如，这里是删除线的html demo，让删除线的元素里的文本有不同的大小：

<body>
	<!-- del -->
    <del id="d1">This text has been deleted.</del>
    <br/>
    <!-- del -->
    <del id="d2">This text has been deleted.</del>
    <br/>
    <!-- del -->
    <del id="d1">This text has been deleted.</del>
    <br/>
    <!-- del -->
    <del id="d3">This text has been deleted.</del>
    <br/>
</body>

#d1{
    font-size: 30px;
}

#d2{
    font-size: 50%;
}

#d3{
    font-size: 3em;
}

2.3 类选择器

当需要多个元素，都使用同样的css的时候，就会使用类选择器。

示例
我们将上述一个p标签的字体改成按既定大小

<body>
    <p class="font-size-16">This is an image ,didn't find, display alt
    </p>
</body>

.font-size-16{
    font-size: 20px;
}

2.4 伪类选择器

伪类表示同一个标签，根据不同状态显示不同样式。

示例

a:link{
    color:red;
}
a:visited{
    color:orange;
}
a:hover{
    color:green;
}
a:active{
    color:black;
}

建议
伪类选择器细分还分为静态伪类与动态伪类，状态也可能更多。篇幅有限，请读者自行查阅。

3. 常见样式

CSS（层叠样式表）是前端开发中不可或缺的一部分，它为网页提供了丰富的样式和布局选项。在本节中，我们将介绍常见的 CSS 样式，包括尺寸、背景、文本、字体、鼠标样式和边框。

3.1 尺寸

在网页设计中，元素的尺寸是至关重要的。通过 CSS，我们可以控制元素的宽度、高度以及内外边距等，从而实现精准的布局和视觉效果。以下是一些常见的尺寸相关属性：

• width：设置元素的宽度。
• height：设置元素的高度。
• max-width：设置元素的最大宽度。
• max-height：设置元素的最大高度。
• min-width：设置元素的最小宽度。
• min-height：设置元素的最小高度。

示例代码：

.square {
    width: 100px;
    height: 100px;
}

.rectangle {
    width: 200px;
    height: 100px;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

3.2 背景

背景在网页设计中扮演着重要角色，它可以为页面增添色彩和质感，提升用户体验。CSS 提供了丰富的背景样式设置，包括：

• background-color：设置元素的背景颜色。
• background-image：设置元素的背景图片。
• background-size：设置背景图片的大小。
• background-repeat：设置背景图片的重复方式。
• background-position：设置背景图片的起始位置。

.element {
    background-color: #f0f0f0; /* 浅灰色背景 */
}
.another-element {
    background-image: url('background.jpg'); /* 设置背景图片 */
    background-size: cover; /* 背景图片将被缩放并完全覆盖元素 */
}

3.3 文本

文本样式的设置可以使网页内容更加清晰、易读，并且具有视觉吸引力。在 CSS 中，我们可以控制文本的字体、大小、颜色等属性，常见的文本样式包括：

• font-family：设置文本的字体。
• font-size：设置文本的大小。
• font-weight：设置文本的粗细。
• color：设置文本的颜色。
• text-align：设置文本的水平对齐方式。
• line-height：设置文本行高。

.text {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 1.5;
}

3.4 字体

字体样式的设置可以进一步提升网页的视觉效果和用户体验。在 CSS 中，我们可以选择合适的字体，并通过调整字体的大小、粗细等属性来实现自定义的字体样式。常见的字体样式属性包括：

• font-family：设置字体系列。
• font-size：设置字体大小。
• font-weight：设置字体粗细。
• font-style：设置字体风格（斜体、倾斜等）。
• text-decoration：设置文本装饰效果（下划线、删除线等）。

.heading {
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}

3.5 鼠标样式

鼠标样式的设置可以增强网页的交互性和用户体验。通过 CSS，我们可以改变鼠标指针在不同状态下的样式，例如正常状态、悬停状态、点击状态等。常见的鼠标样式属性包括：

• cursor：设置鼠标指针的样式。
• hover：设置鼠标悬停在元素上时的样式。

.button {
    cursor: pointer;
}

.link {
    cursor: pointer;
}

.link:hover {
    text-decoration: underline;
}

3.6 边框

边框样式的设置可以使元素在视觉上更加突出，同时也可以用来分隔不同区域或装饰元素。在 CSS 中，我们可以控制边框的样式、颜色、宽度等属性，常见的边框样式包括：

• border-style：设置边框样式。
• border-color：设置边框颜色。
• border-width：设置边框宽度。
• border-radius：设置边框圆角。

.box {
    border-style: solid;
    border-color: #ccc;
    border-width: 1px;
    border-radius: 5px;
}

4. 盒子模型

盒子模型是 CSS 中用来布局和定位元素的重要概念。每个 HTML 元素都被视为一个矩形的盒子，包括内容、内边距、边框和外边距。了解盒子模型的工作原理对于控制元素的大小、位置和间距非常重要。

4.1 概念

盒子模型的概念是指 HTML 元素被表示为一个矩形的盒子，它由四个部分组成：内容区域、内边距、边框和外边距。这些部分可以分别用 CSS 属性进行控制，从而实现灵活的布局和样式设置。

4.2 内外边距

在盒子模型中，内边距和外边距是两个重要的属性，它们可以用来控制元素与其他元素之间的间距和布局。以下是内外边距的介绍：

• 内边距（padding）：内边距是指内容区域与边框之间的距离，它可以通过 CSS 的 padding 属性进行设置。内边距可以用来调整元素内容与边框之间的间距，从而影响元素的大小和布局。

示例代码：

.box {
    padding: 20px; /* 设置内边距为 20 像素 */
}

.inner {
    padding-top: 10px; /* 设置顶部内边距为 10 像素 */
    padding-right: 15px; /* 设置右侧内边距为 15 像素 */
    padding-bottom: 10px; /* 设置底部内边距为 10 像素 */
    padding-left: 15px; /* 设置左侧内边距为 15 像素 */
}

• 外边距（margin）：外边距是指元素与相邻元素之间的距离，它可以通过 CSS 的 margin 属性进行设置。外边距可以用来控制元素与其周围元素之间的间距，从而影响页面布局和元素的排列方式。

示例代码：

.box {
    margin: 20px; /* 设置外边距为 20 像素 */
}

.outer {
    margin-top: 10px; /* 设置顶部外边距为 10 像素 */
    margin-right: 15px; /* 设置右侧外边距为 15 像素 */
    margin-bottom: 10px; /* 设置底部外边距为 10 像素 */
    margin-left: 15px; /* 设置左侧外边距为 15 像素 */
}

4.3 浏览器默认边距

由于历史原因，以及浏览器厂商约定俗成的关系，一般浏览器都会给我们设定默认边距。

为了不让默认边距影响我们的页面，我们一般会在样式设置开头将浏览器给我们的默认值重新设置为0，例如：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

其中，上述box-sizing: border-box;是在设置长宽比例时，让具体效果比例尽量不要出屏（感觉这句解释了半天都没解释清楚，见谅，作为后端猿，目标仅仅是会用，具体效果通过动手体验）

5. 布局

布局是网页设计中至关重要的一部分，它决定了页面上各个元素的位置和排列方式。在 CSS 中，有多种布局方式可供选择，包括定位、浮动等。本节将介绍常见的布局技术及其应用。

5.1 定位

定位是一种常用的布局技术，它允许我们精确地控制元素在页面中的位置。在 CSS 中，有三种常见的定位方式：相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。通过这些定位方式，我们可以实现元素的层叠效果、悬浮效果以及其他特殊布局需求。

示例代码：

.relative {
    position: relative; /* 设置相对定位 */
    left: 20px; /* 元素相对于原始位置向右偏移 20 像素 */
    top: 10px; /* 元素相对于原始位置向下偏移 10 像素 */
}

.absolute {
    position: absolute; /* 设置绝对定位 */
    right: 0; /* 元素相对于父元素的右侧对齐 */
    bottom: 0; /* 元素相对于父元素的底部对齐 */
}

.fixed {
    position: fixed; /* 设置固定定位 */
    top: 0; /* 元素固定在页面顶部 */
    left: 0; /* 元素固定在页面左侧 */
}

5.2 浮动

浮动是一种常见的布局技术，它允许元素在页面上左右移动，直到碰到父容器或其他浮动元素为止。浮动常用于创建多列布局或实现图片与文本的环绕效果。在 CSS 中，我们可以通过 float 属性来设置元素的浮动方式，通常取值为 left 或 right。

示例代码：

.float-left {
    float: left; /* 元素向左浮动 */
}

.float-right {
    float: right; /* 元素向右浮动 */
}

.clearfix::after {
    content: "";
    display: table;
    clear: both; /* 清除浮动，确保父元素包裹浮动元素 */
}

6. 总结

本文我们学习了CSS。为了提高码字效率，从第3节开始，大部分内容我列了个大纲给GPT生成，校验后再发布。若读者发现其中的纰漏，欢迎评论区留言，第一时间改正！