CSS

使用

注意

  • 用冒号赋值
  • 分号结尾
  • 要写单位px
  • 对行内元素,宽度默认为整行,高度默认为0
  • css多属性顺序:上-右-下-左,没取的一项取对边值

行内样式

  • 只修改一个标签
1
<img src="./static/images/logo.png" alt="logo" style="width: 300px;">

内部样式

  • 修改一个页面的一类标签
  • border-radius:将边角变圆弧
1
2
3
4
5
6
<style type="text/css">
img {
width: 600px;
border-radius: 5%;
}
</style>

外部样式表

引入

1
<link rel="stylesheet" href="./static/css/style.css" type="text/css">

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
p {
width: 100px;
height: 100px;
font-size: medium;
background-color: lightblue;
}

.color,
.big {
background-color: lightgreen;
}

.big {
width: 70px;
height: 70px;
}

选择器

标签选择器

1
2
3
4
5
p {
height: 100px;
font-size: medium;
background-color: lightblue;
}

ID选择器

  • 一个id只对应一个标签
  • css中#开头
1
2
3
4
5
6
<p id="my-id">id</p>
#my-id {
color: red;
width: 50px;
height: 30px;
}

类选择器class

  • 跨标签
  • css中.开头
  • 同时定义多个class属性使用逗号隔开
  • 同时使用多个class使用空格隔开

伪类选择器

  • 状态选择器
  • idclass都可以使用
  • :link对应未点击的展示
  • :visited对应点击后的展示
  • :hover对应鼠标悬停的展示
  • :active对应鼠标按住的展示
  • :focus对应输入框聚焦(开始输入)的展示

链接

1
<div class="effect"></div>
  • hover表示当鼠标悬停在上面的情况下
  • transform scale表示大小变化
  • transition表示该变化完成的时间
1
2
3
4
5
.effect:hover {
background-color: lightcoral;
transform: scale(1.1);
transition: 200ms;
}

位置

  • num是从该标签所处的父节点开始计算
  • p:nth-child(2):遍历每一个p标签,判断其是否满足num=2
  • p:nth-child(odd):遍历每一个p标签,判断其是否满足num为奇数
  • p:nth-child(even):遍历每一个p标签,判断其是否满足num为偶数
  • p:nth-child(3n):遍历每一个p标签,判断其是否满足num为3的倍数
  • p:nth-child(a*n + b):遍历每一个p标签,判断其是否满足num=a*n+b(n为非负整数)

下面的代码会选中p2和p4

1
2
3
4
5
6
7
8
9
10
11
12
<div>
<p>p1</p>
<p>p2</p>
</div>
<div>
<p>p3</p>
<p>p4</p>
</div>
p:nth-child(2) {
background-color: blanchedalmond;
font-size: 30px;
}

target表示该标签被选中:

  • 该元素会被放到页面最顶端(如果下面内容足够的话)
  • url会变为http://dqywy.top#my-id
1
2
3
4
5
p:target {
color: orange;
transform: scale(1.2);
transition: 300ms;
}

复合选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
a, 
p,
div {
width: 100px;
color: red;
height: 50px;
}
p:hover,
div:hover {
background-color: lightblue;
}
/* div标签且同时具有big类和color类才会触发 */
div.big.color {
transform: scale(1.2);
background-color: lightblue;
}

/* id为my-item且同时具有big类和color类才会触发 */
#my-item.big.color {
transform: scale(1.2);
background-color: lightblue;
}

通配符选择器

  • *
  • p[id]:具有id属性的p标签
  • p[type=text]

伪元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 每个p标签的第一个字符 */
p::first-letter {
color: red;
}

/* 每个p标签的第一行 */
p::first-line {
color: red;
}

/* 被选中的p标签 */
p::selection {
color: green;
background-color: black;
}

/* h1标签的前后分别添加内容 */
h1::before {
content: "《";
color: red;
}
h1::after {
content: "》";
color: red;
}

优先级

  • 先来后到:后面定义的样式会覆盖前面定义的样式
  • 越具体越优先:全局选择器 < 标签选择器 < class选择器 < id选择器 < 行内样式表
  • 权重 > 次序
1
2
3
4
5
/* 将height临时设置为最高优先级 */
p {
width: 300px;
height: 300px !important;
}

颜色

  • 单词
  • 16进制
  • RGB
  • RGBA
  • 取色:网页内ctrl+shift+c快速选中;QQ截图+ctrl+c复制16进制色号

文本/文字

子标签会继承父标签的文本属性

对齐

水平居中

1
2
3
4
5
6
7
8
h4 {
text-align: center;
}

/* 左右对齐,多行起作用 */
.mydiv {
text-align: justify;
}

竖直居中

1
2
/* 行高 */
line-height = 元素高度

单位

如果要兼容价大屏幕就要少用固定单位px

  • px
  • %:相对于父元素的比例
  • em:相对于当前属性的倍数
  • rem:相对于根元素属性的倍数
  • vw:当前屏幕宽度的百分比
  • vh:当前屏幕高度的百分比

字间距

1
letter-spacing: 0.1em;

缩进

1
2
/* 两个字 */
text-indent: 2em;

文本修饰

MDN搜索text-decoration

1
2
/* 去掉链接下划线 */
text-decoration: none;

文本阴影

  • x方向偏移
  • y方向偏移
  • 模糊半径(可省)
  • 阴影颜色
1
2
3
4
5
text-shadow: 1.5px 1px 2px lightcoral;

/* 可以操作多次 */
text-shadow: 1.5px 1px 2px lightcoral,
-1.5px -1px 2px lightcoral;

字体

  • font-size
  • font-style
  • font-weight: 数值没有单位,不是px
  • font-family: monospace 等宽字体
  • font-face:引入外部字体

背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.mydiv {
width: 700px;
height: 500px;
/* 背景图片 */
background-image: url(../images/background.jpg),
url(../images/logo.jpg);
/* 背景使用渐变色 */
background-image: linear-gradient(lightblue, lightcoral);
/* 背景大小 */
/* 50% 100% */
background-size: 700px 500px,
cover;
/* 背景颜色 */
background-color: lightblue;
/* 图片是否重复 */
/* repeat-x */
/* repeat-y */
/* no-repeat */
background-repeat: no-repeat;
/* 背景位置 */
/* right top */
/* left bottom */
background-position: left top,
center top;
/* 背景是否随标签一起在页面滚动 */
background-attachment: fixed;
/* 背景透明度, 对颜色和图片都会起作用 */
opacity: 0.5;
}

边框

1
2
3
4
5
6
7
border-style: solid;
border-width: 4px;
border-color: black;
/* radius可以定义很多不规则图形-MDN */
border-radius: 15px;
/* 边框重合-不常用 */
border-collapse: collapse;

展示格式

注意:元素宽度和高度=content+内边距padding+边框border+外边距margin

display

1
2
3
display: inline;
display: block;
display: inline-block;

block

  • 独占一行
  • width: 100%

inline

  • 共用一行
  • 宽度=内容宽度
  • 设置widthheight没有作用
  • 只用水平方向的内外边距有作用

inline-block

  • 常见:img
  • 可以共占一行
  • 宽高可设置

overflow

设置超出部分的内容

1
2
3
4
5
6
7
8
/* 超出部分使用滚轮 */
overflow: auto;
/* 隐藏超出部分 */
overflow: hidden;
/* 关闭横向滚轮 */
overflow-x: hidden;
/* 关闭纵向滚轮 */
overflow-y: hidden;

text-overflow

1
2
/* 超出部分使用...代替(用户名过长) */
text-overflow: ellipsis;
设置超出部分换行
1
2
3
4
/* 数字过长,自动换行 */
word-wrap: normal;
/* 默认以单词为单位换行,但是数字会被认为是一个单词无法触发换行,所以改为break-all */
word-break: break-all;

边距

注意:避免在两个方向上对同一边距的定义

外边距

该属性定义的是外边距至少是多少——相邻的外边距取最大值

  • margin
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

  • 没有提供默认使用对面的值
  • 父元素没有定义边框的话会与子元素合并使用,可以对父元素使用如下代码
1
2
3
4
.div-outer::before {
content: "";
display: table;
}

内边距

1
padding: 20px 20px 30px 40px;

盒子模型

  • content-box默认选项,修改border和padding会改变元素大小;
  • border-box:修改border和padding不会改变元素大小
1
box-sizing: border-box;

布局

position

https://www.acwing.com/blog/content/16282/

元素重叠可以使用z-index控制重叠次序,需要将position修改为非static

  • position: static:默认
  • position: relative:相对于默认的位置使用top: 10pxright: px等改变位置,并且其默认位置会保留
  • position: absolute:相对于第一个非static的父元素,原来的默认位置会剔除,随页面滚动
  • position: fixed:相对于第一个非static的父元素,原来的默认位置会剔除,始终固定在视窗上,不随页面滚动
  • postion: sticky

浮动

1
2
3
float: left/right;
/* 清除错误浮动 */
clear: left/right/both;

flex布局

注意:控制flex布局是改变父元素的display属性, inline-block等是改变当前元素

  • 水平-主轴
  • 竖直-交叉轴

排列方式

1
2
3
4
5
6
7
display: flex;
/* 默认row row-reverse(从右往左) column column-reverse(从下往上) */
flex-direction: row;
/* 默认nowrap wrap(换行) wrap-reverse */
flex-wrap: wrap;
/* 上面两个的缩写,默认row nowrap */
flex-flow: column wrap;

grid布局

栅格布局,将元素按照表格的样式布局

1
2
3
4
.calculator {
/* grid布局 */
display: grid;
}

设置列数和列宽

1
2
3
4
5
.calculator {
/* 一行几列, 每一列的宽度是多少 */
/* rem: 相对于根元素属性的倍数 */
grid-template-columns: repeat(4, 6rem);
}

设置行高

1
2
3
4
5
6
.calculator {
/* 行高:
第一行:最小为6rem,最大自适应调整
另外5行行高固定为4rem*/
grid-template-rows: minmax(6rem, auto) repeat(5, 4rem);
}

设置间隔

1
2
3
4
.calculator {	
/* 格子之间的间隔 */
gap: 3px;
}

设置占据多列

1
2
/* 从第1个格子开始,独占四个格子,即让结果一栏独占一行 */
grid-column: 1 / span 4;

对齐方式

水平对齐
1
justify-content
  • flex-start:左对齐
  • flex-end:右对齐
  • center:居中
  • space-between:两端对齐
竖直对齐
1
align-items
  • flex-start:主轴始端对齐(默认)
  • flex-end:主轴末端对齐
  • center:居中
  • strech:铺展(元素未定义高度的前提)
1
align-content
  • 竖直方向元素之间没有空隙
  • 只有一行无法居中,可以使用align-items
通用对齐
1
2
/* 居中,宽度修改之后才会生效,否则如果元素本身就占一行,会导致其无法居中 */
margin: 0 auto;

内部元素属性

排列方式和对齐方式都是父元素的属性,下列是定义在子元素的属性

  • order:元素优先级,越小越靠前
  • flex-grow: n:拥有该属性的元素随屏幕一同伸展,n越大,伸展占比越大
  • flex-shrink: n:缩小比例
  • flex-basis: 100px:元素的初始宽度,优先级高于width

上面的属性可以统一使用flex缩写

1
2
3
4
5
/* 弹性变大和缩小,不换行 */
flex: auto;

/* 不变大不缩小,不换行 */
flex: none;

响应式布局之Bootstrap

下载地址:Bootstrap

使用:在官网寻找适合的示例进行修改

media查询

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 大于等于768px的情况 */
@media (min-width: 768px) {
.card {
background-color: lightgreen;
}
}

/* 小于等于992px的情况 */
@media (max-width: 992px) {
.card {
background-color: lightcoral;
}
}

引入

1
2
<link rel="stylesheet" href="./static/third_party/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
<script src="./static/third_party/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>

使用React的话在index.js中引入Bootstrap
注意:如果需要使用折叠功能(宽度过小自动将导航栏折叠,可点击展开),需要将Bootsstrapjs也引入进来

1
2
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap';

注意:

  • 使用的时候要用包裹在container
  • row里面接的元素必须是col或如col-md-6

栅格

1
2
3
4
5
6
7
<div class="container">
<div class="row">
<div class="col col-md-6 col-sm-12 col-xs-12">用户名</div>
<div class="col col-md-6 col-sm-12 col-xs-12">密码</div>
<div class="col col-md-12 col-sm-12 col-xs-12">个人简介</div>
</div>
</div>

表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="container">
<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>
</div>