书写CSS需要遵循哪些规则？它的结构有什么特点？

客官°小女子只卖身不卖艺 2022-11-07 01:58 209阅读 0赞

要想熟练地使用CSS对网页进行修饰，首先要了解CSS样式规则。设置CSS样式的具体语法规则如下。

选择器\{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; …\}

在上面的样式规则中，选择器用于指定需要改变样式的HTML标签，花括号内部是一条或多条声明。每条声明由一个属性和属性值组成，以“键值对”的形式出现。

其中属性是对指定的标签设置的样式属性，例如字体大小、文本颜色等。属性和属性值之间用英文冒号“:”连接，多个声明之间用英文分号“;”进行分隔。例如，图1所示的CSS样式规则的结构示意图。

![1608705816394\_1.png][1608705816394_1.png]  
图1 CSS样式规则的结构示意图

值得一提的是，在书写CSS样式时，除了要遵循CSS样式规则，还必须注意CSS代码结构的特点，具体如下。

● CSS样式中的选择器严格区分大小写，而声明不区分大小写，按照书写习惯一般将选择器、声明都采用小写的方式。

● 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。

● 如果属性的属性值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如：

p {font-family:"Times New Roman";}

● 在编写CSS代码时，为了提高代码的可读性，可使用“/注释语句/”来进行注释，例如上面的样式代码可添加如下注释：

p {font-family:"Times New Roman";}/* 这是CSS注释文本,有利于方便查找代码,此文本不会显示在浏览器窗口中  */

● 在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此可以使用空格键、Tab键、回车键等对样式代码进行排版，即所谓的格式化CSS代码，这样可以提高代码的可读性。例如：

代码段1：

h1{ color:green; font-size:14px; }

代码段2：

h1{ 
    
    color:green;           /* 定义颜色属性  */
    
    font-size:14px;         /* 定义字体大小属性  */
    
    }

上述两段代码所呈现的效果是一样的，但是“代码段2”书写方式的可读性更高。

需要注意的是，属性值和单位之间是不允许出现空格的，否则浏览器解析时会出错。例如下面这行代码就是错误的。

h1{font-size:14 px; }      /* 14和单位px之间有空格，浏览器解析时会出错 */

推荐学习：前端小白零基础入门HTML5+CSS3  
       完整视频：http://yun.itheima.com/course/602.html?2012stt  
       配套资料：https://pan.baidu.com/s/1QXO1bA7IilPAp-zuOXHrUA 提取码：qgr4

[1608705816394_1.png]: /images/20221023/89f8d6c94be945c9aa4bcb96e38c1559.png

发表评论取消回复

表情：

评论列表（有 0 条评论，209人围观）

还没有评论，来说两句吧...

相关阅读

相关服务器系统有哪些，各有什么特点?

![d1a4f19ad62849043363f0bc9db54a5c.jpeg][] 类似于手机系统分成安卓、ios、塞班这些常见机型一样，服务器也有windows、linu

素颜马尾好姑娘i/ 2024年04月01日 10:29/ 0 赞/ 93 阅读

相关 Java Servlet是什么？它有哪些特点？

Servlet（Server Applet）是 Java Servlet 的简称，是使用 Java 语言编写的运行在服务器端的程序。具有独立于平台和协议的特性，主要功能在于交互

小咪咪/ 2024年03月29日 14:26/ 0 赞/ 112 阅读

相关什么是 Redis？它的特点是什么？Redis的数据类型有哪些？Redis的主要应用场景有哪些？

1、什么是 Redis？它的特点是什么？ Redis是一个开源的内存数据存储系统，它可以用作数据库、缓存和消息中间件。Redis支持多种数据结构，如字符串、哈希表、列表、

小鱼儿/ 2024年03月17日 14:31/ 0 赞/ 114 阅读

相关什么是PWA（Progressive Web App）？它有哪些特点和优势？

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

待我称王封你为后i/ 2024年02月17日 08:35/ 0 赞/ 112 阅读

相关前端必备：Node.js是什么？它有哪些特点和优势？

Nodejs是个在服务器动可以解析和执行JavaScript代码的运行环境，也可以说是一个运行时平台，仍然使用JavaScript作为开发语言，但是提偶了一些功能性的API，例

川长思鸟来/ 2023年10月07日 19:07/ 0 赞/ 53 阅读

相关 Java是什么？Java的特点有哪些？

Java 是近 10 年来计算机软件发展过程中的传奇，其在众多开发者心中的地位可谓“爱不释手”，与其他一些计算机语言随着时间的流逝影响也逐渐减弱不同，Java 随着时间的推移反

r囧r小猫/ 2023年02月16日 01:40/ 0 赞/ 9 阅读

相关 javascript是什么？有哪些特点？

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它是广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动

「爱情、让人受尽委屈。」/ 2022年12月07日 15:09/ 0 赞/ 449 阅读

相关书写CSS需要遵循哪些规则？它的结构有什么特点？

要想熟练地使用CSS对网页进行修饰，首先要了解CSS样式规则。设置CSS样式的具体语法规则如下。　　选择器\{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; …

客官°小女子只卖身不卖艺/ 2022年11月07日 01:58/ 0 赞/ 210 阅读

相关什么是中成药，它有什么特点？

中成药有两种概念：一种是狭义的中成药，它主要指由中药材按一定治病原则配方制成、随时可以取用的现成药品，如中成药中的各种丸剂、散剂、冲剂等等，这便是生活中人们常说的中成药；另一种

淡淡的烟草味﹌/ 2022年06月02日 12:38/ 0 赞/ 394 阅读

相关 Java Servlet是什么？它有哪些特点？

Servlet（Server Applet）是 Java Servlet 的简称，是使用 Java 语言编写的运行在服务器端的程序。具有独立于平台和协议的特性，主要功能在...

朱雀/ 2021年01月13日 02:26/ 0 赞/ 2001 阅读