一、叨点什么

写文章的时候经常用到一些CSS方面的专业词汇。但是毕竟芳华年少不在,脑袋有点秀逗了,很多名词都记不住,这种感觉比厕所便秘还难受。比如今天居然记不起来公司公认脸蛋最pp的同事的名字,没想到我会记不住美女的名字。我觉得我背后一阵萧瑟的秋风吹起,自己俨然成了漫画里面的程序猿——

某天闲逛到nimbupani,发现有专门展示CSS术语的文章,哇咔咔,感觉好像咬到一口正宗的高邮咸鸭蛋一样,不过人家的是英文,所以我还要本地化润饰处理,然后,就可以留给自己备忘的哈,的说。

二、CSS词汇我来也

1. 属性(Property)
应用在选择器上的样式,比如说:borderbackground之流。

2. 值(Value)
就是属性拥有的值嘞。比如说:1px之类,的说~~

3. 关键字(Keyword)
就是CSS里面很重要,很关键的单词,不可能用引号包裹的那个东东。比如说:soliddotteddashed之流,的说~~

4. 长度单位(Length Units)
就是值的单位,数字后面跟的些玩意。比若说,px%em等其他。

5. 功能符(Functional Notation)
值以函数的形式指定(就是被括号括起来的那种),主要用来表示颜色(rgba, hsla)、背景图片地址(url)、属性值、过渡动画等,好比说:rgba(0, 0, 0, 0.5)url('im.png')attr('href')scale(20)。关于功能符,更多参见这里

6. 声明(Declaration)
属性名+值就是声明的说,比如说:

background: red;

7. 声明块(Declaration Block)
{}花括号包裹的一系列声明,如下所示:

{
display: table-cell;
color: sky;
}

8. 规则或规则集(Rule or Rule Set)
出现了选择器,而且后面还尾随着声明块,的说,比如:

.halibote7{
display: table-cell;
color: sky;
}

9. 选择器(Selector)
用来瞄准目标元素的东西,例如上面的.halibote7就是一个选择器的哈。更多选择器,可以参阅这里,或是看下面:
♀ 类选择器(Class):一般而言,以”.”这个谦卑的点号开头的选择器。很多很多的元素可以用同一个类选择器的。类嘛,生下来就是被公用的命。
♀ ID选择器(ID):”#”打头的,长得比较嚣张。boss感觉,所谓一山不容二虎,ID一般指向唯一元素,但是,CSS中,ID样式多用貌似也过得去,但是显然不推荐这么做的。
♀ 属性选择器(Attribute Selector):就是长得类似下面div[title]{},或是类似下面div[title="演示"]{},或是类似下面div[title~="演示"]{},或者是类似下面div[title^="演示"]{},或者是类似下面,div[title$="演示"]{}或者是……
♀ 伪类选择器(Pseudo-Classes):一般前面有个英文冒号”:”的选择器,例如说::first-child 或是 :last-child等等等等。
♀ 伪元素选择器(Pseudo-Elements):怎么说呢,就是会有连续两个冒号的选择器的说,好像:::first-line::first-letter::before::after。我之前有篇文章:“使用CSS3改变文本选中的默认颜色”,就是使用伪元素选择器实现。

10. 关系选择器(Combinators)
根据与其他元素的暧昧关系选择元素的选择器,常见的符号有空格( ),尖尖号(>),加号(+),还有弯弯号(~)等,于是就有了:
♂ 后代选择器(Descendant Combinator):类似#yayunhui h1{},直接把合乎条件的子子孙孙都选择了,的说~~
♂ 子选择器(Child Combinator):直接选择儿子,而忽略孙子以及从孙等,尖尖号就是干这个活的。
♂ 临近兄弟选择器(Adjacent Sibling Combinator):与其他元素直接相邻的元素的什么什么的说~~
♂ 一般兄弟选择器(General Sibling Combinator):也是相邻的,但是不那么直接。

11. @规则(At-Rules)
以@字符开始的一些规则,像是@import@page@media, 和 @font-face诸如此类。

12. 媒体特征(Media Features)
使用media queries属性,你可以根据不同的媒介有针对性的显示样式。当然,最常见的媒体特征应该是min-widthmin-height之类的了。

13. 商家指定扩展(Vendor-specific Extension)
就是一些私有属性啦。比如常见的CSS3的一些私有前缀啦,-moz-,或是-webkit-或是-o-或是-ms-之类的说,还有很多其他,IE浏览器下的私有属性貌似更多的说,就不展开了。

三、尾声

诶呀呀,最后几个词义好难表述啊,可能有些不准确。就这些了,用做备忘足够了,恩!
参考文章:CSS Vocabulary

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=1240

(本篇完)

备忘:CSS术语词汇表——张鑫旭的更多相关文章

  1. [转] HTML5终极备忘大全(图片版+文字版)---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1544 一.前言兼图片 ...

  2. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  3. [转] 小tip: 使用CSS将图片转换成黑白(灰色、置灰) ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: ...

  4. 算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...

  5. 完善:HTML5表单新特征简介与举例——张鑫旭

    一.前言一撇 其实关于HTML5的表单特征早在去年“你必须知道的28个HTML5特征.窍门和技术”一文中就有所介绍(在第十一项),不过,有些遗憾的是,此部分的介绍是以视频形式展示的,其实,是视频还好啦 ...

  6. [css]【转载张鑫旭】我是如何对网站CSS进行架构的

    一.写在前面的 都是自己积累形成的一些东西,可能带有明显的个人印记.不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解.以得到进步与提高. 二.我所知的一些过 ...

  7. 分享张鑫旭大神的,纯css打字小技巧,我顺便收藏一下

    CSS代码: .typing { width: 15em; white-space: nowrap; border-right: 2px solid transparent; animation: t ...

  8. css笔记 - 张鑫旭css课程笔记之 float 篇

    https://www.imooc.com/t/197450float float的设计初衷/原本作用-是为了实现文字环绕效果如,一个图片和一段文字垂直放置,给图片加上浮动,文字就环绕图片展示了. 浮 ...

  9. 可缺省的CSS布局——张鑫旭

    一.技术不难.意识很难 有些东西的东西的实现,难的不是原料.技术:而是想不到,或者说意识不到. 例如下面这个简单而又神奇的魔术: 是吧.搞通了,才发现,哦~原来这么回事,很简单的嘛,我也可以实现的!其 ...

随机推荐

  1. Smarty的原理_面试

    Smarty是一个模板引擎,使用smarty主要是为了实现逻辑和外在内容的分离,如果不使用模板的话,通常的做法就是php代码和html代码混编.使用了模板后,则可以将业务逻辑放到php文件中,而负责显 ...

  2. poj2488 A Knight's Journey

    http://poj.org/problem?id=2488 题目大意:骑士厌倦了一遍又一遍地看到同样的黑白方块,于是决定去旅行. 世界各地.当一个骑士移动时,他走的是“日”字.骑士的世界是他赖以生存 ...

  3. Python-WSGI协议,mini-web框架

    本次带给大家的是WSGI-mini-web框架, 其中要下载一些网络页面, 大佬们不要见怪. 我所做的mini-web 支持路由, 正则表达式, 添加了log日志功能:解析了url编码可以用 来理解W ...

  4. CAN总线协议 学习笔记

    1.CAN总线网络 CAN总线网络主要挂在CAN_H和CAN_L,各个节点通过这两条线实现信号的串行差分传输,为了避免信号的反射和干扰,还需要在CAN_H和CAN_L之间接上120欧姆的终端电阻,但是 ...

  5. day 68crm(5) 分页器的进一步优化,以及在stark上使用分页器,,以及,整理代码,以及stark组件search查询

    前情提要: 本节内容 自定制分页器 保存及查询记录 代码整理, stark组件search 查询    一:自定制分页器 page 1:创建类 Pagination  # 自定制分页器 _ _init ...

  6. Android UiAutomator UiDevice API

    UiDevice为单例模式 1.获取设备 static UiDevice getInstance() This method is deprecated. Should use getInstance ...

  7. Linux CentOS7系统中php安装配置

    本篇讲解如何配置php开发环境,让你的php代码可以正常的在网页中运行. 准备工作 linux centos7操作系统 ssh软件 nginx php资源 想要了解更多关于php的内容,请访问: ph ...

  8. 自己搞了20万张图片100个分类,tensorflow训练23万次后。。。。。。

    自己搞了20万张图片100个分类,tensorflow训练23万次后...... 我自己把训练用的一张图片,弄乱之后做了一个预测 100个汉字,20多万张图片,tensorflow CNN训练23万次 ...

  9. Android IntentFilter匹配规则

    一:显式调用  需要明确指定被启动对象的组件信息,一般是在相同的应用程序内部实现的 Intent intent = new Intent(); intent.setClass(SecondActivi ...

  10. springboot自定义错误页面

    springboot自定义错误页面 1.加入配置: @Bean public EmbeddedServletContainerCustomizer containerCustomizer() { re ...