Web开发：django+前端+数据库（2）

最新推荐文章于 2024-09-30 15:42:36 发布

橘粒咕噜111

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量1.7k

点赞数 34

文章标签：前端 django

本文链接：https://blog.csdn.net/weixin_58326457/article/details/135643851

版权

CSS样式

CSS专门用来“美化”标签。

3.1快速了解

#当一个标签有style=XXX就是定义这一个样式

<img src="..." style="height: 100px" />
<div style="color: red;">好好学习</ div>

3.2 CSS应用方式

1.在标签上

<img src="..." style="height: 100px" />
<div style="color: red;">好好学习</ div>

2.在head标签中写style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
        <h1 class='c1'> 用户注册</h1>
</html>

3. 写到文件中

#this.css文件
.c1{
    height: 100px;
}
.c2{
    color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
#rel="stylesheet"是链接与页面的关系，样式表关系，即引入外部样式表文件
    <link rel="stylesheet" herf="this.css" />  #相当于导入
</head>
        <h1 class='c1'> 用户注册</h1>
        <h1 class='c2'> 用户注册</h1>
</html>

flask框架开发的不方便之处：每次都需要重启；规定有些文件必须要放在特定的文件夹；新创建一个页面（函数，HTML文件）

3.3选择器

类选择器（使用最多），ID选择器，后代选择器，标签选择器，属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
<!--    类选择器-->
        .c1{
                color:red;
        }
<!-- id选择器，类选择器可以重复，id选择器不可以-->
        #c2{
                color:gold;
        }
<!--        标签选择器-->
        li{
                color:pink;
        }
<!--        属性选择器-->
        input[type='text']{
                border: 1px solid red;
        }
        .v1[xx="456"]{
                color:black;
        }
<!--        后代选择器-->
        .dd li{
                color:blue;
        }
    </style>
</head>
<body>
        <div class="c1">中国</div>
        <div id="c2">广东</div>
        <div>联通</div>
        <ul>
                <li>北京</li>
                <li>上海</li>
                <li>深圳</li>
        </ul>
        <input type="text">
        <input type="password">
        <div class="v1" xx="123">a</div>
        <div class="v1" xx="456">b</div>
        <div class="v1" xx="789">c</div>

        <div class="dd">
                <ul>
                        <li>美国</li>
                        <li>日本</li>
                        <li>韩国</li>
                </ul>
</div>

</body>
</html>

关于多个样式和覆盖问题：

如果不重复就会一起被应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            .c1{
                    color:red;
                    border: 1px solid red;
            }
            .c2{
                    font-size: 28px;

            }
    </style>
</head>
<body>
        <div class="c1 c2">XXX</div>
</body>
</html>

有重复的则会应用CSS定义的下面一个，比如：

显示绿色，如果一定要用红色，则在color：red后面加上!important

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            .c1{
                    color:red;
                    border: 1px solid red;
            }
            .c2{
                    font-size: 28px;
                    color:green;
            }
    </style>
</head>
<body>
        <div class="c1 c2">XXX</div>
</body>
</html>

显示红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            .c2{
                    font-size: 28px;
                    color:green;
            }
            .c1{
                    color:red;
                    border: 1px solid red;
            }

    </style>
</head>
<body>
        <div class="c1 c2">XXX</div>
</body>
</html>

3.4 样式

1.高度和宽度

.c1{
    height: 300px;
    width: 500px;
}

ps:宽度支持百分比，高度不支持；行内标签默认无效，块级标签默认有效；

2.块级和行内标签

css样式：把标签转换为既具备块级标签的特点又具备行内标签的特点。

display：inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            .c1{
                    display: inline-block;
                    height: 100px;
                    width: 300px;
                    color:red;
                    border: 1px solid red;
            }
    </style>
</head>
<body>
        <span class="c1">广东</span>
</body>
</html>

<div style="display: inline;">中国</div>    —>将块级标签<div>主动变为行内标签

<span style="display: block;">广东</span>    —>将行内标签<span>主动变为块级标签

注意：块级+块级&行内

3.字体和颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            .c1{
                    height: 59px;
                    width: 300px;
                    border: 1px solid red;
                    color:#00FF7F;
                    font-size: 58px;
                    font-weight: 400;
                    font-family: Microsoft Yahei;
<!--                     水平方向居中-->
                    text-align: center;
<!--                    垂直方向居中-->
                    line-height: 59px;
            }
    </style>
</head>
<body>
        <div class="c1">广州</div>
        <div>深圳</div>
</body>
</html>

4. 浮动

标签浮动起来就会脱离文档流

5.内边距

padding-top，padding-left，padding-right，padding-bottom

padding:20px 10px 5px 20px ->上边，右边，下边，左边

padding:25px 50px 75px ->上，左右，下

padding:25px 50px ->上下，左右

padding:25px ->上下左右4个填充25px

6.外边距

margin-top，margin-bottom，margin-right，margin-left

margin:25px 50px 75px 100px ->上边，右边，下边，左边

margin:25px 50px 75px ->上，左右，下

margin:25px 50px ->上下，左右

margin:25px ->上下左右4个边距25px

margin：0 auto 区域居中

总结

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

body{
    margin: 0;
}

2.内容居中

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

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

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

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

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

3.行内标签的高度、内外边距，默认无效。

4.垂直方向居中的方式：文本+line-height；图片+边距

5.当标签默认有下划线，去掉下划线用line-decoration：none

6.鼠标放上去可以跳转hover


.c1:hover{
    ...
}
a:hover{

}

7. 设置图片透明度用opacity：0.X（数值范围是0~1）

8.清除浮动用clearfix

3.5 伪类

CSS伪类是用来添加一些选择器的特殊效果，例如hover和after

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

:after 选择器向选定元素的最后子元素后面插入内容。

3.6 position（fixed，relative，absolute）

fixed：固定在窗口的某个位置

relative：相对定位元素的定位是相对其正常位置。

absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>（relative和absolute一般一起用）。

3.7 border — 边框

border 是边框属性的简写属性。

border: solid; /* 边框样式 */
border: 2px dotted; /* 边框宽度 | 边框样式 */
border: outset #f33; /* 边框样式 | 边框颜色 */
border: medium dashed green; /* 边框宽度 | 边框样式 | 边框颜色 */
border: inherit; border: initial; border: unset; /* 全局值 */

3.8 background-color — 背景色

默认值为transport（透明）

#设置不同元素的背景色：
body
{
    background-color:yellow;
}
h1
{
    background-color:#00ff00;
}
p
{
    background-color:rgb(255,0,255);
}

橘粒咕噜111

关注

34
点赞
踩
39

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫