Scribd
Upload
439 views

Practica HTML y Css

The document provides instructions and code snippets for creating HTML pages with CSS styling. It includes 4 sections that demonstrate: 1. Adding CSS styles like text transformations and alignments to HTML elements. 2. Creating a navigation bar with floated list items and hover effects. 3. Styling unordered lists and links with backgrounds and hover effects. 4. Creating a fixed-width navigation menu with selected and last items styled.

Uploaded by

nenadesestresada
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
439 views

Practica HTML y Css

The document provides instructions and code snippets for creating HTML pages with CSS styling. It includes 4 sections that demonstrate: 1. Adding CSS styles like text transformations and alignments to HTML elements. 2. Creating a navigation bar with floated list items and hover effects. 3. Styling unordered lists and links with backgrounds and hover effects. 4. Creating a fixed-width navigation menu with selected and last items styled.

Uploaded by

nenadesestresada
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 6

1.

Crea los siguientes htmls con estilos:

<!DOCTYPE html PUBLIC "-/pp/W3C//DTD XHTML 1.0 Strict//EN" > < html > <head> <title></title> <style type= 'te xt/css '> h1::first-letter, p::first-letter { text-transform: capitalize; } h1 { font-weight: normal; text-align: center; text-decoration: underline; } p { text-indent: 25 px; text-align: justify; letter-spacing: 1 px; word-spacing: 5 px; } p::first-letter { font: 120 %; } </style> </head> < body > <h1> this is the title</h1> <p>This is a test. </p> </ body > </ html >

2. < html >


<head> <title></title> <style type= "text/css" > #header { float : left; width: 100 %; background-color: white; padding-top: 0 ; margin-top: 0 ; background: #ccc; } #header h5 { display: none; } #header ul { margin: 0 ; padding: 10 px 10 px 0 ; list-style: none; } #header li { float : left; margin: 0 ; padding: 0 ; } #header a {

display: block; } #header li { float : left; background: yellow; margin: 0 ; padding: 0 ; } #header a { display: block; background: gold; padding: 5 px 15 px; color: #ccc; text-decoration: none; } #header #current { background: red; } #header #current a { background: pink; color: black; } </style> </head> < body > <div id= "header" > <ul> <li><a href= "http://,....." >Home</a></li> <li><a href= "http://...." >Home</a></li> <li><a href= "http://...." >Home</a></li> <li><a href= "http://...." >Home</a></li> <li id= "current" ><a href= "http://www.." >Home</a></li> <li><a href= "http://..." >Home</a></li> </ul> </div> </ body > </ html > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd" > < html xmlns= "http://www.w3.org/1999/xhtml" xml:lang= "en" lang= "en" > <head> <meta http-equiv= "content-type" content= "text/html;charset=iso-8859-1" /> <style type= 'te xt/css '> ul { width: 100 px; list-style: none; position: relative; } li { padding-right: 5 px }

3.

ul li a { display: block; background-color: #eee; text-indent: 5 px; height: 20 px; line-height: 20 px; color: # 000 ; text-decoration: none; } ul li a:hover { background-color: #ccc; } span { visibility: hidden; position: absolute; width: 5 px; height: 20 px; right: 0 ; } span.a { background: red; top: 0 } span.b { background: green; top: 20 px } span.c { background: blue; top: 40 px } span.d { background: yellow; top: 60 px } span.e { background: pink; top: 80 px } span.f { background: orange; top: 100 px } ul li a:hover span { visibility: visible } </style> </head> < body > <ul> <li><a href= ''> A<span class = "f" ></span></a></li> <li><a href= ''> B</span><span class = "e" ></span></a></li>

<li><a <li><a <li><a <li><a </ul> </ body > </ html >

href= href= href= href=

''> ''> ''> ''>

C<span D<span E<span F<span

class class class class

= = = =

"d" "c" "b" "a"

></span></a></li> ></span></a></li> ></span></a></li> ></span></a></li>

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


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns= "http://www.w3.org/1999/xhtml" > <head> <title>Untitled Document</title> <meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-1" /> <style type= "text/css" > ul#nav2 { list-style: none; border-top: 2 px solid silver; border-bottom: 2 px solid silver; background:#ffffcc; white-space:nowrap; height: 1.7 em; width: 750 px; text-align:center; margin-left:auto; margin-right:auto; } #nav2 li { float :left; background:#ffffcc; width: 20 %; white-space:nowrap; } #nav2 a { border-left: 2 px solid silver; line-height: 1.7 em; height: 1.7 em; background:#f2f2f2; position:relative; text-decoration:none; display:block; } #nav2 a:hover { background:blue; color:white; } ul#nav2 li.selected a { background:blue; color:white; } ul#nav2 li.last a { border-right: 2 px solid silver; } * html ul#nav2 li.last { width:auto; } </style> </head>

< body > <h2>Example below of fixed width floated menu</h2> <ul id= 'na v2 '> <li class = "selected" ><a href= "" title= "" >Home</a></li> <li><a href= "" >About Us</a></li> <li><a href= "" >Contact</a></li> <li><a href= "" >More</a></li> <li class = "last" ><a href= "" >Stuff</a></li> </ul> </ body > </ html >

2. Crea el html y el css correspondiente:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" < html > <head> <title>Link the style outside html document</title> <link href= "1-2.css" rel= "stylesheet" type= "text/css" /> </head> < body > <div id= "header" > <h1>CSS Collection</h1> <h2>Showcase of CSS Web Sites</h2> </div> <div id= "content" > <h3>Content Page Title</h3> <p class = "title" >Content Item Title</p> <p class = "content" >Content goes here.</p> </div> <div id= "navigation" > <h3>List Stuff</h3> <a href= "http://www.java2s.com/" >Submit a site</a><br /> <a href= "http://www.java2s.com/" >CSS resources</a><br /> <a href= "http://www.java2s.com/" >RSS</a><br /> <h3> Stuff</h3> <a href= "http://www.java2s.com/" >Home</a><br /> <a href= "http://www.java2s.com/" >About</a><br /> <a href= "http://www.java2s.com/" >Blog</a><br /> <a href= "http://www.java2s.com/" >Services</a><br /> </div> <div id= "blipverts" > <h3>Ads go here.</h3> </div> <div id= "siteinfo" > <p class = "footer" >Copyright 2006 </p> </div> </ body > </ html > body { margin: 0 ; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: .75 em; padding: 0 ; } >

#banner { margin-top: 0 ; margin-bottom: 0 ; background-color: # 900 ; border-bottom: solid 1 px # 000 ; padding: 5 px 5 px 5 px 10 px; line-height: 75 %; color: #fff; } #sub_banner { background-color: #ccc; border-bottom: solid 1 px # 999 ; font-size: .8 em; font-style: italic; padding: 3 px 0 3 px 10 px; } #content { position: absolute; margin-left: 18 %; width: 40 %; top: 100 px; padding: 5 px; } #nav1 { position: absolute; width: 30 %; left: 60 %; top: 100 px; padding: 5 px; } #nav2 { position: absolute; padding: 5 px 5 px 5 px 10 px; top: 100 px; width: 15 %; } #footer { text-align: center; padding-top: 7 em; } .warning { font-weight: bold; color: red; } .title { font-size: 120 %; } .content { font-family: Verdana, Arial, sans-serif; margin-left: 20 px; margin-right: 20 px; } .footer { font-size: 75 %; }

You might also like