CSS3入门指南：网页设计的核心技术

需积分: 1 151 浏览量更新于2024-07-21 收藏 15.36MB PDF 举报

" Beginning CSS3 是一本适合初学者的入门指南，涵盖了CSS3的基础知识和高级技术，旨在帮助读者掌握网页设计的语言。书中不仅讲解了CSS3的语法和选择器，还涉及文本样式、网络字体、布局技巧、跨浏览器兼容性等重要主题。此外，书中还提供了实用的工具链接，方便读者在开发过程中快速找到所需资源。" 本书内容分为四个部分：第一部分：CSS基础这一部分从介绍CSS语言的基本概念开始，包括第1章“引入CSS——网页设计的语言”，讲解CSS的作用和重要性。第2章“使用基本选择器”详细阐述了如何选取并操作页面元素，如ID选择器、类选择器等。第3章“指定尺寸、颜色和文件”，则深入介绍了设置元素大小、颜色以及引入外部资源的方法。第二部分：处理文本从第4章“样式化文本”开始，书中详细讲解了如何改变文本的字体、大小、颜色和对齐方式。第5章“嵌入网络字体”探讨了Web字体的使用，使得网页可以使用各种美观的自定义字体。这部分内容对于提升网页视觉效果至关重要。第三部分：CSS页面布局此部分是关于如何构建网页布局的关键章节。第6章“理解CSS盒模型”解释了CSS如何控制元素的尺寸和位置。第7章“浮动元素布局”介绍了如何通过浮动实现灵活的布局。第8章“添加背景”和第9章“添加边框和投影”让读者掌握装饰元素的使用。第10章“样式化列表和导航菜单”帮助创建高效的导航结构。第11章“精确定位元素”讲述了如何通过绝对和相对定位来精细控制元素位置。第12章“跨浏览器布局技术”讨论了如何确保在不同浏览器中的兼容性问题。第四部分：高级CSS技术最后，第13章“使用高级选择器”涵盖了更复杂的CSS选择器，如伪类和属性选择器，提高选择和操作元素的灵活性。第14章则可能涉及更高级的技术，如响应式设计、过渡和动画等，帮助读者进一步提升CSS技能。总体来说，"Beginning CSS3" 是一份全面且实用的学习资料，无论是对CSS3初学者还是希望巩固基础的开发者，都能从中获益。通过这本书，读者可以逐步掌握创建美观、功能丰富的网页设计所需的CSS知识和技巧。

CHAPTER 1 ■ INTRODUCING CSS—THE LANGUAGE OF WEB DESIGN

/* This is a CSS comment that is spread over multiple lines.

The browser ignores everything until the end of this line. */

Comment tags can also be used to disable part of your CSS temporarily. is is a useful technique when

experimenting with new ideas or troubleshooting problems. Just put the opening /* and closing */ comment tags

around the section that you want to disable. You can disable a single declaration or a whole section at a time. For

example, this disables the color and background-color properties in the following rule:

body {

font-family: Arial, Helvetica, sans-serif;

/* color: #000;

background-color: #FFF; */

}

Just remove the comment tags to restore the rules.

Caution ■ Comments cannot be nested. As soon as the browser encounters the ﬁrst */ closing tag, it treats

everything else as CSS until it ﬁnds another /* opening tag.

Why Are ey Called “Cascading” Style Sheets?

e cascade in CSS refers to the way that rules are added together and applied cumulatively. ink of the cascade

in the literal sense of a waterfall or a river. As a river ﬂows from the mountains to the sea, it starts o as a tiny

trickle, but as more water is added through tributaries, it becomes bigger and more powerful. Yet the water in that

original trickle is still part of the whole.

CSS works in a similar way. You can create a style rule that trickles down through the whole page. For

example, it’s common to set the background and text colors in a rule for the body of the page. But lower down,

new rules can be added that aect the font or size of the text in paragraphs or headings without changing the

color or background. And just like a river can break into a delta as it reaches the sea, you can break the CSS

cascade into dierent strands, so that a sidebar looks dierent from the main content or footer of the page.

is might sound mysterious at the moment, but all should become clear by the end of this book. e

important things to remember are these:

• Styles trickle down: A style rule applied to the <body> aects everything inside the page

unless something else overrides it.

• Styles are cumulative: Most property values are inherited, so you need apply only new ones.

• Inherited styles can be overridden: When you want to treat an element or section of the

page dierently, you can create more detailed style rules and apply them selectively.

In most cases, the order of your style rules doesn’t matter. However, the cascade plays an important role

when there’s a conﬂict between rules. As a basic principle, style rules that appear lower down in a style sheet or

to determine which rule takes precedence.

CHAPTER 1 ■ INTRODUCING CSS—THE LANGUAGE OF WEB DESIGN

Where Do I Create My CSS?

Most of the time, you should create style rules in an external style sheet attached to the web page. But styles can

also be deﬁned in:

A • <style> block

A • style attribute

I’ll cover each way of adding styles, but let’s begin with the most important—external style sheets.

Using External Style Sheets

is is the most common and eective way of using CSS. e styles in external style sheets aect all pages to

which they’re linked. Typically an external style sheet is used for an entire site or subsection of a site, making

it easy to update multiple pages by editing only one ﬁle. What’s more, the browser caches the style sheets, so

they need to be downloaded only once regardless of how many pages are viewed in your site. is speeds up the

display of subsequent pages and reduces bandwidth usage. You can link more than one style sheet to a page.

Create your style rules in a separate ﬁle, and save the ﬁle with the ﬁle name extension .css. An external style

sheet can be anywhere within your website, but the normal practice is to put all style sheets in a dedicated folder

called styles or css.

You attach an external style sheet in the <head> section of your web page using a <link> tag or a CSS @import

rule. A <link> tag looks like this:

In HTML5, the <link> tag requires two attributes:

href is is the path to the external style sheet.

rel is tells the browser that the ﬁle is a style sheet. Note that the value stylesheet is

written as one word. is attribute also accepts the value alternate stylesheet, but

it’s of little practical value because browsers give no obvious indication of a choice of

styles, and the user needs to select the alternate styles manually on each page.

To validate in HTML 4.01 and XHTML 1.0, you also need to add type="text/css" in a <link> tag. e type

attribute was dropped in HTML5 because CSS is the only type of style sheet used in web pages.

If you’re using an HTML editor, such as Dreamweaver or Expression Web, the <link> tag is created

automatically when you select the option to attach a style sheet.

e alternative to using a <link> tag is to use a CSS @import rule. is technique was frequently used in the

past to hide styles from older browsers that didn’t support @import. All current browsers now support @import,

so there’s no real advantage in using it to link a style sheet directly to a web page. However, I have included it here

so you know what it’s for if you come across it in an existing site. e @import rule goes inside an HTML <style>

block in the <head> of the page like this:

<style>

@import url(css/basic.css);

</style>

e location of the style sheet is speciﬁed by putting it between the parentheses of url(). e path to the

style sheet can optionally be enclosed in quotes.

e main purpose of @import is to import styles from one style sheet into another. is can be useful when

you organize your rules in several style sheets. Instead of linking each style sheet separately to your web pages,

you can link just one, which then imports the rules from the other style sheets. If you do this, the @import

rule must come before any other style rules in the external style sheet. Also, because it’s in an external style sheet,

CHAPTER 1 ■ INTRODUCING CSS—THE LANGUAGE OF WEB DESIGN

you don’t wrap it in an HTML <style> block. e following code shows how you might import rules into one

external style sheet from another:

@import url(another.css);

/* Other style rules */

body {

font-family: Arial, Helvetica, sans-serif;

color: #000;

background-color: #FFF;

}

Caution ■ An external style sheet must not contain anything other than CSS style rules or CSS comments. You

cannot mix HTML, JavaScript, or anything else in a style sheet. If you do, your styles won’t work.

Using a <style> Block

Using an HTML <style> block limits the style rules to the current page, so this technique should not be used

for styles that will be applied to multiple pages. One exception is when you’re planning your site’s design. Many

designers prefer to work in a single page to reﬁne their ideas before moving the styles to an external style sheet.

Because they’re embedded in the page, these are known as embedded styles.

To create a <style> block, you write the style rules in exactly the same way as in an external style sheet, and

wrap them in a pair of HTML <style> tags. For valid HTML 4.01 and XHTML 1.0, the opening tag must contain

type="text/css" like this:

/* Style deﬁnitions go here */

</style>

You can omit type="text/css" from the opening tag in HTML5.

In HTML 4.01 and XHTML 1.0, a <style> block can only be in the <head> of the page. HTML5 relaxes this

restriction, and introduces the concept of scoped styles in <style> blocks in the body of a page. A scoped <style>

block in HTML5 applies highly localized styles to the current element and all the element’s children (other

elements nested inside it).

e idea of allowing scoped styles inside the body of the page is controversial because it violates the

principle of separating content from presentation. However, one scenario where scoped styles could be useful

is with prestyled components or widgets, such as calendars or date-pickers that you want to drop into a page

without needing to update the site’s main style sheet.

When using scoped styles, the <style> block must come before everything else inside the HTML element to

which the styles apply. e opening <style> tag requires the scoped attribute like this:

/* These styles apply only to the calendar widget */

table {

font-size: 11px;

background-color: teal;

}

</style>

<table>

</table>

</div>

CHAPTER 1 ■ INTRODUCING CSS—THE LANGUAGE OF WEB DESIGN

Note ■ At the time of this writing, only the development version of Chrome supports scoped styles.

Applying a Style Directly to an HTML Element

is goes in the opening tag of an HTML element, so it applies to that element alone. is is known as creating

an inline style and should be avoided because it’s the least efﬁcient way to apply CSS. As with all rules, there is an

exception: some email programs, notably Microsoft Outlook, don’t understand style rules unless they’re applied

this way.

Inline styles use the same properties and values as CSS rules that you put in an external style sheet or a

are replaced by quotes. For example, you might create the following style rule for <h1> tags:

h1 {

font-family: Arial, Helvetica, sans-serif;

color: #900;

}

e equivalent inline style looks like this:

<h1 style="font-family: Arial, Helvetica, sans-serif; color: #900;">Heading with an Inline

Style</h1>

Learning to Write CSS Well

e basics of writing a style rule are simple, but CSS can also be infuriatingly complex. e simplicity of CSS lies

in the limited number of properties you need to remember. e complexity lies in the fact that you can combine

the properties in an inﬁnite number of ways.

My advice is not to rush. I learned CSS by adding or changing one property at a time and viewing the

results in a browser. It was a slow, tedious process, but it helped me understand the interaction of the dierent

properties. Once you appreciate the trickle-down, cumulative eect of the cascade, you’ll be amazed at the power

of CSS. e time spent will be repaid many times over in increased efﬁciency and easier maintenance of your

websites.

Don’t succumb to the temptation to skip ahead to later chapters until you have read at least Parts I and II

and the ﬁrst two chapters of Part III.

Test Your CSS Early in Several Browsers

Don’t design for just one browser. Get into the habit of checking your design at an early stage in several

browsers—and preferably on dierent operating systems, including mobile devices. Spotting a problem early

on makes it easy to troubleshoot. Not everyone will be viewing your sites in the most up-to-date browsers. If you

don’t have access to older browsers, ask friends, colleagues, or online forums for help in checking your sites.

Also consider using an online browser capture service such as BrowserCam (www.browsercam.com) or Adobe

BrowserLab (https://browserlab.adobe.com/en-us/index.html).

Use Browser Developer Tools to Inspect Your CSS

All the main browsers have built-in panels that let you inspect the styles not only of your own site but of any

public website, giving you a useful insight into how CSS works. In Google Chrome, Safari, or Firefox, right-click

剩余546页未读，继续阅读

wangxin223

粉丝: 1
资源: 1

CSS3入门指南：网页设计的核心技术

Beginning CSS3 (pdf)

--------- beginning of system 和 --------- beginning of main 区别

--------- beginning of system --------- beginning of main这两条是什么意思？

[2] reddy k s p. beginning sa hotel 3: applications framework[m]. 2017: 65-6

beginning ios 14 programming with swift

--------- beginning of system --------- beginning of main

帮我写个完整的discuz DIY幻灯片模板 加上css和js

beginning rust:from novice to professional

"invalid character '[' looking for beginning of object key string"

Python代码index=['beginning', 'current', 'ending'])什么意思

最新资源

帮我写个完整的discuz DIY幻灯片模板加上css和js