web前端css学习笔记(1)——编写位置

---

前言

前面学完了html4与html5，接下来学习css的内容

---

一、CSS

层叠样式表 （Cascading Style Sheets）
CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等
CSS 可以美化 HTML , 让 HTML 更漂亮
核心思想： HTML 搭建结构， CSS 添加样式，实现了：结构与样式的分离

二、 CSS的编写位置

1.行内样式

写在标签的 style 属性中，又称为内联样式 (不推荐)

<h1 style="color:red;font-size:60px;">你今天真好看</h1>

style 属性的值不能随便写，要符合 CSS 语法规范，是 名:值; 的形式
行内样式表，只能控制当前标签的样式，对其他标签无效

2.内部样式

写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 style 标签中

<style>
	h1 {
		color: red;
		font-size: 40px;
	}
</style>

style>标签理论上可以放在 HTML 文档的任何地方，但一般都放在 head标签中
存在的问题：
并没有实现结构与样式完全分离；多个 HTML 页面无法复用样式。

3.外部样式

写在单独的 .css 文件中，在 HTML 文件中引入使用**（推荐此写法）**
新建.css文件，放入css代码

在 HTML 文件中引入 .css 文件

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

link>标签要写在 head 标签中
link标签属性说明：
  href ：引入的文档来自于哪里
  rel ：( relation ：关系）说明引入的文档与当前文档之间的关系
外部样式的优势：样式可以复用，结构清晰，可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离
实际开发中，几乎都使用外部样式

样式表的优先级

行内样式 > 内部样式 = 外部样式

内部样式、外部样式，这二者的优先级相同，后面的会覆盖前面的
同一个样式表中，优先级也和编写顺序有关，后面的会覆盖前面的

三、CSS语法规范

CSS 语法规范由选择器和声明块组成
选择器：找到要添加样式的元素
声明块：设置具体的样式（声明块是由一个或多个声明组成的）
声明的格式为： 属性名: 属性值;
选择器与声明块之间、属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上

注释：

/* 给h1元素添加样式 */

四、 CSS代码风格

展开风格 —— 开发时推荐，便于维护和调试
紧凑风格 —— 项目上线时推荐，可减小文件体积

/* 展开 */
h1 {
	color: red;
	font-size: 40px;
}
/* 紧凑 */
h1{color:red;font-size:40px;}

项目上线时，我们会通过工具（例如webpack）将展开风格的代码，变成紧凑风格，这样可以减小文件体积，节约网络流量，同时也能让用户打开网页时速度更快

---

总结

本篇学习CSS的编写位置、语法规范和代码风格，CSS是层叠样式表，推荐写在外部css文件中，写成展开风格。

根据尚硅谷张天禹老师2023年的前端基础视频整理而成。