04_CSS基础语法

CSS基础语法

• CSS全称cascading style sheets,层叠式样式表，是一种用来表现HTML的文件样式的计算机语言。

• 作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化

• CSS的组成

  • 层叠式

    css中贯穿始终的加载特性

    • 层叠性
    • 继承性

  • 样式

    定义如何显示HTML元素

    • 文字文本
    • 背景
    • 盒模型
    • 浮动
    • 定位
    • 其他

CSS语法

CSS规则

• CSS规则由两个主要的部分构成：选择器，以及一条或多条生命

  p{   //选择器
  width:300px;     //属性名：属性值
      fount-size:14px
  }
  

• 书写位置

  css的代码根据书写位置不同分为四种书写方式：内联式、内嵌式、外联式、导入式

  • 内联式

    • 内联式，也叫做行内式

    • 书写位置：在HTML标签之上的style属性中书写css样式

    • 所有的css样式属性总体组成标签的style属性的属性值

      <div style="width:100px;height:100px"></div>
      

    • 缺点：

      1. 内联式必须写在标签上，没有完全脱离HTML标签
      2. css样式代码让标签结构繁重，不利于HTML结构的解读
      3. 一个内联式的css代码，只能给标签使用，如果多个标签样式相同，需要书写多次，无法复用，增加代码量。
      4. 因此，工作中很少使用内联式编写css代码

  • 内嵌式

    • 书写位置：在HTML文件中，head标签内部有一个style标签。style标签写在title标签后面，所有的css代码写在style标签内部
    • style标签有一个标签属性叫做type，属性是“text/css”
    • 优点：
      1. 实现了结构和样式的初步分离
      2. 多个标签可以利用一段代码设置相同的样式，节省代码量
    • 缺点：
      1. 结构和样式没有完全分离，代码依旧写在HTML文件内部
      2. css样式只能给一个HTML文件使用，不能被多个HTML文件同时利用
      3. 在HTML中如果css代码太多，会造成文件头重脚轻

  • 外联式

    • 外联式css,也叫做外联式css、外部css

    • 书写位置：在一个单独的扩展名为.css的文件中。

    • 书写方法：通过选择器选择标签，添加对应的样式

    • 注意：在.css文件中书写时，不与要在添加sytle标签

    • 外联式引用：

      1. 外联式样式必须引入到HTML文件中，才能正常进行加载

      2. 引入方式：在HTML中的head标签内部使用link标签进行引入

      3. link标签属性：

         属性名	属性值	说明
         rel	“stylesheet”	表示引入的外部文件于HTML之间的关系，样式表
         href	css文件路径	超文本引用
         type	“text/css”	加载时按照纯文本形式的css代码加载，HTML5中可以省略不写

    • 外联式优点：

      1. 实现HTML和CSS完全分离
      2. 多个HTML文件可以共用一个CSS文件，便于提取公共css，减少代码量
      3. 可以实现改变一个CSS样式，多个HTML文件同时变化，减少工作量
      4. 一个HTML文件可以引入多个css文件，可以实现同一个页面中css代码分层

  • 导入式

    • 书写位置：在内嵌式样式表style标签内部，或者在外联式样式表内部，导入其他的外部的.css文件

    • 导入方式：@import url(路径)语句进行引入

      <style>
          @import url(css/index.css)
          </style>
      

    • 缺点：

      1. 导入式样式表的作用与外联式样式表基本相同
      2. 但是由于导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，如果网速较慢时，会出现页面没有样式的效果，导致用户的体验感不好

常用样式

• 颜色color

  • rgb模式：三色原理红、绿、蓝

  • 每个颜色取值范围是0-255，一共256个数值。

  • 书写方法：rgb(红、绿、蓝)

    红色  rgb(255,0,0)
    绿色  rgb(0,255,0)
    蓝色  rgb(0,0,255)
    黑色  rgb(0,0,0)
    白色  rgb(255,255,255)
    灰色 rgb(128,128,128)
    

  • 十六进制模式：是rgb模式的一种或简写

  • 0—>00 255—>ff

  • 书写方式：是用#开头，后面连续写红、绿、蓝三个颜色的十六进制的两位数值

    红色  #ff0000  
    绿色  #00ff00
    蓝色  #0000ff
    黑色  #ffffff
    灰色  #808080
    

• 字体font-family

  • 可以设置多个属性值，但浏览器只会选择一个加载，按照书写顺序进行，直到找到支持的字体

• 字号font-size

  • 相对长度单位	说明
    px	像素值最常使用的单位
    em	倍数，继承祖先元素设置的字号倍数
    %	百分比，继承自祖先元素设置的字号的百分比

    绝对长度单位	说明
    in	英寸
    cm	厘米
    mm	毫米
    pt	点

• 选择器（css2.1版本）

  • 基础选择器：标签选择器、id选择器、类选择器、通配符选择器

  • 高级选择器：后代选择器、交集选择器、并集选择器

  id选择器：

  • 书写方式：#id属性值
  • 选择范围：只能选中一个标签
  • 命名规则：必须以字母开头，后面可以跟字母、数字、下划线、横线，严格区分大小写，每个id值必须是唯一的，不能与其他的id同名

  class类选择器：

  • 书写方式：.class属性值
  • 选择范围：可以选中多个标签
  • 命名规则：必须以字母开头，后面可以跟字母、数字、下划线、横线，严格区分大小写
  • 特点：
    1. 可以多个选择器选中一个标签
    2. 也可以一个选择器选中多个标签

实际工作中，通常使用类选择器设置样式(CSS)，id设置行为（JS）

• 通配符选择器*

  • 通过一个特殊符号选择页面内所有的标签
  • 书写方式：*
  • 选择范围：包含html标签在内的所有标签
  • 特点和应用
    • 优点：实现全选，简化书写
    • 缺点：选择效率低，导致浏览器多做无用功
    • 注意：实际上线的网站不允许使用*去除默认的内外边距
    • 不过普通的案例，代码量较少时，为了节省书写，可以使用通配符

• 后代选择器

  • 嵌套关系
  • 也叫包含选择器
  • 书写方式：用空格表示后代
  • 后代关系不一定是父子，所有满足条件的后代都会被选中

• 交集选择器

  • 一个标签上满足所有的基础选择器的需求去选择标签

  • 书写方式：基础选择器进行连续书写，如果有标签选择器必须写在开头

  • 选择范围：满足所有基础选择器需求的标签，如果有一个条件不满足也不能被选中。

    p.classs.demo{
    color:red;
    }
    

    //后代交集选择器复合使用
    .box p.div{       //p.box1.demo=p.demo默认选中最后一个
    color:pink;
    }
    

• 并集选择器

  p,.box,#id{
  color:pink;
  }
  

• 层叠选择器

  • 第一步：比较多个选择器的权重，权重高的层叠权重低

  • 基础选择器的权重：根据选择范围，范围越大权重越小，*<标签选择器<类选择器<id选择器

  • 高级权重选择器比较：依次比较高级选择器的id的个数，类的个数，标签的个数，如果前边能够比较出大小就不必再比较后面了，如果前面个数相同就往后比较直到比较出大小

  • 比较顺序：id的个数，类的个数，标签的个数

  • 第二步：如果选择器权重都相同，需要比较css中代码书写的顺序，后写的层叠掉先写的