编写咖啡店菜单 基础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>

可以通过创建一个选择器列表将同一组样式添加到许多元素上, 每个选择器都用逗号分隔
例如,将h1h2p 元素的文本居中

<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张图片

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;
}

编写咖啡店菜单 基础CSS_第2张图片
height 属性:设置元素的高度(纵向长度)
width 属性:设置元素的宽度(横向长度)

4. margin 属性

将元素居中

要在水平方向上将 div 居中,可以通过把它的 margin-leftmargin-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 元素添加了 animaldog

<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 元素中。 你可以使用名为 itemclass 为嵌套在元素中任何位置的所有 p 元素设置样式,使用下面的选择器,添加一个值为 inline-blockdisplay 属性,这样 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%。将每个 classwidth 值更改为 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;
}

编写咖啡店菜单 基础CSS_第3张图片

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;
}

编写咖啡店菜单 基础CSS_第4张图片
顶部: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;
}

编写咖啡店菜单 基础CSS_第5张图片

11. font-family 属性

可以更改文本的 font-family,使其看起来与浏览器的默认字体不同。 每个浏览器都有一些可用的常用字体
通过添加值为 sans-seriffont-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)的排版是由用户浏览器的默认值设置的
添加两个新的类选择器(h1h2)。 对两者都使用 font-size 属性,该属性可以改变文本的字体大小。对 h1 使用 40px,对 h2 使用 30px 的值

h1{
  font-size:40px;
}
h2{
  font-size:30px;
}

13. height 属性

hr 元素的默认属性将使其显示为浅灰色细线。 你可以通过为 height 属性指定一个值来改变线条的高度(即宽度)

hr{
  height:15px;
}

编写咖啡店菜单 基础CSS_第6张图片
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;
}

效果图

编写咖啡店菜单 基础CSS_第7张图片

你可能感兴趣的:(css,html,前端)