第三周预习博客

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 第三周博客预习
  • css基础
    • 1

       css称为层叠样式单

             它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。

             在传统的web网页设计里，使用CSS能让单调的HTML网页更富有表现力。

    • 2

      css的引用方式：

                  CSS可以控制HTML文档的显示。但在控制文档显示之前，首先应在需要显示的HTML文档中引入CSS样式单，HTML提供了以下四种引入方式：

                           使用内联样式：这种方式将样式内联定义到具体的HTML元素上，通常用于精确控制一个HTML元素的表现。

                           使用内部样式定义：这种方式是通过在html文档头定义样式单部分来实现，在这种方式下，每批CSS样式只能控制一份HTML文档。

                           链接外部样式文件：这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。在这种方式下，一份样式可控制多份文档。

                           导入外部样式文件：这种方式与第三种方式类似，只能使用@import来引入外部样式表文件。

  • 盒子模型
    •  我们可以将页面中的一个区域，图片，列表，段落，导航栏等看成一个盒子
    •  ​ 
    • 盒子的结构包括内容content(包含height和width属性)，padding内边距，border边框，margin外边距
      •  ​ 
        •  可以通过类似padding-left来控制各个方向的边距和长度
        • 还有overflow属性，用来设置当内容超出盒子大小时候的样式（hidden表示超出部分不可见，scroll表示显示滚动条，auto表示如果有超出部分显示滚动条。
        • border属性可一起设置，按这个样式：border：width style color；设置边框的粗细，样式和颜色
      • 选择器 ​  ​ 
        • 选择器大致分为标签选择器，类别选择器，id选择器，伪类选择器，奇偶选择器
          • 标签选择器格式为：标签名{   属性：属性值 ；}，会将所有该标签加上该样式。
          • 类选择器格式为：.（点）类名{   属性：属性值 ；}，将目标标签class属性设为类名，就可以加上该样式
          • id选择器格式为：#id名{   属性：属性值 ；}，将目标标签id属性设为id名，就可以加上该样式
          • 三种选择器可以混合使用，就我目前实践得出当样式有冲突时，id选择器>类选择器>标签选择器
          •   ​ 
          •  
        •  伪类选择器
          • 伪类选择器目前我知道a伪类选择器和focus伪类选择器，格式类似a：link{    属性名：属性值     ；}
        •  奇偶选择器
          • 格式为：标签名：nth-child（odd（奇数）/even（偶数））{ 属性名：属性值     ；}
          • 通过括号里的内容选择奇数或偶数的元素的样式
          •  1 ​  
          • 2 ​ 
          • 3 ​ 
          • 可以看到表格奇数数字变成蓝色了
      • 感谢阅读