CSS部分基础知识内容

css

• 内联样式表

  <div style="width:200px;height:100px;background-color:red;color:blue;"></div>
  

• 内部样式表
  • 在head标签里面，生成一个style的双标签
  • 在style的标签里面写对应的css样式

    <style>
      div {
          width: 200px;
          height: 200px;
          background-color: pink;
      }
  </style>
  

• 外部样式表
  • 新建一个css文件夹
  • 在css文件夹的下面新建一个.css后缀的文件
  • 在html文件的head标签里面生成一个link单标签

    <link rel="stylesheet" href="css/外部样式表.css" type="texts">
    rel: 当前关联的文件类型 stylesheet：样式表
    href：css文件的路径
    type：文件类型 默认就是css文件类型
  

• css语法
  选择器{
  属性:属性值;（声明）
  属性:属性值;（声明）
  属性:属性值;（声明）
  ……
  }
  • 选择器和声明组成
  • 每条声明以分号结尾
  • 最后一条声明可以省略分号
• 样式表的权重(优先级)
  • 内联>内部
  • 内联>外部
  • 内部和外部,根据就近原则，离得近的优先显示
• 样式表的选择
  • 内联样式表：css属性较少的时候，还需要考虑优先级的问题
  • 内部样式表：写小案例
  • 外部样式表：整页开发，结构样式分离
• 选择器
  • 标签选择器

  css

• 内联样式表

  <div style="width:200px;height:100px;background-color:red;color:blue;"></div>
  

• 内部样式表
  • 在head标签里面，生成一个style的双标签
  • 在style的标签里面写对应的css样式

    <style>
      div {
          width: 200px;
          height: 200px;
          background-color: pink;
      }
  </style>
  

• 外部样式表
  • 新建一个css文件夹
  • 在css文件夹的下面新建一个.css后缀的文件
  • 在html文件的head标签里面生成一个link单标签

    <link rel="stylesheet" href="css/外部样式表.css" type="text/css">
    rel: 当前关联的文件类型 stylesheet：样式表
    href：css文件的路径
    type：文件类型 默认就是css文件类型
  

• css语法
  选择器{
  属性:属性值;（声明）
  属性:属性值;（声明）
  属性:属性值;（声明）
  ……
  }
  • 选择器和声明组成
  • 每条声明以分号结尾
  • 最后一条声明可以省略分号
• 样式表的权重(优先级)
  • 内联>内部
  • 内联>外部
  • 内部和外部,根据就近原则，离得近的优先显示
• 样式表的选择
  • 内联样式表：css属性较少的时候，还需要考虑优先级的问题
  • 内部样式表：写小案例
  • 外部样式表：整页开发，结构样式分离
• 选择器
  • 标签选择器

      p{color:red;}
    

  • id选择器
    • 给标签添加id的属性，值为id名

       <div id="box">Lorem ipsum dolo</div>
      

    • #id名 选择元素

        #box {
            background-color: pink;
        }
      

      1. id名不能重复
      2. id只能有一个
  • class(类)选择器
    • 给标签添加class的属性，值为class名

      <div class="box box1">Lorem ipsum </div>
      

    • .class名选择元素

        .box {
            color: red;
        } 
        .box1 {
            background-color: royalblue;
        }
      

      1. class名可以重复
      2. 一个标签可以有多个class名,多个之间用空格隔开
  • 通用选择器

      *{
        margin:0; 外边距
        padding:0; 内填充
      }
    

  • 伪类选择器(状态)
• 选择器的权重
• 标签命名
  • 英文单词并且语义化
  • 驼峰命名
  • 短线连接
  • 下划线连接

注意

• 宽高只对独占一行的元素生效