CSS(层叠样式表)是一种用于描述网页中元素样式的语言。它是一种标记语言,用于控制网页的布局、字体、颜色、大小、边框、背景等外观和样式。CSS通过将样式与HTML文档分离,实现了网页内容与网页样式的分离,使得网页结构与样式可以自主管理,提高了网页的可维护性和灵活应用。
CSS样式表由一系列的规则(规则集)组成,每个规则由选择器和声明块组成。选择器用于选择要应用样式的HTML元素,而声明块由一系列的样式属性和对应的值组成,用于定义元素的外观和样式。
CSS样式表中可以定义多种样式,用于控制网页元素的外观和布局。以下是CSS样式表中常见的三种样式:
1、内联样式(Inline Style):
内联样式是将CSS样式直接应用到HTML元素的style属性中。这样的样式仅适用于该特定的元素,并且会覆盖外部样式表和内部样式表中的相同样式。内联样式的优先级最高。
<p style="color: red; font-size: 18px;">This is a paragraph with inline style.</p>
2、内部样式表(Internal Style Sheet):
内部样式表是将CSS样式放置在HTML文档的style标签内部。这种样式表会应用于整个HTML文档中的所有匹配选择器的元素。
<!DOCTYPE html><html><head> <title>My Web Page</title> <style> /* 内部样式表 */ p { color: blue; font-size: 16px; } </style></head><body> <p>This is a paragraph with internal style.</p></body></html>
3、外部样式表(External Style Sheet):
外部样式表是将CSS样式放置在一个独立的CSS文件中,然后通过link标签引入到HTML文档中。这种样式表可以在多个HTML文档中共享,使得样式可以被整个网站使用。
<!DOCTYPE html><html><head> <title>My Web Page</title> <link rel="stylesheet" href="styles.css"></head><body> <p>This is a paragraph with external style.</p></body></html>
styles.css:
/* 外部样式表 */p { color: green; font-size: 20px;}
使用内联样式、内部样式表和外部样式表,可以根据不同的需求和情况来组织和管理CSS样式,实现对网页外观和布局的精确控制。外部样式表通常是最推荐的方法,因为它可以实现样式的重用和维护的便捷性。