Web前端学习笔记(二)——CSS中的选择符
来源:互联网 发布:开淘宝网店有赚钱的吗 编辑:程序博客网 时间:2024/06/06 00:36
说明:最近整理硬盘,发现好几篇自己以前学习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。
- Web前端学习笔记(二)——CSS中的选择符
- Web前端CSS框架—Bootstrap学习笔记
- 前端学习笔记—CSS
- 前端学习(二)——CSS
- css学习笔记——CSS 组合选择符
- 《web前端开发技术——html、css、javascript》笔记之二
- WEB前端(HTML、XML、CSS、JS)学习笔记
- WEB前端学习笔记-CSS基础教程
- Web前端学习笔记(一)——html文件中的标签的含义
- 前端入门学习笔记—CSS
- 前端学习笔记(四)——css
- web前端 基础部分(二) CSS
- CSS学习笔记:选择符
- Java笔记--Web前端知识汇总之二 CSS
- 前端学习笔记(二)——html
- 前端学习笔记(二)
- web开发-web前端面试题(html-css-js)-学习笔记十二
- Web前端开发笔记:CSS中的对象(元素)
- #define # ##
- IEC102报文详解(电力规约)
- mac系统登陆用户忘记密码
- STL中sets的基本用法
- centos5.5安装ORACLE10G完全版(已通过安装)C/C++(转载)
- Web前端学习笔记(二)——CSS中的选择符
- FusionCharts参数说明
- 用C++生成WORD文档
- 插件开发 第三方jar包
- java设计模式之享元模式
- 【每日面试题】给定一个字符串,求出其最长的重复子串
- Qt中使用Cairo
- Linux上的ftp配置,及错误500 OOPS: could not bind listening IPv4 socket解决
- c++操作word接口