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;