web 应用课: css

一. 样式定义方式

内部样式表:

一般写在 head, 但也可以写在任意位置, 只要在应用区域之前即可

外部样式表

在 css 文件:
p {
width: 50px;
}

.big {
width: 500px;
}
在 html 文件:
注意: 这里的 href, 最好自己手打, 直接复制容易出现 css 外部样式怎么都不显示的情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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(蓝)组成, 每一种取 0255, 16 位数(二进制)可以拆成两个 8 位数(016),

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

在文本中区别不大, 但是在”块”中区别比较大, 例如:

1
2
3
4
5
6
7
8
9
10
11
12
<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

八. 元素展示格式

九. 内边距与外边距

1.分别设置各边:

四个参数: 对应上右下左

两个参数: 对应上右, 没有的取对边

三个参数:对应上右下, 没有的取对边

一个参数: 指全部

参数如果是%, 则表示的是父元素宽度的百分比

2.外边距 “塌陷”解决方法:

(1)父元素没有上边框和 padding 时，后代元素的 margin-top 会溢出:
① border-top: 1px solid;

② padding-top: 1px;

③ overflow hiden;

④ 加上一个伪元素: (最佳)

1
2
3
4
.div-outer::before{
    content: "";
    display: table;
}

(2)相邻上下元素, 上面元素有下边的外边距, 下面元素有上边的外边距:
如图: 上下边距会取 max

解决方法: 定好以下边距为主, 即上下设置边距, 仅设置下边距

左右不会出现这种重叠的情况, 只会相加

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;块与块之间会有空隙:

而 float 则不会有这样的影响:

2. float 参数:

left: 浮动, 且左对齐

right: 浮动, 且右对齐

3. clear:

某个 ‘块’ 受到其他浮动块影响时使用

clear 前: clear 后:

十三. flex 布局

1. css 默认摆放:

从左到右沿主轴摆放, 不换行.

如下: 从左到右称为主轴, 从上到下称为交叉轴 (块轴)(侧轴)

2. align-items:

(1) flex-start: (上对齐)

(2) flex-end: (下对齐)
(3)center: (所有行均匀分布在中间)

3. align-items 与 align-content 的区别:

记忆: items 行与行均匀分布, content 则不均匀

体现如下:

(1) items: content:

(2) items:

content: (居中效果消失)

4. flex 实现水平, 竖直居中:

(1) 之前办法:

margin: 0 auto; /水平居中/
position: relative;
top: 50%;
transfrom: translateY(50%); /竖直居中/
原理:

(2) flex 实现:

display: flex;
justify-content: center;
align-items: center;

5. flex-grow 与 flex-shrink:

表示放大与缩小速度, 与比例有关, 取非负值, 小数也可以;

例如 flex-grow 红块 1,绿块 0.1:

6. flex-basis:

调初始宽度的大小

十四. 响应式布局

1. 当用计算去算 width 的%时:

width: calc(100% * x / y)

x: 占多少份, y: 一共分多少份

2. 使用 Bootstrap

(1) 下载并解压包

(2) 将内容写到

里

(3) 将一行分为 12 份 (因为 12 的因数比较多), 然后可以在 div 里写 class=”xx-n”,

xx 指大小, 有 xs, sm, md, lg, xl; 对应屏幕大小

n 指占多少份

(4) 例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>