林安随笔 - CSS
type: channel
link: https://www.yuaq.cn/index.php/tag/CSS/
items: CSS常用代码片段
items: tailwindcss
items: CSS3动画
items: CSS基础二
items: CSS基础一

CSS常用代码片段
type: item
date: 2023-11-13T13:26:10+08:00
description: 滚动条样式::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .12); border-radius: 3px; box-shadow: inset 0 0 5px rgb(0 21 41 / 5%); } ::-webkit-scrollbar-thumb:hover { background: #555; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, .06); border-radius: 3px; box-shadow: inset 0 0 5px rgb(0 21 41 / 5%); } // 去除滚动条 ::-webkit-scrollbar { display: none; scrollbar-width: none; -ms-overflow-style: none; }灰色页面风格html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }单行文本溢出显示省略号overflow: hidden; // 溢出隐藏 white-space: nowrap; // 文本单行显示不能换行 text-overflow: ellipsis; // 溢出部分用省略号代替多行文本溢出显示省略号word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; // 需要展示的最多行数 超出则用省略号代替 overflow: hidden;盒子阴影box-shadow: h-shadow v-shadow blur spread color inset; // 属性值： // h-shadow：是指 阴影水平偏移量 ,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边 // v-shadow：是指 阴影的垂直偏移量 ，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部 // blur：阴影模糊半径；此参数是可选，只能为正值，如果其值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊 // spread：阴影扩展半径；此参数可选，其值可为正负值，正值，则整个阴影都延展扩大，反之，则缩小 // color：阴影颜色；此参数可选，不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数 // inset：设置从外层的阴影（开始时）改变阴影内侧阴影；可选值，可省略。加载中...// html 加载中 ... // css body { margin: 0; } .loading { height:100vh; width:100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg,#c7e1fa 10%,#1381f0 90%); color: #fff; font-size: 4em; letter-spacing: 2px; } .loading > dot { height: 1em; overflow: hidden; display: inline-block; text-align: left; vertical-align: -0.25em; line-height: 1; } /* 核心代码 */ .loading > dot:before { display: block; /* 这行代码最重要 */ content: '...\A..\A.'; /* 值是Pre也是一样的效果 */ white-space: pre-wrap; animation: dot 1.5s infinite step-start both; } @keyframes dot { 33% { trans…

tailwindcss
type: item
date: 2022-07-18T20:50:00+08:00
description: tailwindcss（类似内联样式）前言​ 使用后的感受是它和内联样式的使用基本相似，除了一些名词的拼写（内联样式：background: skyblue; tailwindcss：bg-sky-200; ），最主要的是它比内联样式更好的特点：可以写鼠标悬停，光标聚焦等样式，可以写响应式布局，直接写在class中就行...虽然对比内联样式有很多好的地方，但是在开发中不推荐使用：在一个项目中，有多个人共同开发，你使用tailwindcss写的样式，别人在没接触过tailwindcss看你的代码时会非常麻烦，特别是由其他人修改、调整你绘制的页面样式时非常的吃力，而且一些相同的样式大量重复的编写也不好，对于后期的维护也不方便，因此在没有统一的沟通使用某种样式时，最好将css抽取出来，方便调整，修改，维护安装引入安装 Tailwind CSStailwindcss通过 npm安装，并创建您的tailwind.config.js 文件。npm install -D tailwindcss npx tailwindcss init配置您的模板路径在文件中添加所有模板文件的路径tailwind.config.js。module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }将 Tailwind 指令添加到您的 CSS@tailwind将Tailwind 的每个层的指令添加到您的主 CSS 文件中。@tailwind base; @tailwind components; @tailwind utilities;启动 Tailwind CLI 构建过程运行 CLI 工具来扫描您的模板文件中的类并构建您的 CSS。npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch开始使用 Tailwind将已编译的 CSS 文件添加到 并开始使用 Tailwind 的实用程序类来设置您的内容样式。 Hello world! 常用配置响应式：sm640像素@media (min-width: 640px) { ... }md768像素@media (min-width: 768px) { ... }lg1024像素@media (min-width: 1024px) { ... }xl1280像素@media (min-width: 1280px) { ... }2xl1536像素@media (min-width: 1536px) { ... } Display：blockdisplay: block;inline-blockdisplay: inline-block;inlinedisplay: inline;flexdisplay: flex;hiddendisplay: none; Floats：浮动float-rightfloat: right;float-leftfloat: left;float-nonefloat: none;Clear：清除clear-leftclear: left;clear-rightclear: right;clear-bothclear: both;clear-noneclear: none;Flex Direction：设置主轴的方向flex-rowflex-direction: row;flex-row-reverseflex-direction: row-reverse;flex-colflex-direction: column;flex-col-reverseflex-direction: column-reverse;Flex Wrap：设置子元素是否换行flex-wrapflex-wrap: wrap;flex-wrap-reverseflex-wrap: wrap-reverse;flex-nowrapflex-wrap: nowrap;Justify Content：设置主轴上的子元素排列方式justify-startjustify-content: flex-start;justify-endjustify-content: flex-end;justify-centerjustify-content: center;justify-betweenjustify-content: space-between;justify-aroundjustify-content: space-around;justify-evenlyjustify-content: space-evenly;Justify Ite…

CSS3动画
type: item
date: 2022-02-21T14:02:00+08:00
description: C3过渡：2D转换之移动translate语法：transfom：translate（x，y）； transfom：translateX（n）； transfom：translateY（N）； 重点：定义2D转换中的移动，沿着X和Y轴移动元素translate最大的优点：不会影响到其它元素的位置translate中的百分比单位是相对于自身元素的translate:(50%,50%);对行内标签没有效果2D转换之旋转rotate语法：transform：rotate(度数);重点：rotate里面跟度数，单位是deg，比如rotate(45deg);角度为正时，顺时针，负时，为逆时针默认旋转的中心点时元素的中心点2D转换中心点translate-origin;语法：translate-origin:x y;重点：注意后面的参数 X 和 Y 用空格隔开x y 默认转换的中心点是像素的中心点（50% 50%）还可以给 x y 设置像素 或者方位名词（top bottom left right center）2D转换之缩放 scale语法：transform: scale(x, y);注意：注意其中的x和y用逗号分隔transform(1, 1);宽和高都放大一倍，相当于没有放大transform(2, 2);宽和高都放大两倍transform(2);只写一个参数，第二个参数则和第一个参数一样，相当于scale(2, 2)transform(0.5, 0.5) 缩小scale缩放时最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其它盒子2D转换综合写法同时使用多个转换，格式为：transform: translate() rotate() scale()...;顺序会影响转换的效果。先旋转会改变坐标轴方向当同时有位移和其它属性的时候，记得要将位移放到最前面2D转换总结转换transform 简单理解就是变形有2D和3D之分2D移动translate(x, y)最大的优势是不影响其他盒子 ，里面参数用% ,是相对于自身宽度和高度来计算的可以分开写比如translateX(x)和translateY(y)2D旋转rotate(度数)可以实现旋转元素 度数的单位是deg2D 缩放sacle(x,y)里面参数是数字不跟单位可以是小数最大的优势 不影响其他盒子设置转换中心点 transform-origin:xy;参数可以百分比、 像素或者是方位名词当我们进行综合写法 ,同时有位移和其他属性的时候,记得要将位移放到最前C3动画动画基本使用制作动画分为两步： 1.先定义动画 2.再使用/调用动画用keyframes定义动画（类似定义类选择器）@keyframes 动画名称 { 0% { transfrom:translate(0, 0); } 100% { transfrom:translate(100px, 0); } 元素使用动画div { width:200px; height:200px; background-color:aqua; margin:100px auto; /* 调用动画 */ animation-name:动画名称; /* 持续时间 */ animation-duration:持续时间; } 动画序列0%是动画的开始, 100%是动画的完成。这样的规则就是动画序列在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果动画是使元素从一种样式逐渐变化为另一种样式的效果。 可以改变任意多的样式任意多的次数请用百分比来规定变化发生的时间,或用关键词"from"和"to" ,等同于0%和100%动画常用属性属性简写：animation :动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;简写属性里面不包含animation-play-state暂停动画：animation-play-state: puased; 经常和鼠标经过等其它配合使用想要动画走回来，而不是直接跳回来：animation-direction:alternate;盒子动画结束后，停在结束位置：animation-fill-mode: forwards;3D移动transform: translateZ(npx);3D转换透视 perspective // 写到父盒子上在2D平面产生近大远小视觉立体,但是只是效果二维的如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内模拟人类的视觉位置,可认为安排一只眼睛去看透视我们也称为视距:视距就是人的眼睛到屏幕的距离距离视觉点越近的在电脑平面成像越大,越远成像越小透视的单位是像素3D旋转 rotate3d3D旋转指可以让元素…

CSS基础二
type: item
date: 2022-01-30T15:44:00+08:00
description: CSS的三大特性：层叠性： 样式不冲突，不会层叠 样式冲突，遵循就近原则，哪个样式离结构近执行哪个继承性： 恰当的使用继承可以简化代码，降低CSS样式复杂性 子元素可以继承父元素的样式（text-、font-、line-这些元素开头的可以继承，以及color属性优先级： 选择器相同，执行层叠性 选择器不同，则根据选择器权重执行 选择器权重：!important > 行内样式 > ID选择器 > 类选择器，伪类选择器 > 元素选择器 > 继承或者 * 权重叠加：如果是复合选择器，则会有权重叠加，需要重新计算CSS盒子阴影：语法：box-shadow:h-shadow v-shadow blur spread color inset;CSS清除浮动：为什么要清除浮动： 父级没有高度 子盒子浮动了 影响下面的布局 清除的方式： CSS属性书写顺序：布局定位属性:display / position / float / clear / visibility / overflow (建议display第一个写，毕竟关系到模式)自身属性: width / height / margin / padding / border / background文本属性:color / font / text-decoration / text-align / vertical-align/white-space / break-word其他属性(CSS3 ) : content / cursor / border-radius / box-shadow /text-shadow / background:linear-gradient...页面布局思路：必须确定页面的版心(可视区），我们测量可得知分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置.页面布局第二准则制作HTML结构，遵循先有结构，后有样式的原则。结构永远最重要所以，先理清楚布局结构，再写代码尤为重要CSS定位：定位 = 定位模式 + 位偏移定位模式：用于指定一个元素在文档中的定位方式位偏移：决定该元素的最终位置定位叠放次序：z-index定位：position static：静态定位 relative：相对定位 absolute：绝对定位 fixed：固定定位 sticky：粘性定位位偏移： top：顶端偏移量，定义元素相对于父元素上边线的距离 bottom：底部偏移量，定义元素相对于父元素下边线的距离 left：左侧偏移量，定义元素相对于父元素左边线的距离 right：右侧底部量，定义元素相对于父元素右边线的距离总结：CSS显示/隐藏：display：隐藏元素后，不占有原来的位置 display:none 隐藏 dispaly:block 显示visibility：隐藏元素后，继续占有原来的位置 visibility:visible 显示 visibility:hidden 隐藏overflow：溢出部分做处理 overflow:visible 不剪切内容也不显示滚动条 overflow:hidden 不显示超出对象尺寸的内容，超出的部分隐藏掉 overflow:scroll 不管是否超出对象尺寸，都显示滚动条 overflow:auto 超出自动显示滚动条，不超出不显示滚动条鼠标样式：a { cursor:pointer; } default：默认 pointer：小手 move：移动 text：文本 not-allowed：禁止CSS用户界面样式：轮廓线：outline input { outline : none; }防止拖拽：resize textarea { resize: none; }图片文字垂直居中：vertical-alige vertical-alige: baseline | top | middle | bottom baseline：默认，元素放置在父元素的基线上 top：把元素的顶端与行中最高元素的顶端对齐 middle：把此元素放置在父元素的中部 bottom：把元素的底端与行中最低元素的底端对齐单行溢出文字显示省略号white-space：nowrap；强制一行显示overflow：hidden；溢出隐藏text-overflow：ellipsis；文字溢出用省略号显示CSS清除浮动：.clearfix:after{ visibility:hidden; clear:both; display:block; content:"."; height:0; } .clearfix{ *zoom:1; } 伪元素清除浮动：.clearfix: before ,.clearfix:…

CSS基础一
type: item
date: 2022-01-29T21:29:00+08:00
description: CSS语法：CSS基础选择器：标签选择器： 定义：把HTML标签作为选择器，按标签名称分类 作用：可以把某一类标签全部选出来 优点：能快速为页面中同类标签统一设置样式 缺点：不能设置差异化样式，只能选择全部的当前标签类选择器： 作用：差异化选择不同的标签，单独选一个或者几个标签 语法：用class属性来调用（class：类）.类名 {属性1：属性值1 ...}多类名选择器：各个类之间用空格隔开 可以把一些标签元素相同的样式（共同的部分）放到一个类里面 这些标签都可以调用这个公共的类，然后再调用自己独有的类 从而节省CSS代码，统一修改也比较方便 id选择器： 定义：为标有特定id的HTML元素指定特定的样式（HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义） 语法：#id名 {属性1：属性值1 ...}id选择器和类选择器的区别： 类可以有多个，id只能有一个 类选择器在修改样式中使用的多，id选择器一般用于页面唯一性元素上，经常和JavaScript搭配使用通配符选择器： 定义：通配符选择器使用 “ * ” 定义，表示选取页面中所有的元素（标签） 语法：*{属性1: 属性值1 ...}使用：不需要调用，自动给所有元素使用样式，特殊情况使用：清除所有标签的内外边距 总结：CSS字体属性：作用：用于定义字体系列、大小、粗细、文字样式字体系列：使用font-family属性定义 p {font-family:"微软雅黑";}字体大小：使用font-size属性定义字体大小 p {font-size:20px;}字体粗细：使用font-weight属性设置文本字体的粗细 p {font-weight:bold;}文字样式：使用font-style属性设置文本的风格 p {font-style:normal;}字体复合属性：不能更换顺序，font-size和font-family不可以省略，其他的可以不写 body {font:font-style font-weight font-size/line-height font-family;}字体属性总结：CSS文本属性：作用：定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。文本颜色：color属性div { color: skyblue; } 对齐文本：text-align属性用于设置元素内文本内容的对齐方式div { text-align: center;} 装饰文本：text-decoration属性规定添加到文本的修饰可以给文本添加下划线、删除线、上划线等div { text-decoration：underline;} 文本缩进：text-indent属性用来指定文本的第一行缩进，通常是将段落的首行缩进 em：是一个相对单位，就是当前像素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小div { text-indent: 20px;} /* 向右缩进20像素 */ p { text-indent: 2em;} /* 向右缩进两个字的距离 */行间距：line-height属性用于设置行间距离（行高），可以控制文字行与行之间的距离p { line-height: 26px;}文本属性总结： CSS引入方式：内部样式表（嵌入式）： 写到HTML页面内部，将所有CSS代码抽取出来，单独放到一个 标签中 标签理论上可以放在HTML文档的任何地方，但一般会放在文档的 标签中 代码结构清晰，但是并没有实现结构与样式完全分离`div { color: skyblue; font-size: 14px; width: 400px; height: 200px; }`行内样式表（行内式）： 在元素标签内部的style属性中设定CSS样式，适合于修改简单样式 天蓝色，14像素 外部样式表（链接式）： 适合样式比较多的情况：样式单独写到CSS文件里，之后把CSS文件引入到HTML页面中使用 1.新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中 2.在HTML页面中，使用标签引入这个文件 link rel="stylesheet" href="css文件路径" CSS引入方式总结： Emmet语法：快速生成HTML结构语法 生成标签，直接输入标签名，按tab键即可，比如div，然后tab键，就可以生成 如果想要生成多个相同标签，加上*号就可以了，比如 div*3 就可以快速生成3个div 如果有父子级关系的标签，就可以用 ">" 比如 ul>li 就可以了 如果有兄弟关系的标签，用 "+" 就可以了，比如div+p 如果生成带有类名或者id名的，直接写.demo 或 #nav 按tab键就…