CSS
关注
分享
扫一扫
文章平均质量分 85
冲吧c3
GoldenaArcher
Done is better than perfect
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Tailwind CSS 速成
完成了 responsive 和特效的学习后，现在折腾一下 tailwind CSS，这个 CSS 库本身就包含了很多的 utility class，之前跟着 yt 的视频写项目的时候，写了两个项目，好像不记得写过 CSS……整体来说就是对它好奇了很久，现在系统化的过一遍。Tailwind CSS 的特点就在于：它是一个原子化的 UI 库本身实现的颜色、功能其实挺多的，常规项目可能没什么特别需要定制的地方。原创 2023-09-07 09:23:39 · 813 阅读 · 0 评论 -
SASS 学习笔记 II
上篇笔记，中包含：配置变量嵌套这里加一个扩展，嵌套中有一个的用法，使用可以指代当前 block 中的 selector，后面可以追加其他的选择器。如当前的 scope 是form，可以在嵌套中使用&-selector指代，如：原创 2023-08-17 02:55:23 · 1522 阅读 · 0 评论 -
SASS 学习笔记
SASS 是 CSS 预处理，它提供了变量（虽然现在 CSS 也提供了，不过 SASS 的更加灵活），嵌套、mixin、函数、导入和扩展等功能，可以高效地做到代码复用。SASS 包括 SASS 和 SCSS，二者都支持嵌套、mixin 和变量，主要的区别在：语法SCSS 的语法更加贴近 CSS，而 SASS 不适用{}和;，并且依赖缩进定义结构（有点类似 python 的写法）因此 SASS 的排版必然是更加简洁和美观的，相对而言刚从 CSS 转到 SASS 也有可能会不太适应兼容性。原创 2023-08-16 03:07:41 · 1334 阅读 · 0 评论 -
一些常见的 CSS 规范
OOCSS 是 Object-Oriented CSS 的缩写，是 Nicole Sullivan 于 2008 年提出的一种 CSS 规范，使用 OOCSS 可以让 CSS 更提高复用性和扩展性，同样也更容易管理，其主要目的也是为了写出具灵活、模块化和可复用的组件。对于 OOCSS 来说，任何重复的模式都可以已成为对象，即一段特定代码。而对于 OOCSS 来说，以下几个主旨是一定需要遵从的对象也要有明确的 结构(structure) 和皮肤(skin)。结构包含的对象有：皮肤包含的对象有：举例：可以简化原创 2022-06-16 05:30:00 · 395 阅读 · 0 评论 -
绘制中国象棋棋盘 - CSS Pseudo Elements 的使用
绘制中国象棋棋盘 - CSS Pseudo Selector 的使用比起国际象棋：象棋棋盘的绘制要稍微难一些：主要原因在于，国际象棋的落子在格子中，象棋的落子在交叉点上。因此，国际象棋的布局可以使用 background-color: #fff 以及 background-color: #aaa 标记奇数和偶数的格子——这一点 CSS 也有提供 nth-child() 这个 pseudo class 可以方便且高效的完成任务，但是中国象棋的处理相对而言就稍微麻烦一些。不过，在经过一番搜索后，发现原创 2022-04-07 13:50:15 · 1162 阅读 · 0 评论 -
sass简易配置
node项目中sass最简易的配置，原网址：Minimum Static Site Setup with Sass，package.json如下：{ "name": "project", "version": "0.1.0", "description": "SASS compile|autoprefix|minimize and live-reload dev server using Browsersync for static HTML", "main": "public/index转载 2022-03-19 14:00:30 · 771 阅读 · 0 评论 -
精通 CSS 第 10 章 变换、过渡与动画 学习笔记
精通 CSS 第 10 章 变换、过渡与动画 学习笔记这一章主要讲的还是让元素“动”起来的特性，主要内容在以下几章学习笔记中有讲到，这里可以算是一个系统性整合了：CSS3 新特性学习中含了 transition特性，即过渡CSS 2D Transform 学习笔记2D 变换的笔记在这里CSS 动画 学习笔记和学习案例动画，即 关键帧动画@keyframe 的笔记在这里学完一起做个走马灯吧 - CSS 3D 转换学习笔记&学习案例3D 变换的笔记在这里都学过了，原创 2021-05-23 02:12:04 · 381 阅读 · 7 评论 -
学完一起做个走马灯吧 - CSS 3D 转换学习笔记&学习案例
学完一起做个走马灯吧 - CSS 3D 转换学习笔记&学习案例3D 转换是之前学的 CSS 2D Transform 的进阶，顾名思义，即物体看起来并非在平面上产生形变，而是在空间中进行位置改变。笔记内容不是很长，所以学习笔记和学习案例整合在一起了。上半部分是学习笔记，一些基础的语法，第二大部分是学习案例，一些应用。学习案例包括以下几个：perspective 的重要性xyz 三轴的旋转怎样使得元素在三维空间中旋转三维空间转换的两个案例综合案例笔记三维坐标系x 轴右正原创 2021-05-21 02:38:55 · 503 阅读 · 2 评论 -
CSS 动画 学习笔记和学习案例
CSS 动画 学习笔记和学习案例动画（Animation）是 CSS3 中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相较于过渡，动画可以实现更多变化、更多控制、连续自动播放等效果。笔记内容不是很长，所以学习笔记和学习案例整合在一起了。上半部分是学习笔记，一些基础的语法，第二大部分是学习案例，一些应用。学习案例包括以下几个：基础的 animation 案例，以及其升级版本（即 transform 做比较困难的功能）模拟打字机效果输出文字奔跑的原创 2021-05-20 02:38:41 · 672 阅读 · 1 评论 -
精通 CSS 第 9 章 表单与数据表 学习笔记
精通 CSS 第 9 章 表单与数据表 学习笔记表单和数据表应该是业务最为重要的一个部分了，包含并不限于以下用途：展示数据、布局（早期用法）、注册、登录、留言、填写信息……我总是觉得，要将表单设计的好看，是一件挺困难的事情。设计数据表开始使用的案例是做的一个日历，这是什么样式都没有添加的时候：能看，但是确实看起来不舒服，这时候的源码是这样的：<!DOCTYPE html><html lang="en"> <head> <meta char原创 2021-05-15 02:35:08 · 557 阅读 · 3 评论 -
CSS 2D Transform 学习笔记
CSS 2D Transform 学习笔记还是来自 黑马程序员 pink 老师前端入门教程，零基础必看的 h5(html5)+css3+web 前端视频教程 部分学习笔记，这一段是关于 CSS3 中 2D Transform 怎么使用的学习笔记。2D 转换转换(transform)是 CSS3 中具有颠覆性的特性之一，可以实现元素的位移、旋转、缩放等特效。移动, translate移动元素，类似于 定位语法：transform: translate(x, y);/* 或者分开写 */t原创 2021-05-12 03:00:01 · 332 阅读 · 2 评论 -
精通 CSS 第 8 章 响应式布局 学习笔记
精通 CSS 第 8 章 响应式布局 学习笔记起源部分略过，笔记的顺序和章节的顺序有所调换响应式的案例在 精通 CSS 第 8 章 响应式布局 学习案例，可以搭配 flexbox 和 网格布局 的部分一起食用。案例做了三个，一个 flexbox，一个常规场景，既不是 flexbox 也不是网格布局的布局，还有就是网格布局了。浏览器视口视口(Viewport) 是移动 Web 开发中一个非常重要的概念，最早是由苹果公司在推出 iPhone 手机时发明的，其目的是为了让 iPhone 的小屏幕尽可能原创 2021-05-09 01:24:16 · 364 阅读 · 1 评论 -
精通 CSS 第 8 章 响应式布局 学习案例
精通 CSS 第 8 章 响应式布局 学习案例响应式的学习案例总共做了 3 个，一个是 flex 的响应式，还有两个是将之前在 精通 CSS 第 7 章学习笔记（上） 和 精通 CSS 第 7 章学习笔记（下） 中做的两个案例转化为响应式。flexbox 的响应式flexbox 好像是没有媒体查询（media query）——至少书上是这么说的。不过 flexbox 本身就有自适应的特效，对于很多不以屏幕尺寸不敏感，而对元素盒子尺寸更加敏感的内容就比较友好了。文中的例子是一个类似购物车中的商品模式，原创 2021-05-08 03:48:47 · 690 阅读 · 1 评论 -
CSS3 新特性学习
CSS3 新特性学习来自 黑马程序员 pink 老师前端入门教程，零基础必看的 h5(html5)+css3+web 前端视频教程 的内容，从 p280 开始到 p296 结束。主要讲的新特性具有以下两个特点：开发常用的新特性部分在这个教程内用得到的新特性兼容性是有问题的，IE9 以上才支持新增的选择器在 CSS 选择符 也有提到过一些，其实想要了解更多的话还是看看 MDN 这样的文档比较好。属性选择器关于属性选择器这部分，我在制作 学成在线 制作分解版 时，也有使用。导航栏原创 2021-05-06 01:49:56 · 281 阅读 · 2 评论 -
CSS3 新特性学习案例
CSS3 新特性学习案例先放一个结合了 JavaScript 的案例，做完了之后发现 CSS 的动画真的蛮有意思的，怪不得之前看到 PVZ（植物大战僵尸, Plant vs Zombie）也有用 H5C3 + JS 实现的:案例 1,使用伪元素完成导航栏悬浮切割这种轮播的功能其实真的还蛮适合拆出来单独作为组件的拆分，只要将轮换的宽度传进去，就可以做到复用了——毕竟点击事件的效果都是一样的。效果图：<!DOCTYPE html><html lang="en"> &l原创 2021-05-05 02:14:22 · 298 阅读 · 1 评论 -
精通 CSS 第 7 章学习笔记（下）
精通 CSS 第 7 章学习笔记（下）「精通 CSS 高级 Web 标准解决方案（第三版）」中 7.3，Grid Layout 的内容。除了书上的内容之外，我也另外找到了一个长期更新的，关于 Grid Layout 信息的网站，不过是英文的。另外，我会尝试将 精通 CSS 第 7 章学习笔记（上） 中实现的部分用 Grid Layout 实现。上一篇中最终完成的效果图如下：基础定义网格容器 (Grid Container)display: grid; 作用的元素网格项 (Grid原创 2021-05-02 02:17:45 · 325 阅读 · 1 评论 -
精通 CSS 第 7 章学习笔记（上）
精通 CSS 第 7 章学习笔记（上）「精通 CSS 高级 Web 标准解决方案（第三版）」中 7.1 和 7.2，布局规划 与 创造灵活的页面布局的内容总结和案例学习以浮动模式为基础，进行渐进增强（向下兼容），添加 flexbox 进行页面优化布局规划开始实现页面的具体布局之前，总归是要做一些基础规划的。在 学成在线-静态页面终结版 中的反思部分也提到了，就是做到后面之后才发现很多页面的布局规划都是可以提取出来的，而一旦提取出来了，就也不会发生很多代码重复的问题了。布局辅助类一些最为简单原创 2021-05-01 02:43:13 · 328 阅读 · 1 评论 -
CSS初始化的两种常见方法
CSS初始化的两种常见方法两种CSS初始化的常见方案，都是通用类的CSS resetEric Meyer写的 CSS reset，源码不是很长：/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, bloc转载 2021-04-30 13:26:21 · 2740 阅读 · 1 评论 -
CSS 的十个高级使用技巧
CSS 的十个高级使用技巧总共 10 个案例，分别为：精灵图字体图标鼠标样式的改变输入框边框(outline)的调整行内块的垂直居中图片底部空白缝隙的处理溢出的文字用省略号代替布局技巧三角形小技巧CSS 初始化案例 1，精灵图这个案例之前在 JavaScript 事件操作案例学习 中写过了，主要还是依靠使用 background-position 调整 x 轴和 y 轴的值，从而从精灵图中拉取到正确的图片进行渲染。效果图：原图：代码：<!DOCTYPE h原创 2021-04-28 02:32:59 · 1171 阅读 · 3 评论 -
精通 CSS 第 6 章学习笔记
第 6 章的内容，内容布局，个人看来已经到了基础知识的最硬核部分了。之前的内容，文字、背景、排版相对而言还是比较散的内容，内容布局这一块儿就是将所有散碎的知识点串连到一起，形成一个完整的页面的步骤了。这章的内容分为三大块，第一块是 定位(position)，第二块是 水平布局，其中包含浮动和行内块布局，以及第三块 flex。书上讲了使用行内块元素进行垂直居中的方法，看起来还是蛮有意思的。原创 2021-04-25 01:19:07 · 294 阅读 · 0 评论 -
CSS Flexbox 学习笔记
CSS Flexbox 学习笔记flexbox，也就是 Flexible Box Layout 模块，是 CSS 提供的用于布局的一套新属性。这套书性保函针对容器（弹性容器，flex container）和针对其直接子元素（弹性项，flex item）的两类属性。flexbox 可以控制弹性项的以下方面：两个轴向上的对齐与分布大小，基于内容及可用空间流动方向，水平还是垂直，正向还是反向顺序，与源代码中的顺序无关使用方式：将父元素的 display 设置为 flex，如：.paren原创 2021-04-24 02:56:31 · 255 阅读 · 1 评论 -
CSS Flexbox学习案例
两个学习案例，一个是 「精通 CSS 高级 Web 标准解决方案（第 3 版）」 书上的一个多行标签的案例，一个是自己写的色子的布局案例。色子的布局案例用的是 flex 的嵌套，用 flex 的嵌套的功能真的挺强大的，搭配上合理的 CSS 的层叠特性已经能够完成很多事情了。案例1，多行标签案例在宽度不同的窗口上的效果图：这里主要用到的特性有：使用 flex-wrap: wrap; 完成了自动这行功能使用 flex-grow 实现标签的自动增长使用了 max-width 限制了自增.原创 2021-04-23 21:46:20 · 268 阅读 · 1 评论 -
CSS 定位 position 学习笔记
定位不适合总体布局，因为它会把元素拉出页面的正常流。反过来看，这也正是定位在 CSS 中之所以重要的原因。原创 2021-04-23 01:28:09 · 266 阅读 · 1 评论 -
CSS 定位案例学习 - 焦点图
主要使用了 相对定位 和 绝对定位 完成了焦点图的页面布局视频资料还是来源于 [黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩](https://www.bilibili.com/video/BV14J4114768?p=221)部分的内容，从 p221 开始到 p244 这个阶段都是定位相关的，这个案例也是这上面的案例学习原创 2021-04-20 12:44:00 · 786 阅读 · 1 评论 -
CSS 浮动学习笔记
内容分别总结自 「精通 CSS 高级 Web 标准解决方案（第三版）」和 [黑马程序员 pink 老师前端入门视频教程 HTML5+CSS3+移动端布局-flex 布局 rem 布局响应式布局摹客蓝湖使用-简单有趣好玩](https://www.bilibili.com/video/BV14J4114768?p=169) 部分的内容。如果对 `float` 的基础不是很好的，可以先看视频再看书搭配着理解，否则但看书会觉得有点抽象。原创 2021-04-16 01:14:20 · 260 阅读 · 0 评论 -
浮动部分案例
依旧是[黑马程序员 pink 老师前端入门视频教程 HTML5+CSS3+移动端布局-flex 布局 rem 布局响应式布局摹客蓝湖使用-简单有趣好玩](https://www.bilibili.com/video/BV14J4114768?p=169)部分的内容，从 p169-p188 都是讲解和练习。原创 2021-04-15 12:04:04 · 208 阅读 · 1 评论 -
精通 CSS 第 5 章学习笔记
精通CSS 第五章就在讲 background 相关知识了，并且基本上来说只有 background 相关的知识。尽管知道 CSS3 很强，但是看了别人写的 渐变 和 背景图 的案例才发现，原来大佬可以这么强……原创 2021-04-14 02:35:34 · 600 阅读 · 1 评论 -
背景部分案例学习
依旧是黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩部分的内容，正好 精通CSS 讲到了背景部分的知识。在视频里面说，background 里面放图片主要用在两个方面，一个就是是用来做 icon，另外一个是用来做背景图片，案例也是根据着两个功能来实现的，一个做 icon，一个做背景图片。案例1，用来做 icon效果图：难点也没有什么吧，主要就是：页面左边放一个 iconbackground-repe.原创 2021-04-13 17:09:13 · 174 阅读 · 1 评论 -
HTML+CSS 实现一个评分 (一）
HTML+CSS 实现一个评分效果HTMLHTML 部分还是比较简单直接的<body> <ul> <li class="rank-rated">🟊</li> <li class="rank-rated">🟊</li> <li class="rank-half-rated">🟊</li> <l原创 2021-04-13 14:10:40 · 2989 阅读 · 2 评论 -
精通CSS 第四章总结
网页排版其实这章看完了还是有一种似懂非懂的感觉，网页排版与其说是有什么硬性的规定，不如更大程度上来说是一种「感觉」。有些人觉得通过硬性规定能够制定一个标准化的流程，让读者「感觉」页面看起来很舒服；更加任性随意的设计师则是凭借自己的「感觉」去进行页面的设计。对这个篇章的话，去除了一些相对而言比较抽象，以及需要不少额外精力去搜索资料的部分，留下了通过案例学习发现，「用了就能够肉眼可见看到改善」的部分。以下是一些这章学习心得：字体和背景的颜色对比度不能特别大，过高的对比度反而会影响可读性。以 C原创 2021-04-07 02:41:17 · 369 阅读 · 0 评论 -
案例学习-产品模块和快报模块
依旧是 [黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩](https://www.bilibili.com/video/BV14J4114768?p=172&spm_id_from=pageDriver) 的案例学习，一个是 **产品模块**，另外一个是 **快报模块**。原创 2021-04-06 17:03:22 · 296 阅读 · 1 评论 -
综合案例，五彩导航
> [黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩](https://www.bilibili.com/video/BV14J4114768?p=127), p127的案例。练习价值：- 对 `inline element` 行内元素 的模式转换- 利用 `line-height: content-height;` 实现文字的垂直居中- 背景图片相关定义- 伪类选择器的使用原创 2021-04-03 18:22:46 · 1073 阅读 · 2 评论 -
CSS 盒子模型
CSS 里面的盒子的大小是怎么计算的，以及用 `box-sizing` 去修改计算方式。原创 2021-04-03 02:56:29 · 349 阅读 · 0 评论 -
CSS 选择符
CSS 选择符CSS 选择符选择符通用选择符基本选择符元素选择符后代选择符id 选择符类选择符高级选择符子选择符相邻同辈选择符一般同辈组合子属性选择符伪类伪元素CSS 选择符放在一起果然还是很乱，得拉出来自己找起来也方便……下面的顺序是按照 MDN 上面的来的，细节根据书上加的。选择符通用选择符语法为： * {}。虽然可以和 组合子 结合使用，不过感觉我们业务用的最多的情况还是设置默认的一些配置之类的，这个配置还和任何元素没关系，只是单纯的像是字体、颜色、大小之类的。基本选择符元素选择原创 2021-04-01 22:58:27 · 235 阅读 · 1 评论 -
CSS特殊性
CSS特殊性特殊性计算原书之中就特殊性给出了四个级别，分别对应a，十进制中的千，对应行内样式b，十进制中的百，对应id选择符c，十进制中的十，对应类选择符，伪类选择符，属性选择符d，十进制中的个，对应选择符，伪元素选择符这个表格来源于 「精通CSS 高级Web解决标准方案（v3）」： 选择器 特殊性 以10为基数的特殊性 style = “” 1,0,0,0 1000原创 2021-04-01 19:32:41 · 211 阅读 · 0 评论 -
css单位
在读「HTML5权威指南」第四章『初探CSS』的时候发现，这上面的单位居然写的比「精通CSS 高级Web标准解决方案（第三版）」上的还要全。但是，可惜的事情就是，这本书的出版年限有点久（初版2014年的），再加上也不是专门针对CSS写的书，所以单位的介绍上略显不足。看着看着就被绕进去了，因此还是觉得要总结一下才好。原创 2021-03-25 21:48:44 · 239 阅读 · 0 评论