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样式的方法。

我们可以在HTML元素行内的style中编写样式；

<div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div>

在HTML文档中添加<style>标签，然后在标签内编写CSS代码；

<head>
    <style>
        p{
            color:pink;
            border:blue 1px solid;
        }
    </style>
</head>

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

上图中有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 行内块，我也有一席之地

块元素的特点有：

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

行内元素具有如下特点：

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

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 */

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

freeCodeCamp之CSS-1

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

styles.css

css 基础简述

应用方式

改变文字颜色

使用CSS类

改变文字大小

改变元素字体

添加元素边框

给元素一个背景颜色

给元素ID值

给元素添加外边距

CSS中的两种盒模型：

盒模型：标准盒模型

盒模型：IE盒模型

给元素负外边框

给元素添加内边距

HTML主体属性样式

背景图片

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

背景图像- 设置不平铺

背景图像- 设置定位

设置文本对齐方式

属性设置元素的宽度width

display 属性

伪类选择器

css注释

评论