02-CSS语法

落日橙子乳酸菌

已于 2023-06-27 19:04:05 修改

阅读量359

点赞数

分类专栏： HTML5 网页开发 # CSS基础文章标签： css html Powered by 金山文档

于 2023-03-09 18:54:02 首次发布

本文链接：https://blog.csdn.net/m0_48670609/article/details/129265467

版权

HTML5 网页开发同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

CSS基础

5 篇文章 0 订阅

订阅专栏

一、CSS 代码书写位置

CSS规则

CSS的语法中有自己的书写规则，CSS规则主要由两部分构成：选择器，以及一条或多条声明（或者叫样式属性）。

例如下面的示例，选择器选中要添加css样式的标签p标签，大括号内部可以书写多条样式属性，每一条属性都有属性名和属性值。

书写位置

css 的代码根据书写位置不同分为四种书写方式：内联式、内嵌式、外联式、导入式。

内联式

内联式书写格式

内联式，也被习惯叫做行内式。

书写位置：在 HTML 标签之上的 style 属性中书写 css 样式。

所有的 css 样式属性总体组成标签的 style 属性的属性值。

在这种书写位置中，CSS书写就不需要写选择器了，因为样式本身就写在了标签之上，不需要重复选择。

<p style="font-size: 30px;">这是一段文字（默认文字大小16px）</p>

内联式缺点

a、内联式必须写在标签上，没有完全脱离 HTML 标签，这与我们想要的样式与结构分离是有一些背离的点的。

b、 css 样式代码让标签结构繁重，不利于 HTML 结构的解读。

c、一个内联式的 css 代码，只能给一个标签使用，如果多个标签有相同的样式，同样的 css 代码需要书写多次，增加代码量，不利于HTML文件的传输和加载（文件越大传输越慢）。

因此，实际工作中不会使用内联式（行内式）编写 css 代码。

内嵌式

内嵌式书写格式

书写位置：在 HTML 文件中， <head>标签内部有一个 <style>标签。

一般<style>标签书写在 <title>标签后面，所有 css 代码书写在<style>标签内部。

<style>标签有一个标签属性叫做 type，属性值是 “text/css”，指在<style>标签内部书写的是纯文本格式的css代码，浏览器去解析加载的时候也会按照css的语法进行解析加载。HTML5中可以省略type属性。

内嵌式优缺点

优点：

a、实现了结构和样式的初步分离， css 只负责样式，HTML 负责结构。 b、多个标签可以利用一段代码设置相同的样式，节省代码量。

缺点：

a、结构和样式并没有完全分离，代码依旧书写在 HTML 文件的<style>标签内部，并没有脱离文件而存在。

b、css 样式只能给一个 HTML 文件使用，不能够被多个 HTML 文件同时利用。

c、在 HTML 中如果 css 代码太多，会造成文件头重脚轻。内嵌式的css代码写在<head>标签内部，body是页面主体，head是一些配置内容，浏览器加载代码时从上往下依次进行加载，程序员看自己代码时也是从上往下查看，一个HTML文件的css代码会很多，都在写head会头重脚轻，不利于快速修改HTML结构。

内嵌式的缺点其实来自于css代码还是写在HTML文件内部。

外联式

外联式 CSS，也可以叫做外链式 CSS、外部 CSS。

书写位置：在一个单独的扩展名为 .css 的文件中。

书写语法：内部代码与内嵌式样式表中 <style>标签内部的代码一样。需要通过选择器去选中标签，添加对应的样式。

注意：在 .css 文件中书写时，不需要再加 <style>标签。

外联式引用

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

外联式举例

css文件：

html文件：

即可实现三段文字都是30px都是蓝色效果。

外联式优点

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

代码分层就是：两个html文件01和02有的标签需要相同的样式，那可以写在同一个css文件中，但有的标签不想要相同的css格式，那就不能写在公共的css文件中，可以新建一个css文件，设置只属于一个html文件中此标签的样式，01的html文件就可以引用两个css文件，一个是和02的公共样式，一个是独有的样式，这就实现了css代码分层，在后续代码书写中就比较灵活。

导入式

书写位置：在内嵌式样式表 <style>标签内部，或者在外联式样式表内部，导入其他的外部的 .css 文件。

导入方式：在<style>标签内部或css文件内部，利用一条 @import url(路径) 语句进行引入。

导入式举例

在html文件的<style>标签导入css文件样式：

在一个css文件中导入另一个css文件：

导入式存在的问题

导入式样式表的作用与外联式样式表基本相同。

但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。

外联式中使用<link>标签导入css文件时，浏览器会优先加载css，当html结构加载出来时，对应的css样式可以加载到页面，可以直接看到最终效果，然而导入式会先加载html结构，css在html加载完成后才解析，就会导致如果网速慢，加载了html结构但还没加载出样式，给用户的演示效果就会很差。

实际工作中，较少使用导入式，推荐使用外联式样式表。

四种方式实际应用总结

小型案例：可以使用内嵌式 CSS。

实际工作、大型网站项目：推荐使用外联式 CSS

不推荐使用内联式和导入式。

二、样式规则语法

语法规则

以内嵌式样式表为例（其他同理）：（1）所有的 css 代码都必须书写在<head>标签内部的一对 <style>标签内。

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

注意事项

CSS书写注意事项：

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

三、CSS注释语法

一个清晰易读的 CSS 代码，离不开 CSS 注释的合理添加。

注释语法格式

语法格式： /*中间部分为注释内容*/

VS Code中注释快捷键

vs code快捷键：ctrl+/ 。可用于解开或添加注释。

在结构部分使用快捷键会添加结构的注释，即

四、CSS代码书写风格

代码风格是实际开发中的书写方式，并非强制标准。

CSS样式书写格式

（1）展开格式：开发过程使用，代码可读性强，便于调错。

 <style>
        div {
            width: 30px;
            height: 50px;
            background-color: antiquewhite;
            margin-top: 3px;
        }
 </style>

（2）紧凑格式：上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输。

浏览器搜关键词“css压缩工具”可以直接将展开格式的css代码压缩。

div {width: 30px;height: 50px;background-color: antiquewhite;margin-top: 3px;}

英文大小写

CSS 代码中的英文可以使用大写，也可以使用小写。

建议：css 中的选择器和样式属性名、属性值等都使用小写英文，特殊情况除外。

空格规范

a、选择器与大括号 {} 之间保留一个空格。 b、冒号后面，属性值前面，保留一个空格。