美文网首页
day03(标签+css选择器)

day03(标签+css选择器)

作者: 很普通的人 | 来源:发表于2018-07-11 20:37 被阅读0次

    标签的分类

    1.1 块标签

    h1 ,p,ul,li,dl,dt,dd,
    特点:独占一行,能设置width,height
    

    1.2 内联标签

    a ,span,i,em,strong
    特点:并排显示,不能设置width,height   不能设置margin-top,margin-bottom
    

    1.3 内联块

    input,img,button
    特点:1.并排显示,设置width,height
    
    • 内联元素和内联块元素 块标签转化
    display:block;块标签默认值;
    display:inline;内联标签默认值;
    display:inline-block;内联块标签默认;
    想转化成什么就加纳个默认值;
    

    不改变内联和内联块的属性,实现水平居中

    父级{
    text-align:content;
    }
    

    css选择器
    定义:选定你所要改变的元素的一种方式。

    2.1分类

     (1).css元素选择器
    文档的元素就是最基本的选择器
    p{color:pink}
     (2).class选择器
    .test{color:yellow}
    (3).id选择器
    #first{color:blue}
     (4).分组选择器
    p,h4{background:gray}
    (5).后代选择器
    div>span{} //选取div所有子元素为span的标签
    (6).兄弟选择器
    div+p{}选取紧邻div之后的第一个兄弟元素
    div~p{}选取紧邻div之后的所有兄弟元素
    (7).伪类选择器
    div:hover{}
    input:focus{}
    (8).伪元素
    ":before" 伪元素可以在元素的内容前面插入新内容
    p:before{
      content:''
    }
    ":after" 伪元素可以在元素的内容之后插入新内容。
    p:after{
     content:''
    }
    (9).属性选择
    div[class='test']{}
    

    2.2选择器的优先级别排序

    <div class='test' id='first'>hello world</div>
    元素选择器<class选择器<ID选择器<!important
    div{color:pink}<div.test{color:blue}<div#first{color:yellow}<div{color:red !important}
    

    问题

    1下划线

    text-decoration:none underline overline

    相关文章

      网友评论

          本文标题:day03(标签+css选择器)

          本文链接:https://www.haomeiwen.com/subject/hlzcpftx.html