第8课网页的数据呈现 课件 2023—2024学年浙教版（2023）初中信息技术八年级上册

</ /> 网页的 数据呈现 1 0 1 1 0 1 1 0 1 1 0 1 1 0 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 1 0 1 1 0 1 1 0 1 1 1 1 1 0 1 </案例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <h1>Mozilla is cool</h1> <img src="images/firefox-icon.png" alt="The Firefox logo: a flaming fox surrounding the Earth."> <p>At Mozilla, we’re a global community of</p> <p>Read the <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a> to learn even more about the values and principles that guide the pursuit of our mission.</p> </body> </html> </需要解决的问题 Step 1 怎样将文本设置为红色 Step 2 怎样将内容显示在屏幕的特定位置 Step 3 怎样用背景图片或颜色来装饰网页 什么是 CSS 1 0 1 1 0 1 1 0 1 1 0 1 1 0 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 1 0 1 1 0 1 1 0 1 1 1 1 1 0 1 </有关CSS 和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。 CSS 是一门样式表语言（Cascading Style Sheets），这也就是说人们可以用它来选择性地为 HTML 元素添加样式 可以用于可控制网页布局与样式，用于定义HTML文档中元素的外观和表现形式。比如网页中的文字的字号、字体、颜色、位置以及图片的大小等。 1 0 1 1 0 1 1 0 1 1 0 1 1 0 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 1 0 1 1 0 1 1 0 1 1 1 1 1 0 1 p { color: red; } 1 0 1 1 0 1 1 0 1 1 0 1 1 0 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 1 0 1 1 0 1 1 0 1 1 1 1 1 0 1 <style type=“text/css”></style> 添加在<body>标签之前 1 0 1 1 0 1 1 0 1 1 0 1 1 0 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 1 0 1 1 0 1 1 0 1 1 1 1 1 0 1 p { color: red; } 选择器 属性 属性的值 声明 1 0 1 1 0 1 1 0 1 1 0 1 1 0 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 1 0 1 1 0 1 1 0 1 1 1 1 1 0 1 p { color: red; width: 500px; border: 1px solid black; } 1 0 1 1 0 1 1 0 1 1 0 1 1 0 0 1 1 0 1 1 0 1 1 0 1 1 0 1 1 1 0 1 1 0 1 1 0 1 1 1 1 1 0 1 </CSS——一切皆盒子 {设置盒子的尺寸} {设置盒子的颜色} {构思盒子摆放的位置} {盒子应该收纳哪些内容} {……} </更改页面的颜色！ html { background-color: #00539f; } </文档体样式的设置 body { width: 600px; margin: 0 auto; background-color: #ff9500; padding: 0 20px 20px 20px; border: 5px solid black; } </定位页面主标题并添加样式 h1 { margin: 0; paddi