Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
33 views

CSS

The document contains CSS code that defines styles for page elements including paragraphs, lists, and links. It also defines styles for multi-page layout using absolute positioning. The HTML page applies these styles to divide content across three absolutely positioned divs representing different "pages" within the same document.

Uploaded by

mu29032004
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

CSS

The document contains CSS code that defines styles for page elements including paragraphs, lists, and links. It also defines styles for multi-page layout using absolute positioning. The HTML page applies these styles to divide content across three absolutely positioned divs representing different "pages" within the same document.

Uploaded by

mu29032004
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Ch7border.

css

body {
color:#000000;
background-color:#ffffff;
font-family:arial, verdana, sans-serif;
font-size:12px;}

.solid {border-style:solid; border-color:#000000; border-width:1px;}


.doHed {border-style:doHed; border-color:#999999; border-width:2px;}
.dashed {border-style:dashed; border-color:#666666; border-width:3px;}
.double {border-style:double;}
.groove {border-style:groove;}
.ridge {border-style:ridge;}
.inset {border-style:inset;}
.outset {border-style:outset;}

<?xml version="1.0" ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiaonal//EN"
"hHp://www.w3.org/TR/xhtml1/DTD/xhtml1-transiaonal.dtd">
<html xmlns="hHp://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<atle>Borders</atle>
<link rel="stylesheet" type="text/css" href="ch7border.css" />
</head>
<body>
<p class="solid">This is a paragraph with a <code>solid</code> border</p>
<p class="doHed">This is a paragraph with a <code>doHed</code> border</p>
<p class="dashed">This is a paragraph with a <code>dashed</code> border</p>
<p class="double">This is a paragraph with a <code>double</code> border</p>
<p class="groove">This is a paragraph with a <code>groove</code> border</p>
<p class="ridge">This is a paragraph with a <code>ridge</code> border</p>
<p class="inset">This is a paragraph with an <code>inset</code> border</p>
<p class="outset">This is a paragraph with an <code>outset</code> border</p>
</body>
</html>
1
2
exercise1.css

body {
background-color:#ffffff;
font-family:arial, verdana, sans-serif;
font-size:12px;}

ul#contents {background-color:#d6d6d6;}

ul {
list-style:circle;
font-weight:bold;
padding-led:30px;
width:250px;}

ul ul {list-style:square;}

a:link {
color:#0033ff;;
text-decoraaon:none;}

a:visited {
color:#0066ff;
text-decoraaon:none;}

a:acave {
text-decoraaon:underline;}

a:link:hover {
color:#003399;
background-color:#e9e9e9;
text-decoraaon:underline;}

exercise1.html
3
<html>

<head>
<atle>Advanced CSS</atle>
<link rel="stylesheet" type="text/css" href="exercise1.css" />
</head>

<body>
<h1>Chapter 10 - Advanced CSS</h1>

<ul id="contents">
<li>Properaes</li>
<li>
<ul>
<li><a href="#background">Background Properaes</a></li>
<li><a href="#outline">Outline Properaes</a></li>
<li><a href="#link">Link Properaes</a></li>
<li><a href="#list">List Properaes</a></li>
<li><a href="#table">Table Properaes</a></li>
</ul>
</li>
<li>Generaang Content</li>
<li>
<ul>
<li><a href="#before">:before Pseudo-Element</a></li>
<li><a href="#ader">:ader Pseudo-Element</a></li>
</ul>
</li>
<li>Posiaoning</li>
<li>
<ul>
<li><a href="#normal">Normal Flow</a></li>
<li><a href="#absolute">Absolute Posiaoning</a></li>
<li><a href="#floaang">Floaang Posiaoning</a></li>
</ul>
</li>
</ul>

<h2>Properaes</h2>
<h3><a name="background">Background Properaes</a></h3>
<p></p>
<h3><a name="outline">Outline Properaes</a></h3>
<h3><a name="link">Link Properaes</a></h3>
<h3><a name="list">List Properaes</a></h3>
<h3><a name="table">Table Properaes</a></h3>

4
<h2>Generaang Content</h2>
<h3><a name="before">:before Psuedo-Element</a></h3>
<h3><a name="ader">:ader Psuedo-Element</a></h3>

<h2>Posiaoning</h2>
<h3><a name="normal">Normal Flow</a></h3>
<h3><a name="absolute">Absolute Posiaoning</a></h3>
<h3><a name="floaang">Floaang Posiaoning</a></h3>
</body>
</html>

5
exercise2.css

body {
background-color:#ffffff;
font-family:arial, verdana, sans-serif;
font-size:12px;}

div {
background-color:#ffffff;
padding:10px;
border-style:groove; border-width:4px; border-color:#999999;
width:300px;}

div.page1 {
posiaon:absolute;
top:70px;
z-index:2;
background-color:#f2f2f2;}

div.page2 {
posiaon:absolute;
top:170px; led:100px;
z-index:3;}

div.page3 {
posiaon:absolute;
top:270px; led:200px;
z-index:1;
background-color:#efefef;}

6
exercise2.html

<?xml version="1.0" ?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiaonal//EN"
"hHp://www.w3.org/TR/xhtml1/DTD/xhtml1-transiaonal.dtd">
<html xmlns="hHp://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<atle>Exercise 1</atle>
<link rel="stylesheet" type="text/css" href="exercise2.css" />
</head>

<body>
<h1>Chapter 10 - Advanced CSS</h1>

<div class="page1">
<h2>Properaes</h2>
<ul>
<li><a href="#background">Background Properaes</a></li>
<li><a href="#outline">Outline Properaes</a></li>
<li><a href="#link">Link Properaes</a></li>
<li><a href="#list">List Properaes</a></li>
<li><a href="#table">Table Properaes</a></li>
</ul>
</div>

<div class="page2">
<h2>Generaang Content</h2>
<ul>
<li><a href="#before">:before Pseudo-Element</a></li>
<li><a href="#ader">:ader Pseudo-Element</a></li>
</ul>
</div>

<div class="page3">
<h2>Posiaoning</h2>
<ul>
<li><a href="#normal">Normal Flow</a></li>
<li><a href="#absolute">Absolute Posiaoning</a></li>
<li><a href="#floaang">Floaang Posiaoning</a></li>
</ul>
</div>

</body>
</html>

You might also like