Cursos de páginas web

Curso de HTML | Tips de CSS

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.  

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;
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

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

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

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;
}

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