• Python web前端 02 CSS


    Python web前端 02 CSS

    一、选择器

      1、CSS的几种样式(CSS用来修饰、美化网页的)

    #建立模板
    复制内容--->SETTING---> Editor ----->font (SIZE:修改字体大小)----> color scheme(背景)---->File and Code Templates(建立模板) ----->Scheme(改成Project)---->将刚复制的内容粘贴到上面,那么以后创建的html文件就自动变成那么模板了
    #在head上面的style里面设置的样式叫做内嵌的CSS样式
    #在body里面自己设置的style样式叫做行间样式
    
    #基于这种原理,一个网页的CSS样式成千上万,所以需要在外面创建一个stylesheet表来设置CSS,然后在原来的html文件中引入这个CSS,在title下面输入<link rel="stylesheet" href="(相对路径中的CSS文件名)">
    #关于CSS样式设置优先级的问题
    #都是对div(或任何其他的)的修饰的时,遵循从近原则,哪里离body近就选择哪个,而行间样式的优先级是最高的,但只能作用于修饰的单个div

      2、基本选择器:元素选择器、通配符选择器、class选择器、id选择器

    #元素选择器(标签选择器)div p
    #选择相同的元素对相同的元素设置一种css样式,选中页面中所有的此元素
    
    #通配符选择器 *   :所有的行间距都为0(把这段话加到模板里面)
    *{ margin:0;padding:0;}
    
    #class选择器  
    #给标签设置一个class属性,在写样式时,在class名字前面加个“.” ,一般给具有相同属性的元素设置同一个class
    
    #id选择器  
    #给标签设置一个id属性,写样式时要在id名字前加个“#”,id名字不要重名
    
    #优先级:id> class>标签选择器div p >通配符选择器 *

      3、复杂选择器:群组选择器、兄弟选择器、子代选择器、相邻选择器、子代选择器

    #群组选择器 ,
    #若希望div和p标签样式一样,可以再上面的style上面直接用div,p{设置样式},用逗号隔开,两者样式相同,三者以上也都可以
    
    #兄弟选择器 ~
    #若想要设置一个div下面的p标签的样式,可以在上面的style内添加div~p{设置样式},只会选择后面的,不会选择前面的
    
    #子代选择器 >
    #div下面的内嵌div若要设置样式,div>div{设置样式},同样继续内嵌的可以继续用>号,div>div>span{设置样式}
    
    #相邻选择器 +
    #若要设置某个div相邻的p标签的样式,可以用div+p{设置样式},只要满足条件都会触发,也可用两个+号,表示"三连坐"
    
    #后代选择器 空格
    #现在有ul下面3个li,ol下面3个li,若要设置ul下面的li的样式,可以再上面的style上 用ul li{设置样式},这个子代选择器可以用多个空格;若要找ul里面的class,需要直接用 ul.box li{设置样式}

       4、伪类选择器

    #伪类选择器 a标签
    #未被点击的颜色  a:link{color:blue;}
    #已被点击的颜色  a:visited{color:blueviolet;}
    #鼠标悬停其上的颜色 a:hover{color:red;} 重点
    #鼠标已经按下但是还没有释放的颜色 a:active{color:yellow;}
    
    #如果要四个都设置必须以这个顺序来设置,便捷记忆方法LoVe HATe
    #同样可以给div添加hover属性,鼠标悬浮上面变色
    div:hover{设置样式} #这是改变div
    
    div:hover p{设置样式} #这是改变div的后代p,简而言之就是找到p所在的位置
    
    #修改悬浮目标上鼠标变形手指,在hover目录下改
    div:hover{cursor:pointer;} #pointer表示手指,help表示帮助(?),wait表示等待(转圈圈),default表示默认

      5、复杂选择器的优先级

    #复杂后代选择器
    #1、先比id(最高位) class(中间位) tagName(标签个位数)
    #2、id选择器个数不相等,id越多,优先级越高
    #3、id选择器个数相同,则看class,class多的优先级高
    #4、class个数相同,就看tagName个数
    #5、最后就是从近原则

      6、复杂选择器的优点:快速找到目标

    二、table表格

    #table标签
    #分为 thead(头部) tbody(身体) tdoot(尾部)这些可写可不写,为了便于修改内部的tr而设置的
    #tr(行)th(单元格) td(多用于里面的数据)
    
    #加边框
    <table border="1"> ...  </table>#加个border即可 ,border="0"就是无边框,也可以在style里面设置table{border_collapse:collapse;}#collapse表示边框合并,如果相邻的话共用一个框,separate表示默认值,边框分开,不合并,一般开发不选择默认;text-align:center表示文字水平居中
    
    #合并单元格
    #行合并
    #如果说要合并行,在那一行的td里面设置属性 rowspan="2" 行合并2行,原来的数据会被挤走,所以记得注释掉
    
    #列合并
    #在那一列的td里面设置属性 colspan="3" 列合并3列,原数据被挤走同理要注释
    #表格名字
    #在thead前面加上caption,写上名字即可
  • 相关阅读:
    深入浅出数据库索引原理
    Mysql读写分离原理及主众同步延时如何解决
    数据库连接池实现原理
    MySQL 大表优化方案(长文)
    js-ajax-03
    js-ajax-04
    js-ajax-02
    js-ajax-01
    获取html对象方式
    js-事件总结
  • 原文地址:https://www.cnblogs.com/xuchengcheng1215/p/8624173.html
Copyright © 2020-2023  润新知