16个常用css技巧收集整理(四)

2019-03-30193次阅读css3css

能用css解决的就不要用JavaScript。16个常用css技巧收集整理(一)16个常用css技巧收集整理(二)16个常用css技巧收集整理(三)都有介绍,本文继续其它收集的css技巧。

表单相关的CSS收集

CSS3的出现,让表单样式丰富起来了。以前一些需要通过JavaScript来辅助完成的交互样式,现在通过CSS就可以实现。这里只是做一下记录,不做代码演示。单冒号为CSS伪类,双冒号为CSS伪元素

:read-write

代表一个元素可以被用户编辑,例如可输入文本的 input元素。

:read-only

表示此元素不可以被用户编辑的,例如给input元素添加readonly属性。

:focus-within

如果该元素或该元素的后代元素获得焦点,则选中元素。例如:当用户在表单中某个input上获得焦点,会高亮整个表单。

<!--此form表单将被选中-->
<form>
  <!--当input文本框获得焦点时-->
  <input type="text">
</form>
form:focus-within{
  background-color:#f60;
}

::placeholder

在form表单中input或textarea元素上可以应用placeholder属性即"占位符"。通过设置伪元素::placeholder允许我们自定义占位文本大小、颜色、背景等样式。

:placeholder-shown

在input或textarea元素placeholder text(占位文本)不可见时生效。例如:当用户输入时动态的隐藏和显示input对应的label或提示。

caret-color

caret-color属性用来定义插入光标(caret)的颜色,就是那个在网页的可编辑器区域内,用来指示用户的输入插入光标。可编辑器区域包括input、textarea、设置contenteditable的普通HTML标签。

:required

在input或textarea元素拥有required(必填)属性时生效渲染其外观。

:optional

与:required相反。表示任意没有required(必填)属性的input、select、textarea元素时使用。

:invalid

表示任意内容未通过验证的input或其他form元素。

:valid

与:invalid相反,指通过验证时的样式。

:disabled

表示任何被禁用的元素。

:in-range

代表一个input元素,其当前值处于属性min 和max 限定的范围之内。

:out-of-range

与:in-range相反。表示一个input元素,其当前值处于属性 min 和 max 限定的范围外。

:checked

表示任何处于选中状态的radio, checkbox 或select元素选中时。

:focus

表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。

 

:empty

:empty伪类代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格),但不包括html注释。

<!-- 这些将是空的 -->
<div></div>
<div><!-- comment --></div>

<!-- 这些将不能满足为空 -->
<div>foo</div>
<div>  </div>
<div><span></span></div>
<div>  <!-- comment -->  </div>

:empty伪类的特性可以让我们联想到它非常适合在弹窗、消息提示框等场景下使用。可以根据上下文动态地插入和移除它们中的文本内容。使用:empty伪类,我们可以确保在没有内容的情况下,该框将被隐藏。

浏览器兼容:IE9+。

关于:empty伪类使用场景实例移步到这里

 

Flexbox布局

Flexbox是CSS3中为了现代网络中更为复杂的网页需求而设计。因此它也是现代Web布局中的主流方式之一,成为一个新的W3C标准规范。极力推荐阅读这里

浏览器兼容:

移动端大可放心使用。

 

letter-spacing

CSS中的letter-spacing属性明确了文字的间距行为。这里我们看一下letter-spacing实现的动画:

<div class="container">
  <h2 class="animated">欢迎常来xinran001.com</h2>
</div>
@keyframes animation {
  from {
    letter-spacing: 32px;
  }
  to {
    letter-spacing: 0;
  }
}

.animated {
  animation: animation 5s ease infinite;
}

h2 {
  text-transform: uppercase;
  white-space: nowrap;
}

 

上一篇: 16个常用css技巧收集整理(三)  下一篇: Ps技能-photoshop中如何实现直角描边  

16个常用css技巧收集整理(四)相关文章