css学习

已于 2024-06-12 15:41:04 修改
阅读量1.3k 收藏 11
点赞数 18
分类专栏： 前端 文章标签： css 学习 前端
于 2024-06-11 15:34:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_66989547/article/details/139598871
版权

目录

前言

一、入门 CSS 学习

学习 CSS 的基本语法和选择器

了解盒模型（margin、border、padding、content）

掌握 CSS 的基本布局方式（浮动、定位、Flexbox、Grid）

学习如何设置文本样式、背景、边距等

二、进阶 CSS

学习 CSS 的高级选择器和伪类

掌握 CSS 的动画和过渡效果

动画和过渡阶段

学习如何使用 CSS 的变量和继承

掌握 CSS 的响应式设计

响应式设计阶段

三、CSS 优化

1、精简代码

2、使用 CSS 预处理器

3、使用浏览器 DevTools 进行优化

4、优化选择器

5、使用 CSS 网格布局

6、使用 CSS 动画和过渡

7、使用 CSS 变量

8、使用 CSS 模板

9、使用 CSS 预加载器

10、优化图片和媒体资源

四、CSS 实战

Bootstrap

Vue.js

React

Git

GitHub

Slack

五、CSS 高级技巧

学习 CSS 的高级布局技巧（如 Grid、Flexbox）

掌握 CSS 的布局算法和响应式布局

学习如何使用 CSS 创建复杂的动画和效果

掌握 CSS 的国际化和本地化技巧

总结

前言

CSS（Cascading Style Sheets）是一种用于设置网页元素的样式和布局的代码语言。它允许设计师和开发者在网页中定义文本、背景、边距、填充等样式属性，以及使用不同的布局模型来创建各种布局和效果。

学习 CSS 可以帮助你更好地理解和掌握网页设计和开发的基本技能。它不仅可以让你创建美观、易用的网页，还可以让你更好地与设计师和前端开发者进行沟通和协作。

虽然 CSS 看起来很简单，但它也有很多高级技术和功能，可以让你创建更加复杂和动态的网页效果。因此，学习 CSS 并不仅仅是学习一些基础的样式和布局技巧，还需要掌握一些高级技术和实践。

提示：以下是本篇文章正文内容，下面案例可供参考

一、入门 CSS 学习

参考

  • 学习 CSS 的基本语法和选择器

CSS 选择器用于选中要应用样式的元素。学习 CSS 时，你需要了解基本的选择器，如元素选择器、类选择器、ID 选择器、伪类选择器等。同时，了解 CSS 的基本语法，如属性和值的写法等。

  1. CSS 选择器
/* 元素选择器 */
p {
  color: blue;
}

/* 类选择器 */
.my-class {
  color: red;
}

/* ID 选择器 */
#my-id {
  color: green;
}

/* 伪类选择器 */
a:hover {
  color: yellow;
}
  • 了解盒模型（margin、border、padding、content）

盒模型是 CSS 中的一个重要概念。了解盒模型的四个部分：margin（外边距）、border（边框）、padding（内边距）和 content（内容）。掌握如何设置这些属性的值，可以使你更好地控制元素的布局和外观。

  1. 盒模型
/* margin */
.my-element {
  margin: 10px;
}

/* border */
.my-element {
  border: 1px solid black;
}

/* padding */
.my-element {
  padding: 10px;
}

/* content */
.my-element {
  width: 200px;
  height: 100px;
}
  • 掌握 CSS 的基本布局方式（浮动、定位、Flexbox、Grid）

CSS 有多种布局方式，包括浮动（float）、定位（position）、Flexbox 和 Grid。了解这些布局方式的工作原理和优缺点，可以帮助你更好地设计网页布局。

  1. CSS 布局方式
/* 浮动 */
.float-left {
  float: left;
}

/* 定位 */
.position-relative {
  position: relative;
}

/* Flexbox */
.flex-container {
  display: flex;
}

/* Grid */
.grid-container {
  display: grid;
}
  • 学习如何设置文本样式、背景、边距等

学习如何设置文本样式，如字体、颜色、大小等。了解如何设置背景，如背景颜色、图片等。同时，掌握如何设置边距、填充等属性，可以使你更好地控制元素的外观和布局。

  1. 设置文本样式、背景、边距等
/* 文本样式 */
.my-element {
  font-family: Arial;
  color: black;
  font-size: 16px;
}

/* 背景 */
.my-element {
  background-color: yellow;
}

/* 边距 */
.my-element {
  margin: 10px;
}

二、进阶 CSS

  • 学习 CSS 的高级选择器和伪类

在进阶阶段，你可以学习一些高级选择器和伪类，例如后代选择器、相邻兄弟选择器、伪类 :hover 等等。下面是一个使用后代选择器和伪类的例子：

/* CSS 样式表的开始标记 */
<style>
    /* 后代选择器，用于选择所有位于 <div> 标签内的 <h2> 标签 */
    div > h2 {
        color: blue; /* 设置字体颜色为蓝色 */
        text-decoration: underline; /* 在文本下方添加下划线 */
    }

    /* 伪类选择器，用于选择所有位于 <a> 标签内的文本 */
    a:hover {
        color: green; /* 当鼠标悬浮在链接上时，设置字体颜色为绿色 */
    }
</style>

在这个例子中，我们使用了后代选择器 div > h2 来选择所有位于 <div> 标签内的 <h2> 标签，并设置了它们的字体颜色和下划线。我们还使用了伪类选择器 a:hover 来选择所有位于 <a> 标签内的文本，并在鼠标悬浮在链接上时设置字体颜色为绿色。

  • 掌握 CSS 的动画和过渡效果

动画和过渡阶段

在动画和过渡阶段，你可以学习如何使用 CSS 来创建动画和过渡效果。下面是一个使用 CSS 动画的例子：

/* CSS 样式表的开始标记 */
<style>
    /* 动画选择器，用于选择所有具有 class="animate" 的元素 */
    .animate {
        animation: myAnimation 2s infinite; /* 设置动画名称、持续时间、播放次数 */
    }

    @keyframes myAnimation {
        0% { transform: scale(1); } /* 动画开始时的缩放比例 */
        50% { transform: scale(1.5); } /* 动画中间时的缩放比例 */
        100% { transform: scale(1); } /* 动画结束时的缩放比例 */
    }
</style>

在这个例子中，我们使用了动画选择器 .animate 来选择所有具有 class="animate" 的元素，并设置了动画名称、持续时间、播放次数等属性。我们还使用了 @keyframes 命令来定义动画的各个状态，包括动画开始时、中间时和结束时的缩放比例。

  • 学习如何使用 CSS 的变量和继承

在变量和继承阶段，你可以学习如何使用 CSS 的变量和继承特性来简化代码和提高可读性。下面是一个使用 CSS 变量的例子：

/* CSS 样式表的开始标记 */
<style>
    /* CSS 变量，用于设置主题颜色 */
    :root {
        --primary-color: blue; /* 设置主题颜色为蓝色 */
    }

    .button {
        background-color: var(--primary-color); /* 使用 CSS 变量来设置按钮的背景颜色 */
        color: white; /* 设置按钮文本颜色为白色 */
    }
</style>

在这个例子中，我们使用了 CSS 变量 --primary-color 来设置主题颜色，然后在 .button 类中使用 var() 函数来引用这个变量，从而设置按钮的背景颜色。我们还设置了按钮文本颜色为白色。

  • 掌握 CSS 的响应式设计

响应式设计阶段

在响应式设计阶段，你可以学习如何使用 CSS 响应式设计来创建适用于不同设备和屏幕尺寸的网页。下面是一个使用 CSS 响应式设计的例子：

/* CSS 样式表的开始标记 */
<style>
    /* 响应式布局，用于在屏幕宽度小于 600 像素时将文本内容垂直对齐 */
    .container {
        display: flex; /* 使用 flexbox 布局 */
        flex-direction: column; /* 设置 flexbox 布局方向为垂直方向 */
        justify-content: center; /* 设置 flexbox 垂直对齐方式为居中对齐 */
        align-items: center; /* 设置 flexbox 水平对齐方式为居中对齐 */
    }

    @media only screen and (max-width: 600px) {
        .container {
            flex-direction: column; /* 当屏幕宽度小于 600 像素时，设置 flexbox 布局方向为垂直方向 */
            justify-content: center; /* 当屏幕宽度小于 600 像素时，设置 flexbox 垂直对齐方式为居中对齐 */
            align-items: center; /* 当屏幕宽度小于 600 像素时，设置 flexbox 水平对齐方式为居中对齐 */
        }
    }
</style>

在这个例子中，我们使用了 CSS 响应式设计来创建一个垂直对齐的容器，当屏幕宽度小于 600 像素时，容器内的文本内容将垂直对齐。我们使用了 @media 命令来设置不同的布局和对齐方式，从而适应不同屏幕尺寸的设备。

三、CSS 优化

当涉及到网页开发时，CSS（层叠样式表）是至关重要的。CSS 不仅用于设置文本样式、颜色和布局，它还可以影响网页的加载速度和性能。以下是一些优化 CSS 代码的方法，以提高网页的性能：

1、精简代码

精简代码是提高 CSS 性能的重要步骤。这意味着删除不必要的代码和注释。你可以使用 CSS 压缩工具来实现这一点，例如 CSSNano 或 Terser。这些工具可以删除不必要的空格、换行和注释，从而减小文件大小。

/* 不必要的注释 */
body {
    background: #fff; /* 删除不必要的注释 */
    margin: 0; /* 删除不必要的注释 */
}
2、使用 CSS 预处理器


CSS 预处理器，如 Sass 或 Less，可以让你使用变量、函数和嵌套等特性来编写 CSS 代码。这不仅可以使代码更易于维护和更新，还可以帮助优化代码。预处理器通常会生成更紧凑、更高效的 CSS 代码。

/* 使用 Sass 编写 */
$primary-color: #333;

body {
    background: $primary-color;
    color: $primary-color;
}

3、使用浏览器 DevTools 进行优化


浏览器 DevTools 是一个强大的工具，可以帮助你识别和优化网页的性能。你可以使用它来查看网页的渲染时间、资源加载时间等。通过分析这些数据，你可以发现哪些 CSS 代码可以被优化。

4、优化选择器


选择器是 CSS 中用于选择要应用样式的元素的部分。优化选择器可以显著提高 CSS 性能。以下是一些优化选择器的方法：

  • 尽可能使用具体的类名和 ID 名，而不是模糊的元素名。
  • 尽量避免使用通配符 (*) 和后代选择器 (e.g. .container .item)。
  • 尝试使用更具体的元素和类名来减少浏览器的搜索范围。
/* 避免使用通配符和后代选择器 */
* {
    margin: 0;
}

.container .item {
    color: #333;
}
  • 尝试使用更具体的元素和类名来减少浏览器的搜索范围。
/* 更具体的元素和类名 */
button {
    margin: 0;
}

.main .item {
    color: #333;
}
5、使用 CSS 网格布局


CSS 网格布局是一个强大的工具，可以让你创建复杂的布局，同时保持代码的整洁和高效。使用 CSS 网格布局可以避免使用嵌套的 div 元素，从而提高代码的可读性和性能。

/* 使用 CSS 网格布局 */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.grid-item {
    background: #333;
    color: #fff;
    padding: 20px;
}
6、使用 CSS 动画和过渡


CSS 动画和过渡可以让你创建动态和交互式的效果，同时保持代码的高效和可维护。使用 CSS 动画和过渡可以避免使用 JavaScript 动画，从而提高网页的性能。

/* 使用 CSS 动画 */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.slide-in {
    animation: slideIn 0.5s ease-in-out;
}
7、使用 CSS 变量


CSS 变量可以让你在 CSS 中定义变量，并在需要的时候使用它们。使用 CSS 变量可以减少代码的重复和维护成本，同时提高代码的可读性和性能。

/* 使用 CSS 变量 */
:root {
    --primary-color: #333;
}

body {
    background: var(--primary-color);
    color: var(--primary-color);
}
8、使用 CSS 模板


CSS 模板可以让你创建可重用的组件，并在需要的时候使用它们。使用 CSS 模板可以减少代码的重复和维护成本，同时提高代码的可读性和性能。

/* 使用 CSS 模板 */
@template container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    padding: 20px;
}

@apply container;
9、使用 CSS 预加载器


CSS 预加载器可以让你在网页加载时显示一个动画或指示器，从而提高用户体验。使用 CSS 预加载器可以避免使用 JavaScript 预加载器，从而提高网页的性能。

/* 使用 CSS 预加载器 */
.preloader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

.show-preloader {
    display: block;
}
10、优化图片和媒体资源


优化图片和媒体资源可以显著提高网页的加载速度。你可以使用图片压缩工具，例如 TinyPNG 或 JPEGmini，来减小图片的大小。还可以使用媒体查询和懒加载技术来优化媒体资源。

/* 使用媒体查询 */
@media only screen and (max-width: 768px) {
    img {
        width: 100%;
    }
}

/* 使用懒加载技术 */
img {
    lazyload: true;
}

以上是一些优化 CSS 代码的方法，以提高网页的加载速度和性能。请记住，优化 CSS 代码是一个持续的过程，需要不断地测试和改进。

四、CSS 实战

除了学习前端框架，你还应该学习如何与团队协作，进行前端开发。以下是一些常用的协作工具和资源：

通过学习这些前端框架和协作工具，你可以更好地应对实际项目中的挑战，提高你的前端开发技能。

五、CSS 高级技巧

  • 学习 CSS 的高级布局技巧（如 Grid、Flexbox）
  1. Grid 和 Flexbox
    Grid 和 Flexbox 是 CSS 中用于布局的高级技巧。它们可以帮助你创建复杂的页面布局，同时保持代码的整洁和高效。以下是一些学习资源：
  1. 布局算法
    CSS 布局算法是一种用于计算和调整元素位置和大小的算法。了解布局算法可以帮助你更好地理解 CSS 布局的工作原理，并优化你的布局代码。以下是一些学习资源：
  • 掌握 CSS 的布局算法和响应式布局
  1. 响应式布局
    响应式布局是一种用于创建适应不同设备和屏幕尺寸的网页布局的技巧。了解响应式布局可以帮助你更好地设计和开发适应不同设备的网页。以下是一些学习资源：
  • 学习如何使用 CSS 创建复杂的动画和效果
  1. CSS 动画和效果
    CSS 动画和效果可以让你创建动态和交互式的网页效果。以下是一些学习资源：
  • 掌握 CSS 的国际化和本地化技巧
  1. CSS 动画和效果
    CSS 动画和效果可以让你创建动态和交互式的网页效果。以下是一些学习资源：

总结

学习 CSS 需要从基本语法和选择器开始，逐步掌握布局、样式、优化等技能，同时需要不断实践和积累经验。

超详细的学习笔记：CSS基础（附代码示例）
lbcbjtlhmjq的博客
06-30 3190
CSS入门容易，精通难。因为CSS的属性很多，一个一个去学去记根本不可能，我们要善于借助网络工具。关于HTML和CSS的学习资源，网上的在线教程、速查宝典就有一大推。所以只要了解HTML和CSS标签及属性的基本用法，再借助于在线文档，基本上HTML和CSS的学习就不会有太大问题。但是要提醒大家的是，不要完全依赖于在线文档。最基本的一些属性（比如字体样式、文本样式等）还是需要掌握并且熟练使用，我写这篇博客就是为了让大家更好地熟悉并运用CSS的常见属性。
路恩CSS学习助手
07-07
路恩CSS学习助手，可快速查找css1、css2、css3全部属性和值，并配有每个属性和值的简要说明；对CSS语法规则和CSS选择器也做了详细介绍；并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件...
css知多少（2）——学习css的思路
weixin_34235371的博客
02-06 154
两周之前写过该系列的第一篇，其实当时只是一个想法，这段时间迟迟未更新，是在思考一个解决过程。现在初有成效，就开更吧。 1． 一个段子 　　开题不必太严肃，写博客也不像写书，像聊天似的写东西是最好的表达方式。        记得之前看过一个段子，也可能是一件真事儿，这不重要。大体内容如下：一个香港的教授说：我们香港的大学和大陆的大学差的很远啊，大陆的大学连看门保安都懂得哲学，因为当你想要进入校...
基础CSS学习
最新发布
weixin_74785181的博客
04-15 612
当屏幕大小最大在768px以下的页面显示为蓝色，当像素在768px到996px的显示为绿色，在996px以上的显示为黄色，不足可以显示不同的颜色，只要在媒体查询语句中的代码，只要设置好不同的屏幕大小，就可以显示像手机端到平板端到电脑端只要写一个代码就可以在不同端的平滑过渡。CSS3弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。0%是动画的开始，100%是动画的结束。
如何学习 CSS
前端大全
05-18 734
（给前端大全加星标，提升前端技能）英文：rachel-andrew 译文：廖泽恩https://zhuanlan.zhihu.com/p/57994014很多人想让我给...
css奇数偶数选择器_【译】如何学习 CSS
weixin_39915427的博客
11-29 181
原文地址：How To Learn CSS原文作者：rachel-andrew译者：liaozeen很多人想让我给他们推荐有关CSS部分的教程，或者问我如何学习CSS。 我也看到很多人对CSS的部分内容感到困惑，一部分原因是由于对语言的过时认识。 鉴于CSS在过去几年中发生了相当大的变化，这是一个更新知识的好时机。 即使CSS只是你所做工作的一小部分（因为你使用其他技术栈），CSS是你最终希望在屏...
CSS学习
雷神乐乐的博客
11-10 1207
CSS学习
html+css学习.zip
01-01
html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习...
HTML和CSS学习.zip
01-01
HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习...
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
html+css学习记录.zip
01-01
html+css学习记录html+css学习记录html+css学习记录html+css学习记录 html+css学习记录html+css学习记录html+css学习记录html+css学习记录 html+css学习记录html+css学习记录html+css学习记录html+css学习记录 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值