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 伪类选择器定义它的悬停状态样式
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 轴(垂直方向)翻转指定角度