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。