当前位置: 首页>前端>正文

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

css用于标签样式美化

3.1快速了解

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

3.2 css应用方式

  1. 在标签上应用
<img src="", style="height:100px"/>
<div style="color:red;">中国联通 </div>
  1. 在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>
  1. 将样式写到文件中 [放到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,python PIL如何使用css pycharm怎么做网站怎么用css_python PIL如何使用css,第1张

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

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

小米案例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>



https://www.xamrdz.com/web/2e31963466.html

相关文章: