Saltar navegación

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

HTML class - 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 28 de diciembre de 2020 por Amadeo M.

111 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, vamos a seguir con clases. Entonces cualquier etiqueta puede tener su propia clase o clases trabajando. El número de etiquetas de HTML no es muy amplio y a veces como lo que hace una etiqueta es ir describiendo el contenido del documento, pues a veces queremos que su apariencia sea diferente en función de una serie de características. 00:00:00
Veamos este ejemplo de aquí. Entonces tenemos un párrafo en esta parte de aquí que corresponde a esta parte de aquí en su salida en el navegador y este párrafo cuya clase es aviso que es esta información que tenemos aquí dentro y que vemos que está en color rojo. 00:00:23
sin embargo nosotros aquí no hemos dicho nada del color rojo 00:00:41
esto sería el documento html 00:00:44
y tendríamos asociado o incluido en algún sitio 00:00:47
el css correspondiente en cual decimos 00:00:50
que un párrafo punto que esto indica que está dentro 00:00:55
tiene clase aviso el color rojo 00:00:59
y esta sería la información completa del documento 00:01:03
si les parece vamos a ver como esto es un frame 00:01:05
un marco dentro del documento 00:01:08
vamos a ver el fuente de este marco 00:01:10
para ver exactamente que es lo que se ha hecho 00:01:12
entonces vemos que es un documento típico 00:01:14
con su cabecera y su cuerpo 00:01:16
el cuerpo es exactamente el que hemos visto 00:01:18
en el cual hay un párrafo sin nada 00:01:21
y un párrafo con clase 00:01:22
y aquí 00:01:24
ha incrustado el estilo 00:01:26
ya sabemos que esto está desaconsejado 00:01:28
pero para ejemplos de este tipo puede ser cómodo 00:01:30
el estilo en el cual decimos 00:01:33
que p.aviso 00:01:34
y entre llaves ponemos sus características 00:01:36
color rojo 00:01:38
por eso se lo visualizamos de esta manera 00:01:40
vamos a continuar 00:01:43
y en este caso 00:01:45
hemos introducido unas etiquetas que son SPAM 00:01:47
entonces SPAM clase aviso 00:01:50
color rojo 00:01:53
si hubiera un SPAM que dentro tuviera la clase aviso 00:01:54
pues entonces aparecería como no es el caso 00:01:57
pues se ve de la misma manera 00:02:00
o en este caso 00:02:02
y mucho cuidado porque si diferenciamos minúsculas y mayúsculas 00:02:04
en este caso aviso sin minúsculas es de color rojo 00:02:08
y aviso con mayúsculas es de color azul 00:02:12
y así se muestra en este caso 00:02:15
bueno, también por eso se llama hoja de estilos en cascada 00:02:17
podemos tener un estilo para todos los párrafos 00:02:22
en este caso que sean oblicuos, que se escriba de forma oblicua 00:02:26
y para el caso de que además tenga una clase como es aviso 00:02:29
sea en rojo, de tal manera que 00:02:34
se aplican todos los 00:02:35
elementos que haya dentro 00:02:38
de los atributos 00:02:40
de CSS 00:02:42
o cosas como esto 00:02:43
es decir, aquí en la clase 00:02:46
que es la clase groucho, este párrafo 00:02:47
no tiene ninguna clase y este tiene 00:02:50
dos clases, groucho y aviso 00:02:52
entonces en este último 00:02:53
vemos que groucho 00:02:56
es que sean oblicuos 00:02:57
entonces efectivamente si vemos la información 00:02:59
groucho está en oblicuo 00:03:01
Este no está afectado por nada 00:03:03
Y el último dice 00:03:05
Está en rojo y oblicuo 00:03:07
Porque tenía groucho 00:03:08
Y por ser groucho es oblicuo 00:03:10
Y por ser aviso está en rojo 00:03:12
¿De acuerdo? 00:03:15
Podemos tener miles de elementos 00:03:17
Por ejemplo, que tengamos un borde 1 00:03:18
Y un borde 2 00:03:21
O un borde 2 o un borde 1 00:03:23
Esto significa lo mismo 00:03:25
Realmente da exactamente lo mismo 00:03:26
Entonces aquí tenemos 00:03:28
que tenemos el borde rojo de 3 pincel sólido 00:03:29
y vemos que aquí rojo no hay 00:03:37
porque después borde 2 00:03:39
que viene definida posteriormente 00:03:41
dice que es azul 00:03:44
y con puntitos 00:03:45
entonces realmente hay que tener cuidado 00:03:47
porque una está anulando a la otra 00:03:49
¿de acuerdo? 00:03:51
en este caso 00:03:53
en este caso pues es al revés 00:03:55
estamos poniéndolo al revés 00:03:57
Y efectivamente queda el borde rojo 00:03:59
Más cuestiones, pues este tiene borde 1, este tiene borde 2 00:04:01
Y este borde 1 y borde 2 00:04:08
Entonces, este primero, que es borde 1, pues es simplemente sólido 00:04:09
El borde 2 es simplemente azul 00:04:15
Y el borde 1, borde 2, dice que es borde 1 o borde 2 00:04:18
Es 3px doted, que es este de aquí, en puntitos 00:04:24
bueno, podemos asignar la misma clase a muchos elementos 00:04:28
por supuesto, aquí tenemos borde1 aplicado a p 00:04:32
y en cambio aquí tenemos borde1 aplicado a span 00:04:35
entonces esto, en este caso, decimos que esto va a ser sólido 00:04:39
el de aquí, y en este caso el span, que va a tener puntitos en el de ahí 00:04:44
podemos explicarlo así 00:04:48
también podemos haberlo no puesto en ningún sitio 00:04:51
podemos poner una información tal que así 00:04:53
si fuera así, se aplicaría 00:04:56
a todos los elementos que lo tengan 00:04:58
¿de acuerdo? este es el caso 00:05:00
entonces tengo que este 00:05:01
párrafo, esto es exactamente igual que antes 00:05:04
el párrafo tiene esta clase 00:05:06
y el span tiene esta clase 00:05:07
y esto se aplica a todos los que hay ahí 00:05:09
¿de acuerdo? 00:05:12
poner esto es lo mismo que poner asterisco 00:05:13
punto, lo que sea 00:05:16
porque asterisco son 00:05:18
todos los elementos que hay 00:05:20
¿de acuerdo? 00:05:22
bueno, en este caso 00:05:24
es muy interesante lo que está ocurriendo aquí 00:05:27
porque estamos en un diálogo entre Groucho 00:05:29
y Chico, ambos 00:05:31
Marx, son los hermanos Marx 00:05:33
¿de acuerdo? y es una charla entre ambos 00:05:35
entonces estamos diciendo que a Groucho 00:05:37
siempre tiene el color rojo y Chico 00:05:39
el color azul, y efectivamente podemos ir viendo 00:05:41
toda su conversación 00:05:43
poco a poco, ¿vale? 00:05:44
es una manera de hacerlo, ¿de acuerdo? 00:05:48
bueno 00:05:50
aquí lo que hace es que dice 00:05:51
voy a poner menos, voy a ver de poner 00:05:56
Groucho y Chico, voy a poner que 00:05:58
todos los párrafos son azules 00:06:00
y los de Groucho, rojos 00:06:01
entonces, es verdad que se ahorra 00:06:04
la información sale igual, se ahorra un poquito 00:06:05
pero realmente el otro es muchísimo 00:06:08
más claro, ¿de acuerdo? porque sabemos 00:06:10
exactamente a qué corresponde 00:06:12
es más, si interviniera otro 00:06:13
otro personaje en esta escena 00:06:15
pues tendríamos que identificarlo 00:06:18
y ya no lo valdría el método anterior 00:06:20
bueno, pues esto es todo lo que hay 00:06:22
sobre clases 00:06:24
Idioma/s:
es
Autor/es:
Amadeo Mora
Subido por:
Amadeo M.
Licencia:
Dominio público
Visualizaciones:
111
Fecha:
28 de diciembre de 2020 - 14:06
Visibilidad:
Público
Centro:
IES CLARA DEL REY
Duración:
06′ 28″
Relación de aspecto:
1.78:1
Resolución:
1364x768 píxeles
Tamaño:
45.59 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid