这是我参与「第四届青训营 」笔记创作活动的第十一天

CSS基础知识总结(一)

本 章 着 重 复 习 css 的 基 础 内 容 ， 学 习 css 究 竟 要 学 些 什 么 呢 ？ 主 要 是 学 习 搭 建 网 页 的 “ 美化 ” 。

我们本篇介绍一下：CSS 的引入 和 CSS 样式表！！！

一、CSS 的引入

1. 网页的3架马车

• 结构 HTML
• 表现 CSS
• 行为 JS

2. 引入 CSS 的必要性

其中前面我们学习了HTML，但是HTML由他自己的不足之处！

HTML 满 足 不 了 基本的 网站需 求 ， 它仅仅是把模块骨架写出来了，但是模块之间的排列，组成，美化都不能实现！

而 CSS 可 以 将 网 页 结 构 与 样 式 相 分 离 ，这样 就 可 以 在 不 更 改 网 页 结 构 的 前 提 下 ， 更 换 网 站 的 样 式

同时： html的属性只对当前标签有效，没有可重用性，导致没有可维护性！
css 具备一定的代码重用性，提高了可维护性

即 html ：搭建网页的结构骨架，承载页面的数据    css : 美化页面！

二、CSS 样式表

1.行内样式，内联样式

(1)概述

在元素中，写 style 属性，在 style 属性中编写样式。通 过 标 签 的 style 属 性 来 设 置 元 素 的 样 式.

(2)基本语法

 <p style="border: 8px; color: pink;">我喜欢你!</p>

(3)总结：

只对当前元素生效，代码没有可重用性

内联样式默认优先级最高

缺 点 :没 有 实 现 样 式 和 结 构 相 分 离。

2.内 部 样 式 表 (内 嵌 样 式 表 )

(1)概述

在 head 标签中，编写 style 标签，在 style 标签内部，编写属性。

• 通过css选择器为多个标签设置样式，并且只修改一次
• 更方便对样式进行复用

(2)基本语法

 <style>
        /* 选择器{样式} */
        /* 给谁改样式{ 改什么样式} */
        p {
            color:red;
            /*修改字体大小为12像素，px是像素的意思！ */
            font-size: 12px; 
        }        
    </style>

(3)总结：

只 能 控 制 当 前 的 页 面 。

缺 点 :没 有 彻 底 分 离 结 构 与 样 式!!!

3.外 部 样 式 表 (外 链 式 )

(1)概述

• 将 css 样式写到一个 css 文件里
• 通过 link 链接外部css文件

(2)基本语法

.css 文件

/* css文件里面只有样式，没有标签 */
div {
    color: pink;
    font: italic 700 40px 'Courier New';
}

在 html 中的 head 标签里，使用 link 引入

<link rel="stylesheet" href="my.css"/>

(3)总结：

写到外面可以触发浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验！！！