----------------------------
 
HOME AFILIADOS FORO CHAT
DESCARGAS
TUTORIALES
WEB
Prog. necesarios

DESCARGAR: uTorrent
Para poder descargar los torrent de la web


DESCARGAR: WinRar
Para poder abrir ciertos archivos que no los abre cualquier programa.

VEXZONEWEB [ VZW ]

>> ll VexZoneWeb ll << [ VZW ]

CSSbreve

Breve explicación vulgar:

CSS es un lenguaje que se usa para designar de qué estilo debe ser un objeto, siempre igual, en tu página web.

Estructura:

Selector{declaración}
Selector{propiedad: valor;}

Ejemplo:

Vamos a designar de qué estilo deben ser todos los links que yo escriba en la página (sin darle algún formato al escribirlo)

Selector que hay que usar: A:link
Alguna de las propiedades que usaremos en el ejemplo:
 
  • color (de los link)
  • font-size (tamaño de los link)
  • font-family (tipo de letra de los links)
VALORES DE COLOR:

Podemos insertar una palabra que es el nombre del color [ej: red (aquí podemos ver una página con los nombres y colores que podemos usar)]
Podemos insertar un valor número del color (aquí tenemos más variedad de colores) [ej: #FF0000 (aquí tenemos una página donde podemos ver todos los códigos cada color)]

VALORES DE FONT-SIZE:

Debemos insertar el valor del tamaño de la letra de los links, en pixeles (8px:25px)

VALORES DE FONT-FAMILY:

El navegador de un user al entrar en tu página, leerá el valor que hayas escrito aquí, buscará en la pc del user si tiene descargado el Font o Tipo de letra con el nombre que tu hayas puesto como valor y si lo tiene, los links aparecerán con el tipo de letra correspondiente y si no lo tiene descargado no lo leerá. Por lo tanto, es conveniente poner, aquí, alguno de los fonts más conocidos y que todo el mundo tiene en su pc, por defecto:

Arial
Times new roman
Verdana
Tahoma
Courier new
Comic Sans MS

Si ya hemos escogido los valores de estas 3 propiedades, debemos armar el código:

<style>
A:link{
color: #FF0000;
font-size: 11px;
font-family: Courier New;
}
</style>
Referencias del Ejemplo:

Tag Style: Solamente la usamos cuando, donde colocamos el código, es un cuadro que acepta html. Si el cuadro, es especialmente para css, lo quitamos.
Selector: Objeto a modificar y/o a darle estilo.
Propiedad: Categoría o propiedad del objeto a modificar y/o a darle estilo.
Valor: Opción a elegir que designa cómo debe ser el objeto en cuanto a esa propiedad.

Algunos selectores (objetos que se pueden modificar de tu página):

Textarea{}: Aquí modificamos como deben ser todos los campos de texto grandes que haya en la web.
Input{}: Aquí modificamos cómo deben ser todos los campos de texto de un renglón que haya en la web.
Input.button{}: Aquí modificamos cómo deben ser todos los botones (colocados con el tag Input button) que haya en nuestra web.
Content{}: Aquí modificamos cómo debe ser el contenido de nuestra web.
Img{}: Aquí modificamos todas las imágenes que haya en nuestra web.
A:link{}: Aquí modificamos todos los links que haya en nuestra web.

Hay muchos selectores y también pueden variar dependiendo de nuestra web y es lo que no se estudia de memoria. Si quieren saber el nombre de algún selector de tu página, no duden en preguntar, si se ha descubierto lo diremos, si no no.

Propiedades y sus valores más usados:

{Widht: Aquí se usa un valor en pixeles de 3 o 4 cifras, definiendo el ancho del objeto.
{Height: Aquí se usa un valor en pixeles de 3 o 4 cifras, definiendo el alto del objeto.
{Color: Ya ha sido explicado. Un valor númerico o una palabra, definiendo el color del objeto.
{Font-size: Ya ha sido explicado. Un valor en pixeles, definiendo el tamaño de la letra del objeto.
{Font-face: Ya ha sido explicado. El nombre del font, definiendo el tipo de letra del objeto.
{Text-decoration: Se pueden usar estos valores: underline (subrayado), overline (línea superior), line-through (tachado), blink (parpadeo), o la por defecto none (ninguna), definiendo la decoración de todo el texto del objeto.
{Background-color: Se coloca un valor numérico o una palabra, definiendo el color de fondo del objeto.
{Background-image: none: Se coloca la url de una imagen entre el paréntesis, definiendo la imagen de fondo del objeto.
{border: Se coloca un valor en pixeles de 2 cifras, definiendo el grosor del borde del objeto.
{border-color: Se coloca un valor númerico o una palabra, definiendo el color del borde del objeto.

Recuerden, cuando termine el valor de cada propiedad, finalicen con un ; (punto y coma).

 

TUTORIAL HECHO POR nixoweb.es.tl

--------------------------
Copyright © 2009 VexZone ll Diseño creado por diegovenegas.es.tl ll Adaptado por VexZoneWeb
Diseños Web
RECUERDE:

Si tienes alguna duda sobre algo o cualquier cosa comunícaselo a algún admin en el foro o en la dirección de correo electrónico.

spanol"> Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis