《HTML5与CSS3基础教程》读书笔记
作者:hwj3747
转载请注明
- 指定替代字体
body {
font-family: Geneva, Tahoma, sans-serif;
}
第一字体栈告诉浏览器如果系统上没有Geneva 就用Tahoma，如果这两个都没有就用标准的sans-serif。
- 设置em的值
em 是一种量度单位，它的大小取决于父元素的大小。
声明
body{ font-size:100%; }
大多数系统100%默认为字体大小为16px,在这种情况下，1em=16px,也就是说需要修改em的相对值，只需要修改100%就行。
- 设置行高
.project p {
font-size: .9375em; /* 15px/16px */
line-height: 1.65; /* 15px*1.65 =24.75px */
}
.project 类p 元素的字体大小为0.9375em，即15像素。行高将是15 像素的1.65 倍，即大约24.75像素。
如果使用数字设定行高（通常都这么做），那么所有的子元素都会继承这个因子。因此，如果父元素的字体大小是16 像素（或以em 等表示的等价大小），行高是1.5，则该元素的行高就是24（即16×1.5）像素。如果子元素的字体大小是10 像素，则该元素的行高就是15（即10×1.5）像素。
如果使用百分数或em 值，那么只会继承产生的行高（即计算出来的值）。因此，如果父元素的字体大小是16 像素，行高是150%，则该元素的行高就是24 像素。所有的子元素都将继承24 像素的行高，不管字体大小是多少。
- 同时设置所有字体
.example-3 {
font: italic small-caps bold .875em/1.3 "Palatino Linotype", Palatino, serif;
}
依次是：字型（斜体）、设置小型大写字母、设置粗细、字体大小/行高、字体。
只要font 中声明了字体大小和字体系列属性，其他属性可以任意组合。前三个属性的次序无关紧要。
- 设置字母大小写
text-transform属性
输入capitalize 让每个单词的首字母大写；
或者输入uppercase 让所有字母大写；
或者输入lowercase 让所有字母小写；
或者输入none 让文本保持本来的样子（可以用来取消继承的值）。
- 装饰文本
text-decoration 属性
输入underline 以添加下划线；
或者输入overline 以添加上划线；
或者输入line-through 以添加删除线。
- 设置空白属性
默认情况下，HTML 文档里的多个空格和回车会显示为一个空格，或者被忽略。
如果要让浏览器显示这些额外的空格，可以使用white-space 属性。
pre：让浏览器显示原文本中所有的空格和回车；
nowrap：确保所有空格不断行，也就是文本全部显示在一行；
normal：按正常方式处理空格。
构建响应式网站
- 理解和实现媒体查询
...
p {
color: green;
}
@media only screen and (min-width:480px) {
p {
color: red;
font-weight: bold;
}
}
width=device-width：视觉区域的宽度会被设成与设备宽度（对iPhone 来说为320 像素）相同的值
表示在屏幕宽度大于480px时使用红色的布局，小于的时候使用绿色的布局。
- 为元素创建圆角
.all-corners {
-webkit-border-radius: 20px;
border-radius: 20px;
}
.one-corner {
-webkit-border-top-left-radius:75px;
border-top-left-radius: 75px;
}
.elliptical-corners {
-webkit-border-radius: 50px / 20px;
border-radius: 50px / 20px;
}
.circle {
-webkit-border-radius: 50%;
border-radius: 50%;
}
- 为文本添加阴影
.blur-inversed {
color: white;
text-shadow: 2px 2px 10px #000;
}
x-offset（水平偏移量）、y-offset（垂直偏移量）、blur-radius（模糊半径）和color 的值（前三个值带长度单位，四个值之间不用逗号分隔）
- 为其他元素添加阴影
.shadow-offsets-0 {
-webkit-box-shadow: 0 0 9px 3px #999;
box-shadow: 0 0 9px 3px #999;
}
.inset-shadow {
-webkit-box-shadow: 2px 2px 10px #666 inset;
box-shadow: 2px 2px 10px #666
inset;
}
inset:内部阴影
- 应用多重背景
.night-sky {
/* 备用颜色和图像 */
background: navy url(ufo.png) no-repeat
center bottom;
background:
url(ufo.png) no-repeat 50% 102%,
url(stars.png) no-repeat 100% -150px,
url(stars.png) no-repeat 0 -150px,
url(sky.png) repeat-x 50% 100%;
...
}
- 使用渐变背景
.vertical-down { /* 默认 */
background: silver; /* 备用 */
background: linear-gradient(silver, black);
}
.vertical-up {
background: silver;
background: linear-gradient(to top,silver, black);
}
.angle-120deg {
background: aqua;
background: linear-gradient(120deg,aqua, navy);
}
默认情况下，线性渐变是从上往下渐变的，因此在属性值中不需要指定to bottom。如果要使用相反的方向，则使用to top。第二种方式是指定渐变角度的度数，如120deg（120 度）
