【web前端开发】CSS层叠样式介绍

css样式

分为三种：内部样式、内联样式、外部样式

内部样式 < style >

位置:在本文件内，标签外
代码：

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>Documenttitle>
head>
<style>
    p{
        color:red;
        text-align: center;
    }
style>
<body>
    <p>样式p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果：

内联样式 < style >

位置：在本文本内，标签内。
代码：

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

<body>
    <p style=" color:blue">样式p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13

效果：

外部样式 < link >

位置：在本文件外，标签外。
代码：

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>Documenttitle>
head>
    
    <link rel="stylesheet" href="1.css">
<body>
    <p>css 样式p>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

p{
    color: rebeccapurple;
    text-align: center;
}
1
2
3
4

效果：

在这里插入图片描述

应用范围

样式应用：

简单样式：内联样式、内部样式
复杂样式：外部样式

css文本属性

1.font-family 字体系列

在这里插入图片描述

2.font-size 字体大小 & em/px

作用：设置字体大小
单位：em、px
默认：1em = 16px
修改默认值：

原先：

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>Documenttitle>
head>
    
    <style>
        span{
            font-size: 2em;
        }
    style>
<body>
    <p>css 样式p>
    <span>font-size 文字span>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述
修改：

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>Documenttitle>
head>
    
    <style>
        *{
            font-size: 10px;
        }
        span{
            font-size: 2em;
        }
    style>
<body>
    <p>css 样式p>
    <span>font-size 文字span>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

3.font-weight 字体粗细

请添加图片描述

4.font-style字体样式

请添加图片描述

5.字体复合样式

请添加图片描述

6.color 字体颜色

请添加图片描述

7.text-align 对齐文本

在这里插入图片描述

8.text-decoration 装饰文本

请添加图片描述

9.text-indent 文本缩进

请添加图片描述

10.line-height 行间距

请添加图片描述

各种选择器

标签选择器

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>Documenttitle>
head>
<style>
    ul li{ 
        color: red;
    }
    .box{
        color:blue;
    }
    #username{
        color:yellow;
    }
style>
<body>
    <ul>
        <li>语文li>
        <li class="box">英语li>
        <li class="box" id="username">数学li>
    ul>
body>
html>
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

调用各种类型：

ul li调用对应的无序标签
‘ . ‘调用对应的class
’ # ‘调用对应的id

标签优先级：id选择器>class选择器>标签选择器

在这里插入图片描述

邻近选择器

作用：只选择邻近的一个
代码：

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>Documenttitle>
head>
<style>
    .box1+.box{
        color: red;
    }
style>
<body>
    <ul>
        <li class="box1">语文li>
        <li class="box">英语li>
        <li class="box" id="username">数学li>
    ul>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.box1+.box：

相对于box1的第一个box类型

效果：
在这里插入图片描述

兄弟选择器

作用：选择所有符合条件的
代码：

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>Documenttitle>
head>
<style>
    .box1~.box{
        color: red;
    }
style>
<body>
    <ul>
        <li class="box1">语文li>
        <li class="box">英语li>
        <li class="box" id="username">数学li>
    ul>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

效果：
在这里插入图片描述

伪类选择器

功能：
在这里插入图片描述
应用：

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>Documenttitle>
head>
<style>
    div :first-of-type{
        color:red;
    }
style>
<body>
    <div>
        <p>数学p>
        <p>英语p>
        <p>语文p>
        <p>物理p>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述
nth-of-type()注意点

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>Documenttitle>
    <style>
        p:nth-of-type(3){
            color:red;
        }
    style>
head>

<body>
    <div>
        <p>数学p>
        <p>英语p>
        <p>语文p>
        <p>物理p>
    div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

nth-of-type()前面应该改为p盒子,否则无效

盒子模型

概念

在这里插入图片描述

分类

在这里插入图片描述

常见属性

1.padding

在这里插入图片描述

2.margin

在这里插入图片描述

3.boder

在这里插入图片描述

position定位

补充知识-文档流

在这里插入图片描述

position属性

1.static–静态定位

需要使用top、right、left、bottem来进行定位

2.raletive–相对定位

根据自己的左上角顶点进行定位的

3.absolute–绝对定位

根据父元素左上角的顶点来进行定位的

注意：当子元素使用绝对定位时，父元素最好使用相对定位
（因为网页的最顶端还有一个空隙）

代码：

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>Documenttitle>
head>
<style>
    .static{
        position: static;
        width:200px;
        height:200px;
        border:10px solid #000;
    }

    .relative{
        position: relative;
        width:200px;
        height:200px;
        border:10px solid #000;
    }
    .absolute{
        position: absolute;
        width:200px;
        height:200px;
        border:10px solid #000;
    }

    .item{
        position: absolute;
        top:150px;
        width:50px;
        height:50px;
        background-color: blue;
    }
style>
<body>
    <div class="static">
        <div class="item">div>
    div>

    <div class="relative">
        <div class="item">div>
    div>

    <div class="absolute">
        <div class="item">div>
    div>
body>
html>
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
48
49
50
51

应用：
在这里插入图片描述

效果：

4.fixed定位

把某个元素固定在一个位置，并且该元素的位置不会随着网页滑动而变化

5.sticky定位

在这里插入图片描述

6.相对位置和绝对位置–居中设置

相对位置
在这里插入图片描述
绝对位置

背景属性

1.背景颜色

请添加图片描述

2.背景图片

请添加图片描述

3.背景平铺

请添加图片描述

4.背景图片位置

请添加图片描述

使用iconfont插入图标

进入百度搜索“iconfont"
注册
搜索想要的图标
加入购物车后，选择下载代码
打开文件夹，点击以下文件，进入图标详解网址

代码：

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>my_incofonttitle>
    <link rel="stylesheet" href="./iconfont/iconfont.css"/>
head>

<body>
    <span class="iconfont icon-huidaodingbu ">span>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果:
在这里插入图片描述

相关阅读:
Java项目：SSM汽车维修中心管理系统
 【SOLIDWORKS学习笔记】装配体基础操作
 JAVA 学习笔记 2年经验
 【从零开始学微服务】01.微服务的过去与现在
 ESP32-WROOM-32 ESP32 wifi模块基本参数与引脚定义
 CNN卷积神经网络
 数据挖掘学习笔记02——算法（分类、聚类、回归、关联）
网关中间件-Nginx(一)
2020上海智慧城市合作大会，零数科技受邀出席并入选优秀应用案例
 中文写代码？开始不信后来用中文写了剧情小游戏！嗯，真香~
原文地址：https://blog.csdn.net/m0_65431212/article/details/126867146

【web前端开发】CSS层叠样式介绍

文章目录

css样式

内部样式 < style >

内联样式 < style >

外部样式 < link >

应用范围

css文本属性

1.font-family 字体系列

2.font-size 字体大小 & em/px

3.font-weight 字体粗细

4.font-style字体样式

5.字体复合样式

6.color 字体颜色

7.text-align 对齐文本

8.text-decoration 装饰文本

9.text-indent 文本缩进

10.line-height 行间距

各种选择器

标签选择器

邻近选择器

兄弟选择器

伪类选择器

盒子模型

概念

分类

常见属性

1.padding

2.margin

3.boder

position定位

补充知识-文档流

position属性

1.static–静态定位

2.raletive–相对定位

3.absolute–绝对定位

4.fixed定位

5.sticky定位

6.相对位置和绝对位置–居中设置

背景属性

1.背景颜色

2.背景图片

3.背景平铺

4.背景图片位置

使用iconfont插入图标