目录
一、CSS基本语法
css：层叠样式表 (Cascading Style Sheets)。CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。
1.1 语法
选择器 + {一条/N条声明}
格式：
标签名{
CSS语句
}
注意事项：
1.2 CSS引入方式
1.2.1 内部样式表：
写在 style 标签中。 嵌入到 html 内部。一般是放到 head 标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>hello</p>
</body>
</html>
优缺点：
1.2.2 行内样式表
通过 style 属性, 来指定某个标签的样式。
只适合于写简单样式。只针对某个标签生效。
<p style = "color:green">hello</p>
优缺点：
1.2.3 外部样式
这种最常用。
创建一个 css 文件。
使用 link 标签引入 css。
<link rel="stylesheet" href="[CSS文件路径]">
例子:
HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./stytle.css">
</head>
<body>
<div>hello</div>
</body>
</html>
CSS文件：
div {
color: red;
}
优缺点：
1.3 代码书写格式
样式格式：
p {
color: red;
font-size: 30px;
}
- 样式大小写：采用小写字母。
- 空格规范 ：
冒号后面带空格；
选择器和 { 之间也有一个空格。
二、选择器
选择器的种类：
- 基础选择器: 单个选择器构成的
-
- 标签选择器
-
- 类选择器
-
- id 选择器
-
- 通配符选择器
- 复合选择器: 把多种基础选择器综合运用起来.
-
- 后代选择器
-
- 子选择器
-
- 并集选择器
-
- 伪类选择器
2.1 基础选择器
2.1.1 标签选择器
标签选择器：
- 能快速为同一类型的标签都选择出来.
- 但是不能差异化选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
color: brown;
}
div {
color: green;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<div>hello1</div>
<div>hello2</div>
<div>hello3</div>
<div>hello4</div>
</body>
</html>
2.1.2 类选择器
类选择器
- 差异化表示不同的标签
- 可以让多个标签的都使用同一个标签.
语法细节：
- 类名用 . 开头的
- 下方的标签使用 class 属性来调用.
- 一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
- 如果是长的类名, 可以使用 - 分割.
- 不要使用纯数字, 或者中文, 以及标签名来命名类名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.brown {
color: brown;
}
div {
color: green;
}
</style>
</head>
<body>
<p class = 'brown'>p1</p>
<p class = 'brown'>p2</p>
<p>p3</p>
<p class = 'brown'>p4</p>
<p>p5</p>
<div>hello1</div>
<div class = 'brown'>hello2</div>
<div class = 'brown'>hello3</div>
<div>hello4</div>
</body>
</html>
2.1.3 id 选择器
id 选择器：
和类选择器类似.
- CSS 中使用 # 开头表示 id 选择器
- id 选择器的值和 html 中某个元素的 id 值相同
- html 的元素 id 不必带 #
- id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.brown {
color: brown;
}
div {
color: green;
}
#red {
color: red;
}
</style>
</head>
<body>
<p id = 'red'>p1</p>
<p class = 'brown'>p2</p>
<p>p3</p>
<p class = 'brown'>p4</p>
<p>p5</p>
<div>hello1</div>
<div id = 'red'>hello2</div>
<div class = 'brown'>hello3</div>
<div>hello4</div>
</body>
</html>
2.1.4 通配符选择器
通配符选择器：
使用 * 的定义, 选取所有的标签.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<p id = 'red'>p1</p>
<p class = 'brown'>p2</p>
<p>p3</p>
<p class = 'brown'>p4</p>
<p>p5</p>
<div>hello1</div>
<div id = 'red'>hello2</div>
<div class = 'brown'>hello3</div>
<div>hello4</div>
</body>
</html>
2.2 复合选择器
2.2.1 后代选择器
后代选择器 :
又叫包含选择器. 选择某个父元素中的某个子元素.
格式：
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ol li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>
</body>
</html>
2.2.2 子选择器
子选择器：
与后代选择器类似，但是只能选择子标签。
格式：
- 使用大于号分割
- 只选亲儿子，不选孙子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.cat>a {
color: red;
}
</style>
</head>
<body>
<div class="cat">
<a href="#">小猫</a>
<ul>
<li><a href="#">小狗</a></li>
<li><a href="#">小狗</a></li>
</ul>
</div>
</body>
</html>
2.2.3 并集选择器
用于选择多组标签. (集体声明)
格式：
- 通过 逗号 分割等多个元素.
- 表示同时选中元素 1 和 元素 2
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
2.3.4 伪类选择器
- 链接伪类选择器
- :force 伪类选择器
三、常用元素属性
参考文档：文档
3.1 字体属性
3.1.1 设置字体 font-family
body {
font-family: '微软雅黑';
font-family: 'Microsoft YaHei';
}
3.1.2 字体大小 font-size
p {
font-size: 20px;
}
3.1.3 字体粗细 font-weight
p {
font-weight: bold;
font-weight: 700;
}
3.1.4 文字样式 font-style
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
3.2 文本属性
3.2.1 文本颜色 color
计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.
color 属性值的写法:
3.2.2 文本对齐 text-align
3.2.3 文本装饰 text-decoration
3.2.4 文本缩进 text-indent
3.2.5 行高 line-height
行高: 指的是上下文本行之间的基线距离. 行高 = 上边距 + 下边距 + 字体大小
四、元素的显示模式
4.1 块级元素
h1 - h6
p
d
iv
ul
ol
li
特点：
4.2 行内元素/内联元素
a
strong
b
em
i
del
s
ins
u
span
特点：
