一、叨点什么

写文章的时候经常用到一些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. ReentrantLock总体概括

    一.锁的实现原理: JAVA concurrent包下面的锁是通过AbstractQueuedSynchronizer内的Node类下面的state属性来实现的,并且锁的可重入属性也是通过state实 ...

  2. iOS保存图片到相册崩溃

    项目迭代开发的过程中,有用户反映保存图片到相册崩溃,最终自己测试出,在iOS11以下的手机正常保存,而iOS11之后的手机则会出现反映的问题.打印错误信息如下: This app has crashe ...

  3. Linux CentOS7系统探索

    这两天,突发奇想,想着用着微软家的windows系统很多年了,也想尝试一下其他的操作系统.很快的就想到了Linux操作系统,它不是面向用户的,而是面向服务器的,在服务器端的市场中占了很大的市场份额,备 ...

  4. jQuery 阻止冒泡和默认事件

    jQuery event.preventDefault() 方法 event.preventDefault() 方法阻止元素发生默认的行为. 例如: 当点击提交按钮时阻止对表单的提交 阻止以下 URL ...

  5. 使用Maven命令行快速创建项目骨架(archetype)

      > mvn archetype:generate 接下来就会输出一些列带索引变化的archetype项可供我们选择,然后提示我们选择一个编号,可以直接回车选择默认的编号(392),然后就跟着 ...

  6. 剑指offer五十之数组中重复的数字

    一.题目 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...

  7. Java之集合(四)Vector和Stack

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7296023.html 1.前言 本章介绍Java集合List中的Vector和其子类Stack.Vector类是 ...

  8. Error: java.lang.NullPointerException at outputformat.MysqlOutputFormat.getRecordWriter(MysqlOutputFormat.java:27)

    Error: java.lang.NullPointerException at outputformat.MysqlOutputFormat.getRecordWriter(MysqlOutputF ...

  9. Struts全局跳转

    1.在struts配置文件中配置一个全局跳转 2.然后关联一个jsp文件 4.关联好以后会出现如图所示页面 在代码中会有如图所示的代码增加 5.然后再action中设置跳转

  10. ls命令显示的total你知道代表着什么吗?

    今天我无意间在用ls命令的时候发现显示的内容里的total,这个total代表着什么,引起了我的疑惑. 接下来开始解开它的神秘面纱. total后面的数字是指当前目录下所有文件所占用的空间总和,它是怎 ...