zoukankan      html  css  js  c++  java
  • css 命名 有的加# ,有的加点 ,有的没加。请问下都在什么情况下用的?

    【nav{}】
    这样的样式是给特定的标签直接定义样式时使用的,这个样式名称是跟标签是相对应的,比如我要给<p></p>这个标签设置样式,那我就可以直接写:p{样式}就可以,但是这样写并没有特指某个标签,而是指的页面内所有<p>标签的样式,所以,使用了这种方法,那么只要你的页面里有<p>这个标签的,那他们的样式就是统一的样式;
    【.nav{}】这种前面加 “.” 的样式,是说明该样式是由类调用的,也就是容器是使用class调用这个样式的,这种样式是可以被多个不同的容器多次重复调用而没有限制的,属于共有样式;
    【#nav{}】这种前面加 “#” 的样式是ID调用的,就是容器使用id=“#nav”这样来调用的,这样的样式是一次性的,专有的样式,即该样式只能是一个指定的容器只能调用一次这个样式,其他容器不能再次调用这个样式,也不可以多次调用,属于私有样式;
    【关于调用样式的技巧】
    举个例子:
    <div class="demo1" id="demo2">示例一</div>
    <div class="demo1" id="demo3">示例二</div>
    <div class="demo4" id="demo5">示例三</div>

    这是两个div,容器是可以同时使用class和id调用样式的,这样的好处在于可以将两个div的共同样式放在类样式里面,而各自不同的样式可以放在id样式里面,这样就避免重复写大量相同代码造成冗余的情况发生!
    示例一的需要的样式是红色、宋体字,示例二是黑色、宋体字,而这三个示例都需要水平居中显示,那么他们的共同点就是示例一和示例二都需要宋体字,三个示例都要居中显示,那么就可以这样写样式:
    <style>
    <!--
    .demo1{font-family:"宋体";} /*宋体字*/
    #demo2{color:red;} /*红色色*/
    #demo3{color:black;} /*黑色*/
    div{margin:0 auto;} /*将页面内所有div居中显示*/
    -->
    </style>
    这样就可以避免重复写很多不需要多次写的重复代码

  • 相关阅读:
    docker as engitor及云构建devops选型
    elmlang:一种编码和可视化调试支持内置的语言系统
    engitor:基于jupyter,一个一体化的语言,IDE及通用分布式架构环境
    【Heritrix基础教程之3】Heritrix的基本架构
    Eclipse 快捷键大全
    【Heritrix基础教程之2】Heritrix基本内容介绍
    【Heritrix基础教程之1】在Eclipse中配置Heritrix
    Berkeley DB基础教程
    【搜索引擎Jediael开发笔记】v0.1完整代码
    【搜索引擎Jediael开发笔记】V0.1完整代码
  • 原文地址:https://www.cnblogs.com/herizai/p/8459929.html
Copyright © 2011-2022 走看看