在CSS中,我们一般使用三种方式来定义样式:内部样式表、外部样式表和行内样式。本文将着重介绍如何使用内部样式表来定义CSS样式。 在HTML文档中,我们可以使用<style>
在CSS中,我们一般使用三种方式来定义样式:内部样式表、外部样式表和行内样式。本文将着重介绍如何使用内部样式表来定义CSS样式。
在HTML文档中,我们可以使用<style>标签来定义内部样式表。在<style>标签中,我们可以使用CSS语法来定义样式。如下所示,我们可以在<style>标签中定义p元素的颜色、字体大小和字体样式:
<head> <style> p { color: red; font-size: 16px; font-family: "微软雅黑"; } </style> </head> <body> <p>这是一段文字。</p> </body>
上述代码定义了p元素的样式,使得所有p元素中的文字都显示为红色,字体大小为16像素,字体样式为"微软雅黑"。在HTML文档中,如果有多个p元素,那么它们都会应用该样式。如果我们只想让某些p元素应用该样式,可以为这些p元素定义一个class属性,并在CSS中使用类选择器来定义样式。如下所示:
<head> <style> .red { color: red; font-size: 16px; font-family: "微软雅黑"; } </style> </head> <body> <p class="red">这是一段红色的文字。</p> <p>这是一段普通的文字。</p> <p class="red">又是一段红色的文字。</p> </body>
上述代码中,我们为第一行和最后一行的p元素定义了class="red",这意味着它们会应用定义在<style>标签中的.red样式。而第二行的p元素并没有定义class属性,因此不会应用.red样式。
总结:使用内部样式表可以方便地在HTML文档中定义样式,但需要注意不要在HTML文档中定义过多的样式,以免影响页面加载速度和维护难度。
粉丝
0
关注
0
收藏
0