Python全栈最全学习之路-WEB前端（二）

最新推荐文章于 2024-06-19 21:06:55 发布
最新推荐文章于 2024-06-19 21:06:55 发布
阅读量232 收藏 3
点赞数
分类专栏： python全栈学习 文章标签： html css web 脚本语言 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sdhrs_nn/article/details/108399047
版权

CSS入门

一、CSS介绍与基本使用

1、CSS介绍

CSS样式
层叠样式表（Cascading Style Sheets）是一种用来表示HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS作用
CSS就是网页的化妆师，可以让网页变得更加美观。
使用方法
1、直接写在标签；2、写在style标签内；3、使用外部.css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的三种引入方式</title>
    <!--2、内部样式：写在style标签里面-->
<!--    <style>-->
<!--        p{-->
<!--            color: green;-->
<!--        }-->
<!--    </style>-->
<!--    3、外部样式：写在css里面-->
    <!--<link rel="stylesheet" href="css/css.css">-->
</head>
<body>
<!--优先级：行内样式>内部样式=外部样式-->
<!--1、行内样式：写在标签里面-->
<p style="color: red;">我是段落标签</p>
<!--<p>我是段落标签</p>-->
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的三种引入方式</title>
    <!--2、内部样式：写在style标签里面-->
    <style>
        p{
            color: green;
        }
    </style>
<!--    3、外部样式：写在css里面-->
    <!--<link rel="stylesheet" href="css/css.css">-->
</head>
<body>
<!--优先级：行内样式>内部样式=外部样式-->
<!--1、行内样式：写在标签里面-->
<!--<p style="color: red;">我是段落标签</p>-->
<p>我是段落标签</p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的三种引入方式</title>
    <!--2、内部样式：写在style标签里面-->
    <!--<style>
        p{
            color: green;
        }
    </style>-->
<!--    3、外部样式：写在css里面-->
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
<!--优先级：行内样式>内部样式=外部样式-->
<!--1、行内样式：写在标签里面-->
<!--<p style="color: red;">我是段落标签</p>-->
<p>我是段落标签</p>
</body>
</html>

在这里插入图片描述

二、CSS选择器

1、选择器

选择器作用
给指定的元素设置样式，能够更加精准
选择器权重
选择器也有权重差别，当出现冲突样式的时候，选择权重大的样式
选择器种类
有标签选择器、ID选择器、class选择器、兄弟选择器、后代/子代选择器、复杂选择器、伪类选择器

2、选择器种类

ID选择器
通过标签的id属性，选择对应的元素
注意：id是唯一的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        #d1{
            color: red;
        }
    </style>
</head>
<body>
<div id="d1">
    这是个啥标签来着
</div>
</body>
</html>

在这里插入图片描述
class选择器
通过标签的class属性，选择对应的元素借助了一个类的概念，一处定义，可以多处使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        .d1{
            color: green;
        }
    </style>
</head>
<body>
<div class="d1" id="di1">
    这是个啥标签来着
</div>
</body>
</html>

在这里插入图片描述
群组选择器
群组选择器是可以同时选择多个标签的选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        div,p{
            color: red;
        }
    </style>
</head>
<body>
<div class="d1" id="di1">
    这是个啥标签来着
</div>
<p>我是段落标签1</p>
</body>
</html>

在这里插入图片描述
层次选择器
层次选择器分为，子代、后代、相邻和兄弟等四种选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        #p1~p{
            color: green;
        }
    </style>
</head>
<body>
<div class="d1" id="di1">
    这是个啥标签来着
    <p id="p1">我是段落标签
    <span>我是文本标签
        <b>我是粗体标签</b>
    </span>
    </p>
    <p>我是段落标签2</p>
</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        div span{
            color: red;
        }
    </style>
</head>
<body>
<div class="d1" id="di1">
    这是个啥标签来着
    <p id="p1">我是段落标签
    <span>我是文本标签
        <b>我是粗体标签</b>
    </span>
    </p>
    <p>我是段落标签2</p>
</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <style>
        p[name='p1']{
            color: red;
        }
    </style>
</head>
<body>
<p name="p1">我是段落标签1</p>
<p name="p2">我是段落标签2</p>
</body>
</html>

在这里插入图片描述

3、伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /*伪类选择器*/
        /*未访问的*/
        a:link{
            color: red;
        }
        /*访问过后*/
        a:visited{
            color: green;
        }
        /*鼠标移上超链接时*/
        a:hover{
            color: darkblue;
        }
        /*激活状态下*/
        a:active{
            color: darkorchid;
        }
    </style>
</head>
<body>
<!--空链接-->
<a href="#">我是超链接</a>
</body>
</html>

4、选择器总结

选择器优先级概况如下：
1、在id>class>标签
2、复杂选择器的优先级比较如下：
A.先比id（最高位），再比class，最后比tagName（标签个数）
B.id个数不等，id越多，优先级越高
C.id相同，class越多，优先级越高
D.id，class都相同，则标签越多，优先级越高
3、行内样式>内部样式=外部样式

三、CSS字体/文本

1、字体样式

类型表示
字体font-family
字体大小font-size
字体样式font-style
字体粗细font-weight
小大写font-variant
复合样式font
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体的常用样式</title>
    <style>
        p{
            /*字体类型*/
          /*  font-family: 华文楷体;*/
            /*字体大小*/
            /*font-size: 40px;*/
            /*字体样式*/
            /*font-style: italic;*/
            /*字体粗细*/
           /* font-weight: bold;*/
            /*字体小大写:只针对英文*/
            /*font-variant: small-caps;*/
            /*复合样式*/
            /*顺序：字体样式，字体小大写，字体粗细，字体大小，字体类型*/
            font: italic small-caps bold 20px 黑体;
        }
    </style>
</head>
<body>
<p>我是段落标签</p>
<p>HELLO WORLD</p>
<p>hello world</p>
</body>
</html>

在这里插入图片描述

2、文本常用样式

类型表示
对齐方式text-align
首行缩进text-indent
文本线text-decoration
字距letter-spacing
词距word-spacing
行高line-height （单行文本的垂直居中：行高=高度）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本的常用样式</title>
    <style>
        p{
            height: 80px;
            /*对齐方式*/
            text-align: left;
            /*首行缩进*/
            text-indent: 2em;
            /*文本下划线*/
           /* text-decoration: underline;*/
            /*文本删除线*/
            /*text-decoration: line-through;*/
            /*去掉文本线*/
            text-decoration: none;
            /*字距*/
            letter-spacing: 10px;
            /*词距*/
            word-spacing: 50px;
            /*行高：解决单行文本的对齐，行高=高度*/
            line-height: 80px;
        }
    </style>
</head>
<body>
<p>我是段落 标签</p>
<span>我是文本标签</span>
</body>
</html>

在这里插入图片描述

四、CSS背景

1、背景常用样式

类型表示
背景颜色backgrou-color
背景图片background-image
背景铺盖background-repeat
背景大小background-size
背景定位background-position
复合样式background
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景的常用样式</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 1px solid #caffc2;
            /*背景颜色*/
           background-color: green;
            /*背景图片*/
            background-image: url("images/caomei.jpg");
            /*背景大小*/
            background-size: 300px 300px;
            /*背景平铺*/
            background-repeat: no-repeat;
            /*背景定位*/
            background-position: 50% 50%;


        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

在这里插入图片描述

Fresh_anyu
关注
专栏目录
《Python全栈系列教程》目录
孤寒者的博客
05-12 70万+
《Python全栈基础教程》目录导读： 一、Python基础部分；二、Python常用模块部分；三、Python实战部分；四、Python习题部分。
用Python 操作Web 前端 基础 1
weixin_30621919的博客
08-05 461
一，目录 　　1. HTML ： html就是一套浏览器认识的规则，主要用20个左右的标签 　　　对于开发者来说：学习html规则 　　　　1. 本地测试：（1）找到html文件，直接浏览器方式打开，不用socket；（2），pycharm可以直接打开html 　　　　2. 编写html文件: ---doctype对应关系 ...
PythonWeb前端
最新发布
weixin_74889578的博客
06-19 945
学校的一门选修课，PythonWeb开发从入门到实践，用到的技术有Python,Flask,MySQL,前端三件套等，但因为是选修课，所以都只涉及到了一点点
Python-WEB前端-入门到进阶开发之路
weixin_34239169的博客
09-11 239
HTTP: Python-HTTP 概况 HTML: Python-HTML基础 Python-form表单标签 Python-HTML CSS 练习 CSS: Python-CSS入门 Python-CSS进阶 JavaScript: Python-Javascript Python-jQuery Python-bootstrap Python-WEB -VUE...
python显示html控件_python之路-HTML初识
weixin_39860757的博客
12-10 435
Meta(metadata information)提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词页面编码(告诉浏览器是什么编码)< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>刷新和跳转< meta http-equiv=“Refresh” Content...
python---Web前端HTML(超文本标记语言)
Wangtuo1115的博客
02-17 752
文章目录Web前端开发介绍Web概述Web起源Web的特点Web工作原理URL介绍HTML网页结构HTML基本结构HTML文档规范与注释HTML标签文本标签列表标签图片标签img超链接标签表格标签form表单标签下拉列表标签文本域标签按钮标签用户登录页面（背景图片）HTML内嵌框架 Web前端开发介绍 Web概述 Web起源 1984年蒂姆伯纳斯李创造了世界上第一个万维网导航站点世界上第一个网...
python 全栈开发/full-stack-python-guide-to-deployme
12-05
3. 书籍的目的：作者Matthew Makai通过本书回应了编程社区的请求，提供了更详细的教程，以便更好地辅助读者学习Python全栈开发。 4. 版权声明：书籍《Python全栈开发指南》的版权归Matthew Makai所有，首次发行于...
老男孩python全栈开发学习笔记.zip_Python全栈_harborkyi_python 全栈开发_全栈_老男孩 pyth
09-23
通过学习《老男孩Python全栈开发学习笔记》，读者不仅可以掌握Python全栈开发的核心技能，还能了解软件开发的全过程，从而提升个人在团队中的价值和竞争力。文档的详细内容和实际案例将帮助读者逐步成长为一名全能的...
python全栈开发基础+前端+web框架+项目实战视频.zip
07-14
3 python全栈开发web框架篇视频 : 框架简介 框架的本质socket连接 基于wsgi的web框架开发（一） 基于wsgi的web框架开发（二） MTV和MVC模式 django流程之url和视图函数 django流程之模版 django流程之model以及实例 ...
Bug-Tracking-Web-App：基于Web的全栈:bug:使用Django-PostgreSQL后端和React-Redux前端构建的bug跟踪平台:mobile_phone:
02-18
这个项目是一个全栈Web应用，主要用于bug跟踪和管理。它利用了现代Web开发技术，包括Django作为后端框架，PostgreSQL作为数据库系统，以及React和Redux作为前端组件库和状态管理工具。此应用特别关注于移动设备的...
Python Web前端概述
快乐的工程师的博客
02-11 2355
Web前端概述 说明：本文使用的部分插图来自Jon Duckett先生的*HTML and CSS: Design and Build Websites*一书，这是一本非常棒的前端入门书，有兴趣的读者可以在亚马逊或者其他网站上找到该书的购买链接。 HTML简史 1991年10月：一个非正式CERN（欧洲核子研究中心）文件首次公开18个HTML标签，这个文件的作者是物理学家蒂姆·伯纳斯-李，因...
【Python入门基础】Web前端
ZoomToday
12-21 1383
函数 函数可以赋值给变量 函数可以作为函数的参数 函数可以作为函数的返回值 高阶函数的用法(filter、map以及它们的替代品) items1 = list(map(lambda x: x ** 2, filter(lambda x: x % 2, range(1, 10)))) items2 = [x ** 2 for x in range(1, 10) if x % 2] 说明: map filter ...
python web前端框架
u013435163的专栏
05-16 2129
自己用过的框架web.py, django
Python-Web前端概述
互联说
03-27 1524
Python是一种功能强大的编程语言，被广泛应用于Web开发领域。在这个领域中，Python通常被用于后端开发，但它也可以用于Web前端开发。本文将介绍Python Web前端开发的基础知识和工具。
python web前端开发框架,python 前端框架
weixin_39637924的博客
03-25 1634
Python web 开发一定要用框架吗?Python web 开发不一定要用框架因为Python Web框架也是Python开发出来的。只是为了减少重复造轮子，降低开发门槛。Python 的 Web 并不作为语言的一部分实现。因为通用语言的设计目标，Python 通过 C extension 形式的标准库。Python几种主流框架比较从GitHub中整理出的15个最受欢迎的Python开源框架。...
python笔记(web前端 HTML)
小小龙的博客
01-29 855
一、几个基本概念： HTML ------&amp;amp;amp;gt; 内容（标签） CSS ------&amp;amp;amp;gt; 外观（选择器，属性） javaScript --------&amp;amp;amp;gt; 给HTML网页增加动态功能 Web开发的本质： 1、浏览器给服务端发了一个消息 2、服务端拿到消息 3、服务端返回消息 4、浏览器展示页面 ----------客户端和服务端消息的格式是约定好的 ----------http协议...
python笔记(web前端 CSS)
小小龙的博客
01-29 370
一、CSS不同描述（层叠 样式 表） 1、直接写在标签里面 style = “样式1；样式2” 2、在head中通过style标签定义 3、把样式单独写在CSS文件中，然后在html文件中通过link标签导入 二、CSS语法： 例： h1 {color:red; font-size:14px;} 三、CSS查找标签的方式（选择器） 1、基本选择器 标签选择器 id选择器 类选择器 2、通用...
python web开发--web前端开发介绍
old_man31的博客
01-12 550
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值