<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***

Transcription

1 Chapter 7 Using Advanced Cascading Style Sheets HTML is limited in its ability to define the appearance, or style, across one or mare Web pages. We use Cascading style sheets to accomplish this. Remember that a style is a rule that defines the appearance of an element on a Web page. A style sheet is a series of rules that defines the style for a Web page or an entire Web site. The three types of CSS are inline, embedded, and external. Embedded style sheet to handle body style, link style, and adding a drop-down menu <style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page*** a #menubar {text-decoration: none; color: #100375} ***set color for links and turns underline off*** {border-top: 4px solid #e5e5e5; border-right: 4px solid #b2b2b2; border-bottom: 4px solid #b2b2b2; border-left: 4px solid #e5e5e5; background-color: #eeeeee; color: #100375; height: 23px} ***you set the four borders of an element named menubar that is used in the <div> tag. All borders are set to 4px solid style. Color of left and top are the same color. Color of the bottom and right are the same color. The background color of this box is set and so is the text color. The height of the box is 23 pixels..menu {float: left; padding: 0.1em 3em 0.1em 0.5em; cursor: default} ***sets the styles for a class named menu. It left aligns the text. The padding property uses shorthand property code. What is an em? See table on next page. Cursor: default allows you to see a cursor.

2 .menu ul {display: none; position: absolute; background-color: #e5e5e5; color: #100375; list-style: none; margin: 0.1em 0 0 0; padding: 0} ***display: none at start up the unordered lists will not display. Position: absolute menu text remains constant and does not move. List-style: none turns of the disc bullet. Shorthand property statement for margins..menu ul li {display: block; font-size: small; padding: 0.2em} ***display: block the ul element will generate a block box div.menu:hover ul div.menu ul li:hover {margin: 0; padding: 0; display: block; border-bottom:.15em solid #b2b2b2; border-left:.15em solid #b2b2b2} {background-color: #cccccc} --> div.content {margin-left: 20px; margin-right: 20px; padding-top: 5%; color: #100375} ***gives style for paragraph of text on web page.

3 </style> Code for the navigation (menu) bar <div id="menubar"> <div id="menu1" class="menu">travel <li><a href="greece.html">greece</a></li> <li><a href="pompeii.html">pompeii</a></li> <div id="menu2" class="menu">nature <li><a href="cactus.html">cactus</a></li> <li><a href="flowers.html">flowers</a></li> <div id="menu3" class="menu">family <li><a href="group.html">group</a></li> <li><a href="individuals.html">individuals</a></li> The box model describes the structure of the elements that are displayed on the Web page. Once the box is positioned, you can control its appearance by manipulating its padding, borders, and margins. The margin specifies the space the space between the element and the other content on the Web page. The border is what surrounds the element content. The padding is the space between the content of the element and the box border. These four elements determine how the element content is displayed in the browser.

4 Creating a Pop-up The below code is from Greece.html. It allows pop-ups. (Hovers over a small image and display a large image) <div id="sizes"> <img class="small" src="greece1.jpg" width="150" height="110" alt="greece 1" /> <img class="large" src="greece1.jpg" width="150" height="110" alt="greece 1" /></a></p> <img class="small" src="greece2.jpg" width="150" height="110" alt="greece 2" /> <img class="large" src="greece2.jpg" width="150" height="110" alt="greece 2" /></a></p> <img class="small" src="greece3.jpg" width="150" height="110" alt="greece 3" /> <img class="large" src="greece3.jpg" width="150" height="110" alt="greece 3" /></a></p> The following is the external style sheet used to create pop-ups. img.small {border: none; text-decoration: none} /* display no border around images on the left */ div#sizes a img.large {height: 0; width: 0; border-width: 0} /* hide the larger image by setting its height and width to zero */ div#sizes a:hover img.large {position: absolute; top: 68px; left: 170px; height: 389px; width: 500px; border: none} /* make the larger image appear in the same space as the frame on the right when a user hovers over

5 one of the smaller images on the left side of the web page */ p {margin-bottom: 26px; margin-top: 26px; font-size: small; font-family: Verdana, Arial, sans-serif; color: #100375} /* add bottom and top margins to p elements so they are somewhat aligned with the large images */ Creating an External Style Sheet for Printing A page box is a rectangular region that contains two areas: the page area and the margin area. The page area includes the elements (or boxes) laid out on the page. The margin area surrounds the page area; page margin area is transparent. Web developers can specify the margins of a page box inside rule. rule contains the followed by an optional page selector, followed by a block of {margin: 0.5in} /* set printed page with half-inch margins */ #menubar {display: none} /* do not print the menubar that displays at the top of the Web page */.content {text-align: left; font-size: 12pt; font-family: sans-serif}.content img (border-width: 0px; width: 8.778in; height: 2.444in} /* specifies styles set for content class */