2022-7-10 第三小组- 甘源册学习笔记
目录
1.CSS层叠样式表
- 功能：网页美化
- 样式通常存储在样式表中，把样式添加到HTML元素中，可以把样式显示在HTML中
<!-- 定义CSS样式方法 -->
<!--1. 行内样式，内联样式 ————（1）如果当前样式不需要复用，可以用；（2）优先级-->
<p style="background: rgb(109, 219, 118);">lasf</p>
<span style="background: yellow;">kmkk</span>
<!--2. 内页样式（嵌入样式） -->
<style>
/* 根据标签来命名 */
/* 选择器selector */
/* 标签选择器 可以让页面上所有的p标签都有样式 */
p{
background: red;
}
/* 声明一个样式并起个名字 */
/* 类选择器 声明样式的时候需要用一个英文的点.*/
/* 类选择器优先级高于标签选择器 */
.sd{
background: yellowgreen;
}
/* id选择器 声明样式需要用一个#，对应元素的id要匹配*/
#ss{
background: blue;
}
</style>
<p >faslf</p>
<p id="ss">faslf</p>
<p class="sd">faslf</p>
/*3. 外部样式（推荐） */
.sd{
background: yellowgreen;
}
div{
background: rebeccapurple;
}
<!-- 引入外部css样式 -->
<link rel="stylesheet" href="css/ch.css">
<p class="sd"> fsafsd </p>
<div>dafag</div>
1.1层次选择器
-
并列选择器
<style> div,p{ color: rgb(12, 193, 243); } </style> <div>我是div</div> <p>我是p</p> -
对div里边的p进行操作(后代选择器)
<style> div p{ color: aquamarine; } </style> <div> <p>fsa</p> <p>gsag</p> <span> <p>fas</p> </span> </div> <p> fsafsa</p> -
子类选择器
/* 选中div里面的直接子元素p */ div>p{ color: black; } -
相邻选择器（div+p：选中紧跟着div的p）
div+P{ color；blue； }
1.2属性选择器
<style>
/* 属性的名 [type]选中页面上所有带有type的标签
[type=text]选中页面是所有type属性等于text的标签
[title~=flower]选中页面上所有的title属性包含flower单词的所有元素 */
[title~=flower]{
height: 300px;
}
</style>
1.3伪类选择器
<style>
/* 默认样式 */
a:link{
color: red;
}
/* 鼠标悬停样式 */
a:hover{
color: aquamarine;
}
/* 元素被激活 */
a:active{
color: antiquewhite;
}
/* 点过的样式 */
a:visited{
color: rgb(30, 28, 28);
}
1.4nth-child
<style>
li:nth-child(3){
color: royalblue;
}
tr:nth-child(2N){
background: red;
}
/* :checked 选中所有被选中的元素*/
2.层叠性
-
层叠性
- 如果样式冲突，遵循就近原则，哪个样式离结构近就用哪个
- 如果样式不冲突，就不层叠
-
继承性
- 子标签会继承父标签的某些样式。（文本元素，字号，背景颜色。。。。。。）
-
优先级：类选择器>标签选择器>id选择器
-
权重
- 继承的样式权重为0
- 行内样式权重最高（标签里的style）
- 如果权重相同，就近原则
- （！important)改变权重 权重无限大（比行内样式还大）
3.CSS常用的单位
- px像素：绝对单位；一个像素代表一个小白点。如100px*100px的正方形，宽度100个点，高度100个点。
- em：相对单位，它会参考它的父级元素。字体用的比较多，例：父级元素字体是16px，要设置元素的字体大小为2em，当期元素的字体大小就是32px。
- rem：相对单位。是由页面决定的。当我们改变了浏览器的字号设置，页面的字号也会随之发生变化。一般应用在老人版。
- %百分比：相对单位。相当于父级元素的比例。
4.CSS属性
4.1字体属性
<style>
div{
/* 字体大小 */
font-size: 100px;
/* 字体样式 */
font-family: '楷体';
/* 行高 字体大小是行高的一半 垂直居中*/
line-height: 200px;
/* 粗细 */
font-weight: bold;
/* 字体的修饰 */
/* 下划线 */
text-decoration: underline;
/* 字体倾斜 */
font-style: italic;
}
a:link{
/* 取消下划线 */
text-decoration: none;
color: black;
}
a:hover{
text-decoration: underline;
color: blue;
}
</style>
4.2背景
<style>
div{
height: 800px;
width: 800px;
/* 背景颜色 */
/*
颜色:(1)英文,(2)rgb函数(red,green,blue),(3)rgba比rgb多个透明度,(4)十六进制0~f
*/
background-color: rgb(177, 132, 220,0.4);
/* 背景图片 */
background-image: url(../img/1.jpg);
/* background: url(../img/1.jpeg); */
/* 背景图片的显示方式 不平铺 */
background-repeat: no-repeat;
/* 背景图片大小 */
background-size: 100%;
}
</style>
4.3英文属性
<style>
p{
/* 字母间距 */
letter-spacing: 20px;
}
img{
width: 500px;
height: 250px;
}
div{
height: 500px;
width: 400px;
border: 1px red solid;
}
img:hover{
width: 400px;
height: 500px;
}
</style>
4.4序列
<style>
li{
/*矩形 */
list-style-type: square;
/* 空心圆 */
list-style-type:circle;
/* 类型 小写罗马数字 */
list-style-type: lower-roman;
/* 位置 */
list-style-position:inside;
/* 自定义类型 */
list-style-image: url(../img/1.jpeg);
}
</style>
4.5边框
<style>
div{
height: 200px;
width: 200px;
/* 边框线的样式 */
border-style: dotted;
/* 边框线的宽度 */
border-width: 10px;
/* 边框线的颜色 */
border-color: aqua;
/* 上边三个合一 */
border: 10px red solid;
/* 边框下线 */
border-bottom: 10px solid #011100;
/* 边框左线 */
border-left: 10px solid rgb(88, 253, 6);
border-right: 10px solid rgb(14, 34, 219);
/* 圆角 */
border-radius: 1000px;
}
table tr td{
border-right: 1px solid red;
}
table{
border-collapse:collapse;
border-spacing: 0;
border-left: 1px solid red;
border-top: 1px solid red;
}
table tr{
border-bottom: 1px solid red ;
}
</style>
4.6区块属性
<style>
div{
height: 300px;
width: 300px;
background: yellow;
/* 显示方式块级变为行级 */
display: inline;
}
span{
height: 200px;
width: 200px;
background: orange;
/* 显示方式行级变为块级 */
display: block;
/* 显示方式隐藏 */
/* display: none; */
/* 内联块 */
display: inline-block;
}
</style>
4.7盒子模型
<style>
.div1 {
/*
盒子模型:
width: height: 表示内容区的宽和高;
margin 外边距:元素距离上一个元素的位置
padding 内边距:本元素内部空出的距离
border 边框线的宽度
*/
height: 300px;
width: 300px;
background: yellowgreen;
padding: 10px;
margin: 100px;
/* 设置盒子模型的尺寸计算方式 */
box-sizing: border-box;
}
.div2 {
height: 300px;
width: 300px;
background: blue;
padding: 10px;
margin: 100px;
}
</style>
<div class="div2">我的</div>
<div class="div1">我是div</div>
4.8定位（重点难点）
<style>
.a{
height: 300px;
width: 300px;
background: blue;
position: absolute ;
left: 200px;
top: 200px;
}
.b{
height: 100px;
width: 1800px;
background: red;
position: fixed;
}
.fa{
height: 1600px;
width: 600px;
background: skyblue;
position:absolute;
/* 元素隐藏 */
/* visibility: hidden; */
}
.dd{
height: 200px;
width: 200px;
border: 5px solid red;
/* 溢出样式
hidden 隐藏
scroll 滚动条
visible 显示 */
overflow:visible;
}
</style>
父相子绝 （父级相对定位子级绝对定位）
- position 定位
- absolute:绝对定位
- 当前文档流可以理解为飘起来了
- 参照物是已经定位的父级元素
- relative 相对定位
- 参照物是已经定位的父级元素
- 占有原有位置，不会漂浮
- static 文档流(默认)
- fixed 浮动
- 浮动，定住了
- absolute:绝对定位
4.9浮动（难点）
<style>
.a{
height: 300px;
width: 300px;
background: red;
float: left;
}
.b{
height: 300px;
width: 300px;
background: blue;
float: right;
}
.fa{
/* 浮动
浮动的元素会脱离原本的文档流,会造成父元素的高度坍塌
包围平图片和文本的div不占领空间,使用了浮动元素,后面紧跟它的元素错乱
*/
height: 800px;
width: 800px;
background: greenyellow;
/* 清除浮动 */
clear: both;
}
li{
list-style: none;
width: 100px;
height: 30px;
float: left;
background: red;
/* position: fixed; */
}
</style>
浙公网安备 33010602011771号