在这章我们将学习到：

1.Fixed- and flexible-width rounded-corner boxes
2.The sliding doors technique
3.Mountaintop corners
4.CSS drop shadows
5.PNG transparency support for Internet Explorer 5.x and above
6.Image replacement

基本的背景图片

body {
background:url(pattern.gif);
}

body {
background: #ccc url(gradient.gif) repeat-x;
}

#branding {
width: 700px;
height: 200px;
background:url(/images/branding.gif) no-repeat;
}

h1 {
padding-left: 30px;
background: url(/images/bullet.gif) no-repeat left center;
}

h1 {
padding-left: 30px;
background: url(/images/bullet.gif) no-repeat 0 50%;
}

Rounded-corner boxes

.box {
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
}
.box h2 {
background: url(images/top.gif) no-repeat left top;
}
.box h2 {
padding: 10px 20px 0 20px;
}
.box p {
padding: 0 20px 10px 20px;
}

<div class="box">
<h2>Headline</h2>
<p>Content</p>
</div>

.box {
width: 424px;
background: url(images/bg-tile.gif) repeat-y;
}
.box h2 {
background: url(images/bg-top.gif) no-repeat left top;
padding-top: 20px;
}
.box .last {
background: url(images/bg-bottom.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2, .box p {
padding-left: 20px;
padding-right: 20px;
}
<div class="box">
<h2>Headline</h2>
<p class="last">Content</p>
</div>

Flexible rounded-corner box

.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif)
no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}

<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Headline</h2>
<p>Content</p>
</div>
</div>
</div>

Mountaintop corners

.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif)
no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}

<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Headline</h2>
<p>Content</p>
</div>
</div>
</div>

Drop shadows

Easy CSS drop shadows

.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
}
.img-wrapper img {
margin: -5px 5px 5px -5px;
}
<div class="img-wrapper"><img src="dunstan.jpg" width="300"
height="300" alt="Dunstan Orchard" /></div>

.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -5px 5px 5px -5px;
}

.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
display: block;
margin: -5px 5px 5px -5px;
position: relative;
}

Drop shadows a la Clagnut

.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
float:left;
line-height:0;
}
.img-wrapper img {
background:#fff;
padding:4px;
border:1px solid #a9a9a9;
position:relative;
left:-5px;
top:-5px;
}

Fuzzy shadows

.img-wrapper {
background: url(images/shadow.gif) no-repeat right bottom;
float: left;
}
.img-wrapper div {
background: url(images/mask.png) no-repeat left top !important;
background: url(images/mask.gif) no-repeat left top;
padding: 0 5px 5px 0;
float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac */
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}

<div class="img-wrapper">
<div>
<img src="dunstan.jpg" width="300" height="300" alt="Dunstan" />
</div>
</div>

Onion skinned drop shadows

.img-wrapper {
background:url(images/shadow.gif) no-repeat right bottom;
float: left;
}
.img-outer {
background:url(images/bottom-left2.gif) no-repeat left bottom;
float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac */
}
.img-inner {
background:url(images/top-right2.gif) no-repeat top right;
padding: 0 5px 5px 0;
float: left; /* :KLUDGE: Fixes problem in IE5.2/Mac */
}
.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
display: block;
}

<div class="img-wrapper">
<div class="img-outer">
<div class="img-inner">
<img src="images/dunstan.jpg" width="300" height="300"
alt="Dunstan" />
</div>
</div>
</div>

Image replacement

Fahrner Image Replacement (FIR)

h2 {
background:url(hello_world.gif) no-repeat;
width: 150px;
height: 35px;
}
span {
display: none;
}
<h2>
<span>Hello World</span>
</h2>

Phark

h2 {
text-indent: -5000px;
background:url(hello_world.gif) no-repeat;
width: 150px;
height:35px;
}
<h2>
Hello World
</h2>

Gilder/Levin method

h2 {
width: 150px;
height: 35px;
position: relative;
}
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
<h2>
<span></span>Hello World
</h2>

1.盒子模式的复杂和特征
2.怎样并且为什么页边空白收缩
3.绝对位置和相对位置的不同
4.floating 和 clearing怎样工作

Box model recap

* {
margin: 0;
padding: 0;
}

#myBox {
margin: 10px;
padding: 5px;
width: 70px;
}

Margin collapsing

Positioning recap

Relative positioning 相对位置

#myBox {
position: relative;
left: 20px;
top: 20px;
}

Absolute positioning 绝对位置

#branding {
width: 700px;
height: 100px;
position: relative;
}
#branding .tel {
position: absolute;
right: 10px;
bottom: 10px;
text-align: right;
}
<div id="branding">
<p class="tel">Tel: 0845 838 6163</p>
</div>

Floating




Line boxes and clearing

.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>Some text</p>
</div>

.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>Some text</p>
<div class="clear"></div>
</div>

更简捷的方法如下:

.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}

.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>Some text</p>
</div>

我所用的工具

UltraEdit

IE 浏览器

第1章  打下基础

在这章我们将学习到：

1.一个好的结构的重要性和有意义的文档
2.编写最优方法
3.共有的编写错误
4.文档类型，DOCTYPE switching和浏览器样式
5.建立自己的样式
6.层叠，特征和继承

(X)html包括很多元素。例如

h1,h2,..
ul,ol,dl
strong,em
blockquote,cite
abbr,acronym,code
fieldset,legend,label
caption,thead,tbody,tfoot 

IDs 和类名(class names)

<ul id="mainNav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>

Divs 和 spans

<div id="mainNav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>

简化

<ul id="mainNav">
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>

<h2>Where’s Durstan?</h2>
<p>Published on <span class="date">March 22nd, 2005</span>
by <span class="author">Andy Budd</span></p>

DOCTYPE switching
(X)HTML 文档遵循的文档类型定义(DTD)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

建立自己的样式

Common selectors

Type selectors

p {color: black;}
a {text-decoration: underline;}
h1 {font-weight: bold;}

descendant selectors

li a {text-decoration: none;}

ID and class selectors

#intro {font-weight: bold;}
.datePosted {color: green;}
<p id="intro">Some Text</p>
<p class="datePosted">24/3/2006</p>

#mainContent h1 {font-size: 1.8em;}
#secondaryContent h1 {font-size: 1.2em;}
<div id="mainContent">
<h1>Welcome to my site</h1>
...
</div>
<div id="secondaryContent">
<h1>Latest news</h1>
...
</div>

Pseudo-classes

/* makes all unvisited links blue */
a:link {color:blue;}

/* makes all visited links green */
a:visited {color:green;}

/* makes links red when hovered or activated */
a:hover, a:active {color:red;}

/* makes table rows red when hovered over */
tr:hover {background-color: red;}

/* makes input elements yellow when focus is applied */
input:focus {background-color:yellow;}
       
IE 6 对 :focus不支持

The universal selector

* {
padding: 0;
margin: 0;
}

Advanced selectors

Child and adjacent sibling selectors

#nav > li {font-weight: bold;}
<ul id="nav">
<li>Home</li>
<li>Services
<ul>
<li>Design</li>
<li>Development</li>
<li>Consultancy</li>
</ul>
</li>
<li>Contact Us </li>
</ul>

覆盖
#nav li {font-weight: bold;}
#nav li * {font-weight: normal;}

共用
h1 + p {font-weight: bold;}
<h1>Main Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>

Attribute selectors

<abbr title="Cascading Style Sheets">CSS</abbr>

abbr[title] {border-bottom: 1px dotted #999;}
abbr[title]:hover {cursor: help;}

a[rel="nofollow"] {
background-image: url(nofollow.gif);
padding-right: 20px;
}

.intro {border-style: solid;}
[class="intro"] {border-style: dotted;}

a[rel~="friend"] {background-image: url(friend.gif);}
<a href="http://www.hicksdesign.com/" rel="friend met colleague" >
John Hicks
</a>

我的第一个 CSS

<html>

<head>

<title></title>

<style type="text/css">

p{

color : red ;

}

.date{

color : green ;

}

#intro {font-weight: bold;}

.datePosted {color: green;}

#mainContent h1 {font-size: 1.8em;}

#secondaryContent h1 {font-size: 1.2em;}

a:hover{

color : #FF0080 ;

}

a:active{

color : #0080FF ;

}

#nav li {font-weight: bold;}

</style>

</head>

<body>

<p>i'm red</p>

<a href="#"> 你好 </a>

<div id="mainNav">

<ul>

<li>Home</li>

<li>About Us</li>

<li>Contact</li>

</ul>

</div>

<h2>Where’s Durstan?</h2>

<p>Published on <span class="date">March 22nd, 2005</span>

by <span class="author">Andy Budd</span></p>

<p id="intro">Some Text</p>

<p class="datePosted">24/3/2006</p>

<div id="mainContent">

<h1>Welcome to my site</h1>

...

</div>

<div id="secondaryContent">

<h1>Latest news</h1>

...

</div>

<ul id="nav">

<li>Home</li>

<li>Services

<ul>

<li>Design</li>

<li>Development</li>

<li>Consultancy</li>

</ul>

</li>

<li>Contact Us </li>

</ul>

</body>

</html>