Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Pintar el color de fondo de una línea
<style>
p {
display: inline;
background: pink;
font-size: 1em;
line-height: 1.5em;
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur.
</p>Incrustar una imagen
Si usamos el inspector de código observaremos que el párrafo se superpone sobre la imágen, pero el texto la envuelve. Esto ocurre porque mientras que la capa tiene display:block, el texto tiene display:inline.
<style type="text/css">
img{float: left; margin: 20px}
</style>
<img src="http://lorempixel.com/200/200"/>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...Ejercicio Incrustar una imagen en texto florencia
Estilos nuevos necesarios:
text-transform: uppercase;
letter-spacing: 50px;Sangría francesa (hanging intent)
Capitalizar una letra
<style type="text/css">
p:first-of-type:first-letter{
font-size: 3em
}
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris.</p>Ejercicio Oscar Wilde
Hacer la página del enlace teniendo en cuenta que:
- Poniendo el estilo float:left a la letra capitalizada, la podremos incrustar en el texto.
- Poniendo el estilo line-height: 1.5rem haremos que el texto no choque con la letra y de esta forma la envuelva.
Justificado y centrado de la última línea
text-align: justify;
text-align-last: center;Efecto :hover
a{
text-decoration: none;
display: inline-block;
background-color: pink;
}
a:hover{
background-color:red
}contenteditable
<h1>Título de la página</h1>
<div contenteditable="true">
<p>Contenido de la página</p>
<div>
<h2>Titulo del artículo</h2>
<p>Contenido del artículo</p>
</div>
<p>Contenido tangencial</p>
</div>
<h5>Pie de la página</h5>Soporte para textos asiáticos
Ejercicio
wbr – Word Break
En caso de que la palabra no quepa, indica por dónde será cortada.
<p>Palabrasuperlarga<wbr/>enlaquevoyadecidirpordondequieroquesecorte<wbr/>encasodenocaberenlacapaquelacontiene
</p>Ejercicio
Hacer una página web con 3 columnas que contengan, repetida muchas veces la frase:
Un murcié–lagosuper–califragilístico–espialidoso
Los guiones rojos indican los puntos en los que introduciremos un word break.
white-space
Este estilo permite forzar que el texto de un elemento se mantenga siempre en la misma línea sin parar a la siguiente.
A continuación tienes un ejemplo en el que usamos el estilo white-space junto con otros estilos más.
p {
width: 300px;
height: 1em;
/*Recorta la capa para evitar visualizar lo que exceda sus dimensiones*/
overflow: hidden;
/*tras haber recortado, añade unos puntos al final para indicar que el texto continua*/
text-overflow: ellipsis;
/*si el texto no cabe en el ancho de la capa el comportamiento normal es saltar a la siguiente línea. Este estilo lo evita el salto de línea*/
white-space: nowrap;
}
p:hover {
overflow: visible;
white-space: wrap;
}