视频教程地址

CSS样式 -专门用来美化标签的

1. 体系也很庞大,知识点也很多 后期会学其他模板 来拷贝和改造 就可以省去很多功夫了
   先学核心 学会后才能 去做其他的.

• 基础CSS,写简单的页面,看懂,可以改别人的
• 模板 调整和修改

2. 快速了解
   
   
   中国联通
   
   一个标签上 有syle 标签就是在定义样式
3. CSS的应用方式(三种)
   1. 直接在标签上应用 用的少
      
      
      中国联通
   2. 在head标签中写style标签 - 给某个样式起个名字c1 如果需要使用在标签中写class'=c1'就把head中的样式应用过去了,用的很多

   
   	
   	
   	
   
   
   	
   用户登录
    
   
   

   3. 写到文件中 - 适用于写多个html页面,css样式就可以从一个文件中引入,用的也多. 在flask中css文件放在static目录下

   
   	
   	
   	 
   
   
   	
   用户登录
    
   
   

4. 案例 flask 中的应用
   html代码如下

    
    
      
    


这是一个用head方法引入css标题
这是一个用外部文件方法引入css标题
  

    
   
    用户名: 
    

    
  
    用户名: 
    
    

css文件位置和内容如下:

最终效果如下:

tips:pycharm 其实可以直接预览html的效果,可以不用每次都重启flask去查看,方便学习与开发 如下图:

5. css选择器 :

   1. 类选择器 - .c1:定义 class='c1':调用 这个用的最多

   .c1{
   	color:red;
   }
   xxx
   
   

   2. #c1:ID选择器 - #c1:定义 id='c1':调用,用的少

   #c1{
   	color:red;
   }
   xxx
   
   

   3. 标签:标签选择器 - html标签定义 所有标签全部应用 用的较多

   div{
   	color:red;
   }
   xxx
   
   

   4. 属性选择器 - 通过[]符号 找到相同属性的标签 使用css样式 用的少

   input[type='text']{
   	color:red;
   }
   xxx
   
   

   假设html为:
   

   ssss

   .v1[xx='456']{
   	color:red;
   }
   

   5. 后代选择器 -先找到类 再找到类下面的标签 去改变 ,不属于此类下面的标签不变. 用的较多

   假设html为:

   
   	
   
   		
   1
   		
   2
   		
   3
   	
   

   
   .yy li{
   	color:red;
   }
   

   
   .yy > li{
   	color:red;
   }
   

6. 多个样式和覆盖的问题

   1. 可以用多个样式
      xxxxxx
      - 如果不重复两个里面的样式都会应用
   2. 如果重复了,后面的会覆盖前面的.不是调用时候的顺序,是跟定义CSS时候的顺序有关系.
   3. 补充如果就是不想覆盖 这样写 color:red !important; !important表示我非常重要,即使重名也不要覆盖我.比较少用.

7. css具体的各种样式

   1. 高度和宽度
   2. 块级和行内标签
      1. 块级 让变大也不变
      2. 行内 让缩小 虽然缩小但还是站整行
      3. css样式:标签 -> display:inline-block 使用这个样式可以同时具备块级和行内标签的特点

         123
         456
         

         效果如下
         
      4. 块级标签可以通过style="display: inline"; 变成行内标签 ,反之同理style="display: block";可以把行内标签编程块级标签.
      5. 注意:块级+块级&行内用的多 ,块级方便布局,块级&行内 方便调整行内标签的大小布局等
   3. 字体和颜色的设置
      1. 颜色 大小 加粗 字体格式

   4. 文字的对齐方式

      aaaaaa
      

   5. 浮动

      
      	左面
      	
      div 也可以浮动,解决块级站整行的问题,会变成自己有多宽占多宽.
      

   
   	
   左面
   	
   右边
   
   

   效果如下:
   3. 如果标签浮动起来后,就飘起来了,就会脱离文档流,导致不能撑起父类的内容,会将下面的内容覆盖掉.可以在浮动元素的最下面加上
      将他拽回来.
8. 内边距 - 内部的数据离边框的距离
   padding-top:20px; 距离上内边距,
   padding-left:20px; 距离左内边距,
   padding-right:20px; 距离右内边距,
   padding-bottom:20px; 距离底部内边距,
   padding:20px; 同时增加上下左右全部的内边距,
   padding:20px 10px 5px 20px; 上右下左分别设置,顺时针设置
9. 外边距 -外部的距离,自己没增大 与周边的元素距离是多少
   margin-top:20px; 距离上外边距,
   margin-left:20px; 距离左外边距,
   margin-right:20px; 距离右外边距,
   margin-bottom:20px; 距离底部外边距,
   margin:20px; 同时增加上下左右全部的外边距,
   margin:20px 10px 5px 20px; 上右下左分别设置,顺时针设置

    
    
  


  

    

      

        小米商城
        MIUI
        云服务
        有品
        开放平台
      
      

        登录
        注册
        消息
        通知