CSS3实战：打造响应式网页设计

需积分: 10 37 浏览量更新于2024-07-18 收藏 25.95MB PDF 举报

"《CSS3实战手册第3版(影印版)》是David Sawyer McFarland撰写的一本关于CSS3的专业指南，旨在帮助读者掌握创建专业、响应式网站的技巧。本书适合初学者和经验丰富的web开发人员，提供实用的提示、技巧和详细步骤，以提升HTML和CSS技能。通过学习，读者能够学会构建美观且能在不同尺寸屏幕和设备上良好运行的网页。" 在CSS3的世界中，许多新特性为网页设计带来了革命性的变化。这本书的第三版更新涵盖了以下关键知识点： 1. **选择器增强**：CSS3引入了更强大的选择器，如类选择器、属性选择器和伪类，允许更精确地定位和控制页面元素。 2. **模块化结构**：CSS3被划分为多个模块，如颜色、字体、边框、布局等，使得开发者可以单独学习和应用特定功能。 3. **媒体查询**：利用媒体查询，开发者可以实现响应式设计，让网页根据不同的设备视口大小自动调整布局。 4. **渐进增强与优雅降级**：书中会介绍如何使用CSS3来实现这两种策略，确保网页在不同浏览器和旧版本中保持可用性。 5. **动画与过渡**：CSS3提供了过渡和动画效果，让网页元素的动态变化更为流畅，无需依赖JavaScript。 6. **2D和3D变换**：通过变换，可以改变元素的位置、大小和形状，创建出立体和动态效果。 7. **背景与边框**：新增的背景图像重复、裁剪和定位选项，以及多种边框样式和半透明效果，使设计更加丰富多彩。 8. **文字渲染**：包括文本阴影、文本装饰和文本渲染优化，提升文字的可读性和视觉吸引力。 9. **颜色与渐变**：新增颜色模式和线性/径向渐变，让色彩运用更为灵活和艺术。 10. **多列布局**：多列布局允许开发者轻松创建报纸式的排版，提高内容的可读性。 11. **Web字体**：通过@font-face规则，可以使用自定义字体，打破传统Web字体的限制。 12. **Flexbox布局**和**Grid布局**：这两种新的布局模型简化了复杂的网页布局问题，提供更强大的控制力。 13. **性能优化**：讨论如何合理组织和编写CSS，以减少加载时间，提高网页性能。 14. **浏览器兼容性**：书中会涵盖各种浏览器对CSS3特性的支持情况，以及如何解决兼容性问题。《CSS3实战手册第3版》是深入理解并应用CSS3技术的宝贵资源，无论你是网页设计新手还是经验丰富的专业人士，都能从中受益。通过阅读和实践，你将能够创建出更具吸引力、适应性强且用户体验优秀的现代网站。

CSS3: THE MISSING MANUAL

HOW HTML

TAGS WORK

If you look at the code for the sample HTML page in this section, you’ll see that it

uses a much more succinct doctype:

<!doctype html>

That’s HTML5’s new—and simpler—doctype. HTML5 is intended to be easier to use

and more streamlined than its predecessors. This book uses the HTML5 doctype,

which is supported by every popular browser (even the old Internet Explorer 6).

And because HTML5 is the future of the Web, there’s no reason to use the older

doctypes any longer.

NOTE

Just because the HTML doctype works in older browsers doesn’t mean that those browsers understand

all HTML5 tags or features. Internet Explorer 8 and earlier, for example, don’t recognize the new HTML5 tags. To

style tags with CSS for those versions of IE, you have to employ a little JavaScript. You’ll learn how to get older

browsers up to speed on page 30.

But no matter which doctype you prefer, the important thing is to always use one.

Without it, your pages will look dierent depending on your visitor’s browser, since

browsers display CSS dierently if they don’t have a doctype for guidance.

Each doctype requires you to write your HTML in a certain way. For example, the

tag for a line break looks like this in HTML 4.01:

<br>

But in XHTML, it looks like this:

<br />

And there’s another advantage of HTML5: it accepts either one.

How HTML Tags Work

In the simple HTML example on page 3, as in the HTML code of any web page, most

commands appear in pairs that surround a block of text or other commands. Sand

wiched between brackets, these

tags

are instructions that tell a web browser how to

display the web page. Tags are the “markup” part of the Hypertext Markup Language.

The starting (

opening

) tag of each pair tells the browser where the instruction begins,

and the ending tag tells it where the instruction ends. Ending or

closing

tags always

include a forward slash (/) after the ﬁrst bracket symbol (<).

On any web page, you’ll usually ﬁnd at least these four elements.

•The ﬁrst line of a web page is the DOCTYPE declaration, discussed in the

previous section.

•The <html> tag appears once at the beginning of a web page and again (with

an added forward slash) at the end: </html>. This tag tells a web browser that

INTRODUCTION

XHTML, TOO

the information contained in this document is written in HTML, as opposed to

some other language. All the contents of a page, including other tags, appear

between the opening and closing <html> tags.

If you were to think of a web page as a tree, the <html> tag would be its roots.

Springing from the trunk are two branches that represent the two main parts

of any web page: the

head

and the

body

•The

head

of a web page contains the title of the page (“Izzie’s Mail-Order Pen-

cils”). It may also include other, invisible information, like a page description,

that browsers and search engines use. You surround the head section with

opening and closing <head> tags.

In addition, the head section can include information that browsers use to for

mat the page’s HTML and to add interactivity. As you’ll see, the <head> section

can contain CSS code (like the kind you’ll learn to write in this book) or a link

to another ﬁle containing CSS information.

•The

body

, as set apart by its surrounding <body> tags, contains all the content

that appears inside a browser window—headlines, text, pictures, and so on.

Within the <body> tag, you commonly ﬁnd tags like these:

•You tell a web browser where a paragraph of text begins with a <p> (opening

paragraph tag), and where it ends with a </p> (closing paragraph tag).

•The <strong> tag emphasizes text. When you surround some text with it and its

partner tag, </strong>, you get boldface type. The HTML snippet <strong> Warn

ing!</strong> tells a web browser to strongly emphasize the word “Warning!”

•The <a> tag, or anchor tag, creates a

hyperlink

in a web page. When clicked, a

hyperlink—or

link

—can lead anywhere on the Web. You tell the browser where

the link points by putting a web address inside the <a> tags. For instance, you

can type <a href="http://www.missingmanuals.com">Click here!</a>.

The browser knows that when your visitor clicks the words “Click here!” it should

go to the Missing Manual website. The href part of the tag is called an

attribute

and the URL (the Uniform Resource Locator or web address) is the

value

. In this

example, http://www.missingmanuals.com is the

value

of the href attribute.

XHTML, Too

Like any technology, HTML has evolved over time. Although standard HTML has

served its purpose well, it’s always been a somewhat sloppy language. Among

other things, it lets you use uppercase, lowercase, and mixed-case letters in tags

(<body> and <BODY> are both correct, for example) and permits unclosed tags (so

you can use a <p> tag without a closing </p> tag to create a paragraph). While this

ﬂexibility may make page-writing easier, it also makes life more dicult for web

browsers, smart phones, and other technologies that interact with data on the Web.

CSS3: THE MISSING MANUAL

HTML5: THE

WHEEL TURNS

AGAIN

Additionally, HTML doesn’t work with one of the hottest Internet languages: XML,

or Extensible Markup Language.

To keep pace with the times, an improved version of HTML, called XHTML, was

introduced back in 2000, and you’ll ﬁnd it used frequently on many sites (in fact,

XHTML is just an “XML-iﬁed” version of HTML). XHTML was seen as the future

(back in 2000), but has since been supplanted by HTML5. While web browsers still

understand XHTML (and probably will for a long time), this book doesn’t include it.

HTML5: The Wheel Turns Again

When the W3C—the group responsible for many Internet technologies—introduced

XHTML as an intermediate step in the transition to XML as the prime language of

the Web, the web development community heralded it as the next big thing. His

tory has shown that prediction to be a bit grandiose. As it turns out, the complexity

of moving to XML kept browser manufacturers from following the XML path the

World Wide Web Consortium laid down. Instead, the W3C closed down the XHTML

working group in favor of HTML5—a new version of HTML that a moves away from

XML and back to HTML, albeit an enhanced version. With the support of all browser

manufacturers, HTML5 is the new next big thing. Some browsers, including Google

Chrome and Firefox, already recognize parts of HTML5, and even mainstream news

outlets like Time, Newsweek, and CNN drop “HTML5” into their technology reporting.

HTML5 isn’t some radically new technology. In fact, unlike XHTML, which was in

tended to foster a new way to build web pages, HTML5 is about making sure the

Web continues to work the way it always has. Most of the basics of HTML are still

in place. Also, HTML5 adds a few new elements, meant to support the way web

designers currently build websites. For example, in HTML5, the <header> tag can

contain the content you’d usually ﬁnd at the top of a page, such as a logo and site-

wide navigation links; the new <nav> tag encloses the set of links used to navigate a

site; and the <footer> tag houses the stu you usually put at the bottom of a page,

like legal notices, email contacts, and so on.

In addition, HTML5 adds new tags that let you insert video and audio into a page,

and new form tags that add sophisticated elements, like sliders and pop-up date

pickers, as well as built-in browser support for form validation (which ensures

visitors correctly ﬁll out your forms). Unfortunately, browser support for these new

features isn’t consistent, and it’s dicult to use the new tags without some pretty

elaborate workarounds.

Although HTML5 may not be entirely ready for primetime, there’s no reason not to

start using the HTML5 doctype and even some basic HTML5 now. (You’ll need to

give Internet Explorer 8 and earlier a bit of help, though; see the box on page 24.)

You’ll ﬁnd HTML5 throughout this book, especially in the next chapter.

INTRODUCTION

SOFTWARE

FOR CSS

Software for CSS

To create web pages made up of HTML and CSS, you need nothing more than a

basic text editor like Notepad (Windows) or TextEdit (Mac). But after typing a few

hundred lines of HTML and CSS, you may want to try a program better suited to

working with web pages. This section lists some common programs, some free and

some you have to buy.

NOTE

There are literally hundreds of tools that can help you create web pages, so the following isn’t a

complete list. Think of it as a greatest-hits tour of the most popular programs that CSS fans are using today.

Free Programs

There are plenty of free programs out there for editing web pages and style sheets.

If you’re still using Notepad or TextEdit, give one of these a try. Here’s a short list

to get you started:

•jEdit (Windows, Mac, Linux;

http://jedit.org

). This free, Java-based text editor

works on almost any computer and includes many features that you’d ﬁnd in

commercial text editors, like syntax highlighting for CSS.

•Notepad++ (Windows;

http://notepad-plus.sourceforge.net

). A lot of people

swear by this fast text editor. It even has built-in features that make it ideal for

writing HTML and CSS, like syntax highlighting—color coding tags and special

keywords to make it easier to identify the page’s HTML and CSS elements.

•TextWrangler (Mac;

www.barebones.com/products/textwrangler

). This free

software is actually a pared-down version of BBEdit, the sophisticated, well-

known Mac text editor. TextWrangler doesn’t have all of BBEdit’s built-in HTML

tools, but it does include syntax highlighting, FTP (so you can upload ﬁles to a

web server), and more.

Commercial Software

Commercial website development programs range from inexpensive text editors to

complete website construction tools with all the bells and whistles:

•EditPlus (Windows;

www.editplus.com

) is an inexpensive ($35) text editor

that includes syntax highlighting, FTP, auto-complete, and other wrist-saving

features.

•skEdit (Mac;

www.skedit.com

) is an inexpensive ($30) web page editor, com-

plete with FTP/SFTP, code hints, and other useful features.

•Coda2 (Mac;

www.panic.com/coda

) is a full-featured web development toolkit

($99). It includes a text editor, page preview, FTP/SFTP, and graphic CSS-

creating tools for creating CSS.

•Sublime Text (Mac;

www.sublimetext.com

) is a relatively new text editor. It’s

beloved among coders on the Mac.

www.allitebooks.com

CSS3: THE MISSING MANUAL

ABOUT THIS

BOOK

•Dreamweaver (Mac and Windows;

www.adobe.com/products/dreamweaver

)

is a visual web page editor ($399). It lets you see how your page looks in a web

browser. The program also includes a powerful text-editor and excellent CSS

creation and management tools. Check out

Dreamweaver CS6: The Missing

Manual

for the full skinny on how to use this powerful program.

•Expression Web 2 (Windows;

www.microsoft.com/expression

) is Microsoft’s

entry in the web design ﬁeld ($149). It includes many professional web design

tools, including excellent CSS tools.

NOTE

The various types of software discussed in this section are general-purpose programs that let you

edit both HTML/XHTML and CSS. With them, you need to learn only one program for your web development needs.

But if you already have a beloved HTML/XHTML editor that doesn’t do CSS, then you may want to check out one

of the CSS-specific editing programs covered in Appendix B.

About This Book

The World Wide Web is really easy to use. After all, grandmothers in Boise and ﬁrst

graders in Tallahassee log onto the Web every day. Unfortunately, the rules that

govern how the Web

works

aren’t so easy to understand. The computer scientists

and other techie types who write the ocial documentation aren’t interested in ex

plaining their concepts to the average Joe (or Joanne). Just check out

www.w3.org/

TR/css3-transforms

to get a taste of the technical mumbo-jumbo these geeks speak.

People just learning CSS often don’t know where to begin. And CSS’s ﬁner points

can trip up even seasoned web pros. The purpose of this book, then, is to serve as

the manual that should have come with CSS. In this book’s pages, you’ll ﬁnd step-

by-step instructions for using CSS to create beautiful web pages.

CSS3: The Missing Manual

is designed to help readers at every technical level. To get

the most out of this book, you should know a sampling of HTML and maybe even

CSS. So if you’ve never built a web page before, then check out the tutorial that starts

on page 43. The primary discussions in these chapters are written for advanced-

beginners or intermediates. But if you’re new to building web pages, special boxes

called “Up to Speed” provide the introductory information you need to understand

the topic at hand. If you’re an advanced web page jockey, on the other hand, then

keep your eye out for similar boxes called “Power Users’ Clinic.” They oer more

technical tips, tricks, and shortcuts for the experienced computer fan.

剩余649页未读，继续阅读

Jim_King_2000

粉丝: 43

CSS3实战：打造响应式网页设计

JavaScript与jQuery：Missing Manual,第3版 - 入门经典

精通CSS3：构建响应式网页设计

CSS Cookbook: 专家解答CSS设计难题与最新标准

CSS: The Missing Manual, 4th Edition

PHP & MySQL: The Missing Manual

CSS3秘籍 the missing manual 随书代码

CSS3 The Missing Manual 3rd

CSS3 The Missing Manual 3rd Edition

CSS The Missing Manual

CSS the Missing Manual 源码

最新资源