python web开发（三）—— CSS样式

news/2024/10/22 19:24:11/

文章目录

  • 概要
    • 1.快速了解
    • 2.使用方式
    • 3. CSS选择器
    • 4. 多个属性类联合使用
  • 样式
    • 1. 高度和宽度
    • 2. 块级和行内标签
    • 3. 字体设置
    • 4. 文字对齐方式
    • 5. 浮动
    • 6. 内边距
    • 7.外边距
    • 8. 内容居中
    • 9.body标签
    • 10. hover(伪类)
    • 11. 设置透明度
    • 12. after(伪类)
    • 13. position
    • 14. 边框border
    • 15. 背景色background-color
    • 注意事项
  • 参考

概要

1.快速了解

如下代码，其中style参数就可看成CSS，主要作用是修改对象的样式，使得网页更加美观

<img src="xxxx" style="height:100px">
<div style="color:red"> i love china </div>

2.使用方式

（1）应用在标签里，如上所示的代码块
（2）应用在HTML的head里，具体如下，现在head标签中通过style标签定义一个类c1，然后body中应用该类即可；该类方法适用于多个标签共用相同样式
在这里插入图片描述
得到如下效果
在这里插入图片描述
（3）写在文件里，如下，在static/css目录下创建common.css文件，并在html文件中head中导入css文件；此方法适用于不同html文件中使用相同的样式

.c1{height: 100px;
}.c2{color: blue;
}

在html文件中导入样式
在这里插入图片描述

3. CSS选择器

CSS的选择器可简单的看作是使用方式的一种扩展，如下所示，有三种使用方式

  • ID选择器
    如下代码，现在head标签中定义id选择器，以#开头；使用时在相关标签中设置id属性
<!--定义id-->
#c1 {color: red;
}<!--使用id-->
<div id='c1'></div>
  • 类选择器
    类选择器经常使用，如第二章节所述。定义类时以.开头，使用时在相关标签中设置class属性即可
<!--定义类-->
.c1 {color: red;
}<!--使用类-->
<div class='c1'></div>
  • 标签选择器
    首先在head中定义标签属性，此处以div 标签为例，实际可以是任意标签，定义完后该标签对应的属性都将发生变化
div{color: red;
}<div>xxx</div>
  • 属性选择器
    如下所示，将所有属性type=text的input标签设置边框
<head><title>Document</title><link rel="stylesheet" href="/static/commons.css"><style>input[type="text"]{border: 1px solid red;}</style>
</head>

还可像下面这种方式设置，即将v1类中xx属性等于456的标签设置成相关的属性

<style>.v1[xx="456"]{color: gold;	<!-- 橙色 -->}
</style>...<body>
...<div class="v1" xx="123">a</div><div class="v1" xx="456">b</div><div class="v1" xx="789">c</div>
...
</body>
  • 后代选择器
    如下代码可让zz类下的所有h2子标签都生效，注意在style标签中引用的方式.zz和h2中间有空格
<head>
<style>.zz h2{color:chartreuse;}
</style>
</head><body><div class="zz" ><div><h2>我是div里面的h2</h2></div><h2>我是div外面的h2</h2>
...

如果只想让第一层的h2生效（儿子层生效，孙子层不生效）,可以添加>号

<style>.zz > h2{color:chartreuse;}
</style>

4. 多个属性类联合使用

引用多个类时用空格分开，如下所示。注意类的优先级与引用的顺序无关，只与定义时类的前后顺序有关，如下在<style>中定义类时，c2排在c3的前面，因此c2的优先级小于c3，即如果c2和c3中有相同的属性，比如颜色，那么c2的属性会被c3的属性覆盖，如果不想让c2被c3覆盖，在其后面增加! important

<style>.c2 {color: darkgoldenrod;<!--不被覆盖--><!--color: darkgoldeneod !important;-->}.c3 {color:hotpink;}
</style><body><div class="c2 c3">我是天才</div>
</body>

样式

1. 高度和宽度

在这里插入图片描述
结果如下
在这里插入图片描述
注意事项

  • 宽度支持百分比，但是高度不支持百分比，因为宽度有最大值，而高度可以很长
      .c1{height: 200px;width: 50%;}
  • 宽度和高度默认对行内标签无效，如span；默认对块级标签有效，比如div，但是块级标签比较霸道，即使设置了较小宽度，其他东西也无法放到其后面，仍然占据一行

2. 块级和行内标签

  • display+行内标签display:inline-block
    在这里插入图片描述
    效果如下：块内标签的高和宽可以改变，同时可以将不同模块放到一行（融合了块内标签和块级标签的特征）
    在这里插入图片描述
  • 块级标签和行内标签的转换
    如下所示，通过设置display，可以将span设置成块级标签，也可将div设置成行内标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>inline block</title>
</head>
<body><span style="display: block"> hello word</span><div style="display: inline"> my name is candy</div><div style="display: inline"> nice to meet you</div>
</body>
</html>

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

3. 字体设置


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{font-family: Microsoft YaHei UI;  /*字体*/color: red;   /*颜色*/font-size: 50px;     /*字体大小*/font-weight: 400;    /*加粗*/}</style>
</head>
<body><div>hello word</div>
<div class="c1">你好</div></body>
</html>

效果
在这里插入图片描述

4. 文字对齐方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 50px;width: 200px;border: antiquewhite 2px solid;text-align: center;   /* 文字水平居中*/line-height: 50px;   /* 文字垂直居中，设置值与高度一致自动居中*/}</style>
</head>
<body><div>hello word</div>
<div class="c1">你好</div></body>
</html>

效果
在这里插入图片描述

5. 浮动

<div><span>左边</span><span style="float: right">右边</span>
</div>

如上代码所示，正常情况下左边和右边两个词都是靠左并且连着，当加入float样式后，其效果变成如下图所示。注意当块级标签如div，设置成float时，块级标签就不会“霸道”，可以改变其宽和高
在这里插入图片描述

注意在设置完浮动后，最后需要增加<div style="clear:both">，否则父标签的效果无法生效(被浮动的部分覆盖了)；如下代码所示，子div中采用c1类设置属性，设置了向右浮动，在父div中设置了style背景颜色，如果缺少 <div style="clear: both"></div>这行代码，则背景颜色的style将无法生效。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.c1{float: right;height: 50px;width: 200px;border: antiquewhite 2px solid;text-align: center;   /* 文字水平居中*/line-height: 50px;   /* 文字垂直居中，设置值与高度一致自动居中*/}</style>
</head>
<body><div style="background-color: red"><div class="c1">hello word</div><div class="c1">你好</div><div class="c1">你好</div><div class="c1">你好</div><div class="c1">你好</div><div style="clear: both"></div></div>
</body>
</html>

6. 内边距

按如下所示的style设置风格

  <style>.c1 {height: 50px;width: 100px;border: antiquewhite 2px solid;text-align: center; /* 文字水平居中*/line-height: 50px; /* 文字垂直居中，设置值与高度一致自动居中*/padding-top: 10px;  /* 设置顶部边距*/padding-bottom: 10px;   /* 设置底部边距*/padding-left: 10px;padding-right: 10px;}</style>

效果如下，设置了上下左右各10px的边距。同时上边通过4个代码设置了上下左右边距，可以简写为pdding:10px，即可同时设置上下左右的边距
在这里插入图片描述

7.外边距

如下通过margin-top设置外边距，同理还有margin-left margin-right margin-button

<body><div style="background-color: aquamarine">hello word</div><div style="margin-top: 20px; background-color: blue">你好</div>
</body>

效果如下在这里插入图片描述
注意内边距会改变div的大小，外边距不会，外边距只会改变间隔大小

8. 内容居中

  • 文本居中：文本会在指定标签区域中居中
<div style="text-align:center">hello word</div>
  • 内容居中：一整块内容在整个页面中居中
    要有自己的宽度+margin-left:auto+margin-right:auto
.container{
width: 920px;
margin: 0 auto   /* 上方margin=0,左右为自动*/
}

9.body标签

默认body标签有一个边距，会造成页面四边都有白色间隙，增消除？

body{margin:0;
}

10. hover(伪类)

放上鼠标字体颜色发生改变（一般放在具有链接的文字中）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin:0  /*取消四周默认边距*/}/* 中间内容居中 */.container{margin: 0 auto;}.c1 {height: 50px;width: 1128px;border: antiquewhite 2px solid;text-align: center; /* 文字水平居中*/line-height: 50px; /* 文字垂直居中，设置值与高度一致自动居中*/padding-top: 10px;  /* 设置顶部边距*/padding-bottom: 10px;   /* 设置底部边距*/padding-left: 10px;padding-right: 10px;}.c1 a{margin: 0 20px;color: black;    /* 设置字体颜色 */text-decoration: none;    /* 取消字体下方的下划线*/}a:hover{color: red;   /* 放置鼠标时字体颜色改变为红色*/}</style>
</head>
<body><div class="c1 container" style=background-color:azure><a href="https://www.baidu.com/">百度</a><a href="https://www.google.com">谷歌</a><a href="https://www.weibo.com">微博</a></div>
</body>
</html>

在这里插入图片描述
注意hove不仅仅可以设置字体颜色，还可设置边框、字体大小等其他属性，通过设置属性display:none/block控制一些标签的隐藏/显示

如下代码所示，指定标签下的某个类设置hover

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.c1 {color:brown;}.c1:hover {color: green;font-size: 20px;}.c2 {width: 300px;height: 300px;border: 3px solid red;}.c2:hover {border: 3px solid green;}.download {display: none;}.app:hover .download {display: block;}</style>
</head>
<body><div class="c1">字体碰到鼠标变成绿色</div><div class="c2">边框碰到鼠标变成绿色</div><div class="app"><div>鼠标放我这里触发显示二维码</div><div class="download"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png" alt=""></div></div>
</body>
</html>

11. 设置透明度

opacity:0.5 取值从0-1

12. after(伪类)

在一些标签内容后面增加内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.c1:after {content: "大帅比"}</style>
</head>
<body><div class="c1">张三</div>
</body>
</html>

输出显示：张三大帅比

after一般应用在float场景中,不用每次都写style=“clear: both;”，下面的after语句就相当于在clearfix类的div标签里的最后增加<div style="clear:both"></div>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.clearfix:after {content: "";display: block;clear: both;}.item {float: left;}</style>
</head>
<body><div class="clearfix"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>
</html>

13. position

将某部分固定在网页的相关位置，不会随着鼠标拖动而改变
有三种模式分别是

  • fixed
  • relative
  • absolute

(1) fixed: 完全固定在指定位置
长用于网页中的返回顶部 对话框等

.back {position: fixed;   /* 模式 */width: 60px;   /* 固定框的宽度 */height: 60px;     /* 固定框的高度 */border: 1px solid red;right: 50px;      /* 固定位置：离最右边的距离 */bottom: 50px;      /* 固定位置：离最下边边的距离，还可设置left top*/}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>body {margin: 0;}.dialog {position: fixed;height: 300px;width: 500px;background-color: white;left: 0;right: 0;margin: 0 auto;top: 200px;z-index: 1000;  /* 防止对话框被mask遮住 */}.mask {background-color: black;position: fixed;left: 0;right: 0;top: 0;bottom: 0;opacity: 0.7;z-index: 999;   /* 防止对话框被mask遮住 */}</style>
</head>
<body><div style="height: 1000px;"></div><!-- 如果css中不加 z-index 设置优先级的话 --><!-- 那么下面的 dialog 如果在 mask 的上面,对话框就显示不出来了 --><!-- 设置优先级可以解决此问题 --><div class="dialog"></div><div class="mask"></div>
</body>
</html>

在这里插入图片描述
(2) relative absolute 联合使用
相对于某个“框”存在

....app{position: relative;}.app .download {position: absolute;display: none;height: 100px;width: 100px;}.app:hover .download {display: block;}</style></head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com">小米商城</a><a href="https://www.mi.com">MIUI</a><a href="https://www.mi.com">云平台</a><a href="https://www.mi.com">有品</a><a href="https://www.mi.com">小爱开放平台</a><a href="https://www.mi.com" class="app">app下载<div class="download"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png" alt=""></div></a></div><div class="account"><a href="https://www.mi.com">登录</a><a href="https://www.mi.com">注册</a><a href="https://www.mi.com">消息通知</a></div>'<div style="clear: both;"></div></div></div>
...

14. 边框border

border: 1px solid red 代表边框1像素，实线（dotted代表虚线） 红色（transparent透明色）
border-left: 1px solid green 只要左边的边框

15. 背景色background-color

background-color: green

注意事项

  • a标签默认时行内标签，内外边距标签高度设置时默认无效，需要通过display设置成块级标签才可生效
  • 设置垂直居中：
    • line-hight只对文本生效
    • 图片需要通过边距来设置
  • a标签默认字体下带下划线，需要通过设置text-decoration:none 将下划线取消

参考

Django web开发(一) - 前端
B站视频-Django web开发


http://www.ppmy.cn/news/158157.html

相关文章

STM32之任务的创建与删除

STM32之任务的创建与删除

目录 1. 什么是任务&#xff1f; 2. 任务创建与删除相关函数 任务动态创建与静态创建的区别&#xff1a; xTaskCreate 函数原型 官方案例&#xff1a; vTaskDelete 函数原型 3. 实操 1. 什么是任务&#xff1f; 任务可以理解为进程 / 线程&#xff0c;创建一个任务&#…
阅读更多...
开源项目整理

开源项目整理

转自&#xff1a;https://github.com/Trinea/android-open-project Android开源项目第一篇——个性化控件(View)篇 包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、其他 Android开源项目第二篇——工具库篇 包括依赖注入、图…
阅读更多...
最值得研究的开源框架：来自百度的71款开源项目

最值得研究的开源框架：来自百度的71款开源项目

百度&#xff0c;一家让人既爱又恨的企业&#xff0c;血友吧贴吧被卖&#xff0c;魏则西事件的持续发酵&#xff0c;一时间将百度推到了舆论的风口浪尖上。是非对错&#xff0c;我们在这里也不多做评判&#xff0c;本文呢为大家整理了百度开源的70项目&#xff0c;看看有没有感…
阅读更多...
C/C++开发人员要了解的几大著名C/C++开源库

C/C++开发人员要了解的几大著名C/C++开源库

目录 1、多媒体处理开源库FFmpeg 2、实时音视频处理开源库WebRTC 3、Chrome浏览器内核开源库Chromium 4、Chromium嵌入式框架开源库CEF 5、多协议网络传输开源库libcurl 6、开源操作系统ReactOS 7、开源多媒体播放器VLC 8、最后 在开源软件盛行的今天&#xff0c;很多…
阅读更多...
网络编程资源大集合(包含前端、java、linux、安卓、github开源项目、开发工具等)

网络编程资源大集合(包含前端、java、linux、安卓、github开源项目、开发工具等)

以下内容来自转载&#xff08;非常感谢此文第一作者&#xff09;&#xff1a; 1.安卓各组件介绍 一、ListView 二、ActionBar 三、Menu 四、ViewPager 、Gallery 五、GridView 六、ImageView 七、ProgressBar 八、其他 2.GitHub上优秀Android开源项目 3. Android开发神器 1.Xab…
阅读更多...
GitHub 优秀的 Android 开源项目

GitHub 优秀的 Android 开源项目

原文地址为http://www.trinea.cn/android/android-open-source-projects-view/&#xff0c;作者Trinea 主要介绍那些不错个性化的View&#xff0c;包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar及其他如Dialog、Toast、EditText、Tabl…
阅读更多...
2020年中国5G手机“期中摸底考试”：到底哪款是你的爱？

2020年中国5G手机“期中摸底考试”：到底哪款是你的爱？

数据显示&#xff0c;2020年全球5G智能手机出货量将超过2019年1900万台的10倍&#xff0c;达到1.99亿台。5G渗透率将从2019年全球所有智能手机出货量的1%增长到2020年的15%。不过&#xff0c;由于新冠肺炎疫情影响&#xff0c;2020年上半年5G智能手机市场规模比预期小很多&…
阅读更多...
主机加固介绍

主机加固介绍

最近公司做服务器安全&#xff0c;开始在市场了解产品&#xff0c;对这一块算是短暂的研究了一段时间&#xff0c;有一点心得给大家分享一下。 主机加固 最近主机加固的概念被炒得火热&#xff0c;主机加固的功能也正在被致力于服务器安全的相关人士所关注。 那么究竟什么是主…
阅读更多...
最新文章

Copyright @ 2022~2023