Catálogo de publicaciones - libros

On the surface, CSS seems easy. It has 45 commonly used properties you can employ to style a document. Below the surface, different combinations of properties and property values trigger completely different results. I call this CSS polymorphism because the same property has many meanings. The result of CSS polymorphism is a combinatorial explosion of possibilities.

T his chapter explores HTML only as it relates to CSS. It contains design patterns that are essential for styling a document with CSS. It explores HTML at a high level with an eye toward explaining how elements can be put to use structurally and semantically. Each design pattern in this book is created using structural and semantic elements combined with CSS. There are four major types of elements used in design patterns: structural block, terminal block, multi-purpose block, and inline elements. Understanding these types of elements is key to understanding the design patterns in this book and essential to creating your own.

T his chapter presents design patterns that select elements for styling. Because selector design patterns are simple, I discuss selector design patterns in groups rather than one at a time. This makes it easy to compare and contrast related forms of selectors. Thus, even though this chapter has only six examples, it contains thirteen different design patterns.

T he fundamental design pattern in CSS is the Box Model . The Box Model defines how elements are rendered as boxes. There are six main types of boxes: inline, inline-block, block, table, absolute, and floated. A browser renders each element as one of these boxes. Some elements are rendered in a variation of one of these boxes, such as a list item or table cell. For example, list-item is a block box with an inline marker automatically created by the browser, and table-cell is a block box that does not support margins.

T his is the second of three chapters on the Box Model. It shows how boxes can be sized, shrinkwrapped, and stretched. The previous chapter discusses the six main types of boxes: inline, inline-block, block, table, absolute, and floated. The next chapter discusses properties that style the box.

T his chapter shows how box model properties style the various types of boxes. These are basic design patterns. The Margin, Border, and Padding design patterns contain examples contrasting how each property works in each type of box. Their main purpose is to contrast in one place how the same property means different things in different contexts. When using this book as a reference, you may also want to refer to the Margin, Border, and Padding design patterns to determine which type of element, box, and property will do what you want.

T his is the first of three chapters on positioning. This chapter presents the CSS positioning models. Chapter 8 shows how to indent, offset, and align elements. Chapter 9 combines these techniques to create advanced positioning design patterns.

T his chapter shows how margins can offset and align elements. A stretched element is indented or outdented when one or more of its sides is displaced into or out of its container, changing the width or height of an element. A sized or shrinkwrapped element is offset when the entire element is shifted from its normal position without changing the height or width of an element. A sized or shrinkwrapped element is aligned when it is relocated to one of the sides of its container without changing its size and optionally offset from that side.

T his is the third of three chapters on positioning. It combines the positioning techniques of the previous two chapters into 12 design patterns that align and offset static and positioned elements to the left, center, right, top, middle, or bottom of its container while stretching, sizing, or shrinkwrapping them. This chapter focuses on static and absolute positioned elements.