课堂笔记

课堂笔记

一、外部样式表

<link rel="stylesheet" href="css/style.css" />

• 链接一个外部 CSS 文件 css/style.css。

---

二、内部样式表（<style> 标签内）

tr:nth-child(odd) {
  background-color: aqua;
}
tr:nth-child(even) {
  background-color: blueviolet;
}

1. 作用对象

• 作用于表格中的行（<tr> 元素）。

2. 伪类选择器

• :nth-child(odd)：选择父元素下的第奇数个子元素（即表格的第 1、3、5… 行）。
• :nth-child(even)：选择第偶数个子元素（第 2、4、6… 行）。

3. 应用效果

• 表格行会出现交替条纹（斑马纹），提高可读性。

---

三、行内样式

写在 <h1> 标签的 style 属性中：

<h1 style="background-color: blue; color: gold;">我是主页</h1>

• 优先级：行内样式 > 内部样式表 > 外部样式表。因此此处样式会覆盖任何其他方式对 <h1> 的背景和文字颜色设置。

---

四、HTML 内容

1. 一级标题

<h1 style="background-color: blue; color: gold;">我是主页</h1>

2. 超链接

<a href="1.html">前往子页1</a>

3. 表格

<table border="" cellspacing="" cellpadding="">

• border=""：边框属性未赋值，通常不显示边框。
• cellspacing=""：单元格间距。
• cellpadding=""：单元格内边距。

---

五、关键知识点回顾

知识点	在本例中的应用
外部样式表	<link> 引入 css/style.css
内部样式表	<style> 标签内定义
行内样式	style 属性设置
伪类 :nth-child(odd/even)	选择奇数/偶数行
表格基本结构	<table>、<tr>、<th>、<td>
超链接	<a href="..."> 页面跳转