CSS3秘籍：布局与设计的艺术

CSS3

HTML5

需积分: 9 187 浏览量更新于2024-07-19 收藏 30.32MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

"CSS3 The Missing Manual - CSS3 秘籍 - 第3版" 是一本由 David Sawyer McFarland 编写的关于CSS3技术的专业书籍，旨在帮助读者掌握网页布局和设计的艺术。书中详细介绍了如何利用CSS3来实现诸如吸引人的标题、首字母下沉、边框、精确的图像排列、多列布局、动态悬停效果等多种网页设计技巧。此外，还涉及了CSS3的动画效果，如元素淡入淡出、页面对象移动以及鼠标悬停时按钮颜色的平滑变化等交互式设计。 CSS3是 Cascading Style Sheets 的第三版，它扩展了之前的版本，引入了许多新的特性和功能。例如，选择器的增强使得能够更精确地定位和样式化网页元素；媒体查询（Media Queries）支持响应式设计，使网页能在不同设备上呈现良好的效果；新的布局模型如Flexbox和Grid提供了更加灵活的布局方式；阴影、渐变和边框半径等视觉效果让设计更具立体感；以及滤镜和过渡效果增加了动态元素的视觉吸引力。 HTML5与CSS3常常一起被提及，因为它们共同构成了现代网页开发的基础。HTML5提供了更多的语义化标签和多媒体支持，而CSS3则负责这些内容的呈现和美化。通过结合使用这两者，开发者可以创建出既美观又功能丰富的网页应用。本书的第三版在2012年12月发布，更新了自第一版以来的所有CSS3新进展。作者David Sawyer McFarland是一位经验丰富的技术作家，他的作品通常以易于理解的方式解释复杂的概念，适合初学者和有经验的开发者阅读。读者可以通过访问O'Reilly的错误报告页面获取关于该书的最新修订信息，以确保获取最准确的技术指导。 "CSS3 The Missing Manual - CSS3 秘籍 - 第3版" 是一本全面且实用的教程，它覆盖了CSS3的所有关键特性，并提供了丰富的实例来帮助读者理解和应用这些技术，从而提升网页设计和开发的技能。无论是想要提升网站视觉效果还是优化用户体验，这本书都是不可或缺的参考资料。

资源详情

资源推荐

CSS3: THE MISSING MANUAL

HOW HTML

S WORK

If yo

u 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>

Tha

t’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 doct

ype 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 n

o 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 i

XHTM

L, it looks like this:

<br />

And th

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

How HTML Tags W

ork

In the s

imple 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 i

nstructions that tell a web browser how to

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

The starting (

ope

ning

) tag o

f each pair tells the browser where the instruction begins,

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

closi

tag

s 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 D

OCTY

PE 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

www.fontorg.com

INTRODUCTION

XHTML, TOO

the inf

ormation 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 we

b 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 se

t 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

hype

rlink

in a we

b page. When clicked, a

hyperlink—or

link

—ca

n 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

att

ribute

and th

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

valu

. In thi

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

value

of the href attribute.

XHTML, Too

ike

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.

www.fontorg.com

CSS3: THE MISSING MANUAL

HTML5: THE

WHEEL TURNS

AGAIN

ditionally, 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

XHT

ML, was

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

XHT

ML is just an “

XML

-iﬁed” version of HTML).

XHT

ML was seen as the future

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

understand

XHT

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

HTML5: The W

heel Turns Again

Whe

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

XHT

ML as an intermediate step in the transition to

XML a

s 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 k

ept browser manufacturers from following the

XML p

ath the

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

XHT

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

XML a

nd 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

XHT

ML, 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.

www.fontorg.com

INTRODUCTION

SOFTWARE

FOR CSS

Softwar

e for CSS

To cr

eate 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 lit

erally 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 Pr

ograms

The

re 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

). Th

is 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;

htt

p://notepad-plus.sourceforge.net

). A lo

t 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

). Th

is 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 Soft

ware

Comm

ercial 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 a

n 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 re

latively new text editor. It’s

beloved among coders on the Mac.

www.fontorg.com

CSS3: THE MISSING MANUAL

ABOUT THIS

BOOK

• Dr

eamweaver (Mac and Windows;

w.adobe.com/products/dreamweaver

)

is a v

isual 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

eamweaver CS6: The Missing

Manual

r 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 t

ypes 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

e 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

wor

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 g

et 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.

S3: The Missing Manual

is d

esigned 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.

www.fontorg.com

剩余649页未读，继续阅读

mcxxlm

粉丝: 0
资源: 6

CSS3秘籍：布局与设计的艺术

CSS3秘籍 the missing manual 随书代码

CSS The Missing Manual(4th) 无水印pdf

Loading PostCSS "postcss-px-to-viewport" plugin failed: Cannot find module 'postcss-px-to-viewport'

npm i postcss postcss-loader postcss-px-to-viewport -D。

vue3使用postcss-px-to-viewport

vue3 使用postcss-px-to-viewport

postcss-px-to-viewport

npm下载postcss-px-to-viewport

umi postcss-px-to-viewport

postcss-px-to-viewport 如何使用

postcss-px-to-viewport怎么适配node低版本

react使用postcss-px-to-viewport

vite+vue项目怎么使用postcss-px-to-viewport-8-plugin'

vue2 postcss-px-to-viewport版本不对应

postcss-px-to-viewport 使用在vue2

vite vue3 vant postcss-px-to-viewport-8-plugin

postcss-px-to-viewport 如何安装和配置？

Error: Cannot find module 'css-minimizer-webpack-plugin'

postcss-px-to-viewport-8-plugin怎么对tailwindcss生效

最新资源