二、Flask学习之CSS

1.CSS在HTML中的三种表示方法

1.1 直接在标签中添加

<div>
    <span style="color: orange">
        欢迎光临
    span>
div>

1.2 在头部添加

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getNewstitle>
    <style>
        .name1{
            color: orange;
        }
    style>
head>
<body>
    <h1>欢迎访问本系统h1>
    <div>
        <span class="name1">
            欢迎光临
        span>
    div>
body>
html>

1.3 单独在文件添加

mycss.css

.name1{
    color: orange;
}

html文件:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getNewstitle>
    <link rel="stylesheet" href="/mycss.css">
head>
<body>
    <h1>欢迎访问本系统h1>
    <div>
        <span class="name1">
            欢迎光临
        span>
    div>
body>
html>

上面三种表示的结果是一样的。

2.CSS选择器

CSS有多种选择器:

  1. ID选择器(使用#)

  2. 类选择器(使用.)

  3. 标签选择器

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1title>
    <style>
        #name1{
            color: orange;
        }
        .name2{
            color: blue;
        }
        li{
            color: purple;
         }
    style>
head>
<body>
    <h1 class="name2">pandah1>
    <h2 id="name1">pandah2>
    <ul>
        <li>pandali>
        <li>pandali>
        <li>pandali>
    ul>
body>
html>

效果:

二、Flask学习之CSS_第1张图片

  1. 属性选择器
  2. 后代选择器

3.CSS样式

3.1高度和宽度

  • 宽度是可以支持百分比的
  • 等块级标签默认是有效的
  • 等行内标签默认无效
<style>
    .name1{
        height: 500px;
        width: 300px;
    }
style>

3.2块级标签和行内标签

使用CSS样式displsy:inline-block可以使标签既有块级标签的特性又有行内标签的特性:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1title>
    <style>
        .name1{
            display:inline-block;
            height: 100px;
            width: 300px;
            border: 1px pink;
            color: deeppink;
        }
    style>
head>
<body>
    <span class="name1">pandaspan>
body>
html>

3.3字体




    
    demo1
    


    panda


CSS可以设置字体样式:font-size用于设置字体大小,font-weight用于设置字体的粗细,font-family用于设置字体样式

3.4对齐方式




    
    demo1
    


    
panda

效果:

二、Flask学习之CSS_第2张图片

3.5浮动

行内标签的浮动,默认是在左侧,可以设置float参数放到右侧:

<span style="float: right">pandaspan>

image-20240118205352805

标签的浮动有些特殊,需要在最后加上:




    
    demo1
    


    
panda
panda
panda

3.6边距

  1. 内边距

    内边距是指距离自己的边框的距离,有上下左右四种:
    写法一:

    
    
    
        
        demo1
        
    
    
        
    panda panda

    写法二:

    padding: 30px 20px 30px 20px;
    

    padding的后面的顺序是上右下左,按照顺时针的顺序。

    结果:

    二、Flask学习之CSS_第3张图片

  2. 外边距

    外边距是指距离其他边框的距离:

    
    
    
        
        demo1
        
    
    
        
    panda panda

    效果:

    二、Flask学习之CSS_第4张图片

你可能感兴趣的:(Web开发,python,学习笔记,flask,学习,css)