值（Value）：CSS属性的值是属性所控制的样式的具体设置。不同属性接受不同类型的值。例如，color属性可以接受颜色值，如"red"、“#00ff00”、"rgb(255, 0, 0)"等。....btn { /* 样式规则 */ } 4.3 ID选择器 ID选择器以井号#开头，选择具有指定ID的HTML元素。ID应该在整个HTML文档中是唯一的。...它们使用空格分隔两个选择器。例如，div p选择所有元素，但只有当它们位于div>元素内部时。...div p { /* 样式规则 */ } 4.5 组合选择器 组合选择器允许将多个选择器组合在一起，以选择满足任一选择器条件的元素。组合选择器使用逗号,分隔多个选择器。...本文介绍了CSS的基本概念、语法结构、常见选择器、属性和值，以及如何使用注释添加说明。通过不断练习和实践，你将能够熟练掌握CSS，并创建出漂亮的网页样式。
:focus，将样式添加到被选中的元素中 :hover，当光标悬浮在页面对象上方时，向页面对象添加样式 :link，将样式添加到未被访问过的链接中 :visited，将样式添加到被访问过的链接中 :first-child...E[att~="val"]，选择具有attr属性且属性值为用空格分隔的字词列表，其中一个等于val的E元素 E[attr|="value"]，选择具有attr属性且属性值为用连字符分隔的字词列表，表示由...val开始的E元素 E[attr^="val"]，选择具有attr属性且属性值为以val开头的字符串的E元素 E[attr$="val"]，选择具有attr属性且属性值为以val结尾的字符串的E元素 E...E:not(s)，选择匹配所有不匹配简单选择符s的E元素 E:empty，匹配没有任何子元素的元素E E:target，匹配当前链接地址指向的E元素 E:first-child，匹配父元素的第一个子元素...，匹配父元素仅有的一个子元素E E:first-of-type，匹配同类型中的第一个同级兄弟元素E E:last-of-type，匹配同类型中的最后一个同级兄弟元素E E:only-of-type，匹配同类型中的唯一的一个同级兄弟元素
https://ishadeed.com/article/spacing-in-css/ 如果两个或更多元素接近，则用户将假设它们以某种方式属于彼此。...但是，在处理具有大量细节和子元素的组件时，这可能会变得越来越复杂。 Margin- 外部间距 它用于在一个元素和另一个元素之间添加间距。...例如，在前面的示例中，我添加了 margin-bottom: 1rem 以在两个堆叠元素之间添加垂直间距。...如果您喜欢它，请投票以帮助将其引入 Chrome。 CSS 定位 它可能不是分隔元素的直接方式，但它在某些设计案例中发挥作用。...你有没有想过当margin与具有不同书写模式的元素一起使用时应该如何表现？ 考虑以下示例。
div~p: 选中的div后面所有的p CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。...E[attr~=val] 选择具有 att 属性且属性值为：用空格分隔的字词列表，其中一个等于 val 的E元素。...理解： （1）这里我们要好好理解父元素的含义，它指的是：以 E 元素的父元素为参考。 （2）注意：以上选择器中所选到的元素的类型，必须是指定的类型E，如果选不中，则无效。...E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。 E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。...上图可以看出： 通过伪元素选择器，就可以添加出类似于span标签的效果（记得要结合 content 属性使用）。 通过这两个属性添加的伪元素，是行内元素，需要转换成块元素才能设置宽高。
id属性的值，在当前的page页面要是唯一的。 class：指定标签的类名。CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。 2、CSS选择器常见的有几种?...和 # 本身充当分隔符的元素| 3、属性选择器 |选择器 | 含义 | | -------- |:------------- -----:| | E[attr] | 匹配所有具有属性attr...E[attr ~= value] | 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 | | E[attr ^= value] | 匹配属性attr的值以value开头的元素|...对于复杂场景如何计算优先级？ 从高到低分别是： 1、在属性后面使用 !...p id="child" class="class1"> Text div> 按照我们刚才的方法计算，两个的权值时相同的，这时候应该用那条规则呢？
:checked 单选框或复选框被选中 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？...简单的方式： 上面的div宽100%， 下面的两个div分别宽50%， 然后用float或者inline使其不换行即可 经常遇到的浏览器的兼容性有哪些？...一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型 不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此...视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，具有非常出色的视觉体验 一般把网页解剖为：背景层、内容层和悬浮层。...当滚动鼠标滚轮时，各图层以不同速度移动，形成视差的 实现原理 以 “页面滚动条” 作为 “视差动画进度条” 以 “滚轮刻度” 当作 “动画帧度” 去播放动画的 监听 mousewheel 事件，事件被触发即播放动画
因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 ，我们肯定先需要学习如何查找指定的标签 ---- 选择器列表 如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个...相同选择器不同导入方式 选择器系统遵循就进原则，从上往下谁离标签更近谁说了算 通俗理解： 比如两个相同的选择器都要修改p标签，最下面那个，或者离p标签更近的选择器生效； 如果p标签自己使用style...参数，那么p标签自己设定的参数生效； 不同选择器不遵循就近原则>>>:优先级 行内选择器 > id选择器 > 类选择器 > 标签选择器 基本选择器 标签选择器 通过标签名直接查找 /*查找所有的div...[attr~=value] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。...: italic; } /* 存在class属性并且属性值包含以空格分隔的"logo"的元素 */ a[class~="logo"] { padding: 2px; } 分组与嵌套 如果存在多个标签需要调整为同一样式
（下划线连接式） 1.1 项目文件命名 1.1.1 项目名 全部采用小写方式， 以短横线分隔。...应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态、不掺杂业务逻辑的组件) 应该全部以一个特定的前缀开头 —— Base。...：textarea、title 外来元素：来自 MathML 命名空间和 SVG 命名空间的元素 常规元素：其他 HTML 允许的元素都称为常规元素 为了能让浏览器更好的解析代码以及能让代码具有更好的可读性...，有如下约定： 所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。...推荐： fn() 不推荐： fn () fn () 在操作符前后都需要添加空格。
不同类型的选择器列举如下： jQuery 元素选择器 在 jQuery 中，你可以使用CSS选择器来选择特定的DOM元素，例如： $(this) 选择当前的DOM元素。...$(“div”) 选择所有的div> 元素。 $(“.super”) 选择所有的“super”类型的元素。 $(“div.super”) 选择所有“super”类型的div>元素。...$(“#wow”) 选择第一个具有“wow”标识符的元素。 $(“div#wow”) 选择第一个具有“wow”标识符的 div> 元素。...jQuery 属性选择器 如果你想通过属性选择元素，而不是通过DOM对象，你可以使用XPATH表达式来选择具有特定属性的元素。例如： $(“[href]”) 选择具有href属性的所有元素。...$(“[href=”#”]”) 选择具有href属性值等于“#”的所有元素。 $(“[href!=”#”]”) 选择具有href属性不等于“#”的所有元素。
关系选择器： div>p 选择所有作为div元素的子元素p div+p 选择紧贴在div元素之后p元素 div~p 选择div元素后面的所有兄弟元素...[attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表，其中一个等于value的元素。 ...[attribute|=value]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。 ...[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素 [attribute$=value]匹配具有attribute属性、且值以value结尾的...:element1~element2: :first-of-type匹配同类型中的第一个同级兄弟元素 :last-of-type匹配同类型中的最后一个同级兄弟元素
如何通过类别名获取 dom 元素 在 JS 中使用document.getElementsByClassName() 方法来获取具有类名的元素。...10.如何在JS中动态添加/删除对象的属性？...4.将基本数据类型与其值进行比较，这意味着如果两个值具有相同的数据类型并具有相同的值，那么它们是严格相等的。 5.非基本数据类型不与值进行比较。...例如，如果两个对象具有相同的属性和值，则它们严格不相等。 15. 如何在现有函数中添加新属性 只需给现有函数赋值，就可以很容易地在现有函数中添加新属性。...当捕获和冒泡时，允许函数在一个特定的时间实现一个处理程序到多个元素，这称为事件委托。事件委托允许将事件侦听器添加到父节点而不是指定的节点。这个特定的侦听器分析冒泡事件，以找到子元素上的匹配项。
（注2：更多内容请查看我的目录。） 1. 选择器简介 大家都参加过学校运动会开幕式吧，或者看过电视节目中的开幕式。不同的队伍有不同的穿着，不同的口号和队形，不同的人有不同的职责，站位也不一样。...那么如果你作为开幕式的负责人，你该如何安排呢？让哪个队伍穿什么颜色的衣服，哪个人负责在前面举旗，哪些人喊什么口号，做什么动作。作为负责人，你会如何安排下去呢？...选择所有lang属性以“en”单词开头的元素 特征：中括号包围,|=链接,属性中必须是完整且唯一的单词，或者以-分隔开 选择器：[attribute^=value ] 示例：[src^="http“]...css还为我们提供了特殊的选择器，能够帮助我们像类和元素一样去做出更复杂的选择。 2.4.1伪类选择器 效果就像给某些特定的元素添加一个类，当然该元素是已存在的。...，子元素是E E:only-of-type 选择父元素中只包含一个同类型的子元素，子元素是E E:empty 选择没有子元素的元素，而且该元素也不包含任何文本节点 [注意]n可以是整数(从1开始)，
一般不写name属性，否则将“提交”两个字提交到服务器。 因为不同项目注册需要的字段不同，需要完成的案例中没有覆盖所有的表单元素，以下标签使用也需要大家掌握。...层叠：使用不同的添加方式，给同一个HTML标签添加样式，最后所有的样式都叠加到一起，共同作用于该标签。 1.2.3.3 CSS样式规则 使用HTML时，需要遵从一定的规范。...标记选择器最大的优点是能快速为页面中同类型的标记统一样式，同时这也是他的缺点，不能设计差异化样式。...1.2.5.2 转换：display HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。 块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。...常见的行内元素：、 等 在开发中，希望行内元素具有块元素的特性，需要使用display进行转换 选择器{display:属性值} 常用的属性值： inline：此元素将显示为行内元素（
如果两个或多个元素很接近，那么用户就会认为它们以某种方式属于彼此。当对多个设计元素进行分组时，用户可以根据它们之间的空间大小来决定它们之间的关系。...例如，在上一个示例中，我添加了 margin-bottom:1rem 在两个堆叠的元素之间添加垂直间距。...margin 折叠 简而言之，当两个垂直元素具有margin，并且其中一个元素的margin大于另一个元素时，发生边距折叠。在这种情况下，将使用更大的margin，而另一个将被忽略。 ?...你是否曾经考虑过将边距与具有不同 writing-mode 的元素一起使用时应如何表现？考虑以下示例。 ?...让我们回想一下Grid用例，以了解如何在其中使用动态间距。
一、SVG 的 animation SVG animation 有五大元素，他们控制着各种不同类型的动画，分别为： set animate animateColor animateTransform animateMotion...，动画太单一不酷，需要同时改变多个属性时，上边的四种元素可以互相组合，同类型的动画也能组合。...以上这些元素虽然能够实现动画，但是无法动态地添加事件，所以接下来我们就看看 js 如何制作动画。...我们上述制作的 SVG 图形、动画等，运行在低版本IE中，发现SVG只有IE9以上才支持，低版本的并不能支持，为了兼容低版本浏览器，可以使用 VML ,VML需要添加额外东西，每个元素需要添加 v:元素...使用语法：paper.path(pathString) pathString是由一个或多个命令组成，每个命令以字母开始，多个参数是由逗号分隔。 eg：绘制一个三角形。
">我是divdiv> 根据部分属性值选择 E[attr~="val"] { sRules } 选定具有属性 attr 且属性值为用空格分隔的字词列表...} 选定具有属性 attr 且属性值以 val 开头的字符串的文档元素 E /** 设置 class 属性的值以 head 开头的元素为红色 **/ div[class^="head"] { color...: red; } div calss="headClass">我是divdiv> E[attr$="val"] { sRules } 选定具有属性 attr 且属性值以 val 结尾的字符串的文档元素...} 选定具有属性 attr 且属性值以 val 开头并用连接符 "-" 分隔的字符串（包含属性值只有 val 的情况）的文档元素 E /** 设置 class 属性的值以 head 开头并用连接符 "...我是段落1 div> 我是段落2 div> div> 子代选择器 E>F { sRules } 选定文档元素 E 所有的子代元素 F，不包含孙代元素 /*
下划线连接式） 1.1 项目文件命名 1.1.1 项目名 全部采用小写方式， 以短横线分隔。...这类组件作为项目的基础控件，会被大量使用，因此组件的 API 进行过高强度的抽象，可以通过不同配置实现不同的功能。...应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态、不掺杂业务逻辑的组件) 应该全部以一个特定的前缀开头 —— Base。...、title 外来元素：来自 MathML 命名空间和 SVG 命名空间的元素 常规元素：其他 HTML 允许的元素都称为常规元素 为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：...所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
可以看到，十六进制颜色值是很难阅读的。我们基本不太可能通过读取十六进制值来猜测元素的颜色。 4....超亮白色可以使用高达 400% 的百分比。a和b轴的值可以是正值或者负值。两个负值将导致颜色朝向光谱的绿色/蓝色端，而两个正值可以产生更橙色/红色的色调。...; } lab()也可以添加alpha值来表示透明度，也使用斜杠来分隔： div { background-color: lab(80% -80 -100 / .5); } 注意：这种颜色格式目前只在...可以使用device-cmyk()来指定CMYK颜色，使用空格来分隔参数，也可以添加alpha值来设置透明度。...color-mix() 允许我们指定颜色空间，默认使用 LCH，具有出色的混合效果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
