（ X轴右边走是正值，左边走是负值， Y轴同理） ---- 轮廓线 outline: 给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框 input...{outline: none; } 防止拖拽文本域 resize: 实际开发中，我们文本域右下角是不可以拖拽的 textarea{ resize: none;} 多行文本溢出显示省略号: overflow...-- 我们验证的时候必须添加form表单域 --> 邮箱: ...autocomplete=”on”，关闭autocomplete=”off需要放在表单内，同时加上name属性，同时成功提交 multiple multiple 可以多选文件提交 属性选择器: 注意：...类选择器、属性选择器、伪类选择器，权重为 10 属性选择器，按照字面意思，都是根据标签中的属性来选择元素 /* 只选择 type =text 文本框的input 选取出来 */ input[type
还不能用 :is() :is() 伪类将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。...因为尚未有浏览器支持CSS的局部作用域。 例子如下： :scope { background-color: lime; } 兼容性如下： ?...:read-write伪类选择器表示当前元素是用户可修改的。这个伪类选择器可以使用在一个可输入的元素或 contenteditable 元素（HTML5 属性）。...:default :default 伪类选择器 表示一组相关元素中的默认表单元素。...:indeterminate :indeterminate 伪类选择器表示状态不确定的表单元素。
url URL 地址的输入域 week 选择周和年 html5 也新增以下表单元素 表单元素 描述 datalist 元素规定输入域的选项列表，使用 input 元素的 list 属性与 datalist...： 根本区别在于它们是否创造了新的元素（抽象） 伪类：用于向某些选择器添加特殊的效果（没有创建新元素） :last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子...::before {} /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。...*/ ::after {} /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。...transform: scale(2,4); skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。
onsubmit:在提交表单时触发 keyboard键盘事件 onkeydown:在用户按下按键时触发 onkeypress:在用户按下按键后，按着按键时触发，该属性不会对所有按键生效 不生效的有：alt...cols:多行输入域的列数 rows:多行输入域的行数 其他语义化标签 div盒子 俗称盒子,division分割 在网页制作过程中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个...css代码通常存放在style标签内 css样式由选择符和声明组成，而声明由属性和值组成 选择符{属性：值} 选择符，叫选择器 css放置 直接书写在标签的style属性中，不建议使用 内联样式表...标签选择器 通配符选择器 属性选择器 后代选择器 一级子元素选择器 id选择器 class选择器 伪类选择器 选择某个父元素的直接子元素 后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素...input文本框入框自带边框，我们可以通过outline修改边框 outline: 1px solid #ccc; outline: none 清除边框 样式重置： 一开始没有css样式，为了界面美观
这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情 >> # CSS知识框架 CSS知识框架 CSS高级技巧 鼠标样式：cursor 定义:cursor : default 小白...outline : outline-color ||outline-style || outline-width 防止拖拽文本域：resize 定义:resize：none vertical-align...垂直对齐 只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片/表单与文字的对齐。...E::selection 可改变选中文本的样式； 伪元素选择器 标签选择器 元素选择器 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 类选择器 .类名{属性1:属性值...伪类选择器
概述 CSS选择器可分为4类：选择器（如body{}）、选择符（如相邻兄弟关系选择符+）、伪类（如:hover）和伪元素（如::before）。...CSS只有一个全局作用域，但是Shadow DOM中的样式不会影响外面的样式。...CSS选择器的优先级 等级 选择器 例子 0级 通配选择器、选择符和逻辑组合伪类 通配选择器*、选择符（+、~、空格、>）、伪类如:not等 1级 标签选择器 body {} 2级 类选择器、属性选择器和伪类...逻辑组合伪类 否定伪类:not()：如果当前元素与括号里面的选择器不匹配，则:not()后会匹配。...其他伪类选择器 :scope作用域选择伪类，由于CSS只有一个全局作用域，所以:scope与:root一样，都相当于html。不过JS倒是支持的，详见上面精通CSS选择符最后部分。
你也许会说这个不简单吗，使用JQ就能轻松实现，但是我想说的，为了网站的性能，能用CSS实现的尽量不要用JS，因为现在CSS已足够强大。...这个特性是我们实现这个案例的技巧之一，再结合 CSS checkbox 的伪类选择器进行留言面板的显示与隐藏，这样我们就可以摆脱 JS 来实现这个案例。...的式，这里我们用到了CSS自定义变量，方便我们全局修改，还有一些 reset 规则，和表单的基础规则样式，示例代码如下： :root { --white: white; --gradient:...1、由于 checkbox 这个元素在案例中无需显示，我们只是用其的伪类特性结合 label 控制留言面板的显示与隐藏，因此我们需要将其移出可视区域，记住这里不能用隐藏属性（display:none）...四、使用CSS选择器，实现表单面板的切换和隐藏 我们通过点击 checkbox 对应的 label 标签进行切换和显示留言面板，这里我们用到了 :checked 伪类，以及 ~（后续同胞选择器）和 +（
你也许会说这个不简单吗，使用 JQ 就能轻松实现，但是我想说的是，为了网站的性能，能用 CSS 实现的尽量不要用 JS ，因为现在CSS已足够强大。...这个特性是我们实现这个案例的技巧之一，再结合 CSS checkbox 的伪类选择器进行留言面板的显示与隐藏，这样我们就可以摆脱 JS 来实现这个案例。...，不用担心，后面我们来进行美化： 二、定义基础的样式 现在我们开始添加一些基础的 CSS 的样式，这里我们用到了 CSS 自定义变量，方便我们全局修改，还有一些 reset 规则，和表单的基础规则样式...1、由于 checkbox 这个元素在案例中无需显示，我们只是用其的伪类特性结合 label 控制留言面板的显示与隐藏，因此我们需要将其移出可视区域，记住这里不能用隐藏属性（display:none）...四、使用CSS选择器，实现表单面板的切换和隐藏 我们通过点击 checkbox 对应的 label 标签进行切换和显示留言面板，这里我们用到了 :checked 伪类，以及 ~（后续同胞选择器）和 +（
CSS基础选择器 「1. 标签选择器」 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。 作用：可以把某一类标签全部选择出来。...类选择器」 类选择器使用”.”(英文点号)进行标识，后面紧跟类名。...防止表单域拖拽 2.1 鼠标样式 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。...最直接的写法是 ： outline: 0; 或者 outline: none; 2.3 防止拖拽文本域resize 2.4 用户界面样式总结 属性 用途 用途 鼠标样式 更改鼠标样式cursor 样式很多，重点记住 pointer 轮廓线 表单默认outline outline 轮廓线，我们一般直接去掉，border
CSS用户界面样式 所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。 更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究) 表单轮廓等。...防止表单域拖拽 2.1 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。...最直接的写法是 ： outline: 0; 或者 outline: none; outline: 0;"/> 2.3 防止拖拽文本域resize...cursor 样式很多，重点记住 pointer 轮廓线 表单默认outline outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用 防止拖拽 主要针对文本域resize 防止用户随意拖拽文本域...为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。
CSS高级技巧 目标 理解 能说出元素显示隐藏最常见的写法 能说出精灵图产生的目的 能说出去除图片底侧空白缝隙的方法 应用 能写出最常见的鼠标样式 能使用精灵图技术 能用滑动门做导航栏案例...CSS用户界面样式 所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。 更改用户的鼠标样式 (滚动条因为兼容性非常差，我们不研究) 表单轮廓等。...防止表单域拖拽 2.1 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。...li 最直接的写法是 ： outline: 0; 或者 outline: none; outline: 0;"/> 2.3 防止拖拽文本域resize...样式很多，重点记住 pointer 轮廓线 表单默认outline outline 轮廓线，我们一般直接去掉，border是边框，我们会经常用 防止拖拽 主要针对文本域resize 防止用户随意拖拽文本域
作者：陈大鱼头 github：KRISACHAN 去年的时候写过一篇文章 纯CSS实现表单验证 ，在发表之后不久就有网友跟鱼头说，打算拿我这篇文章作团队内部分享。...选择器： :invalid 与 :valid 判断有效性的伪类选择器（:valid和:invalid）匹配有效或无效，或元素。...:valid伪类选择器表示值通过验证的，这告诉用户他们的输入是有效的。 :invalid伪类选择器表示值不通过通过验证的，这告诉用户他们的输入是无效的。...实现逻辑 有了上面的几个 属性以及 css 选择器的伪类说明，那么这个纯CSS实现表单验证的功能就变得简单多了。...参考资料 whatwg 4.10.5 The input element 纯CSS实现表单验证 『真香警告』这33个超级好用的CSS选择器，你可能见都没见过。 CSS 选择器
专有名词解释 (标签的规范是小写，大写避免被浏览器解析) :是唯一标识 （类）：样式的标识，一般配合css使用，不唯一,支持复用 .......的标题，H1最大，H6最小 :段落 :行内元素，在行内定义一个区域；和div的区别在于，会自动换行，使用会保持同行 :无序列表 表单相关的标签...不推荐通过style直接修改html的样式，样式的操作都统一在CSS中定义。...id选择器：html中以id属性设置的选择器，Css中用"#"定义 class类选择器:html中以class属性设置的选择器，css中用"."...轮廓 Outline轮廓 绘制于元素周围的一条线，在边框border的外围，起突出元素的作用。
该部分主要为CSS3新增的选择器 接上一篇 CSS（CSS3）选择器（1） 一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。...30：E:empty，匹配一个不包含任何子元素的元素，包括文本节点。...匹配表单中激活的元素。...input::placeholder{ color:red; } 至此，CSS（CSS3）选择器的简单说明笔记就到这里结束了，其实这些内容包含了CSS（CSS3）世界的绝大多数常用选择器，当然，...参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。
标签 描述 定义供用户输入的表单 定义输入域 定义文本域 (一个多行的输入控件) 定义了 元素的标签，一般为输入标题...选择器 选择器 示例 类型(xx选择器) 示例说明 CSS .class .intro 类 选择所有class="intro"的元素 1 #id #firstname id 选择所有id="firstname...:not(p) 伪类 选择每个并非p元素的元素 3 盒子模型 媒体元素 自适应和响应式 属性 背景属性 属性 描述 CSS background 复合属性。...3 边框(Border) 和 轮廓(Outline) 属性 属性 描述 CSS border 复合属性。设置对象边框的特性。 1 border-bottom 复合属性。设置对象底部边框的特性。...1 outline 复合属性。设置或检索对象外的线条轮廓。 2 outline-color 设置或检索对象外的线条轮廓的颜色。 2 outline-style 设置或检索对象外的线条轮廓的样式。
概述 模块与模块化结构，为了避免产生浏览器对于某个模块支持不完全的情况 十三、选择器 1.class属性缺点：本身没有语义；容易混乱； 2.CSS3提倡使用选择器来将样式与元素直接绑定，减少样式表的代码书写量...、*通配符 4.伪元素选择器，并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，格式：选择器 类名:伪元素 {属性:值} 5.伪元素选择器： :first-line：用于为某个元素中的第一行文字使用样式...nth-of-type(n)，nth-last-of-type(n)，在计算子元素时只针对同类型的子元素计算 :only-child，:only-of-type，让样式只对唯一子元素起作用的实现方法 6.UI元素伪类选择器...中的变形处理 1.transform:xxx(); scale(0.5)，缩放 skew(水平角度,垂直角度)，倾斜 translate(水平方向，垂直方向)，移动 rotate(角度)，旋转 2.transform-origin...中的outline属性，在元素周围绘制一条轮廓线，outline:color style width 2.css3中outline-offset属性，紧贴着边框外围绘制一条轮廓线 3.resize属性，
一、表单 ---- input 应用场景：登录 注册 搜索 --- 用户输入 input 他们的共同点是用户输入之后才可以进行 表单的作用：供用户输入 表单域 form action：提交地址...textarea标签 焦点框：获得焦点 失去焦点 outline为none可以取消焦点框 下拉菜单：select嵌套option 默认选中selected 小拓展知识： ---- 表单提交中get...-- 将来发送数据 收集好之后再发送 -- 收集功能的是form标签 form:表单 表单域 --> <!...---- 选择器就是找标签的方法，找到之后让它去执行css。...> logo span pppp divdiv 3、伪类选择器
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
