精通CSS：第4版完全指南

5星 · 超过95%的资源需积分: 12 195 浏览量更新于2024-07-19 收藏 59.63MB PDF 举报

"CSS: The Missing Manual, 4th Edition 是一本由 David Sawyer McFarland 编写的关于CSS的专业指南，旨在帮助读者掌握CSS的高级技巧，尤其针对新工具如Flexbox和Sass的使用，以创建在各种桌面和移动设备上表现优秀的网页。本书适合初级和经验丰富的设计师阅读。" 在《CSS：缺失的手册，第4版》中，作者David Sawyer McFarland是一位有多年经验的Web开发者、教师和作家，他分享了从1995年开始设计网站以来积累的专业知识。这本书提供了一套全面且现代的教程，旨在解决学习CSS过程中可能遇到的挑战。主要内容涵盖了以下关键知识点： 1. **CSS基础知识**：首先，书本会引导读者了解CSS的基础，包括选择器、属性和值，以及如何将这些元素结合在一起来控制网页布局和样式。 2. **盒模型**：理解CSS盒模型对于精确布局至关重要，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)的概念。 3. **响应式设计**：书中会介绍如何利用媒体查询(media queries)和流动网格(flexbox)构建适应不同屏幕尺寸的网页，确保在桌面和移动设备上都能良好显示。 4. **Flexbox**：Flexbox是一种灵活的布局模块，可以轻松实现弹性容器中的元素对齐、排序和大小调整。通过实例，读者将学会如何利用Flexbox创建动态和响应式的布局。 5. **Sass（Syntactically Awesome Stylesheets）**：Sass是一种CSS预处理器，它引入了变量、嵌套规则、函数等特性，使CSS编写更简洁、可维护。书本会教导如何使用Sass提高CSS代码的组织性和效率。 6. **CSS性能优化**：书中将涵盖如何编写高性能的CSS，包括最小化文件大小、合理使用CSS动画和过渡，以及避免阻塞页面渲染的样式。 7. **浏览器兼容性**：鉴于不同的浏览器可能对CSS支持程度不同，书本会讲解如何处理浏览器兼容性问题，确保网页在各种环境下都能正常工作。 8. **调试和测试**：学习如何使用开发者工具进行CSS调试，以及如何在多种设备和浏览器上测试网页设计。 9. **最佳实践和设计原则**：书中还会探讨设计原则和最佳实践，帮助读者创建既美观又易于维护的网页。 10. **实战项目**：通过一系列实践项目，读者可以将所学知识应用到实际场景中，巩固理解和技能。《CSS：缺失的手册，第4版》是一本全面且深入的CSS教程，无论你是初学者还是有经验的开发者，都能从中获得有价值的指导和启示。

CSS: THE MISSING MANUAL

XIV

WHAT YOU

NEED TO

KNOW

What You Need to Know

This book assumes you’ve already got some knowledge of HTML. Perhaps you’ve

built a site or two (or at least a page or two) and have some familiarity with the sea

of tags—<html>, <p>, <h1>, <table>—that make up the Hypertext Markup Language.

CSS can’t do anything without HTML, so you need to know how to create a web

page by using basic HTML.

If you’ve used HTML in the past to create web pages, but feel like your knowledge

is a bit rusty, the next section provides a basic refresher.

TIP

If you’re just getting your feet wet learning HTML, then check out these free online tutorials: HTML Dog

(

www.htmldog.com/guides/htmlbeginner

) and W3Schools (

www.w3schools.com/html

). If you’re a printed-page

fan, then you may want to pick up a copy of

HTML5: The Missing Manual

, Third Edition or

Head First HTML and CSS

Second Edition (both O’Reilly).

HTML: The Barebones Structure

HTML (Hypertext Markup Language) uses simple commands called

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 (<).

CSS: THE MISSING MANUAL

XVI

HOW HTML

TAGS WORK

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

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

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 marks text as important. When you surround some text with

it and its partner tag, </strong>, you get boldface type. The HTML snippet

<strong> Warning!</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.

XVII

SOFTWARE

FOR CSS

HTML5: More Tags to Choose From

HTML5—the current version of HTML—has been around for years now. Sometimes

you’ll hear the name used to describe things other than HTML tags, like local storage

(a way to save data from a website to a visitor’s computer), geolocation (a way to

check where a visitor is in the world), and drawing to the web page using WebGL.

Strictly speaking, those technologies aren’t part of HTML, but they’re new browser

features that came onto the scene along with HTML5.

In this book, the term

HTML5

always refers to the HTML5 doctype as well as the

new tags introduced as part of the HTML5 standard. HTML5 isn’t radically dierent

from its predecessors—it was created to make sure the Web continues to work the

way it always has. Most of the basics of HTML are the same as they’ve always been;

HTML5 adds a few new elements meant to support the way web designers currently

build websites. For example, in HTML5, the <header> tag contains the content you

usually ﬁnd at the top of a page, such as a logo and sitewide 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,

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

and built-in browser support for form validation (which ensures visitors correctly

ﬁll out your forms). You’ll see HTML5 used throughout this book, especially in the

next chapter.

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:

• Brackets (Windows, Mac, Linux;

http://brackets.io/

). Spearheaded by Adobe,

this free, open-source text editor has many tools for working with HTML and

CSS. It’s written speciﬁcally for web designers and developers.

CSS: THE MISSING MANUAL

XVIII

ABOUT THIS

BOOK

• Atom (Windows, Mac, Linux;

https://atom.io/

). Another free, open-source text

editor created by the people behind GitHub, the hugely popular code sharing and

collaboration site. Like Brackets, this new text editor is aimed at web developers.

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

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, autocomplete, 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, Windows, Linux;

www.sublimetext.com

) is a powerful

text editor ($70) beloved by many web coders. You’ll ﬁnd it frequently used in

web design companies.

• Dreamweaver (Mac and Windows;

www.adobe.com/products/dreamweaver

)

is a visual web page editor (from $19.99 per month). 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

CC: The Missing Manual

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

NOTE

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

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

About This Book

The World Wide Web is really easy to use. After all, grandfathers 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-

剩余717页未读，继续阅读

sinat_32796945

粉丝: 0
资源: 1

精通CSS：第4版完全指南

CSS.The.Missing.Manual.4th.Edition.2015.8.pdf

CSS,The Missing Manual, 4th Edition(2015)

HTML Manual of Style 4th Edition

html,css,javascript,node.js,Mysql数据库的参考文献

startbtn.css:1 Failed to load resource: the server responded with a status of 404 ()

Basice.css:1 Failed to load resource: the server responded with a status of 404 ()

style.css:1 Failed to load resource: the server responded with a status of 4

base.css:1 Failed to load resource: the server responded with a status of 404 ()

pintuer.css:1 Failed to load resource: the server responded with a status of 404 ()

common.css:1 Failed to load resource: the server responded with a status of 404 ()

最新资源