Blogger Information
Blog 9
fans 0
comment 0
visits 6075
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实例演示css规则的三种引入到html文档中的方式 实例演示标签选择器,class选择器,id选择器,上下文选择器, 结构伪类选择器,重点是结构伪类选择器
蔡威
Original
534 people have browsed it

1. 实例演示css规则的三种引入到html文档中的方式;

  • 内部引用
    1. <style type = "text/css"> 这是在html head中直接写为内部引用
    2. 格式为代码 选择器 {属性名:属性值 ; 属性名:属性值 ...}
    3. p {
    4. padding: 50px;
    5. font-size: 1.5em; /*有了插件打fz1.5 tab 就能打出来了,真方便*/
    6. }
    7. .bd { /*class选择器*/
    8. border: 1px solid rgb(228, 7, 7);
    9. }
    10. </style>
    11. </head>
    12. <body>
    13. <div class="bd">
    14. <p>它的上下有间距</p>
    15. </div>
    16. </body>
    -外部引用 也是通常用的方法
    -行内引用 优先级最高,但不利于批量修改 一般不用
    三种引入方式

2. 实例演示标签选择器,class选择器,id选择器,上下文选择器, 结构伪类选择器,重点是结构伪类选择器

  • tab {属性名:属性值 ; 属性名:属性值 …}
  • .class {属性名:属性值 ; 属性名:属性值 …}
  • /#id {属性名:属性值 ; 属性名:属性值 …} 实际/是想反译 ..
  • 上下文选择器
    1 后代选择器 选择器1 选择器2 { } 选择器间是空格
    2 父子选择器 选择器1>选择器2 … {} 选中的是1中且2中的元素
    3 相邻选择器 选择器1 + 选择器2 {} 选中 1 相邻 2 元素
    4 同级指定位置后 选择器1 + 选择器2 {} 选中 1 后 2 的所有元素

老师费神了

  • 伪类…不是很明白 呢

    有结构伪类 nth + of + type (an +b)

    an 是起始点 b 是偏移量
    first - of -type 第一个
    nth-of-type (1n) 所有
    nth-of-type (2n) 偶数
    nth-of-type (2n+1) 奇数
    nth-of-type (-3) 倒数三个

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:最简单的选择器, 反而是最强大的, 伪类只是理解难度大而已,并非最重要的 , 因为它的功能完全可以用简单选择器替代的,不用伪类一样布局
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post