文章目录 一、CSS 选择器作用 二、CSS 选择器分类 三、标签选择器 1、简介 2、代码示例 四、类选择器 1、简介 2、类名规范 3、代码示例 4、div 与 span 标签 ① span...标签 ② div 标签 5、多类名选择器 一、CSS 选择器作用 ---- CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置...CSS 类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ; CSS 类选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置类名 ; <p class...:20px; } CSS 类选择器 优点 : 可以选择指定的若干标签 ; 2、类名规范 类名规范 : 多个单词组成的类名 , 推荐使用 - 隔开 ; 不要使用 纯数字 , 纯中文 作为类名 ; 3..., 多个类名之间使用 空格隔开 ; G 完整代码示例 : <!
专栏介绍 【前端网页】 目前主要更新HTML，一起学习一起进步。...作用：选择 CSS 样式代码 作用于 对应类名的 HTML 标签上 格式： ....类名 { /*CSS 样式代码 */ } 适用范围：适用于将样式 一次作用在相同类名的标签上。...> div class="redF">div2：我是红色div> 示例： 效果： 注意： 1 、如果需要选择多个，例如同时使用 c1 和 c2 多个样式： 2 、类选择器命名时...作用：选择 CSS 样式代码 作用于 某个规定 id 值的 html 标签上 格式： #id 值 { /*CSS 样式代码 */ } 适用范围：适用于将样式
这种方法的主要思想是「将组件的样式与组件本身紧密耦合在一起，以提高可维护性、可读性和复用性」。CSS-in-JS 有许多不同的库和工具，每个都有自己的语法和特性，但核心思想是相似的。...以下是 CSS-in-JS 的一些主要特点和优势： 「组件化样式」：CSS-in-JS 允许我们将样式与组件一起定义，将它们封装在一起。...CSS模块的红与黑 优点： 通过使用CSS模块，可以避免CSS类的「命名空间冲突」。「多个CSS文件可以包含相同的CSS类」。 在CSS模块中，我们可以将类发送到多个组件。...多个 CSS模块混合使用 CSS模块不限制使用多个类；我们可以按照以下方式使用CSS模块来添加多个类： div className={`${classes.container} ${classes.border_radius...伪类选择器 伪类选择器用于选择处于特定状态的元素。由于CSS模块通过为我们的元素添加类来工作，因此添加伪类选择器非常简单。
分享给更多人：欢迎分享给更多对编程感兴趣的朋友，一起学习！ 1.什么是CSS CSS（Cascading Style Sheets，层叠样式表）是用于控制网页样式和布局的语言。...4.1 CSS的3种使用方式 内部样式 将样式写在HTML的内，也就是前文写的那样，适用于单个页面的样式。...我是一个标题 外部样式表 将样式写在独立的.css文件中，通过标签引入，适用于多页面共享样式。...一个类可以被多个标签使用，一个标签也可以使用多个类（多个类名使用空格分割） 不要使用纯数字、中文、标签名来命名类。...id是唯一得的，不能被多个标签使用 加粗的字体是和类选择器最大的区别。 如果要比喻的话，类就是人的姓名可以重复，id就是身份证不能重复。 5.1.4 通配符选择器 使用*，选取所有的标签。
本文将深入解释CSS的语法格式，包括选择器、属性和值等基本概念，同时提供示例代码以帮助初学者更好地理解。 1....属性（Property）：CSS属性是一种控制样式的规则，如颜色、字体大小、边距等。属性必须与值一起使用，以定义样式的具体表现。...CSS语法结构 CSS的基本语法结构如下： 选择器 { 属性1: 值1; 属性2: 值2; /* 更多属性和值 */ } 选择器：选择器用于选择一个或多个HTML元素，以确定哪些元素应用这些样式规则...多个声明可以放在同一个声明块中。 下面是一个示例，将元素的文本颜色设置为红色： h1 { color: red; } 3....div p { /* 样式规则 */ } 4.5 组合选择器 组合选择器允许将多个选择器组合在一起，以选择满足任一选择器条件的元素。组合选择器使用逗号,分隔多个选择器。
工欲善其事，必先利其器 本文推荐Emmet插件，HTML/CSS代码快速编写"神器"~~，快来和我一起学习吧 一、快速编写HTML代码 1....轻松添加类、id、文本和属性 连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo： Html代码 连续输入类和id，比如p.bar#foo，会自动生成...隐式标签 声明一个带类的标签，只需输入div.item，就会生成div class="item">div>。...下面是所有的隐式标签名称： li：用于ul和ol中 tr：用于table、tbody、thead和tfoot中 td：用于tr中 option：用于select和optgroup中 6....定义多个元素 要定义多个元素，可以使用*符号。
内嵌式样式表 内嵌式样式表是在html里面嵌套一个style标签，将css语句都写在style标签里面 css语句 外链式样式表 单独创建一个后缀名为.css的文件...，在html文件里面通过link标签引入css文件 css文件的地址" /> 行内式样式表 将样式直接写在标签本身上，以属性的形式存在 div...控制一个页面（中） 外链式样式表 完全实现结构和样式相分离 需要引入 最多，强烈推荐 控制整个站点（多） 标签的三种显示模式 块级元素 可设置宽和高 独占一行 默认宽度是父级标签的宽度 块级元素一般用于包裹其他块级或者行内元素...复合选择器 交集选择器 既又原则 例如：p.box {} 既是p标签 又有box类名 并集选择器 将多个选择器合并在一起 例如： div,p,h1 {} 后代选择器 空格前面的元素和后面的元素必须是嵌套关系.../div> 层叠性 后渲染的css样式会覆盖掉先渲染的css样式 （权重相同的情况下） 注意：层叠性真针对css的书写位置，类的调用位置先后会它没有影响 .box1 { /* 最终绿色起效果
专栏介绍 【前端网页】 目前主要更新HTML，一起学习一起进步。...案例代码 5.伪类选择器 1.1 概述及格式 1.2 链接伪类：常见 API 及案例代码 1.3 结构伪类：示例代码 1.4 伪类和伪元素的区别（了解） 6.总结 1.概述 复合选择器：多个基本选择器的组合使用形式...我们可以对基本选择器进行组合，表现出包含关系，从而更加针对性地把样式作用于某些标签上。...格式：（用冒号连接） 选择器 : 伪类 { /*css 样式代码 */ } 意思为：为选择器 1 和 选择器 2 设置相同 CSS 样式 1.2 链接伪类：常见...元素内容体 ，生效时会有 追加特殊样式 span 的效果 伪类选择器 作用于 元素 ，生效时会 设置元素动作效果和子元素效果 6.总结
1. jQuery选择器 - 选择器都是以 $() 开头的 基础选择器 选择器 描述 id选择器 指定id元素 class选择器 遍历css类元素 element元素 遍历HTML元素 *选择器 遍历所有元素...并列选择器 这类选择器将每一个选择器匹配到的元素合并后一起返回 div id="notMe">id="notMe"div> div id="myDiv">id="...')").css("text-decoration", "underline"); 表单伪类选择器 表单伪类选择器,指的是根据表单类型来选择的伪类选择器: 选择器 说明 :input...(function () { $("p").toggleClass("main"); }); }); CSS属性操作 jQuery提供css()方法，用来获取或设置匹配的元素的一个或多个样式属性...绑定与接触事件 绑定事件 绑定事件就是将页面中的元素事件类型与其在收到该事件之后期望进行的操作联系到一起。
将表单恢复到默认值。 u image：图形提交按钮，通过src给按钮设置图片。 u button：普通按钮，常用于与JavaScript结合使用。...层叠：使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。 1.2.3.3 CSS样式规则 使用HTML时，需要遵从一定的规范。...在上面的样式规则中，“选择器”用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。属性和属性值以键值对方式出现，使用英文冒号“:”分隔。多个属性之间使用英文分号“;”分隔。...2) 内部样式 内部样式又称为内嵌式，是将CSS代码集中卸载HTML文档的头部标签体中，并且使用标签定义。 给当前html文件中的多个标签设置样式。...3) 外部样式 外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将样式连接到HTML文档中。 <!
使用公式：(“element”) 示例：(“div”) //获取所有div元素 3.类名选择器 类选择器是通过元素拥有的CSS类的名称查找匹配的...在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配类的名称就可以被类选择器选取到。...简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。...使用公式：(“.class”) 示例：(“.box”) //获取class属性值为box的所有元素 4.复合选择器 复合选择器将多个选择器...注意：多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素，而是将每个匹配的元素合并后一起返回。
） 有多个样式规则 （有内联样式或者选择器选中，且不只一个规则作用于该属性） 下面我们来详细分析一下这三种情况。...test3.1 3.2 多个样式规则 多个样式规则冲突，其实有很多种情况。还记得我们学过样式引入方式有四种，涉及三种样式，分别是内联，内部和外部（参考CSS入门4-引入CSS）。...将选择器分为四类: 常用选择器，包括元素选择器，类选择器，id选择器和属性选择我器 伪类选择器和伪元素选择器 关系选择器 通配选择器 3.2.1.2.1 常用选择器 3.2.1.2.1.1 同一类选择器...首先，四种选择器在一起时，id选择器获胜。然后排除id选择器，剩余三种选择器比较时，类和属性谁在下边谁赢，也就是后者覆盖前者。最后，元素分别与类和属性比较，发现元素都输了。...3.2.1.2.2.1-1.3锚点已点击 看上面示例，我们在style内先按id，类，属性，元素，静态伪类(只应用于超链接)，动态伪类(可应用于任何元素)，目标伪类:target(IE8-不支持，匹配锚点对应的目标元素
对应于这种方案，我们可以将width: 90%与max-width：1170px属性结合在一起。...在每个项目中，我都准备了一组用于margin和padding的实用工具类，在必要时使用它们，考虑下图。 ?...important; } 这样，wrapper 的 CSS保持原样，并且使用附加的 CSS 类添加了间距。 现在，你可能会问，为什么可以在一个页面上添加多个wrapper？...div class="wrapper" style="--wrapper-width: 720px">div> 如果你不使用 CSS 变量的方式，也可以通过多加一个类来解决： div class...现在，当将display:flex应用于.site-header元素时，.wrapper的后代项将成为.site-header的子项。 ?
骨架屏（占位区域） 在这个例子中，我们将使用Tailwind CSS创建一个占位符内容区域，用于在没有网络连接或正在加载数据时使用 :) div class="mx-auto mt-10 w-full...rounded-3xl 类将内部 div 的角落变圆，创造出更圆润的形状。...用途：我们可以在多个地方使用这个动画，比如突出显示帧、加载数据、文件或图像处理等。 6. 弹力圆圈 这段动画代码将创建一个带有两个弹跳元素的加载动画效果。...最外层的元素将弹跳，而在其中，将有一个嵌套的元素也会弹跳。 此外，还有一个小点状元素会随着其他元素一起移动和弹跳。...用途：我们可以将此动画用于加载数据、文件或图像处理或上传。 将动画与其他 Tailwind 功能（暗模式）结合使用 Tailwind CSS的动画功能可以与框架提供的其他功能无缝集成。
作为练习，让我们将这个页面分解成一系列的组件。 每种颜色框代表一个组件，stream 节点下分为好多个 stream item 子节点。...解耦的代码越多，你的类之间的依赖就越低。这会让你的代码更容易修改，并且使你的代码更长时间的工作下去而不用修改它。 组件驱动设计 模块化你的 CSS 时，首先将你的设计分解成多个组件。...当单一功能原则应用于你的每一个 CSS 类选择器中时，这意味着每一个类选择器都有着唯一的功能。换句话说，要根据不同关注点将样式分离到不同的类选择器中。...splash 这个类不但包含了本身的样式和逻辑，同时也包含了它的子节点的。为了解决这个问题，我们可以将这段代码分离为两个新的类。...我们可以将 splash 作为一个一般的全屏类，它可以拥有任何子节点。所有子节点关注的属性，都在 splash content 中，与父节点的属性是完全解耦的。
欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。 目录 1. Animista 2. Animate CSS 3. Vivify 4....下载代码 另一个好用的功能是，可以把自己收藏自己喜欢的动画，然后一起下载下来， 或者，我们也可以选择将这些动画的代码复制到一起。 2....其它功能 Animate CSS提供了一些基本的类来控制动画的延迟和速度。 delay 可以添加 delay 类来延迟动画的播放。...div class="cssanimation leSnake">div> 要使字母按顺序产生动画，添加sequence类，要使它们随机产生动画，添加random类。...一组CSS3支持的悬停效果，可应用于链接、按钮、徽标、SVG和特色图像等。
是一种流行的开源 CSS 框架，Bootstrap 已经内置了样式和类，可以立即应用于您的应用程序。... div> ); } export default Example; # 样式规范 前面已经介绍了不同样式类型，现在我们将介绍编写样式的一些常见约定。...BEM 代表块（block）、元素（element）和修饰符（modifier），它们可以组合在一起，用于将大型界面拆分为独立的块。...块（block）： 用于描述，通常由类表示 在第一眼看上去就告诉我们该类表示什么 div className="success">div> 块（block）有以下规则 块可以嵌套 可以有任意数量的嵌套级别...元素（element） 用于描述块的一部分，通常由类表示 元素与块之间使用双下划线 __ 连接 div className="form"> div className="form__input
例如，每次我改变主意时，在不修改CSS的情况下快速画出五列网格。 在本文中，我们一起探索一些用例，并思考如果实现及使用它们。...CSS网格示例 侧边栏和主内容 ? 在此设计中，我将CSS网格用于以下各项： 边栏和主菜单 表单项 三列布局 侧边栏的宽度是固定的，主内容是变化。假设侧边栏的宽度是240px。...三列布局 在下面的示例中，我添加了--repeat-number：3和--gap：8px作为内联CSS。 这些变量将添加到o-grid类，网格的设置将基于这些变量。...我经常使用Grid minmax，但是当我在多个页面上使用它时，我遇到了一个问题。 让我们举一个不使用 CSS 变量的基本示例。 ?...按钮 按钮宽度 CSS 变量也适用于按钮元素。 假设有一个带有两个input字段和一个按钮的表单。 ? 我的目的是通过使用内联CSS变量来控制按钮的宽度。 有时，按钮应占据其父控件的100%宽度。
下载代码 另一个好用的功能是，可以把自己收藏自己喜欢的动画，然后一起下载下来， 或者，我们也可以选择将这些动画的代码复制到一起。 ? 2....其它功能 Animate CSS提供了一些基本的类来控制动画的延迟和速度。 delay 可以添加 delay 类来延迟动画的播放。...它们的工作方式完全相同，有Animate CSS的大多数类且还扩展了一些。...div class="cssanimation leSnake">div> 要使字母按顺序产生动画，添加sequence类，要使它们随机产生动画，添加random类。...一组CSS3支持的悬停效果，可应用于链接、按钮、徽标、SVG和特色图像等。
让我们共同努力，一起进步！ 加油，一起CHIN UP！ 2.... 类选择器 CSS 中的类选择器用于选取具有特定类名的 HTML 元素。类选择器在 CSS 中使用一个点号（.）后跟类名来定义。 一个标签元素可以同时拥有多个类，但必须使用空格分隔： 用于单个元素。 在 HTML 中，每个 id 属性值只能在页面中使用一次，但页面中可以有多个不同的 id 值。...6.css引入方式 在 CSS 中，有三种主要的方式可以将样式引入到 HTML 文档中：行内样式表、内部样式表和外部样式表。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
