Web前端学习笔记（二）——CSS中的选择符

说明：最近整理硬盘，发现好几篇自己以前学习web前端技术时所记录的笔记，觉得还是颇有价值的，因此打算陆续整理出来。

好吧，在讲之前先给大家分享一件往事，以提醒我自己和大家对知识点的把握一定要精准。那是有一年我去找实习，在参加一个公司的笔试时内有一道题目是让说出css有哪些选择器。只要学css就没有人不知道#id_1 {}，.class_1{}这些东东的，可偏偏我悲催就悲催在我压根不知道这些东西还有个名字叫选择器（选择符）！所以最后的结果自不必说。大家尽情鄙视我吧。不过也给大家提个醒，有些名词术语我们该记住的还是一定要费点心记住，千万不要犯我这么愚蠢的错误。好了，书归正传，下面是笔记的内容。

1 css基本语法

css格式：选择符 {规则；规则；}

css规则的组成：属性：值

2 css使用时的一些注意事项

（1） 应当用UTF-8来给css文件编码。

（2） css代码应当小写。【注：实际上，选择符区分大小写，属性和值不区分大小写。但在html中css的选择符也不区分大小写，XHTML中才区分。】

（3） 元素名、类和id只能由字母、数字和下划线、连字符和其他unicode字符构成。第一个字符不能是数字或连字符。类名和id中不能包含除下划线和连字符之外的标点符号。

（4） 可以通过把多个类名用空格隔开，为元素赋予多重类，如class="class1 class2 class3"。

（5） 常量值不用引号。

（6） 反斜杠（\）可以在某些不能直接显示字符的地方把它们镶嵌进去。

（7） 字符串里可以包括小括号、逗号、空格、单引号、双引号，不过要用反斜杠转义。

（8） 分号用于终止css规则和@import语句。

（9） 规则集指在大括号中包含了多条规则。

（10） CSS注释以“/*”开始，以“*/”结束，并且不能嵌套。

3 css选择符的优先级（按优先级最低到最高）
通配选择符

元素选择符

类、属性和伪类选择符

ID选择符

！important通配选择符

！important元素选择符

！important类、属性和伪类选择符

！importantID选择符

4 css的边框属性
（1）边框风格属性(border-style)

这个属性用来设定上下左右边框的风格，它的值如下：

none (没有边框，无论边框宽度设为多大)

dotted (点线式边框)

dashed (破折线式边框)

solid (直线式边框)

double (双线式边框)

groove (槽线式边框)

ridge(脊线式边框)

inset (内嵌效果的边框)

outset (突起效果的边框)

（2）边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度，它的值如下：

medium (是缺省值)

thin (比medium细)

thick (比medium粗)

用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。

（3）边框颜色属性(border-color)
这个属性用来设定上下左右边框的颜色。

（4）边框属性(border)
这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下：

.d1 {border:5px solid gray;}

（5）单边边框属性
上下左右四个边框不但可以统一设定，也可以分开设定。

设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。

设定下边框属性，你可以使用border-bottom, border-bottom-width, border-bottom-style,border-bottom-color。

设定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。

设定上边框属性，你可以使用border-right, border-right-width, border-right-style,border-right-color。