目 录CONTENT

文章目录

通过编写咖啡店菜单学习基础 CSS

shibuyu
2022-11-14 / 0 评论 / 0 点赞 / 61 阅读 / 3,324 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-11-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

freeCodeCamp之CSS-1

免费学习编程的网站 freeCodeCamp(🔥) - 官方版(英文)

通过编写咖啡店菜单学习基础 CSS

Building a Cafe Menu -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>

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 基础简述

应用方式

我们一共有3种应用CSS样式的方法。

  1. 我们可以在HTML元素行内的style中编写样式;
<div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div>
  1. 在HTML文档中添加<style>标签,然后在标签内编写CSS代码;
<head>
    <style>
        p{
            color:pink;
            border:blue 1px solid;
        }
    </style>
</head>
  1. 把CSS样式单独写入一个CSS样式文件,然后在需要使用的HTML文档中使用<link>引入。(本案例)
<link rel="stylesheet" type="text/css" herf="1.css">

改变文字颜色

a {
  color: black;
}

color就是用来定义文字颜色的样式属性;

注意: 选择器名中的样式元素必须用两个大括号包裹着 (开始{与结束})。在样式属性的最后必须加入一个分号;来结束。

使用CSS类

CSS中的类是为了解决复用样式的问题;

<div class="menu">
      <main>
        ....

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

在style元素中我们编写了一个.menu CSS类(CSS类需要在我们的名字前加入.符号, 然后CSS类的命名规范必须使用-分割);
接着我们可以把这个类加入HTML元素中,比如:<div class="menu">
记住在HTML中加入类,是不需要.这个符号在最前面的。

改变文字大小

字体大小是font-size样式属性控制的;

h2 {
font-size: 30px;
}

在h2选择器中加入font-size样式属性,并且把值设置为30px(30像素);

改变元素字体

body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}
h1, h2 {
font-family: Impact, serif;
}

使用font-family样式属性,我们可以定义一个元素所使用的字体;

里面的 Impact就是指定的字体名,如果这个字体找不到,或者语言不适应的话,就会往后面定义的字体进行应用;serif就是后备字体,可以用,分割输入多个,

补充:引入Google字体

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

我们只需要复制黏贴以下代码,加入到我们代码的顶端即可

现在我们可以在CSS中使用font-family: Lobster;, font-family字体属性值的格式是: font-family: FAMILY_NAME, GENERIC_NAME;

如果我们的字体名中含有空格,那我们就需要用双引号包裹着,例如:“Open Sans”。因为Lobster这个字体不存在这种情况,所以不需要使用双引号;

添加元素边框

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}

CSS边框有这些属性:style, color 和 width

使用border-width可以分别指定四个边框的宽度,如果在border-width中指定了四个值,则四个值的顺序是上 右 下 左。

border-width: 5px 10px 15px 20px;

使用 border-color 给边框设值颜色,边框的颜色也可以和边框的宽度一样,设置四个值 三个值 两个值 一个值,也提供了四个方向的值 border-XXX-color(top right bottom left),来分别设置四条边的颜色。

使用 border-style 来设置边框的样式,border-style 有五种属性如下表。

  • none 没有边框样式,默认值
  • solid 设置边框为实现
  • dashed 设置边框为点状线
  • double 设置边框为双实线
  • dashed 设置边框为虚线

给元素一个背景颜色

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

我们可以使用background-color属性来设置一个元素的背景颜色

给元素ID值

如:

<p class="address">123 Free Code Camp Drive</p>
.address {
  margin-bottom: 5px;
}

可以修改为

<p id="address">123 Free Code Camp Drive</p>
#address {
  margin-bottom: 5px;
}
  • 除了classCSS类属性,我们还可以给每一个HTML元素一个id属性;
  • id属性是有好几个实用的用途的:我们可以用id选择器来给一个元素CSS样式属性,同时也可以让JavaScript找到指定id的元素,并且对此进行修改等;
  • 记住,id属性的属性值应该是唯一的;
  • 浏览器不会强制要求id的唯一性,但是在实践中被广大认可id是需要唯一的,所以不要在多个一个元素中赋予同一个id属性;

注意:在我们的样式表<style>中,我们用. 类名来声明类的样式,但是如果是id的话我们会用# id名来声明id的样式。

给元素添加外边距

h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}

image-1668488550907
上图中有3组颜色,从内到外:蓝色是content(内容部分),绿色部分是padding(内边距),黄色部分是border(边框),最外面的橙色部分是margin(外边距)。通过这个图,我们就能清晰理解这些边距的实际产生的距离的效果。时

在排版中最常用的三大属性,它们是用来控制HTML元素之间的空隙的:padding(内边距),margin(外边距)和border( 边框);

CSS中的两种盒模型:

盒模型:标准盒模型

  • 盒子宽度 = 内容的宽度
  • 盒子高度 = 内容的高度
    其他间距都是额外加入的,会影响盒子总体呈现的宽高

盒模型:IE盒模型

  • 盒子宽度 = border + padding + 内容的宽度
  • 盒子高度 = border + padding + 内容的高度
    盒子的框高包含了边框和内边距,所以整体的盒子高度不受padding和border影响。

给元素负外边框

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:-25px;
}

给元素添加内边距

.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}

顺时针语法CSS让我们可以控制一个元素4个边的内边距,控制的属性分别是:padding-top (上)、padding-right (右)、padding-bottom (下)和padding-left (左);
当只指定一个值时,该值会统一应用到全部四个边的内边距上。
指定两个值时,第一个值会应用于上边和下边的内边距,第二个值应用于左边和右边。
指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的内边距。

HTML主体属性样式

body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
  font-family: sans-serif;
  padding: 20px;
}

首先每一个HTML页面都会有一个body元素;
body元素与其他HTML中的元素一样,都是可以使用CSS给予样式控制的。不同的就是,body元素中的样式会被HTML中其他元素默认继承。意思就是说,任何在 body 中的样式都会携带到其他元素中,如果 body 中给予了背景颜色是黑色,那我们加入一个div元素,默认也是黑色背景。

背景图片

background-image 属性描述了元素的背景图像.
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

body
{
background-image:url('xxx.jpg');
}

背景图像- 设置不平铺

body
{
background-image:url('xxx.jpg');
background-repeat:no-repeat;
}

如果你不想让图像平铺,你可以使用 background-repeat 属性:

背景图像- 设置定位

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

可以利用 background-position 属性改变图像在背景中的位置:

设置文本对齐方式

.flavor, .dessert {
  text-align: left;
  width: 75%;
}

.price {
  text-align: right;
  width: 25%;
}

text-align属性指定元素文本的水平对齐方式。

  • left 把文本排列到左边。默认值:由浏览器决定。
  • right 把文本排列到右边。
  • center 把文本排列到中间。
  • justify 实现两端对齐文本效果。
  • inherit 规定应该从父元素继承 text-align 属性的值。

属性设置元素的宽度width

hr {
  height: 2px;
  background-color: brown;
  border-color: brown;
}
.menu {
  width: 80%;
  background-color: burlywood;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  max-width: 500px;
}
  • auto 默认值。浏览器可计算出实际的宽度。
  • length 使用 px、cm 等单位定义宽度。
  • % 定义基于包含块(父元素)宽度的百分比宽度。
  • inherit 规定应该从父元素继承 width 属性的值。

display 属性

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top:-25px;
}
.item p {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}
  • none 不展示
  • block 块状,莫挨老子
  • inline 行内元素,唯唯诺诺,被压迫
  • inline-block 行内块,我也有一席之地

块元素的特点有:

  1. 每个块元素都从新的一行开始,独占一行
  2. 元素的高度、宽度、行高以及顶和底边距等属性都可设置
  3. 默认的高度与父元素的宽度一致,即width默认为100%
  4. 可以容纳行内元素和其他块元素

行内元素具有如下特点:

  1. 和其他行内元素都在一行上
  2. 元素的高度、宽度、行高及顶部和底部边距等属性不可设置
  3. 元素不能设置高度,宽度就是它包含的文字或图片的宽度
  4. 行内元素只能容纳文本或者其他行内元素

inline-block:以block的方式渲染,以inline的方式放置;

伪类选择器

a {
  color: black;
}

a:visited {
  color: black;
}

a:hover {
  color: brown;
}

a:active {
  color: brown;
}

  • :link a标签未访问时的样式
  • :active a标签mousedown时的样式
  • :hover a标签mouseover时的样式
  • :visited a标签访问过之后样式

css注释

/* FOOTER */
0

评论区