CSS 基本样式
4.1 CSS 基本概念
CSS：Cascade Style Sheet 层叠样式表。
样式表： 样式的集合，定义HTML元素显示的方式。
4.2 CSS 的使用
使用 CSS 的三种方式：
-
外部样式表：需要配合外部的 CSS 样式文件使用
index.html 页面
<!-- index.html --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS 样式</title> <!-- 外部样式表 --> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="div1"></div> </body> </html>style.css 页面
/* style.css */ #div1{ width: 200px; height: 200px; background: #ef5576; } -
内部样式表
index.html
<head> ...... <style type="text/css"> #div1 { width: 400px; height: 400px; background: blue; } </style> </head> -
内联样式表
index.html
<body> <div style="width: 500px; height:500px; background: yellow"> ...... </div> </body>
优先级： 内联 CSS > 内部 CSS > 外部 CSS
结论：
- 如果一个样式在多个网页中使用，只能使用外部 CSS 样式表。
- 如果一个样式只是在一个页面中使用，可以考虑放到内部样式表。
- 除非有特殊情况，否则一般不建议使用内联样式。
4.3 CSS 的格式
格式：
选择器 {
属性1: 值;
属性2: 值;
......
}
注释的格式：
/* 这是注释的内容 */
注意：
- 如果值是字符串，可以使用双引号也可以使用单引号。
- 如果要声明多个属性，必须通过分号进行隔开。
- CSS 中不区分大小写，但是建议使用小写。
4.4 CSS 选择器
描述如何选择HTML氧元素
4.4.1 元素选择器
选择 HTML 文档中的元素
p {
background: yellow;
}
一旦选择使用，页面中的所有 p 元素都会被选中并变成黄色背景。
4.4.2 类选择器
选择文档中元素指定的类，类是通过 class 属性去指定的；多个元素可以使用同一个类。
html 文件
<div id="div1">
<p class="c1" id="p1">段落1</p>
<p class="c1" id="p2">段落2</p>
<p class="c1">段落3</p>
<p>段落4</p>
<p>段落5</p>
</div>
css 文件
.c1 {
background: green;
}
效果图
4.4.3 id 选择器
选择HTML文档中元素指定的ID
ID是通过id属性去设置的，每一个元素指定的id不能重复。
html 文件
<div id="div1">
<p class="c1" id="p1">段落1</p>
<p class="c1" id="p2">段落2</p>
<p class="c1">段落3</p>
<p id="p4">段落4</p>
<p>段落5</p>
</div>
css 文件
.c1 {
background: green;
}
#p4 {
background: #f5ff00;
}
效果图
