zoukankan      html  css  js  c++  java
  • CSS自定义样式

    CSS自定义样式

    1. 自定义字体

    先将字体文件放到web服务器上,需要时自动下载到用户计算机上

    属性:@font-face
    例: @font-face{
            font-family:myFont;
            src:url("自定义字体路径");
        }
    
    p{font-family:myFont;}
    

    注意:一次只能引入一种字体,引入多种字体需要写多个@font-face。

    2. sprite雪碧图

    CSS雪碧,即CSS Sprite,是将小图标和背景合成到一张图片上,利用CSS背景定位来显示需要显示的图片部分。使用CSS的background和background-position属性渲染。图片是在CSS中定位,不是<img>标签。

    CSS优先级和权重值

    1. 优先级:即层叠顺序

    2. 权重值

    权重值 a b c d
    内嵌样式 1 0 0 0
    ID选择器 0 1 0 0
    类、伪类、属性 0 0 1 0
    元素选择器 0 0 0 1

    通用选择器(*),子选择器(>)和兄弟选择器(+,~)权重值均为0000

    !important可以使其他选择器均失效
    写法:{color:red!important}
    

    CSS盒模型

    1.1 一个独立盒子的内部结构

    1.内容: 2.padding:内边距 3.border:边框 4:margin:外边框

    1.1.1 padding外边距

    元素边框与元素内容之间的空白区域(同border用法类似,没有负值,负值不起作用)

    padding-top       上
    padding-right     右
    padding-bottom    下
    padding-left      左
    

    1.1.2 margin外边距(同padding用法类似,值可以为负)

    margin的居中属性:
    margin:o auto;  可以让块级元素水平居中,需设置宽度
    

    1.1.3 border边框

    透明边框:  border-color:transparent
    

    1.1.4 两种盒模型的区别

    W3C标准盒子模型:
    元素空间高度:content+padding+border+margin
    IE盒子模型:
    元素空间高度:content+margin
    

    1.2 多个盒子之间的相互关系

    1.2.1 DOM树

    1.2.2 常规流布局,即文档流。

    1.2.3浮动

    属性:float:left,right,none,inherit
    说明:left,right常用;inherit表示从父元素继承浮动属性的值
    

    浮动的特性:
    1.会造成父级元素高度的崩塌(前提父级元素没有设置高度);父级元素崩塌后,后面的元素自动排列到上面去,但是文字不会(即不会被浮动的块元素覆盖),文字会自动环绕在四周。
    2.对兄弟元素的位置影响

    1.2.4 清除浮动

    1 overflow:hidden
    2 清除浮动 clear 属性(both,left,right,none)
    3 :after{
        content:"";
        display:block;
        clear:both;
       }
    

    说明:第二种是先在父元素里设置一个新标签,再给新添加的标签设置一个样式。

  • 相关阅读:
    oracle 7月份更新CVE-2020-14645 T3反序列化 Weblogic12.2.1.4.0 JNDI注入 Payload 复现&利用
    oracle 7月份更新 CVE-2020-14625 复现&利用
    Citrix Systems产品安全漏洞 CVE-2020-8193, CVE-2020-8195 and CVE-2020-8196 poc
    cve-2020-5902 RCE的payload以及绕过方式
    cve-2020-5902 BIG-IP RCE漏洞复现&exp
    Tomcat基于Servlet的无文件webshell的相关技术研究
    JBOSS 无文件webshell的技术研究
    weblogic 无文件webshell的技术研究
    java 获取包下的类 find all classes in a package
    冰蝎改造之适配基于tomcat Filter的无文件webshell
  • 原文地址:https://www.cnblogs.com/justsilky/p/6789922.html
Copyright © 2011-2022 走看看