Professional ASP.NET 3.5 in C# and Visual Basic Part 93 pot

Listing 18-9: Creating block box elements Lorem ipsum dolor sit amet, consectetuer adipiscing elit.. If you have elements whosedisplayproperty is set tonone, or an element whosevisibili

Trang 1

The CSS Box Model

A core element of positioning in CSS is the box model The box model defines how every element in

HTML is treated by the browser as a rectangular box The box comprises different parts, including

margins, padding, borders, and content Figure 18-7 shows how all of these elements are combined to

form the box

Figure 18-7

All of the separate elements that make up the box can influence its position within the Web page, and

unless otherwise specified, each is given a default value of zero The height and width of the element

is equal to the height and width of the outer edge of the margin, which as you can see in the previous

image, is not necessarily the height and width of the content

HTML provides you with two different types of boxes, the block box and the inline box Block boxes are typically represented by tags such as<p>,<div>, or<table> For block boxes, the containing block is used to determine the position of its child blocks Additionally, block boxes can contain only inline or

block boxes, but not both

Listing 18-9 shows an example of a page containing a single parent block and two child block elements

Listing 18-9: Creating block box elements

<div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

<div>

Donec et velit a risus convallis porttitor

Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna.\

</div>

<div>Duis lobortis felis in est Nulla eu velit ut nisi consequat vulputate.</div>

Vestibulum vel metus Integer ut quam Ut dignissim, sapien sit amet

malesuada aliquam,

quam quam vulputate nibh, ut pulvinar velit lorem at eros

Sed semper lacinia diam In

faucibus nonummy arcu Duis venenatis interdum quam Aliquam ut dolor id leo

scelerisque convallis Suspendisse non velit Quisque nec metus

Lorem ipsum dolor sit

amet, consectetuer adipiscing elit Praesent pellentesque interdum magna

</div>

The second box type is the inline box Inline boxes are typically represented by tags such asB,I, and

SPANwell as and actual text and content Listing 18-10 shows how the previous listing can be modified to include inline boxes

Trang 2

Listing 18-10: Creating inline box elements

<div>

Lorem <b>ipsum</b> dolor sit amet, consectetuer adipiscing elit

<div>

Donec et velit a risus <b>convallis</b> porttitor

Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna

</div>

<div>Duis lobortis felis in est

<span>Nulla eu velit ut nisi consequat vulputate.</span>

</div>

<i>Vestibulum vel metus.</i> Integer ut quam Ut dignissim, sapien sit

amet malesuada

aliquam, quam quam vulputate nibh, ut pulvinar velit lorem at eros

Sed semper lacinia

diam In faucibus nonummy arcu Duis venenatis interdum quam

Aliquam ut dolor id leo

scelerisque convallis Suspendisse non velit Quisque nec metus

Lorem ipsum dolor sit

amet, consectetuer adipiscing elit Praesent pellentesque interdum magna

</div>

Rendering this page results in each block beginning a new line Figure 18-8 shows the markup rendered

in the browser

Figure 18-8

The Visual Studio design surface can help you get a clear picture of the layout of adivas well When

you select an individual div element, the design surface highlights the selected element, as shown in

Figure 18-9

At the beginning of this section, I stated that a block will always container either inline or block boxes,

but it’s interesting to note that in this case, because the first line of text contains an inline box, and the

next contains a block box, it looks like the parent div is violating that rule However, what is actually

Trang 3

happening is that the browser automatically adds an anonymous block box around the first line of text

when the page is rendered Figure 18-10 highlights the block boxes as the browser sees them

Figure 18-9

Figure 18-10

You can explicitly set which box behavior an element will exhibit by using thepositionattribute For

example, setting thepositionproperty on the second div, as shown here, results in the layout of the

content changing

<div style="display:inline;">Donec et velit a risus <b>convallis</b> porttitor

Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna.</div>

Figure 18-11 shows how adding this property changes the rendering of the markup on the Visual Studio design surface You can see that now, rather than the element being displayed on a new line, its content

is simply continued from the previous block

You can also set the display property tononeto completely remove the element from the Web page

layout If you have elements whosedisplayproperty is set tonone, or an element whosevisibility

property is set tohidden, Visual Studio gives you the option of showing or hiding these elements on its design surface

Trang 4

Figure 18-11

As shown in Figure 18-12, there are two options on the View menu that allow you to toggle the design

surface visibility of elements with these properties set

Figure 18-12

Positioning CSS Elements

CSS provides you with three primary positioning mechanisms: Normal, Absolute, and Relative Each

type offers a different behavior you can use to lay out the elements in your page To specify the type

of layout behavior you want an element use, you can set the CSSpositionproperty Each element can

have its own position property set, allowing you to use multiple positioning schemes within the same

Web page

Normal Positioning

Using Normal positioning, block items flow vertically, and inline items flow horizontally, left to right

This is the default behavior, and is used when no other value is provided for the position property

Figure 18-13 demonstrates the layout of four separate blocks using Normal positioning

As you can see, each block item flows vertically as expected

Trang 5

Figure 18-13

Relative Positioning

Using Relative positioning, elements are initially positioned using Normal layout The surrounding boxes are positioned and then the box is moved based on its offset properties:top,bottom,left, andright

Figure 18-14 shows the same content as in the prior section, but now the third block box has been styled

to use Relative positioning Visual Studio is helping you out by providing positioning lines for the block, showing you that its top offset is being calculated based on the normal top position of the block, and

the left offset from the normal left position Visual Studio even lets you visually position the block by

grabbing the element’s tag label and dragging it over the design surface

Figure 18-14

Trang 6

As you position the element on the design surface, the element’s top and left values are being updated.

You will end up with an element looking something like this:

Donec et velit a risus <b>convallis</b> porttitor Vestibulum nisi metus,

imperdiet sed, mollis condimentum, nonummy eu, magna

</div>

If you are using relative positioning and have both left and right offsets defined, the right will generally

be ignored

Absolute Positioning

Absolute positioning works much like relative positioning, except instead of an element calculating its

offset position based on its position in the normal positioning scheme, the offsets are calculated based

on the position of its closest absolutely positioned ancestor If no element exists, then the ancestor is the

browser window itself

Figure 18-15 shows how blocks using absolute positioning are displayed on the Visual Studio design

surface As you can see, unlike the display of the relative positioned element shown in the previous

section, this time the positioning lines extend all the way to the edge of the design surface This is because

the block is using the browser window to calculate its offset

Figure 18-15

As with relative blocks, you can use the element’s tag label to position the element on the page, and

Visual Studio will automatically update the offset values The block in Figure 18-15 would output an

element that looks something like this:

Donec et velit a risus <b>convallis</b> porttitor Vestibulum nisi metus,

imperdiet sed, mollis condimentum, nonummy eu, magna

</div>

Floating Elements

Another option for controlling the position of elements using CSS is thefloatproperty The float

property allows you to float an element to the left or right side of a block The floating block is

Trang 7

positioned vertically as it would normally be in normal position, but horizontally shifted as far left or

right as possible Listing 18-11 demonstrates floating the same block used in previous samples in

this section

Listing 18-11: Floating a block element to the right

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

</div>

Donec et velit a risus <b>convallis</b> porttitor Vestibulum nisi metus, imperdiet sed, mollis condimentum, nonummy eu, magna

</div>

<div>Duis lobortis felis in est Nulla eu velit ut nisi consequat vulputate.</div>

<div>

Vestibulum vel metus Integer ut quam Ut dignissim, sapien sit amet malesuada

aliquam, quam quam vulputate nibh, ut pulvinar velit lorem at eros Sed semper

lacinia diam In faucibus nonummy arcu Duis venenatis interdum quam

Aliquam ut

dolor id leo scelerisque convallis Suspendisse non velit

Quisque nec metus Lorem

ipsum dolor sit amet, consectetuer adipiscing elit

Praesent pellentesque interdum

magna

</div>

</form>

</body>

</html>

The block has been modified to include thefloatproperty in its style When this is done, Visual Studio correctly positions the element to the far right side of the page This is shown in Figure 18-16

Figure 18-16

The !important Attribute

As you saw earlier in this chapter, the browser will choose to apply the closest style to the element,

which can mean that properties of other applied styles may be overridden As with many other rules

Trang 8

in CSS, this too is not absolute CSS provides a mechanism to circumvent this called the!important

attribute Properties that have this attribute applied can prevent other CSS rules from overriding its

value Listing 18-8 showed how thefont-familyproperty can be overridden You can see how the

!importantattribute works by modifying this sample to use the attribute This is shown in Listing 18-12

Listing 18-12: Using the !important attribute to control style overriding

p { font-family:Arial !important;

}

p { font-family: Courier New;

}

</style>

</head>

<body>

<p>Lorum Ipsum</p>

</form>

</body>

</html>

In this case, rather than the paragraph being shown in Courier New, it will use the Arial font because it

has been marked with the!importantattribute

Working with HTML and CSS in Visual Studio

Working with HTML and CSS to create compelling Web site designs can be quite daunting Thankfully,

Visual Studio provides you with a variety of tools that help simplify page layout and CSS management

As you are probably already familiar with, Visual Studio includes a great WYSIWYG design surface In

prior versions of Visual Studio, this design surface used Internet Explorer to generate the design view,

but with the release of Visual Studio 2008, Microsoft has completely rewritten the design surface to be

completely independent of Internet Explorer

In Visual Studio, when the Design View has focus, two additional menus become available: the Format

menu and the Table menu This is shown in Figure 18-17

Figure 18-17

Trang 9

The Table menu, as you might guess, includes a set of tools that allow you to Insert, Delete, Select, and Modify the HTML Tables in your Web page Selecting the Insert Table option from the Table menu opens the Insert Table dialog box shown in Figure 18-18, which allows you to easily specify properties of your table You can define the number of table rows and columns, the cell padding and spacing, and border

attributes, and when you click OK, Visual Studio automatically generates the appropriate table HTML in your Web page

Figure 18-18

When you select an existing table in your Web page, the Table menu lets you insert and delete table rows, columns, and cells The Modify menu option also allows you to split an existing cell into two separate

cells, merge two cells into a single cell, and configure row and column sizing

The Format menu includes basic element formatting options such as accessing the elements CSS

class; setting fore and background colors, font, and position; and converting content to different types

of lists

Trang 10

Working with CSS in Visual Studio

Visual Studio 2008 offers a variety of new tools specifically designed to make working with CSS a much

better experience When working with the Visual Studio design surface, it’s easy to create new styles for

your Web page You can either right-click on any object and select the New Style option from the content

menu, or select the New Style option from the Format menu Either option opens the New Style dialog

box, shown in Figure 18-19

Figure 18-19

This dialog box makes creating a new style a snap To start, select the type of Selector you want to create

from the Selector drop-down list The list includes all of the available element types, or if you want to

create a Class or ID selector, simply type the Style name into the Selector combo box

Next, you need to select where you want to create the style from the Define In combo box You can select

Current Page to create an internal style sheet, New Style Sheet to create a new external style sheet file, or

Định dạng
Số trang	10
Dung lượng	558,92 KB