伪类的常见用法和实例解析 CSS伪类和伪元素是一种特殊类型的选择器，可以用于在元素状态或者文档树中的特定位置添加样式。它们允许开发者选择一个元素的部分或者元素的部分状态，从而改变它们的样式。...伪类： 伪类是一种特殊类型的选择器，可以用于选择一个元素的部分状态。例如，当鼠标悬停在元素上时，可以使用伪类 :hover 来改变元素的样式。...a:hover { color: red; } 在这个例子中，当鼠标悬停在链接 () 上时，链接的颜色会变为红色。...代码示例如下： p::before { content: "前面插入的元素"; background-color: #ccc; } 段落内容 在这个例子中，段落前面会出现一个灰色的背景色...代码示例如下： p::after { content: "后面插入的元素"; background-color: #ccc; } 段落内容 在这个例子中，段落后面会出现一个灰色的背景色
, right 彩色文字 在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。...、蓝色 、灰色 。...butterfly 渐变背景标签 , 自己写了个 tip.js 来渲染标签，精简了一下代码。...） warning ban 调整动画速度 warning ban On hover（当鼠标悬停时显示动画） warning ban On parent hover（当鼠标悬停在父级元素时显示动画） warning...On parent hover（当鼠标悬停在父级元素时显示动画） {% tip warning faa-parent animated-hover %}<p class="faa-horizontal
background-color − 这个属性设置元素的背景颜色。 color − 这个属性设置元素的文本颜色。...示例1 - 悬停放大 在这个示例中，按钮将具有蓝色背景和白色文本。当鼠标指针悬停在按钮上时，按钮将使用 transform 属性以平滑的过渡在0.5秒内缩放20%，背景颜色将变为绿色。...当鼠标指针悬停在按钮上时，不透明度将在0.5秒内平滑过渡到1。...在这个例子中，按钮将具有蓝色背景和白色文本，位置设置为相对。...当鼠标指针悬停在按钮上时，底部属性将增加到20px，导致按钮在0.5秒内以平滑的过渡向上滑动。
right 彩色文字 在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。...、蓝色 、灰色 。...On DOM load当页面加载时显示动画 On hover当鼠标悬停时显示动画 On parent hover当鼠标悬停在父元素时显示动画 faa-wrench animated ...） warning ban 调整动画速度 warning ban On hover（当鼠标悬停时显示动画） warning ban On parent hover（当鼠标悬停在父级元素时显示动画...仅当前帖子/页面的URL必须是唯一的 [index]: 活动选项卡的索引号。 如果未指定，将选择第一个标签（1）。 如果index为-1，则不会选择任何选项卡。
body> 书写的内容会显示出来，属性：1. text 用于设置文字颜色；2. bgcolor 用于设置页面的背景色；3. background 用于设置页面的背景图片 排版标签 HTML 注释 <!...按这种表达方式，理论上我们可以得到 256 * 256 *256=16777216 种颜色。 使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。...当鼠标移动到元素上时 当输入字段被改变时 当 HTML 表单被提交时 当用户触发按键时 <!...function onChangeFun(){ alert("文本框元素已输入新的数据") } // 当鼠标悬停在某一个元素上时执行的方法...-- 需求：有一个 H1 标签元素，当鼠标移动到 H1 元素上时，修改文字，当鼠标移出元素时执行事件 --> <h1 onmouseover="onMouseOverFun(this)"
当根据WCAG来设计和开发时，可以使网站内容更易被有障碍的人士所接受。 换句话来说，当文本大小是24px或18px加粗或者更大时，在白色文本背景上使用的最浅的灰色是#959595。 ?...上图为#959595的文本在白色背景上 对于较小的文本，在白色背景上，可以使用的最浅的灰色是#767676。如果使用的是灰色背景，那么文本的颜色就要更深。 ?...再进一步，当我把鼠标悬停在标题上时，文本会变为蓝色，表示我已经可以点击这一项了。 ? 这种设计方式可能会导致无障碍的问题。下面是一种解决方案。在每块输入框后面放一个小铅笔icon。...当我把鼠标悬停在某块地方时，蓝色出现了。 ? 当我提出这种解决方法时，有的设计师会说，“感觉有点重了”。 也许从视觉上是有一点。但是它是无障碍设计的解决方案。此外，它只出现在用户的个人资料页面上。...当用户的鼠标悬停在一行时，会出现四个可操作的图标。 ? 在这个例子中，怎么始终显示四个图标呢？一种方案就是，它们在白色背景上可以是绿色，在鼠标悬停时颜色反过来。 ? 这个解决方案也可能会被称为“重”。
;charset=gb2312”>------避免乱码 4 5 Bgcolor：背景颜色 background：背景图 6 7 六级标题：到 依次递减 8...9 标签： 10 属性：face----字体类型 11 Size----字体大小 12 Color---颜色 13 14 特殊符号：...57 -----scolldelay---滚动延迟时间 direction----滚动方向：up、down、left、right 58 Onmouseover---当鼠标停在上面的时候触发...在整个浏览器窗口打开) 100 101 第四章CSS样式表 102 103 样式表的结构： 104 105 选择器...114 Text-align 对齐方式 115 背景属性:： 116 Background-color 背景颜色 117
在很多场合，我们都能看到这样的效果，当鼠标移动到某个元素上面时，该元素会变成另外一种颜色，达到强调的效果。...下面，我们来实现当鼠标移动到用户窗体按钮上时，会使用颜色高亮显示，让用户窗体更生动，如下图1所示。 ? 其实，你在图1中看到的按钮并不是用户窗体内置的传统命令按钮，而是使用图像控件来制作的。...由于图像是静态的，在运行时不能更改颜色，因此每个按钮都由两个图像组成，一个图像代表鼠标悬浮在按钮上的状态，另一个图像代表鼠标未悬浮在按钮上的状态。...本例中，将使用绿色和白色/灰色格式来指示用户是否将鼠标悬停在特定按钮上。下图2是我制作的用于按钮图像的文本框。 ? 这里要注意的是，四个文本框的大小和格式设置都必须完全相同。...按钮的背景会保持为白底灰字。
2、QRadioButton（单选按钮）： 用于从多个互斥的选项中选择一个选项。 通常与其他单选按钮一起使用，组成单选按钮组。 可以设置文本、图标等属性。...，将按钮的图标设置为 “icon.png” 文件，并将按钮的背景颜色设置为天蓝色，文本颜色设置为白色。...pressed-background-color: 设置按钮在按下状态时的背景颜色。 hover-background-color: 设置鼠标悬停在按钮上时的背景颜色。...前景颜色属性： color: 设置按钮的前景（文本）颜色。 pressed-color: 设置按钮在按下状态时的前景颜色。 hover-color: 设置鼠标悬停在按钮上时的前景颜色。...setToolTip("Tooltip text")：设置按钮的工具提示文本，当鼠标悬停在按钮上时显示。 这些是按钮的常用功能和属性。
查看CSS 查看元素对应的样式 1、 打开调试工具，点击调试工具左上角的检查元素按钮或者快捷键（Ctrl/Cmd + Shift + C） 2、在页面选中需要查看的元素，被检查的元素在DOM树中以蓝色背景突出显示...5、当鼠标悬浮在某一行属性上时，会出现一个圆形箭头按钮，点击可以跳转到styles 选项卡所对应的样式处。 查看元素伪状态 1、在 styles 选项卡中点击 :hov 。...3、这里的更多操作还有其他一些功能，从左往右依次是 文字阴影、盒子阴影、文字颜色、背景颜色。...3、复制到剪贴板。将显示值复制到剪贴板。 4、显示价值。RGBA，HSLA或Hex的颜色表示。 5、调色板。单击其中一个方块可将颜色更改为该方块。 6、色相。 7、透明度。 8、显示值切换器。...使用吸管从页面上取样 打开拾色器时，默认情况下吸管 滴管处于打开状态。要将所选颜色更改为页面上的其他颜色： 1、将鼠标悬停在视口中的目标颜色上。 2、点击确认。
灰色(#767676)与白色背景的对比度为4.5:1，而绿色(#36a829)与白色的对比度为3:1。...我在这里做了三件事: 我把标签文本变成蓝色，给整个胶囊形状添加了阴影，还在拇指指甲形状上添加了一个小圆盘。...我通过清除背景、亮化边框和文本来实现变灰显示方法。虽然一个禁用的控件无法接收焦点，但我们可以悬停在该控件上，以便我们想要撤消这些样式。 ? 不确定的状态 复选框有第三种状态(开关控件没有)。...在本例中，只需将拇指指甲形状移动到中间并选择一个中性的背景颜色即可。因为我们已经为禁用的复选框处理了颜色，所以我们不需要为禁用的不确定情况做任何特殊的事情。 ?...绿色仍然有好的对比度(6.2:1)，但是我需要改变获得焦点/悬停文本的蓝色，我把边框和背景颜色调亮一点(#808080)，以获得4.8:1的对比度。
用到的东西有定时器，列表标签，定位，悬停在列表时停止定时器。....out {} .over { //设置数字的样式,当鼠标停在数字上时,给数字加点背景色和字体颜色....background-color: red; color: red; } 如何让数字高亮呢，这很简单，只要在改变图片的图示让数字定位到这个css中的...height: 600px; } .cout {} .cover { //设置数字的样式,当鼠标停在数字上时...,给数字加点背景色和字体颜色.
例如，要选择所有具有 button 类的按钮元素，并将它们的背景颜色设置为蓝色，可以使用以下样式： .button { background-color: blue; } 2.3 ID选择器 ID选择器允许你选择具有特定...例如，要选择所有与标题元素 具有相同父元素的段落元素 并将它们的文字颜色设置为灰色，可以使用以下样式： h2 ~ p { color: gray; } 4....5.2 :hover 伪类选择器 :hover 伪类选择器用于选择鼠标悬停在元素上时的状态。...例如，要选择鼠标悬停在按钮元素上时，并将其背景颜色设置为浅灰色，可以使用以下样式： button:hover { background-color: lightgray; } 5.3 :nth-child...例如，要选择具有 btn 和 primary 两个类名的按钮元素，并将其背景颜色设置为蓝色，可以使用以下样式： .button.primary { background-color: blue; }
src 是必须属性 图像路径分两种 1.绝对地址：网络地址 2.相对地址：本地地址 可添加|设置： 1.width 宽度 2.height 高度 3.border 边框 4.title 当鼠标悬停在内容上的时候...（三）常用标签 1.background 一般用来设置背景图片 如: 2.bgcolor 设置背景颜色，颜色的设置有三种形式...最后一种是rgb形式 如: 背景颜色和图片可以同时使用...，而往往，背景图片会优先运行。...按钮的显示 button 普通按钮 常结合js一起使用 reset 重置按钮，恢复默认值 fieldset 选区 select 下拉框 option 下拉列表选项 textarea
，包括：红色、黄色、绿色、青色、蓝色、灰色。...，包括：红色 、黄色 、绿色 、青色 、蓝色 、灰色 。...animated-hover %}warning{% endtip %} {% tip ban faa-flash animated-hover %}ban{% endtip %} 4.On parent hover（当鼠标悬停在父级元素时显示动画...） warning ban 2.调整动画速度 warning ban 3.On hover（当鼠标悬停时显示动画） warning ban 4.On parent hover（当鼠标悬停在父级元素时显示动画...[index]: 活动选项卡的索引号。 如果未指定，将选择第一个标签（1）。 如果 index 为-1，则不会选择任何选项卡。 可选参数。 [Tab caption]: 当前选项卡的标题。
页面主体 Bootstrap讲全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。...示例如下: 标记：I like you 很久了 被span标签包起来的文本 you 的样式被添加背景色 1.3.2....改变大小写 3 大写：class=”text-uppercase” 示例代码：i like you 2 .小写：class...缩略语：当鼠标悬停在缩写和缩写词上就会显示完整内容 基本缩略语： 示例代码：HTML是一门超简单的网页语言... 顾名思义 紧缩表格，就是表格相对来说缩紧一些，仔细看行的上下两条线是不是缩紧了 状态类 class=”active”:鼠标悬停在行或者单元格上时设置的颜色
，按妞的背景颜色 activeforeground 当鼠标放在按钮上时候，按钮的前景色 bd 按钮边框的大小，默认为 2 个像素 bg 按钮的背景色 command 用来执行按钮关联的回调函数。...（灭的状态） insertontime 该选项控制光标的闪烁频频率（亮的状态） selectbackground 指定被选中文本的背景颜色，默认由系统决定 selectborderwidth 指定被选中文本的背景颜色...image_cget(index, option) 返回 index 参数指定的嵌入 image 对象的 option 选项的值，如果给定的位置没有嵌入 image 对象，则抛出 TclError 异常...", button) #使用 tag_config() 来改变标签"name"的前景与背景颜色,并加下画线，通过标签控制字符的样式 text.tag_config("name", font=('微软雅黑...，比如当鼠标离开输入框的时候 控件的发生改变的时候触发事件，比如调整了控件的大小等 当控件的状态从“激活”变为“未激活”时触发事件 当控件被销毁的时候触发执行事件的函数 当窗口或组件的某部分不再被覆盖的时候触发事件
Example: /scoreboard teams option color red /scoreboard teams option friendlyfire.../always always deathMessageVisibility 死亡时如何显示死亡讯息 never/hideForOtherTeams/hideForOwnTeam/always always...可选颜色 black(黑色) dark_blue(深蓝色) dark_green(深绿色) dark_aqua (深水蓝色) dark_red(深红色) dark_purple(深紫色) gold(...金色) gray(灰色) dark_gray(深灰色) blue(蓝色) green(绿色) aqua(水蓝色) red(红色) light_purple(亮紫色) yellow(黄色) white(白色...) reset(恢复到预设的颜色) 插件 一些有趣的插件 [Dragon Mounts 2 | 龙骑士] 孵化末影龙 官网下载地址 依赖 llibrary Reference 如何搭建“我的世界”服务器
Eclipse背景颜色修改： 操作界面默认颜色为白色。对于我们长期使用电脑编程的人来说，白色很刺激我们的眼睛，所以我经常会改变workspace的背景色，使眼睛舒服一些。...设置方法如下： 1、打开window->Preference,弹出Preference面板 2、展开General标签，选中Editors选项，展开。...改变背景颜色 windows->Preferences->General->Editor->Text Editors 右边选择Appearance color options 选Background...color 选择背景颜色 选Current line highlight 来改变 当前选中行 的颜色 配色方案详细following： Eclipse字体大小调整： 窗口(Window...右边选择Appearance color options 选Background color 选择背景颜色 背景配色：160,0,59 选Current line highlight 来改变 当前选中行
或 500，取决于字体） 对于想要强调的文字，可使用较重的字体（600 或 700）时 # 不要在彩色背景上使用灰色文字 在白色背景上，让文字变成浅灰色是一个很好的方法，这是因为我们看到的白底灰效果实际上是对比度降低了...0% 时，旋转色相实际上根本不会改变颜色 亮度（Lightness），衡量一种颜色与黑色或白色的接近程度，取值范围为 0% 到 100% 0% 表示黑色， 100% 表示白色，50% 表示给定色相的纯色...为项目中最深的文字选择一种颜色，从而挑选出最深的灰色 为项目中最浅色的背景选择一种颜色， 从而挑选出最浅的灰色 如果可以的话，尽量避免频繁添加新色调。...（红色、绿色和蓝色）和三个局部最大值（黄色、青色和洋红色） # 通过旋转色调改变亮度 通常，当想改变颜色的亮度时，可以直接调整亮度 虽然这样做可以使颜色变浅或变深，但往往会失去一些颜色的强度--颜色看起来更接近白色或黑色...真正的灰色饱和度为 0% - 它没有任何实际的颜色 实际上，很多我们认为是灰色的颜色其实饱和度很高 这种饱和度使一些灰色感觉冷，而另一些灰色感觉暖 # 色温 如果你想让你的灰色感觉凉爽，那就用一点蓝色来饱和它们
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
