前端学习 -- CSS基础

一、产生背景

• 从 HTML 被发明开始，样式就以各种形式存在，最初的 HTML 只包含很少的显示属性
• 随着 HTML 的成长，为了满足页面设计者的要求，HTML 添加了很多显示功能，例如文本格式化标签
• 但是随着这些功能的增加，HTML 变的越来越杂乱，而且 HTML 页面也越来越臃肿
• 于是 CSS 便诞生了

发展过程

css 概念

• css 全称 cascading style sheets，层叠式样式表，是一种用来表现 HTML 的文件样式的计算机语言
• 作用：静态地修饰网页，并且可以配合各种脚本语言动态地对网页各元素进行格式化

前端三层技术

没有 CSS 的网页

有 CSS 的网页

CSS 可以说是网页的美容师， 让我们的网页更加美观

CSS 的组成

• 层叠式
  • css 中贯穿始终的加载特性
    • 层叠性
    • 继承性
• 样式
  • 定义如何显示 HTML 元素
    • 文字文本
    • 背景
    • 盒模型
    • 浮动
    • 定位
    • 其他

---

二、CSS 规则

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

        /* 
            p 为选择器  
            width 和 font-size 为属性名   
            100px 和 16px 为属性值
            width: 100px; 和 font-size: 16px; 是多条样式属性
        */
        p { width: 100px; font-size: 16px; }

书写位置

css 的代码根据书写位置不同分为四种书写方式

• 内联式
• 内嵌式
• 外联式
• 导入式

内联式

• 内联式，也被习惯叫做行内式
• 书写位置：在 HTML 标签之上的 style 属性中书写 css 样式
• 所有的 css 样式属性总体组成标签的 style 属性的属性值

    
    
    



    
 这是一个段落 

    
 这是一个div 

    
 这是一个段落呀 

内联式缺点

• 内联式必须写在标签上，没有完全脱离 HTML 标签
• css 样式代码让标签结构繁重，不利于 HTML 结构的解读
• 一个内联式的 css 代码，只能给一个标签使用，如果多个标签有相同的样式，同样的css 代码需要书写多次，增加代码量
• 因此，实际工作中不会使用内联式（行内式）编写 css 代码

内嵌式

• 书写位置：在 HTML 文件中， 标签内部有一个

  这是一个段落

  这是一个div

  这是一个段落呀

  内嵌式特点

  • 优点
    • 实现了结构和样式的初步分离， css 只负责样式，HTML 负责结构
    • 多个标签可以利用一段代码设置 相同的样式，节省代码量
  • 缺点
    • 结构和样式并没有完全分离，代码依旧书写在 HTML 文件的

      这是一个段落

      这是一个div

      这是一个段落呀

      一级标题

      导入式问题

      • 导入式样式表的作用与外联式样式表基本相同
      • 但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果 网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好
      • 实际工作中，较少使用导入式，推荐使用外联式样式表

      实际应用

      • 小型案例：可以使用内嵌式 CSS
      • 实际工作、大型网站项目：推荐使用外联式 CSS

      ---

      三、CSS样式规则

      以内嵌式样式表为例

      • 所有的 css 代码都必须书写在 标签内部的一对

        注意事项
        分号必要性：每条属性后面的分号必须写，如果不写，会导致后面所有的代码加载错误
        css 中所有属性与属性之间对空格、换行、缩进不敏感

        CSS 注释语法

        • 语法格式：
          • /* 注释 */
          • vs code快捷键：ctrl + /

        CSS 常用样式

        • 文字三属性
          • 颜色 color
          • 字体 font-family
          • 字号 font-size

        颜色 color

        • 作用：给文字设置颜色
        • 属性名 k ：color
        • 属性值 v ：颜色名、颜色值

        颜色名

        • 颜色名就是使用颜色的英文单词进行表示

        • 一些最常用的颜色名 在 vs code 中 也可以进行挑选

          
          

        颜色值

        • 颜色值指使用具体颜色的数值表示

        • 包括： rgb 模式和 十六 进制模式写法

          • rgb 模式 是根据红绿蓝三原色进行混合而成的颜色模式
          • 每个原色的取值范围是0-255，一共256个数值。三个原色共能混合成 1677多万种颜色
          • 书写方法：rgb(红,绿,蓝)
          • 十六进制模式：是 rgb 模式的一种简化写法，使用十六进制的数字字符去替换十进 制的 0--255 的数字
          • 十六进制：逢十六进一，每个数位上只能出现 0-9，a-f 之间的字符
          • 书写为颜色值时，红、绿、蓝每个色值都要使用两位数的十六进制进行替换
            • 0 → 00
            • 255 → ff

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

            
            

        • 十六进制颜色值简写模式：如果红、绿、蓝三个原色的色值每一个 都是由重叠的数字组成，可以将重叠的数字简化成一个进行书写

          • 红色 #f00
          • 绿色 #0f0
          • 蓝色 #00f

        • 类似 #808080 是不能进行简化的

        
        
        
            
            
            
        
            
        
        
        
            
         颜色名 red 
            
         rgb(255,0,0) 
            
          十六进制 #ff0000 
            
        
        
        

        字体 font-family

        • 作用：定义元素内文字的字体
        • 属性名 k ：font-family，字体属于 font 综合属性的一个单一属性
        • 属性值 v ：字体名称，必须包裹在一对引号中，属性值可以有多个，值之 间用逗号分隔

        常用字体
        

        
        
        
            
            
            
        
            
        
        
        
            
         颜色名 red 
            
         rgb(255,0,0) 
            
          abcdefg 
            
        
        
        

        注意事项

        • font-family 可以设置多个字体名称，在实际加载时只会选择一种加载，选择的 依据是按书写顺序进行，如果浏览器不支持第一个字体，则会尝试下一个，直到找 到第一个支持的字体
        • 浏览器中加载的字体是用户机器中自带的，如果用户的电脑中没有设置的字体则 加载失败，需要查找下一个，因此，必须在最后设置一个所有机器都具备的通用字 体作为后路
        • 中文字体中一般带有英文可以加载的字体效果，为了避免对英文字的字体影响， 建议将英文字体写在属性值最前面

        实际应用

        • 选字体需要根据设计图确定，最后需要设置备用字体

         是什么文字呢？ 
        

        字号 font-size

        • 作用：设置文字的大小
        • 属性名 k ：font-size，字号属于 font 综合属性的一个单一属性
        • 属性值 v ：可以使用相对长度单位，也可以使用绝对长度单位。推荐使用相对长度单位

        单位
        

        注意事项

        • 如果 HTML 中不设置字号，不同的浏览器有自己默认的加载字号，比如 chrome、 IE，默认显示字号为 16px
        • 不同的浏览器也有自己最小加载显示字号，如果设置的字号低于最小字号，都以 最小字号加载，0除外。chrome 浏览器最小加载显示字号为8px，IE 浏览器最小可以支持1px的字号

        实际应用

        • 网页中最小设置字号必须是12px，如果低于12px会出现兼容问题。现在网页中普 遍使用14px+
        • 尽量使用12px、14px、16px等偶数的数字字号，ie6 等老式浏览器支持奇数会有 bug
        • 实际工作中的字号，需要以设计图为准

         这行字辣摸大  
         这行字辣摸小 
        

        结合示例

        
        
        
            
            
            
        
            
        
        
        
            
            
         这是一行字 
        
        
        
        

        CSS常用样式 -- 盒子实体化三属性

        如果想在浏览器中具体看到一个盒子占有的实际位置，需要设置盒子可以实体化的三属性

        
        

        示例

        
        
        
            
            
            
            
            
        
        
        
            
         盒子实体化三属性