Aprendiendo lo básico de CSS

  • Iniciador del tema Iniciador del tema Azecti
  • Fecha de inicio Fecha de inicio
Azecti

Azecti

¡5000! Weee x2
Registrado
9 Abr 2009
Mensajes
5.022
35i3c6x.gif

Vale, hace mucho tiempo que he dejado esto de hacer tutoriales por la razón de que no me he inspirado en nada nuevo y que no he tenido el tiempo suficiente, vale acá les traigo un tutorial en el cual os voy a enseñar lo básico del CSS.

Conociendo el CSS
advert.png
El CSS también conocido como Cascade Style Sheets es el lenguaje utilizado para controlar la estructura, color e imágenes que encontramos dentro de nuestro layout, el css ha sido uno de los más importantes lenguajes creados para la creación de páginas webs ya que gracias al mismo logramos dar apariencia a nuestra web.
--------------------------------------------------------------------------------------------------------------------
Empezando a programar

Los colores
advert.png
Bien, para empezar a programar lo primero que debemos de tomar en cuenta son los colores, los colores los podemos como varias cifras de números pero siempre en éste debemos encontrar exactamente 7 cifras, si no es así el color elegido se cambiara a uno oscuro y claro (Blanco, negro).

Código de un color hexadecimal:
Código: 
color=#00ffff
Rojo
Código: 
color=#32CD32
Verde

Fuentes / Letras
advert.png
Las fuentes ó en inglés llamadas 'Fonts' son aquellas que utilizamos para tener un cierto formato de escritura tanto en web cómo en foros, blogs etc. Estás se muestran simbolizando una palabra o una oración. Para poder cambiar la misma debes de tener a la vista el siguiente código:

Código: 
body {
	font-family: "Tahoma", Verdana;
	font-size: 11px;
	color:#DDD;

Lo que debemos reemplazar es el atributo 'Tahoma' que encontramos por una fuente especifica entre ellas: Arial, Hobo STD, Calibri, Times New Roman.

Ejemplo: Éste es un ejemplo del cambio de fuente

 Los boxes
advert.png
Son un conjunto de 'Cajas' en la cual podemos observar un conjunto de palabras, imágenes y demás en el mismo. En éste podemos insertar una cierta información sobre noticias, actualizaciones entre otros. Obviamente, si tu texto es demasiado largo, sobresaldrá de la caja causando así el daño de estructura de tu web.

Podemos ver acá uno de los códigos que encontramos utilizados para los boxes.
Código: 
div#leftbox_top {
	width: 208px;
	height: 22px;
	background:url(images/boxes/leftbox_top.png);
	padding: 3px 0px 0px 7px;
	color:#FFF;
	font-weight: bold;
Podemos cambiar varios atributos del código como el padding, el fondo, la altura, la anchura y el color. Un ejemplo del código ya editado:
Código: 
div#leftbox_top {
	width: 255px;
	height: 41px;
	background:url(images/boxes/rigth_box_top.png);
	padding: 5px 7px 2px 1px;
	color:#000000;
	font-weight: bold,italic;
Cómo nos podemos fijar los atributos 'Width' y 'Height' han sido cambiados por otra cifra de números. Al igual que el fondo del box ha sido cambiado por un box derecho, el color a un color negro y los efectos de fuente a bold e italic.

El footer
advert.png
En el footer podemos encontrar una cierta cantidad de elementos utilizados para redirigir a las reglas del foro, los grupos, los usuarios ó tan sólo para dar un mensaje de 'Copyrigth' en el cual podemos incluir varios parámetros tanto cómo una imagen a un simple archivo flash.

Ejemplo del código:
Código: 
div#footer {
	width: 1007px;
	height: 10px;
	background:url(images/footer.png);
	float:left
Como veis la anchura del foro es mucho mayor que la de la altura ya que esta debe de ajustarse al tamaño del foro, la idea no es tener un footer ni demasiado ancho ni demasiado alto.

Ejemplo del código ya editado:
Código: 
div#footer {
	width: 776px;
	height: 20px;
	background:url(images/inf_foo.png);
	float:center
Varios parámetros hemos cambiado como el ancho y la altura, al igual que el fondo y en donde se ubicara el footer.


Contenido de la web:
En el 'Container' es la parte de la página en la cual podemos escribir todo tipo de información, recursos, descargas etc. Obviamente este dispone de una imagen la cual permite ampliarse dependiendo de la cantidad de texto que éste tenga.

Ejemplo del código:
Código: 
div#container {
	background: url(images/container.png);
    width: 1007px;
    height: auto;
	margin: auto;
    overflow: hidden;}
Como podemos ver en el código encontramos varios atributos y casi siempre encontraremos los atributos 'Width' y 'Height', tambien podemos encontrar el fondo que como dije es la imagen que ayuda a la ampliación de la página, tambien vemos el 'Margin' ó el margen que es la parte desde donde comenzara escribir el texto.

Ejemplo del código editado:
Código: 
div#container {
	background: url(images/content_web.png);
    width: 1134px;
    height: auto;
	margin: left;
    overflow: hidden;}
Podemos ver que he cambiado varias partes como el fondo y los atributos altura y anchura al igual que el margen.

Bueno, hasta ahora eso es lo básico del css, espero que les haya sido de ayudada, todo ha sido redactado por mí. Saludos ;)
 
Increible te mereces alguito por este post, Me parese que esta muy fundamentado y muy bien explicado lo basico de este lenguaje, seguro que alguien lo va utilizar un dia de estos.
 
Atrás
Arriba