python PIL如何使用css pycharm怎么做网站怎么用css

转载

jimoshalengzhou 2024-06-07 15:08:22

文章标签 python PIL如何使用css 前端 css 学习 html 文章分类 Python 后端开发

css用于标签样式美化

3.1快速了解

<img src="...." style="height:100px"/>
<div style="color:red;">中国联通 </div>

3.2 css应用方式

在标签上应用

<img src="", style="height:100px"/>
<div style="color:red;">中国联通 </div>

在head标签上写style标签应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web开发之用户注册案例</title>
    <style>
      .c1{color:red;} /**. 与后续的class进行关联 **/
      ,c2{height:100px}
    </style>
</head>
<body>
    <h1 class ="c1">用户注册</h1>
    <div class = "c2">用户名：<input type="text"/></div>
    <div class = "c2">密码：<input type="password"/></div>
    <div class = "c2">确认提交：<input type="submit" value="请提交"></div>
</body>
</html>

将样式写到文件中 [放到static目录下，创建sccsheet文件]

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web开发之用户注册案例</title>
    <link rel="stylesheet" href="common.css"> /**样式文件链接此处 **/
</head>
<body>
    <h1 class ="c1">用户注册</h1>
    <div class = "c2">用户名：<input type="text"/></div>
    <div class = "c2">密码：<input type="password"/></div>
    <div class = "c2">确认提交：<input type="submit" value="请提交"></div>
</body>
</html>

案例： flask的css案例，如上
备注： pycharm中的html文件，写完html可以直接点击右上角的浏览器进行调试。

3.3 选择器选择

1.类选择器： .c1 class [最常用]

.c1{}

<div class="c1"> </div>

2.id选择器: #c2 id

#c2{}

<div id="c2"> </div>

3.标签选择器: li/div/span ……[针对所有的相应标签都会增加相应的结果]

div{} /**关联body中所有的div标签 **/ <div >xxxx</div>
span{} /**关联body中所有的div标签 **/ <span >xxxx</span>

4.属性选择器

input[type="text"]{border: 1px solod red;} /**body中input type='text'的标签会被应用上该格式**/

.v1[xx='456']{color: red;}
<div class="v1" xx='123'>a</div>
<div class="v1" xx='456'>b</div>/**只用这个才会被应用上述格式**/
<div class="v1" xx='789'>c</div>

5.后代选择器

.yy li{color:pink;}

<div class='yy'>  /**只用这个才会被应用上述格式**/
  <ul>
    <li>中国</li>
    <li>美国</li>
    <li>俄罗斯</li>
    </ul>
</div>

<div >
  <ul>
    <li>china</li>
    <li>usa</li>
    <li>beijing</li>
    </ul>
</div>

.yy > a{color:black;}
.yy li{color:pink;}

<div class='yy'> 
  <a>百度</a>  /**这个会被应用上述black格式**/
  <div>
    <a>阿里</a>
    <a>腾讯</a>
  </div>
  
  <ul>  
    <li>中国</li> /**这个会被应用上述pink格式**/
    <li>美国</li>
    <li>俄罗斯</li>
    </ul>
</div>

<div >
  <ul>
    <li>china</li>
    <li>usa</li>
    <li>beijing</li>
    </ul>
</div>

关于选择器的常用度：
多：类标签选择、标签选择器、后代选择器
少： ID标签选择器属性标签选择器
关于多个标签的覆盖：
当某个标签有多个样式，会将多个样式进行组合使用；如果多个样式中有重复同一个样式定义，则默认选择最后的一个样式【最后一个是指，css中的定义顺序。如果想要某个非最后的样式不被后续覆盖，则在相应的样式定义后面加： ! important】

.c1{color:red !important;
    border:1px solid red;
  }
.c2{color:red;
    border:1px green;
    font_size: 28px
  }

3.4 样式类型

1.颜色、高度、宽度、字体大小、加粗、字体、居中对齐【宽度支持百分比定义，高度不可以】

.c1{color:red;
    height:200px;
    width:50px;
    font-size:100px;
    font-weight:600;
    font-family:"Alibaba PuHuiTi";
    text-align:center; /**水平居中**/
    line-height:59x; /**当一行文本时，可以根据此进行 垂直居中**/
  }
.c1{color: #FFDAB9;
    height:200px;
    width:50%; /**宽度可以支持百分比 **/
    font-size:larger;
    font-weight:600;
    font-weight:bolder;
    font-family:"Alibaba PuHuiTi";
  }

2、块级标签和行内标签

块级
行内
css样式：标签 -> display: inline-block [同时实现行内和块级标签的融合]； display：inline变成行内标签；display：block变成块级标签。

.c1{display:inline-block;
    height:100px;
    width:300px;
    border:1px solid red;
  }

<span class="c1">china</span>
<span class="c1">usa</span>
<span class="c1">bejing</span>

备注：块级、块级+行内样式最为常用。
3、浮动
默认，标签都是在左边，如果要实现标签靠右浮动或其他样式，则可以通过以下样式实现

.c1{float:right; /**实现，标签靠右**/
  }

div的浮动，也就变成行内标签

<style>
  .item{
        float: left;
        width:200px;
        height:170px;
        border:1px solid red;
      }
</style>
<div class="item">china</div>
<div class="item">beijing</div>
<div class="item">chaoyang</div>

如果让标签浮动之后，这就会脱离文档流。会改变原有的文档流。例如如下的设置，要实现背景色不会被覆盖，则进行clear设置

<style>
  .item{
        float: left;
        width:200px;
        height:170px;
        border:1px solid red;
      }
</style>
<div style='blackground: dodgerbule;'>
    <div class="item">china</div>
    <div class="item">beijing</div>
    <div class="item">chaoyang</div>
    <div style='clear: both;'></div> /** 将浮动的内容拉回来固定,回归父子的标签样式(外层div)**/
</div>

4、内边距 /**padding对应的是设置内部样式 **/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .outer{
        border: 1px solid red;
        height: 200px;
        width: 200px;
        
        padding-top: 20px; 
        padding-left: 5px;
        padding-right: 15px;
        padding-bottom: 10px;
        padding: 20px 15px 10px 5px;/** 顺时针：上右下左 **/
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div style="background-color: gold;">听妈妈的话</div>
      <div>
        小朋友你是否有很多问号
      </div>
    </div>
  </body>
</html>

5、外边距 /**margin对应的是设置外部样式 **/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
<div style="background-color: red;height: 100px;margin-bottom: 20px;"></div>

</body>
</html>

3.5 小结

body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？

body{
	margin: 0;
}

内容居中

文本居中，文本会在这个区域中居中。

<div style="width: 200px; text-align: center;">jasminexjf</div>

区域居中，自己要有宽度 + margin-left:auto;margin-right:auto

.container{
    width: 980px;
    margin: 0 auto;
}

<div class="container">
	adfasdf
</div>

父亲没有高度或没有宽度，被孩子支撑起来。
如果存在浮动，一定记得加入。

python PIL如何使用css pycharm怎么做网站怎么用css_html

如果想要用别人的样式。
谷歌 -> 右击检查 -> 看别人样式
关于布局不知如何下手。

直接分析别人框架，从父到子进行分析框架设计。

小米案例case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jasminexjf_xioami</title>
    <style>
        body { 
            margin: 0;  /** 外边距为0 **/
        }
        .header {
            background: #333;
        }
        .container {
            width: 1226px;
            margin: 0 auto; /** 内容区域距中，如知乎内容水平距中(上下0，左右auto)，必须搭配width **/
        }
        .header .menu {
            float: left;
            color: white;
        }
        .header .account {
            float: right;
            color: white;
        }
        .header a{
            color: #b8b8b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a>小米商城</a>
                <a>MIUI</a>
                <a>云服务</a>
                <a>有品</a>
                <a>开放平台</a>
            </div>
            <div class="account">
                <a>登录</a>
                <a>注册</a>
                <a>消息通知</a>
                <a>注销</a>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。