[分享]css内部样式表格式

CSS内部样式表是一种将样式信息嵌入HTML文档的方式。在一些小型项目中，内部样式表往往比外部样式表更加方便。下面我们来了解一下CSS内部样式表的格式。 / 这是注释 / p { color: red...

CSS内部样式表是一种将样式信息嵌入HTML文档的方式。在一些小型项目中，内部样式表往往比外部样式表更加方便。下面我们来了解一下CSS内部样式表的格式。

<style type="text/css">
/* 这是注释 */
   p {
      color: red;
      font-size: 16px;
   }
 
   a {
      color: blue;
      text-decoration: none;
   }
</style> 

首先需要在HTML文档的head标签中添加style标签。在样式表中，可以使用/* ... */的方式添加注释。需要注意的是，样式表中的类名、标签名、属性名、属性值均需要使用英文小写字母。

在上述例子中，我们定义了p标签的颜色为红色，字体大小为16px；同时定义了a标签的颜色为蓝色，不显示下划线。在样式表中，每个选择器和对应的样式信息都需要放在大括号内，多个样式信息之间需要使用分号隔开。

在内部样式表中，我们还可以使用CSS的@规则来定义样式。例如：

<style type="text/css">
   @media screen and (max-width: 767px) {
      /* 这是针对移动端的样式信息 */
      body {
         font-size: 14px;
      }
   }
</style> 

上述例子中，我们通过@media规则来定义了在屏幕宽度小于767px的情况下，body标签的字体大小为14px。这样可以使得页面在不同尺寸的设备上呈现出不同的样式效果。

总结起来，CSS内部样式表的格式相对简单，容易上手。同时，内部样式表的样式信息仅适用于当前HTML文档，可以在多个HTML文档中独立设置样式信息，便于维护。但是，如果样式信息比较多，或者需要在多个HTML文档中复用，建议使用外部样式表。