CSS(Cascading Style Sheets)是一种用于描述HTML文档外观和格式的样式表语言。CSS允许开发者和设计师将网页的呈现(布局、颜色、字体等)与内容(HTML)分离开来,从而使得网页的设计更加灵活和可维护。
内联样式
内联样式是直接在HTML元素的style属性中定义的CSS规则。适用于单个元素的样式定义。
<p style="background-color: pink;">使用[内联]方式</p>
<p>标签使用了内联样式来设置背景颜色为粉红色。
内嵌样式
内嵌样式在HTML文档的<head>部分的<style>标签内定义的CSS规则。用于整个页面的样式定义。
<style>
#css1{ background-color: aqua; }
.css2{ color: red; }
p{ font-size: 30px; }
</style>
在这个例子中,定义了三种样式规则:
#css1:ID选择器,用于选择ID为css1的元素,并设置其背景颜色为浅蓝色(aqua)。
.css2:类选择器,用于选择所有具有css2类的元素,并设置其文本颜色为红色。
p:标签选择器,用于选择所有的<p>标签,并设置其字体大小为30像素。
外链样式
外链样式是在一个单独的CSS文件中定义的样式规则,然后通过<link>标签引入到HTML文档中。这种方法的优点是样式和内容分离,便于维护和重用样式。
<link rel="stylesheet" href="css2.css">
在这个例子中,我们引入了一个名为css2.css的外部CSS文件。用于设置p标签的边框的样式。
应用示例
在<body>中,有四个<p>标签,每个标签都以不同的方式应用了css样式:
<p style="background-color: pink;">使用[内联]方式</p>
<p id="css1">使用id选择器的[内嵌]方式</p>
<p class="css2">使用类选择器的[内嵌]方式</p>
<p>使用标签选择器的[内嵌]方式</p>
第一个<p>标签使用了内联样式,背景颜色被设置为粉红色。
第二个<p>标签通过ID选择器`#css1`应用了内嵌样式,背景颜色为浅蓝色。
第三个<p>标签通过类选择器`.css2`应用了内嵌样式,文本颜色为红色。
第四个<p>标签没有显式地应用任何样式,但会继承内嵌样式中为所有<p>标签设置的字体大小(30像素)。
css外链文件分析
p:这是一个标签选择器,选择了页面上的所有 <p> 标签。任何直接应用到 <p> 标签的样式都会影响页面中所有段落的外观。
border:这是一个属性,用于设置元素的边框。
1px:这是 border 属性的第一个值,定义了边框的宽度为1像素。
solid:这是 border 属性的第二个值,定义了边框的样式。solid 表示边框是实线。其他可能的值包括 dashed(虚线)、dotted(点线)。