【免费】html作业文件lksjdlflajrfalwfiejliorae资源-CSDN文库

需积分: 0 170 浏览量更新于2024-03-29 收藏 531KB DOC 举报

### 知识点总结 #### 案例 1：CSS 行内样式的应用 - **行内样式介绍**： - 行内样式（Inline Style）是将 CSS 样式直接添加到 HTML 元素中，适用于单个元素的样式修改。 - **3 号标题设置**： - 使用 `style` 属性为 `<h3>` 标签添加内联样式，设置字体为微软雅黑、颜色为蓝色、字体大小为 26px。 - 示例代码：`<h3 style="font-family: '微软雅黑'; color: blue; font-size: 26px;">...</h3>` - **段落字体设置**： - 同样使用 `style` 属性为 `<p>` 标签添加内联样式，设置字体为微软雅黑、颜色为红色、字体大小为 28px。 - 示例代码：`<p style="font-family: '微软雅黑'; color: red; font-size: 28px;">七步诗煮豆燃豆萁，豆在釜中泣。本是同根生，相煎何太急。</p>` #### 案例 2：外部样式表的使用 - **外部样式表简介**： - 外部样式表（External Style Sheet）是将 CSS 样式存储在一个单独的 `.css` 文件中，并通过 `<link>` 标签将其与 HTML 文档关联起来。 - **创建与引用样式表**： - 创建名为 `red.css` 和 `blue.css` 的外部样式表文件。 - 在 HTML 文件中通过 `<link rel="stylesheet" href="red.css">` 和 `<link rel="stylesheet" href="blue.css">` 引用这些样式表。 - **样式设置**： - 在 `red.css` 中，使用标记选择器为 `<h1>` 设置红色文字、居中显示，并为 `<h2>` 设置红色、30px 字体大小和居中显示。 - 在 `blue.css` 中，使用标记选择器为 `<p>` 设置蓝色、16px 字体大小和居中显示。 - 示例代码（`red.css`）：`h1 { color: red; text-align: center; } h2 { color: red; font-size: 30px; text-align: center; }` - 示例代码（`blue.css`）：`p { color: blue; font-size: 16px; text-align: center; }` #### 案例 3：内嵌式引入 CSS 样式 - **内嵌式介绍**： - 内嵌式（Embedded Style）是将 CSS 样式放置在 HTML 文件的 `<head>` 部分内的 `<style>` 标签中。 - **类选择器的使用**： - 定义多个类选择器（`.class1`, `.class2` 等），用于为不同元素设置不同的样式。 - **示例代码**： - 在 `<style>` 标签中定义类 `.blue`, `.red`, 和 `.yellow` 分别为字母 “G”, “o”, 和 “o” 设置蓝色、红色、黄色字体、加粗和 60px 字体大小。 - 示例代码（HTML）：`<style>.blue { color: blue; font-weight: bold; font-size: 60px; }.red { color: red; font-weight: bold; font-size: 60px; }.yellow { color: yellow; font-weight: bold; font-size: 60px; }</style>` - 示例代码（HTML）：`<div class="blue">G</div><div class="red">o</div><div class="yellow">o</div><div class="blue">g</div><span>le</span>` #### 案例 4：使用 `<p>` 标签和字体效果 - **使用 `<p>` 标签构建结构**： - 使用多个 `<p>` 标签，为每个 `<p>` 添加不同的类，以实现不同的字体效果。 - **字体效果设置**： - 通过类选择器设置颜色、字体大小、字体类型等。 - 示例代码（HTML）：`<p class="default">我是默认的字体，设置为红色</p><p class="size">我是设置 18 像素的字号哦</p><p class="font">我是设置为微软雅黑的字体哦</p><p class="bold">我是设置为加粗的字体哦</p><p class="italic">我是设置为倾斜的字体哦</p><p class="lowercase">我是小写字 liao cheng da xue，设置为蓝色。</p><p class="uppercase">我是设置为大写的小写字母:liao cheng da xue</p><p class="composite">我是综合以上属性的字体哦:liao cheng da xue</p>` - **使用 `font` 综合属性**： - 在最后一个类中使用 `font` 属性来综合设置字体大小、字体类型等。 - 示例代码（CSS）：`.composite { font: italic bold 18px '微软雅黑'; color: blue; }` #### 案例 5：使用标记选择器控制页面元素 - **标记选择器**： - 使用标记选择器为整个文档中的所有文本设置统一的字体、字体大小和颜色。 - **设置文本样式**： - 为所有文本设置字体为宋体、12px、绿色。 - 为特定文本设置其他样式，如颜色、字体大小、加粗、居中等。 - 示例代码（CSS）：`body { font-family: '宋体'; font-size: 12px; color: green; } .title { color: red; font-size: 16px; font-weight: bold; text-align: center; text-decoration: underline; } .first-line-indent { text-indent: 2em; }` - **示例文本**： - 设置 `<h2>` 标题“春天在哪里”为 16px、红色、加粗、居中、上划线的效果。 - 设置文本首行缩进 2 个字符。 #### 案例 6：综合使用标记选择器、ID 选择器及类选择器 - **综合使用选择器**： - 使用标记选择器、ID 选择器及类选择器控制页面元素的样式。 - 示例代码（CSS）：`body { font-family: '宋体'; font-size: 14px; line-height: 18px; } #title { color: purple; font-size: 18px; font-weight: bold; text-align: center; } .centered { color: red; text-align: center; } .blue-text { color: blue; text-indent: 2em; letter-spacing: 16px; } .green-bold-italic { color: green; font-weight: bold; font-style: italic; } .purple-strikethrough { color: purple; text-decoration: line-through; }` #### 案例 7：使用行内样式控制文本 - **行内样式应用**： - 使用行内样式为文本设置字体、颜色等。 - 示例代码（HTML）：`<p style="font-family: '微软雅黑'; font-size: 14px; color: black;">新浪 <span style="color: red;">博客首页</span>—<span style="color: red;">新浪网</span>新浪网博客频道是全中国最主流，最具人气的博客频道。拥有最耀眼的娱乐明星博客、最知性的名人博客、最动人的情感博客、最自我的草根博客。<br>blog.sina.com.cn/2014-07-07<span style="color: gray; text-decoration: underline;">-百度快照-评价</span></p>` - **设置标题和链接样式**： - 设置标题为 16px、左对齐、下划线的效果。 - 设置文本 “-百度快照-评价” 为灰色、下划线的效果。 - 示例代码（HTML）：`<h1 style="font-size: 16px; text-align: left; text-decoration: underline;">新浪</h1>`