20:12
Kevin
Codigos CSS para la gente
De la A hasta la C
- Background-attachment: valor
Este código nos permite especificar si la imagen de fondo se moverá según nos movamos por la página o estará fija en la pantalla. Si está fija en la pantalla la imagen siempre se verá en el mismo sitio por mucho que nos movamos por la página.
Para que esté fija en la pantalla tenemos que poner de valor "fixed", y para que se mueva junto al contenido pondremos de valor "scroll" (es la que viene por defecto si no lo indicamos).
Un ejemplo del valor fixed es éste. - Background-color: código
Nos permite establecer el color de fondo. Donde pone "código" debemos poner el código html del color que queramos. - Background-image: url(rutadelaimagen.jpg)
Nos permite establecer la imagen de fondo. Donde pone "rutadelaimagen.jpg" debemos poner la ruta de la imagen. - Background-position: valor
Nos permite elegir la posición de la imagen de fondo si le hemos puesto que no se repita. Donde pone "valor" podemos poner left (izquierda), right (derecha), center (centro), bottom (fondo) o top (arriba). Podemos poner si queremos dos valores, por ejemplo "background-position: left bottom". - Background-repeat: valor
Nos permite indicar cómo se repetirá la imagen de fondo. Sus valores pueden ser "repeat" (para que se repita), "no-repeat" (para que no se repita), "repeat-x" (sólo se repite en el eje x) y "repeat-y" (sólo en el eje y). - Border-width: tamañopx
Nos permite establecer el grosor de los bordes. Donde pone "tamaño" tenemos que poner el valor.
Si queremos que afecte sólo a un borde podemos usar "border-bottom-width" para el borde de abajo, "border-top-width" para el borde de arriba, "border-left-width" para el borde de la izquierda o "border-right-width" para el borde de de la derecha. - Border-color: código
Nos permite establecer cuál será el color de los bordes de lo que estamos definiendo. Donde pone "código" tenemos que poner el código del color.
Podemos usar "Border-bottom-color", "Border-top-color", "Border-left-color" o "Border-right-color" - Border-style: valor
Nos permite definir el estilo de los bordes. Donde pone "valor" podemos poner los siguientes valores (el normal es solid): - Clear: valor
Se usa junto a float, de forma que lo que hace es que no se alinee con elementos que tengan la propiedad float. Donde poner valor podemos poner "right" para que no se alinee con elementos flotantes en la derecha, "left" para la izquierda y "both" para ambos lados. - Color: código
Nos permite indicar el color de los objetos que tenga en el interior (normalmente el color del texto). - Cursor: valor
Nos permite cambiar el cursor del ratón cuando lo situemos encima de el elemento al que le asignamos el estilo. Sus valores pueden ser "default" (flecha), crosshair (cruz), e-resize (flecha hacia la derecha), hand (mano), help (signo de interrogación), move (cruz con flechas), n-resize (flecha hacia arriba), ne-resize (flecha hacia el noreste), nw-resize (flecha hacia el noroeste), pointer (mano), s-resize (flecha hacia abajo), se-resize (flecha hacia el sureste), sw-resize (flecha hacia el suroeste), text (I), w-resize (flecha hacia la izquierda) y wait (reloj de arena).
| dashed | dotted | double | groove |
| inset | outset | ridge | solid |
De la D hasta la L
- Direction: valor
Este código nos permite especificar la dirección en la que se escribirá el código. Los distiontos valores son ltr, rtl y inherit. ltr hace que el texto e escriba de izquierda a derecha, rtl hace que el texto e escriba de derecha a izquierda, e inherit hace que tenga la misma propiedad que el objeto que contenga al que le pones esta propiedad. - Display: valor
Este código define el tipo de "caja" o bloque que contiene al elemento. Algunos valores útiles son: block (genera un bloque con un salto de línea antes y después (utilizado en el tutorial para algunos enlaces)), table (el elemento se comporta como un <table> con salto de línea antes y después), inline (genera un bloque sin marcar y sin salto de línea, que es la opción predeterminada), none (no genera ningún bloque y el elemento no se vería), inherit. - empty-cells: valor
Este código define si en una celda vacía de una tabla se mostarán o no los bordes. Los valores posibles son hide (para que no se muestren), show (para que se muestren, es la de por defecto) e inherit. - float: valor
Permite sacar un elemento de la línea en la que se está escribiendo el mismo, y situarlo a un lado. Esto sirve por ejemplo para situar imágenes a los lados de un texto, mientras que si no se usara esta propiedad la imagen aparecería en la misma línea del texto. Los valores son right (derecha), left (izquierda), none (sigue en la misma línea y no se sale), inherit. - font: valor1 valor2 valor3...
Permite definir el tipo de fuente del texto. Los valores posibles son los mismos que los siguientes códigos que empiezan por "font-", permitiendo ponerlos todos en un sólo código con múltiples valores. - font-family: valor
Permite definir la fuente que tendrá el texto, por ejemplo Arial. - font-size: valor
Permite definir el tamaño de fuente del texto, por ejemplo 10px. También se pueden usar em en vez de px (píxeles), siendo 1em el tamaño por defecto, de forma que por ejemplo 2em es el doble de grande, o 0.5em es la mitad de pequeño. - font-style: valor
Los posibles valores son italic, oblique, normal e inherit. - font-weight: valor
Permite definir el grosor de la fuente. Algunos ejemplos de valores son bold, bolder (más grueso que el que tenga puesto), lighter (más fino) o normal. - height: valor
Permite definir la altura del elemento, por ejemplo 100px. - left: valor
Permite definir la distancia a la que estará el elemento por el lado izquierdo del borde del elemento que le contenga, por ejemplo 5px. - letter-spacing: valor
Permite definir la distancia entre las letras (sólo para elementos h1 y h2), por ejemplo 2px o -1px. - line-height: valor
Permite definir la altura de la línea en la que estás escribiendo, por ejemplo 20px. - list-style: valor
Permite definir los símbolos a usar en una lista (por ejemplo <ol> o <ul>).Los valores que puede tomar son:- cjk-ideographic
- cjk-ideographic
- circle
- circle
- decimal
- decimal
- decimal-leading-zero
- decimal-leading-zero
- disc
- disc
- georgian
- georgian
- armenian
- armenian
- lower-alpha
- lower-alpha
- lower-greek
- lower-greek
- lower-latin
- lower-latin
- lower-roman
- lower-roman
- square
- square
- upper-alpha
- upper-alpha
- upper-latin
- upper-latin
- upper-roman
- upper-roman
- none
- none
- list-style-image: url(rutadelarchivo)
Permite definir el elemento de la lista como una imagen que tengas.
De la M hasta la P
- margin: valor
Este código nos permite especificar el margen del objeto. El margen se define como el espacio que hay entre el objeto y el objeto que contenga al mismo. En la siguiente imagen podemos ver un margen de 4 píxeles en el div rojo, que está contenido en el amarillo:
El valor que puede tomar es el número de píxeles, por ejemplo 20px. Puede tomar cuatro valores (Ej.: margin: 4px 5px 6px 3px), siendo estos, por orden, el superior, derecho, inferior e izquierdo. También podemos usar margin-bottom, margin-top, margin-left y margin-right para definir los márgenes inferior, superior, izquierdo y derecho respectivamente. - max-height: valor
Sirve para fijar una altura máxima para un elemento (por ejemplo para un div). Hay que tener cuidado, porque si el contenido sobrepasan esa altura se saldrá del elemento quedando un poco raro, pero veremos cómo solucionarlo en el comando overflow. El valor es en píxeles o en porcentaje. También existe min-height, max-width y min-width para definir la altura mínima, el ancho máximo y el ancho mínimo. - outline: valor1 valor2 valor3 ...
Esta herramienta sirve para fijar como una especie de borde, pero exterior al que coloca la orden border. La utilidad de esta herramienta es que el comando border ocupa un espacio que otros elementos no pueden ocupar, hace que al añadirlo se mueva todo, pero el comando outline dibuja el borde como si fuera de fondo, sin mover nada.
Los valores pueden ser el tamaño que ocupa, el color que tenga, así como su estilo, que son los siguientes:
Como podreis ver se montan unos outline encima de otros, debido que no se readaptan moviendo el contenido. Podría separarlos coun margin, pero he preferido dejarlos así para que lo comprendais mejor. También podemos usar los comandos outline-color, outline-style y outline-width.dashed dotted double groove inset outset ridge solid - overflow: valor
Como vimos en el comando max-height, se nos puede salir el contenido fuera del contenedor, pero lo podemos arreglar con el comando overflow, en el que podemos poner los valores visible (hace que lo que se sale fuera se vea), hidden (hace que lo que se salga fuera no se vea) y scroll (hace que aparezca una barra de desplazamiento). Aquí os dejos los tres ejemplos: - padding: valor
Funciona exáctamente igual que el margin respecto a los valores que se le pueden poner, pero en este caso define la distancia entre el propio elemento y el contenido del mismo (recordemos que el margin era la distancia entre el elemento y el contenedor de dicho elemento, que es distinto). Al igual, también existen padding-bottom, padding-top, padding-right y padding-left. - position: valor
Determina la posición del elemento. Puede tomar como valores static (es la posición predeterminada, de forma que se van colocando los elementos uno debajo del anterior), absolute (Definimos la posición que tendrá independientemente del resto de elementos, y se fijará respecto a la esquina superior izquierda del elemento que lo contenga. Ver los comandos top y left para ver como fijar la posición) y fixed (Definimos la posición respecto a la esquina superior izquierda de la web dentro del explorador, de forma que aunque bajemos en la web con la barra de desplazamiento el elemento no se moverá de la pantalla y seguirá en la misma posición. Ver los comandos top y left.).
overflow: visible visible visible visible visible visible visible visible visible visible.
overflow: scroll scroll scroll scroll scroll scroll scroll scroll scroll scroll.
De la Q hasta la Z
- size: valor
Nos permite elegir el tamaño de un elemento que no sea texto. Toma dos valores (Ej: size: 20px 50px), siendo, por orden, el ancho y la altura. - table-layout: valor
Nos sirve para indicarle al navegador cómo debe de calcular el tamaño de una tabla. Los valores pueden ser fixed (que determina el ancho de la tabla a partir del ancho de la primera fila) y auto (que determina el ancho de la tabla a partir de la fila más ancha, por lo que no puede generar la tabla hasta que sepa el ancho de todas las filas). - text-align: valor
Nos permite definir cómo se alineará el texto del interior del elemento. Los valores pueden ser center (centrado), justify (justificado), right (en la derecha) y left (en la izquierda). - text-decoration: valor
Nos permite definir que decoración o decoraciones tendrá el texto. Los valores pueden ser blink (parpadeando), line-through (tachado), overline (subrayado por arriba), underline (subrayado normal) o none (ninguna). Aquí os dejo un ejemplo de las cuatro decoraciones:
blink line-through overline underline - text-indent: valor
Nos permite indicar el desplazamiento de la primera línea respecto al resto del mismo párrafo. El valor es el número de píxeles, pudiendo ser negativos (Ej.: -2px). - text-shadow: valor1 valor2 valor3 valor4
Nos permite crear sombras de en el texto (no es soportado por todos los navegadores). Tenemos que ponerle cuatro valores: el color, la posición horizontal relativa de la sombra, la posición vertical relativa y la dispersión de la sombra (a valores mayores peor se leerá la sombra) (Ej.: text-shadow: #AAFF88 10px -5px 1px). - text-transform: valor
Nos permite transformar letras del texto en mayúsculas o minúscular. Los valores son capitalize (convierte en mayúsculas la primera letra), uppercase (convierte todas las letras en mayúsculas), lowercase (convierte en minúsculas todas las letras) y none (lo escribe tal y como se escriba en el código). - top: valor
Permite definir la distancia a la que estará el elemento de la parte superior del borde del elemento que lo contenga, por ejemplo 5px. - vertical-align
Permite definir cómo se alineará verticalmente el texto. Los valores pueden ser baseline (valor por defecto, que sitúa al elemento en línea, en la línea base del contenedor), middle (sitúa la línea media del elemento en la línea base del contenedor), sub (lo sitúa como subíndice), super (lo sitúa como superíndice), text-bottom, text-top, bottom y top. También podemos usar una cantidad de píxeles como valor, o un porcentaje. - visibility: valor
Nos permite definir si un elemento será visible o no, pero si no lo es queda su espacio reservado no pudiendo ser ocupado por otro objeto. Se diferencia del comando display en que display no reserva el espacio y lo pueden ocupar otros objetos. Los valores son visible (visible) y hidden (oculto). - white-space: valor
Como vimos en la primera lección, si en html escribimos varios espacios o incluso un salto de línea, ese código se interpreta como si eso fuera un sólo espacio en blanco. Esta interpretación se cambia con este comando. Además hay que tener en cuenta que en el texto se añaden unos "saltos de línea" extra para que el contenido no se salga por el lado derecho del contenedor. A continuación os dejo una tablita con los distintos valores y lo que hace cada uno: - width: valor
Nos permite definir el ancho del elemento. El valor es el número de píxeles o un porcentaje. - word-spacing: valor
En un texto cada palabra está separado por un espacio en blanco. Este comando nos permite definir ese espacio en blanco. El valor es el número de píxeles. - z-index: valor
Con el comando "position: absolute" o "position: relative" podemos poner un elemento donde queramos, como ya vimos en su momento. Pues bien, puede ser que pongamos dos elementos de forma que quede uno encima del otro, ocupando espacio del otro. Con la opción z-index podemos elegir qué elemento se verá por encima de qué otro. De esta forma en z-index el valor será un número, de forma que el elemento con mayor z-index se verá por encima del que tenga menor z-index. A igualdad de z-index se ve encima el que aparezca después en el código.
| Valor | Elimina espacios sobrantes | Elimina saltos de línea | Añade saltos de línea extras para ajustar |
|---|---|---|---|
| normal | Sí | Sí | Sí |
| pre | No | No | No |
| nowrap | Sí | Sí | No |
| pre-wrap | No | No | Sí |
| pre-line | Sí | No | Sí |
Posteado en: Como crear tu blog
0 comentarios:
Publicar un comentario