Добавил:

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

Вуз:

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

Предмет:

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

Файл:

Beginning ASP.NET 2.0 With CSharp (2006) [eng]

.pdf

Скачиваний:

Добавлен:

16.08.2013

Размер:

20.33 Mб

Скачать

☆

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

Appendix E

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 as follows:

#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. You 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 to do this 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 it has been floated 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;

}

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

float: right;

698

CSS and HTML Quick Reference

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. 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.

There are other pseudo classes, but support for these in Internet Explorer is limited, so coding to use them always requires a lot of effort. For that reason, they aren’t described here.

CSS Reference

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

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.
	Table continued on following page

699

Appendix E

Property	Description

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. It is 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. It
	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 element.
border-bottom
border-left

border-right

border-top-color

Define the color for an individual border of an element.

border-bottom-color

border-left-color

border-right-color

border-top-style

Define the style for an individual border of an element.

border-bottom-style

border-left-style

border-right-style

700

		CSS and HTML Quick Reference

	Property	Description

	border-top-width	Define the width for an individual border of an element.
	border-bottom-width
	border-left-width
	border-right-width
	border-width	Defines the width of the border for an element.
	bottom	Defines the distance to offset an element from the bottom edge
		of its parent element.
	caption-side	Defines where a caption is placed in relation to a table, and can
		be one of top, bottom, left, right, or inherit.
	clear	Clears any floating in action, and can be one of none, left,
		right, both, or inherit.
	clip	Defines how much of an element is visible and can be a rectan-
		gle rect[n,n,n,n], auto, or inherit.
	color	Defines the foreground color of an element.
	content	Defines the type of content and how it is to be displayed.
	counter-increment	Defines the property and amount for auto-incrementing lists.
	counter-reset	Resets the numerical value of auto-incrementing lists.
	cursor	Sets the shape of the cursor when over the element. It can be
		one of auto, crosshair, default, pointer, move, e-resize,
		ne-resize, nw-resize, n-resize, se-resize, sw-resize,
		s-resize, w-resize, text, wait, help, inherit, or a URL
		to an image.
	direction	Indicates the direction for letters, and can be one of ltr (left to
		right, the default), rtl (right to left), or inherit.
	display	Determines how to display an element, and can be one of:
		block, inline, list-item, none, or inherit.
	empty-cells	Defines how empty table cells are shown, and can be one of
		hide, show, or inherit.
	float	Indicates how this element floats within the parent element,
		and can be one of left, right, none, or inherit.
	font	Defines the attributes of the font for the element.
	font-family	Defines the font family for text.
	font-size	Defines the size of the font for text.
	font-size-adjust	Defines the aspect value for a font element.
		Table continued on following page

701

Appendix E

Property	Description

font-stretch	Defines how expanded or condensed a font is.
font-style	Defines the style of the font, and can be one of italic,
	normal, oblique, or inherit.
font-variant	Defines whether the font is displayed in capital letters, and can
	be normal, small-caps, or inherit.
font-weight	Defines the thickness of the font, and can be absolute weight
	values (100 to 900 in steps of 100), bold or normal, bolder or
	lighter, or inherit.
height	Defines the height of an element.
left	When using absolute positioning, this defines how far from
	the left edge of the parent the element is placed.
letter-spacing	Defines the amount of space between letters.
line-height	Defines the height between lines.
list-style	Defines the properties for list elements.
list-style-image	Defines the image to be used as the marker for a list element.
list-style-position	Defines the positioning of the list relative to the list itself, and
	can be one of inside, outside, or inherit.
list-style-type	Defines the type of marker for the list, and can be one of
	circle, decimal, disc, square, lower-roman, upper-
	roman, lower-alpha, upper-alpha, none, or inherit.
margin	Defines the amount of space between the border and the par-
	ent element.
margin-top	Define the amount of space between the border and the parent
	element for an individual side of an element.
margin-bottom
margin-left
margin-right
marker-offset	Defines the distance between the border of a list marker and
	the list itself.
marks	Defines whether crop marks are shown, and can be one of
	crop, cross, both, none, or inherit.
max-height	Define the maximum height and width of an element.
max-width
min-height	Define the minimum height and width of an element.
min-width

702

		CSS and HTML Quick Reference

	Property	Description

	orphans	Defines the minimum number of lines or paragraph that must
		be left at the bottom of a page.
	outline	Defines the properties of a button or form field that has focus.
	outline-color	Defines the color of a button or form field that has focus.
	outline-style	Defines the border style of a button or form field that has
		focus.
	outline-width	Defines the border width of a button or form field that has
		focus.
	overflow	Defines the visibility of content if it doesn’t fit within the ele-
		ment, and can be one of auto, hidden, scroll, visible, or
		inherit.
	padding	Defines the distance between one or more sides of the content
		area and its border.
	padding-top	Define the distance between a side of the content area and its
		border.
	padding-bottom
	padding-left
	padding-right
	page	Defines the page type (such as regular or landscape) for
		printed content.
	page-break-after	Define how the browser should insert page breaks, and can be
		one of always, auto, avoid, left, right, or inherit.
	page-break-before
	page-break-inside	Defines whether page breaks split an element across pages,
		and can be auto, avoid, or inherit.
	position	Defines how an element is positioned relative to the flow of
		the document, and can be absolute, fixed, relative,
		static, or inherit.
	quotes	Defines the type of quotation mark to be used within embedded
		quotes.
	right	Defines the distance an element should be from its parent’s
		right edge.
	size	Defines the size of the printing area in a page.
	table-layout	Defines how the width of table cells is calculated, and can be
		auto, fixed, or inherit.
	text-align	Defines the alignment of text, and can be one of center,
		justify, left, right, or inherit.
		Table continued on following page

703

Appendix E

Property	Description

text-decoration	Defines the decoration on text, and can be one of blink,
	line-through, none, overline, underline, or inherit.
text-indent	Defines the amount of space to indent the first line of a
	paragraph.
text-shadow	Defines the amount of shadow to apply to text.
text-transform	Defines the casing to use on text, and can be one of
	capitalize, lowercase, none, uppercase, or inherit.
top	Defines the distance between an element and its parent’s top
	edge.
Unicode-bidi	Defines Unicode text as having bidirectional characteristics.
vertical-align	Defines the vertical alignment of the element.
visibility	Defines how, or if, the element is shown, and can be one of
	collapse, hidden, visible, or inherit.
white-space	Defines how white space should be treated, and can be one of
	normal, nowrap, pre, or inherit.
widows	Defines the minimum number of lines that must be left at the
	top of a page.
width	Defines the width of the element.
word-spacing	Defines the distance between words.
z-index	Defines the depth of an element to allow overlapping elements.

Common HTML Tags by Categor y

Following is a list of some of the most commonly used HTML tags by category. When you know what you want to do, but you’re not sure which tag will achieve the desired effect, use the following reference tables to put you on the right track.

Document Structure

Tag	Meaning

<! >	Allows authors to add comments to code.
<!DOCTYPE>	Defines the document type. This is required by all HTML
	documents.
<base>	Specifies the document’s base URL — its original location. It’s
	not normally necessary to include this tag. It can only be used
	in the <HEAD> section.

704

		CSS and HTML Quick Reference

	Tag	Meaning

	<body>	Contains the main part of the HTML document.
	<comment>	Allows authors to add comments to code.
	<div>	Defines a block division of the <BODY> section of the document.
	<head>	Contains information about the document.
	<html>	Signals the beginning and end of an HTML document.
	<link>	Defines the current document’s relationship with other
		resources. Used in the <HEAD> section only.
	<meta>	Describes the content of a document.
	<nextid>	Defines a parameter in the <HEAD> section of the document.
	<span>	Defines an area for reference by a style sheet.
	<style>	Specifies the style sheet for the page.

Titles and Headings

Tag	Meaning

<h1>	Heading level 1.
<h2>	Heading level 2.
<h3>	Heading level 3.
<h4>	Heading level 4.
<h5>	Heading level 5.
<h6>	Heading level 6.
<title>	Defines the title of the document.

Paragraphs and Lines

Tag	Meaning

<br>	Line break.
<center>	Centers subsequent text and images.
<hr>	Draws a horizontal rule.
<nobr>	Prevents a line of text breaking.
<p>	Defines a paragraph.
<wbr>	Inserts a soft line break in a block of <NOBR> text.

705

Appendix E

Text Styles

Tag	Meaning

<address>	Indicates an address. The address is typically displayed in italics.
<b>	Emboldens text.
<basefont>	Sets font size to be used as default.
<big>	Changes the physical rendering of the font to one size larger.
<blockquote>	Formats a quote — typically by indentation.
<cite>	Renders text in italics.
<code>	Renders text in a font resembling computer code.
<dfn>	Indicates the first instance of a term or important word.
<em>	Emphasized text — usually italic.
<font>	Changes font properties.
<i>	Defines italic text.
<kbd>	Indicates typed text. Useful for instruction manuals and the like.
<listing>	Renders text in a fixed-width font.
<plaintext>	Renders text in a fixed-width font without processing any other
	tags it may contain.
<pre>	Preformatted text. Renders text exactly how it is typed —
	carriage returns, styles, and so forth, will be recognized.
<s> or <strike>	Strikethrough. Renders the text as deleted (crossed out).
<small>	Changes the physical rendering of a font to one size smaller.
<strong>	Strong emphasis — usually bold.
<style>	Specifies the style sheet for the page.
<sub>	Subscript.
<sup>	Superscript.
<tt>	Renders text in fixed width, typewriter-style font.
<u>	Underlines text. This is not widely supported at present, and is
	not recommended, because it can cause confusion with hyper-
	links, which also normally appear underlined.
<var>	Indicates a variable.

706

		CSS and HTML Quick Reference
Lists

	Tag	Meaning

	<dd>	Definition description. Used in definition lists with <DT> to
		define the term.
	<dir>	Denotes a directory list by indenting the text.
	<dl>	Defines a definition list.
	<dt>	Defines a definition term. Used with definition lists.
	<li>	Defines a list item in any type of list other than a definition list.
	<menu>	Defines a menu list.
	<ol>	Defines an ordered (numbered) list.
	<ul>	Defines an unordered (bulleted) list.
Tables

	Tag	Meaning

	<caption>	Puts a title above a table.
	<col>	Defines column width and properties for a table.
	<colgroup>	Defines properties for a group of columns in a table.
	<table>	Defines a series of columns and rows to form a table.
	<tbody>	Defines the table body.
	<td>	Specifies a cell in a table.
	<tfoot>	Defines table footer.
	<th>	Specifies a header column. Text will be centered and bold.
	<thead>	Used to designate rows as the table’s header.
	<tr>	Defines the start of a table row.
Links

	Tag	Meaning

	<a>	Used to insert an anchor, which can be either a local reference
		point or a hyperlink to another URL.
	<a href=”url”>	Hyperlink to another document, the location of which is specified
		by the url.
		Table continued on following page

707

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

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

#
16.08.201320.33 Mб84Beginning ASP.NET 2.0 With CSharp (2006) [eng].pdf
#
16.08.20134.97 Mб162Beginning CSharp Game Programming (2005) [eng].pdf
#
16.08.201318.66 Mб113Beginning Visual C++ 2005 (2006) [eng]-1.pdf
#
16.08.201318.66 Mб90Beginning Visual C++ 2005 (2006) [eng]-2.pdf
#
16.08.201318.66 Mб138Beginning Visual C++ 2005 (2006) [eng].pdf
#
16.08.201315.69 Mб148Build Your Own ASP.NET 2.0 Web Site Using CSharp And VB (2006) [eng]-1.pdf