前端-css

css: 用来美化标签

一. css的三种应用方法

<style></style>用来写css的代码的标签

1. 在标签上使用
    <img src="" style="height:100px">

2. 在head标签中使用
    <style>
       .c1{
            color:red;
           }
    <style>

3. 外链式:其他文件中写入 2 ,在引用
    <link rel="stylesheet" href="common.css"/>
 
 

二. css选择器

ID选择器 : #id值{}
类选择器 :  .class值{}   多
标签选择器: 标签名{}   多
属性选择器:input[type="text"]{}
后代选择器:  .yy li{}  多
           .yy > a{}  # 只会找子类不会找孙类
 
多个样式覆盖问题
    不重名则联合使用.重名则以下面的为准
怎么才能不让他覆盖呢?
    .c1{color:red !important;}  样式后面加 !我特别重要

三. css样式

块级标签:
    1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。
    2.宽度支持百分比,右侧区域空白,也不给你占用　　
　　3.元素的宽度如果不设置的话，默认为父元素的宽度。

行级元素:
    1.可以和其他元素处于一行，不用必须另起一行。
　　2.元素的高度、宽度不可以设置
　　3.元素的宽度就是它包含的文字、图片的宽度，不可改变。

宽高:  
    {
      
      height:300px;  
      width:500px;
     }


去掉a标签下划线:
    text-decoration: none;

滚动条: 内容超出设置的宽高:
        overflow: auto;


背景图片

body {
    background-image: url("../images/logon.jpg");
    background-size: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; /*关键*/
    background-position: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1600px;
    z-index: -10;
    zoom: 1;
}

块级和行内标签:  
        {
             display:inline-block; # 块级和行内结合
             display:inline        # 块级转行内
             display:block         # 行内转块级
             background: url(../img/1659101824680.jpg);  # 背景图片
        }


字体设置:
    font{        
        color: red;          # 颜色   
        font-size: 50px;     #字体大小
        font-weight: 900px;  # 设置粗细
        font-height: 200px;  # 设置文字行高
        font-family: 宋体;   # 字体样式
        background-color: aqua # 背景色
        font-family: 宋体;         # 字体样式
        ext-decoration: underline; # 设置文字下划线
        text-decoration: none;      # 去掉下划线
        text-indent: 100px;          # 设置首行缩进
        text-shadow: 0 0 10px red,0 0 20px red,0 0 30px red,0 0 40px red;	//设置发光效果
        
        

        字体过长使用...
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
             
    }


文字的对齐方式:
    div{ 
        line-height:500px;         # 行高,500px垂直居中
        text-align: center         # 水平居中,可以左可以右(right),可以居中

        border: 1px solid red;          # 边框线
        border-top: 5px solid #000000;  # 边框线:上下左右
        border-bottom: 10px solid green;
        border-left: 5px solid gold;
        border-right: 10px solid pink;         
        }



浮动:
    {  
        float: left;  # 左浮动:浮动可以让块元素排列一行
        float: right; # 右浮动
        clear:both;   # div浮动起来后就就会脱离文档流; 需要加一个both拽回来      
    }

边距:
    {
        padding: 10px # 内边距: 就是设置自己内部的边距
            padding-top: 20px;   上
            padding-left:20px;   左
            padding-right:20px;  右
            padding-bottom:20px; 下

        margin: 10px; # 外边距:  我距离别人的距离
            margin-top:20px; 上
    }


内容居中:
    {
        margin:0 auto; #  内容居中


        区域居中: 自己要有宽度+ margin-left:auto;margin-right:auto;
        width: 988px;
        margin:0 auto;

        文本居中: 文本会在这个区域中居中
        width:200px;
        text-align:center;
    }
    
    body标签:默认有一个边距,造成页面四边都有白色的边距,如何去除呢?
      body{
           margin:0; 去掉两边间距
         }

阴影:
     box-shadow: 10px 20px 30px red;

    第一个值  水平偏移量  设置阴影的水平位置  正数向右移动 负数向左移动

    第二个值  垂直偏移量  设置阴影的水平位置  正数向下移动  负数向上移动

    第三个值  阴影的模糊程度

    第四个值  阴影的颜色

圆角:
    border-radius: 50px;


总结:
    1. 父类没有高度或宽度会被子类支撑起来
    2. 如果有浮动(float),一定要加 clear:both
    3. a标签是行内标签,行内标签的高度.内外边距,默认无效,默认有下划线
    4. 设置透明度: opacity: 0.5;   透明度在0-1之间;

四.css伪类

1. hover: 鼠标放上触发事件
    .c2:hover{
            border: 3px solid green; # 鼠标放上显示边框
        }

    .download{
            display: none;  # 将标签默认隐藏起来,不显示
        }
 
    .app:hover .download{      # .app是父类属性,需要有共同的父类
            display: block;  # 设置鼠标放到区域显示隐藏标签
        }
 
    .app:hover .title{  # 文字过长,鼠标放到区域显示
            color:red;
        }

2. after: 在文本尾部添加东西
    .clearfix:after{ /*可以将浮动起来的元素后面加上拽回*/
            content:""; # 插入
            display:block; # 修改成块级标签
            clear:both;  # 浮动拽回
        }

        .item{
            float:left; /*浮动*/
        }


3. position:定位
    1. fixed: 固定在窗口的某个位置
        .back{
            position: fixed;  # 定位
            height: 60px;
            width:60px;
            border:1px solid red; # 边框
            right: 10px;  # 有部
            bottom:50px; # 底部
        }
 
    2. relative :相对于...放到..

    3. absolute:一般和relative联合使用
        .app{
            position:relative;  # 外框区域
        }
        .app .download{
            position:absolute; # 相对于外框区域内活动
            height:100px;
            width:100px;
            display:none; # 隐藏元素
        }
        .app:hover .download{
            display: block; # 鼠标放到区域显示元素
        }


4. border:边框
     border:3px solid red; /*全部边框:边框粗度 类型 颜色*/
     border-left: 3px solid #00ff7f; /*左边框*/
     .c1{
            height:50px;
            width:500px;
            margin: 100px; # 外边距
            background-color: #5f5750; # 背景颜色
 
            border-left: 2px solid transparent; /*透明色*/ # 边框样式
 
        }
        .c1:hover{
         border-left: 2px solid red;
 
        }
 
 
 
5. 背景色:
        background-color: #5f5750;

 五. BootStrap第三方插件

bootstrap是别人帮我们写好的css样式,我们如果想要使用这个BootStrap
    1. 下载BootStrap
            地址: https://v3.bootcss.com/
            下载-->用于生产环境的下载-->解压-->pycharm创建一个新目录
            新目录下创建: css/img/js/plugins 文件夹
            将解压的文件放到 plugins(插件都放这里)文件夹下
 
    2. 使用
        在页面上引入BootStrap
        编写html时,按照BootStrap的规定来编写+自定制
        <!--开发版本-->
        <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
 
        <!-- 生产版本-->
        <!--    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">-->
     
    3. 里面有很多样式可以使用


    4. 图标组件: bootstrap提供不多
        fontawesome组件,如果图标加颜色和大小:可以直接在里面加样式
            https://fontawesome.dashgame.com/
            点击直接下载-->解压-->放到plugins文件夹下
            引用: 开发用.css ;线上用min.css
                <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
 
     
    5. BootStrap依赖:下载jQuery
            BootStrap依赖JavaScript的类库,jQuery
                1. 下载jQuery,在页面上应用上jQuery
                        https://jquery.com/
 
                    jquery.com-->Download jQuery--> 选择Download the compressed, production jQuery 3.6.1打开
                    在pycharm中的static/js创建一个.js文件-->内容拷贝进去
 
                2. 在页面上应用BootStrap的JavaScript类库:动态解锁,写在body里的下面
                    <script src="static/js/jquery-3.6.1.min.js"></script>
                    <script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>

六. 引入时间插件

对于时间的选择:不能输入,要选择(插件) - datetimepicker
官方文档: http://www.bootcss.com/p/bootstrap-datetimepicker/
- 下载插件
    https://codeload.github.com/smalot/bootstrap-datetimepicker/zip/refs/heads/master



时间插件
引入css
<link rel="stylesheet" href="bootstrap/bootstrap.css">
<link rel="stylesheet" href="datetimepicker/bootstrap-datetimepicker.css">


<input type="text" id="dt" class="form-control" placeholder="入职日期">


引入js
<script src="jquery.js">
<script src="bootstrap/bootstrap.js">
<script src="datetimepicker/bootstrap-datetimepicker.js">
<script src="datetimepicker/locales/bootstrap-datetimepicker.zh-CN.min.js">

<script>
       $(function(){
        $('#dt').datetimepicker({
            language:'zh-CN',
            format: 'yyyy-mm-dd', //设置日期格式
            minView: "month",//设置只显示到月份
            todayBtn:"true"
            });
    })
</script>
modelform会自动生成id