2022-07-10 第三小组 高佳誉 学习笔记
CSS基础技术
重点
- 背景的相关知识。
- 元素的显示方式及转换模式。
- 定位和浮动。
- 盒子模型。
知识点
1. CSS基本语法。
选择器 {
声明1；
声明2；
}
2. CSS写入的三种方式。
第一种：行内样式
直接在单个标签中写入style并进行书写
第二种：内部样式
在html文件的head区域写入style进行书写
第三种：外部样式
在css文件中书写，在html文件中的head区域采用link方法导入
link语法；
上面三种语法讲究就近原则，当前标签距离谁较近，就是用哪种css
一般情况：行内元素>内部样式>外部样式
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导入方法</title>
<!-- 注意：这里遵循就近原则，当前标签离哪个近就用哪个样式 -->
<!-- 内部样式：在HTML的Head部位书写 -->
<style>
h1 {
color: aliceblue;
}
</style>
<!-- 外部样式：在CSS中书写，然后通过Link导入 -->
<link rel="stylesheet" href="css.css">
</head>
<body>
<!-- 行内样式：在body中书写标签时直接写入style -->
<h1 style="color:aqua;"></h1>
</body>
</html>
3. CSS的四种选择器
通配符选择器：
针对所有标签进行选择
标签选择器：
针对所有对应的标签进行选择
类选择器（class）：
针对所有对应class名的所有类标签进行选择
一个标签可以具有多个类，一个类可以作用于多个标签
id选择器（id）：
针对对应id名的唯一标签进行选择
一个标签只能有一个id，一个id只能作用于一个标签
三种选择器具有明确的优先级：id选择器>类选择器>标签选择器
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三种选择器</title>
<!-- 这里选择器的样式遵循：id选择器>类选择器>标签选择器 -->
<style>
/*
1.标签选择器：
样式： 标签名{}
自动选中所有标签的代码
*/
h1 {
color: bisque;
}
p {
color: blueviolet;
font-size: 30px;
}
/*
2.类选择器：
样式：.类名{}
自动选中所有带类名的代码，可以跨标签，类名定义用class
*/
.myStyle {
color: blue;
font-size: 20px;
}
/*
3.id选择器：
样式：#id名{}
自动选择带有id名的代码，注意id具有全局唯一性
*/
#w123 {
color: aquamarine;
font-size: 40px;
}
#w333 {
color: aquamarine;
font-size: 40px;
}
/*
4.通配符选择器
样式： * {}
全部锁定，全部标签都带有以上特征
*/
</style>
</head>
<body>
<h1>标题1</h1>
<p>我是30px大小的</p>
<p class="myStyle"> 我是类选择器</p>
<p id="w123">我是id选择器</p>
<p class="myStyle" id="w333"> 我的最高权限是id选择器</p>
<p class="myStyle">我的最高权限是类选择器</p>
</body>
</html>
4. CSS的层次选择器。
层次选择器分为五种：
并集选择器：
选择器1，选择器2 {}
同时选择多个选择器的标签
后代选择器：
父 子{}
可以选择父类的所有子类标签以及子类标签后的所有标签
子选择器：
父>子{}
只能选择父类的所有子类标签
相邻选择器：
.class+兄弟标签类型{}
只能选择.class的父类的下一个兄弟标签
通用选择器：
.class~标签类型{}
可以选择.class的父类的下一个之后包括下一个的所有兄弟标签
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层次选择器</title>
<!-- 层次选择器主要用于后代，下一代，兄弟等 -->
<style>
/*
后代选择器：
格式：父类 父类的后代{}
用于父类的后代所有标签内
*/
ul li{
color: rgb(255, 0, 0);
}
/*
子选择器：
格式：父类 子类{}
仅用于父类的下一代
*/
body>p{
color: aqua;
}
/*
相邻兄弟选择器：
格式：.class名 + 同辈标签{}
选定class的标签的相邻标签
*/
.active + p {
color: black;
}
/*
通用兄弟选择器：
格式：.class名 ~ 同辈标签{}
选定class的标签的以下所有兄弟标签
*/
.allover ~ p {
color: rgb(243, 255, 7);
}
</style>
</head>
<body>
<p>
<p>孙子1</p>
</p>
<p class="active">儿子2</p>
<p class="allover">儿子3</p>
<p>儿子4</p>
<p>儿子5</p>
<ul>
<li>
<p>我是孙子辈</p>
</li>
<li>我是儿子辈</li>
</ul>
</body>
</html>
5. 伪类选择器
结构伪选择器主要负责有条件性的标签选择
下面直接给出代码示例
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器</title>
<!--
结构伪类选择器在实际开发中并不常用，但我们仍需了解认识
结构伪类选择器具有条件性，它有条件地选择部分内容进行CSS操作
具体结构：父类：条件{}
-->
<style>
/* 例如我们希望在ul中的第一个和最后一个li中单独进行CSS操作 */
ul li:first-child {
color: brown;
}
ul li:last-child {
color: red;
}
/* 这里我们以p的父元素为父类，来选择第2个孩子 */
/* 我们可以通过nth-child（n）来选择第n个元素 */
p:nth-child(2){
color: aquamarine;
}
/* 这里我们以p的父元素为父类，来选择第2个p类型的孩子 */
/* 我们可以通过nth-of-type（n）来选择第n个元素 */
p:nth-of-type(2){
color: antiquewhite;
}
/* 同时，“：”也具有其他性质；例如a的hover属性表示当鼠标放在a上时的CSS操作 */
a:hover {
background-color: black;
}
</style>
</head>
<body>
<a href="#">123</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>l1</li>
<li>l2</li>
<li>l3</li>
</ul>
</body>
</html>
6.盒子模型
border：边框
margin：外边距 （值：长度单位、百分比、负值、auto-自动）
注意：margin左右设置成auto，能实现块级元素的水平居中（必须指定块级元素的宽）
padding：内边距 （padding的值可以是长度或者百分比，但是不能为负值）
一个值：四边都相同
二个值：上，右，然后取对边的值
三个值：上，右，下，然后取对边
四个值：上，右，下，左
注意：padding与margin都是如此
7.定位
static：默认值，没有定位
relative：相对定位——没有脱离标准文档流，在原来没有设置定位时的位置，进行偏移，到达新的位置，对于其他的元素不影响。（浮动元素也一样）
absolute：绝对定位——会脱离标准文档流，以离他最近的已经定位”祖先“元素，如果没有找到已经定位的祖先元素，就以当前的窗口为基准，进行偏移
fixed：固定定位——根据浏览器窗口来进行定位，会脱离标准文档流
掌握程度
大部分的知识点都已经掌握，但是盒子模型宽高的计算和三种定位的相关联系两个知识点掌握的很模糊。自我建议：重新观看回放，整理知识点。
收获
今天完成了大部分CSS知识点的学习，加强了我对前端的兴趣。虽然我是想做后端工程师，但是前端我发现我也是有兴趣做的，那这样我感觉可以冲击一下全栈工程师。都不一定呢，看之后的学习效果吧，谁能说得准呢。
学习效果展示
浙公网安备 33010602011771号