六：链接是万维网的命脉
两个部分：目标（destination），：其他网页的链接，锚（anchor）
和标签（label）：页面看到的，
href 指的是hypertext reference（超文本引用）
避免使用“点击此处”作为标签，因为它缺乏上下文关联，而是应该使用已经存在的关键字。
target属性，不要在大多数情况下使用；target=“_blank",在不同的窗口或标签页打开。还有一种用法是在iframe中打开，其target值与id对应。
xxx 指向
...
如果位于另一个文档，可以这样写xxx
注意不要让任何给定页面上的缩略图数量太多。每个缩略图会生成对web服务器独立请求，合在一起就让页面变慢。数量取决于目标受众，可以考虑分入多个页面。
七：CSS构造块
CSS（层叠样式表）：一种文本文件，包含一个或多个（通过属性和值）决定网页某特定元素如何显示的规则。
每一条规则有两个主要部分：
选择器（selector）：决定哪些受影响；
声明块（declaration block）：属性-值 指明应该做什么
h1{
background-color: yellow;
color: red;
}
有些属性上可以继承，7.3
层叠：1.特殊性 规则指定选择器的具体程度。
选择器对应的HTML
p{ .. .}
...
.someClass { ... }
..
.someClass.someOtherClass { ... }
..
#someID {...}
...
特殊性由低向高排列，建议多用类选择器，避免使用ID选择器，因为ID选择器会矫枉过正，降低了灵活性。
晚出现的优先级高
重要性：可以用声明的末尾加上!important，使这条规则覆盖整个系统中的规则，通常不建议这样做。
属性的值：
继承 inherit
预定义的值
长度和百分数 。 3em 10px 。 0可以不带单位
纯数字
URL：指定另一个文件的url，注意是相对于样式表的位置，而不是HTML文档的位置。如：backgroud:url(bg-pattern.png);
css颜色：颜色关键字、十六进制、rgb、。。。
css3引入另一种指定颜色的方式-HSL，以及通过RGBAHE HSLA设置alpha透明度（0～1）的能力。backgroud: rgba(红，绿，蓝，1)
八：操作样式表
外部样式表（首选）、嵌入式、内联样式（最不可取）
创建后缀名为css的文件。
嵌入样式表优先级高于外部，会覆盖外部的
img{
border: 4px solid red;
}
h1{
background-color: yellow;
color: red;
}
p{
color: orange;
font-style: italic;
}
/* 打印样式表*/
@media print{
body{
font-size: 25pt;
}
p{
color: #000;
}
img{
/* 不显示图像*/
display: none;
}
}
@media规则是指定其他媒体类型的另一种方式。
查看别人的源码学习，firfox等方式
九：定义选择器
h1 em{
}
只适用h1下的em
只针对某些属性和值：
a[title]{
}
a[herf=“http://www.baidu.org”]{
}
按父元素选择要格式化的元素
.architect > p {
color: red;
}
选择第一个和最后一个
li:first-child{
}
li:last-child{
}
第一个字母或第一行
p:first-lettet{
}
p:first-line{
}
a:link {
color: red;
}
a:visited {
color: orange;
}
a:focus {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: blue;
}
指定元素组
h1,
h2{
}
.project .architect em{
}
十：为文本添加样式
指定替代字体：
body {
font-family: Geneva, Tahoma, sans-serif;
}
h1,
h2 {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}
创建斜体：
p {
font-style: italic;
}
取消：
p {
font-style: normal;
}
设置字体大小：
... [previous CSS] ...
em,
a:link,
.intro .subhead {
font-weight: bold;
}
h1 {
font-size: 35px;
}
h2 {
font-size: 28px;
}
.intro .subhead {
font-size: 18px;
}
.intro p {
font-size: 17px;
}
.project p {
font-size: 15px;
}
推荐用em：font-size：100%声明为em字体大小设置了参考的基准。
body {
font-family: Geneva, Tahoma, Verdana, sans-serif;
font-size: 100%; /* 16px */
}
h1,
h2 {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
font-weight: normal;
}
h1 {
font-size: 2.1875em; /* 35px/16px */
}
h2 {
font-size: 1.75em; /* 28px/16px */
}
em,
a:link,
.intro .subhead {
font-weight: bold;
}
.intro .subhead {
font-size: 1.125em; /* 18px/16px */
}
.intro p {
font-size: 1.0625em; /* 17px/16px */
}
.project p {
font-size: .9375em; /* 15px/16px */
}
font-size: 100%; /* 16px */
大多数系统默认字体大小 16px ：1em=16px
rem设置字体，以根元素为参照设置文本的相对大小。
html {
font-size: 100%; /* 通常是16px */
}
.intro p {
font-size: 17px; /* 可选 */
font-size: 1.0625rem; /* 17px/16px */
}
.intro a {
font-size: 16px; /* 可选 */
font-size: 1rem; /*是0.941176em */
}
设置行高：
line-height
... 省略前面的CSS ...
.intro {
line-height: 1.45;
}
.intro .subhead {
font-size: 1.125em;
}
.intro p {
font-size: 1.0625em;
}
.project p {
font-size: .9375em; /* 15px/16px */
line-height: 1.65; /* 15px*1.65 =24.75px */
}
设置颜色：
body {
color: blue;
font: 100% Geneva, Tahoma, Verdana, sans-serif;
}
...
h2 {
color: #7d717c;
font-size: 1.75em;
}
...
/* :::: 链接 :::: */
a:link {
color: #e10000; /* a red */
}
a:visited {
color: #b44f4f;
}
a:hover {
color: #f00;
}
.intro a {
color: #fdb09d; /* 略带粉色 */
}
.intro a:hover {
color: #fec4b6;
}
设置背景：
background-color： #88b2d2；
body {
background-color: #000;
background-image: url(sky.png);
background-repeat: repeat-x; //纵向重复图像
background-attachment: fixed; //固定
background-position: left bottom; // 背景图像从浏览器窗口左下角开始水平重复
...
}
字间距（tracking）
字偶距（kerning）
缩进（text-indent）
（10.15）使用小型大写字母：font-variant: small-caps。
十一：用CSS布局
布局方法：固定宽度 和 响应式
fixed基于像素的宽度，为移动用户、平板、桌面用户定制不同的页面。
fluid/liquid响应式页面，使用百分比定义宽度，移动用户、平板、桌面不同的屏幕调整。
... [主导航链接列表] ...
Sunny East Garden at the Getty Villa
It is hard to believe ...
... [博客条目页脚] ...
<[表情]ction>
The City Named After Queen Victoria
An hour and a half aboard ...
... [博客条目页脚] ...
<[表情]ction>
... [链接列表项] ...
© 2013 Le Journal ...