Clase 2 – Introducción al código CSS

En esta clase vamos a trabajar sobre la estructura anterior y la vamos a ir mejorando hasta lograr muchos de los elementos comúnes que vemos en los sitios web, para esto vamos a utilizar básicamente la misma técnica de maquetación y vamos a ir consultando varias propiedades y etiquetas.

Empezamos con la estructura inicial:

Esta es la maqueta (layout), del ejercicio anterior, como podemos observar es una estructura conformada por:

– Un bloque contenedor
– Tres bloques distribuídos horizontalmente
– Un bloque con la propiedad clear: both;

El último div con la propiedad clear: both; lo que hace es decirle que a partir de este bloque no permite elemento flotantes ni a la izquierda ni a la derecha haciendo que el resto de elementos a partir de este se distribuyan de manera líneal.

 

Código HTML:

<div id="contenedor">
 <div id="b1">
   <h2><span>Gestión</span> Académica</h2>
   <p>Texto del párrafo.</p>
   <a href="#">Leer Más</a>
 </div>
 <div id="b2">
   <h2><span>Gestión</span> Académica</h2>
   <p>Texto del párrafo.</p>
   <a href="#">Leer Más</a>
 </div>
 <div id="b3">
   <h2><span>Gestión</span> Académica</h2>
   <p>Texto del párrafo.</p>
   <a href="#">Leer Más</a>
 </div>

 <div class="clear"></div>
</div>

Código CSS:

body {
font-family: Heveltica, Arial, FreeSans, sans-serif;
font-size:12px;
color:#333333;
}
a{color:#216DBB;}
h2 {font-size:21px;}

#contenedor{
width: 960px;
margin: 20px auto;
border: 0px solid #111;
}

.bloque{
float:left;
width:220px;
margin:10px;
padding: 0 0 0 60px;
}

.bloque h2 {color:#216DBB;font-size:21px;}
.bloque h2 span {color:#000000;}
.bloque p{line-height: 20px;}
.clear{clear:both;}

#b1{background: url(images/psd.png) no-repeat 0 20px;}
#b2{background: url(images/html.png) no-repeat 0 20px;}
#b3{background: url(images/flv.png) no-repeat 0 20px;}

 

Ahora que ya hechamos una ojeada al código podemos analizar y practicar varias cosas, la primera es saber para que carajos es cada una de esas propiedades del CSS y en que afectan al código HTML para entender un poco mejor este dúo dinámico dejemos unos pequeños puntos claros…

El código CSS se aplica dentro del documento HTML y existen 3 formas de aplicarlo:

 

 

En atributo de etiqueta
Es la manera más sencilla y rápida pero poco eficiente de aplicar código CSS a cualquier etiqueta del HTML y se usa ingresando el código css en el atributo STYLE de CUALQUIER etiqueta de la siguiente manera:

<p style="font-size: 12px; color: #FFFFFF;">Texto del párrafo</p>

En este ejemplo podemos ver que le aplicamos al texto del párrafo un tamaño de fuente de 12px y un color de fuente blanco. Decimos que es poco eficiente porque cuando el código va creciendo es bueno que tengamos el código css separado del html para que por ejemplo en este caso todos los párrafos tengan tamaño de fuente 12px y de color blanco, esto lo logramos en la siguiente forma.

 

Dentro de la etiqueta <style>
Dentro de esta etiqueta podemos escribir código CSS y este se aplica a cualquier elemento de la estructura en HTML, la etiqueta se debe declarar dentro de la etiqueta <head></head> , para hacer referencia de un estilo css a una etiqueta en la estructura debemos utilizar los selectores css de la siguiente manera:

 

Nombre de la etiqueta
Utilizamos el nombre de la etiqueta para aplicar estilo css a todas las etiquetas del mismo tipo, ejemplo:

<head>
  <style type="text/css">
    p { font-size: 12px; }
  </style>
</head>

Esto nos dice que todos los párrafos de la estructura tendrán un tamaño de fuente de 12px.

 

Por atributo de identificación ID
Todas las etiquetas en html tienen un atributo que se llama id y realiza la función de identificar los elementos dentro del documento con un único valor. Es decir… es como la cédula de cada etiqueta y este valor no se repite dos veces. Entonces para hacer referencia a un atributo ID en código CSS anteponemos al valor del identificador el símbolo # de la siguiente manera:

<head>
  <style type="text/css">
    p { font-size: 12px; }
    #identificador { font-size: 14px; }
  </style>
</head>
<body>
  <p>Texto...</p>
  <p id="identificador">Texto...</p>
</body>

En este ejemplo lo que obtendremos es que primero, todos los párrafos tienen tamaño de fuente 12px exeptuando únicamente al párrafo que tiene el id=”identificador” al cual se le asigna un estilo de 14px en tamaño de fuente.

 

Por atributo de clase CLASS
Igual que en el caso anterior todas las etiquetas cuentan con un atributo que se llama class y tiene la función de agrupar etiquetas por clases esto no solo nos trae beneficios en el seleccionamiento css sino también cuando vayamos a trabajar con JavaScript (JavaScript no tiene nada, NADA!! que ver con el lenguaje Java). Entonces cuando seleccionamos elementos por clase nos facilita la tarea de aplicar sólo a un grupo de etiquetas que posean el mismo valor en el atributo class, y funciona así:

<head>
  <style type="text/css">
    p { font-size: 12px; }
    #identificador { font-size: 14px; }
    .error{ color: red; }
  </style>
</head>
<body>
  <p>Texto...</p>
  <p id="identificador">Texto...</p>
  <p class="error">Texto de error con color rojo!</p>
</body>

Lo que observamos en este ejemplo es un acumulativo de todas las anteriores formas de seleccionar elementos en css, entonces retomando todo el resultado sería: que todos los párrafos tienen tamaño de fuente de 12px, exeptuendo la única etiqueta que tenga el atributo id=”identificador” a la cual le aplicamos un tamaño de fuente de 14px, y además tenemos que todos los párrafos que contengan el atributo class=”error” tendrán color de fuente red que equivale al color rojo.

 

Por archivo externo
La tercer forma de aplicar el código css al documento es guardar todo el código css en un archivo e incluirlo en el documento.

Esta es la forma más eficiente de implementar el estilo a la estructura porq prácticamente separamos el HTML del estilo CSS : La estructura del diseño y esto lo hacemos con la etiqueta link dentro del <head> por ejemplo para aplicar el estilo del ejemplo anterior simplemente guardamos el código que hay dentro de las etiquetas <style></style> es decir el código css en un archivo de texto cualquiera y le cambiamos la extensión por .css y luego lo incluímos en el documento así:

<head>
  <link type="text/css" href="nombre_del_archivo.css" rel="stylesheet" />
</head>

En resumen estas son las principales formas de selección de elementos en código CSS, ahora que ya sabemos los conceptos básicos de como funciona este dúo dinámico nos dirijimos directamente a la práctica y como ejercicio previo antes de culminar con esta clase vamos a hacer ensayos con estos ejemplos y cambiando los estilos y las clases y los ids, para esto búsquemos las propiedades css que bastante abundan en Google y manos a la obra!

Les dejo 2 referencias básicas:

http://htmlhelp.com/es/reference/css/properties.html
http://vagabundia.bolsanegra.net/index.php/tutorialhtml/html-leccion-17/

 

Con estos temas claros podemos empezar a transformar la estructura inicial y agregarle un div de contenido y otro div para crear una columna derecha:

Por cada clase voy a dejar unos vínculos que les van a ayudar en cada uno de los temas:

TypeChart – Biblioteca de las mejores combinaciones de fuentes de letra en CSS
TypeTester – Otro Parecido al TypeChart pero más enfocado en párrafos
FireBug – Complemento para inspeccionar el código HTML y editarlo en el navegador (Complemento de Firefox)
Ejercicio 2 Archivos

Anuncios

5 comentarios en “Clase 2 – Introducción al código CSS

  1. pana tengo uno problema con el contenedor, cuando introduzco otro mas abajo el contenedor desaparece
    y no tengo la menor ideo de por que mmm…. el div que introduzco tiene mucho contenido.

  2. a ver es un bloque donde es encuentra una imagen y una definición (tiene muchas imágenes pero no me quieren aparecer jeje pana mira ps el cogido::::::

    body {
    font-family: Heveltica, Arial, FreeSans, sans-serif;
    font-size:12px;
    color:Black;
    }

    a{color:#216DBB;}
    h2 {font-size:21px;}
    h2 {color:Gray;}
    span {color: IndianRed;}
    #anime p{line-height: 16px;}

    #contenedor{
    width: 960px;
    margin: 20px auto;
    border: 0px solid #111;
    background: Gainsboro;
    -moz-border-radius: 20px 20px 20px 20px;

    }
    #animeid{
    float:left;
    width:385px;
    margin:10px;
    padding: 0 0 0 50px;
    height: 200px;
    border: 10px solid #111;
    }
    #MCanime{
    float:left;
    width:385px;
    margin:10px;
    padding: 0 0 0 60px;
    height: 200px;
    border: 10px solid #111;
    background: RoyalBlue;
    }

    #anime{
    float:left;
    width:865px;
    margin:10px 10px 10px 30px;
    padding: 0 0 30px 10px;
    background: #FFFFFF;
    border: 10px solid #111;
    -moz-border-radius: 10px;

    }
    #list{
    float:left;
    width:865px;
    margin:10px 10px 10px 30px;
    padding: 0 0 30px 10px;
    background: #FFFFFF;
    border: 10px solid #111;
    -moz-border-radius: 10px;
    }

    #MCanime {background: url(imagenes/MC.jpg) no-repeat 0 20px;}
    #animeid {background: url(imagenes/ID.JPEG) no-repeat 0 20px;}

    animeID
    La mejor web para ver Anime Online Gratis, mira los últimos capítulos de los animes del momento sin ninguna clase de restricción
    Pagina oficial

    MCanime
    tu fuente más completa de noticias para mantenerte actualizado acerca del mundo de anime y manga.
    Pagina oficial

    ¿Anime?
    Anime, es el término que identifica a los dibujos animados de procedencia japonesa. El anime es un medio de gran expansión en Japón, siendo al mismo tiempo un producto de entretenimiento comercial, fenómeno cultural en masas populares y una forma de arte tecnológico.1 Es potencialmente dirigido a todos los públicos, desde niños, adolescentes, adultos, hasta especializaciones de clasificación esencialmente tomada de la existente para el “manga” (palabra japonesa para designar a la historieta en general. Fuera de Japón, se utiliza exclusivamente para referirse a las historietas niponas.), con clases base diseñadas para especificaciones socio-demográficos tales como empleados, amas de casa, estudiantes, y así sucesivamente. Por lo tanto, pueden hacer frente a los sujetos, temas y géneros tan diversos como el amor, aventura, ciencia ficción, los cuentos infantiles, literatura, deportes, fantasía, erotismo y muchos otros.2
    El anime tradicionalmente es dibujado a mano, pero actualmente se ha vuelto común la animación en computadora. Sus guiones incluyen gran parte de los géneros de ficción y son transmitidos a través de medios cinematográficos (transmisión por televisión, distribución en formatos de video doméstico y películas con audio).[cita requerida] La relación del anime japonés con el manga es estrecha, pues históricamente una gran cantidad de series y trabajos de anime se basan en historias de manga populares.
    Profundisar mas

    animeMas visto
    Este tema a tenido mucha controversia, pero encuetas an demostrado que los anime mas vistos son
    1.-Death Note

    2.-Naruto

    3.-Elfen Lied

    4.-Saint Seiya

    5.-Full Metal Alchemist

    6.-Neon Genesis Evangelion

    7.-Saber Marionett

    8.-Capitan Tsubasa

    9.-Hellsing

    10.-Sakura Card Captor

    11.-Ynuyasha

    12.-Dragon Ball

  3. aaaaaa ignora lo anterior es este::::

    //
    //
    // animeID
    // La mejor web para ver Anime Online Gratis, mira los últimos capítulos de los animes del momento sin ninguna clase de restricción
    Pagina oficial
    //

    //
    // MCanime
    // tu fuente más completa de noticias para mantenerte actualizado acerca del mundo de anime y manga.
    // Pagina oficial
    //

    //
    // ¿Anime?
    // Anime, es el término que identifica a los dibujos animados de procedencia japonesa. El anime es un medio de gran expansión en Japón, siendo al mismo tiempo un producto de entretenimiento comercial, fenómeno cultural en masas populares y una forma de arte tecnológico.1 Es potencialmente dirigido a todos los públicos, desde niños, adolescentes, adultos, hasta especializaciones de clasificación esencialmente tomada de la existente para el “manga” (palabra japonesa para designar a la historieta en general. Fuera de Japón, se utiliza exclusivamente para referirse a las historietas niponas.), con clases base diseñadas para especificaciones socio-demográficos tales como empleados, amas de casa, estudiantes, y así sucesivamente. Por lo tanto, pueden hacer frente a los sujetos, temas y géneros tan diversos como el amor, aventura, ciencia ficción, los cuentos infantiles, literatura, deportes, fantasía, erotismo y muchos otros.2
    El anime tradicionalmente es dibujado a mano, pero actualmente se ha vuelto común la animación en computadora. Sus guiones incluyen gran parte de los géneros de ficción y son transmitidos a través de medios cinematográficos (transmisión por televisión, distribución en formatos de video doméstico y películas con audio).[cita requerida] La relación del anime japonés con el manga es estrecha, pues históricamente una gran cantidad de series y trabajos de anime se basan en historias de manga populares.
    // Profundisar mas
    //
    //
    // animeMas visto
    // Este tema a tenido mucha controversia, pero encuetas an demostrado que los anime mas vistos son
    // 1.-Death Note

    2.-Naruto

    3.-Elfen Lied

    4.-Saint Seiya

    5.-Full Metal Alchemist

    6.-Neon Genesis Evangelion

    7.-Saber Marionett

    8.-Capitan Tsubasa

    9.-Hellsing

    10.-Sakura Card Captor

    11.-Ynuyasha

    12.-Dragon Ball
    //
    //

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s