Cursos de páginas web

Tips de CSS

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de HTML

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
44.  
45.  
46.  
47.  
48.  
49.  
50.  
51.  
52.  
53.  
54.  
55.  
56.  
57.  
58.  
59.  
60.  
61.  
62.  

Pintar el color de fondo de una línea

<style type="text/css">
	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="https://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;
Descargar Recurso

Sangría francesa (hanging intent)

.hangingindent {
	padding-left: 22px ;
	text-indent: -22px ;
}

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>

No confundir :first-of-type con :first-child. :first-child no se aplica si el primer elemento del grupo no es el indicado por el selector.

Ejercicio Oscar Wilde

Poniendo el estilo float:left a la letra capitalizada, la podremos incrustar en el texto.

Video del ejercicio propuesto
Video del ejercicio resuelto

Justificado y centrado de la última línea

text-align: justify;
text-align-last: center;

Eliminar el borde (outline) del elemento activo

No es muy recomendable borrarlo por razones de usabilidad. A pesar de ello, muchos clientes insisten en querer borrarlo.

body:not(.keyboardUser) *:focus {
	outline: none;
}

contenteditable

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>a_paginaSencilla</title>
	</head>
	<body>
		<header>
			<h1>Título de la página</h1>
		</header>
		<main contenteditable="true">
			<p>
				Contenido de la página
			</p>
			<article>
				<h2>Titulo del artículo</h2>
				<p>Contenido del artículo</p>
			</article>
			<aside>
				Contenido tangencial
			</aside>
		</main>
		<footer>
			<h5>Pie de la página</h5>
		</footer>
	</body>
</html>

Soporte para textos asiáticos

<ruby>私<rt>わたし</rt></ruby>
の<ruby>名前は<rt>なまえ</rt></ruby>は
			
パブロ  です :D

Ejercicio

Video del ejercicio propuesto
Video del ejercicio resuelto

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.

← display flex
Estilo CSS background para las imágenes de fondo →