第二节课：样式之美 web前端课程体系之css

样式之美 - Web前端课程系列之CSS

Who is this guy?

•  贾铮，09年1月毕业于北京科技大学，加入百度

•  负责新版地图研发工作，现负责百度地图API

•  著有《HTML+CSS网页布局开发指南》

课程概览

•  Web基础 •  Web技术基础

•  通过HTML和CSS构建团队主页

Web基础

•  Internet和WWW •  HTML发展历程和现状

•  浏览器

你将了解：

Internet & WWW

•  许多计算机连接在一起构成了Internet

Little history of Internet

1969年，美国国防部为军事实验而建立，称为：ARPANET

Little history of Internet

•  80年代初期，TCP/IP投入使用 •  NFSNET替代ARPANET

•  经过十几年发展为Internet

Internet & WWW

•  WWW：Internet上网页的集合

Little history of WWW

1989 at CERN

Tim Berners-Lee

信息要能集中管理

Tim Berners-Lee

文本中可以包含指向其他文本的链接

Tim Berners-Lee

当你读一篇论文时，你可以迅速阅读其他相关论文

就以Hypertext方式来实现！

Hypertext

•  超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

•  超文本通常显示于电脑或电子设备上。

•  基于HTTP协议传输：HyperText Transfer Protocol

•  文本格式定义为HTML：HyperText Markup Language

实现

•  1994年，IETF接管HTML。W3C成立，接管HTML。

•  1995年，HTML 2发布。

•  1996年，HTML 3发布。

•  1997年，HTML 4。

•  1999年，HTML 4.01。

•  2000年，XHTML 1.0。

•  2001年，XHTML 1.1

•  2008年，HTML 5

•  基于WAP的WML •  1998年，WML 1.1

•  2001年，WML 2.0

•  XHTML Mobile Profile

浏览器

1990年，首个浏览器：WorldWideWeb

1993年，Mosaic

Internet Explorer

Firefox

Chrome

Safari

Web技术基础

•  Web设计技术 •  开发、调试工具

•  HTML基础

你将了解：

Web设计技术

•  HTML/XHTML •  CSS •  JavaScript

Web设计技术

结构

行为表现

Web开发工具

•  记事本 •  Vim、Emacs、Editplus、Notepad++

•  Dreamweaver、Expression Web

•  Visual Studio •  ⋯

Web调试工具

•  Firebug - FF •  Web Developer Tools - IE

•  Developer Tools – Safari、Chrome

•  Dragonfly - Opera

HTML

•  HyperText Markup Language •  构建页面的基础

HTML

•  编写一个简单的页面

<html> <head> <title>第一个Web页面</title> </head> <body> <h1>Hello, HTML and CSS!</h1> </body> </html>

标记、元素和属性

•  标记由一对尖括号包含一个标记名称组成：<tagName>

•  大部分标记成对出现：起始标记和结束标记<tagName></tagName>

•  结束标记比起始标记多一个“/”

<title></title>


•  起始标记与结束标记之间是内容

<title>第一个Web页面</title>


•  起始标记 + 内容 + 结束标记 = 元素 •  替换元素

•  非替换元素


•  属性名和属性值组成

<p id="p1">第一个Web页面</p>


<p id="p1">第一个Web页面</p>

标记名

属性名属性值标记名

内容

起始标记结束标记

注释

<!-‐-‐注释内容-‐-‐>

HTML文档结构

•  文档声明 •  文档元素

•  文档头

•  文档体

<!doctype html> <html> <head> <title>第一个Web页面</title> </head> <body> <h1>Hello, HTML and CSS!</h1> </body> </html>

语义化的HTML文档

•  每一个标记都有特定含义 •  标记表示结构、内容而非外观、样式

尝试标记你的世界

<ol> <li><h1>It’s All Right Now</h1></li> <li><h1>KIM NEWMAN JAGO</h1></li> <li>The Season Ticket</li> </ol>

构建团队主页

HTML部分

构建团队主页 - HTML

•  HTML常见标签 •  Web常用图片格式

•  HTML学习资源

•  完成团队页面的HTML部分

你将了解：

构建团队主页

<!DOCTYPE HTML PUBLIC "-‐//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-‐equiv="Content-‐Type" content="text/html; charset=gb2312"> <title>web前端技术学习团队</title> </head> <body> </body> </html>

构建团队主页

<body> <div id="wrapper"> <!-‐-‐ 头部 begin -‐-‐> <div id="header"></div> <!-‐-‐ 头部 end -‐-‐> <!-‐-‐ 主体 begin -‐-‐> <div id="content"></div> <!-‐-‐ 主体 end -‐-‐> <!-‐-‐ 底部 begin -‐-‐> <div id="footer">© 2011 Baidu</div> <!-‐-‐ 底部 end -‐-‐> </div> </body>

构建团队主页

•  div元素用来为页面增加结构 •  id属性对元素进行标识

•  &copy是一个字符实体，用来在页面显示版权符号：©

•  注释有助于让别人看懂你的代码结构

header

content

footer

构建团队主页

<div id="content"> <!-‐-‐ 左侧 begin -‐-‐> <div id="main"></div> <!-‐-‐ 左侧 end -‐-‐> <!-‐-‐ 右侧 begin -‐-‐> <div id="aside"></div> <!-‐-‐ 右侧 end -‐-‐> </div>

main aside

构建团队主页

<div id="main"> <dl class="info"> <dt class="t">团队信息</dt> <dd></dd> </dl> </div>

dt

dd

构建团队主页

•  定义列表，用来包含若干术语和定义 •  dl、dt和dd

<dl> <dt>术语1</dt> <dd>定义1</dd> <dt>术语2</dt> <dd>定义2</dd> </dl>

构建团队主页

<dd> <div class="holder"> <div class="photos"> <a href="#"> <img src="img/a1.jpg"> </a> </div> </div> </dd>

div div a img

构建团队主页

•  a元素表示链接，是Web页面最重要的元素 •  href属性表示链接地址

<a href=“http://www.baidu.com”>百度</a>

构建团队主页

•  img元素用来展示图片 •  src属性表示图片的来源

<img src="pic.jpg" />

图片格式

GIF

•  颜色数量少 •  size小

•  可制作动画

•  支持透明

JPEG

•  颜色数量丰富 •  size与压缩质量相关

PNG

•  颜色数量丰富 •  size与颜色数量有关

•  支持半透明

常用图片处理工具

构建团队主页

<div class="holder"> <div class="photos">...</div> <div class="btn"> <div class="mask"></div> <p> <a href="#" class="show">1</a>| <a href="#">2</a>| <a href="#">3</a>| <a href="#">4</a> </p> </div> </div>

构建团队主页

<ol> <li class="show"> <h3><a href="#">title</a></h3> <p>web前端技术学习团队</p> </li> <li> <h3><a href="#">title</a></h3> <p>web前端技术学习团队</p> </li> ... </ol>

ol li h3

p

li

li

li

构建团队主页

•  有序列表和无须列表 •  ol、ul和li

<ol> <li></li> <li></li> </ol>

标记太多了，哪里有资料

•  HTML4 Specification •  W3CSchool

构建团队主页

构建团队主页

<dl class="members"> <dt class="t">成员介绍</dt> <dd> <ul class="tab_t f14"> <li class="first show">常齐</li> <li>常齐</li> <li>常齐</li> </ul> </dd> </dl>

<ul class="tab_con"> <li class="show"> <div class="intro"> <div class="pic"> <img /> </div> <div class="about"> <h3><a href="#">常齐</a></h3><p>介绍</p> </div> <p class="others"> 爱好：篮球、足球<br> Email：[email protected]</p> </div> <div class="map></div> </li> </ul>

构建团队主页

li div div div div

p

构建团队主页

<dl class="search"> <dd> <form> <input type="text" class="ipt"> <input type="submit" value="我要提问" class="btn"> </form> </dd> </dl>

input type=text input

构建团队主页

•  表单元素 •  form：表单元素的容器

•  input：用户输入，通过type属性确定类型 –  text – button – submit – reset – password – checkbox

构建团队主页

<dl class="course fl"> <dt class="t">css知识</dt> <dd> <ul> <li><a href="#">为什么背景颜色无法显示</a></li> <li><a href="#">锚点在ie6下无效的解决办法</a></li> ... </ul> </dd> </dl>

页面这么丑陋？

还没有CSS

•  CSS用来控制页面的外观和样式 •  同样的结构可以有不同的展现

相信吗？他们的HTML是

完全一样的

如果没有样式就是这个样子

CSS

•  Cascading Style Sheet

如何使用CSS

•  inline style •  embedded style •  external style

编写第一个CSS

body { background-‐color: gray; text-‐align:center; } h1 { font-‐size:30px; color:white; }

CSS基础

•  选择器：告诉浏览器样式作用给谁 •  属性：告诉浏览器要改什么

•  属性值：告诉浏览器要怎么改

h1 {color:blue;}

构建团队主页

CSS部分

构建团队主页 - CSS

•  CSS规则 •  常用CSS样式声明

•  完成团队页面的CSS部分

你将了解：

为团队主页增加样式

•  准备样式文件 •  增加样式引用

<link type="text/css" rel="stylesheet" href="style_1.css" />

样式文件结构

重置

通用

独立

整体

局部

构建团队主页

body{font:12px "宋体";color:#333;background:#fff} body,form,p,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0} ul{list-‐style:none} table,img{border:0} a{color:#0057a7;text-‐decoration:none} a:hover{color:#c00000;text-‐decoration:underline}

元素选择器

•  element：会根据element名字寻找元素

<div>content</div> <p></p> div{color:black;}

字体样式

•  font-size •  font-family •  font-style •  font-weight •  ⋯

•  缩写形式：font

字体样式

•  color：文字颜色 •  text-decoration：文字装饰

盒模型

•  margin •  border •  padding •  width/height

margin:20px; border:10px solid red; padding:40px; width:300px; height:100px

盒模型

•  margin-top •  margin-left •  margin-right •  margin-bottom

伪类

•  与用户行为相关 •  :hover 鼠标悬停状态

•  :visited 访问过的链接

构建团队主页

#wrapper{width:960px;margin:0 auto;overflow:hidden} #header{height:119px;background:url(img/banner.jpg)} #content{margin-‐top:10px} #main{width:640px;float:left} #footer{color:#aeaeae;text-‐align:center;padding:20px 0} #aside{width:310px;border-‐top:3px solid #7d7d7d;float:right}

id选择器

•  #id：会根据id属性寻找元素

<div id="main"></div> <div id="content"></div> #main{width:300px}

背景

•  background：指定元素背景

背景

•  background-image •  background-repeat •  background-position •  background-color •  缩写：background

1px background-‐repeat:repeat-‐x

浮动

•  float：指定元素向左或向右浮动 •  网页布局的重要方式

div1

div2

div2 div1

float:right

div2 div1

float:left

div2 div1

float:left

float:left

div1

div2

div2 div1

float:left

float:left

div2 div1

clear float

浮动的使用

构建团队主页

/* 团队信息 */ .info{border:1px solid #e0e0e0;margin-‐bottom:10px;padding:1px;zoom:1} .info dt{height:30px;line-‐height:30px; background:#f7f7f7} .info .holder{width:400px;float:left; position:relative} .info .photos img{vertical-‐align:top}

CSS注释

/* 注释内容 */

class选择器

•  .class 按照元素的class属性选择 •  可以为多个元素指定相同的样式

<div class="f"></div> <div class="f"></div> <div></div> .f{color:white}

后代选择器

•  selector1 selector2：选择那些selector1所匹配元素的子元素中与selector2匹配的元素

<div id="main"> <p class="normal"></p> <p></p> </div> <p class="normal"></p> #main .normal{color:red}

构建团队主页

/* 团队信息 */ .info .btn{width:100px;position:absolute;left:295px;top:188px} .info .btn a{width:20px;height:20px;display:inline-‐block;color:#9d9d9d;text-‐decoration:none} .info .btn a:hover{text-‐decoration:underline} .info .btn a.show{color:#fff} .info .btn .mask{height:20px;background:#000;opacity:0.5;filter:alpha(opacity=50)} .info .btn p{width:100%;color:#8b8b8b;line-‐height:20px;text-‐align:center;position:absolute;top:0}

定位

•  position: 元素定位方式 •  static、relative、absolute和fix

div1

div2

div3

div1

div2

div3

position:relative

div1

div3

position:absolute div2

定位的使用

构建团队主页

/* 团队信息 */ .info ol{width:180px;float:left;padding-‐left:35px} .info li{padding:8px 0} .info li h3{font-‐size:14px;font-‐weight:normal} .info li p{line-‐height:18px;padding-‐top:5px;display:none} .info li.show p{display:block}

block元素

•  div、p、h1-h6 •  用于构建“大型”结构

•  可以包含其他block元素和inline元素

•  换行显示

inline元素

•  a、img、span •  通常只包含内容和其他inline元素

•  同一行显示

display属性

•  可以改变元素展现形式：block、inline •  控制元素是否显示：none

构建团队主页

/* 成员介绍 */ .members .tab_t{height:30px;text-‐align:center;border-‐bottom:1px solid #e0e0e0;background:#f7f7f7} .members .tab_t li{width:120px;height:22px;padding-‐top:8px;color:#0059a7;background:url(img/bg.gif) no-‐repeat 0 8px;float:left;cursor:pointer} .members .tab_t .first{background:none} .members .tab_t li.show{height:23px;color:#000;background:#fff;border-‐left:1px solid #e0e0e0;border-‐right:1px solid #e0e0e0;position:relative;margin:0 -‐2px -‐1px -‐1px}

构建团队主页

/* 成员介绍 */ .search{text-‐align:center;border:1px solid #e0e0e0;margin-‐bottom:10px;padding:20px 0} .search .ipt,.search .btn{font-‐size:14px;background:url(img/i.png)} .search .ipt{width:400px;height:18px;padding:6px 7px;font:16px arial;margin-‐right:6px;border:1px solid #cdcdcd;border-‐color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-‐align:top;*vertical-‐align:1px} .search .btn{width:97px;height:34px;border:0;background-‐position:0 -‐41px;cursor:pointer} .search .btn_h{background-‐position:-‐102px -‐41px}

float改变li元素排布

li

li

li

li li li

鼠标指针

•  cursor：用来改变鼠标指针样式 •  default、pointer等

•  用户自定义图片（.cur文件）

CSS Hack

•  用于解决浏览器兼容性问题 •  条件注释

•  *selector（IE6、IE7识别）

构建团队主页

/* 我要提问 */ .search{text-‐align:center;border:1px solid #e0e0e0;margin-‐bottom:10px;padding:20px 0} .search .ipt,.search .btn{font-‐size:14px;background:url(img/i.png)} .search .ipt{width:400px;height:18px;padding:6px 7px;font:16px arial;margin-‐right:6px;border:1px solid #cdcdcd;border-‐color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-‐align:top;*vertical-‐align:1px} .search .btn{width:97px;height:34px;border:0;background-‐position:0 -‐41px;cursor:pointer} .search .btn_h{background-‐position:-‐102px -‐41px}

构建团队主页

/* 技术知识 */ .course{width:300px;border-‐top:1px solid #e0e0e0;padding-‐top:1px} .course dt{height:30px;line-‐height:30px;background:#f7f7f7;border-‐bottom:1px solid #e0e0e0} .course dd{font-‐size:14px;padding:10px} .course li{line-‐height:28px;background:url(img/dot.gif) no-‐repeat 0px center;padding-‐left:15px}

完成剩余样式

团队主页最终效果

参考资源

•  CSS: The Definitive Guide

参考资源

•  http://www.w3.org/ •  http://www.w3cschool.cn/

学习方法建议

•  阅读一两本经典书籍（一本入门、一本大全）

•  阅读规范相关部分

•  亲自动手实践

第二节课：样式之美 web前端课程体系之css

Education