编写咖啡店菜单 基础CSS
文章目录
-
- html
-
- 1. `style` 元素
- 2. 创建并在HTML中连接CSS文件
-
- 创建CSS文件
- 连接CSS文件
- 3. 同步移动端与笔记本端界面
- 4. `div` 元素
- 5. `article` 元素
- 6. `flavor`属性
- 7. `class`属性
- 8. `hr` 元素
- css
-
- 1. `text-align` 属性
- 2. `background-color` 属性
-
- 颜色模型
- 3. `width` 属性
- 4. `margin` 属性
-
- 将元素居中
- 改变行间距
- 消除默认边距
- 属性简写
- 5. 注释
- 6. `class` 选择器（类选择器）
- 7. `background-image` 属性
- 8. 内联元素
-
- `display：inline-block`
- `display:block`
- 9. `padding` 属性
-
- 简写padding
- 10. `max-width` 属性
- 11. `font-family` 属性
- 12. `font-size` 属性
- 13. `height` 属性
- 14. `border-color` 属性
- 15. 改变链接颜色
-
- `pseudo-selector` 属性
-
- 设置被实际访问时的颜色
- 设置鼠标悬停时的颜色
- 设置被实际点击时的颜色
- 完整代码
-
- index.html
- styles.css
- 效果图
html
1. style 元素
在创建的内容的演示和外观方面，一直受到限制。 为了开始控制，在 head 元素中添加一个 style 元素
<style>style>
在 style 元素中指定一个样式，并为此设置一个属性。例如，通过设置 text-align 属性值为 center，让 h1 元素居中
大括号即为类型选择器，内容为CSS
<style>
h1{
text-align:center;
}
style>
可以通过创建一个选择器列表将同一组样式添加到许多元素上， 每个选择器都用逗号分隔
例如，将h1、h2 和 p 元素的文本居中
<style>
h1,h2,p {
text-align: center;
}
style>
2. 创建并在HTML中连接CSS文件
创建CSS文件
已经通过在 style 标签内编写 CSS 来设置了三个元素的样式。 这样做可以，但由于会有更多的样式，最好把所有的样式放在一个单独的文件中并链接到它
将创建的样式改写到 styles.css 文件中。 请确保排除开头和结尾的 style 标签
h1, h2, p {
text-align: center;
}
连接CSS文件
在 head 元素中嵌套一个自闭合 link 元素。 给它一个 rel 属性，值为 stylesheet 和一个 href 属性，值为 styles.css
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="utf-8" />
<title>Cafe Menutitle>
head>
3. 同步移动端与笔记本端界面
为了使页面样式在移动端看起来与在桌面或笔记本电脑上相似，需要添加一个带有特殊 content 属性的 meta 元素。在 head 元素中添加以下内容
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4. div 元素
div 元素主要用于设计布局，这与其他内容元素不同。 在 body 元素内添加一个 div 元素，然后将所有其他元素移到新的 div 内
<body>
<div>
<main>
<h1>CAMPER CAFEh1>
<p>Est. 2020p>
<section>
<h2>Coffeeh2>
section>
main>
div>
body>
5. article 元素
article 元素通常包含多个具有相关信息的元素
<article>
<p>French Vanillap>
<p>3.00p>
article>
6. flavor属性
口味和价格目前堆叠在一起，并以各自的 p 元素居中。 希望口味在左边，价格在右边
给 French Vanilla p 元素添加 flavor class
<p class="flavor">French Vanillap>
7. class属性
在.html中可以设置class属性的值，以方面在.css文件中创建类选择器
多个 classes 可以以空格分隔放在 class 属性内来一起设置给一个元素。 比如，如下代码给 div 元素添加了 animal 和 dog 类：
<div class="animal dog">
如果你给一个 HTML 元素添加多个类，列出的前几个类的样式可能会被之后的类覆盖
8. hr 元素
使用 hr 元素在不同内容的部分之间显示一个分隔符，hr 元素是没有结束标签的
<p class="established">Est. 2020p>
<hr>
<h2>Coffeeh2>
css
1. text-align 属性
让h1元素居中
h1 {
text-align: center;
}
2. background-color 属性
将 body 元素的 background-color 属性更改为 burlywood
body{
background-color:burlywood;
}
颜色模型
目前，有两种主要的颜色模型：用于电子设备的 叠加 RGB（红、绿、蓝）模型，以及用于打印的 消减 CMYK（青色、品红色、黄色，黑色）模型
使用 RGB 模型意味着颜色从黑色开始，色值随着红色、绿色和蓝色数值变化而变化。 一个简单的方法是使用 CSS rgb 函数
创建一个定位 container 类的新 CSS 规则，并使用 rgb(0, 0, 0) 将其 background-color 设置为黑色
.container {
background-color: rgb(0, 0, 0);
}
green 颜色关键字实际上是一个较暗的阴影，大约介于黑色和绿色最大值之间。将 rgb 函数中的绿色值设置为 127 以降低其强度
/* 亮绿色 */
background-color: rgb(0, 256, 0);
/* 深绿色 与background-color:green;颜色显示相同*/
background-color: rgb(0, 127, 0);
3. width 属性
width属性改变元素的宽度（横向长度），height属性改变元素的高度（纵向宽度）
现在的目标是使 div 不占用整个页面的宽度。 CSS 的 width 属性在这方面是完美的。 在样式表中创建一个新的类型选择器，使 div 元素的宽度为 300px
div{
width:300px
}
很容易看到文本在 div 元素内居中。 目前，div 元素的宽度以像素（px）为单位。 将 width 属性的值更改为 80%，使其为其父元素（body）的宽度的 80%
div {
width:80%;
background-color: burlywood;
}
height 属性：设置元素的高度（纵向长度）
width 属性：设置元素的宽度（横向长度）
4. margin 属性
将元素居中
要在水平方向上将 div 居中，可以通过把它的 margin-left 和 margin-right 属性设置为 auto 来做到这一点。 可以把页边距看作是元素周围不可见的空间。 使用这两个 margin 属性，将 div 元素置于 body 元素的中心
div {
width: 80%;
background-color: burlywood;
margin-left:auto;
margin-right:auto;
}
改变行间距
关注菜单上的项目和价格，每一行之间有相当大的差距。
定位所有嵌套在 class 名为 item 的元素中的 p 元素，并将它们的顶部和底部 margin 设置为 5px
.item p {
display: inline-block;
margin-top:5px;
margin-bottom:5px;
}
消除默认边距
菜单文本 CAMPER CAFE 的顶部空间与菜单底部的地址空间不同。 这是由于浏览器对 h1 元素有一些默认顶部 margin
将 h1 元素的顶部 margin 更改为 0 以删除所有顶部 margin
如果 h2 元素及其相关图标之间的垂直空间更小，那就太好了。 h2 元素具有默认的顶部和底部 margin 空间，因此你可以将 h2 元素的底部 margin 更改为 0 或其他数字。
有一种更简单的方法，只需向 img 元素添加一个负的顶部 margin，以将它们从当前位置拉上来。 负值是通过在值前面添加 - 创建的。 要完成这个项目，请继续在 img 类型选择器中使用 25px 的负顶部 margin
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:-25px;
}
属性简写
将其 margin 属性设置为 auto， 这会将 margin-top、margin-right、margin-bottom 和 margin-left 全部设置为 auto
当简写 margin 属性有两个值时，它将 margin-top 和 margin-bottom 设置为第一个值，并将 margin-left 和 margin-right 设置为第二个值
margin: 10px auto;
5. 注释
/* comment here */
6. class 选择器（类选择器）
class 选择器由前面带有一个点的名称定义
.menu{
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}
要将该类的样式应用于 div 元素，请在.html文件中 div 元素的开始标签上添加一个 class 属性，并将其值设置为 menu
<div class="menu">
多个 classes 可以以空格分隔放在 class 属性内来一起设置给一个元素。 比如，如下代码给 div 元素添加了 animal 和 dog 类
<div class="animal dog">
7. background-image 属性
用于设置页面背景
background-image 属性
body {
background-image:url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}
8. 内联元素
display：inline-block
p 元素嵌套在具有 item 类属性的 article 元素中。 你可以使用名为 item 的 class 为嵌套在元素中任何位置的所有 p 元素设置样式，使用下面的选择器，添加一个值为 inline-block 的 display 属性，这样 p 元素更像是内联元素(使得两个p元素内的文本在同一行）
.html
<article class="item">
<p class="flavor">French Vanillap>
<p class="price">3.00p>
article>
.css
.item p {display:inline-block; }
给 p 元素添加 inline-block 样式，并将它们放置在代码中的单独行上，会在第一个 p 元素的右侧创建一个空格，导致第二个元素转移到下一行。 解决此问题的一种方法是使每个 p 元素的宽度略小于 50%。将每个 class 的 width 值更改为 49%
.flavor {
text-align: left;
width: 49%;
}
.price {
text-align: right;
width: 49%;
}
display:block
使图像表现得像标题元素（块级），请创建一个 img 类型选择器，为 display 设限设置值 block
img{
display:block;
margin-left:auto;
margin-right:auto;
}
9. padding 属性
可以用各种 padding 属性给菜单在内容和侧面之间留一些空间
给 menu 类一个 padding-left 和一个 padding-right，数值都是 20px
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding-left:20px;
padding-right:20px;
}
顶部：padding-top；底部：padding-bottom
由于菜单的所有 4 个边具有相同的内部间距，可以删除四个属性并设置 padding 属性的值为 20px
简写padding
添加上下 padding 各为10px，并将左右 padding 设置为 0，类似于简写 margin 属性
padding:10px 0;
10. max-width 属性
菜单的当前宽度将总是占到 body 元素宽度的80%。 在一个非常宽的屏幕上，咖啡和甜点看起来与它们的价格相差甚远。给 menu 类添加一个 max-width 的属性，其值为 500px，以防止它变得太宽
.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width:500px;
}
11. font-family 属性
可以更改文本的 font-family，使其看起来与浏览器的默认字体不同。 每个浏览器都有一些可用的常用字体
通过添加值为 sans-serif 的 font-family 属性来更改 body 中的所有文本。 这是一种相当常见的字体，易于阅读(字体与未设置该属性时相同)
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family:sans-serif;
}
另一种字体(加粗)：
font-family:Impac;
可以通过添加另一个用逗号分隔的字体名称来为 font-family 添加一个后备值。 Fallback 是在初始值找不到/无法使用的情况下使用的。在 Impact 字体之后添加后备（fallback）字体serif
h1, h2 {
font-family: Impact,serif;
}
另一种字体(斜体)：
font-style:italic;
12. font-size 属性
标题元素（如 h1、h2）的排版是由用户浏览器的默认值设置的
添加两个新的类选择器（h1 和 h2）。 对两者都使用 font-size 属性，该属性可以改变文本的字体大小。对 h1 使用 40px，对 h2 使用 30px 的值
h1{
font-size:40px;
}
h2{
font-size:30px;
}
13. height 属性
hr 元素的默认属性将使其显示为浅灰色细线。 你可以通过为 height 属性指定一个值来改变线条的高度（即宽度）
hr{
height:15px;
}
height 属性：设置元素的高度（纵向长度）
width 属性：设置元素的宽度（横向长度）
14. border-color 属性
注意沿线边缘的灰色， 这些边缘叫作 borders。 元素的每一面都可以有不同的颜色，或者它们都可以相同
对于 hr 元素的所有边缘，名为 border-width 的属性的默认值为 1px。 通过将边框改为与背景相同的颜色，线条的总高度为 5px（3px 加上上下边框宽度 1px）
15. 改变链接颜色
链接在未点击状态下的默认颜色通常为蓝色。 已经在页面上被访问过的链接的默认颜色通常是紫色
要使 footer 链接的颜色相同，无论是否已访问链接，请为锚元素（a）使用类型选择器，并将 color 属性设置为 black
a{
color:black;
}
pseudo-selector 属性
设置被实际访问时的颜色
当链接被实际访问时，你可以使用类似 a:visited { propertyName: propertyValue; } 的 pseudo-selector 来更改链接的属性
当用户访问链接时，将页脚 Visit our website 链接的颜色更改为 grey
a:visited {color:grey; }
设置鼠标悬停时的颜色
当鼠标悬停在链接上时，你可以使用类似于 a:hover { propertyName: propertyValue; } 的 pseudo-selector 更改链接的属性
当用户将鼠标悬停在页脚 Visit our website 链接上时，将其颜色更改为 brown
a:hover {color:brown; }
设置被实际点击时的颜色
当链接被实际点击时，你可以使用类似 a:active { propertyName: propertyValue; } 的 pseudo-selector 来更改链接的属性
将页脚 Visit our website 链接的颜色更改为 white
a:active {color:white; }
完整代码
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menutitle>
<link href="styles.css" rel="stylesheet"/>
head>
<body>
<div class="menu">
<main>
<h1>CAMPER CAFEh1>
<p class="established">Est. 2020p>
<hr>
<section>
<h2>Coffeeh2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanillap><p class="price">3.00p>
article>
<article class="item">
<p class="flavor">Caramel Macchiatop><p class="price">3.75p>
article>
<article class="item">
<p class="flavor">Pumpkin Spicep><p class="price">3.50p>
article>
<article class="item">
<p class="flavor">Hazelnutp><p class="price">4.00p>
article>
<article class="item">
<p class="flavor">Mochap><p class="price">4.50p>
article>
section>
<section>
<h2>Dessertsh2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
<article class="item">
<p class="dessert">Donutp><p class="price">1.50p>
article>
<article class="item">
<p class="dessert">Cherry Piep><p class="price">2.75p>
article>
<article class="item">
<p class="dessert">Cheesecakep><p class="price">3.00p>
article>
<article class="item">
<p class="dessert">Cinnamon Rollp><p class="price">2.50p>
article>
section>
main>
<hr class="bottom-line">
<footer>
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our websitea>
p>
<p class="address">123 Free Code Camp Drivep>
footer>
div>
body>
html>
styles.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;
}
效果图
