CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。每条声明由一个属性和一个值组成。
CSS注释:/注释/
id 和 class 选择器
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
ID属性不要以数字开头
- class 选择器用于描述一组元素的样式
class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示。
类名的第一个字符不能使用数字
插入方式
- 外部样式表
用外部的css文件表示样式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签
- 内部样式表
使用 标签在文档头部定义内部样式表
<head>
<style>
......
</style>
</head>
- 内联样式
在相关的标签内使用样式(style)属性。
一般情况下,优先级如下:
(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式
链接样式
这四个链接状态是:
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
常见的用颜色、文本(是否有下划线-text-decoration)、背景等修饰
text-decoration:none;:消除链接下划线
用法:如a:link {text-decoration:none;}
列表
可以选用不同的列表项标记:
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
可使用图像作为列表项标记:
ul { list-style-image: url('sqpurple.gif'); }
不显示列表前的符号:
list-style-type: none;
盒子模型
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
分组和嵌套
分组:每个选择器用逗号分隔,可避免重复写很多代码。
h1,h2,p{ color:green; }
嵌套:适用于选择器内部的选择器的样式
p{ }: 为所有 p 元素指定一个样式。.marked{ }: 为所有 class="marked" 的元素指定一个样式。.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
总结
今天学习了css比较基础的知识点,整理了一部分要点,包括id 和 class 选择器、css插入方式、链接样式、列表、盒子模型以及分组与嵌套,掌握了css框架结构部分,收获颇丰!