:focus，将样式添加到被选中的元素中 :hover，当光标悬浮在页面对象上方时，向页面对象添加样式 :link，将样式添加到未被访问过的链接中 :visited，将样式添加到被访问过的链接中 :first-child...，将特殊的样式添加到页面对象的第一个子元素中 :lang，允许设计者定义指定的页面中所使用的语言 文字字号 font-size属性的作用改变字体的大小。...1.像素单位px，使用像素直接定义字体的大小，是绝对单位，如12px。 2.字体大小em，一个字体的大小就是1em，在任何浏览器中，默认的字体大小都是1em。...，设置字体风格 font-weight，设置字体粗细 direction，设置文本方向 letter-spacing，设置字符间距 text-align，对齐页面中的文本 text-decoration...，匹配父元素仅有的一个子元素E E:first-of-type，匹配同类型中的第一个同级兄弟元素E E:last-of-type，匹配同类型中的最后一个同级兄弟元素E E:only-of-type，匹配同类型中的唯一的一个同级兄弟元素
9、CSS 继承 CSS 样式继承性是指下级的样式属性会继承上级的属性，比如 li 会继承 ul 的属性。 10、如何居中 div？如何居中一个浮动元素？如何让绝对定位的 div 居中？...23、有一个高度自适应的 div，里面有两个 div，一个高度 100px，如何让另一个填满剩下的高度？...浏览器的默认行为是把 inline 元素间的空白字符（空格、换行、Tab）渲染成一个空格，这个问题不止出现在 li 元素上； 解决方案： 1、所以把所有 li 放到同一行； 2、将这些被渲染成空格的字符...当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-to、padding-bottom、margin-top、margin-bottom...等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
本文将一步一步介绍如何实现下面这样的一个任务管理工具 完整代码已上传至码上掘金：jcode 作者正在参加码上掘金编程赛，辛苦各位读者大大给我的码上掘金作品点个赞吧 基本结构 首先我们建立 HTML 的基本结构...包含了一个容器，其中包含一个输入框和一个按钮用于添加任务，并且还有一个空的任务列表，用于在添加任务时显示任务。...输入框的样式包括宽度、高度、字体、边框、内边距、字体颜色和字体粗细。当输入框被聚焦时，边框颜色会改变。提交按钮的样式包括宽度、高度、字体、字体颜色、背景颜色、边框、圆角和光标样式。...querySelector 方法会返回匹配给定选择器的第一个元素，这里匹配 ID 为 “push” 的按钮。点击按钮时，执行函数中的代码块。...，当点击删除按钮时，它将删除任务列表中的相应任务。
与 A 同级，则选中 B img + p # 选择器组 当多个选择器使用相同样式时，可以用 , 将多个选择器隔开 例如： h1, h2, h3, h4 { color: red; } a...: 800; 当字体不支持某种字重时，系统会选择最接近的另一种字重代替显示。...计算时不允许进位，比如 100 个十位还是小于 1 个百位 当优先级相同时，位置靠后的规则生效 # 属性继承 某些属性会自动继承其父元素的计算值 (Computed Value)，除非显示指定一个值。...当要设置的属性值能自动继承并且父元素有相应的定义值时，该元素会继承父元素的值，即行为与`inherit`相同 2....none：布局时完全被忽略 需要注意的是：元素本身的盒子属性和元素内部的盒子属性是两回事 例如：一个设置为 display: inline-block 的行级盒子，现在表现为 inline-block
大家好，又见面了，我是你们的朋友全栈君。 三大特性 继承性：子标签继承父标签样式，默认优先级最低。...有继承性：文本相关字体样式、粗细、大小、颜色、类型等 无继承性：盒子模型相关边框、背景等 层叠性：相同标签继承和定义的样式累加到一起互不冲突。...*=”value”] p=[class$=”value”] 元素[class~=”value”]匹配class=”c1 c2 c3 c4”众多值中某一个 目标伪类：img:target{}匹配id或name...结构伪类:（父元素下的子元素中，必须先选中父元素） :first-child :last-child :nth-child(n) :nth-child(even|2n)选择偶数子元素 :nth-child...(odd|2n-1)//奇数 :empty 空格换行不算空,匹配同级元素中一个子元素都没有的元素 :only-child匹配同级元素中只有一个子元素的元素 否定伪类：:not() 权重0100： ID选择器
E:last-child 父元素的最后一个子元素 E F:nth-child(n) 父元素的第nth的子元素(括号里面的n可以是1，2，3 even,odd) E:first-of-tyope 父元素指定类型的第一个子元素...设置字体粗细 font 设置字体的所有属性（字体风格→字体粗细→字体大小→字体类型） 字体的粗细 值 说明 normal 默认值，定义标准的字体 bold 粗体字体 bolder 更粗体字体 lighter...样式 颜色； 4.2.5 border-collapse border-collapse 属性是用来设置 table 表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。...：速度先加速再减速（渐显渐隐效果）； 7.2.4 过渡延迟时间（ transition-delay ） 指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果 ； 正值：元素过渡效果不会立即触发...：active 控制按钮被点击时的显示效果 ：focus 获得聚焦对象的元素 ：checked 选中 2.媒体查询：通过@media属性判断设备的尺寸，方向等 JavaScript触发： 3.
当设计一个极简话的界面，我总是从前pc时代寻找灵感，那个时候设计师和艺术家做了很多关于极简话的事。...当你在项目中尝试建立被视觉元素所限制的规则以及可用性直觉时，网格很有用。 网格不仅仅是建立视觉的规则。用它来定义内容以及功能性分组。我们并不是总要一条线或盒子来把东西一些组织在一起。...查找各种各样的字体和样式。你没有必要都使用它们，但一个广阔的选择可以帮助你定义你的层级更锐利，并且你可能会找到在确定的环境用确定的字体粗细。 不要害怕用两种极端不同的字号和粗细去创造视觉秩序。...尝试对头条用超大，超细的字体，对主体内容用小号的普通粗细的字体。 小心字体的易辨认性。这听起来很蠢，你的字体需要满足这样的条件，确认它们在各种缩放下都很容易辨识。...当然了，这并不是所有事情的解决方案，但当被合适的深思熟虑的考虑后使用，它能造就高可用性和愉悦的数字体验。
:值; } 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 子元素选择器之间需要用>符号连接, 并且不能有空格 后代选择器使用空格作为连接符号 | 子元素选择器使用>作为连接符号 后代选择器会选中指定标签中..., 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中 | 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签 交集选择器...选中同级别中的第一个标签 :last-child 选中同级别中的最后一个标签 :nth-child(n) 选中同级别中的第n个标签 :nth-last-child(n) 选中同级别中的倒数第n个标签...选中同级别中同类型的第一个标签 :last-of-type 选中同级别中同类型的最后一个标签 :nth-of-type(n) 选中同级别中同类型的第n个标签 :nth-last-of-type(n)...> 优先级 作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定 优先级判断的三种方式 如果是间接选中, 那么就是谁离目标标签比较近就听谁的 如果都是直接选中
示例： body { writing-mode: vertical-rl; } 效果： 当我们切换书写模式时，我们也在改变块和内联文本的方向。...example3">看看 我 怎么换行 HelloCSS Hello-CSS 效果： 阴影 可以为文本添加一个或多个（用逗号分隔）阴影效果，以增强文本的可读性或创建独特的设计效果。...使用相对值时，字体大小的大小是相对于父元素的字体大小的。相对值单位包括： em、rem、vw、vh 等。 使用关键字指定字体大小，可以提高可读性和一致性。...通常，行高可以设置为字体大小的 1.4 到 1.6 倍。 粗细 CSS 中字体粗细可以使用 font-weight 属性来设置。 normal: 默认字体粗细。 bold: 加粗字体。...bolder: 相对于父元素更粗的字体。 lighter: 相对于父元素更细的字体。 数字值：使用数字值来设置字体的粗细，数字值范围通常从 100 到 900。
子元素选择器是相对于父元素的第一级子元素符合条件。 相邻兄弟选择器，针对的元素是同级元素，拥有相同的父元素，且两个元素是相邻的。...默认值为： scroll，表示可以随着页面其余部分的滚动而滚动。设置 fixed，表示当页面其余部分滚动时，背景图片不会滚动，设置 inherit，继承父元素。...定义文本的字体是否是斜体 font-weight 定义字体的粗细 font 可以一条样式定义各种字体属性 font-family用于设置元素的字体，该元素属性值一般可以设置多个字体。...font-style用于设置字体是否是斜体，默认值为 normal，当设置为 italic，显示为一个斜体的样式，当设置为 oblique，显示为一个倾斜的样式。...font-weight用于设置字体的粗细， normal值等于400， bold的值等于700。
一、字体属性 字体 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。...p { font-size: 16px; } 字重（粗细） 可以用font-weight用来设置字体的字重（粗细）。...继承父元素字体的粗细值 颜色 可以用color来设置颜色， 颜色属性被用来设置文字的颜色。 ...fixed（固定） fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...因为它原本所占的空间仍然占据文档流。 在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
2{} 相邻兄弟选择器 选择器1+选择器1{} 通用兄弟选择器 选择器1~选择器2{} 选中同一个级别的第一个标签 标签：first-child{} 选中同级别中同类型的第一个标签 标签：first-of-type...{} 选中同级别中同类型的最后一个标签 标签：last-of-type{} 选中同级别的第几个标签 标签nth-child(3){} 选中同级别同类型的第几个标签 标签:nth-of-type(3)...行级标签：不独占一行，不可以设置宽高；常见的行内元素有span、a等不会自动换行 块级标签从上到下；行级标签从左到右 display 块级元素以区域块的方式出现，每一个块标签独自占据一整行或多行...） inline:将元素显示为行内元素（行内元素的默认属性值） inline-block:行内块标签 none:此元素将被隐藏，不显示，也不占用页面空间 字体 font-size用于设置字体大小，取值是像素...color用于设置字体的颜色 font-style设置字体样式取值为italic和normal font-weight设置文字的粗细，常用取值lighter,bold和bolder还可以进行数字取值100
:bold;} p{font-weight:900;} font-style：指定文本的字体样式 值 描述 normal 默认值 italic 定义斜体字 font-family：属性指定一个元素的字体... h1~p{ color:red; } 盒子模型 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用 CSS盒模型本质上是一个盒子，封装周围的...弹性盒模型 弹性盒子是 CSS3 的一种新的布局模式 CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列...第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放 flex-end 弹性项目向行尾紧挨着填充。...第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放 center 弹性项目居中紧挨着填充。
通过本章将学习如下文本属性，您可以改变文本的颜色、文本及其他元素宽高尺寸、文本方向、对齐文本、文本进行缩进、字符间距、文本装饰以及文本大小和字体等。...justify对齐时的齐行方法 描述: 定义的是当文本的 text-align 属性被设置为 :justify 时的齐行方法。...font-weight 属性 - 设置字体的粗细程度 描述: 此属性指定了字体的粗细程度，一些字体只提供 normal 和 bold 两种值。...bolder 比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。...> 类型值, 更大的数值代表字体重量粗于更小的数值 (或一样粗) 当设置 400 时等同于 normal，而 700 等同于 bold。
css3提供了一个新的样式：box-sizing。 默认为content-box，提供一个属性border-box，可使边框内边距绘制在盒内部，盒被定义的宽高不会被改变。...当三个边框为透明只保留一个边框的颜色时： div { width: 0px; height: 0px; border: 100px solid transparent; border-bottom-color...当使用了 时，手机端的页面px不再表示一个像素点，而是被映射为一个合适的值...四个div标签都是作为nth-child选择器选择范围的同级元素（非指兄弟元素）。参数可为值，可为表达式。 `匹配同级元素中的第一个元素。...伪元素作为元素的子级元素，通常用于插入整体固定的内容，例如自定义列表样式就是一个不错的选择。
我常常被问及到：字体设计到底该怎么去做，类似这样的问题，其实在我看来这个问题可以拆分成两个问题：一个是如何想？一个是怎么做？下面我们就具体的了解下如何去找寻字体设计中的灵感。 ?...其实这就是一个典型的模仿在创造的过程，记住我告诉你的方法，先在纸上临摹一遍，然后趁热打铁再尝试新的字组设计，是不是感觉66的？还不行，那就在多临摹几遍吧！ ? 如何想解决了，下面就是教大家怎么做了。...03.最后使用勾勒出一个城市建筑轮廓并辅以英文小标题，使其趣味性和整体性更佳。 ? ? 类似的方法笔画的粗细、字形结构的不同、组合方式的改变都可以创造出分割多样的作品。 ?...需要特别注意的是，当整个字笔画都是以均匀的线段为主时，线段之间的穿插分布切忌过密过疏，尽量保持匀称，适当增加字体内部空间，透气性佳整体才会更显轻盈雅致。 ?...在做字体设计的时候不要一味追求过多的变化，不要每个笔画都要来个“九连环”，适可而止，当表达出字体意境时就及时收手吧。 ?
一、CSS介绍 CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。...1.3 字重（粗细） font-weight 用来设置字体的字重（粗细）。...值 描述 normal 默认值，标准粗细 bold 粗体 bolder 更粗 lighter 更细 100-900 设置具体粗细，400等同于normal，而700等同于bold inherit 继承父元素字体的粗细值...6.4 fixed（固定） fixed：对象脱离正常文档流，使用top、right、bottom、left 等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。...opacity和rgba()的区别: 1. opacity改变元素\子元素的透明度效果 2. rgba()只改变背景颜色的透明度效果 六、综合示例 1、顶部导航菜单 <!
上述出现了一些概念，dpr，srcset 属性，不太了解的可以移步 前端基础知识概述 图片丢失 好了，当图片链接没问题时，已经处理好了。接下来还需要考虑，当图片链接挂了，应该如何处理。...scroll-snap-type：属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。...而其本身的默认样式又不太能被产品或者设计接受，导致了很多人会在焦点元素触发 :focus 伪类时，通过改变 border 的颜色或者其他一些方式替代或者直接禁用。...有了这个伪类，就可以做到，当用户使用鼠标操作可聚焦元素时，不展示 :focus 样式或者让其表现较弱，而当用户使用键盘操作焦点时，利用 :focus-visible，让可获焦元素获得一个较强的表现样式。...分析使用非可聚焦元素模拟的按钮 这里，我随便选取了我们业务中一个使用 span 模拟按钮的场景，是一个面包屑导航，点击可进行跳转，发现惨不忍睹： ?
watchPosition 该方法用于监听地理信息的变化，当用户设备的地理位置发生改变的时候自动被调用。...适用场景 我一般研究了一个知识点之后，都会想想实际的开发场景如果运用它。...block：该 MathML 元素会显示于文本之外，成为一个独立的块元素，不受其所在的文本的影响。 overflow 指定当该数学公式超过了其运行的范围时应该如何表现。...tabindex 这个属性可以帮助规定元素是否可以聚焦，以及当使用 "tab" 键进行导航时，规定了元素的顺序。...0 ：元素可聚焦，并且可以通过键盘导航来聚焦到该元素，它的相对顺序由当前 DOM 中的结构决定。 正值：元素可聚焦，并且可以通过键盘导航来访问到该元素。
/； 当您把开始标签和结束标签以及两者之间所有内容组合在一起时，就获得了一个 HTML 元素； 标签（尖括号内的内容都）不会被显示，仅仅用于区分内容的语义并提供一些默认的样式； 在哪里写 HTML？...这种情况下： 是 和 标签的父元素； 和 同为 元素的子元素； 和 是同级元素； 顺序 如何嵌套 HTML...伪类选择器 HTML 元素可以具有不同的状态。最常见的情况是当您将鼠标悬停在链接上时。当此类事件发生时，CSS 中可能会应用不同的样式。...继承的属性 只能从祖先那里继承少数 CSS 属性。它们主要是文本属性： 文字颜色 字体（大小/ 字体 Family/ 样式/ 粗细） 行高 “一些 HTML 元素不会从其祖先那里继承。...CSS 优先级 一个 HTML 元素可以被多个 CSS 规则作为目标。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
