Propiedades CSS

Propiedades CSS
Propiedades de texto
CSS cuenta con una gran cantidad de propiedades para modificar la apariencia del
texto se pueden dividir en dos de tipo y bloque.

6.1 Propiedades de tipo:
font-family : Modifica el tipo de letra.
font-weight: Establece el grosor de la tipografa.
font-variant: Estilo alternativo de letra.
font-size: Establece el tamao de la fuente.
font-style: Establece el estilo de la fuente.
color: Modifica el color de texto.
text-decoration: Implementa una decoracin en el texto.
line-height: Especifica el alto de lnea.
text-transform: Controla la capitalizacin de texto.

6.1.1 font-family: especifica la tipografa a utilizar por el documento.
La propiedad font-family puede tener varios valores como una especie de reserva
por si el navegador no identifica la primera fuente, cambiara el texto por la segunda
fuente, el nombre de la fuente se separa por comas (,).
Es recomendable empezar como valor la fuente deseada y al final dejar una fuente
genrica.
Si el nombre de la fuente tiene ms de dos palabras esta se escribe entre comillas.
Ejemplo

SI el navegador no interpreta a Georgia la fuente cambiara a Times New Roman e ira
pasando hasta la fuente final.
Esta es la lista de las fuentes ms utilizadas.
font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Courier New", Courier, monospace;
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Arial, Helvetica, sans-serif;
6.1.2 font-weight: Establece el grosor de la tipografa segn los siguientes valores:
normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit.
Ejemplo

6.1.3 font-variant: esta propiedad tiene dos valores normal y small-caps.
normal : es el valor que trae por defecto.
Small-caps: Convierte la tipografia que est en minscula a mayscula y si estuviera
en mayscula la hace un poco ms grande
Ejemplo

6.1.4 font-size: Establece el tamao de la fuente especificando el valor numrico o
el valor en texto:
Valores texto: small, medium, large, x-large, xx-large, x-small, xx-small, larger,
smaller.
Valores numricos: a los valores numricos se les puede especificar el tamao de la
unidad (en Pixeles (px), Porcentajes(%), puntos(pt) y emes (em)).
Ejemplo

Muestras

Nota: es ideal manejar los tamaos de importancia de texto con la ayuda de las
etiquetas <h1-6> y <p>antes de entrar a modificar el font-size.
6.1.5 font-style: Modifica el estilo de presentacin de la fuente sus posibles valores
normal, italic, oblique:
normal: Valor por defecto.
italic: Texto en itlica.
oblique: Oblicuo, este es muy similar a la itlica.
Ejemplo

6.1.6 color: cambia el color de texto segn el valor, los valores se pueden ingresar
de tres formas: Nombre en ingls, hexadecimal o los valores en rgb.
Ejemplo

6.1.7 text-decoration: Establece la decoracin del texto ya sea subrayado, tachado,
parpadeante, con una lnea superior y ninguna decoracin.
Los valores son los siguientes: none, underline, overline, line-through, blink.
Ejemplo

6.1.8 line-height: Modifica el alto de lnea de texto segn el valor suministrado, el
cual se puede especificar con nmeros, nmeros y la medida en(px,pt,%,em).
Si se pone como valor normal regresa al alto de lnea por defecto.
Ejemplo

6.1.9 text-transform: Modifica la capitulacin del texto segn el valor.
Los valores son:
none:Valor por defecto.
capitalize: Transforma la primera letra de cada palabra en mayscula
uppercase: Transforma todos los caracteres en maysculas.
lowercase: transforma tolos los caracteres a minscula.

Ejemplo

Ejercicio de aplicacin CSS
Crear una clase por propiedad anteriormente vista y luego aplicarlas en prrafos de
texto.
Ejemplo de una aplicacin.
<html>
<head>
<title>Ejecicio de tipos</title>
<style type="text/css">
.textoTachado{text-decoration:line-through;}
</style>
</head>
<body>
<p class="textoTachado">este texto esta tachado</p>
</body>
</html>

Propiedades de Bloque:

word-spacing: Especifica el espacio en blanco entre palabras.
letter-spacing: Especifica el espacio en blanco entre letras.
vertical-align : Establece la alineacin vertical de un elemento.
text-align: Especifica la alineacin horizontal del texto en un elemento.
text-indent : Especifica la sangra de la primera lnea en un texto de bloque.
white-space :Especifica el tratamiento de los espacios en blanco del texto.
display : Define como cierto elemento de HTML que se debe mostrar.

6.2.1 word-spacing: La propiedad word-spacing aumenta o disminuye el espacio
en blanco entre las palabras segn el valor que tenga.
El valor se especifica por medio de nmeros y sus unidades en (px,pt,cm,em).
Ejemplo

6.2.2 letter-spacing: La propiedad letter-spacing aumenta o disminuye el espacio
en blanco entre las letras segn el valor que tenga.
El valor se especifica por medio de nmeros y sus unidades en (px,pt,cm,em).
Ejemplo

6.2.3 vertical-align: Establece la alineacin vertical de un elemento segn su valor
tomando como referencia el contenedor del elemento.
Sus posibles valores son:
longitud en nmeros: nmeros y sus unidades en (px,%,cm,em).
baseline: Alinear la lnea base del elemento con la base del elemento padre.
sub: Alinea el elemento como lo fue el subndice.
super: Alinea el elemento como lo fue el superndice.
top: La parte superior del elemento se alinea con la parte superior del
elemento ms alto en la lnea.
text-top: La parte superior del elemento se alinea con la parte superior de la
fuente del elemento padre.
middle: El elemento se pone en el centro del elemento primario.
bottom: La parte inferior del elemento est alineado con la parte inferior de
la fuente del elemento padre.
text-bottom: La parte inferior del elemento est alineado con la parte
inferior de la fuente del elemento padre.

Ejemplo

6.2.4 text-align: Define la justificacin del texto segn su valor.
Los posibles valores son: left, right, center y justify.
Ejemplo

6.2.5 text-indent: especifica la sangra de la primera lnea en un texto de bloque
segn su valor en nmeros y sus unidades en (px,%,cm,em,pt).
Ejemplo

6.2.6 white-space: Controla los espacios en blanco de un texto segn sus valores.
Los valores que maneja son estos.
normal: comportamiento por defecto.
pre: se respetan los espacios en blanco y las nuevas lneas. Si la lnea es muy
larga, se sale del espacio asignado para ese contenido.
nowrap: elimina los espacios en blanco y las nuevas lneas. Si la lnea es muy
larga, se sale del espacio asignado para ese contenido.
pre-wrap: se respetan los espacios en blanco y las nuevas lneas, pero
ajustando cada lnea al espacio asignado para ese contenido.
pre-line: elimina los espacios en blanco y respeta las nuevas lneas, pero
ajustando cada lnea al espacio asignado para ese contenido.

Ejemplo

6.2.7 display : Cambia el comportamiento del elemento HTML, segn lo indique el
valor.
Entre sus valores ms utilizados son:
inline : El elemento se comporta como uno de tipo Inline.
block :El elemento se comporta como uno de tipo bloque.
list-item :Se muestra el elemento como un item de lista.
none : El elemento Html no se muestra en pantalla.

Ejemplo


Crear una clase por propiedad anteriormente vista y luego aplicarlas en prrafos de
texto.
<html>
<head>
<title>Texto en CSS </title>
.separaLetras{letter-spacing:15px;}
.separaPalabras{word-spacing:30px;}
</style>
</head>
<body>
<p class="separaLetras">Las letras estan separadas en este
parrafo</p>
<p class="separaPalabras">en este parrafo las palabras
estan separadas</p>
</body>
</html>

Propiedades de lista:

list-style-type : especifica el tipo de marcador de tems de lista en una lista.
list-style-image : especifica la imagen de vieta.
list-style-position : especifica si la vieta es interior o exterior de la caja de
contenido.

6.3.1 list-style-type: Especifica el estilo de vieta que tendr la lista segn el valor
indicado.
Los posibles valores son
none : No muestra ninguna vieta en la lista

Valores grficos
disc : Muestra un crculo relleno, este es el valor por defecto del <ul>
circle : Muestra un crculo sin relleno.
square : Muestra un pequeo cuadro.

Valores numricos
decimal : El marcador de vieta es un nmero, es el valor por defecto del
<ol>
decimal-leading-zero :El marcador de vieta es un numero con un cero a la
izquierda (01,02,03,etc).
lower-roman : El marcador es la menor romana (i, ii, iii, iv, v, etc.)
upper-roman :El marcador es la mayor romana (I, II, III, IV, V, etc.)
armenian : EL marcador es la numeracin armenia.
georgian : El marcador es la numeracin georgiana.
hebrew : El marcador es la numeracin Hebrea.
Hiragana : El marcador es la numeracin Hiragana.
katakana : El marcador es la numeracin Katana.

Valores alfanumricos
upper-latin : El marcador son caracteres latinos en mayscula.
lower-alpha : El marcador son caracteres alfabticos en minscula
lower-greek : El marcador son caracteres griegos.
lower-latin : El marcador son caracteres latinos en minscula
upper-alpha : El marcador son caracteres alfabticos en mayscula.

Ejemplo.

6.3.2 list-style-image : Permite reemplazar las vietas estandarizadas por una
imagen personalizada, indicando como valor la ruta de la imagen.

Ejemplo:

6.3.3 list-style-position : Muestra las vietas en la parte exterior o inferior segn el
valor indicado.
inside: Vieta interior.
outside: Vieta Exterior.

Ejemplo


Crear una clase por propiedad anteriormente vista y luego aplicarlas en listas
diferentes.

<html>
<head>
<title>listas en CSS </title>
.armenia{list-style-type:armenian;}
.katana{list-style-type:katana;}
</style>
</head>
<body>
<h3>lista armenia </h3>
<ul class="armenia">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<h3>lista Katana</h3>
<ul class="katana">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</body>
</html>

Propiedades de Fondo:

background-color : Define el color de fondo de un elemento HTML.
background-image : Define la imagen de fondo de un elemento HTML.
background-repeat : Controla el tipo de repeticin de la imagen de fondo.
background-attachment : Controla si la imagen de fondo se mueve o
permanece fija cuando se hace scroll en la ventana del navegador.
background-position :Controla la posicin de la imagen de fondo.

6.4.1 background-color : Define el color de fondo de la mayora de los elementos
HTML segn el valor.
Las 3 formas ms utilizadas para indicar el color son:

Ejemplo

6.4.2 background-image : Establece una o varias imgenes de fondo en un
elemento HTML.
El fondo de un elemento es el tamao total del elemento, incluido el relleno y el
borde (pero no la margen) Ver Modelo de Cajas.
Por defecto, una imagen de fondo se ubica en la esquina superior izquierda de un
elemento, y se repite tanto vertical como horizontalmente.
Ejemplo: Si la imagen de fondo es ms grande que el contenedor.

Ejemplo: Si la imagen es ms pequea que el contenedor.

background-image utiliza como valor la url del sitio donde se encuentra la imagen.
Ejemplo:

6.4.3 background-repeat : Controla el tipo de repeticin de la imagen de fondo
segn el valor, solo se puede determinar uno de los siguientes valores.
repeat : Valor por defecto, repite la imagen en X y Y.
repeat-x : Repite la imagen solo en el eje X.
repeat-y : Repite la imagen solo en el eje Y.
no-repeat : No repite la imagen ni en x o en y

Ejemplo de uso
Imagen repitindose en x en el contenedor.

Imagen repitindose en y en el contenedor.

Imagen no-repeat

Ejemplo:

6.4.4 background-attachment : Controla si la imagen de fondo se mueve o
permanece fija cuando se hace scroll en la ventana del navegador.
Sus valores son.
fixed :El fondo permanece esttico, aunque se desplace el contenido de la
pagina.
scroll: Valor por defecto, la imagen de fondo se desplaza con el scroll de la
pgina.

Ejemplo

6.4.5 background-position: Controla la posicin de la imagen de fondo, segn el
valor.
left top : posiciona la imagen en la parte superior izquierda
left center :posiciona la imagen en la parte izquierda y al medio
left bottom : posiciona la imagen en la parte inferior izquierda
right top :posiciona la imagen en la parte superior derecha
right center :posiciona la imagen en la parte derecha y al medio
right bottom :posiciona la imagen en la parte inferior derecha
center top :posiciona la imagen en la parte central superior
center center : posiciona la imagen en la parte central en el medio
center bottom : posiciona la imagen en la parte central inferior

Ejemplos grficos

Tambin se pueden pasar los valores por coordenadas en (Pixeles px o
Porcentajes %) donde el primer valor ser la posicin horizontal y el segundo
valor la posicin vertical.
Ejemplo

Propiedades de Cuadro

width: Define el ancho del elemento HTML.
height: Define el Alto del elemento HTML.
margin: Especifica las mrgenes del elemento HTML.
padding: Especifica el relleno del elemento HTML.
border: Especifica el borde del elemento HTML.
float: Posiciona un elemento HTML de forma flotante.
clear: No reconoce elementos flotantes.

width: Define el ancho de los elementos html tomando como valor la media en
(Pixel, Picas, Porcentaje, Emes, Equix, etc) o poner el valor en auto y el navegador lo
calcula de manera automatica.
Ejemplo:

height: Define el alto de los elementos html tomando como valor la media en (Pixel,
Picas, Porcentaje, Emes, Equix, etc) o poner el valor en auto y el navegador lo calcula
de manera automatica.
Ejemplo:

Ejemplo combinando width y height:

margin: Define la margen de los elementos HTML tomando como valor la media en
(Pixel, Picas, Porcentaje, Emes, Equis, etc).
La margen la podemos especificar de diferentes formas, si ponemos un solo valor la
margen es global es decir para todos los lados del elemento.

Tambin podemos especificar cunto de margen queremos en cada lado, dndole los
valores en el orden de las manecillas del reloj empezando desde las 12 (arriba,
derecha, inferior, izquierda)

Existen otras propiedades para modificar la margen del elemento HTML
margin-top : Especifica la margen superior del elemento segn el valor en (Pixel,
Picas, Porcentaje, Emes, Equis, etc).
margin-right: Especifica la margen derecha del elemento segn el valor en (Pixel,
margin-bottom: Especifica la margen inferior del elemento segn el valor en (Pixel,
margin-left: Especifica la margen izquierda del elemento segn el valor en (Pixel,
Ejemplo

padding: Define el relleno de los elementos HTML tomando como valor la media en
(Pixel, Picas, Porcentaje, Emes, Equis, etc).

El padding aumenta el ancho y el alto del elemento HTML
El padding(relleno) lo podemos especificar de diferentes formas, si ponemos un solo
valor el relleno ser global es decir para todos los lados del elemento.

Tambin podemos especificar cunto de relleno queremos en cada lado, dndole los
valores en el orden de las manecillas del reloj empezando desde las 12 (arriba,
derecha, inferior, izquierda)

Existen otras propiedades para modificar el padding del elemento HTML
padding-top : Especifica el relleno superior del elemento segn el valor en (Pixel,
padding-right: Especifica el relleno derecha del elemento segn el valor en (Pixel,
padding-bottom: Especifica el relleno inferior del elemento segn el valor en (Pixel,
padding-left: Especifica el relleno del elemento segn el valor en (Pixel, Picas,
Porcentaje, Emes, Equis, etc).
Ejemplo

Border : Define el borde de un elemento HTML especificndole el color, estilo y
tamao del borde separados por un espacio, en caso que no especifique alguno de
los tres valores CSS le dar un valor por defecto, el tamao del borde aumenta el alto
y ancho del elemento HTML.
Ejemplo

Si no declaramos algunos de los valores, CSS lo pondr por defecto.
En el siguiente ejemplo pondr el valor de tamao de manera automtica.

El valor por defecto de color es el negro y el del estilo de borde es none.
Valores de estilo de borde:
none: No se muestra ningn borde.
hidden : Esconde los bordes, su visualizacin en el navegador es muy
parecida al none.
dotted : Borde punteado alrededor del cuadro.
dashed: Borde discontinuo.
solid: Borde continuo, formado por una lnea recta continua.
double : Borde doble, formado por dos lneas rectas continuas separadas
entre s por un espacio en blanco.
groove : Borde hundido, en la interfaz de usuario parece que se encuentra por
debajo del nivel de la superficie de la pantalla.
ridge: Borde saliente, en la interfaz de usuario parece saldr del nivel de la
pantalla.
inset: Borde hundido, hacer parecer al elemento que tiene el borde como si
estuviera por debajo del nivel normal de la pantalla.
outset: Borde saliente, hacer parecer al elemento que tiene el borde como si
estuviera por encima del nivel normal de la pantalla.

CSS tiene otras propiedades que permiten modificar el borde de manera ms
segmentada.
border-style: Define el estilo de borde segn el valor (none, solid, inset, ouset, dotte,
etc.)
border-color: Define el color del borde segn el valor; se pueden pasar los valores
en: Ingles, valor RGB o Hexadecimal.
border-widht: Define el ancho de borde segn el valor, este se puede pasar en
medidas(px, em, pt, etc) o con valores predeterminados:
thin: lnea delgada.
medium: lnea mediana.
thick: lnea gruesa.

Otras propiedades de borde en CSS.
border-left: Define el borde del elemento HTML solo en el lado izquierdo.
border-top: Define el borde del elemento HTML solo en el lado superior.
border-right: Define el borde del elemento HTML solo en el lado derecho.
border-bottom: Define el borde del elemento HTML solo en el lado inferior.
border-left-style: Define el estilo de borde solo en el lado izquierdo.
border-left-color: Define el color de borde solo en el lado izquierdo.
border-left-width: Define el ancho de borde solo en el lado izquierdo.
border-right-style: Define el estilo de borde solo en el lado derecho.
border-right-color: Define el color de borde solo en el lado derecho.
border-right-width: Define el ancho de borde solo en el lado derecho
border-top-style: Define el estilo de borde solo en el lado superior.
border-top-color: Define el color de borde solo en el lado superior.
border-top-width: Define el ancho de borde solo en el lado superior.
border-bottom-style: Define el estilo de borde solo en el lado inferior
border-bottom-color: Define el color de borde solo en el lado inferior
border-bottom-width: Define el ancho de borde solo en el lado inferior
float: En Html los elementos se van presentado en un mismo flujo uno tras otro lo
que hace la propiedad float es sacarlo de este flujo y ponerlo a flotar segn el valor
especificado.
Valores float:
left: Flota el elemento HTML a la izquierda.
right: Flota el elemento HTML a la derecha.
none: no flota el elemento HTML.
Ejemplo float.

Al decirle al elemento amarillo que flote sale del flujo normal y el azul pasa a ocupar
su posicin, no se alcanza a ver por que el amarillo queda sobre l.
Supongamos que lo miramos desde otro punto de vista.

Clear: Cuando un elemento esta flotando el siguiente en el flujo pasa a ocupar su
lugar, el clear no permite que esto ocurra. Tiene los siguientes valores:
left: no ocupa el lugar de otro elemento que este flotando a la izquierda.
right: no ocupa el lugar de otro elemento que este flotando a la derecha.
both: no ocupa el lugar de otro elemento sin importar para donde este flotando.

7.Bibliografa

Diseo Web con CSS Ralph G. Schulz, marcombo.
http://www.w3schools.com/css/default.asp
http://www.librosweb.es/css/index.html
Revisin, Preparacin y Compilacin por: Santiago Catao Arango Instructor
Multimedia Centro de Servicios y Gestin Empresarial
Le invitamos a continuar con el otro documento de apoyo Maquetacin en CSS.

Propiedades CSS

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Propiedades CSS

Hochgeladen von

Copyright:

Verfügbare Formate

Propiedades CSS

Das könnte Ihnen auch gefallen