前端学习 -- 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 属性的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 内联式样式 </title>
</head>
<body>

    <p style="font-size: 40px; color: crimson;" > 这是一个段落 </p>

    <div style="font-size: 40px; color: crimson;" > 这是一个div </div>

    <p> 这是一个段落呀 </p>

</body>
</html>

内联式缺点

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

内嵌式

书写位置：在 HTML 文件中，<head> 标签内部有一个 <style> 标签
<style> 标签书写在< title> 标签后面，所有 css 代码书写在 <style> 标签内部
<style> 标签有一个标签属性叫做 type，属性值是 ”text/css” 可写可不写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 内联式样式 </title>

    <style>
        /* css规则： 选择器  属性 */
        p, div {
            font-size: 40px; 
            color: crimson;
        }
    </style>

</head>
<body>

    <p> 这是一个段落 </p>

    <div> 这是一个div </div>

    <p> 这是一个段落呀 </p>

</body>
</html>

内嵌式特点

优点
- 实现了结构和样式的初步分离， css 只负责样式，HTML 负责结构
- 多个标签可以利用一段代码设置相同的样式，节省代码量
缺点
- 结构和样式并没有完全分离，代码依旧书写在 HTML 文件的 <style> 标签内部
- css 样式只能给一个 HTML 文件使用，不能够被多个 HTML 文件同时利用
- 在 HTML 中如果 css 代码太多，会造成文件头重脚轻

外联式

外联式 CSS，也可以叫做外链式 CSS、外部 CSS
书写位置：在一个单独的扩展名为 .css 的文件中
书写语法：内部代码与内嵌式样式表中 style> 标签内部的代码一样的。需要通过选择器去选中标签，添加对应的样式
注意：在 .css 文件中书写时，不需要再加 <style> 标签

css.css 文件

p, div {
    font-size: 20px; 
    color: blue;
}

外联式引用

外联式样式表必须引入到 HTML 文件中，才能正常进行加载
引入方式：在 HTML 中的 <head> 标签内部使用 <link> 标签进行引入
<link> 标签属性：

css.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 内联式样式 </title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    
    <p> 这是一个段落 </p>

    <div> 这是一个div </div>

    <p> 这是一个段落呀 </p>

</body>
</html>

外联式优点

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

导入式

书写位置：在内嵌式样式表 <style> 标签内部，或者在外联式样式表内部，导入其他的外部的 .css 文件
导入方式：利用一条 @import url(路径) 语句进行引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 内联式样式 </title>
    <!-- <link rel="stylesheet" href="css.css"> -->

    <style>
        @import url(css.css);
        h1 {
            color: cyan;
        }
    </style>
</head>
<body>
    
    <p> 这是一个段落 </p>

    <div> 这是一个div </div>

    <p> 这是一个段落呀 </p>

    <h1> 一级标题 </h1>

</body>
</html>

导入式问题

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

实际应用

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

三、CSS样式规则

以内嵌式样式表为例

所有的 css 代码都必须书写在 <head> 标签内部的一对 <style> 标签内
css 在给某个标签设置样式前，必须使用选择器先选中标签
css 样式的属性，属性名和属性值的键值对写法为 k:v;
给每个选择器添加的样式属性都必须写在一对大括号 { } 之内
给一个标签添加的所有需要的样式，都要在 { } 内部一一罗列出来

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: cyan;
        }
</style>

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

<style>
        /* 对空格、换行、缩进不敏感 */
        div { width: 100px; height: 100px; background-color: cyan; }
</style>

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 是不能进行简化的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 颜色 </title>

    <style>
        p {
            color: red;
        }

        div {
            color: rgb(255,0,0);
        }

        h1 {
            color: #ff0000;
        }

    </style>

</head>
<body>
    <p> 颜色名 red </p>
    <div> rgb(255,0,0) </div>
    <h1>  十六进制 #ff0000 </h1>
    
</body>
</html>

字体 font-family

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

常用字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 颜色 </title>

    <style>
        p {
            color: red;
            font-family: "宋体";
        }

        div {
            color: rgb(255,0,0);
            font-family: "SimSun";
        }

        h1 {
            color: #ff0000;
            font-family: "consolas";
        }

    </style>

</head>
<body>
    <p> 颜色名 red </p>
    <div> rgb(255,0,0) </div>
    <h1>  abcdefg </h1>
    
</body>
</html>

注意事项

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

实际应用

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

<p style="font-family: Arial, 宋体, SimSun;" > 是什么文字呢？ </p>

字号 font-size

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

单位

注意事项

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

实际应用

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

<p style="font-size: 32px;" > 这行字辣摸大  </p>
<p style="font-size: 12px;"> 这行字辣摸小 </p>

结合示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 样式 </title>

    <style>
        p {
            /* 文字颜色 */
            color: sandybrown;
            /* 字体 */
            font-family: "楷体";
            /* 字号 */
            font-size: 32px;
        }

    </style>

</head>
<body>
    
    <p> 这是一行字 </p>

</body>
</html>

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

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

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 盒子实体化三属性 </title>
    
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: sandybrown;
        }
    </style>

</head>
<body>
    
<div> 盒子实体化三属性 </div>

</body>
</html>