ESTILIZANDO CON CSS. Sesión 08. By Ing. David Gil

Transcripción

1 ESTILIZANDO CON CSS Sesión 08 By Ing. David Gil

2 UNIDADES CSS

3 UNIDADES DE LONGITUD Un valor de longitud se forma por un signo + o - opcional, seguido de un número y de una abreviación de dos letras que indica la unidad. No hay espacios en un valor de longitud. Una longitud de 0 no necesita las dos letras para identificar la unidad. Las unidades relativas dan una longitud relativa a otra propiedad longitud, y se prefieren ya que se ajustarán mejor a medios diferentes. Las siguientes unidades relativas están disponibles: em (ems, la altura de la fuente de los elementos) ex (x-height, altura de la letra "x") px (pixels, relativa a la resolución del lienzo) Las unidades de longitud absolutas son muy dependientes del medio de salida, y son por lo tanto menos útiles que las unidades relativas. Las siguientes unidades absolutas están disponibles: in (pulgadas; 1 pulgada=2.54 cm) cm (centímetros; 1 cm = 10 mm) mm (milímetros) pt (puntos; 1pt = 1/72 pulgada) pc (picas; 1 pc = 12 pt)

4 UNIDADES DE COLOR Un valor de color es una palabra clave o una especificación numérica RGB. Las 16 palabras clave se toman de la paleta Windows VGA: celeste, negro, azul, fucsia, gris, verde, verde claro, marrón, azul marino, olivo, morado, rojo, plata, turquesa, blanco, y amarillo. Los colores RGB se dan en una de cuatro maneras: #rrggbb (por ej., #00cc00) #rgb (por ej., #0c0) rgb(x,x,x) donde x es un entero entre 0 y 255 inclusive (por ej., rgb(0,204,0)) rgb(y%,y%,y%) donde y es un número entre 0.0 y inclusive (por ej.,rgb(0%,80%,0%))

5 URLS Un valor URL es dado por url(recurso), donde recurso es la URL. La URL puede ser opcionalmente entrecomillada con comillas simples (') o dobles (") y puede contener espacios en blanco antes o después de la URL (opcionalmente entrecomillada). Los paréntesis, comas, espacios, comillas simples o dobles en una URL deben ser encerradas con diagonales invertidas. Las URLs parciales son interpretadas en relación a la fuente de la hoja de estilo, no a la fuente de HTML. Netscape Navigator 4.x interpreta incorrectamente las URLs parciales relativas a la fuente HTML. Teniendo en cuenta este defecto, los autores pueden preferir usar las URLs completas siempre que sea posible.

6 UNIDADES DE PORCENTAJE Un valor de porcentaje se forma por un signo + o - opcional, seguido de un número y de %. No hay espacios en un valor de porcentaje. Los valores de porcentaje son relativos a otros, tal como están definidos en cada propiedad. Generalmente, el valor de porcentaje es relativo al tamaño de fuente del elemento.

7 PROPIEDADES CSS

8 CSS TEXT Las propiedades CSS Text se utilizan para dar formato al contenido de texto de un elemento. Propiedad color direction letter-spacing line-height text-align text-decoration text-indent text-shadow Descripción Establece el color de texto Especifica la dirección del texto / dirección de escritura. Incrementa o decrementa el espacio entre caracteres en un texto. Establece la altura de la línea. Especifica la alineación horizontal del texto. Especifica la decoración que se le agrega al texto. Especifica la identación de la primera línea en un bloque de texto. Especifica los efectos de sombra que se añade al texto.

9 CSS TEXT Propiedad text-transform unicode-bidi vertical-align white-space word-spacing Descripción Controla la capitalización del texto. Se utiliza junto con la propiedad de dirección para establecer o devolver si el texto debe ser anulado para soportar múltiples idiomas en el mismo documento Establece la alineación vertical de un elemento Especifica como los espacios en blanco dentro de un elemento son manejados. Icrementa o decrementa los espacios entre palabras en un texto.

10 CSS FONT Las propiedades CSS Font definen la familia de fuentes, intensidad, tamaño y el estilo de un texto. Propiedad font font-family font-size font-style font-variant font-weight Descripción Establece todas las propiedades de fuente en una sola declaración Establece la familia de fuentes para el texto. Especifica el tamaño de fuente del texto. Especifica el estilo de fuente del texto. Especifica si un texto se debe mostrar en una fuente minúsculamayúscula Especifica el peso de una fuente.

11 Los enlaces pueden ser estilizados con cualquier propiedad CSS. CSS LINKS Además, los enlaces pueden tener diferentes estilos dependiendo de qué estado se encuentren. Los cuatro estados son: a:link un enlace no visitado. a:visited un vínculo que el usuario ha visitado. a:hover un enlace cuando el puntero del mouse esta sobre el. a:active un enlace en el momento en que se hace clic sobre el.

12 CSS LIST Las propiedades CSS List permiten establecer diferentes marcadores de elementos de lista para listas ordenadas y desordenadas; además, establecer una imagen como el marcador de elemento de la lista. Propiedad list-style list-style-image list-style-position list-style-type Descripción Establece todas las propiedades para una lista en una sola declaración. Especifica una imagen como el marcador de elemento de lista. Especifica si los marcadores de elementos de lista deben aparecer dentro o fuera del flujo de contenido Especifica el tipo de marcador de elemento de lista.

13 El aspecto de una Tabla HTML puede ser mejorado con CSS. CSS TABLES Propiedad border border-collapse width height text-align vertical-align padding Descripción Especifica el borde de una tabla. Establece si los bordes de la tabla se colapsan en un solo borde o separados. Define el ancho de la tabla. Define la altura de la tabla. Especifica la alineación horizontal del texto en la tabla. Especifica la alineación vertical del texto en la tabla. Controla el espacio entre el borde y el contenido en una tabla.

14 PROPIEDADES SHORTHAND Una de las facilidades que nos ofrece CSS es el uso de métodos abreviados para asignar valores a las propiedades. Esta característica es conocida como propiedad shorthand (shorthand properties). La gran ventaja es que crear reglas con shorthand nos permite escribir un código mucho más corto y más fácil de leer para quienes tienen experiencia en la creación de hojas de estilos.

15 By Ing. David Gil LABORATORIO 08 Estilizando el sitio web con CSS

16 OBJETIVOS Al finalizar este laboratorio, los estudiantes serán capaces de: Utilizar unidades y propiedades CSS correctamente. Estilizar textos con CSS. Estilizar enlaces y listas con CSS. Estilizar tablas con CSS. By Ing. David Gil

17 ENTREGABLES 1) Contenidos del sitio web estilizados con CSS By Ing. David Gil