重学前端学习笔记(十)--CSS语法关于带@的规则

栏目: CSS · 发布时间: 5年前

内容简介:重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,CSS 的顶层样式表由两种规则组成的规则列表构成,一种被称为由一个

笔记说明

重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏, 每天10分钟,重构你的前端知识体系 ,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专栏学习【原文有winter的语音】,如有侵权请联系我,邮箱:kaimo313@foxmail.com。

一、CSS相关标准文档

1.0、 W3C的网站关于CSS相关的标准链接

1.1、 CSS语法的最新标准链接

1.2、CSS规则

CSS 的顶层样式表由两种规则组成的规则列表构成,一种被称为 at-rule ,也就是 at 规则 ,另一种是 qualified rule ,也就是 普通规则

1.2.0、at-rule

由一个 @ 关键字和后续的一个区块组成,如果没有区块,则以分号结束。

1.2.1、qualified rule

指普通的 CSS 规则,由选择器和属性指定构成的规则。

二、at 规则

2.0、CSS 标准里的 at-rule

上面由winter整理(winter原话:不用谢,我已经帮你找好了,如果页面定位不准,你可以打开页面搜索关键字)大笑。

2.1、@charset

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

@charset "utf-8";

2.2、@import

@import "index.css";
@import url("index.css");

import 还支持 supportsmedia query 形式。(这一点不怎么理解)

@import [ <url> | <string> ]
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;

2.3、@media

mediamedia query 使用的规则,能够对设备的类型进行一些判断

@media print {
    body { font-size: 10px }
}

2.4、@page

page 用于分页媒体访问网页时的表现设置(这个我还没有用过 _(:3」∠)_

@page {
  margin: 10%;

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

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

2.5、@ counter-style

counter-style 产生一种数据,用于定义列表项的表现。

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

2.6、@ key-frames

keyframes 产生一种数据,用于定义动画关键帧。

@keyframes diagonal-slide {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: 100px;
    top: 100px;
  }
}

2.7、@ fontface

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

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.woff);
}

2.8、@ support

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

2.9、@ namespace

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

2.10、@ viewport

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

2.11、其他不太推荐的at规则

@color-profile、@document、@font-feature-values

上面部分很多规则,winter已经很精炼的解释了,下面看看普通规则

三、普通规则

3.0、选择器

1、任何选择器,都是由几个符号结构连接的:空格、大于号、加号、波浪线、双竖线,这里需要注意一下,空格,即为后代选择器的优先级较低。

2、如果选择器不是伪元素,由几个可选的部分组成,标签类型选择器,id、class、属性和伪类,它们中只要出现一个,就构成了选择器。

3、如果选择器是伪元素,则在这个结构之后追加伪元素。只有伪类可以出现在伪元素之后。

winter整理了一个列表(不太严谨地)选择器的语法结构:

重学前端学习笔记(十)--CSS语法关于带@的规则

可以参考语法分析示例图:

重学前端学习笔记(十)--CSS语法关于带@的规则

3.1、声明列表

声明部分是一个由 属性: 值 组成的序列。

3.1.0、属性

是由中划线、下划线、字母等组成的标识符,CSS 还支持使用反斜杠转义。

注意:属性不允许使用连续的两个中划线开头,否则会被认为是 CSS 变量。

以双中划线开头的属性被当作变量,与之配合的则是 var 函数:(具体可以参考 CSS Variables 标准

:root {
  --main-color: #06c;
  --accent-color: #006;
}
/* The rest of the CSS file */
#foo h1 {
  color: var(--main-color);
}

3.1.1、值

1、CSS 属性值类型( 在标准 CSS Values and Unit

  • CSS 范围的关键字: initial,unset,inherit ,任何属性都可以的关键字
  • 字符串:比如 content 属性
  • URL :使用 url() 函数的 URL
  • 整数 / 实数:比如 flex 属性
  • 维度:单位的整数 / 实数,比如 width 属性
  • 百分比:大部分维度都支持
  • 颜色:比如 background-color 属性
  • 图片:比如 background-image 属性
  • 2D 位置:比如 background-position 属性
  • 函数:来自函数的值,比如 transform 属性

2、CSS 计算型函数

calc()
max()
min()
clamp()
toggle()
attr()

比如 calc() 的例子:

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

比如 toggle() 的例子:列表项的样式圆点和方点间隔出现

ul {
  list-style-type: toggle(circle, square);
}

个人总结

这个部分给我的感觉是耳目一新的,有一些确实在开发业务过程没有用过,有一些也没有接触过,继续查漏补缺,好好学习!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Probability and Computing

Probability and Computing

Michael Mitzenmacher、Eli Upfal / Cambridge University Press / 2005-01-31 / USD 66.00

Assuming only an elementary background in discrete mathematics, this textbook is an excellent introduction to the probabilistic techniques and paradigms used in the development of probabilistic algori......一起来看看 《Probability and Computing》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具