CSS 菜鸟

小蓝 • 2024-11-10 01:11 • 编程

CSS（Cascading Style Sheets）是一种用于描述 HTML 或 XML 文档外观样式的语言。CSS 的主要作用是将文档的表现与内容分离，并使 Web 页面的布局更加灵活。本文将从多个方面介绍 CSS 菜鸟应该掌握的知识点。

一、选择器

选择器是指定要样式化元素的规则。CSS 选择器有很多种，下面介绍几个常见的选择器。

1. 标签选择器

p {
    font-size: 16px;
    color: #333;
}

这段 CSS 代码表示对所有 <p> 标签应用字体大小为 16px、颜色为 #333 的样式。

2. 类选择器

.red {
    color: red;
}

这段 CSS 代码表示对具有 class="red" 的元素应用红色字体颜色。

3. id 选择器

#header {
    background-color: #eee;
}

这段 CSS 代码表示对具有 id="header" 的元素应用背景颜色为 #eee。

4. 相邻兄弟选择器

h1 + p {
    font-weight: bold;
}

这段 CSS 代码表示对紧接在 <h1> 后面的 <p> 元素应用粗体样式。

5. 后代选择器

article a {
    color: blue;
}

这段 CSS 代码表示对所有在 <article> 元素中的链接应用蓝色字体颜色。

二、盒模型

在 CSS 中，每个元素都是一个矩形框，被称为盒子。盒子由四个部分组成：内容、内边距、边框和外边距。

.box {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 20px;
}

这段 CSS 代码表示一个宽度为 200px、高度为 100px、内边距为 10px、边框为 1px 实线灰色边框和外边距为 20px 的盒子。

三、布局

布局是 Web 开发中最重要的部分之一，CSS 提供了多种方法来布局页面。

1. 流式布局

流式布局是指页面上的元素会根据视口大小自动调整其大小和位置。以下是一个简单的流式布局示例。

.page {
    width: 80%;
    margin: 0 auto;
}

.item {
    width: 25%;
    float: left;
}

这段 CSS 代码表示一个宽度为 80% 的页面容器，内部包括四个宽度为 25% 的元素。

2. 弹性布局

弹性布局是指页面上的元素可以根据设备屏幕的大小自适应进行布局。以下是一个简单的弹性布局示例。

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    flex-basis: calc(33.33% - 30px);
    margin-bottom: 20px;
}

这段 CSS 代码表示一个弹性容器，内部包括多个宽度相等的元素，并且它们之间的间隔为 30px。

3. 网格布局

网格布局是指页面上的元素被组织成行和列。以下是一个简单的网格布局示例。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 100px);
    gap: 20px;
}

.item {
    background-color: #eee;
    padding: 20px;
}

这段 CSS 代码表示一个网格容器，内部包括 3 列、4 行的矩阵，并且每个单元格之间的间隔为 20px。

四、动画

CSS 也可以用于创建动态效果，包括过渡和关键帧动画。

1. 过渡

过渡是一种平滑地将一个 CSS 属性值更改为另一个 CSS 属性值的方法。以下是一个简单的过渡示例。

.box:hover {
    background-color: blue;
    transition: background-color 1s ease;
}

这段 CSS 代码表示当鼠标悬停在盒子上时，背景颜色从原来的颜色平滑地过渡到蓝色，过渡时间为 1 秒。

2. 关键帧动画

关键帧动画是一种定义动画的重点时刻方法，用于指示在各个时间点应用不同的 CSS 样式。以下是一个简单的关键帧动画示例。

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.box {
    animation: rotate 2s linear infinite;
}

这段 CSS 代码表示一个旋转动画，盒子将按顺时针方向旋转 360 度，持续时间为 2 秒，并且无限循环播放。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/150975.html