学习笔记视频来源：3小时前端入门教程（HTML+CSS+JS）https://www.bilibili.com/video/BV1BT4y1W7Aw?p=1&vd_source=01d8d8bf9ce02b30207c26b6979f8a36
文章目录
1.CSS介绍
①CSS全名为Cascading Style Sheets，中文名为‘层叠样式表’
②用于定义网页样式和布局的样式表语言，通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式。从而实现更精确的页面设计
③HTML与CSS的关系就好比建筑与装修
2.CSS语法
CSS通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式
选择器{
属性1：属性值1；
属性2：属性值2；
}
1.选择器的声明中可以写无数条属性
2.声明的每一行属性，都需要以英文分号结尾
3.声明中的所有属性和值都是以键值对这种形式出现的
示例：
/*这是一个p标签选择器*/
p{
color:blue;
font-size:16px;
}
3.CSS导入方式
三种导入方式：
1.内联样式——html标签中写上style属性
2.内部样式表——head标签中的style标签里
3.外部样式表——单独的一个CSS文件，允许在多个页面上使用相同的样式，同时导入需要link标签，href属性为css文件的路径
三种导入方式的优先级：1>2>3
示例：
- style.css文件内容
h3{
color:purple;
}
- css_practice.html文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML practice</title>
<link rel="stylessheety" href="./css/style.css">
<style>
h2{
color:blue;
font-size:16px
}
</style>
</head>
<body>
<h1 style="color:red">这是一个应用CSS样式的一级标题标签，使用内联样式</h1>
<h2>这是一个应用CSS样式的二级标题标签，使用内部样式表</h2>
<h3>这是一个应用CSS样式的二级标题标签，使用外部样式表</h3>
</body>
</html>
4.CSS选择器
CSS选择器是CSS中的关键部分，它允许你针对特定元素或一组元素定义样式，注意：ID>类>标签名
- 元素选择器
- 类选择器
- ID选择器
- 通用选择器(对所有元素生效)
- 子元素选择器
- 后代选择器(包含选择器)
- 并集选择器(兄弟选择器)
- 伪类选择器(悬停可以增加效果)
- 伪元素选择器(创建一个虚拟元素，并且样式化它们)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML practice</title>
<style>
/*元素选择器*/
h2{
color:blue;
font-size:16px;
}
/*类选择器*/
.hightlight{
background-color:yellow;
}
/*ID选择器*/
#header{
font-size:larger;
}
/*通用选择器*/
*{
font-family:'kaiTi';
font-weight:bolder;
}
/*子元素选择器*/
.father > .son{
color:yellowgreen;
}
/*后代选择器*/
.father p{
color:brown;
font-size:larger;
}
/*兄弟选择器*/
h3 +p {
background-color:red;
}
/*伪类选择器*/
#element:hover{
background-color:blueviolet;
}
/*
选中第一个子元素:first-child
第n个子元素:nth-child
链接的一个状态:active
*/
/*伪元素选择器
::after
::before
*/
</style>
</head>
<body>
<h1>不用类型的CSS选择器</h1>
<h2>这是一个元素选择器示例</h2>
<h3 class="hightlight">这是一个类选择器示例</h3>
<h3>这是另一个类选择器示例</h3>
<h4 id="header">这是一个ID选择器示例</h4>
<div class="father">
<p class="son">这是一个子元素选择器示例</p>
<div>
<p class="grandson">这是一个后代选择器示例</p>
</div>
</div>
<p>这是一个普通的p标签</p>
<h3>这是一个相邻兄弟选择器示例</h3>
<p>这是另一个p标签</p>
<h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>
5.CSS常用属性
CSS参考手册：https://www.runoob.com/cssref/css-reference.html
color：设置字体颜色
background-color：设置背景颜色
font：复合属性，通过一个属性，可以给他设置多个样式
font-size：设置字体大小
font-family：设置字体
font-weight：设置字体粗细
line-height：调节行内距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML practice</title>
</head>
<body>
<h1 style="font:bolder 50px 'KaiTi'">这是一个font复合属性示例</h1>
<p style="line-weight:40px">这是一段长文本</p>
</body>
</html>
6.盒子模型
| 属性名 | 说明 |
|---|---|
| 内容Content | 盒子包含的实际内容，比如文本、图片等。 |
| 内边距Padding | 围绕在内容的内部，是内容与边框之间的空间。可以使用padding属性来设置。 |
| 边框Border | 围绕在内边距的外部，是盒子的边界。可以使用Border属性来设置。 |
| 外边距Margin | 围绕在边框的外部，是盒子与其他元素之间的空间。可以使用margin属性来设置。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 盒子模型</title>
<style>
.demo{
display:inline-block;
background-color:aqua;
border:5px solid yellowgreen;
padding:50px;
magin:40px;
}
.border-demo{
background-color:yellow;
width:300px;
height:200px;
/*边框遵循上右下左的顺序，当然也可以直接指定某个边框，例如border-left*/
/*border-style:solid;
border-width:10px 0 20px 40px;
border-color:blueviolet;*/
border-left:10px solid brown;
/*border-left-color:brown*/
}
</style>
</head>
<body>
<div class="demo">你好，世界</div>
<div class="border-demo">这是一个边框示例</div>
</body>
</html>
7.浮动
(1)网页布局方式
有以下5种：
- 标准流(普通流，文档流)：网页按照元素的书写顺序依次排列
- 浮动
- 定位
- Flexbox和Grid(自定义布局)(使得页面在不同的设备上更容易适应)
标准流是由块级元素和行内元素按照默认规定的方式来排列，块级就是占一行，行内元素一行放好多个元素。
(2)浮动介绍
元素脱离文档流，根据开发者的意愿漂浮到网页的任意方向
"浮动"属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。
语法：
选择器{
float:left/right/none;
}
注意：浮动是相对于父元素浮动，只会在父元素的内部移动
(3)浮动的三大特性
- 脱标：脱离标准流
- 一行显示，顶部对齐
- 具备行内块元素特性
(4)浮动示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
.father{
background-color: aqua;
height: 150px;
}
.left-son{
float: left;
width: 100px;
height: 100px;
background-color: purple;
}
.right-son{
float: right;
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="father">
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="right-son">右浮动</div>
<div class="right-son">右浮动</div>
</div>
</body>
</html>
(5)清除浮动
两种方法：
- 在浮动元素的父元素中添加一个属性overflow指定属性值为hidden
- 伪元素清除法：添加一个伪元素选择器
.father::after{
content:"";
display:table;
clear:both;
}
8.定位
定位布局可以精准定位，但缺乏灵活性
定位方式：
- 相对定位：相对于元素在文档流中的正常位置进行定位
- 绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流
- 固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而移动
修改position属性即可
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
.box1{
height: 350px;
background-color: aqua;
}
.box-normal{
width: 100px;
height: 100px;
background-color: purple;
}
.box-relative{
width: 100px;
height: 100px;
background-color: pink;
position: relative;
left: 120px;
/* right: 20px; */
top: 40px;
/* bottom: 40px; */
}
.box2{
height: 350px;
background-color: aqua;
position: relative;
}
.box-absolute{
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
left: 20px;
top: 20px;
}
.box-fixed{
width: 100px;
height: 100px;
background-color: brown;
position: fixed;
right: 0;
top: 300px;
}
</style>
</head>
<body>
<h1>相对定位</h1>
<div class="box1">
<div class="box-normal"></div>
<div class="box-relative"></div>
<div class="box-normal"></div>
</div>
<h1>绝对定位</h1>
<div class="box2">
<div class="box-normal"></div>
<div class="box-absolute"></div>
<div class="box-normal"></div>
</div>
<h1>固定定位</h1>
<div class="box-fixed"></div>
</body>
</html>
9832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
