justify-content: center; align-items: center; font: bold 25px sans-serif; /* 根据需求更改字体大小...*/ color: #000000; /* 根据需求更改字体颜色，默认是黑 */ } /* 鼠标悬停时的样式 */ .wrapper .site-item:hover...justify-content: center; align-items: center; font: bold 25px sans-serif; /* 根据需求更改字体大小 */...color: #000000; /* 根据需求更改字体颜色，默认是黑 */ } 白天模式进行了大部分变量的定义，尽量修改你看的懂的元素，如果有问题可以发到评论区。...黑夜模式 该部分内容就比上面的少很多了，主要是在深色下的颜色的一些变换，如下： section每一节的黑夜适配： /* 夜间适配，改变背景和相关阴影部分 */ [data-theme=dark] .section
相对路径：访问站内资源时使用 图片和页面在同一目录： 直接写图片名 图片在页面的上级目录时：…/图片名 图片在页面的下级目录时：文件夹名/图片名 。。。...… 绝对路径:访问站外资源时使用, 称为图片盗链,可以节省本站资源,但是有找不到图片的风险 alt: 图片不显示时显示的文本 title: 鼠标在图片上悬停时显示的文本 width/height: 两种赋值方式.../visited{} 练习要求 水煮鱼为红色字 红烧肉 水煮鱼 宫保鸡丁背景蓝色 文本框背景绿色 d2字体绿色 d3 s3 h3 字体紫色purple d3 s3 h3 d2 s1 s2 s3 背景绿色...type=‘button’]{} 任意元素选择器 *{} 子孙后代选择器 div span{} 子元素选择器 div>span{} 伪类选择器 a:visited访问过/link未访问/hover悬停/.../imgs/3.jpg" > 测试效果: 9.文本和字体相关 <!
,p,span { css } 交集选择器 找同时满足多个选择器的元素 选择器之间紧挨着 p.mark { css } ⭕hover伪类选择器 选中鼠标悬停在元素上的状态 :hover a:hover...div .one > .two 快速生成ol和li ul > li\ * 3 快速生成li里面带有a链接 ol > li * 3>a CSS篇： 生成宽 w200 生成高 h300 字体样式 font-style...___bgc 网页端，后面我会添加，暂时放个空链接：点击进入 ---- 背景相关属性： 1️⃣背景颜色：background-color（bgc） 颜色默认值是透明，rgba(0,0,0,0) 、transparent...：inline 一行显示多个 默认宽度/高度是内容的高度和宽度 不能设置高度和宽度 注意：a元素不能包含a元素，a链接可以放任何块级元素 代表标签：a、span 、b、u、i、s、strong、ins、...→ 最终写在最后的样式会生效 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果 3️⃣优先级： 不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式 优先级公式：继承
基本元素的样式 接下来将会添加一些基本样式，其中包含一些来自Google的字体，这样可使的页面看起来更好一些。我们要设置所有基本元素的样式，并应用新的字体大小、颜色和字体。...为容器设置一个舒适的阅读样式 接下来，为容器设置样式，把内容的行调整为为阅读时舒适的长度。另外还会添加背景颜色和阴影。为了使页面中的内容框居中，在边距属性的左右值上使用关键字 “auto”。...覆盖其余样式 ? 覆盖样式 现在可以看到媒体查询正在运行并且 body 的背景颜色已经改变，最后需要覆盖所有剩余的样式。...完全控制 自定义属性使我们可以完全控制选择自己的颜色和其他属性。能够对页面容器上的边框阴影进行更新，使其在使用深色模式时不太透明。索引我们需要为页面阴影创建一个新的自定义属性。...创建按钮悬停样式 使用相同的变量，还可以创建可用于两个主题的悬停样式。为了实现这一点，当用户将鼠标悬停在按钮上并转换这些属性时，我们将反转颜色。
但是，在为特定客户（特别是公司）构建网站时，如果您可以更改登录屏幕的颜色方案以及与网站主题相匹配的徽标，那会很好看，对吗？ ---- 好的，它可以轻松完成。...在今天的教程中，我将向您展示如何以您希望的方式自定义WordPress登录屏幕。首先，我们将更改徽标，然后更改配色方案和其他一些元素。让我们开始吧。 默认的WordPress登录屏幕 ?...我们首先使用以下代码自定义登录屏幕的背景颜色和字体。...body.login { background-color: #3d3d3d; font-family: Helvetica; } 现在我们已经更改了登录屏幕的背景颜色和字体，让我们在登录表单的持有者上放置一个漂亮的灰色背景...; outline: none; border: none; padding: 0 25px; text-align: center; font-size: 13px; } 最后，让我们更改正常和悬停状态的链接文本
使用这两个标签，我们可以很方便地实现内容的展开和折叠功能。下面我们来详细介绍一下它们的用法。 ：这个标签用于包裹可折叠的内容。默认情况下，内容是折叠的，用户点击时可以展开。...position: absolute; right: 1rem; transition: all 150ms ease-out; } 这些样式定义了 Accordion 组件的外观，包括背景颜色...、字体样式、边框、悬停效果等。...details：设置了每个 details 标签的样式，包括背景色、边框、圆角和过渡效果。当鼠标悬停时，边框颜色会发生变化。....faq-title 和 .faq-content：分别设置了标题和内容的样式，使其更加美观和易读。 .expand-icon：设置了图标的样式和过渡效果，使得在展开和折叠时有更好的视觉体验。
CodePen上预览和编辑代码 说明使用：before和：after伪元素作为在悬停时设置动画的边框。 浏览器支持程度 100%. 35.甜甜圈旋转器 创建一个甜甜圈旋转器，可用于等待内容的加载。...caninuse - css-variables caninuse - css-transitions 38.悬停阴影动画 在文本上悬停时，在文本周围创建一个阴影框动画效果。 ?...:hover::after 然后使用scaleX（1）将宽度转换为100％，然后将中心点更改为左下角，允许它在悬停时从另一个方向转换出来。...弹出菜单 在悬停和焦点上弹出交互式菜单。 ?....sibling-fade:hover span:not(:hover)当父级悬停时，选择当前未悬停的span子项并将其透明度更改为0.5。
class="text-uppercase">uppercase 单词全大写 capitalize 单词首字母大写 4.7 提示语 当鼠标悬停在缩写和缩写词上时就会显示完整内容...在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。 4.10 强调类 这些强调类，通过颜色来表示强调。一般是给 p 元素加这些类名，会显示不同的颜色。 我是隐藏内容div> 使用 .text-hide 类可以用来将元素的文本内容替换为一张背景图 我是隐藏文本 5 字体图标 所有图标都需要一个基类和对应每个图标的类...鼠标划过后会添加一个背景色。 .table-condensed 每个单元格的内补(padding)减半，可使表格更紧凑。 6.3 状态类 通过这些状态类可以为行或单元格设置颜色。...active 鼠标悬停在行或单元格上时所设置的颜色 success 标识成功或积极的动作 info 标识普通的提示信息或动作 warning 标识警告或需要用户注意 danger 标识危险或潜在的带来负面影响的动作
以往单片机中使用中文字库时，免不了需要制作各种字体大小的字模。且有的制作的效果不是很好,需要多大的字体需要提前备好。如果能用上FreeType,这些都不是问题了，且还能各种的变换。...但是freetype占的资源可能比较大，即便裁剪过也可能90多k吧，在资源受限的单片机环境中不推荐，还不如直接取字模来得快，在资源丰富的嵌入式linux板上可以玩一下。...bitmap_left,var.yres - slot->bitmap_top); pen.x += 64*32; //pen.y += 64*32; } return 0; } 如何改变字体的背景呢...，clear一个区域，填充下背景色即可，或者如下图所示背景色的地方。...如何改变字体的颜色呢，关键在这里： ? 如果你的屏幕显示的图像是镜像翻转的，如何调整让显示正确呢，如下，调整下x,y坐标即可。 ?
p 标记的文本颜色 为 蓝色 3、想将所有的 p 标记的颜色，更改为 粉色 在 HTML 中，想实现标记的样式，只能靠属性完成 使用属性设置页面元素样式的问题...ex: div>静夜思div> 设置 div 的文本颜色为 红色(red)，背景颜色为 黄色(yellow)，文字大小为 24px...background-color:yellow; } ex: 设置页面中所有 p 标记的样式为，背景颜色为黄色...，文本颜色为 红色，文字大小为 18pt 特点： 1、有效的实现了样式 和 内容的分离 2、有效的实现了 可重用性 和 可维护性...span 是div的 后代元素 div> span>div中的spanspan>
-- 行内样式：在标签元素内，编写一个style属性，编写样式 优先级 行内>内部>外部 （错误！） 就近原则，谁离得近就是谁，外部导入的位置 or 覆盖原则？...标签：重要的字放进去（约定俗称的东西） div也类似 字体样式 <!...overline; 上划 多标签选择器 img,span{ vertical-align: middle; 竖直居中 } --> 阴影 /*text-shadow: 阴影颜色，水平偏移，垂直偏移...} 背景 背景颜色 背景图片 div{ width: 1000px; height: 700px; border: 1px solid...img需要放在div中） margin是顺时针，只有两个时，是上下和左右 margin: 0 auto margin+border+padding+内容宽度 圆角边框 左上开始的顺时针方向 貌似就顺着填
1.1 contain 保持图片纵横比例缩放背景图片，使背景图片能够在背景区域完全显示 有可能出现图片无法完全覆盖背景区域 1.2 cover 保持图片纵横比不变，最大程度覆盖背景区域 有可能导致背景图片部分区域无法显示...固定值：设置固定的行间距，如20px 百分比：行间距为当前字体大小乘百分比 ''' 基础选择器 想要选择ol元素的子代li元素，并设置字体和字体颜色样式，请补齐这段代码 __...+，也是同级的关系 伪类选择器 伪类 描述 :hover 用于设置鼠标悬停在元素上方时的样式 :focus 用于设置元素获得焦点时的样式 :active 用于设置元素被激活时（按下按键时、松开按键时）的样式...important规则 当你在一个样式声明中使用!important规则时，这个样式将覆盖其他的任何声明 !...块级元素 在浏览器显示时总是独占一行 宽高、内外边距可以控制，且上下左右的外边距均可对周围元素产生影响 可以包含内容、行内元素和其他块级元素 宽度未设置时默认为其父级元素的宽度，高度未设置时为内容的高度
导航栏的背景颜色为#D7719B，字体大小为24px，链接颜色为白色，鼠标悬停时菜单项背景色变为橙色。以下是使用 HTML 和 CSS 实现上述要求的导航栏的示例代码：HTML:颜色为白色，当鼠标悬停时，背景颜色会变为橙色。通过使用 CSS，我们可以美化和定制导航栏的外观，使其符合我们的需求。你可以根据自己的喜好进一步调整样式，例如更改颜色、字体、边框等。...例如，你可以添加更多的样式规则来调整卡片的布局、颜色、字体等。此外，确保将图片文件正确放置在相应的路径中，以便在页面上正确显示图片。...然后在这块区域外的下方30px额外创建一个页脚，和上面的区域无关，页脚宽1300px，高100px，内容是版权所有，背景色#D7719B，字体白色且上下左右居中好的，以下是使用 HTML 和 CSS 实现上述要求的示例代码...footer 元素设置了宽度、高度、背景颜色和文本颜色，并使用绝对定位将其放置在主要内容下方 30px 处，且水平居中。请确保将 "image-url.jpg" 替换为你实际的背景图片路径。
下所有的 font 标签变为红色，其他颜色黑色 div> span> 变为红色字体 111 span> <font...案例代码 准备代码：仅要求 div 下所有 font 子标签变为红色，其他颜色黑色 div> span> 黑色字体 111 span...class="d1">我想和 span 样式一样div> div>我不想和别人样式一样div> 示例： 效果： 注意： * 通配符选择器因为效率极低，所以不建议使用。...API 及案例代码 准备代码：要求 mya 超链接： 链接地址从未被点击时为：黑色 black 链接地址已经被点击过为：灰色 gray 鼠标悬停时为：红色 red 链接被点击一瞬间为...准备代码： div 下第一个子元素字体颜色变为红色， div 下最后一个子元素字体颜色变为蓝色 div class="d1"> 1
CSS (Cascading Style Sheets) 是用来样式化和排版你的网页的 —— 例如更改网页内容的字体、颜色、大小和间距，将内容分割成多列或者加入动画以及别的装饰型效果。...属性值（Value）： 每个指定的属性都需要给定一个值，这个值表示你想把那些样式特征修改成什么样，例如，你想把字体，宽度或背景颜色改成什么。 与值配对的属性被称为CSS声明。...你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。...前两个选择器正在竞争链接的背景颜色的样式——第二个赢得并使背景色为蓝色，因为它有一个额外的ID选择器在链中：其专用性值为201比101。...例如，对 font-family 和 color 进行继承是有意义的，因为这使得您可以很容易地设置一个站点范围的基本字体，方法是应用一个字体到 元素；然后，您可以在需要的地方覆盖单个元素的字体
font-size: 30px; } 子代选择器（>） - 只能选择儿子 后代选择器（div p） - 只要是后代，儿子孙子曾孙子都可 链接伪类选择器 :hover 鼠标悬停状态...、font-family 顺序不能更改 不需要设置的属性可以省略，但是至少保留font-size 、font-family 颜色&单位 颜色表示法： 1....CSS背景属性 div背景色默认透明 重要的图片使用Img 属性，装饰性的图片用background 背景颜色： background-color: 背景图片： background-image:url...二、继承性： 所谓继承性是指书写CSS样式表时，子标签汇集成父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父标签即可。...left表示当前元素不受到左浮动影响 right表示当前元素不受到右浮动影响 both表示当前元素不受到左和右浮动影响 浮动元素在排列时，只参考前一个元素位置即可。
{样式} 同时选中以上不同选择器作用到的元素设置样式 后代选择器： 父集元素 空格 子集元素{样式} 伪类选择器： :hover 当鼠标悬停在内容上时，显示出不同的样式 :nth-child...文本的常用样式 字体大小 font-size 字体颜色 font-color 字体样式 font-style 字体选择 font-family text-align: 在一个元素内部的内容在元素范围中水平对齐方式...{ heiht:50px; background:cyan; color:#fff;/*字体颜色*/ font-size:30px;/*字体大小...background:背景复合属性 background:背景颜色 背景图片 是否平铺，位置； 列表： List-style:none; 去除列表项标记 display: 修改元素特性 inline...行内元素 block 块元素 inline-block 行内块 具有行内和块元素的特点 能设置宽高 宽高有自己撑起，和其他行内元素一行显示 栗子：
) text-white 白色文本(白色背景上看不清楚) 背景颜色 类名 作用 bg-primary 重要的背景颜色 bg-success 执行成功背景颜色 bg-info 信息提示背景颜色 bg-warning...警告背景颜色 bg-danger 危险背景颜色 bg-secondary 副标题背景颜色 bg-dark 深灰背景颜色 bg-light 浅灰背景颜色 表格 基本使用 例： 悬停显示灰色背景就添加.list-group-item-action 类。...class="badge bg-primary">Primaryspan> span class="badge rounded-pill bg-primary">Primaryspan> 标签通过相对字体大小和...span> div> 在 Bootstrap 中的读取图示是用 rem, currentColor 和 display: inline-flex。
我是c站的一个小博主，近期我会每天分享前端知识包括（原生的web语句，以及vue2和vue3，微信小程序的写法及知识点）本篇文章收录于html特效专栏中，如果想每天在我这学到一些东西，请关注我并订阅专栏...说实在的,大部分情况下,前端在配合后端进行开发.后端需要了解业务逻辑,要跟领导和客户商量细节,露脸机会很大,在老板面前刷脸次数众多。这些都是拉开前后端程序员晋升机会差距的因素。...前端的特效视觉： 层次结构的表现 动态效果，如缩放，覆盖，滑出网页或单个视觉元素，可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。...="shadow" style="--i:5;">span> div> 3.实时时间背景效果 代码： <!...z-index: -1; } /* 定义动画 */ @keyframes roll{ to{ transform: rotateZ(360deg); /* 转动时再加个颜色变化
> 我是div div> span> 我是span span> ?...; } 可以更改整个body的字体，也可以只更改某一行的字体，以及字体的大小。...这里需要说明，上面这些都是font-weight的属性，具体用法和上面的字体、字体大小用法相同。...;只在水平方向上平铺背景图片 background-repeat:repeat-y;只在竖直方向上平铺背景图片 background-repeat:no-repeat;不平铺背景图片 这三个功能只有在背景图片小于网页大小时才能够使用...（需要说明的，浮动的框可以覆盖固定的框，但是覆盖不了固定框的文本内容，这些文本内容会被挤出到浮动框下方显示）（另外本人试的浮动的p标签改成的块标签无法覆盖固定的块标签div，但是浮动的div可以。）
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
