内容简介:重学前端是程劭非(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
-
@charset
: https://www.w3.org/TR/css-syntax-3/ -
@import
: https://www.w3.org/TR/css-cascade-4/ -
@media
: https://www.w3.org/TR/css3-conditional/ -
@page
: https://www.w3.org/TR/css-page-3/ -
@counter-style
: https://www.w3.org/TR/css-counter-styles-3 -
@keyframes
: https://www.w3.org/TR/css-animations-1/ -
@fontface
: https://www.w3.org/TR/css-fonts-3/ -
@supports
: https://www.w3.org/TR/css3-conditional/ -
@namespace
: https://www.w3.org/TR/css-namespaces-3/
上面由winter整理(winter原话:不用谢,我已经帮你找好了,如果页面定位不准,你可以打开页面搜索关键字)大笑。
2.1、@charset
@charset
用于提示 CSS 文件使用的字符编码方式,它如果被使用,必须出现在最前面。这个规则只在给出语法解析阶段前使用,并不影响页面上的展示效果。
@charset "utf-8";
2.2、@import
@import "index.css"; @import url("index.css");
import
还支持 supports
和 media query
形式。(这一点不怎么理解)
@import [ <url> | <string> ] [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>? ;
2.3、@media
media
是 media 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
用于设置视口的一些特性,不过兼容性目前不是很好,多数时候被 html
的 meta
代替。
2.11、其他不太推荐的at规则
@color-profile、@document、@font-feature-values
上面部分很多规则,winter已经很精炼的解释了,下面看看普通规则
三、普通规则
3.0、选择器
1、任何选择器,都是由几个符号结构连接的:空格、大于号、加号、波浪线、双竖线,这里需要注意一下,空格,即为后代选择器的优先级较低。
2、如果选择器不是伪元素,由几个可选的部分组成,标签类型选择器,id、class、属性和伪类,它们中只要出现一个,就构成了选择器。
3、如果选择器是伪元素,则在这个结构之后追加伪元素。只有伪类可以出现在伪元素之后。
winter整理了一个列表(不太严谨地)选择器的语法结构:
可以参考语法分析示例图:
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); }
个人总结
这个部分给我的感觉是耳目一新的,有一些确实在开发业务过程没有用过,有一些也没有接触过,继续查漏补缺,好好学习!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 前端_JavaScript_语法篇
- 前端的flutter之路(一):语法
- 前端进阶之 JS 抽象语法树
- 胡子哥的重学前端(笔记)css语法
- Swift语法快速入门(一)之 Swift基础语法
- 在ES6中使用扩展语法有什么好处?它与rest语法有什么不同?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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》 这本书的介绍吧!