web应用课: css
讲义: 2. CSS - AcWing
一. 样式定义方式
-
内部样式表:
一般写在head, 但也可以写在任意位置, 只要在应用区域之前即可
{:width=”400px”}
-
外部样式表
在css文件:
p {
width: 50px;
}
.big {
width: 500px;
}
在html文件:
注意: 这里的href, 最好自己手打, 直接复制容易出现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>Document</title>
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body></body>
</html>
二. 选择器
1.伪类选择器:
应该叫状态选择器:
-
有没有被选中, 有没有被点击, 有没有被长按, 等等
-
位置,
-
当前链接链接跳转
2. 通配符选择器:
应该叫属性选择器: 查看是否具有某些属性, 也可以是选择全部
3. .伪元素选择器:
应该叫内容选择器: 修改添加第一或者最后一个字, 等等
三. 颜色
屏幕颜色都是由R(红)G(绿)B(蓝)组成, 每一种取0~255, 16位数(二进制)可以拆成两个8位数(0~16),
11, 12, 13, 14, 15 分别用 A, B, C, D, E, F 表示, 总共6位
四. 文本及其他(块)
1. 利用行高实现垂直居中:
每个字都是写在每一行中间, 当设置行高等于字所在div(块)的高度时, 便可实现居中
2. 实现多个样式:
逗号隔开, 分号结尾, 这里举例文字阴影:
div{
text-show: -5px -5px 2px grey,
5px -5px 2px red;
}
3. em 与 % 的区别:
%如果是最外的div那么, 此时父元素指的是body
在文本中区别不大, 但是在”块”中区别比较大, 例如:
<div style="height: 5em; background-color: aqua;">
第一
<div style="height: 200%; background-color: black;">
第二
</div>
</div>
<div style="height: 5em; background-color: aqua;">
第一
<div style="height: 2em; background-color: black;">
第二
</div>
</div>
五. 字体
六. 背景
1. 可以添加多张图片:
添加逗号隔开
2. 设置背景图片大小:
可以用百分比, 默认位置是左上角;
全覆盖: cover: 宽高取max, contain: 宽高取min, %: 自动拉伸
设置透明度: 除了rgba, 还可以设置opacity的值
七. 边框
1.分别设置各边:
四个参数: 对应上右下左
两个参数: 对应上右, 没有的取对边
三个参数:对应上右下, 没有的取对边
一个参数: 指全部
2. 设置圆角:
多少px, 是指以多少px为半径, %同理; 四角顺序则是:0, 1, 2, 3
{:width=”400px”}
八. 元素展示格式
九. 内边距与外边距
1.分别设置各边:
四个参数: 对应上右下左
两个参数: 对应上右, 没有的取对边
三个参数:对应上右下, 没有的取对边
一个参数: 指全部
参数如果是%, 则表示的是父元素宽度的百分比
2.外边距 “塌陷”解决方法:
(1)父元素没有上边框和padding时,后代元素的margin-top会溢出:
① border-top: 1px solid;
② padding-top: 1px;
③ overflow hiden;
④ 加上一个伪元素: (最佳)
.div-outer::before{
content: "";
display: table;
}
(2)相邻上下元素, 上面元素有下边的外边距, 下面元素有上边的外边距:
如图: 上下边距会取max{:width=”400px”}
解决方法: 定好以下边距为主, 即上下设置边距, 仅设置下边距
左右不会出现这种重叠的情况, 只会相加
3. 外边距auto实现不了竖直居中:
margin: auto;
四方向都用auto, 只能实现水平居中
4. 矩形默认模型下, 宽度计算方法:
宽度 = 块宽度 + 内边距 + 边框
width = content + padding + border
十. 盒子模型
十一. 位置
sticky:
课程视频: 47 : 36 ~ 50 : 50
十二. 浮动
1. 作用:
与display: inline-block;
的功能一样, 都是让 ‘块’ 自动补齐一行;
但是与display: inline-block;
不同的是,
display: inline-block;
块与块之间会有空隙:
{:width=”400px”}
而float
则不会有这样的影响:
{:width=”400px”}
2. float参数:
left: 浮动, 且左对齐
right: 浮动, 且右对齐
3. clear:
某个 ‘块’ 受到其他浮动块影响时使用
clear前: {:width=”200px”} clear后: {:width=”200px”}
十三. flex布局
1. css默认摆放:
从左到右沿主轴摆放, 不换行.
如下: 从左到右称为主轴, 从上到下称为交叉轴 (块轴)(侧轴)
{:width=”400px”}
2. align-items:
(1) flex-start: (上对齐){:width=”200px”}
(2) flex-end: (下对齐){:width=”200px”}
(3)center: (所有行均匀分布在中间) {:width=”200px”}
3. align-items 与 align-content 的区别:
记忆: items行与行均匀分布, content则不均匀
体现如下:
(1) items: {:width=”200px”} content: {:width=”200px”}
(2) items: {:width=”200px”}
content: {:width=”200px”} (居中效果消失)
4. flex实现水平, 竖直居中:
(1) 之前办法:
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%;
transfrom: translateY(50%); /*竖直居中*/
原理:{:width=”200px”}
(2) flex实现:
display: flex;
justify-content: center;
align-items: center;
5. flex-grow与flex-shrink:
表示放大与缩小速度, 与比例有关, 取非负值, 小数也可以;
例如flex-grow红块1,绿块0.1: {:width=”200px”}
6. flex-basis:
调初始宽度的大小
十四. 响应式布局
1. 当用计算去算width的%时:
width: calc(100% * x / y)
x: 占多少份, y: 一共分多少份
2. 使用Bootstrap
(1) 下载并解压包
(2) 将内容写到<form></form>
里
(3) 将一行分为12份 (因为12的因数比较多), 然后可以在div里写 class="xx-n"
,
xx指大小, 有xs, sm, md, lg, xl; 对应屏幕大小
n指占多少份
(4) 例如:
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
好用心啊dalao,orz
没有啦,其实这个只是y总讲义的补充,复习的话还是要看两个