"本资源主要介绍了网页设计中的CSS语法基础,包括行内样式表、内部样式表和外部样式表的使用方法以及它们之间的优先级关系。同时提到了关联选择器的应用,例如通过`h3 em`来指定嵌套在`<h3>`标签中的`<em>`标签内容的字体颜色。"
在网页设计中,CSS(Cascading Style Sheets)是一种用于定义网页元素外观和布局的重要工具。它允许我们将内容和表现分离,提高页面的可维护性和可访问性。CSS有三种主要的应用方式:
1. **行内样式表**:行内样式是直接在HTML元素内部通过`style`属性定义的,只对该元素生效。例如:
```html
<p style="font-size:13pt; text-decoration:underline; color:blue">段落内容</p>
```
在这个例子中,段落的字体大小为13pt,文本有下划线,颜色为蓝色。
2. **内部样式表**:内部样式表是在HTML文档的`<head>`部分,使用`<style>`标签定义的。这些样式应用于整个文档。例如:
```html
<head>
<style type="text/css">
p {text-align:center}
h1 {color:blue}
</style>
</head>
```
这里设置了所有`<p>`标签居中对齐,所有`<h1>`标签文字颜色为蓝色。
3. **外部样式表**:外部样式表是存储在单独的`.css`文件中,通过`<link>`标签引入到HTML文档。例如:
```html
<head>
<link rel="stylesheet" type="text/css" href="mycss.css"/>
</head>
```
这样,`mycss.css`文件中的样式会应用到整个HTML文档。
样式表的优先级遵循以下规则:行内样式表 > 内部样式表 > 外部样式表 > 浏览器默认样式。如果一个元素同时被多个样式覆盖,优先级高的样式会生效。
在实际应用中,如果要实现一个网页,其中大部分段落左对齐,只有一个段落右对齐,可以这样编写CSS语句:
```html
<html>
<head>
<style type="text/css">
/* 所有段落的默认样式 */
p {color:red; text-align:left;}
/* 特殊情况下的右对齐段落 */
.right-align {text-align:right;}
</style>
</head>
<body>
<p class="right-align">右对齐的段落内容</p>
<p>其他左对齐的段落内容</p>
</body>
</html>
```
在这个例子中,我们首先设置了所有段落的文字颜色为红色,并且默认对齐方式为左对齐。然后,我们创建了一个类`.right-align`,并将其应用于需要右对齐的段落,该段落就会根据这个类的样式进行显示。