导航：首页 > 开发技术 >

如何理解css中样式表的基本语法

发表于：2024-12-12 作者：千家信息网编辑

千家信息网最后更新 2024年12月12日，本篇内容主要讲解"如何理解css中样式表的基本语法"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"如何理解css中样式表的基本语法"吧!插入样式表前后的网页

千家信息网最后更新 2024年12月12日如何理解css中样式表的基本语法

本篇内容主要讲解"如何理解css中样式表的基本语法"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"如何理解css中样式表的基本语法"吧!

插入样式表前后的网页。

为了更好地理解样式表的作用，我们先看一个CSS的应用实例。在本例子中，你很容易对比出使用CSS前后两个网页的区别，当然了，现在你可能读不懂CSS部分的代码。别担心，这些代码将在少后的教程中介绍。

我们首先来看一下未加入CSS的页面。网页里只有一段话："菜鸟吧的站长是大傻瓜！傻瓜爱吃大西瓜！"。而且由于分别是标题1、2、3、4，页面内字体大小也不相同，还有标题的自动换行。

它的源代码如下：

代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml">

我真惨!被用来演示CSS!
content="text/html; charset=gb2312" />

https://www.yisu.com/">

的站长

是大傻瓜！傻瓜

爱吃大西瓜！

下面我们简单的为它加上一点CSS，来让我不再傻……按如下提示修改网页的代码：

代码如下:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml">

我真惨!被用来演示CSS!
content="text/html; charset=gb2312" />

https://www.yisu.com/">

的站长

是大傻瓜！傻瓜

爱吃大西瓜！

让我们来看看加入CSS之后的网页。你很容易看出两个网页的差别，页面内的文字大小统一了，而且只有标题1后面有一个换行，甚至有一部分文字被隐藏了起来。这都要归功于上面红色部分的代码。它们就是CSS，下面就让我们大概了解一下这些代码的意义。

CSS语法简介

加在head部分的分别被浏览器识别为CSS的开始和结束。而注释标签则是避免不支持CSS的浏览器将CSS内容作为网页正文显示在页面上。

上面的内容并没有定义任何样式，它的任务只是告诉浏览器CSS代码的位置。下面的内容是重点，正是下面这一部分的内容使得页面的外观发生了明显的变化，它也就是CSS的描述部分(定义部分)：

代码如下:

h2 {font-size: 12px;}
h3,h5 {font-size: 12px; display:inline;}
……

是大傻瓜！傻瓜

通常情况下，CSS的描述部分是由三部分组成的，分别是选择器、属性和属性值。写法如下：

选择器 { 属性: 属性值; }

例如：

代码如下:

h2 {font-size: 12px;}

本例中选择器也就是你想要描述的HTML标签，其它选择器将在后面的教程中讲解。上面例子的选择器就是h2标签。属性和属性值则是说明你想要描述h2的哪一个属性，该属性的值为多少，例如上面例子中将h2字体大小属性为12像素，写成font-size: 12px。属性和属性值之间用一个冒号":"分开，以一个分号";"结束，最后别忘记用一对大括号"{}"括起来。

我们也可以为一个选择器同时定义多个样式，样式之间用分号";"隔开。也可以同时为几个标签同时定义一组样式，标签之间用逗号","隔开。也许这两句话比较绕嘴，不过事实上上面例子的第二行代码就用到了CSS的这个特性。语句"h3,h5 {font-size: 12px; display:inline;} "同时为h3和,h5两个标签定义了两个样式。当然了，为了使你的CSS代码更容易阅读和维护，你可以分行书写这些属性：

代码如下:

h3,h5 {
font-size: 12px;
display:inline;
}

注意1：现在讲解上面代码的最后一行，在

很赞哦！