二、Flask学习之CSS

这篇具有很好参考价值的文章主要介绍了二、Flask学习之CSS。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

1.1 直接在标签中添加

<div>
    <span style="color: orange">
        欢迎光临
    </span>
</div>

1.2 在头部添加

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

.name1{
    color: orange;
}

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. 标签选择器

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

效果:

二、Flask学习之CSS,Web开发,python,学习笔记,flask,学习,css

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

3.CSS样式

3.1高度和宽度

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

3.2块级标签和行内标签

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

<!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字体

<!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对齐方式

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

效果:

二、Flask学习之CSS,Web开发,python,学习笔记,flask,学习,css

3.5浮动

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

<span style="float: right">panda</span>

二、Flask学习之CSS,Web开发,python,学习笔记,flask,学习,css

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

<!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. 内边距

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

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

    写法二:

    padding: 30px 20px 30px 20px;
    

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

    结果:

    二、Flask学习之CSS,Web开发,python,学习笔记,flask,学习,css

  2. 外边距

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

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

    效果:

    二、Flask学习之CSS,Web开发,python,学习笔记,flask,学习,css文章来源地址https://www.toymoban.com/news/detail-807232.html

到了这里,关于二、Flask学习之CSS的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Python】Web学习笔记_flask(2)——get&post

    flask提供的request请求对象可以实现获取url或表单中的字段值 GET请求 从URL中获取name、age两个参数 POST请求 使用request.form可以接受表单数据 login.html模板: 获取用户名称、密码

    2024年02月14日
    浏览(43)
  • 【Python】Web学习笔记_flask(1)——get&post

    flask提供的request请求对象可以实现获取url或表单中的字段值 GET请求 从URL中获取name、age两个参数 POST请求 使用request.form可以接受表单数据 login.html模板: 获取用户名称、密码

    2024年02月14日
    浏览(38)
  • 【Python】Web学习笔记_flask(6)——会话&session对象

    处理利用cookie来判断用户登录外,也可以使用session来判断用户是否登录 html代码和cookie对象的设置相同    

    2024年02月12日
    浏览(44)
  • 【Python】Web学习笔记_flask(7)——Jinja2模板(1)

    Jinja2是基于python的模板引擎,功能类似于PHP的amarty、J2ee的Freemarker和velocity,完全支持Unicode,并具有集成的沙箱执行环境,Jinja2使用的事BSD协议,允许使用者修改和重新发布代码,也允许使用或在BSD代码上开发商业软件发布和销售。 渲染模板: 执行关键代码: 执行结果:  

    2024年02月11日
    浏览(42)
  • web开发学习笔记(1.html css)

    css负责布局 js负责动作 2.磁盘路径 3.水平线标签 4.引入css 5.无语义标签 6.选择器 7.播放视频和音频 8.换行 br 9.段落标签 p/p 10.首行缩进 11.边距 12.盒子模型,居中显示,  margin后面的四个值顺序为上右下左,auto表示自动 13.表格标签 14.表单标签 15.表单项 16.表单示例

    2024年01月23日
    浏览(51)
  • flask web学习之flask与http(四)

    一、重定向进阶功能 1.1 重定向回上一个页面 有时候,我们在某些界面执行操作一些操作后,不希望界面跳转到其他指定网页上,而希望网页能重定向为用户刚才浏览的界面,以便继续完成操作,例如在某个页面需要登录后才能进行操作,我们希望登录后不跳转到主页界面,

    2024年02月03日
    浏览(34)
  • flask web学习之模板(二)

    一、模板结构组织 1.1 局部模板 当多个独立模板中都会使用同一块HTML代码时,我们可以把这部分代码抽离出来,存储到局部模板中。这样,既可以避免重复,也可以方便统一管理。 1.2 宏 宏是Jinja2提供的一个非常有用的特性,它类似Python的函数。使用宏可以把一部分代码封装

    2024年01月15日
    浏览(35)
  • Flask Web开发实战(狼书)| 笔记第1、2章

    2023-8-11 以前对网站开发萌生了想法,又有些急于求成,在B站照着视频敲了一个基于flask的博客系统。但对于程序的代码难免有些囫囵吞枣,存在许多模糊或不太理解的地方,只会照葫芦画瓢。 而当自己想开发一个什么网站的时,就如同摸着石头过河,常在许多小问题上卡住

    2024年02月12日
    浏览(36)
  • Python Web 开发 Flask 介绍

    WEB开发是现在程序必会的技能,因为大部分软件都以Web形式提供,及时制作后台开发,或者只做前台开发,也需要了解Web开发的概念和特点。由于Python是解释性脚本语言,用来做Web开发非常适合,而且Python有上百种Web开发框架,以及成熟的模板技术,使得Web开发如虎添翼。今

    2024年02月14日
    浏览(40)
  • Python Web 开发之 Flask 入门实践

    导语:Flask 是一个轻量级的 Python Web 框架,广受开发者喜爱。本文将带领大家了解 Flask 的基本概念、搭建一个简单的 Web 项目以及如何进一步扩展功能。 Flask 是一个基于 Werkzeug 和 Jinja2 的微型 Web 框架,它的特点是轻量、易学习、可扩展。使用 Flask,我们可以快速构建 Web 应

    2024年01月22日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包