CSS 简介
- CSS 指的是层叠样式表，即：Cascading Style Sheets
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在CSS文件中
- 多个样式定义可以层叠为一个
CSS 语法
- CSS 规则由两个主要的部分组成：选择器、一条或多条声明
实例：
h1{
color:blue;
font-size:12px;
}
实例解析：
- h1 - 选择器
- color、font-size - 属性
- blue、12px - 值
- 选择器通常是需要改变样式的 HTML 元素
- 每条声明由一个属性和一个值组成
- 属性和值被冒号分开
- 声明总是以分号结尾
- 一组声明用花括号包起来
CSS 注释
- CSS 注释以"/*"开始，以"*/"结束
CSS 注释实例：
/*这是一个注释*/
p{
/*文本居中对齐*/
text-align:center;
/*设置颜色为黑色*/
color:black;
/*设置字体为Arial*/
font-family:Arial;
}
CSS 选择器
id 选择器
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
- HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以"#"来定义
id 选择器实例：
#fruit{
text-align:center;
color:green;
}
注意：id属性不能以数字开头，数字开头的 id 在Mozilla/FireFox浏览器中不起作用
class 选择器
- class 选择器用于描述一组元素的样式
- class 选择器有别于 id 选择器，class 可以在多个元素中使用
- class 选择器在 HTML 中以 class 属性表示，在 CSS 中，class选择器以一个英文句点"."定义
class 选择器实例：
.cars{
text-align:center;
color:red;
}
注意：类名的第一个字符不能以数字开头，数字开头的 id 在Mozilla/FireFox浏览器中不起作用
CSS 创建
如何插入样式表
- 外部样式表（External style sheet）
- 内部样式表（Internal style sheet）
- 内联样式（Inline style）
外部样式表
- 适用场景：当样式需要应用于很多页面时
- 使用方法：在每个页面的文档头部使用 <link> 标签
引用外部样式表实例：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
- 适用场景：当单个文档需要特殊样式时
- 使用方法：在页面的文档头部使用 <style> 标签
使用内部样式表实例：
<head>
<style>
body{
background-image:url("images/background.jpg");
}
p{
margin-left:25px;
}
hr{
color:green;
}
</style>
</head>
内联样式
- 适用场景：内联样式会将表现和内容混杂在一起，要慎用这种方式（当样式仅需要在一个元素上应用一次时可用）
- 使用方法：在相关标签内使用 style 属性，style 属性可以包含任何 CSS 属性
内联样式实例：
<p style="color:red;margin-left:25px;">
这是一个使用了内联样式的段落
</p>
多重样式优先级
- 样式表允许以多种方式规定样式信息
- 样式可以规定在单个 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表
- 优先级：内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，那么外部样式将会覆盖内部样式
样式优先级实例：
<head>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
/*内部样式*/
h3{
color:red;
}
</style>
</head>
<body>
<h3>
测试
</h3>
<p style="color:blue;">
这是一个使用内联样式的段落
</p>
</body>