HTML5与CSS3基础- 02
六：链接是万维网的命脉
两个部分：目标（destination），：其他网页的链接，锚（anchor）
和标签（label）：页面看到的，
href 指的是hypertext reference（超文本引用）
避免使用“点击此处”作为标签，因为它缺乏上下文关联，而是应该使用已经存在的关键字。
target属性，不要在大多数情况下使用；target=“_blank",在不同的窗口或标签页打开。还有一种用法是在iframe中打开，其target值与id对应。
<a href="#question">xxx</a> 指向<h2 id="question"> ... </h2>
如果位于另一个文档，可以这样写<a href=".../index.html#question">xxx</a>
注意不要让任何给定页面上的缩略图数量太多。每个缩略图会生成对web服务器独立请求，合在一起就让页面变慢。数量取决于目标受众，可以考虑分入多个页面。
七：CSS构造块
CSS（层叠样式表）：一种文本文件，包含一个或多个（通过属性和值）决定网页某特定元素如何显示的规则。
每一条规则有两个主要部分：
选择器（selector）：决定哪些受影响；
声明块（declaration block）：属性-值 指明应该做什么
h1{
background-color: yellow;
color: red;
}
有些属性上可以继承，7.3
层叠：1.特殊性 规则指定选择器的具体程度。
选择器对应的HTML
p{ .. .}<p> ... </p>
.someClass { ... }<p class="someClass"> .. </p>
.someClass.someOtherClass { ... }<p class="someClass someOtherClass"> .. </p>
#someID {...}<p id="someID" class="someClass"> ... </p>
特殊性由低向高排列，建议多用类选择器，避免使用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响应式页面，使用百分比定义宽度，移动用户、平板、桌面不同的屏幕调整。
<body>
<div class="page">
<!-- ==== 开始报头 ==== -->
<header class="masthead" role="banner">
<p class="logo"><a href="/"><img ... /></a></p>
<ul class="social-sites">
... [社交图片链接] ...
</ul>
<nav role="navigation">
... [主导航链接列表] ...
</nav>
</header>
<!-- 结束报头 -->
<div class="container">
<!-- ==== 开始主体内容 ==== -->
<main role="main">
<section class="post">
<h1>Sunny East Garden at the Getty Villa</h1>
<img ... class="post-photo-full" />
<div class="post-blurb">
<p>It is hard to believe ...</p>
</div>
<footer class="footer">
... [博客条目页脚] ...
</footer>
<[表情]ction>
<section class="post">
<h1>The City Named After Queen Victoria</h1>
<img ... class="post-photo" />
<div class="post-blurb">
<p>An hour and a half aboard ...</p>
</div>
<footer class="footer">
... [博客条目页脚] ...
</footer>
<[表情]ction>
<nav role="navigation">
<ol class="pagination">
... [链接列表项] ...
</ol>
</nav>
</main>
<!-- 结束主体内容 -->
<!-- ==== 开始附注栏 ==== -->
<div class="sidebar">
<article class="about">
<h2>About Me</h2>
...
</article>
<div class="mod">
<h2>My Travels</h2>
... [映射图像] ...
</div>
<aside class="mod">
<h2>Popular Posts</h2>
<ul class="links">
... [链接列表项] ...
</ul>
</aside>
<aside class="mod">
<h2>Recently Shared</h2>
<ul class="links">
... [链接列表项] ...
</ul>
</aside>
</div>
<!-- 结束附注栏 -->
</div>
<!-- 结束容器 -->
<!-- ==== 开始页脚 ==== -->
<footer role="contentinfo" class="footer">
<p class="legal"><small>© 2013 Le Journal ...</small></p>
</footer>
<!-- 结束页脚 -->
</div>
<!-- 结束页面 -->
</body>
</html>
这个页面中有四个主要区块（masthead、main、sidebar和页面footer）。
◦三个div，其中一个将整个页面包起来，另外两个将两部分主体内容区域包起来以便应用样式设计。
◦用作报头的header，包括标识、社交媒体网站链接和主导航。
◦划分为多个博客条目section元素的main元素，其中每个section元素都有自己的页脚。
◦附注栏div（同时使用了article和aside），提供关于博客作者和右栏（应用CSS之后就有了）博客条目的链接。
◦页面级footer元素，包含版权信息等内容。
盒模型：
css处理网页时，认为每个元素都包含在看不见的盒子里。
内边距 padding
边框 border
外边框 margin
控制元素可见性：
visibility: hidden
min-height 和 min-width : 希望至少具有某一特定高度/宽度，元素的高度会自动按需增长。
简便方式设定内边距。
•padding: 5px;——使用一个值，这个值就会应用于全部四个边。
•padding: 5px 9px;——使用两个值，则前一个值会应用于上下两边，后一个值会应用于左右两边。
•padding: 5px 9px 11px;——使用三个值，则第一个值会应用于上边，第二个值会应用于左右两边，第三个值会应用于下边（如图11.8.1和图11.8.2所示）。
•padding: 5px 9px 11px 0;——使用四个值，它们会按照时钟顺序，依次应用于上、右、下、左四个边（如图11.8.3和图11.8.4所示）。
内边距的值可以使用像素、百分数、em或rem的组合。
元素浮动 ：
float
top：-3em ： 下移48像素
