CSS(层叠样式表)是一种用于设计网页样式、排版和布局的语言。它通常被用作 HTML 文档的样式表。在 CSS 中,声明方式有很多种,下面我们就来一一了解。
内联样式
使用内联样式可以在 HTML 标签中直接指定样式,如下面的例子:<p style="color: red; font-size: 16px;">这是一个红色的段落,字体大小为 16 像素。</p>
内部样式表
内部样式表指的是放在 HTML 文件头部的样式表,可以用 <style> 标签来定义,样式表规则在头部中的多个元素中共享,如下面的例子:<head> <style type="text/css"> p { color: red; font-size: 16px; } </style> </head> <body> <p>这是一个红色的段落,字体大小为 16 像素。</p> </body>
外部样式表
外部样式表是定义在一个单独的 CSS 文件中,然后在 HTML 文件中使用 <link> 标签引用,如下面的例子:<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>这里的 style.css 是一个单独的 CSS 文件,它包含了所有的样式规则:
p { color: red; font-size: 16px; }
嵌套样式
在 CSS 中,样式可以被嵌套,这意味着样式可以根据它们的关系来应用。例如,下面的样式表将只会影响一个拥有 class="message" 的元素,该元素同时包含一个居中的标题和一个红色的段落:.message { text-align: center; } .message h1 { font-size: 24px; } .message p { color: red; }
CSS 优先级
在 CSS 中,优先级(也称为层叠性)用于确定样式应该如何被应用。基本上,优先级是由样式表声明方式的顺序、元素类型、类、ID、属性等因素来决定的。例如,对于以下样式:p { color: blue; } .message p { color: red; }如果一个 <p> 元素同时含有 class="message",那么它的颜色将是红色的,而不是蓝色的。 这些就是 CSS 中声明方式的几种方式,每种方式都有各自的优缺点,因此在实际开发中需要根据实际需求来选择合适的方式。