css入门学习
2024-09-30 17:01:02 #css

html

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。

css

层叠样式表（Cascading Style Sheets，缩写为 CSS）是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言）文档的呈现方式。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

selector

  1. 标签，类选择器
1
2
<div class="red">red</div>
<div class="orange">orange</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 标签选择器 */
div {
    font-size: 30px;
}

/* 类选择器 */
.red {
    width: 100px;
    height: 100px;
    background-color: red;
}
.orange {
    width: 200px;
    height: 200px;
    background-color: orange;
}

代码效果：

  1. 通配符，id选择器
1
2
<div id="text">id选择器</div>
<div>通配符选择器</div>
1
2
3
4
5
6
7
* {
    font-size: 20px;
}

#text {
    color: red;
}

代码效果：

  1. 复合选择器
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
<div>
    <span>
        后代选择器--孩子
    </span>
    <div>
        <span>后代选择器--孙子</span>
    </div>
</div>

<div>
    <p>
        子代选择器
    </p>
</div>

<div class="class">
    div标签1
</div>
<div>
    div标签2
</div>
<p class="class">p标签</p>

<span class="class">
    伪类选择器测试
</span>
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
30
31
32
33
34
35
36
/* 后代选择器 */
div span {
    background-color: skyblue;
}

/* 子代选择器 */
div>p {
    color: red;
}

/* 交集选择器 */
div.class {
    width: 100px;
    height: 100px;
    background-color: skyblue;
}

/* 伪类选择器 */
span.class:hover {
    font-size: 30px;
    color: red;
}
/* 结构伪类选择器 */
li:last-child {
    background: #ff0;
}

li:nth-child(3) {
    background: #0f0;
}

/* 伪元素选择器 */
li::before {
    background: pink;
    counter: "asdas"
}

代码效果：

tip 选中标签的范围越大，优先级越低。

font

1
2
3
4
5
6
7
8
9
<p class="font1">测试字体一</p>
<div class="font2">测试字体二</div>
<h1>标题一</h1>

<div class="img">
    <img src="https://i2.hdslb.com/bfs/archive/8f320867ca3628b0d87e485c6d95193ac7ee5c21.jpg@336w_190h_1c_!web-video-rcmd-cover.avif">
</div>

<a href="#">超链接去除下划线</a>
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
30
31
32
33
34
.font1 {
    /* 字体大小必须得有单位，不然不生效，浏览器默认字体大小为16px */
    font-size: 20px;
    /* 字体粗细 */
    font-weight: 700;
    /* 斜体 */
    font-style: normal;
    /* 行高 */
    line-height: 20px;

    /* 简写 是否倾斜，是否加粗，字号(必须)/行高 字体(必须) */
    /* font: italic 100 20px/100px 楷体; */
    /* 文本缩进 */
    text-indent: 3em;
}

.font2 {
    height: 100px;
    background-color: skyblue;
    line-height: 100px;
}

h1 {
    /* 文本对齐 */
    text-align: center;
}

.img {
    text-align: center;
}

a {
    text-decoration: none;
}

代码效果

background

描述 属性 属性值
背景色 background-color
背景图 background-image url()
背景图平铺方式 background-repeat no-repeat,repeat, repeat-x,repeat-y
背景图位置 background-position top,bottom,left,right,center
背景图缩放 background-size contain,cover
背景图固定 background-attachment fixed
背景复合属性 background 各个属性按空格隔开，不区分顺序 
1
2
3
<div>
    div标签
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
div{
    width: 370px;
    height: 370px;

    background-color: pink;
    background-image: url(https://scpic3.chinaz.net/files/default/imgs/2023-10-10/9a81121313435261_s.jpg);
    /* background-repeat: no-repeat; */
    background-repeat: no-repeat;

    /* 默认位置 */
    background-position: left top;
  	background-position: 50px;
    background-position: center;

    /* 图片和盒子的宽高一样停止缩放 */
    background-size: contain;
    /* 图片完全覆盖盒子 */
    background-size: cover;
    /* 图片与盒子宽比 */
    background-size: 110%;
    /* 固定背景图 */
    background-attachment: fixed;
}

关键字设置背景图片位置，可以颠倒顺序。只写一个关键字，另外一个为居中。数字只写一个值表示水平方向，垂直方向为居中。

代码效果：

show-mode

  1. 块级元素
1
2
<div class="red">块级元素div标签</div>
<div class="orange">块级元素div标签</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
div,
img {
    width: 100px;
    height: 100px;
}

.red {
    background-color: red;
}

.orange {
    background-color: orange;
}

块级独占一行，宽度默认为父级宽度100%，加宽高生效

  1. 行内元素
1
2
<span class="pink">行内元素</span>
<span class="skyblue">span标签</span>
1
2
3
4
5
6
.skyblue {
    background-color: skyblue;
}
.pink {
    background-color: pink;
}

行内元素一行共存多个，加宽高不生效

  1. 行内块元素
1
2
<img src="https://scpic3.chinaz.net/files/default/imgs/2023-10-10/9a81121313435261_s.jpg">
<img src="https://scpic3.chinaz.net/files/default/imgs/2023-10-10/9a81121313435261_s.jpg">
1
2
3
4
img {
    width: 100px;
    height: 100px;
}

行内块元素一行共存多个，宽高由内容决定，加宽高生效

代码效果

  1. 转化显示模式

属性名： display

属性值 效果
block 块级
inline-block 行内块
inline 行内

box-model

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
div {
    width: 200px;
    height: 200px;
    background: pink;

    /* 内边框 */
    padding: 20px;

    /* 边框线 */
    border: 1px dashed #000;
    border-top: 2px solid #000;
    border-bottom: 2px dotted #0f0;
    border-left: 2px dashed #fff;
    border-right: 2px solid orange;

    /* 外边框 */
    margin: 20px;
    margin: 0 auto;

    /* 盒子尺寸，内减模式，浏览器自动计算 */
    box-sizing: border-box;

      /* 圆角设置 */
    border-radius: 20px;
}

盒子的内边框属性可以通过最多四个简化参数由上到左顺时针设置，缺少的属性与它的对立面一致。padding和border会撑着盒子。两个垂直相邻盒子会合并在一起，如果配置了外边距，则会取两个盒子外边距的最大值。行内元素无法改变垂直边距，只能通过行高设置。

代码效果：

image-20240930011150554 
1
2
3
4
5
6
7
8
9
.button {
    width: 100px;
    height: 40px;
    margin: 0 auto;
    background-color: skyblue;
    border-radius: 10px;

    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.5);
}

代码效果

float

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

.product {
    width: 550px;
    height: 300px;
    margin: 40px auto;

    background-color: pink;
}

.left {
    width: 110px;
    height: 300px;
    float: left;


    background-color: skyblue;
}

.right {
    width: 435px;
    height: 300px;
    float: right;
}

.right li {
    width: 100px;
    height: 145px;
    float: left;
    margin: 0 5px;
    margin-bottom: 10px;

    background-color: orange;
}

.right li:nth-child(4n) {
    margin-right: 0px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="product">
    <div class="left"></div>
    <div class="right">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

代码效果：

清除浮动

  1. 额外标签法:在父元素内容的最后添加一个块级元素，设置CSS 属性 clear: both

  2. 单伪元素法

1
2
3
4
5
clearfix: :after {
  content: "";
  display: block;
  clear: both;
}
  1. 双伪元素法
1
2
3
4
5
6
7
8
9
clearfix::before,
clearfix::after {
  content: ""
  display: table;
}

clearfix::after {
  clear: both;
}
  1. 父元素添加 CSS 属性 overflow: hidden

flex

image-20241001010124588

主轴与侧轴对齐方式

1
2
3
4
5
<div class="box">
    <div></div>
    <div></div>
    <div></div>
</div>

主轴对齐(默认左对齐)： justify-content

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.box {
    height: 120px;
    display: flex;
    	/* 左 */
    justify-content: flex-start;
    	/* 右对齐 */
    justify-content: flex-end;
      /* 居中对齐 */
    justify-content: center;

  
    justify-content: space-between;
    justify-content: space-around;
    justify-content: space-evenly;
    border: 1px solid pink;
}

.box div {
    width: 130px;
    height: 60px;
    background-color: orange;
}

flex-start

flex-end

center

space-between

space-around

space-evenly

侧轴对齐: align-items对齐全部元素， align-self 对齐选中元素

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
.box {
    height: 120px;
    display: flex;
    justify-content: center;

    align-items: center;
    align-items: flex-start;
    align-items: flex-end;
    border: 1px solid pink;
}

.box div:nth-child(2) {
    align-self: center;
}

.box div:nth-child(3) {
    align-self: start;
}

.box div {
    width: 130px;
    height: 60px;

    background-color: orange;
}

align-items: center;

align-items: flex-start

align-items: flex-end

align-self

修改主轴方向： flex-direction: column; 修改主轴方向为水平方向，侧轴方向自动变为垂直方向。

1
2
3
4
<div class="media">
    <div></div>
    <span>媒体</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.media {
    width: 100px;
    height: 100px;
    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: 1px solid black;
}

.media div {
    width: 30px;
    height: 30px;
    background-color: pink;
}

.media span {
    font-size: 15px;
}

代码效果：

postion

定位模式 属性值 是否脱标 显示模式 参照物
相对定位 relative 否 保持标签原有显示模式 自己原来位置
绝对定位 absolute 是 行内块特点 1. 已经定位的祖先元素 2. 浏览器可视区
固定定位 fixed 是 行内块特点 浏览器窗口

sprites

盒子尺寸与小图尺寸相同

  1. 设置盒子背景图为精灵图
  2. 添加 background-position 属性，改变背景图位置
  • 3.1 测量小图片左上角坐标
  • 3.2 取负数坐标为 background-position 属性值（向左上移动图片位置）

iconfont

展示的是图标，本质是字体,在网页中添加简单的、颜色单一的小图标。

优点

  • 灵活性：灵活地修改样式，例如尺寸、颜色等
  • 轻量级：体积小、渲染快、降低服务器请求次数
  • 兼容性：几乎兼容所有主流浏览器
  • 使用方便：先下载再使用

vertical-align

属性值 效果
baseline 基线对齐（默认）
top 顶部对齐
middle 居中对齐
bottom 底部对齐

transition

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果属性名：transition（复合属性）

属性值：过渡的属性 花费时间（s）

提示：

  • 过渡的属性可以是具体的 CSS 属性
  • 也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
  • transition 设置给元素本身
1
2
3
4
5
6
7
8
9
10
11
div {
    width: 100px;
    height: 50px;
    transition: all 0.5s;
    background-color: pink;
}

div:hover {
    width: 100%;
    background-color: #af2f2f;
}

透明度 opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0-1

  • 0：完全透明（元素不可见）
  • 1：不透明
  • 0-1之间小数：半透明

光标类型 cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

属性值

属性值 效果
default 默认值，通常是箭头
pointer 小手效果，提示用户可以点击
text 工字型，提示用户可以选择文字
move 十字光标，提示用户可以移动

transform

属性 效果 参数
translate 平移 Translate()只写一个值，表示沿着 X轴移动
像素单位数值,百分比（参照盒子自身尺寸计算结果
rotate 旋转 角度单位是 deg，取值为正，顺时针旋转，取值为负，逆时针旋转。旋转会改变坐标轴位置
transform-origin 改变转换原点 方位（left. top、 right. bottom.center）像素单位数值，百分比
scale 缩放 设置一个值，表示X轴和Y轴等比例缩放，取值大于1表示放大，取值小于1表示缩小
skew 倾斜
rotate3d 3d旋转 需在父类上添加 perspective 属性

平移示例效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.father {
    width: 200px;
    height: 100px;
    margin: 0 auto;
    border: 1px solid black;
}

.son {
    width: 100px;
    height: 40px;
    transition: all 0.5s;
    background-color: pink;
}

.father:hover .son {
    transform: translate(100px,100px);
}
1
2
3
<div class="father">
    <div class="son"></div>
</div>

旋转示例效果 

1
2
3
4
5
6
<div>
  <div class="rotate-1">
  </div>
  <div class="rotate-2">
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
div>div {
    width: 50px;
    height: 50px;
    background-color: skyblue;
    transition: all 3s;
}

div .rotate-1:hover {
    transform: translateX(500px) rotate(720deg);
}

div .rotate-2:hover {
    transform: translateX(500px) rotate(-720deg);
}
**改变转换原点示例效果** 
1
2
3
4
5
6
7
8
9
10
11
.origin {
    width: 50px;
    height: 50px;
    background-color: skyblue;
    transition: all 10s;
    transform-origin: right bottom;
}

.origin:hover {
    transform: rotate(3600deg)
}

缩放效果示例

1
2
3
4
5
6
7
8
9
10
11
.scale {
    width: 50px;
    height: 50px;
    background-color: pink;
    transition: all 0.5s;
    margin: 0 auto;
}

.scale:hover {
    transform: scale(2);
}

倾斜效果示例

1
2
3
4
5
6
7
8
9
10
11
.skew {
    width: 50px;
    height: 50px;
    background-color: pink;
    transition: all 0.5s;
    margin: 0 auto;
}

.skew:hover {
    transform: skew(40deg);
}

3d旋转

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.box-3d {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    perspective: 1000px;
}

.box-3d div {
    width: 50px;
    height: 50px;
    margin-top: 20px;
    background-color: pink;
    transition: all .3s;
}
.box-3d>.bx:hover {
    transform: rotateX(40deg);
}
.box-3d>.by:hover {
    transform: rotateY(40deg);
}
.box-3d>.bz:hover {
    transform: rotateZ(40deg);
}

立体呈现transform-style

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
30
31
.cube {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px auto;

    transition: all 2s;
    transform-style: preserve-3d;
}

.cube>div {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
}

.cube > .front {
    transform: translateZ(100px);
    background-color: pink;
}

.cube > .back {
    transform: translateZ(-100px);
    background-color: skyblue;
}

.cube:hover {
    transform: rotateY(260deg);
}

gradient

线性渐变

1
2
3
4
5
6
7
8
9
10
11
div {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 50px;
    background-image: linear-gradient(
        30deg,
        pink,
        skyblue
    );
}

径向渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.radial {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 50px;

    background-image: radial-gradient(
        50px at center center,
        red,
        pink
    );

    /* 椭圆 */
    background-image: radial-gradient(
        50px 20px at center center,
        red,
        rgba(231, 127, 162, 0.2)
    );
}

animation

image-20241123231239639

过渡：实现两个状态间的变化过程

动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；

动画拆分属性 作用 取值
animation-name 动画名称
animation-duration 动画时长
animation-delay 延迟时间
animation-fill-mode 动画执行完毕时状态 forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function 速度曲线 steps（数字）：逐帧动画
animation-iteration-count 重复次数 infinite为无限循环
animation-direction 动画执行方向 alternate为反向
animation-play-state 暂停动画 paused为暂停，通常配合：hover使用

跑马灯效果示例

1
2
3
4
5
6
7
8
<div class="box">
    <ul>
      	<!-- 省略多个li标签 -->
        <li>
            <div></div>
        </li>
    <ul>
</div>
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
30
31
32
33
34
35
36
37
38
39
40
41
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.box {
    width: 250px;
    height: 70px;
    margin: 20px auto;
    border-radius: 5px;
    overflow: hidden;
}

.box>ul {
    display: flex;
    animation: move 3s infinite linear;
}

.box:hover>ul {
    animation-play-state: paused;
}

@keyframes move {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(-350px);
    }
}

.box>ul>li>div {
    width: 50px;
    height: 70px;
}
/* 省略多个li标签 */
.box>ul>li:nth-child(1) {
    background-color: pink;
}

精灵动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.elf {
    width: 140px;
    height: 140px;
    margin: 20px auto;
    border-radius: 5px;
    background-image: url('https://hougen.oss-cn-guangzhou.aliyuncs.com/blog-img/1732383377-bg.png');
    animation: run .8s steps(12) infinite;
}

@keyframes run {
    from{
        background-position: 0 0;
    }
    to{
        background-position: -1680 0;
    }
}
上一页
2024-09-30 17:01:02 #css