本刊历程:
本人初步接触前端,在此记录一些学习心得,欢迎一起学习交流!!老样子,在网址“Learn Basic CSS by Building a Cafe Menu: Step 1 | freeCodeCamp.org”通过项目进行学习,为咖啡馆网页设计菜单页面来学习CSS(层叠样式表)的基础知识。CSS是一种用于设计HTML文档样式的语言,告诉浏览器如何显示网页。可以使用CSS设置HTML元素的颜色、字体、大小和其他方面。
学习说明:
项目成果预览
代码:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<hr>
<section>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>
</section>
</main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</footer>
</div>
</body>
</html>
CSS
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}
h2 {
font-size: 30px;
}
.established {
font-style: italic;
}
h1, h2, p {
text-align: center;
}
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:-25px;
}
hr {
height: 2px;
background-color: brown;
border-color: brown;
}
.bottom-line {
margin-top: 25px;
}
h1, h2 {
font-family: Impact, serif;
}
.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%;
}
/* FOOTER */
footer {
font-size: 14px;
}
.address {
margin-bottom: 5px;
}
a {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: brown;
}
a:active {
color: brown;
}
学习心得:
1、复习——html基本结构
正如在猫照片应用程序的最后几个步骤中学到的,有一个基本的结构需要开始构建网页。每个HTML文档都应该有一个DOCTYPE声明和HTML元素。DOCTYPE告诉浏览器文档的HTML版本。html元素表示包含所有其他元素的根元素。
【基本结构如我们代码中的<!DOCTYPE html><html lang="en"><></html>,在上一期小猫拍照应用里有详细介绍】
<head><head>、<body></body>
【基本结构如我们代码中的<head> <title>Cafe Menu</title><meta charset="utf-8"></head><body><main></main></body>,表明标题为Cafe Menu,编码方式是utf-8,在上一期小猫拍照应用里有详细介绍】
<h1></h1>,<p></p>,<section></section>
【 基本结构如我们代码中的 <section><h1>CAMPER CAFE</h1> <p>Est. 2020</p> </section>,在上一期小猫拍照应用里有详细介绍】
2、学习——CSS配置样式
html中加入<style></style>
第一种方式是直接在html中加入<style></style>,将其加入在<head><head>中,基本格式如下
<style>
element {
property: value;
}
</style>
【比如
<head>
<meta charset="utf-8" />
<title>Cafe Menu</title>
<style>
h1,h2,p {text-align: center;}
</style>
</head>,就是使得h1\h2\p对应的文字内容居中】
通过在样式标记内编写CSS,对三个元素进行了样式化。这是可行的,但由于会有更多的样式,最好把所有的样式放在一个单独的文件中,并链接到它。
创建新的styles.css文件,加入<style></style>
为此,引出第二种方式,创建一个单独的styles.css文件,将创建的样式重写到styles.css文件中,并且在原html代码中,去除<style></style>这一部分,并在html代码head中加入link。
【 <head>
<meta charset="utf-8" />
<title>Cafe Menu</title>
<link rel="stylesheet" href="styles.css">
</head>】
为了使页面的样式在移动设备上看起来与在台式机或笔记本电脑上看起来相似,需要添加一个具有特殊内容属性的元元素。视口元标签 (<meta name="viewport">
): 这个标签对于响应式设计至关重要,它确保网页能够根据不同设备的屏幕尺寸适当地缩放和渲染。
【在head元素中添加以下内容:<meta name="viewport" content="width=device-width, initial-scale=1.0" />】
3、CSS:body背景、字体风格、内边距
背景设置为原木色,添加咖啡豆背景。由于咖啡馆的主要产品是咖啡,使用咖啡豆的图像作为页面的背景。添加一个background-image属性,并将其值设置为url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)。
【 body { background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); /* 设置背景图片 */
font-family: sans-serif; /* 定义字体风格为无衬线 */
padding: 20px; /* 设置四周内边距为20像素 */ }】
4、HTML、CSS:div
HTML部分
div元素主要用于设计布局,与您目前使用的其他内容元素不同。在body元素中添加div元素,然后将所有其他元素移动到新div中。在html开始的div标记中,添加值为menu的id属性。
【
<body>
<div class="menu">
/*这个是可以直接定义选择器配套的代码,现在我们使用的是上一行的类选择器 <div id="menu">*/
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section>
<h2>Coffee</h2>
</section>
</main>
</div>
</body>
】
CSS部分
在css中加入配套样式,现在的目标是使div不占用整个页面的宽度。可以使用id选择器来针对具有id属性的特定元素。通过将哈希符号#直接放在元素的id值前面来定义id选择器。例如,如果一个元素的id是cat,那么你可以这样定位该元素:
示例代码
#cat {
width:250 px;
}
然而,更常见的是使用不同的选择器来样式化元素。类选择器是由一个名字定义的,在名字前面加一个点,如下所示:
示例代码
.class-name {
风格
}
通过引入.menu的类,使用类选择器。
【使用#menu选择器设置元素的宽度为300px。
/* 为class="menu"的<div>元素设置样式 */
.menu { width: 80%; /* 宽度设为父容器(body)的80% */
background-color: burlywood; /* 背景颜色为浅棕色 */
margin-left: auto; /* 左外边距自动,用于水平居中 */
margin-right: auto; /* 右外边距自动,用于水平居中 */
padding: 20px; /* 内边距20像素 */
max-width: 500px; /* 最大宽度为500像素 */ }
}}】
补充:CSS中的注释是这样的:/* comment here */
5、HTML、CSS:article
逻辑与div是相似的,在html中加入定义类,在css中定义样式
HTML部分
【<article class="item">
<p class="flavor">French Vanilla</p>
<p class="price">3.00</p> <!-- 咖啡名称和价格 -->
</article>】
CSS部分
【/* 设置class="item"内部<p>标签的显示方式和外边距 */
.item p {
display: inline-block; /* 行内块显示方式 */
margin-top: 5px; /* 上外边距5像素 */
margin-bottom: 5px; /* 下外边距5像素 */
font-size: 18px; /* 字体大小为18像素 */ }
/* 设置类名为.flavor和.dessert的<p>标签的文本对齐和宽度 *
/ .flavor, .dessert {
text-align: left; /* 文本左对齐 */
width: 75%; /* 宽度为75% */ }
/* 设置类名为.price的<p>标签的文本对齐和宽度 */
.price { text-align: right; /* 文本右对齐 */
width: 25%; /* 宽度为25% */ }】
6、探讨html中<main>
, <section>
, <article>
, 和 <div>
<main>
, <section>
, <article>
, 和 <div>
是HTML中常用于组织和结构化网页内容的元素。它们各自承担不同的角色,有助于构建更清晰、更语义化的网页结构。这不仅有利于搜索引擎优化(SEO),也提高了网站的可访问性。
<main>
- 用途:
<main>
元素用于包裹页面的主要内容区域。它应该包含网页中最核心的内容,这些内容是页面独有的,不包括在页面的重复区域(如头部、导航栏、页脚等)。 - 唯一性: 一个页面应该只有一个
<main>
元素。这有助于屏幕阅读器和辅助技术确定网页的主体内容。 - SEO 和可访问性: 使用
<main>
可以提高页面内容的可访问性,使搜索引擎更好地理解页面结构。
<section>
- 用途:
<section>
元素用来表示文档或应用的一个独立部分,通常会有一个标题。如果内容足够重要,可以将其视为页面内的一个小节。 - 组织性:
<section>
是一个容器,用于相关内容的分组。例如,一个新闻网站可以使用<section>
来分隔不同主题的新闻,如国内、国际、体育等。 - 语义性: 使用
<section>
而不是非语义的<div>
可以增强文档的结构化和语义化,帮助搜索引擎和辅助技术更好地理解内容的组织方式。
<article>
- 用途:
<article>
元素用于包裹独立的、自成一体的内容,这些内容理论上可以独立于网站的其余部分存在。例如,博客帖子、报纸文章、用户评论等。 - 独立性:
<article>
内的内容应该是独立的,这意味着如果将其从页面上剥离出来,放在其他地方仍然具有完整性和意义。 - 重用性:
<article>
内的内容通常适合被重复使用或单独引用,这在RSS feeds或社交媒体分享时特别有用。
<div>
- 用途:
<div>
是一个通用的容器元素,用于组织布局或样式化。它本身没有语义意义,主要用于CSS布局或JavaScript操作。 - 灵活性:
<div>
非常灵活,通常被用来创建网页布局中的行和列,或者用作其他元素的包裹器,以应用特定的样式或行为。
它们之间的关系
- 层次结构:
<main>
通常作为最外层的元素,包含整个页面的主要内容。<section>
可以在<main>
内部使用,用于进一步组织相关的内容块。<article>
可以在<section>
内部使用,用于标识独立的、完整的内容单元。而<div>
可以在所有这些元素内部使用,提供必要的样式和布局支持。 - 功能和样式:
<main>
,<section>
, 和<article>
提供语义上的组织,而<div>
提供视觉和功能上的组织。在设计网页时,应优先使用语义元素以提高内容的可访问性和结构性,而<div>
用于那些纯粹的样式或脚本需要。
7、HTML、CSS:hr
HTML 中的 <hr>
标签用于在文档中创建一条水平线,主要用于分隔内容或定义段落之间的转换。这个元素是自闭合的,不需要结束标签,并且其表现形式主要是视觉上的。在 HTML5 中,<hr>
标签表示主题内容的分隔,而不仅仅是视觉效果。
基本特性和用途:
- 分隔内容:
<hr>
最常见的用途是在视觉上分隔不同的内容区域。例如,在博客帖子中分隔两个不同的主题,或在一篇文章中标记不同章节的开始。 - 语义意义:在 HTML5 中,
<hr>
具有语义意义,表示文档中的主题转换。这可以帮助搜索引擎和辅助技术理解页面结构。 - 样式化:尽管
<hr>
默认会显示为一条水平线,但可以通过 CSS 进行广泛的样式化,包括改变颜色、宽度、边框等。这使得它可以完全符合网站的设计风格。
HTML部分
【<hr class="bottom-line">】
CSS部分
【hr { height: 2px; /* 高度为2像素 */
background-color: brown; /* 背景颜色为棕色 */
border-color: brown; /* 边框颜色为棕色 */ }】
8、链接a
HTML部分
【<p> <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a> </p>】
<p>
: 这是一个段落元素,用于包围文本和其他内联元素,这里用来包围超链接。<a>
: 这是一个锚元素(超链接),用于创建一个指向另一个页面的链接。href="https://www.freecodecamp.org"
:href
属性指定链接的目标URL,这里是链接到 freeCodeCamp 的主页。target="_blank"
:target
属性指定如何打开链接的目标。_blank
值意味着链接将在新窗口或新标签页中打开,这是常用于外部网站链接的做法,以避免导航离开当前网站。
CSS部分
【a { color: black; /* 默认颜色黑色 */ }
a:visited { color: black; /* 访问后颜色仍为黑色 */ }
a:hover { color: brown; /* 悬停时颜色变为棕色 */ }
a:active { color: brown; /* 激活时颜色为棕色 */ }】
这部分CSS代码用于定义超链接(a
元素)在不同状态下的样式:
a
: 指定所有超链接的默认样式。color: black;
: 设置链接文字的默认颜色为黑色。
a:visited
: 用于定义用户已访问过的链接的样式。color: black;
: 即使链接被访问过,颜色仍然保持黑色,这样可以保持网站颜色的一致性。
a:hover
: 指定当鼠标悬停在链接上时的样式。color: brown;
: 当鼠标悬停时,链接颜色变为棕色,提供视觉反馈,告诉用户可以点击这个链接。
a:active
: 定义链接在被点击的那一刻的样式。color: brown;
: 当链接被激活(即在鼠标点击时)颜色也是棕色,这为用户操作提供即时的视觉反馈。
这些样式增强了用户界面的交互性,通过颜色变化向用户明确指示链接的可点击性,以及他们的交互状态(如是否已访问,是否正在被点击等)。
结语:
使用 HTML 和 CSS 创建和设计网站时,它们各自扮演独特的角色,并通过互相配合来构建和美化网页。下面是一个关于如何使用 HTML 和 CSS 以及它们之间如何交互的总结:
HTML:网页内容的结构
HTML(超文本标记语言)是网页内容的骨架。它定义了网页的结构和内容元素,如文本、图片、链接等。
- 元素和标签:HTML 使用一系列标签来标记文本,这些标签告诉浏览器如何展示它们。例如,
<p>
用于段落,<h1>
到<h6>
用于标题,<img>
用于图片等。 - 属性:标签可以包含属性,增加额外的信息,如
<a href="...">
中的href
指定链接目标,<img src="...">
中的src
指定图片来源。 - 语义标签:使用如
<article>
、<footer>
、<header>
等语义标签提高内容的结构化和可访问性。
CSS:网页的样式和布局
CSS(层叠样式表)用于增强 HTML 内容的表现形式,比如设置字体样式、颜色、布局等。
- 选择器:CSS 使用选择器来指定哪些 HTML 元素应该应用特定的样式规则。例如,类选择器(
.classname
)和 ID 选择器(#idname
)可以定位 HTML 中的特定元素。 - 属性和值:每个 CSS 规则包含一个属性和一个值,用来定义如何显示一个元素。例如,
color: red;
定义字体颜色。 - 布局技术:CSS 提供了多种布局技术,如 Flexbox 和 Grid,它们允许开发者创建复杂的响应式网页布局。
二者的交互
- 内联样式:直接在 HTML 元素中使用
style
属性来应用 CSS,这种方式虽快速但难以维护,不推荐用于生产环境。 - 内部样式表:在 HTML 的
<head>
部分使用<style>
标签定义样式。适用于单个页面的样式定义。 - 外部样式表:最常用的方法,使用
<link>
标签在 HTML 中引入外部的.css
文件。这种方法使结构与样式分离,便于维护和重用。
最佳实践
- 结构与样式分离:尽量保持 HTML 和 CSS 的分离。使用外部样式表可以使内容和设计分离,便于管理和更新。
- 语义化 HTML:使用适当的 HTML5 元素增强内容的可访问性和搜索引擎优化(SEO)。
- 响应式设计:使用媒体查询(Media Queries)和响应式工具,如 Flexbox 和 Grid,确保网页在不同设备上都能良好展示。
- 维护性和可扩展性:使用一致的命名约定和注释,保持 CSS 的组织和清晰,以便未来的维护和扩展。
通过这样的结构和样式定义方式,可以创建出既功能强大又外观美观的网页,同时保持良好的用户体验和易于维护的代码。