《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 度）