一.CSS样式规则
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
属性与属性值以“键值对”的形式出现,属性是对通过选择器所指定的对象设置的样式属性(字体,大小,颜色等)。
CSS代码结构特点:
- CSS样式中的选择器是严格区分大小写的,属性和值都不区分大小写(一般“选择器,属性,值”都采用小写形式)。
- 多个属性之间必须用英文状态下的分号“;”隔开。(最后一个属性的分号可省略,最好不省略)。
- 如果属性值有多个单词或多个字且中间有空格,则必须给这个属性值加上英文状态的引号。
- CSS注释:/* CSS注释文本 */
- 在CSS代码中空格是不能被解析的,大括号及分号前空格可有可无。因此可以使用空格键、Tab键、回车键等对样式代码进行排版(格式化CSS代码)。
二.引入CSS样式表
如果要使用CSS修饰网页,就需要引入CSS样式表。
1.行内式(内联样式):通过标记style标签来设置样式。
<标签名 style="属性1:属性值1;属性2:属性值2">内容</标签名>
2.内嵌式:是指将CSS代码集中写在HTML文档的<head>头部,并用<style>标记。
<head>
<style type="text/css">
选择器{属性1:属性值1;属性2:属性值2;}
</style>
</head>
- style标记一般位于题head标记中title标记之后。(浏览器是自上而下解析代码,CSS代码放在头部以避免网页内容加载后没有样式修饰的尴尬)。
- 设置type属性为“text/css”,是使浏览器知道style包含的是CSS代码。
- 内嵌式CSS样式只对当前所在的HTML有效。
3.链入式:是指将所有的样式放在一个.css为扩展名的外部样式表文件中,然后再通过<link/>标记将外部样式表文件链接到HTML文档中。
<head>
<link href="CSS文件的路径" type=“text/css” rel="stylesheet"/>
</head>
- href:定义所链接的外部样式表的URL,可以是绝对路径也可以是相对路径。
- type:定义所链接的外部文件的类型,指定为 “text/css”是表示外部链接的文件是CSS样式表。
- rel:定义当前文档与所链接的文档之间的关系,指定为stylesheet表示被链接的是样式表文件。
链入式最大的好处就是一个CSS样式表可以被不同的HTML链接使用,一个HTML也可以链接多个CSS样式表。
三.CSS基础选择器
1.标记选择器:指用HTML标记名称作为选择器,为页面中某一类标记对应的元素指定统一的样式(body,p,h1,strong标记等)。
2.(class)类选择器:用“.”(英文点号)进行标识,后跟类名(类名第一个字符不能用数字,严格区分大小写)。 .类名{属性:属性值;}
3.id选择器:用“#”进行标识,后跟id名
4.通配符选择器:用“*”号表示,所有选择器中作用范围最广的,能作用到页面中所有元素。
5.标签指定式选择器(交集选择器):是由两个选择器组成的,第一个是标记选择器,第二个是id选择器或类选择器,两个选择器之间不能有空格。p#one
6.后代选择器:标记嵌套,外层标记写在前面,内层标记写在后面,中间用空格隔开。
7.并集选择器:如果某些选择器定义的样式完全相同或部分相同,便可以使用并集选择器定义;并集选择器就是各个选择器用英文逗号隔开。h2,h3,p,#one,.class1{属性:属性值;}