CSS3色彩、背景与渐变：打造网页个性

需积分: 10 139 浏览量更新于2024-07-20 收藏 23.67MB PDF 举报

"《色彩、背景与渐变：CSS设计与开发的艺术》是一本实用指南，作者埃里克·梅耶（Eric A. Meyer）深入浅出地探讨了在网页设计中如何利用CSS3的新特性来增强视觉表现力。本书针对颜色、背景和渐变这三大关键元素，提供了丰富的实战技巧和策略。首先，书中介绍了如何使用color属性来精确设定元素或边框的前景色，确保文本和其他视觉元素的清晰易读。通过巧妙地结合前景色与背景色，读者可以创造出独特且引人注目的视觉效果，提升网页的整体设计感。接着，书中的内容涵盖了如何在CSS中应用背景图像，包括如何定位和重复图片，以及如何使图片适应屏幕的不同视图，从而实现无缝布局和响应式设计。此外，作者还将教你如何创建自定义的渐变，无论是线性渐变还是径向渐变，都能帮助你在设计中打破常规，为网页增添动感和深度。值得注意的是，这本书是CSS权威指南第四版的部分内容。当你购买纸质版或电子版的《色彩、背景与渐变》时，还能享受到最新版《CSS：终极指南》发布时的折扣优惠。现在就学习吧，立即提升你的网页设计技巧，赋予你的网页生命和个性。本书不仅适合前端开发者和设计师，也对希望通过CSS增强网页视觉体验的任何web开发者来说都是一份宝贵资源。通过阅读和实践书中的内容，你将掌握如何利用色彩、背景和渐变这一强大的工具，为你的网站增添无限可能。"

like images, replaced elements. In theory, CSS does not style the contents of replaced

elements.

In practice, the line is a lot blurrier than that, as Figure 5 demonstrates. Some form

inputs have the color of their text and even portions of their UI changed, while others

do not. And since the rules aren’t explicitly defined, behavior is inconsistent across

browsers. Some may present a red checkmark, while others will not. In short, form

elements are deeply tricky to style and should be approached with extreme caution.

Inheriting Color

As the definition of color indicates, the property is inherited. This makes sense, since

if you declare p {color: gray;}, you probably expect that any text within that para‐

graph will also be gray, even if it’s emphasized or boldfaced or whatever. Of course, if

you want such elements to be different colors, that’s easy enough, as illustrated in Fig‐

ure 6, which is the result of the following code:

em {color: red;}

p {color: gray;}

Figure 6. Dierent colors for dierent elements

Since color is inherited, it’s theoretically possible to set all of the ordinary text in a

document to a color, such as red, by declaring body {color: red;}. This should

make all text that is not otherwise styled (such as anchors, which have their own color

styles) red.

Backgrounds

By default, the background area of an element consists of all of the space behind the

foreground out to the outer edge of the borders; thus, the content box and the pad‐

ding are all part of an element’s background, and the borders are drawn on top of the

background. (You can change that to a degree with CSS, as we’ll see shortly.)

CSS lets you apply a solid color or create moderately sophisticated effects using back‐

ground images, and its capabilities in this area far outstrip those of HTML. And that’s

without even getting into the new ability to apply multiple background images to a

single element, including linear and radial gradients.

6 | Colors and Backgrounds

way). Similarly, if you set the page canvas to have a background, it can be seen

through all of the elements in the document that don’t have their own backgrounds.

They don’t inherit the background; it is visible through them. This may seem like an

irrelevant distinction, but as you’ll see when we discuss background images, it’s

actually a critical difference.

Most of the time, you’ll have no reason to use the keyword transparent, since that’s

the default value. On occasion, though, it can be useful. Imagine that a user has set his

browser to make all links have a white background. When you design your page, you

set anchors to have a white foreground, and you don’t want a background on those

anchors. In order to make sure your design choice prevails, you would declare:

a {color: white; background-color: transparent;}

If you left out the background color, your white foreground would combine with the

user’s white background to yield totally unreadable links. This is an unlikely example,

but it’s still possible.

The potential combination of author and reader styles is the reason why a CSS valida‐

tor will generate warnings such as, “You have no background-color with your

color.” It’s trying to remind you that author-user color interaction can occur, and

your rule has not taken this possibility into account. Warnings do not mean your

styles are invalid: only errors prevent validation.

Special

eects

Simply by combining color and background-color, you can create some interesting

effects:

h1 {color: white; background-color: rgb(20%,20%,20%);

font-family: Arial, sans-serif;}

This example is shown in Figure 8.

Of course, there are as many color combinations as there are colors, but I can’t show

all of them here. Still, I’ll try to give you some idea of what you can do.

This stylesheet is a little more complicated, as illustrated by Figure 9, which is the

result of the following code:

body {color: black; background-color: white;}

h1, h2 {color: yellow; background-color: rgb(0,51,0);}

p {color: #555;}

a:link {color: black; background-color: silver;}

a:visited {color: gray; background-color: white;}

8 | Colors and Backgrounds

剩余111页未读，继续阅读

libingchen

粉丝: 29
资源: 263

CSS3色彩、背景与渐变：打造网页个性

backgrounds-and-gradients

Detailed Explanation of Colors and Backgrounds in Qt Stylesheets: Using Colors, Images, and ...

WPF Programmer's Reference: Windows Presentation Foundation with C# 2010 and .NET 4

Advanced Qt Graphics Techniques: Implementing Color Gradients with QGradient

履带式拖拉机Creo2.0_三维3D设计图纸.zip

SSM+JSP高校毕业生就业满意度调查统计系统答辩PPT.pptx

SSM+JSP冰淇淋在线购买网站答辩PPT.ppt

SSM+JSP医护系统答辩PPT.pptx

Shapely-1.6.4.post2-cp35-cp35m-win_amd64.whl

SSM+JSP农场信息化管理系统答辩PPT.pptx

最新资源