Embedded Files
FORMATO DE TEXTO
FORMATO DE TEXTO
Este texto es de estilo con algunas de las propiedades de formato de texto. El título utiliza el text-align, text-transform, y propiedades de color. El párrafo tiene sangría, alineados, y se especifica el espacio entre caracteres. El subrayado es retirado de la "Pruébalo tú mismo" enlace.
Color del texto
Color del texto
La propiedad de color se utiliza para establecer el color del texto.
Con CSS, un color más a menudo se especifica a través de:
- un valor HEX - como "#FF0000"
- un valor RGB - como "rgb(255,0,0)"
- un nombre de color - como "rojo"
Mira valores de color CSS para una lista completa de los posibles valores de color.
El color por defecto para una página se define en el selector de cuerpo.
Ejemplo
Ejemplo
body {color: blue;}
h1 {color: #00ff00;}
h2 {color: rgb(255,0,0);}
Alineación de texto
Alineación de texto
La propiedad text-align se utiliza para establecer la alineación horizontal de un texto.
El texto puede estar centrado o alineado a la izquierda oa la derecha, o justificado.
Cuando text-align se ajusta a "justificar", cada línea se extendía de manera que cada línea tiene la misma anchura, y los márgenes izquierdo y derecho son rectos (como en revistas y periódicos).
Ejemplo
Ejemplo
h1 {text-align: center;}
p.date {text-align: right;}
p.main {text-align: justify;}
Decoración del texto
Decoración del texto
La propiedad text-decoration se utiliza para fijar o quitar las decoraciones de texto.
La propiedad text-decoration se utiliza sobre todo para eliminar los subrayados de enlaces para propósitos de diseño:
Ejemplo
Ejemplo
a {text-decoration: none;}
También se puede utilizar para decorar texto:
Ejemplo
Ejemplo
h1 {text-decoration: overline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: underline;}
h4 {text-decoration: blink;}
No se recomienda para subrayar texto que no es un enlace, ya que a menudo confunde a los usuarios.
Transformación de texto
Transformación de texto
La propiedad text-transform se utiliza para especificar las letras mayúsculas y minúsculas en un texto.
Se puede utilizar para convertir todo en letras mayúsculas o minúsculas, o en mayúscula la primera letra de cada palabra.
Ejemplo
Ejemplo
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: capitalize;}
Sangría de texto
Sangría de texto
La propiedad text-indentación se utiliza para especificar la sangría de la primera línea de un texto.
Ejemplo
Ejemplo
p {text-indent: 50px;}
Más ejemplos
Más ejemplos
Especifique el espacio entre caracteres
Este ejemplo muestra cómo aumentar o disminuir el espacio entre caracteres.
Especifique el espacio entre las líneas de
este ejemplo se muestra cómo especificar el espacio entre las líneas de un párrafo.
Ajuste la dirección del texto de un elemento de
este ejemplo se muestra cómo cambiar la dirección del texto de un elemento.
Aumente el espacio en blanco entre las palabras
Este ejemplo muestra cómo aumentar el espacio en blanco entre las palabras en un párrafo.
Desactivar el ajuste de texto dentro de un elemento
Este ejemplo demuestra cómo desactivar el ajuste de texto dentro de un elemento.
La alineación vertical de una imagen
En este ejemplo se muestra cómo establecer la alineación vertical de una imagen en un texto.
Todas las propiedades CSS de texto
Todas las propiedades CSS de texto
Ejercicio24:
Además, tienes que tener en cuenta los siguientes requisitos:
- El tipo de letra principal del texto debe ser Calibri. Como este tipo de letra no está en todos los ordenadores, se debe definir como alternativa los tipos de letra Arial, Helvetica y el tipo genérico sans-serif.
- El tipo de letra del encabezado de nivel 1 debe ser Cambria. El tipo alternativo debe ser Times junto con el tipo genérico serif. El color del texto debe ser #1F497D y el color del fondo #BFBFBF. El tamaño del texto debe ser 24 px. El espaciado entre letras debe ser 0.5 em y el espaciado entre palabras 1.5 em. Además, el encabezado de nivel 1 debe aparecer centrado y en mayúsculas.
- El tipo de letra del encabezado de nivel 2 es igual que el encabezado de nivel 1. El color del texto debe ser #632423. El tamaño del texto debe ser 18 px. El espaciado entre letras debe ser 0.5 em. Además, el encabezado de nivel 2 debe aparecer en mayúsculas.
- El contenido de las listas debe aparecer en cursiva y en negrita. Sin embargo, el contenido etiquetado como <strong> no debe aparecer en negrita, sin cursiva, y estará capitalizado, pero debe aparecer en versalitas (minúsculas).
- Nota: no puedes modificar el código HTML de la página, sólo puedes añadir las reglas CSS necesarias para lograr la presentación deseada.
<body>
<h1>Curriculum Vitae de Bruce Wayne</h1>
<h2>Datos personales</h2>
<ul>
<li>Nombre completo: <strong>Bruce Wayne</strong></li>
<li>Fecha de nacimiento: <strong>1/5/1939</strong></li>
<li>Lugar de nacimiento: <strong>Gotham City</strong></li>
</ul>
<h2>Formación académica</h2>
<ul>
<li>1956-1961: <strong>Universidad del Espantapájaros</strong></li>
<li>1952-1956: <strong>Instituto de Dos Caras</strong></li>
<li>1944-1952: <strong>Escuela Primaria del Joker</strong></li>
</ul>
<h2>Experiencia laboral</h2>
<ul>
<li>1975-1985: <strong>En el paro</strong></li>
<li>1965-1975: <strong>Cazavillanos y demás chusma</strong></li>
<li>1962-1965: <strong>Aprendiz de superhéroe</strong></li>
</ul>
</body>
Page updated
Report abuse