Добавил:

fench Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Сумский государственный университет

Предмет:

Программирование

Файл:

Beginning ASP.NET 2

.0.pdf

Скачиваний:

Добавлен:

17.08.2013

Размер:

24.67 Mб

Скачать

☆

<<< < Предыдущая 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 7374 / 8074 75 76 77 78 79 80 > Следующая >>>

CSS and HTML Quick

Reference

This appendix provides a quick reference to CSS and HTML. It’s not meant to be an exhaustive and complete list of all HTML controls, their properties and the CSS properties, but rather to give the most common uses.

Styling Pages and Controls

You can style controls, or change their look and feel, in two ways: with properties of the

control or with Cascading Style Sheets (CSS). Ultimately, both achieve the same thing, making the control look how you want it to, but in practice they are very different. Both Visual Web Developer and Visual Studio 2005 use properties when setting the style for controls. For example, if you drop a GridView onto your page and autoformat it with the Autumn format you get:

<asp:GridView ID=”GridView1” runat=”server” BackColor=”White” BorderColor=”#CC9966” BorderStyle=”None” BorderWidth=”1px” CellPadding=”4”> <FooterStyle BackColor=”#FFFFCC” ForeColor=”#330099” />

<RowStyle BackColor=”White” ForeColor=”#330099” /> <PagerStyle BackColor=”#FFFFCC” ForeColor=”#330099”

HorizontalAlign=”Center” />

<SelectedRowStyle BackColor=”#FFCC66” Font-Bold=”True” ForeColor=”#663399”

Here the BackColor sets the background color, and BorderColor sets the color of the border. The same sort of thing applies to the style for parts of the control, such as the FooterStyle and

RowStyle.

Although the approach of including the individual style attributes works fine, there are some issues:

Appendix E

It makes the code hard to read. Not only is it more text to read through, but the properties aren’t always in a logical order. For example, on FooterStyle and RowStyle the BackColor and ForeColor are next to each other, but on the HeaderStyle there is a Font-Bold attribute between them.

There is extra text, bulking out the page. With lots of styling applied to lots of controls, the page size can increase, which can lead to performance degradation.

It’s hard to amend if you decide to change colors. AutoFormat works fine, but if you want custom colors you have to change each property individually.

CSS solves this problem by abstracting the actual styling away from the control, leaving the control with just a simple reference to the styles being used; this is the CssClass property for web controls or the class property for HTML controls. The GridView could now be as follows:

<asp:GridView ID=”GridView1” runat=”server” CssClass=”MyGrid”> <FooterStyle CssClass=”MyGridFooter” />

</asp:GridView>

Immediately you can see that this is easier to read. The class names can be anything you want, and it is best not to be control-specific, because CSS classes can be used across controls. For example, if the FooterStyle and RowStyle needed the same styling you could do the following:

Here the same style name has been used, allowing the centralization of the styling. Style names should also not contain things like color names. For example, don’t call a style TextRed just because it outputs text in red. What happens if you want to change that text from red to blue? You can simply change the style, but the class name would be misleading. Calling it TextHighlight is acceptable.

Creating Inline Styles

To create inline styles you use the <style> element, which is usually placed within the <head> element. For example:

<head>

<title>My Styled Page</title> <style>

styling goes here </style>

</head>

When using Master pages you have to put the styling in the Master page, because Content pages don’t allow a <head> element. Adding the style to the Master page is sensible though, because if all pages use the Master page, they automatically get the styles.

700

CSS and HTML Quick Reference

Linking Style Sheets to a Page

Another, and better, way to add styles is to use linked style sheets. In these cases the style sheet is created as a separate file (with a .css suffix) and linked to the page like so:

<head>

<title>My Styled Page</title>

The CSS is stored in site.css and the <link> element links this style sheet into the page at runtime. Another great advantage of linked style sheets is that they can be cached by the browser, so the first time a page is requested the style sheet is loaded and cached. Subsequent pages that use the same style sheet won’t need to reload it from the server because it’s already loaded.

CSS Inheritance

One of the core concepts of CSS is that inheritance is implicit in the styles. In many ways the concept is the same as inheritance in classes, in which a child class can inherit features from its parent. CSS works the same way. This allows styling to be applied at the top level and inherited by contained controls. For example, if you defined the paragraph tag (<p>) to have blue text like so:

p {

color: blue;

}

Any child tags would inherit that style, so:

<p>Hello everyone. I’m a paragraph with a <b>bold</b> word.</p>

The paragraph would appear in blue, including the bold word, because it inherits styles from the parent. A bold tag not inside a paragraph would not be blue, so:

The first line would be bold only, whereas the second line would be blue, including the bold word. The <b> tag changes its style depending upon context.

The technique of inherited styles reduces the amount of styling that needs to be done, and is especially useful for setting default fonts and font sizes.

CSS Styles

Whichever method you use to add CSS styles, the styles themselves are the same, and are best seen by an example. Take the example of blue text on a paragraph. The style could be as follows:

color: blue;

font-weight: bold;

}

701

Appendix E

Every paragraph would now appear in bold blue because this style sets the style for the <p> element. Only the element name is used, and the angled brackets aren’t included. So p defines the element for which the style applies, and the styling is surrounded by curly braces. Styles appear as a list separated by semicolons — styles are context independent, so they can be all on one line or on separate lines. Likewise, the curly braces can be on separate lines.

In this example two style properties are set, and the style is separated from the value by a colon. The first, color, defines the color of the text, and its value is set to blue. The second, font-weight, defines the weight of the font — how heavy it looks — and this is set to bold.

This technique allows styles to be set for HTML elements, and is typically used for the base elements. For example, the Wrox United style sheet defines the following:

html, body { background-color: #fff; color: #000;

font: normal 90%/1.8em ‘Lucida Grande’, Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;

margin: 0;

}

h1 {

font-size: 1.8em; font-weight: bold; margin-top: 0em; margin-bottom: 0em; color: #a83930;

}

h2 {

font-size: 1.6em;

margin: 1.0em 0em 1.0em 0em; font-weight: bold;

color: #a83930;

}

h3 {

font-size: 1.2em;

margin: 1.0em 0em 1.0em 0em; font-weight: bold;

color: #a83930;

}

font-size: 1.1em; line-height: 1.8em;

margin: 1.1em 0em 1.1em 0em;

text-align: left;

}

This defines the styles for the html and body elements, which due to inheritance become the default for the rest of the page. Next are the headings and then the paragraph. The colors are described in the “Colors” section later in the appendix.

702

CSS and HTML Quick Reference

CSS Sizes

One thing you’ll have noticed in the previous style sheet is the use of em as a size, for both fonts and margins. There are many ways of sizing things, including points, pixels, inches, and percentages or for fonts, predefined sizes. One of the problems with defining sizes is that they mean different things to different people, especially if they use different browsers or different platforms (get used to that word; I’m going to use it a lot!). The sizings you can use are as follows:

Points (pt), which are a unit of print rather than a unit of the screen. Different browsers render the same point size differently, giving different font sizes.

Pixels (px), which represent an individual pixel on the screen. This again depends on the platform and screen, because they define how many pixels per inch there are. The biggest drawback with pixels is that they are not user scalable. For example, in Internet Explorer you can select Text Size from the View menu and change the size of the text being browsed, but if the page designer used pixels, you have no way to resize the text.

Physical units (in, cm, mm), which is a physical size. This again gives different results on different sized screens.

Named sizes, such as small, medium, large, x-large. These provide relative sizes, with small being smaller than medium, and so on.

Percentages (%), which define the size as a percentage of the default size (medium). So a font size of 200% is twice the size of the default size.

Ems (em), which represent the default font setting. Ems are user resizable. 1 em represents one unit of the default font size.

In the Wrox United application, ems have been used because they provide the best flexibility, and are suitable for user resizing, which allows users with visual impairments to change the size of the text. You may read much on the pros and cons of setting sizes for fonts, but as Frog Box Design (who did the CSS and images for the Wrox United site) says:

We use relative sizes and em units because they scale better for people using larger fonts, but we do set a relative percentage size, too.

Percentages are particularly useful when defining the width of block elements. For example, a width of 100% means the element will be the full width of its parent element. This is useful for things like grids where you want them to be the full width of the screen.

Oh, and I’ve now finished with all the difference stuff, so you can relax again.

Fonts

Deciding on which fonts to use can make a big difference to the readability of your site, because certain fonts are easier to read on the screen than others. You can define many different aspects of the font including the style (normal, bold, and so forth), the size, and the family. In the Wrox United style sheet the main font is defined as follows:

font: normal 90%/1.8em ‘Lucida Grande’, Verdana, Geneva, Lucida, Helvetica, Arial,

sans-serif;

703

Appendix E

This has three parts:

The style, which is normal.

The size, which is 90%/1.8em. This means a font size of 90% and a line height of 1.8em (1.8 times the normal font size), giving us nice spacing between the lines. The size of the font isn’t directly related to the line height, and this declaration is a shortcut that allows us to specify the two at the same time.

The family, which defines the fonts to be used, if they are available. If a font is not available on the browser, the next in line is tried. Here Lucida Grande will be tried first, Verdana next, and so on. Fonts that have spaces in their names must have quotes around them.

These three parts could also have been defined like this:

font-style: normal; font-size: 90%;

font-family: ‘Lucida Grande’, Verdana, Geneva, Lucida, Helvetica, Arial, sansserif;

line-height: 1.8em;

The single-line form is just a shortcut.

Colors

Colors can be predefined or you can specify the red, green, and blue values. For example, for blue text any of the following could be used:

color: blue; color: #0000ff;

color: rgb(0, 0, 255) color: rgb(0%, 0%, 100%);

They all produce the same result. The first uses a defined name, whereas the second uses a hexadecimal notation where 00 represents no color and ff represents full colors. There are two digits for the red component, two for green, and two for blue. So 0000ff means:

00 for red, so no red

00 for green, so no green

ff for blue, so full blue

Using rgb allows you to specify this either in decimal (0 is no color and 255 is full color), or as percentages.

You might also see a shortcut form of the hexadecimal notation consisting of only three digits. This can be used if the two digits for a color part are the same. So blue could be 00f.

704

CSS and HTML Quick Reference

CSS Selectors

Earlier you saw how a paragraph could be styled:

color: blue; font-weight: bold;

}

The p part is defined as the selector, and this can be an element, an element ID, or a class name, and they way they are defined is different. To define an element ID you place a hash sign (#) before the selector:

#header { height: 100px;

padding: 0 10px 0 10px;

. . .

}

This would then correspond to an element with that ID:

ID-based selectors can only be used by a single element because IDs have to be unique, so this should be reserved for things that will only ever appear once. In the Wrox United style sheet this is used for items such as the header, sidebar, and so on.

To use a class name, you precede the selector with a period:

.title {

color: #a83930; text-align: center;

. . .

}

This matches a CssClass property for a web server control, or the class property for an HTML control:

<asp:Label id=”Label1” runat=”server” CssClass=”title”>My Page</asp:Label>

Because the class name can be used by multiple controls, you should use it for common styling across elements. The named selector can be designed to apply to all elements (as in the previous code), or just selected elements:

div.title { color: #a83930;

}

Here the selector only applies if a div element is given a class of title; any other element would not get the style. The following line will be styled:

<div class=”title”>This will be styled</div>

705

Appendix E

Whereas this line will not be styled:

<span class=”title”>While this will not be styled</span>

Selector names are case sensitive.

Multiple Selectors

You can also define multiple selectors to have the same style by having them as a comma-separated list at their definition:

span, div { color: #a83930;

}

This defines both the span and div elements to have the same style. Multiple selectors work with elements, ID-based and class-named forms.

Contextual Selectors

Selectors can also be contextual, meaning that they can be defined to only apply depending on the context in which the element appears. For example, what if you wanted to style list elements (li and ul), but only if they appear within the navigation bar at the left of the screen (#nav)? Your style could be

#nav li {

color: #a83930;

}

#nav ul {

color: #a83930;

}

With these rules the li and ul elements will only be styled if they are within a control with an ID of #nav. Outside of the #nav control no style will be applied.

Floating Elements

Sometimes you want to position elements to the left or right of others, and can’t achieve this with placing them one after another, because HTML is a flow-based layout, and elements are placed in their declaration order. One way around this is fixed position, which positions elements directly, but this has problems with users resizing their browser window, because the positioned elements may be outside the new window size.

An easy way is to use floating elements, and although they are restricted in what they do, they can often provide the solution. For example, on the Wrox United home page there are news items, and the date of the item is shown at the right of the page. Resizing the browser keeps this at the right, because we have floated it to the right. The style for this is as follows:

.newsDate {

font: normal 0.9em/0.9em ‘Lucida Grande’, Verdana, Geneva, Lucida, Helvetica, Arial, sans-serif;

float: right; color: #666666;

}

706

CSS and HTML Quick Reference

Ignore the font and color; the important point is the float element:

float: right;

This states that the element should be placed at the right of its containing control. So however wide the parent control is, the news date will always appear at its right. Elements can also be floated to the left of others, and if you want to learn more about floating elements it’s best to consult a specialized CSS book, but details of some are included at the end of this appendix.

Pseudo Classes

In addition to standard classes, some special classes (called pseudo classes) apply to actions rather than the anchor element. These allow specific classes to be applied to links. For example, consider the following:

a:hover { text-decoration: none;

}

#nav a:hover {

text-decoration: none; color: #a83930; background-color: #fdea12;

}

Here the hover pseudo class is used, which indicates the style to be applied when the cursor is hovering over a link. The first class sets the text-decoration to none, which removes the underline from links, but only when they are hovered over. For links in the navigation area though, additional styling is done.

In addition to hover, three pseudo classes exist for links:

link defines how an unclicked and unvisited link should be styled.

visited defines how a link that has been visited should be styled.

active defines how a currently active line should be styled.

Other pseudo classes exist, but support for these in Internet Explorer is limited, so coding to use them always requires a lot of effort. For that reason we haven’t described them here.

CSS Reference

The following table describes the CSS properties, but does not include the aural properties for screen readers. These should be supported on most modern browsers.

707

Appendix E

Property	Description

background	Changes the background color and image.
background-attachment	Determines how background images should scroll.
	background-attachment supports three values:
	scroll, fixed, and inherit. The default value is
	scroll, which indicates that images scroll.
	Specifying fixed means that images are fixed.
	Specifying inherit indicates that images inherit
	behavior from their parent.
background-color	Defines the background color.
background-image	Defines the image to show in the background of
	the element.
background-position	Defines the position of a background image.
	Defined as two values to specify the horizontal and
	vertical positioning. These can be top, center, or
	bottom for vertical alignment; left, center, or
	right for horizontal alignment; percentages; or
	fixed values.
background-repeat	Indicates whether a background image is repeated
	and can be repeat, repeat-x, repeat-y, no-
	repeat, or inherit.
border	Defines the properties of the border of an element.
border-color	Defines the color of a border.
border-collapse	Indicates whether borders in tables collapse onto
	each other. Can be one of collapse, separate, or
	inherit.
border-spacing	Defines the amount of space between borders in a
	table.
border-style	Defines the style of a border, and can be one of
	none, dotted, dashed, solid, double, groove,
	ridge, inset, outset, or inherit.
border-top	Define the properties of a single border of an
border-bottom	element.
border-left
border-right
border-top-color	Define the color for an individual border of an
border-bottom-color	element.
border-left-color
border-right-color

708

<<< < Предыдущая 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 7374 / 8074 75 76 77 78 79 80 > Следующая >>>

Соседние файлы в предмете Программирование

#
17.08.201312.53 Mб64AutoCAD 2005 For Dummies (2004).pdf
#
17.08.20133.24 Mб54Beating IT Risks.pdf
#
17.08.201312.47 Mб105Beginning ActionScript 2.0 2006.pdf
#
17.08.20139.67 Mб255Beginning Algorithms (2006).pdf
#
17.08.201311.68 Mб60Beginning Apache Struts - From Novice To Professional (2006).pdf
#
17.08.201324.67 Mб23Beginning ASP.NET 2.0.pdf
#
17.08.201317.27 Mб83Beginning JavaScript With DOM Scripting And Ajax - From Novice To Professional (2006).pdf
#
17.08.20139.7 Mб20Beginning Mac OS X Tiger Dashboard Widget Development (2006).pdf
#
17.08.201311.23 Mб24Beginning Microsoft Word Business Documents - From Novice To Professional (2006).pdf
#
17.08.20134.49 Mб42Beginning Object-Oriented ASP.NET 2.0 with VB.NET From Novice to Professional.pdf
#
17.08.20132.9 Mб60Beginning Perl Web Development - From Novice To Professional (2006).pdf