python-web开发[11]之css样式学习

css用于标签样式美化

3.1快速了解

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

3.2 css应用方式

在标签上应用

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

在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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

3.3 选择器选择

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

.c1{}

<div class="c1"> div>
1
2
3

2.id选择器: #c2 id

#c2{}

<div id="c2"> div>
1
2
3

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

div{} /**关联body中所有的div标签 **/ <div >xxxxdiv>
span{} /**关联body中所有的div标签 **/ <span >xxxxspan>
1
2

4.属性选择器

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

.v1[xx='456']{color: red;}
<div class="v1" xx='123'>adiv>
<div class="v1" xx='456'>bdiv>/**只用这个才会被应用上述格式**/
<div class="v1" xx='789'>cdiv>
1
2
3
4
5
6

5.后代选择器

.yy li{color:pink;}

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

<div >
  <ul>
    <li>chinali>
    <li>usali>
    <li>beijingli>
    ul>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.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>chinali>
    <li>usali>
    <li>beijingli>
    ul>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

.c1{color:red !important;
    border:1px solid red;
  }
.c2{color:red;
    border:1px green;
    font_size: 28px
  }
1
2
3
4
5
6
7

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";
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、块级标签和行内标签

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

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

<span class="c1">chinaspan>
<span class="c1">usaspan>
<span class="c1">bejingspan>
1
2
3

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

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

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


"item">china
"item">beijing
"item">chaoyang
1
2
3
4
5
6
7
8
9
10
11

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


'blackground: dodgerbule;'>
    "item">china
    "item">beijing
    "item">chaoyang
    'clear: both;'>
 /** 将浮动的内容拉回来固定,回归父子的标签样式(外层div)**/

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>
1
2
3
4
5
6
7
8
9
10
11
12
13

3.5 小结

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

body{
	margin: 0;
}
1
2
3

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

<div style="width: 200px; text-align: center;">jasminexjfdiv>
1

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

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

<div class="container">
	adfasdf
div>
1
2
3
4
5
6
7
8

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

在这里插入图片描述

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

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

小米案例case

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jasminexjf_xioamititle>
    <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>MIUIa>
                <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

相关阅读:
从底层原理看Android的序列化是如何实现的
 工控机连接Profinet转Modbus RTU网关与水泵变频器Modbus通讯配置案例
 如何将接口的返回值中所需信息提取出来作为其他接口的入参使用（postman与jmeter的使用）
小程序添加隐私保护指引弹框（包含配置隐私保护指引方法）
SpringBoot启动流程源码分析
 基于粒子群优化算法的冷热电联供型综合能源系统运行优化（Matlab代码实现）
在Fedora 16 linux下安装USB无线网卡驱动rtl88x2bu
[项目管理-24]：非暴力沟通的本质就是：”用大家都舒服的方式解决问题“
用队列实现栈-力扣
 Halcon (3):窗体常用语法使用
原文地址：https://blog.csdn.net/Jasminexjf/article/details/127458062