这是我参与「第五届青训营」伴学笔记创作活动的第8天。

概要：尝试编写一些学员手册中提供的案例来巩固加深CSS中的知识点。

一、题目要求：

1.个人ID卡

我们已经为你提供了一些原始的 HTML 和一张图片，然后需要编写必要的 CSS 来让其成为一个漂亮的网上小名片，可能大小是游戏玩家卡片或社交媒体简介的两倍。下面的段落描述了你需要做的事情。

基本设置：

首先，在你放 HTML 文件和图像文件的目录下，创建一个新的文件，把它命名为类似style.css。
通过 <link> 元素来将你的 CSS 链接到 HTML 文件中。
我们为你提供的 CSS 资源文本文件中，前两项规则集是我们设置好的，你可以直接使用，所以将他们复制粘贴到你的新 CSS 文件的顶部。同时也可以将这个作为测验，用来确认你是否正确链接了你的 CSS 文件到 HTML 中。
在以上的两条规则中添加一条 CSS 注释，注释中要包含一些文本来表明这是整体页面的一般样式。你可以在 CSS 文件底部添加 3 个或以上的注释，来明确地表明该样式是应用到卡片的容器，应用到标题和页脚的样式，和名片主要内容的样式。从现在开始，随后在样式表添加的样式都应该有组织地放置在合适的地方。

关注我们为你提供的选择器和规则集：

接下来，我们希望你观察四个选择器，并计算每一个的专用性。将它们写在稍后可以找到的地方，例如在 CSS 顶部的注释中。
现在是时候把正确的选择器放在正确的规则集上了！你的 CSS 资源中有四对选择器和规则集需要匹配，现在就开始匹配，并将它们添加到你的 CSS 文件。你需要：
- 为整体卡片的容器提供一个固定的宽/高，背景颜色，边框，以及边框圆角等等。
- 为 header 提供一个渐变的背景颜色，从更暗到更亮，加上圆角，配合在卡片容器上设置的圆角。
- 为 footer 提供一个渐变的背景颜色，从更亮到更暗，加上圆角，配合在卡片容器上设置的圆角。
- 将图像向右浮动，使其粘贴在名片主要内容的右边，然后把它的 max-height 设置为 100% (一个聪明的技巧，来确保它将放大/缩小，与父容器保持同样的高度，不管它变成什么高度。)
注意！提供的规则集中有两个错误。使用你知道的任何技术找到这些错误并修复，然后再继续。

你需要写的新规则：

编写一个同时面向 card head 和 card footer 的规则集，使它们计算的总高度为 50px（包括 30px 的内容高度和 10px 的 padding）但用 em 来表示。
浏览器会为<h2> 和 <p>元素应用默认的 margin，这会影响我们的设计，所以编写一个规则集：margin 设置为 0。
为了阻止图像溢出名片的主要内容 ( <article> 元素)，我们需要给它设置一个明确的高度。设置 <article>的高度为 120px，但是使用 em来表示。还要给它一个半透明黑色的背景颜色，产生一个稍暗一点的阴影，能让红色的背景稍微透过。
编写一个规则集，使 <h2> 有效的字体大小为 20px (使用 em表达) 以及一个适当的行高将其放置在标题的内容框的中央。回想起来，内容框高度应该是 30px，你所有需要的数字都已经给你了，所以可以计算出行高。
为页脚中的 <p> 编写一个规则集，使它的有效字体大小为 15px (使用 em表达) 以及一个适当的行高将其放置在页面的内容框的中央。回想起来，内容框高度应该是 30px，你所有需要的数字都已经给你了，所以可以计算出行高。
最为最后一步，为 <article> 中的段落设置一个合适的 padding 值，让它和 <h2> 以及页脚的段落左边缘对齐，并将其颜色设置得便于阅读。

其他事情要考虑：

如果你编写的 CSS 有比较好的可读性，并在每行上单独声明，你将得到奖励。
你应该在所有规则的选择器中都用 .card 作为开头，这样的好处是：如果将名片放在带有其他内容的页面的情况下，这些规则不会干扰其他元素的样式。

注意和提示

你不需要以任何方式编辑 HTML，除了将 CSS 应用于你的 HTML。
当使用 em 值代表一些你需要的像素长度的时候，想想 (<html>) 元素的基本字体大小，以及需要乘以什么才能获得所需的值。这将给你 em 的值，至少在这样一个简单的情况下。

2.精美的信纸

你已经有了创建一个信纸模版所需的所有文件，只需把它们放到一起就好。为了达到目标，你需要：

信纸主体

把 CSS 链接到 HTML 文档里。
给信纸添加这样一个背景：
- 把之前下载的顶部图片固定到信纸顶部。
- 把之前下载的底部图片固定到信纸底部。
- 为了给信纸一点纹理，在前面背景的基础上添加一个半透明的渐变，使其在顶部和底部附近稍微变暗，但中间的大部分完全透明。
多添加一个background声明，仅添加顶部图片到信纸顶部，以此作为不支持之前那种声明方式的浏览器的后备方案。
给信纸添加一个白色的背景颜色。
给信纸添加一个 1mm 的上下实线边框，选一个符合信纸的颜色主题的边框颜色。

标志

把之前下载的标志图片添加为<h1> (en-US)的背景图片。
给标志添加一个过滤器，使它有一个隐隐约约的阴影。
现在把添加的过滤器注释掉，尝试用其他（更跨浏览器兼容）的方式实现一个相同的阴影，阴影需要同样符合圆形图片的形状。

提示和技巧

记住，你可以这样为较旧的浏览器创建一个后备方案：先写一个较旧的浏览器支持的后备声明，然后再接着写只有较新的浏览器才支持的声明。这样比较旧的浏览器会应用第一个声明而忽略掉第二个不支持的声明，与此同时比较新的浏览器会先应用第一个声明，然后用第二个声明把它覆盖掉。
如果想的话你可以随意地用自己的图片来做这个评估。

3.一个精美的盒子

你的任务是创建一个酷炫的盒子，并探索 CSS 的乐趣。

一般任务

把 CSS 链接到 HTML 里。

样式化盒子

给 <p> 添加样式：

一个对于大按钮来说合理的宽度，200 像素左右。
一个对于大按钮来说合理的高度，并使文本纵向居中。
居中文本。
用 rem 使字体稍大一点，大约 17-18 像素，在注释里说说你的值是怎么算出来的。
给你的设计定一个基础颜色，把它作为盒子的背景颜色。
把字体颜色设为同一个颜色，使用黑色的文字阴影增加可读性。
一个精巧的圆角边框。
一个跟基础颜色相近、1 像素宽的实线边框，颜色要稍深一点。
一个指向右下角的黑色半透明线性渐变，让它在开始的时候完全透明，在 30% 的处渐变到 0.2 的不透明度，然后保持相同颜色到最后。
多个盒阴影：一个标准的盒阴影，使它看起来稍微从页面上浮起来；另外两个是内嵌（inset）的盒阴影，一个是左上角附近的白色半透明阴影和另一个是右下角附近的黑色半透明阴影，让盒子有一个漂亮的 3D 外观。

4.一个精美的网站

你需要实现你自己的布局。下面是你应该完成的目标：

在一行中显示导航选项，并且选项之间拥有相同的空间。
导航条应随着内容一起滚动并且在触碰到视口顶部之后于顶部固定。
文章内的图片应该被文本包围。
<article> 与 <aside> 元素应该为双列布局。它们的列尺寸应该是弹性的，以便在浏览器窗口收缩得更小的时候能够变窄。
照片应该以有 1px 间隔的两列网格显示出来。

在实现布局的过程中你不需要修改 HTML，下面是你应该使用的技术：

Positioning
Float
Flexbox
CSS Grid Layout

你能够用好几种方法来实现这些目标，完成一件事的方法并不只有一个。尝试不同的方式，并且看看哪个最有效。尝试之后写下笔记，你可以在本练习的帖子中或者 #mdn IRC 频道讨论你实现它们的方式。

二、我实现的效果：

1.个人ID卡

2.精美的信纸

3.一个精美的盒子

4.一个精美的网站

三、CSS实现代码：

1.个人ID卡

body {
  margin: 0;
}

html {
  font-family: 'Helvetica neue', Arial, 'sans serif';
  font-size: 10px;
  background-color: #ccc;
}

/* Selectors to be matched up with rulesets */
/* Rulesets to be matched up with selectors */

.card{
  width: 35em;
  height: 22em;
  margin: 5em auto;
  background-color: red;
  border: 0.2em solid black;
  border-radius: 1.5em;
}

.card header{
  background-image: linear-gradient(to bottom,rgba(0,0,0,0.1), rgba(0,0,0,0));
  border-radius: 1.5em 1.5em 0 0;
  height: 3em;
  padding-top: 1em;
  padding-bottom: 1em;
  vertical-align: middle;
}

.card footer{
  background-image: linear-gradient(to bottom,rgba(0,0,0,0), rgba(0,0,0,0.1));
  border-radius: 0 0 1.5em 1.5em;
  height: 3em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.card article img{
  max-height: 100%;
  float: right;
}

article{
  height: 11em;
  color: white;
  background-color: rgb(203, 1, 42);
  padding-left: 10px;
  vertical-align: middle;
}

h2{
  font-size: 2em;
  padding-left: 10px;
}

footer p{
  font-size: 1.5em;
  padding-left: 10px;
}

2.精美的信纸

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin: 0;
  background: #ccc;
}

article {
  width: 210mm;
  height: 297mm;
  margin: 20px auto;
  position: relative;
}

address {
  position: absolute;
  bottom: 8mm;
  right: 20mm;
}

h1 {
  position: absolute;
  top: 12mm;
  left: 20mm;
  width: 128px;
  height: 128px;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: center;
  padding: 44px 0;
  color: white;
  text-shadow: 1px 1px 1px black;
}

/* Your CSS below here */
body{
	background-color:white;
	background-image: url("top-image.png"),url("bottom-image.png"),linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5)), linear-gradient(to bottom, rgba(254, 254, 254, 0.1), rgba(255, 255, 255, 0.5));
	background-repeat:no-repeat no-repeat;
	background-position:top,bottom;
	padding-top:3px;
	padding-bottom:3px;
	border-top:3px red;
	border-bottom:3px red;
}

h1{
background-image: url("logo.png");
filter:drop-shadow(0px 0px 3px rgba(0,0,0,0.5));
}

3.一个精美的盒子

html {
  font-family: sans-serif;
}

p{
	color:white;
	font-size:2rem;
    border: 3px solid black;
	width:200px;
	height:120px;
	vertical-align: middle;
	text-align:center;
	padding-top: 40px;
    background-color: red;
	text-shadow:2px 2px 5px rgba(0,0,0,0.9);
	border-radius: 10px;
	border-color: rgb(167, 0, 0);
	background-image: linear-gradient(to bottom right,rgba(254, 150, 150, 0.5),rgba(149, 0, 0, 0.1));
    box-shadow: 3px 3px 3px rgba(0, 0, 0,0.9),inset 2px 1px 2px rgba(255, 255, 255,0.5);

}

/* Your CSS below here */

4.一个精美的网站

body {
    background-color: #fff;
    color: #333;
    margin: 0;
    font: 1.2em / 1.2 Arial, Helvetica, sans-serif;
    align-content: center;
  }

  img {
      max-width: 100%;
      display: block;
  }
  
  .logo {
    font-size: 200%;
    padding: 50px 20px;
    margin: 0 auto;
    max-width: 980px;
  }
  
  .grid {
    margin: 0 auto;
    padding: 0 20px;
    max-width: 980px;
    display: grid;
    grid-template-columns: 20fr 1fr;
    float: left;
  }
  
  nav {
    background-color: #000;
    width: 100%;
    height: 20px;
    padding: .9em;
    position: fixed;
    top: 100px;
  }
  
  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  nav a {
    color: #fff;
    text-decoration: none;
    padding: .5em 1em;
  }
  
  .photos {
    list-style: none;
    width: 150px;
    height: 150px;
    margin: 2px;
    padding: 2px;
    display:grid;
    grid-template-columns: 150px 150px;
    grid-template-rows: 150px 150px;
  }

  .feature {
      width: 200px;
      float: left;
      padding-right: 20px;
  }

  nav ul li{
    float: left;
    width: 20%;
  }

  article{
    margin-left: 20%;
    margin-right: 2%;
  }

四、个人练习总结：

总结CSS常用属性：

1、css文本属性之文本中大小写字母转换—text-transform

　　属性值：

　　uppercase;(全部大写)

　　lowercase;（全部小写）

　　capitalize；（在所有小写单词中，首字母大写）

　　p{text-transform:uppercase;}

　　2、css文本属性之文本居中——text-align

　　属性值：

　　center;(居中) 　　left;(左边对齐) 　　right（右边对齐）

　　p{text-align:center;}

　　3、css文本属性之段落缩进—–text-indent

　　em(是以字为单位)，±都可以

　　p{text-indent:3em;}

　　4.css文本属性之设置文字装饰效果——text-decoration

　　属性值：

　　none(去掉下划线)

　　underline(加下划线)

　　overline(加上划线)

　　line-through(加删除线)

　　a{text-decoration:none;}

　　5.css文本属性之设置段落行高—-line-height

　　属性值：百分比，px,数字

　　a{line-height:13px;}

　　6.css文本属性之设置字词间距

　　word-spacing(只对英文有用)

　　letter-spacing（汉字和英文都可以）

　　p{letter-spacing:16px;}

　　7.css文本属性之段落间距-margin

p{margin:66px;}

　　8.css文本属性之边框——border

　　属性值有三个：大小，颜色，样式；

　　边框样式有：solid(实线)，dashed(虚线)，dotted(点线)

　　p{border:3pxlightgreensolid;}

　　9.css文本属性之空格——white-space

　　属性值：

　　pre;(与预设一样)

　　nowrap；（文字不自动换行）

　　inherit;(继承父本)

　　normal;(显示一个) 　　p{white-space:pre;}

　　10.css文本属性之设置输入法状态-ime-mode

　　属性值：

　　auto;默认

　　active;激活本地语言输入法；

　　inactive:激活非本地语言输入法；

　　disabled;禁止输入法，不能输入汉字

[CSS案例练习 | 青训营笔记]

一、题目要求：

1.个人ID卡

注意和提示

2.精美的信纸

信纸主体

标志

提示和技巧

3.一个精美的盒子

一般任务

样式化盒子

4.一个精美的网站

二、我实现的效果：

1.个人ID卡

2.精美的信纸

3.一个精美的盒子

4.一个精美的网站

三、CSS实现代码：

1.个人ID卡

2.精美的信纸

3.一个精美的盒子

4.一个精美的网站

四、个人练习总结：

总结CSS常用属性：