CSS笔记

CSS

使用

注意

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

行内样式

• 只修改一个标签

<img src="./static/images/logo.png" alt="logo" style="width: 300px;">

内部样式

• 修改一个页面的一类标签
• border-radius：将边角变圆弧

<style type="text/css">
    img {
        width: 600px;
        border-radius: 5%;
    }
</style>

外部样式表

引入

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

CSS

p {
    width: 100px; 
    height: 100px;
    font-size: medium;
    background-color: lightblue;
}

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

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

选择器

标签选择器

p {
    height: 100px;
    font-size: medium;
    background-color: lightblue;
}

ID选择器

• 一个id只对应一个标签
• css中#开头

<p id="my-id">id</p>
#my-id {
    color: red;
    width: 50px;
    height: 30px;
}

类选择器class

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

伪类选择器

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

链接

<div class="effect"></div>

• hover表示当鼠标悬停在上面的情况下
• transform scale表示大小变化
• transition表示该变化完成的时间

.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

<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

p:target {
    color: orange;
    transform: scale(1.2);
    transition: 300ms;
}

复合选择器

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]

伪元素选择器

/* 每个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选择器 < 行内样式表
• 权重 > 次序

/* 将height临时设置为最高优先级 */
p {
    width: 300px;
    height: 300px !important; 
}

颜色

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

文本/文字

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

对齐

水平居中

h4 {
    text-align: center;
}

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

竖直居中

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

单位

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

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

字间距

letter-spacing: 0.1em;

缩进

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

文本修饰

MDN搜索text-decoration

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

文本阴影

• x方向偏移
• y方向偏移
• 模糊半径(可省)
• 阴影颜色

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：引入外部字体

背景

.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;
}

边框

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

展示格式

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

display

display: inline;
display: block;
display: inline-block;

block

• 独占一行
• width: 100%

inline

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

inline-block

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

overflow

设置超出部分的内容

/* 超出部分使用滚轮 */
overflow: auto;
/* 隐藏超出部分 */
overflow: hidden;
/* 关闭横向滚轮 */
overflow-x: hidden;
/* 关闭纵向滚轮 */
overflow-y: hidden;

text-overflow

/* 超出部分使用...代替（用户名过长） */
text-overflow: ellipsis;

设置超出部分换行

/* 数字过长，自动换行 */
word-wrap: normal;
/* 默认以单词为单位换行，但是数字会被认为是一个单词无法触发换行，所以改为break-all */
word-break: break-all;

边距

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

外边距

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

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

注：

• 没有提供默认使用对面的值
• 父元素没有定义边框的话会与子元素合并使用，可以对父元素使用如下代码

.div-outer::before {
    content: "";
    display: table;
}

内边距

padding: 20px 20px 30px 40px;

盒子模型

• content-box：默认选项，修改border和padding会改变元素大小；
• border-box：修改border和padding不会改变元素大小

box-sizing: border-box;

布局

position

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

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

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

浮动

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

flex布局

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

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

排列方式

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布局

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

.calculator {
  /* grid布局 */
  display: grid;
}

设置列数和列宽

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

设置行高

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

设置间隔

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

设置占据多列

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

对齐方式

水平对齐

justify-content

• flex-start：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐

竖直对齐

align-items

• flex-start：主轴始端对齐(默认)
• flex-end：主轴末端对齐
• center：居中
• strech：铺展(元素未定义高度的前提)

align-content

• 竖直方向元素之间没有空隙
• 只有一行无法居中，可以使用align-items

通用对齐

/* 居中，宽度修改之后才会生效，否则如果元素本身就占一行，会导致其无法居中 */
  margin: 0 auto;

内部元素属性

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

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

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

/* 弹性变大和缩小，不换行 */
flex: auto;

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

响应式布局之Bootstrap

下载地址：Bootstrap

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

media查询

/* 大于等于768px的情况 */
@media (min-width: 768px) {
    .card {
        background-color: lightgreen;
    }
}

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

引入

<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
注意：如果需要使用折叠功能（宽度过小自动将导航栏折叠，可点击展开），需要将Bootsstrap的js也引入进来

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

注意：

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

栅格

<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>

表单

<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>