5.CSS Avanzado

CSS Avanzado
1. Herencia
Los estilos se heredan en las marcas de HTML. <...> y </...> En el ejemplo: todo cdigo dentro de: <body> y </body>, tendr el siguiente estilo: <style type=text/css> body { color:blue; font-family:verdana; } </style>
1. Herencia
<style type=text/css>body { color:blue; font-family:verdana; } </style><body><h1>Pri mero</h1><p>Texto de Prueba</p><h2>Segun do</h2></body>
2. Herencia: Prioridad
Cuando existen 2 definiciones iguales, tiene prioridad la ms especfica. En este ejemplo: Podemos ver que todas las marcas heredan la fuente verdana ya que ninguna marca la sobreescribe. En cambio el color cambia.
<style type=text/css>body { font-family:verdana; }h1 { color:red; }p { color:green; } </style>
2. Herencia: Prioridad
<style type=text/css> body { font-family:verdana; } h1 { color:red; } p { color:green; } </style> <body> <h1>Primero</h1> <p>Texto de Prueba</p> </body>
3. CSS en archivo externo.

Hasta ahora hemos visto la definicin de estilos en el archivo HTML. Ahora veremos que la metodologa ms empleada es la definicin de una hoja de estilo en un archivo separado que deber tener la extensin css. Este archivo contendr las reglas de estilo (igual como las hemos visto hasta ahora) pero estarn separadas del archivo HTML.

La ventaja fundamental es que con esto podemos aplicar las mismas reglas de estilo a parte o a todas las pginas del sitio web. Veremos que esto ser muy provechoso cuando necesitemos hacer cambios de estilo (cambiando en este archivo estaremos cambiando la apariencia de mltiples pginas).
Al programador le resulta ms ordenado tener lo referente a HTML en un archivo y el estilo en un archivo aparte.

Archivo: 3.html Archivo: estilo.css <link rel=StyleSheet body {backgroundhref=estilo.css></head><body><h1> color:yellow; Estilo en archivo color:blue; externo.</h1><p>Un archivo font-family:arial; separado.</p></body> }
4. Clases
En muchas situaciones una regla de estilo puede ser utilizada muchas marcas HTML. En esos casos conviene crear un estilo que se pueda aplicar a varias marcas de HTML.
Para conocer la sintaxis de clases veamos un ejemplo:
4. Clases
Archivo: 3.html<link rel=StyleSheet href=estilo.css><body><h1 class=resaltado>Titulo</h1><p> Es un texto resaltado en el <span class="resaltado">final.</span></p ></body>
Archivo: estilo.cssbody { background-color:gray; } .resaltado{ color:black; background-color:yellow; font-style:italic; }
5. Borde de una marca HTML

Todo elemento de una pgina HTML genera una caja. Imaginemos los controles h1,h2,h3, etc. Si fijamos la propiedad background-color veremos que el contenido se encuentra dentro de un rectngulo. Podemos acceder a las propiedades del borde de ese rectngulo mediante las CSS; las propiedades ms importantes a las que tenemos acceso son: border-width border-style border-color
5. Borde de una marca HTML

Archivo: estilo.css Archivo: 3.html <meta charset=utf-8><link rel=StyleSheet.pregunta { href=estilo.css> <body><p background-color:yellow; class=pregunta> border-width:2px; Quin descubri Amrica?</p><p border-style:solid; class=respuesta>Coln</p></body> }.respuesta { border-width:1px; border-style:dashed; border-color:#black
6. Fuentes (Formato resumido)

Se pueden resumir las propiedades en una lnea: Archivo: estilo.css p { font:bold italic 25px verdana; }
Archivo: 3.html <link rel="StyleSheet" href="estilo.css"> <p>Hola Mundo</p>
7. Men horizontal con lista

Un men muy comn es donde las opciones se encuentran una al lado de otra.
Veamos el cdigo de un men horizontal:
7. Men horizontal con lista

Archvo: 3.html
<link rel=StyleSheet href=estilo.css> <ul class=menu> <li><a href=http://abc.com.py>ABC</a></li> <li><a href=http://hoy.com.py>HOY</a></li> <li><a href=http://uhora.com.py>UH</a></li> </ul>
Archivo: menu.css .menu a { float:left; width:100px; text-decoration:none; text-align:center; color:red; background-color:yellow; padding:5px; border:1px solid; } .menu a:hover { background-color:blue; } .menu li { display:inline; }
8. Estilos en Formularios
Un formulario es el elemento esencial para el envo de datos al servidor. Veamos un ejemplo donde implementamos un formulario y le aplicamos una serie de reglas de estilo a las diferentes marcas HTML que intervienen:
8. Estilos en Formularios
<link rel=StyleSheet href=estilo.css> <body> <form class=formulario action=#> <label class=campo>Nombre:</label> <input type=text><br> <label class=campo>Telefono:</label> <input type=tel></input> <br> <input type=submit> </form> </body>
.formulario { width:300px; background-color:yellow; border:5px solid red; padding:10px; }.formulario form label { width:100px; float:left; }body{ background-color:gray; font-family:arial; font-size:16px; }
9. Estilos en Tablas
Veamos con un ejemplo como podemos afectar una tabla HTML con CSS.
9. Estilos en Tablas
<link rel=StyleSheet href=estilo.css><body><h2>Tabla de Posiciones</h2><table><tr><th>Club</th><th>P.J.</th> <th>P.G.</th><th>Puntos</th></tr><tr><th>Libertad</th ><td>5</td><td>4</td><td>13</td></tr><tr><th>Olimpia </th><td>5</td><td>2</td><td>7</td></tr><tr><th>Cerro </th><td>5</td><td>2</td><td>7</td></tr></table></bod y>
th { border: 1px solid #fff; padding: 5px; background-color: blue; color: white; }td { border: 1px solid white; padding: 5px; backgroundcolor:pink; width:100px; text-align:center; }
10. Proyecto PURE

Es un proyecto para utilizar CSS pre-fabricado:
Ejemplo
<link rel="stylesheet" href=pure-min.css <center> <img src=columbia.jpg> <br> <h2>Universidad Columbia del Paraguay</h2> <form class=pure-form> Nombre:<input type=text><br> Cedula:<input type=password><br> <input type=submit class="pure-button pure-button-primary" value=Entrar></form> </center>
Ejercicios
https://docs.google.com/forms/d/1beWIwiMTT2H8NuqWKZRtME9pkr6Wd_UScwNm_Al0E/viewform

5.CSS Avanzado

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

5.CSS Avanzado

Transféré par

Droits d'auteur :

Formats disponibles

CSS Avanzado

3. CSS en archivo externo.

3. CSS en archivo externo.

3. CSS en archivo externo.

Para conocer la sintaxis de clases veamos un ejemplo:

Archivo: estilo.cssbody { background-color:gray; } .resaltado{ color:black; background-color:yellow; font-style:italic; }

5. Borde de una marca HTML

5. Borde de una marca HTML

6. Fuentes (Formato resumido)

Archivo: 3.html <link rel="StyleSheet" href="estilo.css"> <p>Hola Mundo</p>

7. Men horizontal con lista

Veamos el cdigo de un men horizontal:

7. Men horizontal con lista

10. Proyecto PURE

Vous aimerez peut-être aussi