CSS学习心得
CSS
- 一、CSS简介
- 二、CSS语法
-
- 1.id 选择器
- 2.class 选择器
- 三、CSS的应用
-
- 1、外部样式表
- 2、内部样式表
- 3、内联样式
- 四、颜色、尺寸、对齐
- 五、CSS文档分析
-
- 1、盒子模型
- 2、边框与边距
- 3、定位
- 4、溢出 overflow
- 5、浮动 float
- 6、不透明度
- 7、组合选择器
- 总结
一、CSS简介
CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而CSS样式定义如何显示html元素。其涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。这说明一个真正网页的值作CSS有者举足轻重的作用。
二、CSS语法
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明
1、选择器是需要改变样式的对象。
2、每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
3、属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
1.id 选择器
id选择器前有 # 号。
例如：
#sky{
color: blue;
}
这条规则表明，找到页面上id为sky的那个元素让它呈现蓝色。
注意：id 选择器适用范围只有一个元素。
2.class 选择器
class选择器前有 . 号。
例如：
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
引用 我又红又大还居中
注意：元素的class值可以多个，也可以重复。
所以，class选择器比id选择器应用的广泛
三、CSS的应用
1、外部样式表
首先在VS Code中新建一个HTML文件，（后缀为.html）
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
</head>
<body>
<h1>人生苦短，及时行乐</h1>
<hr>
<p class="haha">哈哈哈哈哈！</p>
</body>
</html>
在同一目录下新建一个CSS文件，（后缀为.css）
例如:
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
其结果显示：
这里标签设置的背景颜色和字体居中，表明整个页面的背景颜色和字体格式。设置了字体颜色，标签表明一级标题的字体颜色为红色。class选择器设置的字体的位置、颜色、和大小。在html中运用class选择器的元素采用class选择器设置的格式。
注意，html文件和css文件连接的路径。一般会放在同一目录下。
2、内部样式表
在html文件中直接写入样式表
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
<link rel="stylesheet" type="text/css" href="mycss.css">
<title>页面标题</title>
<style>
body {
background-color: linen;
text-align: center;
}
h1 {
color: red;
}
.haha {
margin-top: 100px;
color: chocolate;
font-size: 50px;
}
</style>
</head>
<body>
<h1>人生苦短，及时行乐</h1>
<hr>
<p class="haha">哈哈哈哈哈！</p>
</body>
</html>
其显示结果：
与上面的结果一致，只是在中引入了