: CSS 使用基本的规则集，其中选择器、属性和值之间使用分号和大括号来定义。...SCSS 使用与 CSS 类似的语法，但它更灵活和易于维护，允许你编写更复杂的样式规则。 「可重用性:」 CSS: CSS 在样式的重用性方面相对较弱。...「嵌套规则:」 CSS: 在 CSS 中，如果要定义嵌套的选择器，你需要使用复杂的选择器名称，如 .parent .child。...Scss、Tailwindcss区别 「SCSS（Sassy CSS）:」 语法接近 CSS： SCSS 使用类似于标准 CSS 的语法，使用大括号和分号，这使得它更易学习和迁移现有的 CSS 代码。...手动编写样式： 使用 SCSS 需要手动编写 CSS 规则，即你需要明确地编写每个元素的样式规则和选择器。 独立性： SCSS 是一种独立的 CSS 预处理器，可以与任何前端框架或库一起使用。
第一版：使用 Hexo 和 Github pages 优点：重新部署只要花 5 分钟，内容管理在本地 纯静态、免费； 缺点：依赖 Github，国内访问困难； 第二版：React + Antd + Mysql...不仅仅是一个原子类的超级样式库； 1、我们在写样式的时候，经常会写类名，团队成员之间会存在样式冲突的可能，虽然我们可以使用 css modules 来避免，但却会存在取类名称的疲劳的问题，重复的类名称...{js,ts,jsx,tsx}']打包时只会提取使用到的样式，让应用 css 最小化。...4、之前写了《使用 CSS variables 和 Tailwind css 实现主题换肤》也运用到了我的博客中。...当然内容是最重要的，希望以后每周或者每两周能够有一篇文章，记录和总结知识。
第一版：使用 Hexo 和 Github pages 优点：重新部署只要花5分钟，内容管理在本地 纯静态、免费； 缺点：依赖Github，国内访问困难； 第二版：React + Antd...，但是在国内却很少看到在生产上应用，对我来说， TailwindCSS 不仅仅是一个原子类的超级样式库； 1、我们在写样式的时候，经常会写类名，团队成员之间会存在样式冲突的可能，虽然我们可以使用 css...{js,ts,jsx,tsx}']打包时只会提取使用到的样式，让应用css最小化。 4、之前写了《使用 CSS variables 和Tailwind css实现主题换肤》也运用到了我的博客中。...而文章内容写完之后是通常不变的，所以可以先将页面静态存储在服务器上，这样就可以大大减小数据库压力。 getStaticProps 在构建时请求数据。...当然内容是最重要的，希望以后每周或者每两周能够有一篇文章，记录和总结知识。
在这篇文章中，我们将了解如何在 TailwindCSS 的官方 Nuxt 模块的帮助下有效地将 TailwindCSS 与 Nuxt 应用程序结合使用。...先决条件 最好使用以下命令设置 Nuxt 应用程序并准备好运行： npx nuxi init tailwind-css-nuxt-demo 这tailwind-css-nuxt-demo是我们的代码演示应用程序的名称...TailwindCSS 的 Nuxt 模块会自动添加所需的代码，以便在生产过程中清除 CSS 代码，后面是按名称引用任何使用的 CSS 样式的文件列表，如下例所示： purge: { //enable.../assets/css/tailwind.css应用程序中定位 TailwindCSS 样式。我们还可以使用Nuxt 配置文件中配置对象cssPath的属性来覆盖此默认路径。...tailwindcss tailwindcss: { cssPath: '~/styles/tailwind.css' }, 在该styles/tailwind.css文件中，我们可以使用关键字导入
一、CSS元素隐藏 在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。后宫选秀——一个一个看。...三、height:0和overflow:hidden的组合 overflow:hidden用中文理解就是“溢出隐藏”，也就是盒子以外的内容都咔嚓掉不可见的。...加上height:0，只要是一般的非inline水平元素，则元素内部所有子孙都应该是不可见的 height:0和overflow:hidden组合隐藏“失效”的条件如下：祖先元素没有position:relative...overflow可以剪裁超出块状元素之外的元素。除非超出元素的包含块是整个视区或是该overflow元素的祖先元素。...然后绝对定位元素的包含块应该就是含有position:relative/absolute/fixed的祖先元素。
2、CSS注释 /*这是注释*/ 三、CSS的几种引入方式 1、行内样式 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。...万不得已可以使用 ！inport 五、CSS属性相关 1、字体属性 1.1 文字字体 font-family 可以那多个字体名称作为一个“回退”系统来保存。...4、CSS盒子模型 margin：用于控制元素与之元素之间的距离；margin的最基本用途就是控制周围空间的间隔，从视觉角度上达到相互隔开的目的。 padding：用于控制内容与之边框的距离。...border（边框）：围绕在内边距和内容外的边框。 content（内容）：盒子的内容，显示文本和图像。 盒子模型： ?...内容不会被修剪，会呈现在元素框之外 hidden 内容会被修建，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
无模糊,加盖遮罩层效果 加特效后 css的特效代码只有两行 .mask{position: relative;filter: blur(2px);user-select: none;} .mask...加上一个mask类即可生效 主要使用了伪类,以及相对定位,绝对定位的知识....另外过滤器filter, 以及rgba的透明度设置 如果需要在模糊层上显示一个开通VIP的字眼, 则需要在模糊层的外层,使用相对定位....如 css .topinfo{position: relative;left: 147px;color: #673ab7;font-weight: bold;} 完整代码 <style type="text/<em>css</em>
如何使用tailwindcss自定义hugo主题 如何使用tailwindcss自定义hugo主题?对于某些主题，可能作者开发时候，它不具备自定义指定css的功能，但这并不妨碍我们自己添加这个功能。...第二步：在layouts/partial目录下的创建site-style.html文件，文件里内容如下： {{ range site.Params.custom_css }} {{ with partialCached...tailwindcss的主题，其实完成前两步就好了，但是对于使用了tailwindcss的主题，由于它还有一个编译的过程，根据你指定的content内容的匹配目录，如./**/*....以我举例的这个使用tailwindcss做为样式定义的package来说明，因为这是对hugo主题进行修改，所以这里就头脑中要有个概念，就是hugo是基于golang的一套系统，但是你在模板引擎内使用的语法已经剥离了...当然tailwindcss的使用过程还是有很多技巧的，我自己也在摸索中，有什么新的想法再写文章分享。今天这篇有关如何使用tailwindcss自定义hugo主题的文章至此分享结束，感谢阅读。
DOCTYPE html> *{padding: 0px;margin: 0px;}...内容的宽高为100px*/ .box2 { width: 96px; height: 96px; border: 2px solid red; } /*这个是元素的宽高为...内容的宽高为192px。...*/ .box3 { width: 100px; height: 100px; background-color: yellow; /*这个是内容的宽高为200px*/.../*这个元素的宽高为350px,内容的宽高为300px。
内容溢出 语法：overflow:值 取值：auto当内容溢出时，生成滚动条------默认，hidden内容溢出时超出部分隐藏 示意图 ?...总结： overflow取值： auto----自动生成滚动条（右边） hidden----超出部分隐藏 scroll----右边和下边都有滚动条 设置水平方向溢出可以使用overflow-x...，纵向溢出使用overflow-y，取值和overflow一样 重点：overflow:hidden;超出部分隐藏
代码示例 ---- 显示一行内容，超出部分使用省略号表示（只有块元素才会生效） .nowrap { white-space: nowrap; text-overflow: ellipsis; overflow...: hidden; } 显示两行内容，超出部分使用省略号表示 .line-clamp-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box...代码解析 ---- -webkit-line-clamp 用于限制块元素显示文本的行数，它是一个不规范的属性，没有出现在 CSS 规范草案中。...为了实现限制文本的行数，需要组合其他 webkit 属性，常见结合属性: /* 将对象作为弹性伸缩盒子模型显示 */ display: -webkit-box; /* 设置或检索伸缩盒对象的子元素的排列方式...*/ -webkit-box-orient: vertical; /* 用省略号“...”隐藏超出范围的文本 */ text-overflow: ellipsis;
我们做项目时，通常会使用一些常用的css框架，比如我会经常用到 tailwindcss ，bootstrap 等等，但是使用这些框架后，打包出来的css文件过于庞大，而且很多样式是我们没有使用到的...还有一种情况是我们的网站进行改版了，有些样式已经不再使用了，但是我们没有在css文件中移除，导致css越来越大。...这时候我们就可以用 Purgecss来只打包我们项目中正在使用到的样式来减小css文件体积。本篇文章使用 tailwindcss 在 vue中的例子进行说明： 1....引入tailwindcss 在assets文件夹下，新建index.css , 写入以下内容 @tailwind base; @tailwind components; @tailwind utilities...在根目录下新建postcss.config.js，写入以下内容 const autoprefixer = require("autoprefixer"); const tailwindcss = require
自定义 overflow 的滚动条 1. overflow 属性介绍 ---- css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。...当元素框中的内容溢出时，无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看 2. overflow 属性的值 ---- 值 描述 visible 默认值。...内容不会被修剪，溢出部分会呈现在元素框之外 hidden 内容被修剪，溢出部分不可见 scroll 内容被修剪，无论是否溢出滚动条都会占据空间 auto 当内容溢出时会被修剪且出现滚动条，没有溢出时不显示滚动条...，这样可以更好的理解用法，虽然下次使用还要来这里看 首先，先来做一个有滚动条的容器 .container { width: 260px; height: 100px; background...: 可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式 选择器 描述 ::-webkit-scrollbar 整个滚动条 ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分
今天给大家介绍个好东西————TailwindCSS ！一. 引言css对于页面的美化作用不言而喻，但是在进行前端布局页面的时候，往往对页面样式的命名不胜其烦。...使用 Tailwind，您可以通过直接在 HTML 中应用预先存在的类来设置元素的样式。 这样您没有为了给类命名而浪费精力，css也会减少。...其他优点● 函数与指令：Tailwind 向您的 CSS 的暴露的函数和指令的参考说明。● 悬停、焦点和其它状态：使用功能类为处于悬停、焦点和其它状态的元素设置样式。...四.简单上手(demo)首先新建一个tailwindcss-demo文件夹，然后输入以下命令：新建src文件夹-并添加index.html和input.css文件
安装 Tailwind CSS tailwindcss 通过 npm 安装，并创建您的 tailwind.config.js 文件。...npm install -D tailwindcss npx tailwindcss init 配置您的模板路径 在 tailwind.config.js 文件中添加所有模板文件的路径。...比如src/main.css,并且将内容修改为如下： @tailwind base; @tailwind components; @tailwind utilities; 开始在您的 HTML 中使用...Tailwind 将已编译的 CSS 文件添加到 并开始使用 Tailwind 来设置您的内容样式。...生成min版css npx tailwindcss -o .
当我们使用 CSS 构建布局时，考虑长短文本内容很重要，如果能清楚地知道当文本长度变化时需要怎么处理，可以避免很多不必要的问题。...在本文中，我会介绍几种不同的技巧，智米们可以马上使用它们来处理CSS中不同长度的文本。 问题 在讨论处理文本内容的技巧之前，先来解释一下这个问题，假设我们有一个垂直导航。...幸运的是，有一些CSS属性就是专门用于解决此类问题。 除此之外，问题不仅在于长内容，短内容也会破坏UI，或者至少会让它看起来很奇怪。...无论内容长度如何，都可以提供安全的宽度。 长内容 在，大家已经对问题有所了解，我们接着深入研究CSS 技巧，这些技巧可为处理长内容提供解决方案。...image.png Hyphens CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。
/TR/xhtml1/DTD/xhtml1-transitional.dtd"> css...制作图片环绕效果 C#语言是一门优秀的面向对象语言 C#语言是一门优秀的面向对象语言 C#语言是一门优秀的面向对象语言...虽然达到了文字环绕图片效果，但是呈现的列表项的形状在图片上面，不是和文字紧贴在一起。达不到我们预期的效果。...:inside; } 修改后的效果： ?
使用 css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1; 1为不透明 如rgba(255,255,255,0.8) 可以设置背景色透明,内容不透明...如一下 background: rgba(255,193,7, 1); 效果图 两者都没有透明 背景透明,内容不透明 两者都透明
当我们想要根据元素内部是否有内容来显示特定的样式时 我们可以使用 :not 与:empty 结合来实现这个效果 代码如下 .handle_menu_content:not(:empty){...:last-of-type{ button{ border-right: 1px solid #D2DCED; } } 上面一行代码选中的还是类为...status_btn_outer的最后一个元素 如果要选选中某一个元素内部的最后一个元素 请使用:last-of-child
搭建过程（使用Tailwind CSS） 选择积木： 开始设计页面时，你首先要做的是从积木盒中挑选合适的积木。...-D tailwindcss # 初始化tailwincss配置文件 npx tailwindcss init # 使用编辑器打开目录 code ....配置 tailwind.config.js 将下面的内容复制到 tailwind.config.js 文件内 /** @type {import('tailwindcss').Config} */ module.exports.../src/style.css --watch 运行上面命令以后会在 src 目录生成 style.css 文件，可以观察下文件内容 开始在 HTML 中使用 Tailwind 新建 index.html...文件，输入以下内容： <!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
