Hack x Crack - Comunidad de Seguridad informática

Programación => Programación Web => Diseño web => Mensaje iniciado por: TAR3KW0RM3D en Enero 08, 2013, 09:55:02 pm

Título: La sintaxis del CSS
Publicado por: TAR3KW0RM3D en Enero 08, 2013, 09:55:02 pm
     Hola amigos! Bueno esta vez os voy a explicar sobre la sintaxis del css, bueno es algo 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:

Código: [Seleccionar]
/*CSS sobre selector de etiquetas*/
body {
       font-family: arial;
       font-size: 12px;
       color: black;
       background-color: #cccccc;
}

Este tipode selector no requiere de aplicación en el documento HTML, las etiquetas a las que se les defina un estilo de esta forma automáticamente heredarán los estilos.

Código: [Seleccionar]
/*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:

Código: [Seleccionar]
<div id="header">Aqui el contenido</div>
Código: [Seleccionar]
/*CSS sobre selector de clase*/
.mi_clase {
       margin: 5px;
       height: 100px;
       width: 200px;
}

En los selectores de clase, usamos el atributo "class" en las etiquetas HTML para darles el estilo. Ejemplo:

Código: [Seleccionar]
<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 sección head de la página:

Código: [Seleccionar]
<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 páginas 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 sección <head> del documento HTML. Se hace de la siguiente forma:

Código: [Seleccionar]
<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 método no lo recomiendo, aunque algunas veces puede ser necesario. Consiste en aplicar el estilo directamente sobre el elemento HTML, de esta forma:
Código: [Seleccionar]
<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 "font-family" 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 página web, y poco a poco ir separando el contenido de la presentación, ademas de lograr en un documento completamente válido cosas que solo el poder de CSS puede lograr, como cambiar completamente la apariencia de una página sin tocar el archivo HTML.

UN SALUDO  8)  ;)

HxC I love you!!!!  :-*
xDD
Título: Re:La sintaxis del CSS
Publicado por: kid_goth en Enero 08, 2013, 09:56:11 pm
:O thanks :) a k133 le va a gustar
Título: Re:La sintaxis del CSS
Publicado por: TAR3KW0RM3D en Enero 08, 2013, 10:02:25 pm
Kid_goth espero que le guste!! :D
Saludoss
Título: Re:La sintaxis del CSS
Publicado por: Qfa en Septiembre 13, 2013, 05:10:47 pm
Gracias! Por el aporte! :)