青少年编程与数学 01-006 设计网页的外观（CSS）02课题、方式

最新推荐文章于 2024-08-03 23:03:36 发布

明月看潮生

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量961

点赞数 27

分类专栏： # 编程与数学第01阶段文章标签：青少年编程 css 前端编程与数学

本文链接：https://blog.csdn.net/qq_40071585/article/details/140303349

版权

编程与数学第01阶段专栏收录该内容

190 篇文章 0 订阅

订阅专栏

青少年编程与数学 01-006 设计网页的外观（CSS）02课题、方式

课题摘要
课题要求
一、三种CSS应用方式
二、外部 CSS
三、内部 CSS
四、行内 CSS
课题作业
附录一、人物介绍：詹姆斯·阿瑟·高斯林

本文介绍CSS的应用方式。

“设计不仅仅是外观和感觉。设计是关于如何运作。
Design is not just what it looks like and feels like. Design is how it works.
—— 史蒂夫·乔布斯 (Steve Jobs) | 美国企业家，苹果公司联合创始人 | 1955 ~ 2011”

“美是力量，它能够改变人们，有时甚至能够拯救他们。
Beauty is power; it can change people and sometimes even save them.
—— 可可·香奈儿 (Coco Chanel) | 法国时尚设计师，香奈儿品牌创始人 | 1883 ~ 1971”

“艺术是创造，设计是解决问题。
Art is creation, design is problem-solving.
—— 保罗·兰德 (Paul Rand) | 美国平面设计师，IBM和UPS等品牌标志设计者 | 1914 ~ 1996”

"设计是让事物变得有用，美观，有意义，并且能够以尽可能简单的方式传达其最大价值和效用。
Design is making things useful, beautiful, meaningful, and effective in the simplest possible way.
—— 迪特尔·拉姆斯 (Dieter Rams) | 德国工业设计师，博朗设计总监 | 1932 ~ "

课题摘要

本文介绍CSS的应用方式。

课题要求

熟练使用CSS的三种应用方式。

一、三种CSS应用方式

有三种插入样式表的方法：

外部 CSS
内部 CSS
行内 CSS

二、外部 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！
每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。
外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：

<link rel="stylesheet" type="text/css" href="mystyle.css">

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。外部 .css 文件不应包含任何 HTML 标签。
“mystyle.css” 是这样的：

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

三、内部 CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在 head 部分的 <style> 元素中进行定义。
内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义：

<head>
<style>
body {
  background-color: linen;
}
h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>

四、行内 CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
行内样式在相关元素的 “style” 属性中定义：

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。请谨慎使用此方法。
多个样式表
如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。
层叠顺序
当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？
页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

行内样式（在 HTML 元素中）
外部和内部样式表（在 head 部分）
浏览器默认样式
因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

都要试一下。

课题作业

完成文档中的代码练习。
CSS应用的三种方式有什么区别？

附录一、人物介绍：詹姆斯·阿瑟·高斯林

詹姆斯·阿瑟·高斯林（James Arthur Gosling），生于1955年5月19日，是一位加拿大计算机科学家，以其在计算机编程语言和软件开发领域的贡献而闻名。他被誉为“Java之父”，因为他在1995年领导了Java编程语言的早期开发工作。

主要成就和贡献：

Java编程语言：高斯林在Sun Microsystems公司工作期间，领导开发了Java语言。Java是一种面向对象、平台无关的编程语言，被广泛用于企业级服务器应用程序、移动电话和互联网应用程序。
Oak语言：Java最初被命名为Oak，旨在为嵌入式系统和数字家用电器提供一种安全、可靠的编程方式。
Java平台：除了Java语言本身，高斯林还参与了Java平台的开发，包括Java虚拟机（JVM）和Java API。
书籍：他撰写了多本关于Java和编程的书籍，包括《Java编程语言》（“The Java Programming Language”）。
技术贡献：高斯林在软件工程、并行计算和网络编程方面也有深入的研究和贡献。
荣誉和奖项：由于他在Java语言和平台开发中的杰出贡献，高斯林获得了多项荣誉，包括被选为美国国家工程院院士。
其他项目：除了Java，高斯林还参与了其他技术项目，包括用于实时系统的编程语言和工具的开发。
职业发展：在Sun Microsystems被甲骨文公司收购后，高斯林离开了公司，并在2010年加入了Google。此后，他还在其他技术公司担任职位，并继续在编程语言和软件开发领域进行研究和开发。