Your SlideShare is downloading. ×
CSS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS

790
views

Published on

CSS, divs and a little about forms

CSS, divs and a little about forms

Published in: Technology, Design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
790
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
51
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Laboratorio N° 2 pacd1985
  • 2.
    • Los estilos son mecanismos para definir la apariencia física de los elementos html.
    • Pueden ser añadidos directamente a los elementos utilizando el atributo style o indirectamente con hojas de estilo (archivos CSS).
  • 3.  
  • 4.
    • Este atributo se ha extendido a la mayoría de los elementos html.
    • style=“nom_elem1:val_elem1;nom_elem2:val_elem2;…"
  • 5.
    • Algunos ejemplos:
    • style="background-color:yellow“
    • style="font-size:10px"
    • style="font-family:Times"
    • style="text-align:center"
  • 6.
    • <body style=&quot;background-color:PowderBlue;&quot;>
    • <h1>Este es un header simple.</h1>
    • <p style=&quot;font-family:verdana;color:red&quot;>
    • Este es un texto en verdana de color rojo.
    • </p>
    • <p style=&quot;font-family:times;color:green&quot;>
    • Este es un texto en times de color verde.
    • </p>
    • <p style=&quot;font-size:30px&quot;>
    • Este texto es de 30 pixeles de tamaño
    • </p>
    • </body>
  • 7.
    • Los estilos son normalmente almacenados en hojas de estilo.
    • Una hoja de estilo puede ser aplicada a varias páginas web. Esto centraliza los cambios.
    • Una página web puede utilizar mas de una hoja de estilo.
  • 8.
    • p,li,th,td
    • {
    • font-size: 75%;
    • }
    • body
    • {
    • background-color: #ffffff;
    • }
    • h1,h2,h3,hr
    • {
    • color:black;
    • }
  • 9.
    • Una hoja de estilo puede ser interna o externa.
    • Las hojas de estilo internas son creadas dentro del documento html y utilizan el tag style y son creadas dentro del head.
    • Una hoja de estilo externa tiene la extensión .css .
  • 10.
    • Un ejemplo de hoja de estilo interna.
    • <head>
    • <style type=&quot;text/css&quot;>
    • hr {color: sienna}
    • p {margin-left: 20px}
    • body {background-image: url(&quot;images/back40.gif&quot;)}
    • </style>
    • </head>
  • 11.
    • Un ejemplo de hoja de estilo externa referenciada.
    • <head>
    • <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=“estilo.css&quot; />
    • </head>
    • En este caso, la hoja de estilo se llama estilo.css .
  • 12.
    • ¿Qué estilo será usado si hay mas de uno especificado para un mismo elemento html?
    • Se podría decir que hay una hoja de estilo “virtual” en la que la prioridad de definiciones es la siguiente:
    • Default del navegador
    • Hoja de estilo externa
    • Hoja de estilo interna
    • Atributo style (más alta prioridad)
  • 13.
    • Si la referencia a una hoja de estilo externa es colocada debajo de una hoja de estilo interna, la externa tiene mayor prioridad.
  • 14.
    • Tiene tres partes:
    • El selector. Es el tag html que se desea definir.
    • La propiedad. Es el atributo que se desea definir.
    • El valor. Es el valor del atributo.
  • 15.
    • selector {propiedad: valor}
    • Si el valor tiene más de una palabra se deben poner entre comillas.
    • p {font-family: &quot;sans serif&quot;}
    • Se pueden agrupar selectores así:
    • h1,h2,h3,h4,h5,h6 { color: green }
  • 16.
    • Es una buena práctica definir una propiedad por línea.
    • p {
    • text-align: center;
    • color: black;
    • font-family: arial
    • }
  • 17.
    • Se puede definir distintos estilos por elemento clasificándolos.
    • p.right {text-align: right}
    • p.center {text-align: center}
    • En el html:
    • <p class=&quot;right&quot;> Párrafo a la derecha. </p>
    • <p class=&quot;center&quot;> Párrafo al centro. </p>
  • 18.
    • En general:
    • <[sel] class=“clase1 clase2 …&quot;> Párrafo.</[sel]>
    • Tambi én podemos definir clases independientes de un selector para asignarlas indistintamente a cualquier tag.
    • .center {text-align: center}
  • 19.
    • Se puede lograr lo mismo utilizando el atributo id en vez de class .
    • #green {color: green}
    • p#para1 { text-align: center; color: red }
    • Los elementos que tengan el atributo id con el valor “green” y los elementos <p> con el atributo id con el valor “para1” .
  • 20.
    • También se pueden hacer comentarios.
    • /* This is a comment */
    • Para inidicar que un estilo se aplica a todos los elementos se utiliza el selector * .
    • Veamos como funcionan las prioridades en la definiciones de estilos. Por ejemplo, tenemos una hoja de estilo externa con la siguiente definición:
  • 21.
    • h3
    • {
    • color: red;
    • text-align: left;
    • font-size: 8pt
    • }
  • 22.
    • Y también tenemos una hoja de estilo interna con la siguiente definición:
    • h3
    • {
    • text-align: right;
    • font-size: 20pt
    • }
  • 23.
    • Ahora, la hoja de estilo “virtual” ser ía:
    • h3
    • {
    • color: red;
    • text-align: right;
    • font-size: 20pt
    • }
  • 24.
    • Define el espacio entre los elementos html.
  • 25.
    • Define el espacio entre el borde del elemento y el contenido del elemento.
  • 26.
    • Este tag define una sección de un documento html.
    • Se usa para agrupar elementos y formatearlos con estilos.
    • Se le puede aplicar los estilos de la misma manera que a cualquier otro elemento html.
  • 27.
    • Un ejemplo sencillo:
    • <html>
    • <body>
    • <h3>This is a header</h3>
    • <p>This is a paragraph.</p>
    • <div style=&quot;color:#00FF00&quot;>
    • <h3>This is a header</h3>
    • <p>This is a paragraph.</p>
    • </div>
    • </body>
    • </html>
  • 28.  
  • 29.
    • Funciona básicamente igual que <div> , aunque se usa más para estilizar contenidos específicos o manipularlos con javascript.
    • span.blue {color:lightskyblue;font-weight:bold}
    • span.green {color:darkolivegreen;font-weight:bold}
  • 30. <p> My mother has <span class=&quot;blue&quot;>light blue</span> eyes and my father has <span class=&quot;green&quot;>dark green</span> eyes. </p>
  • 31.
    • Un formulario se define con el tag <form> .
    • Define un área donde poner elementos que generalmente permiten al usuario ingresar información.
    • Estos elementos pueden ser inputs, textareas, selects, etc.
  • 32.
    • Los elementos más usados dentro de un formulario son los <input > .
    • Estos pueden ser:
    • Text Fields
    • Radio Buttons
    • Checkboxes
    • Submit
  • 33.
    • Text Fields
    • <form> First name: <input type=&quot;text&quot; name=&quot;firstname&quot; /> <br /> Last name: <input type=&quot;text&quot; name=&quot;lastname&quot; />
    • </form>
  • 34.  
  • 35.
    • Radio Buttons
    • <form> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot; /> Male <br /> <input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;female&quot; /> Female
    • </form>
  • 36.  
  • 37.
    • Checkboxes
    • <form> I have a bike: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Bike&quot; /> <br /> I have a car: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Car&quot; /> <br /> I have an airplane: <input type=&quot;checkbox&quot; name=&quot;vehicle&quot; value=&quot;Airplane&quot; />
    • </form>
  • 38.  
  • 39.
    • Submit
    • <form name=&quot;input&quot; action=&quot;html_form_submit.php&quot; method=&quot;get&quot;> Username: <input type=&quot;text&quot; name=&quot;user&quot; /> <input type=&quot;submit&quot; value=&quot;Submit&quot; />
    • </form>
  • 40.  
  • 41.
    • Es un input multil ínea que puede contener un número ilimitado de caracteres.
    • Su tamaño puede ser especificado con los atributos rows y cols o con las propiedades de estilo height y width .
    • <textarea rows=&quot;2&quot; cols=&quot;20&quot;> bla bla bla bla bla bla bla bla bla bla bla bla …
    • </textarea>
  • 42.  
  • 43.
    • Sirve para mostrar al usuario una lista desplegable de opciones.
    • <select name=&quot;carlist&quot;>
    • <option value=&quot;volvo&quot;>Volvo</option>
    • <option value=&quot;saab&quot;>Saab</option>
    • <option value=&quot;mercedes&quot;>Mercedes</option>
    • <option value=&quot;audi&quot;>Audi</option>
    • </select>
  • 44.  

×