Estilos CSS: Texto, Tablas e Imágenes, Guías, Proyectos, Investigaciones de Desarrollo de Aplicaciones Web

¡Descarga Estilos CSS: Texto, Tablas e Imágenes y más Guías, Proyectos, Investigaciones en PDF de Desarrollo de Aplicaciones Web solo en Docsity!

COMPOSITION

BOOK

CSS

PARA

HTML

TEMAS A MENCIONAR

CSS (texto, tablas,

imágenes, vínculos)

TEMA 1 TEMA 2

Formas en que se

define (interno al

HTML y externo al

HTML)

TEMA 3

Diferencia entre una

definición Class e Id,

sus formas de

definirlo

TEMA 4

Coloca un ejemplo

de cada forma (en

total 4 ejemplos)

o La propiedad color permite establecer el color del texto. h^1 {^ color:^ magenta;^ }^ p^ {^ color:^ blue;^ } o La propiedad background-color permite establecer el color de fondo del elemento. body { background-color: aqua; } h 1 { background-color: gold; } p { background-color: lightblue; } o La propiedad text-align permite establecer la alineación horizontal de un bloque de texto. Los posibles valores de text- align son left (izquierda), right (derecha), center (centro) y justify (justificado a derecha e izquierda). body { text-align: justify; } h 1 { text-align: center; } h 2 { text-align: right; } o La propiedad text-indent permite establecer la sangría de un bloque de texto. Su valor se puede establecer como cualquier otra longitud. p { text-indent: 25 px; } (^) p { text-indent: - 25 px; } p { margin-left: 25 px; text-indent: - 25 px; } o La propiedad letter-spacing permite establecer un espaciado entre cada una de las letras de un bloque de texto. Estos valores, positivos o negativos, se establecen como cualquier otra longitud y se añaden al espaciado normal. p { letter-spacing: 5 px; } p^ {^ letter-spacing:^10 px;^ }^ p^ {^ letter-spacing:^ -^2 px;^ } o La propiedad word-spacing permite establecer un espaciado entre cada una de las palabras de un bloque de texto. Estos valores, positivos o negativos, se establecen como cualquier otra longitud y se añaden al espaciado normal. p { word-spacing: 10 px; } p { word-spacing: 20 px; } (^) p { word-spacing: - 5 px; } o La propiedad text-decoration permite añadir a un bloque de texto distintos tipos de rayado. Los posibles valores de text decoration son none (ninguno), underline (subrayado), overline (sobrerrayado) y line-through (tachado). p { text-decoration: none; } p^ {^ text-decoration:^ underline; }^ p { text-decoration: overline; }

La propiedad border-collapse La propiedad border-collapse nos permite colapsar esos bordes separados en un solo borde o mantenerlos separados, veamos los posibles valores: table.separado {border-collapse: separate;} Propiedad border-spacing La propiedad border-spacing nos permite establecer el espacio entre celdas adyacentes de una tabla y solo funciona cuando los bordes de celdas están separadas table.conespacio { border-collapse: separate; border-spacing: 30px;} Propiedad caption-side La propiedad caption-side está pensada para posicionar la leyenda de las tablas con CSS caption {caption-side:bottom;} Propiedad empty-cells La propiedad empty-cells nos permite establecer si se muestran o no los bordes de celdas que no poseen contenido dentro de ella table.show {border- collapse:separate; empty-cells: show} La propiedad table-layout La propiedad table-layout sirve para determinar el ancho de las columnas de una tabla, nos referimos a la dimensión horizontal de celdas; es posible determinar si el ancho será fijo o automático de acuerdo al contenido. table.auto { table-layout: auto; width: 10px; }

Cambiando el color del subrayado Si usamos la propiedad color, cambiamos tanto el color del texto como del subrayado, y quizás no sea lo que vayamos buscando. Pero si queremos es solo cambiar el color del subrayado típico de un hipervínculo, debemos usar la propiedad de esta forma: a{ text-decoration-color: fuchsia; } Modificando el grosor del subrayado La siguiente propiedad que vamos a ver es , que nos va a permitir definir el grosor que va a tener el subrayado de nuestra línea. a{ text-thicknees: 8px ; } Moviendo de posición la línea a{ text-underline-offset: - 5 px ; }

NOMBRE CSS Externo CSS Interno Estilos en linea METODO Etiqueta Etiqueta