Que Es CSS

Que es CSS?
Siglas de "Cascading Style Sheets" (Hojas de Estilo en Cascada), es una tecnologa desarrollada con el fin de separar la presentacion de la estructura del HTML. Funciona aplicando reglas de estilo a los elementos HTML, entre las que incluyen, tamao, color de fondo, color del texto, posicion de los elementos, margenes, tipos de letra, etc... quedando de esta manera toda lo que tiene que ver con la parte grfica de la web, separada completamente de la estructura del HTML. Este lenguaje desarrollado por la W3C, ha venido haciendose cada vez mas importante entre los diseadores, gracias a la facilidad de uso y a los optimos y flexibles resultados. Aprender a conocer CSS nos dar como resultado un mejor flujo de trabajo, mayor organizacin de nuestro codigo, menos peso en las paginas, y mas flexibilidad a los cambios. Ademas una vez familiarizados con sus capacidades, nos daremos cuenta de que es mas fcil y rpido disear con CSS que de la manera antigua. Bien, empecemos por el principio. Aqui intentare ensear como hacer documentos validos y que sean bien interpretados por la mayora de los navegadores actuales. Lograremos esto conociendo los tres principales elementos en el desarrollo de CSS: Palabras Claves: Cdigo: "Atributos, Valores y Selectores" Atributos Son las palabras que usaremos para indicar cual estilo queremos modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el atributo "font", si es el fondo, el atributo "background", etc. Valores Son para definir como vamos a modificar el atributo, o la propiedad que le daremos. Por ejemplo, si queremos que un tipo de letra sea rojo, usamos el atributo "font" y el valor "red". Selectores Se usan para definir sobre cuales elementos HTML vamos a aplicar los estilos, si queremos definir un estilo para toda la pagina, debemos usar el selector "body" que se refiere a la etiqueta <body> del documento HTML. Hay tres tipos de selectores: * Los selectores de etiquetas HTML, se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo. * Los selectores de identificador, se usan para aplicar estilos solo a las etiquetas identificadas con un nombre. * El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto "." seguido del nombre que le queramos poner a la clase, de esta forma: .mi_clase. La sintaxis:
Es muy simple, primero se coloca el selector, luego se abre una llave "{" y se empiezan a colocar los atributos, seguidos de dos puntos ":" y luego el valor seguido de punto y coma ";", al final de todo se cierra el estilo para el selector con el cierre de llave "}". Se pueden definir tantos atributos con sus respectivos valores como se desee, separandolos con un espacio o un salto de linea. En CSS se deben escribir los atributos y valores con minusculas y los comentarios se encierran con "/*" para abrir y "*/" para cerrar, como veremos en el siguiente ejemplo: Cdigo
/*CSS sobre selector de etiquetas*/ body { font-family: arial; font-size: 12px; color: black; background-color: #cccccc; }
Este tipode selector no requiere de aplicacin en el documento HTML, las etiquetas a las que se les defina un estilo de esta forma automticamente heredarn los estilos. Cdigo
/*CSS sobre selector de identificador*/ #header { background-color: #ff0000; color: #ffffff; font-size: 26px; }
En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador, como en este ejemplo: Cdigo Cdigo
/*CSS sobre selector de clase*/ .mi_clase { margin: 5px; height: 100px; width: 200px; } <div id="header">Aqui el contenido</div>
En los selectores de clase, usamos el atributo "class" en las etiquetas HTML para darles el estilo. Ejemplo: Cdigo
<div class="mi_clase">Aqui el contenido</div>
Ademas de esto, existen tres formas de aplicar estilos CSS a una pagina, la que recomiendo en primer lugar, haciendo un archivo de texto plano guardado como archivo.css, separado del archivo HTML, y vinculando la hoja HTML a el. Esto se hace colocando en la seccin head de la pgina: Cdigo
<link href="archivo.css" rel="stylesheet" type="text/css">
Para mi esta forma es la mas recomendable porque asi se puede vincular el archivo.css a todas las pginas del sitio, es mucho mas liviano al ver la pagina y ademas a la hora de modificar algo se hace solo una vez.
La segunda forma es aplicando los estilos directamente en la seccin <head> del documento HTML. Se hace de la siguiente forma Cdigo
<head> <title>Pagina</title> <style type="text/css"> <!-body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color:#333333; } --> </style> </head>
Es buena idea colocarlos de esta forma si son estilos exclusivos para la pagina a la que se le aplica. El tercer mtodo no lo recomiendo, aunque algunas veces puede ser necesario. Consiste en aplicar el estilo directamente sobre el elemento HTML, de esta forma: Cdigo
<table style="background-color:#333333; padding:2px; width:300px; height;100px;></table>
Como puede verse en algunos casos, los atributos pueden ser compuestos, como el atributo "fontfamily" o "background-color", puede llevar adicionalmente caracteristicas mas especificas, que van separadas por un guion "-" como vimos en los ejemplos. Los valores tambien pueden ser de diferentes tipos, en los de medida, se pueden usar pixeles "px" centimetros "cm" o relativos como "em", en los colores se puede usar la notacion hexadecimal (#FF3300) o directamente el nombre del color en ingles. De esta forma podemos aplicar estilos a todos y cada uno de los elementos HTML que constituyen una pgina web, y poco a poco ir separando el contenido de la presentacin, ademas de lograr en un documento completamente vlido cosas que solo el poder de CSS puede lograr, como cambiar completamente la apariencia de una pgina sin tocar el archivo HTML. Unicamente con el uso, se va uno acostumbrando a lo que se puede hacer con CSS, al principio, seguramente , les pasar (como a m) que solo lo usan para dar formato a los textos, tablas etc, pero luego uno va conociendo como trabaja y va aadiendo elementos a los archivos CSS. El punto ideal sera cuando logremos separar completamente el diseo del contenido, dominando las tcnicas de posicionamiento con CSS, y eliminando el uso de tablas para diagramar el contenido.
Bocha 2007
Cmo estructurar una hoja de estilos El propsito de este artculo es mostrar cmo estructurar de una forma sencilla y ordenada nuestras Hojas de Estilo (CSS). Va MaestrosDelWeb. Las Hojas de Estilo en Cascada (CSS) son el recubrimiento grfico de tu documento HTML. Cuando estamos creando una web tenemos presentes en todo momento tanto la estructura de nuestro cdigo HTML como del propio CSS. Y sabemos siempre en qu lnea del archivo buscar la informacin que necesitamos para modificar nuestros selectores y clases. Pero cuando ha pasado un tiempo desde que terminamos el desarrollo de este cdigo, y deseamos retomarlo porque queremos redisearlo partiendo del CSS ya escrito, o simplemente porque queremos hacer algunos ajustes, seguramente no nos acordaremos de la mitad de la informacin que antes tenamos tan clara. Por sto es esencial haber estructurado y documentado mnimamente nuestra Hoja de Estilo desde un principio para evitar estos sobresaltos posteriores.Como todo, las orientaciones que dejo escritas no son ms que eso: orientaciones. Debers buscar para tus Hojas de Estilo la estructura que mejor se adapte a tu forma de escribir el cdigo y te sea ms fcil de manejar. No obstante, este podra ser un buen punto de partida. Partiendo el cdigo: CSS nicos y mltiples Nuestra primera pregunta deber ser necesariamente si deseamos trabajar con un solo archivo CSS que contenga toda la informacin o si por el contrario queremos dividirla por cualquier motivo (comodidad a la hora de localizar los estilos, coexistencia de diseadores o programadores que se encargan exclusivamente de una parte del cdigo, etc.). Ya que sto va a condicionar nuestros pasos siguientes. Para el primero de los casos, esto es, un CSS nico, nuestro archivo podra tomar el nombre, por ejemplo de estilos.css. En realidad, para un CSS nico, sto no tiene excesiva importancia. Pero si por el contrario vamos a manejar varios archivos, es muy recomendable que el nombre que le demos sea descriptivo del contenido, y que a todos los unamos en otro nico archivo, a fin de realizar una nica llamada desde nuestro HTML. Tambin podramos hacer sucesivas llamadas desde nuestro HTML, pero con el sistema que yo propongo, nunca modificaramos nuestro HTML, sino nicamente un archivo CSS que contendr un listado de las hojas de estilo que van a ser llamadas cada vez. Vemoslo con un ejemplo: Hemos decidido dividir nuestro CSS en tres partes, a saber, maquetacin, formularios y colores. Lo que haremos en primer lugar ser crear un archivo al que llamaremos estilos.css. Este archivo importar las diferentes partes de nuestro CSS. Por otro lado, y separadamente, crearemos tres archivos que contengan cada una de las partes en que hemos decidido dividir nuestro estilo, es decir, maquetacion.css, formularios.css y colores.css. As pues, el contenido del archivo estilos.css ser ste: Cdigo
@import "maquetacion.css"; @import "formularios.css"; @import "colores.css";
As, con una sola llamada desde nuestro HTML al CSS raz (estilos.css), obtendremos la inclusin de todas las partes que forman nuestra hoja de estilos, y para aadir nuevas o eliminar las que hayan cado en desuso slo tenemos que modificar estilos.css sin preocuparnos de nada ms. informacin sobre el contenido: uso de comentarios Como primer paso para una estructuracin sensata de nuestro CSS, hemos aprendido ya a separar los estilos en varios archivos (si fuera necesario), y a llamarlos todos desde uno solo. Ahora bien, aunque los nombres sean muy descriptivos cuando los veamos en una lista de archivos, a la hora de editarlos es frecuente que los abramos todos a la vez, y a los diez minutos de estar cambiando constantemente de uno a otro, es probable que lleguemos a desorientarnos y no saber muy bien cul estamos modificando. Por eso, mi segunda recomendacin es iniciar cada archivo dejando escrito un comentario que nos ubique. Como apuntaba al principio, documentar mnimamente nuestro CSS va a ser de gran ayuda a la hora de realizar tareas sobre l con posterioridad. Pero esta documentacin no la haremos slo sobre el inicio del cdigo, sino que la iremos extendiendo a las diferentes partes, como veremos despus. La forma en que escribimos un comentario en CSS es inicindolo con /* y finalizndolo con */ . Por ejemplo Cdigo
/* Comentario a la hoja de estilos */.
De este modo, y retomando estilos.css, mi sugerencia es dejar un par de lneas nada ms iniciar el archivo que describan el proyecto, la autora, la licencia de uso en su caso, y el contenido del mismo, tal que as: Cdigo
/* * CSS para el sitio www.misitio.com * Importacin de las distintas hojas de estilo * Autor: Pepito Prez */ @import "maquetacion.css"; @import "formularios.css"; @import "colores.css";
En los dems archivos, dejaramos una indicacin parecida a sta: Cdigo

/* * CSS para el sitio www.misitio.com * MAQUETACIN >> Estructura del sitio (encabezado, cuerpo, columna(s) y pie) * Autor: Pepito Prez */
Seccionando el contenido de nuestra hoja
Independientemente del hecho de haber dividido nuestro estilo en varios archivos o no, mi tercera recomendacin pasa por separar fsicamente los diferentes estilos que van a formar nuestra hoja mediante el uso de comentarios. De una manera bastante bsica, y pensando en una pgina con una estructura de encabezado, contenido, barra lateral y pie, y un solo archivo css, podramos dividir nuestra hoja en algunas secciones que englobaran varios estilos. Me atrevo a apuntar siete: * Elementos Comunes * Estructura * Encabezado * Contenido * Barra Lateral * Pie * Formularios En cada una de ella incluiremos la informacin relativa a la misma. En Elementos Comunes definiramos selectores, encabezados, pseudo-selectores, pseudo-clases, pseudo-elementos, pequeos fixes, comportamiento en los enlaces y en definitiva, todo aquello que queremos que se aplique por igual a nuestro HTML. En Estructura daramos forma a las diferentes partes que van a formar nuestra web, esto es, determinaramos las dimensiones y ubicacin de nuestro encabezado, pie, barra lateral, etc. En las dems secciones escribiramos el diseo especfico de cada selector que se aplique exclusivamente a cada una de ellas. Como podis ver hemos intentado ir de lo ms general a lo ms especfico. Comentar, comentar, comentar. Estructura y nominacin No, no es una obsesin. Comentar el cdigo es la base de todo sto. Debemos tomarnos la molestia de comentar cada paso que demos al escribir nuestro css. Por ejemplo, antes de comenzar una seccin nueva, indiqumosla. Por ejemplo: Cdigo
/**************************************** * ELEMENTOS COMUNES * body, a, h1, h2, h3, h4, h5, img, div *****************************************/ /***************************************************** * ESTRUCTURA * #header, #content, #sidebar1, #sidebar2, #footer ******************************************************/
Pero no slo debemos comentar la estructura. Debemos comentar tambin los elementos que van a formar nuestra hoja, siempre que puedan llevarnos a una duda posterior, a fin de evitar esto. Por ejemplo: Cdigo
#contenedor{ width: 780px;
margin: auto; }
/*Esta propiedad deja el id centrado en la pantalla. */
Pero tambin: Cdigo

a, a:link, a:active, a:visited{ color: #004080; /* Azul Oscuro paraen los enlaces */ text-decoration none; /*El enlace no aparecer subrayado */ } a:hover{ color: #0066cc /* Azul Claro al pasar el ratn por encima de los enlaces*/ text-decoration: underline; /* Subrayado del enlace al pasar el ratn */ }
Un buen consejo para sto comienza no en nuestro CSS sino en nuestro HTML. Cuando demos nombre a nuestras clases (class) e identificadores (id), debemos tratar de ser lo ms descriptivos posible. Por ejemplo, no debemos llamar a una clase .verdegrande slo porque su formato inicial vaya a ser color verde y tipografa con tamao grande, porque si posteriormente deseamos que la clase no sea verde sino roja, adems de perder todo sentido, es posible que nos cueste buscarla en el cdigo por una simple cuestin de asociacin mental. Lo recomendable, por ejemplo, es aludir a su funcin para nominar, esto es, .copyright, o .comentario, o .datos. Claridad o ligereza. Pros y contras Como cuestin final me gustara poner en una balanza, aun cuando brevemente, la cuestin de la claridad versus la ligereza en la Hoja de Estilos. Muchas veces encontraremos opiniones enfrentadas acerca de la conveniencia o no de la agrupacin de selectores, el uso de herencias, la minimizacin de redundancias, la eliminacin de comentarios. El objetivo de todas estas tcnicas es hacer ms ligeras (disminuir el tamao) las hojas de estilo, porque supone una ralentizacin en los tiempos de carga de la pgina. Mi opinin a este respecto es simple: depender de dos factores, a saber, la complejidad del diseo y las expectativas de modificacin posterior . Si mi diseo tiene un CSS de 500 lneas, o preveo tener que modificarlo muy a la larga, yo prefiero que el archivo sea comprensible y manejable, aun a costa de que resulte unos cuantos kb ms pesado. Pero para gustos, colores. Debes ser t quien, ante cada caso concreto, decida qu es lo ms conveniente, claridad o ligereza. http://www.dxpro.es/index.php?topic=93.msg148#msg148

Que Es CSS

Transféré par

Informations du document

Titre original

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

Que Es CSS

Transféré par

Droits d'auteur :

Formats disponibles

Que es CSS?

@import "maquetacion.css"; @import "formularios.css"; @import "colores.css";

En los dems archivos, dejaramos una indicacin parecida a sta: Cdigo

Seccionando el contenido de nuestra hoja

/Esta propiedad deja el id centrado en la pantalla. /

Pero tambin: Cdigo

Vous aimerez peut-être aussi