首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS基础知识巩固你前端基础

css中常用伪类如下表所示: 伪类名 说明 :active 被激活元素添加样式 :focus 拥有输入焦点元素添加样式 :hover 鼠标悬停在上方元素添加样式 :link 未被访问链接添加样式...:visited 已被访问链接添加样式 :first-child 元素添加样式,且该元素是它元素第一个子元素 :lang 带有指定lang属性元素添加样式 伪元素选择器 css中常用元素如下表所示...: 伪元素名 说明 :first-letter 文本第一个字母添加样式 :first-line 文本第一行添加样式 :after 元素之后添加内容 :before 元素之前添加内容 css...css内边距属性,元素内边距边框和内容之间。...css轮廓是绘制元素周围一条线,位于边框边缘外围,起到突出元素作用。

2K10

H5+CSS3+JS逆向前置——CSS3、基础样式表

background-repeat:用于设置背景图片重复方式。 background-position:用于设置背景图片位置。...盒子模型相关属性: box-shadow:用于元素添加阴影效果。 outline:用于定义围绕元素外轮廓,区别于边框。...动画和过渡属性: transition:用于创建过渡效果,使元素改变样式时有一个平滑过渡效果。 animation 和 @keyframes:用于创建动画效果。...用户界面属性:包括鼠标悬停效果(如 hover 颜色)、表单控件样式(如 input type 属性对应样式)等。...以下是一些CSS3主要样式表: 边框圆角(Border Radius):允许您设置元素边框圆角。 背景渐变(Background Gradients):允许您创建背景渐变效果。

13710
您找到你想要的搜索结果了吗?
是的
没有找到

css基础系列

css基础系列 盒子模型 盒子模型概念 高和宽设置 边框设置 内边距设置 外边距设置 盒子计算 元素显示方式 ?...image.png 边框属性: 边框宽度:border-width 边框颜色:border-color 边框样式:border-style ? image.png ?...image.png 背景图片重复问题: 设置元素背景图片重复方式: background-repeat: repeat | no-repeat | repeat-x | repeat-y 背景图片显示方式...image.png 定位css 标准流,定位,浮动 浮动问题如何解决 手动给父元素添加高度 通过clear清除内部和外部浮动 给父元素添加overfloat属性并结合zoom:1使用 给父元素添加浮动...image.png 链接伪类 :link 未访问 :visited 已经访问 :hover 鼠标悬停 :active 激活 css继承和层叠 从父元素那继承部分css属性 css层叠可以定义多个样式

1.7K40

一篇文章带你了解CSS Pseudo-classes(伪类 )

CSS伪类选择器根据其他条件匹配组件,而不一定由文档树定义。CSS 伪类 是添加到选择器关键字,指定要选择元素特殊状态。 一、什么是伪类?...CSS伪类允许设置元素动态状态样式,例如悬停,活动状态和焦点状态,以及文档树中现有但不能通过使用其他选择器作为目标的元素,而无需添加任何选择器它们ID或类。 例如,针对第一个或最后一个子元素。...这些伪类更改了响应用户操作呈现链接方式。 : hover 当可被用于在用户将鼠标悬停在按钮上时改变按钮颜色用。 : active 当元素被激活或单击时适用。...,而没有元素添加任何ID或类。...提示: CSS :nth-child(N)选择器必须选择以特定间隔或模式(例如在偶数或奇数位置等)出现在文档树内元素情况下非常有用。

2K10

为你网页添加深色模式

尽管 CSS 新功能实现很复杂,但是 CSS 工作组还是决定要把简化版作为新元素添加到规范中。...然后由浏览器来实现这些新元素,浏览器自行决定以哪种顺序去实现它们,这就是为什么现在对新功能支持不匹配原因。虽然这可能会令人讨厌,但实际上完成了规范浏览器要好得多。...创建自定义属性 为了使用自定义属性,我们:root元素CSS顶部定义它们。根元素具有与 HTML 相同范围,因此可以全局使用。我们需要确定变量名称并定义它们值。...添加更多组件 现在我们已经获得了自定义属性,可以继续页面添加元素,并使用变量为它们设置样式。让我们创建一个按钮类,并在页面中添加一个按钮。...使用 scope 为按钮创建不同样式和交互 我们可以利用 scope 为深色和浅色主题按钮创建不同样式和悬停交互。可以根据媒体查询或元素状态修改变量值,而不是像往常一样使用新值重复属性。

1.6K30

超链接lvha原则

比起伪类繁荣大家族,伪元素就显得有些伶仃了,到目前(2017/11/4)为止,CSS3规范中仍然只有4个伪元素CSS2.1就是4个): 首字母:选择元素包含文本内容首字母(文本内容包含来自子元素...,也就是说可以跨标签层级选择文本) 首行:选择元素包含文本内容首行(同上) before:用于内容生成,指定元素内容开头位置生成一个元素(生成内容位于元素内容区里) after:用于内容生成,...指定元素内容结尾位置生成一个元素(同上) 伪类与伪元素最大区别是要选择目标内容是否存在于DOM上,存在就是伪类,不存在就属于伪元素。...*/} a:hover {/* 鼠标悬停超链接,鼠标经过超链接时或悬停在超链接上时,这个超链接就处于hover状态 */} a:active {/* 处于激活状态超链接,鼠标超链接上按下时 */...: 按下tab键 -> focus -> 绿色实线边框 点击其它空白处 -> a & link | visited -> 对应样式 鼠标划过时 -> hover -> 无边框 鼠标悬停时 -> hover

3.4K30

CSS揭秘》读书总结:背景与边框

2.多重边框 难题 多重边框实现很长时间内都需要各种丑陋 hack,比如使用多个元素来模拟多重边框 CSS 代码层面对多重边框进行灵活调整看起来非常困难。...如有需要,可以通过内边距或外边距(这取决于投影是内嵌还是外扩)来额外模拟出边框所需要占据空间。 使用 box-shadow 创建边框,其不会响应鼠标事件, 比如悬停或点击。...如果需要使其响应鼠标事件,则可以添加 inset 关键字,使得 box-shadow 创建边框出现在内圈,然后留出额外内边距来填补这些空隙。...如果需要和原先水平或垂直条纹一样宽度,在其基础上乘以 √2 即可。 更好条纹 上面的方案我们想调整斜角度时会非常不灵活。这里提供一个更好方案。...第一个好处就是减少了重复,改动颜色时只需要修改两处。另外一点就是现在是渐变色标中指定长度,而不是原来 background-size。

1.7K40

初探HTML之CSS篇(属性)

设置元素最小高度 min-width 设置元素最小宽度 ---- CSS 背景属性(Background) background 一个声明中设置所有的背景属性 background-color...border-image-width 规定图片边框宽度 border-image-source 规定用作边框图片 box-shadow 方框添加一个或多个阴影 ---- CSS 字体属性(...:active 被激活元素添加样式 :focus 拥有键盘输入焦点元素添加样式 :hover 当鼠标悬浮在元素上方时,元素添加样式 :link 未被访问链接添加样式 :visited 已被访问链接添加样式...:lang 带有指定lang属性元素添加样式 ---- CSS元素(Pseudo elements) 属性 描述 :first-letter 文本第一个字母添加特殊样式 :first-line...文本首行添加特殊样式 :bofore 元素之前添加内容 :after 元素之后添加内容 ---- 结束语 简单不先于复杂,而是复杂之后

2K30

超赞Win10日历悬停效果,爱了爱了(使用HTML、CSS和vanilla JS)

本文中,我将您解释我是如何创建自己Windows 10悬停效果日历 本文可能有点复杂,但这是针对初学者,如果您已经精通JS,并且知道Grid悬停逻辑,则可以快速遍历代码以了解发生了什么。...如果基础较差也没关系,建议点赞收藏日后慢慢研究 观察结果 1.毫无疑问, 这里使用了“网格悬停”效果,但是光标周围每个方向上突出显示了一个以上元素边框,即,元素后面的元素也被突出显示了...2.日期没有按钮悬停效果 3.网格悬停效果不适用于活动日期(今天date)元素。...5.点击日期(非有效日期)只有一个彩色边框 6.活动元素边框被照亮 入门 您可能已经猜到了,我将从网格效果代码开始。 网格前7个元素是星期名称和休息日期。...由于日历一次显示42个日期,因此我添加了42个win-btn元素win-grid。一些日期处于非活动状态,其中之一处于活动状态,因此我相应地添加了类。 HTML

1.8K10

分享 22 个实用CSS小技巧,让你网站更出色

选择适合你网站风格字体,并确保它们能够正确加载和显示。 渐变背景色:使用CSS渐变背景色可以为你网站添加华丽外观。尝试不同类型渐变,如线性渐变、径向渐变或重复渐变。...scroll-behavior属性,你可以为网页添加平滑滚动效果,使页面滚动时更加流畅和舒适。...html { font-size: 4vw; } 阴影效果:通过使用CSSbox-shadow属性,你可以添加阴影效果,为元素增添立体感和深度。...transition属性和:hover伪类,可以为元素添加边框动画效果,使其鼠标悬停时产生过渡效果。....text { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } 渐变边框样式:使用CSSborder-image属性,你可以创建具有渐变效果边框样式

19710

Bootstrap响应式前端框架笔记三——代码与表格

/bower_components/bootstrap/dist/css/bootstrap.min.css" /> <title<代码与表格</title> &...二、表格     为H5标签table添加table类可以使用Bootstrap定义表格样式,示例如下: 使用table标签添加table类可以进行表格创建 <table class...为表格添加tabke-striped类可以实现斑马纹样式表格,示例如下: 使用table-striped类可以为表格添加斑马纹 <table class="table table-striped...Bootstrap默认<em>的</em>列表样式是不带<em>边框</em><em>的</em>,可以使用table-bordered类来为列表<em>添加</em><em>边框</em>,示例如下: 使用table-boardered类可以为表格<em>添加</em><em>边框</em> <table...使用table-hover类修饰<em>的</em>列表,当鼠标<em>悬停</em><em>时会</em>有高亮效果,示例如下: 使用table-hover类修饰<em>的</em>列表,当鼠标<em>悬停</em>时 会有高亮效果 <table class="table

1.2K30

前端(二)-CSS

:粗细 样式 颜色; 4.2.5 border-collapse border-collapse 属性是用来设置 table 表格边框是否被合并为一个单一边框,还是象标准 HTML 中那样分开显示...设置表格单元格边框方法 直接设置表格table属性:cellspacing="0" CSS方法1:border-collapse: collapse; 边框会合并为一个单一边框CSS方法2:border-spacing...允许 5.4 解决父级边框塌陷方法 5.4.1 添加空div,并清除两边浮动 5.4.2 设置父元素高度(灵活性差) 5.4.3 添加overflow属性(溢出处理) 属性值 说明 visible...--clear类后面添加内容为空--> display: block; clear: both; <!...,当过了设置时间值后才会被触发 ; 负值:元素过渡效果会从该时间点开始显示,之前动作被截断 ; 0:默认值,元素过渡效果立即执行; 7.3 过度触发机制 1.伪类触发 :hover 鼠标悬停和划过时显示效果

1.8K20

CSS Transition:为网页元素增添优雅过渡效果

一、CSS Transition基本概念 CSS Transition是CSS3中一个重要特性,它允许元素从一种样式逐渐改变为另一种样式。...这种改变不是瞬间完成,而是一段时间内平滑过渡,从而给用户带来更好视觉体验。...例如,如果你想让元素背景色鼠标悬停时平滑过渡,你可以这样写: div { width: 100px; height: 100px; background-color: red...触发过渡效果 过渡效果需要在元素某个CSS属性发生变化时才能触发。这通常是通过用户交互(如鼠标悬停、点击等)或JavaScript动态改变元素样式来实现。...三、CSS Transition常见应用 按钮悬停效果 通过为按钮添加过渡效果,可以在用户悬停时呈现出更加吸引人视觉效果。例如,你可以改变按钮背景色、边框颜色或阴影等属性。

16710

CSS中鼠标滑过图片放大效果

刚刚看了下感觉还不错,纯CSS实现,虽然开发主题时CSS3用比较少。...这是一款简单实用CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示图片中,这样可以将鼠标移到图片上进行快速预览图片。同时你也可以在此基础上扩展它,比如给图片加投影和边框等。...CSS3中鼠标滑过图片突出放大效果 悬停时展开项目 我们下一步是让项目悬停时展开。...CSS3中鼠标滑过图片突出放大效果 向外移动兄弟元素悬停兄弟项远离悬停项是整个过程中很棘手部分。我们可以使用一个CSS特性是一般兄弟组合器。这使我们可以选择位于悬停项之后所有同级项。...由于通用同级组合器仅适用于位于给定选择器之后同级(没有“向后”),因此我们需要另一种方法。 一种方法是父容器本身上添加其他悬停规则。这是计划: 悬停父容器时,请将该容器内所有项目向左移动。

8.2K10

【译】Web中图像技术总结,前端开发中各种图片引入优点缺点及实例

前端开发人员构建网站时需要做出决定之一就是添加图片技术。它可以是HTML ,也可以是通过CSS背景生成图片,也可以是SVG 。...另外,当图片源发生故障时,可以其中添加元素。 1.4 响应式图片 ? 优点在于,可以针对特定视口大小将其扩展为具有多个版本图片。例如,这可用于商品图片。...您必须先检查元素,然后DevTools中 url 中打开链接,然后才能下载随CSS添加图像。 2.6 伪元素 可以使用伪元素CSS背景图片一起使用,例如,图片顶部显示一个叠加元素。...这就是一个问题,为了解决这个问题,我们应该在头像内部添加一个边框,这将是图像太亮情况下作为备用。 ?...解决方法是用 包裹头像,并添加一个专门用于内边框元素

5.5K20

JQuery笔记

,会发生 mouseup 事件 hover() 方法用于模拟光标悬停事件 focus() 当元素获得焦点时,发生 focus 事件 blur() 当元素失去焦点时,发生 blur 事件 JQuery 效果...() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 CSS类 addClass() - 被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类...toggleClass() - 对被选元素进行添加/删除类切换操作 css() - 设置或返回样式属性 CSS方法 返回CSS属性 $("p").css("background-color");...设置CSS属性 $("p").css("background-color","yellow"); 尺寸 width() 方法设置或返回元素宽度(不包括内边距、边框或外边距) height...() 方法返回元素宽度(包括内边距和边框) outerHeight() 方法返回元素高度(包括内边距和边框 JQuery遍历 祖先 parent() 方法返回被选元素直接父元素 parents()

6.1K20
领券