让我们开始阅读这本书
我所用的工具
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>
posted on 2007-03-31 19:18
尨奇 阅读(210)
评论(0) 编辑 收藏 所属分类:
CSS