rrr

Taller Multimedia GuĂ­a de Trabajo | Escritura Hipertextual 02| el texto y CSS

Jorge Barrera

Visualizaci贸n CSS

CSS es un lenguaje formal(que se escribe en un archivo de texto), que define la presentaci贸n de un documento Html, Xml o Xhtml.

css body { font-family:”Lucida Grande ”, helvetica, arial, sans serif; color:#333333; } Selector

5

atributos

valores

en la pestaña css escoger >nuevo y crear nuevo archivo css

css xhtml <p class=”destacado”>bla, bla bla</p>

css .destacado{ background-color:#EE138F; color:#FFFFFF; }

6

Tipos de Selectores 1 Selectores de Etiquetas HTML: define el valor de las etiquetas html como body, h1(encabezados), párrafos(p), img y los links(a) 2 Selector de Clase Con los selectores de clase estamos haciendo algo menos general que en la etiqueta. Se le puede colocar a cualquier elemento html por separado y cuantas veces queramos en el mismo documento.

2 Selector de Identificador Con esto nos referimos a un elemento único al que le aplicamos el estilo. Es decir ningún otro elemento podrá tener ese estilo. Generalmente asociado a la etiqueta DIV sirve para posicionar y agrupar elementos.

Crear una clase especial para un párrafo que se destaque del resto

css

modelo de caja

border: margin: padding: background-color background-image

contenido

css

atributos

font-family: Set de caractéres. font-size: tamaño de fuente . valores en pixeles. color: define el color del texto. valores hexadecimales letter-spacing: espacio entre letras.valores en pixeles word-spacing: espacio entre palabras.

margin:espacio entre el borde y otro elemento externo border: borde entre el margen y el relleno. padding: relleno entre el borde y el contenido.

line-height: alto de línea. Valores en píxeles

width: ancho del elemento.valores en pixeles. height: alto del elemento.valores en pixeles. background-image: imagen de fondo para cualquier elemento.

7

background-repeat: posibilidad que el elemento se repita.

Jugar!

background-position: posibilidad de situar al elemento dentro del bloque

css font-family: Set de caracteres.

font-family: arial, helvetica, geneva, sans-serif;

css font-size: tamaĂąo de fuente . valores en pixeles y dinĂĄmicos.

font-size: 12px;

css color: define el color del texto. valores hexadecimales, rgb y valores en inglĂŠs.

color: #222222;

gris oscuro casi negro

css

atributos

letter-spacing: espacio entre letras. valores en pixeles

letter-spacing: 6px;

css

atributos

word-spacing: espacio entre palabras. valores en pixeles y dinรกmicos.

word-spacing: 5px;

css

atributos

line-height: alto de línea. Valores en píxeles y dinámicos.

line-height: 18px;

css

atributos

font-weight: peso y condensaci贸n de la fuente. De valores num茅ricos (100, 200, 300) hasta bold y bolder.

font-weight: bold; font-weight: normal;

css

atributos

text-indent : indentado de texto. valores negativos y positivos.

text-indent: 20px;

css

atributos

text-transform: Cambia las cajas de los textos en Capitales, caja alta, baja.

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

css

atributos

text-align: alineaci贸n de texto. izquierda, centro, derecha y justificado.

text-align: left;

css

atributos

font-variant: permite elegir la variante con la que se muestra el tipo de letra seleccionado mediante. Las Ăşnicas variantes disponibles en CSS 2.1 son: normal (normal) y versalita (small-caps).

font-variant: small-caps;

css

atributos

text-decoration permite que el texto sea decorado mediante una de cinco propiedades: underline (subrayado), overline (lĂ­nea superior), line-through (tachado), blink (parpadeo), o la por defecto none (ninguna).

text-decoration: underline;

css

atributos

font-style :define que la fuente se muestre en una de tres formas: normal, itálica u oblicua (inclinada). Una hoja de estilo de muestra con declaraciones font-style podría ser así:

font-style: oblique ;

css

atributos

white-space: determinar谩 c贸mo se tratan los espacios dentro del elemento. Esta propiedad toma uno de tres valores: normal, pre, no-wrap.

white-space: pre;