Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

CSS3 - Textos - Contenido educativo

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 8 de febrero de 2021 por Fernando M.

122 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues ahora vamos a ver propiedades de textos, ¿vale? 00:00:00
En el vídeo anterior vimos propiedades de las fuentes y ahora vamos a ver del texto como texto en sí, ¿vale? 00:00:04
Entonces nos vamos a ir a Brackets. 00:00:10
Yo en Brackets ya me he creado, como podéis ver, un archivo que se llama textos.html, ¿vale? 00:00:12
Y bueno, vamos a empezar creándonos la estructura básica HTML5, como siempre hemos hecho, ¿vale? 00:00:19
Vamos a cambiar el idioma, vamos a ponerlo en castellano y como título vamos a poner textos y alineaciones, ¿vale? 00:00:24
Y bueno, para empezar pues nos vamos a crear una cabecera de nivel H1 para poner propiedades relacionadas con los textos, ¿vale? 00:00:36
Y ya veis que esta nos aparece en nuestra web. 00:00:48
Vale, pues la primera propiedad que vamos a ver es la de alineación del texto, ¿vale? 00:00:53
Vamos a poner una etiqueta H2, de nivel H2, y esa propiedad de alineación se llama text-align, ¿vale? 00:00:58
Y para ello nos vamos a crear cuatro párrafos, ¿vale? 00:01:07
Para crearnos los párrafos con un texto de contenido de una forma rápida, utilizando la extensión M, ¿vale? 00:01:11
Vamos a poner la P y entre llaves vamos a poner el siguiente texto. 00:01:18
este texto se muestra 00:01:21
alineado hacia 00:01:24
y pongo un espacio, ¿vale? 00:01:26
y ahí completaré cada una de las 00:01:28
alineaciones, y después de los paréntesis 00:01:30
voy a poner 00:01:32
por 4 00:01:33
¿vale? y ahora le doy al tabulador 00:01:35
y fijaros 00:01:38
que me aparecen 4 párrafos con ese texto 00:01:40
¿vale? entonces 00:01:43
en el 00:01:44
primero 00:01:47
vamos a poner, a cambiar de hecho 00:01:47
vamos a poner con la alineación 00:01:50
normal 00:01:52
¿vale? 00:01:53
con la alineación 00:01:55
perdón 00:01:55
con la alineación hacia 00:01:56
la izquierda 00:01:57
¿vale? 00:02:00
que esto 00:02:00
lo pongo entre paréntesis 00:02:01
es el modo por defecto 00:02:02
de HTML 00:02:04
¿vale? 00:02:05
por defecto siempre aparecen las cosas 00:02:05
alineadas a la izquierda 00:02:07
en siguiente 00:02:08
vamos a poner 00:02:09
alineación hacia la 00:02:10
derecha 00:02:11
en el tercero 00:02:12
vamos a poner 00:02:17
alineado 00:02:17
centrado 00:02:18
y en el último 00:02:19
alineado 00:02:20
justificado 00:02:21
Y ahora lo que vamos a hacer es ponerle un id a los tres que son diferentes, que son derecho, centrado y justificado. 00:02:24
¿Vale? Id, y a este le vamos a poner derecha, a este le vamos a poner un id que es centrado, y a este último un id que es justificado. 00:02:38
y ahora nos vamos a ir a la cabecera 00:02:54
y vamos a modificar esos estilos 00:02:57
en primer lugar ponemos la etiqueta 00:02:59
style y dentro de esto 00:03:01
vamos a poner los estilos 00:03:03
que como son estilos de 00:03:05
identificador, recuerda 00:03:07
poniendo primero la almohadilla 00:03:09
voy a poner unos comentarios 00:03:11
y voy a poner 00:03:13
propiedad text 00:03:15
align 00:03:17
y vamos a poner almohadilla derecha 00:03:18
abrimos llave, cerramos llave 00:03:21
Y dentro, text-align, dos puntos, right. 00:03:23
Y fijaros que ya podéis ver cómo ese párrafo se ha ido de repente a la derecha, ¿vale? 00:03:30
Vamos a coger la etiqueta centrado, ¿vale? 00:03:35
El ID centrado y vamos a poner text-align, center, ¿vale? 00:03:39
Y por último, ¿vale? 00:03:44
Para poder ver bien el efecto de justificado, vamos a quitar este texto. 00:03:47
Bueno, vamos, justo después del punto, perdón, vamos a poner un texto lorem ipsum, ¿vale? 00:03:51
Para eso, recuerdo, ponemos lorem y le damos al tabulador, ¿vale? 00:03:56
Y fijaros que ya aparece más. 00:04:00
Y ahora vamos a modificar, vamos a poner justificado, text-align y ahora decimos justify, ¿vale? 00:04:02
Y fijaros que en el texto justificado lo que hace es que pega tanto a la derecha como a la izquierda nuestro texto. 00:04:12
Es como si tuviera tanto alineación con izquierda como derecha a la vez. 00:04:17
¿Vale? Vale, muy bien. Vamos a ver otra propiedad que es la de la sangría, ¿vale? 00:04:21
Esa propiedad, ponemos una etiqueta H2 en la propiedad text-index, ¿vale? 00:04:31
Y vamos a hacer lo siguiente, vamos a poner dos párrafos, pongo P por 2 tabulador, ¿vale? 00:04:39
Y en el primero voy a poner, este texto se muestra sin sangría, y en el segundo voy a poner, este texto se muestra con sangría, ¿vale? 00:04:47
Y al segundo le voy a poner un identificador que va a ser sangría, ¿vale? 00:05:03
Nos ponemos la parte de estilo, ponemos un comentario que sea propiedad text-indemn y dentro vamos a poner almohadilla y ponemos sangría, ¿vale? 00:05:08
Y dentro de sangría vamos a poner la propiedad text-indemn y aquí le vamos a poner directamente el espacio o el tamaño que queramos que tenga esa sangría. 00:05:27
Yo, por ejemplo, voy a poner un 5%, ¿vale? 00:05:39
Entonces, fijaros cómo el segundo párrafo aparece desplazado un 5%. 00:05:42
Yo aquí podría poner también dimensiones, 5 píxeles, 5 centímetros, 5 milímetros, ¿vale? 00:05:48
5 rem, ¿vale? 5 em, lo que queramos, ¿ok? 00:05:55
Yo en este caso voy a poner 5%, ¿vale? 00:06:00
Siguiente propiedad que vamos a poner, ¿vale? 00:06:05
Va a ser propiedad para poner subrayado o cosas parecidas. 00:06:09
Entonces, ponemos una nueva etiqueta H2 y esta propiedad se llama TextDecoration, ¿vale? 00:06:13
Y vamos a poner cuatro párrafos, ¿vale? 00:06:20
Vamos a poner un párrafo con texto Lorem Ixum, ¿vale? 00:06:27
Y vamos a dejar el texto hasta el primer párrafo, ¿vale? 00:06:32
Hasta el primer punto, perdón, ¿vale? 00:06:37
Hasta ahí. 00:06:39
Y ahora vamos a copiar este texto cuatro veces, o tres veces más, perdón, ¿vale? Así, de tal forma que tenemos cuatro párrafos, ¿vale? 00:06:41
Cada párrafo lo vamos a decorar de una forma diferente. El primero le vamos a poner un ID, porque lo vamos a decorar con un subrayado, ¿vale? 00:06:49
Al segundo lo vamos a decorar con una línea superior, por lo tanto ponemos línea barra baja superior. 00:06:58
Y al último lo vamos a decorar con un tachado, ¿vale? Entonces le ponemos un ID de tachado, ¿vale? Y ahora nos vamos a ir arriba, vamos a poner un comentario, propiedad text decoration, ¿vale? Y vamos a ir modificando uno a uno. 00:07:05
Vamos a empezar con el subrayado, ¿vale? Entonces vamos a poner text-decoration y dentro vamos a elegir underline, ¿vale? 00:07:28
Y fijaros que ese párrafo ya no aparece subrayado, ¿vale? Vamos a irnos al segundo, que era, se llamaba la etiqueta, línea superior, línea barra baja superior. 00:07:38
y ponemos TextDecoration 00:07:50
Overline, ¿vale? 00:07:53
Y vemos una línea encima del pie. 00:07:56
Y por último, 00:07:59
Tachado, 00:08:01
TextDecoration 00:08:02
y ponemos LineFluid, ¿vale? 00:08:04
Y vemos que tenemos ese tachado, ¿vale? 00:08:07
Pero lo que es importante que sepamos 00:08:11
es que la propiedad TextDecoration 00:08:13
permite muchos más efectos adicionales, ¿vale? 00:08:15
Entonces, voy a poner aquí unos comentarios para que os queden claros. 00:08:20
Esos efectos adicionales serían el tipo de línea. 00:08:23
Solid es el tipo de línea por defecto, que sería una línea sólida, ¿vale? 00:08:28
También podemos poner double. 00:08:32
Podemos poner una línea con puntos, que sería con dot. 00:08:35
Podríamos poner una línea discontinua, que sería dash, ¿vale? 00:08:38
Y podemos poner una línea curva, que sería wavy, ¿vale? 00:08:43
Entonces, vamos a cambiar cositas para que cada una sea un poco diferente, ¿vale? 00:08:47
A la línea de subrayado la vamos a poner doble, ¿vale? 00:08:50
A la línea superior la vamos a poner dash, ¿vale? 00:08:57
No lo escrito bien. 00:09:03
No, tampoco lo escrito bien. 00:09:07
Ahora, ¿vale? Ahora sí. 00:09:11
Y a la línea de tachado la vamos a poner curva, ¿vale? 00:09:13
Wave. 00:09:17
¿Vale? 00:09:18
Y todavía podemos hacer más cosas. 00:09:19
Podemos, por ejemplo, ponerle un color. 00:09:21
¿Vale? A la línea de superior la vamos a poner rojo oscuro. ¿Vale? A la línea de línea superior, verde oscuro. Y a la línea wavy, pues naranja. ¿Vale? Y podemos hacer más modificaciones, podemos modificar el grosor de esa línea. ¿Vale? 00:09:23
Por ejemplo, el subrayado lo vamos a poner de un punto, ¿vale? 00:09:45
O de dos puntos. 00:09:49
A la línea superior de tres puntos, ¿vale? 00:09:52
Y a la línea de tachado de cuatro puntos, ¿vale? 00:09:56
Entonces ahí veis que podemos ir haciendo combinaciones de diferentes propiedades, ¿vale? 00:10:01
¿Qué más, qué más, qué más, qué más podemos hacer? 00:10:08
Vale, vamos a ver transformaciones del propio texto, ¿vale? 00:10:11
Vimos una propiedad que era parecida para fuentes, ¿vale? Pero esto es propiedad de textos. 00:10:15
Esta propiedad, vamos a poner una etiqueta H2, se llama propiedad text transform, ¿vale? 00:10:21
Y para esto vamos a poner tres párrafos, ¿vale? Con texto diferente, ¿vale? 00:10:29
En el primero vamos a poner en minúscula, ¿vale? Este texto se muestra en mayúscula, ¿vale? 00:10:37
Fijaros que está todo el texto en minúscula, la primera letra, ¿vale? 00:10:48
En el segundo párrafo vamos a poner todo en mayúscula, este texto se muestra en minúscula, ¿vale? 00:10:52
Y por último, en el último párrafo vamos a poner la primera letra de cada palabra se muestra en mayúscula, ¿vale? 00:11:01
Pero fijaros que está todo en minúscula, excepto la primera letra de la frase, ¿vale? 00:11:14
Y ahora lo que vamos a hacer es que al primero le vamos a poner un id que va a ser mayúscula. 00:11:19
Al segundo le vamos a poner un id que va a ser minúscula, ¿vale? 00:11:24
Fijaros que lo pongo sin pibla, ¿vale? 00:11:29
Y al tercero le vamos a poner una letra, un id que va a ser letra capital, todo junto, ¿vale? O letra barra baja capital, ¿vale? Nos vamos a ir a nuestras propiedades, ¿vale? Y vamos a poner propiedad text transform y vamos a modificar esas propiedades. 00:11:30
En primer lugar, mayúscula, ¿vale? 00:11:52
Pues ponemos text transform y vamos a elegir uppercase. 00:11:55
Y fijaros como automáticamente ese texto, aunque estaba escrito en minúscula, aparece en mayúscula, ¿vale? 00:12:02
Todas las letras. 00:12:11
El segundo era la etiqueta minúscula y de minúscula y vamos a hacer el mismo proceso, 00:12:13
solo que en vez de poner uppercase vamos a poner lowercase. 00:12:18
Y fijaros como ahora, todas las letras, incluida la primera, aparecen minúsculas, a pesar que nosotros lo habíamos escrito en mayúsculas dos, ¿vale? 00:12:20
Y por último, letra barra baja capital, ¿vale? Text transform, y en este caso elegimos capitalize, ¿vale? 00:12:31
Y fijaros como la primera letra de cada uno aparece en mayúsculas, ¿vale? 00:12:41
Vale, siguiente propiedad es la propiedad para poner el interlineado, ¿vale? Esa propiedad se llama propiedad line height, ¿vale? Y para esto vamos a poner tres párrafos lorem ipsum, ¿vale? 00:12:46
Entonces ponemos P, entre llaves ponemos Loren y multiplicamos por 3 y le damos al tabulador, ¿vale? 00:13:07
Y ahora le damos a cada uno de los Loren al tabulador, ¿vale? 00:13:19
Entonces, fijad, el primer párrafo lo vamos a dejar por defecto, con el interlineado que trae HTML por defecto, ¿vale? 00:13:26
Al segundo vamos a ponerle un id porque le vamos a poner un tipo de interlineado. 00:13:33
Y al tercero le vamos a poner otro id, ¿vale? 00:13:39
Un interlineado 2, ¿vale? 00:13:47
Que va a ser también diferente, ¿vale? 00:13:49
Y ahora nos vamos a ir a nuestras hojas de estilos 00:13:53
y vamos a poner propiedad text line height, perdón, line height. 00:13:58
Y aquí vamos a poner en primer lugar interlineado 00:14:11
y vamos a poner line size 00:14:14
y le vamos a poner de valor, por ejemplo, 1,9 00:14:20
¿vale? 00:14:23
fijaros que ya se está modificando 00:14:24
ya tenemos un interlineado muy superior 00:14:26
¿vale? 00:14:29
y ahora vamos a poner 00:14:30
interlineado 2 00:14:32
y vamos a poner line size 00:14:34
y en este caso vamos a ponerlo en porcentaje 00:14:37
¿vale? 250% 00:14:38
¿vale? 00:14:40
Y fijaros que aparece y es aún mayor que la anterior, ¿vale? 00:14:41
Muy bien, pues ya vamos a ir a la última propiedad de texto que vamos a ver, ¿vale? 00:14:48
Esta propiedad es para poner sombra, ¿vale? 00:14:52
Va a ser la propiedad text-shadow, ¿vale? 00:14:55
Y para eso lo que vamos a hacer es que nos vamos a crear dos párrafos, ¿vale? 00:15:00
Y por ahora solo vamos a tocar el primero, ¿vale? 00:15:08
Este párrafo lo vamos a poner una id que va a ser sombra. 00:15:10
¿Vale? Y el texto va a ser, este es un texto con sombra. ¿Vale? Nos vamos a ir arriba, a la hoja de estilo, vamos a poner propiedad text-shadow, ¿vale? 00:15:15
Y dentro vamos a poner la etiqueta sombra. ¿Vale? Entonces, lo primero que vamos a hacer en esta etiqueta sombra es aumentar el tamaño de la fuente. 00:15:32
¿Vale? Entonces vamos a poner font-size y le vamos a poner 3D. ¿Vale? Y fijaros que el tamaño de la fuente ha aumentado. ¿Vale? 00:15:40
Ponemos punto y coma porque vamos a poner otra propiedad que en este caso va a ser text-shadow. ¿Vale? 00:15:51
Y os voy a poner aquí abajo cómo se construye esta propiedad. ¿Vale? En primer lugar se pone la sombra horizontal. 00:15:59
Luego, horizontal 00:16:08
Luego se pone la sombra vertical 00:16:14
A continuación se pone difuminado 00:16:16
Y por último, el color, ¿vale? 00:16:19
Y se pone todo sin espaciado, ¿vale? 00:16:21
Todo seguido 00:16:23
Entonces, yo aquí pondría, por ejemplo 00:16:24
Una sombra horizontal de 8 píxeles 00:16:26
¿Vale? 00:16:31
Una vertical de 4 píxeles 00:16:33
¿Vale? 00:16:35
Un difuminado de 4 píxeles y un color, por ejemplo, verde, ¿vale? 00:16:36
Y fijaros que la sombra me está yendo hacia abajo y la derecha. 00:16:45
Si yo quiero, por ejemplo, que me vaya hacia abajo y la izquierda, pues donde yo he puesto la sombra horizontal, pondría un negativo. 00:16:49
Por ejemplo, menos 8, ¿vale? 00:16:57
Y fijaros que se me ha desplazado a la izquierda. 00:16:58
Que yo quiero que esté arriba y a la izquierda, pues en el vertical, en la sombra vertical, le pongo también un negativo, ¿vale? 00:17:00
En el caso del difuminado no tiene sentido poner negativo, ¿vale? 00:17:10
Ok, pues nosotros podemos ir concatenando varios sombreados, ¿vale? 00:17:14
Para obtener un resultado aún más, que sea más llamativo. 00:17:19
Os voy a poner un ejemplo, esto sería un sombreado múltiple, ¿vale? 00:17:23
Entonces aquí vamos a poner un id que va a ser sombra barra baja múltiple, ¿vale? 00:17:26
Y como contenido de este párrafo va a ser este texto tiene múltiples sombras, ¿vale? 00:17:33
Nos vamos a ir a la parte de estilos y ponemos sombra múltiple y lo primero que vamos a hacer es aumentar el tamaño. 00:17:45
Vamos a poner 3,5 red. 00:17:53
¿Vale? Punto y coma. Y vamos a empezar a poner sombreado. ¿Vale? Texteado. 00:17:56
Entonces, para el primero le vamos a poner, por ejemplo, cero horizontal, uno vertical y cero difuminado. 00:18:04
Y en color amarillo. ¿Vale? Ponemos una coma. Y Enter. 00:18:10
Y ahora vamos a poner uno horizontal, cero vertical, cero difuminado. 00:18:15
Y vamos a poner yellow green. ¿Vale? Y coma. El siguiente le vamos a poner uno horizontal, dos vertical y uno de difuminado. 00:18:22
Y le vamos a poner color verde. ¿Vale? Vamos a poner dos horizontal, uno vertical y uno de sombreado. 00:18:33
Y de color green yellow, ¿vale? 00:18:42
Al siguiente le vamos a poner 2 de horizontal, 3 de vertical y 3 de difuminado y color gris, ¿vale? 00:18:48
Fijaros como cada vez va siendo más llamativo el efecto sombreado. 00:18:57
Luego le vamos a poner 3 horizontal, 2 vertical, 2 de difuminado y en azul, ¿vale? 00:19:02
Y por último, le vamos a poner 4 horizontal, 9 vertical, 3 de difuminado y en negro, ¿vale? 00:19:09
Y fijaros el efecto tan destacado, tan llamativo, que podemos darle a un texto simplemente jugando con eso, con los estilos, ¿vale? 00:19:18
Con esto tenéis bastante para darle estilo a vuestros sitios web, ¿vale? 00:19:31
Entonces espero que os haya sido útil y nos vemos en el siguiente vídeo. 00:19:36
Gracias. 00:19:41
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
122
Fecha:
8 de febrero de 2021 - 20:13
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
19′ 42″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
64.60 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid