zoukankan      html  css  js  c++  java
  • css基础语法一(选择器与css导入方式)

      页面中,所有的CSS代码,需要写入到<style></style>标签中。style标签的type属性应该选择text/css,但是type属性可以省略。

      CSS修改页面中的所有标签,必须借助选择器选中。选择器中,可以写多对CSS属性,用{}包裹: 每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔

            选择器{
                        属性1:属性值1;
                        属性2:属性值2;
                      } 

    【CSS常用选择器】

      1、标签选择器
           写法: HTML标签名{}
           作用: 可以选中页面中,所有与选择器同名的HTML标签。

      2、 类选择器(class选择器)
             写法: .class名{}
            调用: 在需要调用选择器样式的标签上,使用class="class名"调用选择器
            优先级: >标签选择器

      3、ID 选择器
           写法: #ID名{}
           调用: 需要调用样式的标签,起一个id="ID名"
           优先级: ID选择器>class选择器
           注意: 一个页面中,不能出现同名ID

    【Class选择器与ID选择器的区别】
      1、 写法不同:class选择器用.声明,ID选择器用#声明;
      2、 优先级不同: ID选择器>class选择器
      3、 作用范围不同: class选择器可以多次调用,ID选择器只能使用一次。

    【选择器的命名规范】
     1、只能有字母、数字、下划线、减号组成;
     2、 开头不能是数字。也不能是只有一个减号。
        一般,起名要求有语义,使用英文单词与数字的组合。

    4、通用选择器
           写法: *{}
          作用: 可以选中页面中所有的HTML标签。
          优先级: 最低!!!

    5、并集选择器
          写法: 选择器1,选择器2,……,选择器n{}
          生效规则: 多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。

    6、交集选择器
         写法: 选择器1选择器2……选择器n{} 所有选择器紧挨着,没有分隔
         生效规则: 多个选择器取交集,则必须满足所有选择器的要求,才能生效

    7、后代选择器
         写法: 选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔
         生效规则: 只要满足,后一选择器是前一个选择器的后代,即可成效。(后代包括子代、孙代、重孙代。。。)
         通俗的讲:只要后一个选择器,在前一个选择器里面即可。

    8、子代选择器
         写法: 选择器1>选择器2>……>选择器n{} 选择器之间用>分隔
         生效规则: 必须满足,后一个选择器是前一个选择器的直接子代,才能生效。(中间不能间隔任何标签)

    【优先级的权重问题】

    1、CSS生效的第一原则是“近者优先”!即,哪个选择器作用于最里层标签,则这个选择器生效;
    2、当选择器作用于同一层时,可以根据优先级权重,进行累加计算:
         ID选择器*100 > class选择器*10 > 标签选择器*1
         注意: 并集选择器,相当于多个选择器拆开写,所以,并集选择器的优先级不能累加。
    3、 当选择器作用于同一层,且优先级权重相等时。则,写在最后的选择器生效。

    【引入CSS的三种方式】

     1、 行内样式表:直接在HTML标签中,使用style=""的方式引用;
        <div style="height: 100px;"></div>
        优点: 使用灵活,优先级权重最高?
        缺点:不符合W3C关于“内容与表现分离”的要求;不利于样式复用;
     2、 内部样式表: 在<head></head>标签中,使用<style>标签包裹CSS代码;
           特点: 一定程度的实现了HTML与CSS的分离,但是分离不够彻底,没有办法多页面共用样式。
     3、 外部样式表: 将CSS单独写入CSS文件中,并与HTML文件关联。
           优点: 彻底实现HTML与CSS的分离,符合W3C规范,有利于多页面复用统一样式;
     【 导入CSS文件的两种方式】
    ① 在<head>标签中,使用link链接:
        <link rel="stylesheet" type="text/css"href="css/02-CSS.css" /> 
     ② 在<style>标签中,使用@import导入:
          @import url("css/02-CSS.css");

    【两种导入方式的区别】
     ① link属于标准的HTML标签,而@import不是标准标签;
     ② link可以兼容所有低版本浏览器,而@import只在CSS2之后能用;
     ③ link是将两个文件链接起来,起桥梁作用; 而@import相当于将CSS文件复制到HTML文件中;
     ④ link会在HTML文件边加载的过程中,边链接CSS文件;
          @import会在HTML文件全部加载完以后,再导入CSS文件;
     综上所述,我们使用link链接的方式,加载CSS文件。

  • 相关阅读:
    用面向对象做练习题
    面向对象
    php数组
    PHP函数
    php语句函数
    mySQL函数
    mySQL相关知识
    mySQL建表及练习题(下)
    mySQL建表及练习题(上)
    HTML5 canvas画布标签
  • 原文地址:https://www.cnblogs.com/liuqiang1109/p/7352513.html
Copyright © 2011-2022 走看看