二、Flask学习之CSS

1.CSS在HTML中的三种表示方法

1.1 直接在标签中添加

html 复制代码
<div>
    <span style="color: orange">
        欢迎光临
    </span>
</div>

1.2 在头部添加

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getNews</title>
    <style>
        .name1{
            color: orange;
        }
    </style>
</head>
<body>
    <h1>欢迎访问本系统</h1>
    <div>
        <span class="name1">
            欢迎光临
        </span>
    </div>
</body>
</html>

1.3 单独在文件添加

mycss.css

css 复制代码
.name1{
    color: orange;
}

html文件:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getNews</title>
    <link rel="stylesheet" href="/mycss.css">
</head>
<body>
    <h1>欢迎访问本系统</h1>
    <div>
        <span class="name1">
            欢迎光临
        </span>
    </div>
</body>
</html>

上面三种表示的结果是一样的。

2.CSS选择器

CSS有多种选择器:

  1. ID选择器(使用#)

  2. 类选择器(使用.)

  3. 标签选择器

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style>
        #name1{
            color: orange;
        }
        .name2{
            color: blue;
        }
        li{
            color: purple;
         }
    </style>
</head>
<body>
    <h1 class="name2">panda</h1>
    <h2 id="name1">panda</h2>
    <ul>
        <li>panda</li>
        <li>panda</li>
        <li>panda</li>
    </ul>
</body>
</html>

效果:

  1. 属性选择器
  2. 后代选择器

3.CSS样式

3.1高度和宽度

  • 宽度是可以支持百分比的
  • <div>等块级标签默认是有效的
  • <span>等行内标签默认无效
html 复制代码
<style>
    .name1{
        height: 500px;
        width: 300px;
    }
</style>

3.2块级标签和行内标签

使用CSS样式displsy:inline-block可以使标签既有块级标签的特性又有行内标签的特性:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style>
        .name1{
            display:inline-block;
            height: 100px;
            width: 300px;
            border: 1px pink;
            color: deeppink;
        }
    </style>
</head>
<body>
    <span class="name1">panda</span>
</body>
</html>

3.3字体

HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style>
        .name1{
            font-size: 100px;
            font-weight: 300;
            font-family: "Microsoft YaHei UI";
        }
    </style>
</head>
<body>
    <span class="name1">panda</span>
</body>
</html>

CSS可以设置字体样式:font-size用于设置字体大小,font-weight用于设置字体的粗细,font-family用于设置字体样式

3.4对齐方式

HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style>
        .name1{
            height: 80px;
            text-align: center;/*水平方向居中*/
            line-height: 80px;/*垂直方向居中*/
            /*垂直方向居中时候注意:一定要是一行,不然没办法垂直居中*/
        }
    </style>
</head>
<body>
    <div class="name1">panda</div>
</body>
</html>

效果:

3.5浮动

行内标签的浮动,默认是在左侧,可以设置float参数放到右侧:

html 复制代码
<span style="float: right">panda</span>

<div>标签的浮动有些特殊,需要在最后加上:<div style="clear: both"></div>

HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style>
        .name1{
            float: left;
            border: 3px solid rebeccapurple;
            height: 200px;
            width: 200px;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div style="background-color: orange">
        <div class="name1">panda</div>
        <div class="name1">panda</div>
        <div class="name1">panda</div>
        <div style="clear: both"></div>
    </div>
</body>
</html>

3.6边距

  1. 内边距

    内边距是指距离自己的边框的距离,有上下左右四种:

    写法一:

    HTML 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo1</title>
        <style>
            .name1{
                height: 300px;
                width: 200px;
                border: 2px solid orange;
                padding-top: 30px;
                padding-left: 20px;
                padding-right: 20px;
                padding-bottom: 30px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div class="name1">panda panda</div>
    </body>
    </html>

    写法二:

    HTML 复制代码
    padding: 30px 20px 30px 20px;

    padding的后面的顺序是上右下左,按照顺时针的顺序。

    结果:

  2. 外边距

    外边距是指距离其他边框的距离:

    HTML 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo1</title>
        <style>
            .name1{
                height: 300px;
                width: 200px;
                border: 2px solid orange;
                padding: 30px 20px 30px 20px;
                color: pink;
            }
            .name2{
                background-color: pink;
                height: 30px;
                width: 500px;
                margin-top: 20px;
                margin-left: 30px;
                margin-right: 30px;
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <div class="name1">panda panda</div>
        <div class="name2"></div>
    </body>
    </html>

    效果:

相关推荐
Hello_Embed6 小时前
STM32HAL 快速入门(十九):UART 编程(二)—— 中断方式实现收发及局限分析
笔记·stm32·单片机·嵌入式硬件·学习
天上的光7 小时前
关于学习的一些感悟
学习
red_redemption7 小时前
自由学习记录(95)
学习
东风西巷8 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
XISHI_TIANLAN10 小时前
【多模态学习】Q&A3:FFN的作用?Embedding生成方法的BERT和Word2Vec?非线性引入的作用?
学习·bert·embedding
@大迁世界11 小时前
用 popover=“hint“ 打造友好的 HTML 提示:一招让界面更“懂人”
开发语言·前端·javascript·css·html
伍哥的传说11 小时前
Tailwind CSS v4 终极指南:体验 Rust 驱动的闪电般性能与现代化 CSS 工作流
前端·css·rust·tailwindcss·tailwind css v4·lightning css·utility-first
拜无忧11 小时前
前端,用SVG 模仿毛笔写字绘画,defs,filter
前端·css·svg
KFCcrazy411 小时前
嵌入式学习日记(39)51单片机
嵌入式硬件·学习·51单片机
MuMuMu#11 小时前
JAVA NIO学习笔记基础强化学习总结
java·学习·nio