search

Leecason / blog

https://leecason.github.io
1 stars 0 forks source link

CSS 相关 #8

Open Leecason opened 5 years ago

Leecason commented 5 years ago 
:focus-within { // 它或它的后代获得焦点
}

:placeholder-shown { // 在 <input> 或 <textarea> 元素显示 placeholder text 时生效
}

filter: drop-shadow(offset-x offset-y blur-radius spread-radius color)
Leecason commented 5 years ago

at 规则

@charset

用于提示 css 文件使用的字符编码方式，如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果。

@charset "utf-8"

@import

用于引入一个 css 文件，除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容

@media

能够对设备的类型进行一些判断，在 media 区块内，是普通规则。

@media print {
  body { font-size: 10pt; }
}

@page

用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。

@page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }

  @top-right {
    content: "Page " counter(page);
  }
}

@counter-style

用于产生一种数据，用于定义列表项的表现。

@counter-style triangle {
  system: cyclic;
  symbols: ▶️;
  suffix: " ";
}

@keyframes

定义动画关键帧

@fontface

定义一种字体，icon font 技术就是利用这个特性来实现的。

@font-face {
  font-family: Gentium;
  src: url(src);
}

p {  font-family: Gentium, serif; }

@support

检查环境的特性，它与 media 比较类似。

@namespace

用于跟 XML 命名空间配合的一个规则，表示内部的 CSS 选择器全都带上特定命名空间。

@viewport

用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 html 的 meta 代替。

Leecason commented 5 years ago

css 计算型函数

calc()

支持加减乘除

max()

取两数中较大的一个

min()

取两树中较小的一个

clamp()

给一个值限定一个范围，超出范围外则使用范围的最大或最小值

toggle()

在规则选中多于一个元素时生效，它会在几个值之间来回切换。

// 列表项的样式圆点和方点间隔出现
ul { list-style-type: toggle(circle, square); }

attr()

允许 css 接受属性值的控制