CSS标签

css
1.内样式 style=“color: red;”

（1）颜色
①*

h2 {color: red;}
*

②

CatPhotoApp

③

CatPhotoApp

（2）字体

h1 {
font-size: 30px; //字体大小
font-family: monospace; //字体样式
}

font-family: FAMILY_NAME, GENERIC_NAME;.
GENERIC_NAME是可选的，其他字体不可用时便作为后备字体，在下一个挑战中可以得到体现。
字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。例如，使用"Open Sans"字体需要添加引号，而Lobster字体则不需要。

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius:10px;
}

每个 HTML 元素周围的矩形空间由三个重要的属性来控制：padding（内边距），margin（外边距）和border（边框）。

对齐方式
text-align: justify;可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。

text-align: center;可以让文本居中对齐。

text-align: right;可以让文本右对齐。

text-align: left;是text-align的默认值，它可以让文本左对齐。

大小高宽

加强标签 Strong => s => 加粗。
下划线 Underline => u => 下划线
强调 emphasis => em => 强调。
删除 Strikethrough => s => 删除线
水平线

---

Horizontal Rule => hr => 水平线

由在斯坦福大学攻读理工博士的拉里·佩奇和谢尔盖·布林共同创建。

阴影
box-shadow属性的每个阴影依次由下面这些值描述：
offset-x阴影的水平偏移量；
offset-y阴影的垂直偏移量;
blur-radius模糊距离；
spread-radius阴影尺寸；
颜色。

opacity 透明度

值 1 代表完全不透明。
值 0.5 代表半透明。
值 0 代表完全透明。

text-transform 改变英文中字母的大小写
lowercase “transform me”
uppercase “TRANSFORM ME”
capitalize “Transform Me”
initial 使用默认值
inherit 使用父元素的text-transform值。
none Default:不改变文字。

line-height 行间的距离

:hover 伪类选择器定义它的悬停状态样式

猫咪相册 App

position 设置为relative时，它允许你通过 CSS 指定该元素在当前普通流页面下的相对偏移量。 CSS 里控制各个方向偏移量的对应的属性是left、right、top和bottom。它们代表着从原来的位置向对应的方向偏移指定的像素、百分比或者 ems

CSS position属性的取值选项absolute，absolute相对于其包含块定位。和relative定位不一样，absolute定位会将元素从当前的文档流里面移除，周围的元素会忽略它。可以用 CSS 的 top、bottom、left 和 right 属性来调整元素的位置。absolute定位比较特殊的一点是元素的定位参照于最近的已定位祖先元素。如果它的父元素没有添加定位规则（默认是position:relative;）,浏览器会继续寻找直到默认的 body 标签。

通过元素的float属性来设置。浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用width属性来指定浮动元素占据的水平空间。

当一些元素重叠时，在 HTML 里后出现的元素会默认显示在更早出现的元素的上面。你可以使用z-index属性指定元素的堆叠次序。z-index的取值是整数，数值大的元素优先于数值小的元素显示**。**

在应用设计中经常需要把一个块级元素水平居中显示。一种常见的实现方式是把块级元素的margin值设置为auto。

CSS 还提供了颜色过渡，也就是渐变。可以通过background里面的linear-gradient()来实现线性渐变，下面是它的语法：

background: linear-gradient(gradient_direction, 颜色 1, 颜色 2, 颜色 3, …);

第一个参数指定了颜色过渡的方向 - 它的值是角度，90deg 代表垂直渐变，45deg 的渐变角度和反斜杠方向差不多。剩下的参数指定了渐变颜色的顺序：

例子：

background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));

CSS 属性transform里面的scale()函数，可以用来**改变元素的显示比例。**下面的例子把页面的段落元素放大了 2 倍：

p {
transform:scale(2);
}

transform属性是skewX，skewX使选择的元素沿着 X 轴（横向）翻转指定的角度，skewY属性使指定元素沿 Y 轴（垂直方向）翻转指定角度