CSS基础学习（一）-初识CSS与学习准备

CSS基础学习（一）- 初识CSS与学习准备

CSS是层叠样式表（Cascading Style Sheets），用来描述文档呈现的样式语言。这里所说的文档通常是HTML文档。在学习CSS之前，应当具备基础的HTML知识。

1. 引用CSS样式

1.1 引入外部css样式文件

通常在文档头部使用 link 标签引入外部定义文件，如下：

<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Documenttitle><linkrel="stylesheet"href="jkdev.css">head><body>body>html>

完整的定义应该写上文档类型

但默认情况下，不写也没事，浏览器会给我们做兼容，也能正常解析。

1.2 内部定义CSS样式

我们还可以把CSS定义的代码和HTML混合在一页，编写，通常在文档头部加上style标签，并在style标签内定义样式

让h1标签内文字变成红色，可以这样写

<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Documenttitle><linkrel="stylesheet"href="jkdev.css"type="text/css"><style>h1{color:red;}style>head><body><h1>jkdev.cnh1>body>html>

1.3 行内定义CSS样式

我们也可以直接在对应标签内写使用style属性定义 CSS样式

让h1标签现实黄色，并且将文字大小改为 12px

<h1style="color: yellow; font-size: 12px">jkdev.cnh1>

1.4 在CSS中引入其他CSS文件定义的样式

我们还可以@import标识在一个CSS样式文件中引入另一个CSS样式文件

在jkdev.css中引入common.css

@importurl("common.css");h1{color:red;}

在文档头部style标签中引入common.css文件

<style>@importurl("common.css");h1{color:red;}style>

1.5 总结

在CSS定义代码中，可以添加空白行，不影响解析，但是实际中，应当减少空白行的存在，以达到压缩文件的效果。CSS定义的每一条样式定义的条目称为一个表达式，以英文分号为结束标识（;），CSS可以使用 / / 进行注释，出现错误样式定义浏览器也不会进行解析，如下代码。

在jkdev.css文件中定义如下代码

h1{/* 设置文字为红色 */color:red;/* 以下一行为错误语法，将不会被解析 */fontsize:16px;}

浏览器在解析HTML文档时，会从上往下解析，所以CSS定义应当在文档的头部，避免在加载网页的过程中，由于网络的延迟原因，没有及时加载CSS定义文件导致的界面样式错乱。

2. 安装VsCode的CSS学习插件

2.1 Easy Less：添加LESS的支持

LESS是一种CSS语法格式，LESS支持嵌套定义CSS样式，我们可以使用LESS插件，使用LESS语法编写，同时自动生成CSS原生文件。

编写jkdev.less 自动生成 jkdev.css

jkdev.less文件内容

div{font-size:12px;h1{color:red;}}

自动生成的jkdev.css文件

div{font-size:12px;}divh1{color:red;}