Saltar navegación

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

CSS3 - Selectores avanzados - 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 20 de enero de 2021 por Fernando M.

169 visualizaciones

Más información Transcripción

Descargar la transcripción

Bueno, pues ahora lo que vamos a hacer va a ser una explicación sobre selectores avanzados, ¿vale? 00:00:00
Ya vimos en el vídeo anterior lo que eran los selectores y ahora vamos a ver concretamente un tipo de selector más avanzado, más especializado y también más concreto, ¿vale? 00:00:06
Para ello, pues como siempre, nos vamos a ir a Brackets, que yo lo tengo aquí abierto, ¿vale? 00:00:15
Ya me he creado un archivo que lo he llamado selectoresavanzados.html, ¿vale? 00:00:20
Y, bueno, me he creado la estructura como siempre, ¿vale? 00:00:27
HTML 2.5, tabulador y luego le cambiamos aquí el idioma y aquí le ponemos selector avanzado en hojas de estilo, en CSS3 o lo que queráis, ¿vale? 00:00:30
Bueno, en primer lugar nos vamos a crear una estructura sencillita de páginas, ¿vale? 00:00:41
Vamos a crearnos una cabecera H1 y vamos a poner que esto es un encabezado H1, ¿vale? 00:00:45
Nos vamos a crear un párrafo, ¿vale? 00:00:54
Y también nos vamos a crear justo debajo del párrafo un enlace, ¿vale? 00:00:58
como dirección de href 00:01:02
vamos a poner la almohadilla 00:01:05
que recuerdo que esto no era en ningún sitio 00:01:07
simplemente lo ponemos para que el enlace 00:01:09
esté operativo, no dé error 00:01:11
pero ahora mismo no nos va a enlazar en ninguna página 00:01:12
simplemente para que, ¿vale? 00:01:15
y el texto que va a ser 00:01:16
el enlace en sí, vamos a poner 00:01:19
leer más, ¿vale? 00:01:20
entonces aquí estáis viendo en la parte derecha 00:01:23
como se está viendo la página, ¿vale? 00:01:25
y como primer 00:01:28
bueno, vamos a empezar ya 00:01:29
meter estilo y vamos a ver estos selectores avanzados de los que yo estaba hablando antes, ¿vale? 00:01:31
En primer lugar, recuerdo que lo que tenemos que poner es la etiqueta style, ¿vale? 00:01:35
Tal y como veis en pantalla, ¿vale? Voy a intentar 00:01:40
aumentar un poco más la letra para que así lo podáis ver mejor. 00:01:43
Esto era en... aumentar tamaño 00:01:47
de frente, eso. ¿Ok? Entonces 00:01:51
dentro de aquí de style, pues lo que vamos a poner, vamos a utilizar 00:01:55
el primer selector avanzado, ¿vale? Entonces, el primer selector avanzado, lo voy a poner 00:01:59
aquí entre comentarios, va a ser el selector universal, ¿vale? Que afecta a todos los 00:02:03
elementos. Le pongo en mayúscula, ¿vale? Ese selector universal se pone poniendo el 00:02:10
asterisco, ¿vale? Pondríamos asterisco, abre llave, cierra llave, y por ejemplo, si yo 00:02:16
aquí pongo color y pongo green, ¿vale? Fijaros que al poner yo green, ya automáticamente 00:02:21
se me ha cambiado el color de todo, del encabezado, del párrafo, del enlace, de todo, ¿vale? 00:02:29
¿Qué pasa? Que esto realmente no se utiliza mucho, a no ser que nosotros queramos modificar 00:02:36
determinados parámetros que nos interesen de una web, ¿vale? Pero no se utilizarán demasiado. 00:02:40
Vamos a poner aquí, en su lugar, en vez de poner el color, vamos a cambiar el margen de la web, ¿vale? 00:02:49
Utilizando la propiedad margin y vamos a poner 0, ¿vale? 00:02:56
Fijaros cómo en cuanto lo pongo se va todo para arriba, ¿vale? 00:03:00
Y otro que es el padding, que es el espaciado, que lo vamos a poner también a 0, ¿vale? 00:03:03
No hace falta poner un tipo más. 00:03:08
Ok. 00:03:10
Vale, ahora vamos a ver, esto sería el selector universal. 00:03:13
Ahora vamos a ver otro tipo de selector que es el selector múltiple, pero para ello voy a meter más contenido, ¿vale? 00:03:15
Voy a añadir aquí una etiqueta h2. 00:03:21
Esto es un encabezado H2 00:03:23
Y vamos a añadir también un párrafo, ¿vale? 00:03:26
Con un texto Lorem Ius 00:03:30
¿Vale? 00:03:31
Entonces, vamos a imaginarnos que yo quiero modificar 00:03:34
Y quiero poner color, por ejemplo 00:03:36
Aumentar el tamaño de letra, ¿vale? 00:03:39
En la cabecera H2 y en el segundo párrafo, ¿vale? 00:03:42
Entonces, lo normal 00:03:46
Pero solo quiero modificar en este párrafo 00:03:48
No quiero modificar en el párrafo anterior, ¿vale? 00:03:50
Por lo tanto, a este párrafo le voy a poner un id que va a ser intro, ¿vale? id intro. 00:03:52
Entonces, si nosotros quisiéramos modificar el tamaño de letra y poner el mismo tamaño de letra tanto en el párrafo intro como en la cabecera h2, ¿vale? 00:03:59
Lo normal sería utilizar dos selectores, uno para h2 y otro para el párrafo, pero con hojas de estilo podemos utilizar los selectores múltiples, ¿vale? 00:04:07
Selectores múltiples, ¿vale? 00:04:19
Que esto aplica el estilo a varios selectores utilizando la coma, ¿vale? 00:04:22
Es decir, nosotros pondríamos, por ejemplo, primero el selector H2, ¿vale? 00:04:30
Y a continuación el selector correspondiente a intro, ¿vale? 00:04:35
Y dentro de aquí pondríamos font-size, por ejemplo, 25 píxeles, ¿vale? 00:04:40
Y fijaros como ha aumentado el tamaño. 00:04:47
No se ve mucho en la cabecera H2 porque este ya tiene un tamaño grande, ¿vale? 00:04:49
Pero para que lo veáis, si pongo 50, se cambian los dos, ¿vale? 00:04:53
Puedo poner 35 para que no quede excesivamente grande. 00:04:58
Esto, pues, permite tener el código mucho más ordenado, ¿vale? 00:05:04
Y permite modificar diferentes... 00:05:07
Permite hacer las mismas modificaciones sobre diferentes selectores sin necesidad de tener que repetir ese código, ¿vale? 00:05:11
¿Qué más? 00:05:20
Vamos a ver ahora el selector descendiente 00:05:23
Para ello vamos a meter 00:05:25
Un fragmento nuevo de código 00:05:26
Vamos a meter un elemento div 00:05:29
Ya dijimos que los elementos div 00:05:30
Se utilizaban 00:05:32
Para organizar el código 00:05:35
Si estamos utilizando 00:05:36
Siempre es recomendable utilizar 00:05:39
Elementos que sean propios de HTML5 00:05:41
Dijimos que el div cada vez se utiliza menos 00:05:43
Pero no significa que no se utilice 00:05:45
De hecho es recomendable para organizar el código 00:05:47
Pero siempre que se pueda se utiliza en elementos HTML5, ¿vale? 00:05:49
Entonces, dentro de este elemento div lo que vamos a hacer es añadir otra nueva cabecera H2, ¿vale? 00:05:53
Vamos a añadir una cabecera H2 en la que ponemos esto es un encabezado H2, ¿vale? 00:06:00
Vamos a añadir un párrafo con un texto lorem ipsum, ¿vale? 00:06:09
Vamos a añadir un segundo párrafo con estos textos de Loren Ibsen, ¿vale? Y fuera del elemento div vamos a poner otro párrafo y otro segundo párrafo. Así, ¿vale? De tal forma que fijaros, esto es el texto que tenemos, ¿vale? 00:06:17
gráficamente veis que no hay ninguna diferencia 00:06:44
es decir, yo no distingo los párrafos que están en el div 00:06:47
que los que no están 00:06:50
pero sí, en el procesamiento de la web 00:06:50
sí que lo entiende y lo diferencia, ¿vale? 00:06:54
entonces, lo que ahora vamos a hacer es modificar 00:06:56
únicamente 00:06:58
el color de fondo de los párrafos que están dentro del div 00:07:00
¿vale? 00:07:05
pues para eso vamos a utilizar un tipo de selector 00:07:05
que es el selector descendiente, ¿vale? 00:07:08
entonces me vengo aquí 00:07:11
Voy a poner comentarios y pongo selector descendiente, que solo afecta a los párrafos dentro del elemento div. 00:07:13
¿Y cómo hacemos esto? Pues en primer lugar ponemos el elemento en concreto, en este caso el div, ¿vale? 00:07:31
Bueno, el elemento contenedor, digamos. 00:07:37
Y ahora ponemos los elementos que queremos que se vean afectados. 00:07:41
En este caso solo queremos los párrafos, por lo tanto pondríamos P, ¿vale? 00:07:44
Y ahora ponemos nuestra llave, ¿vale? 00:07:48
¿Que queremos cambiar el color del fondo? Pues recuerdo, background color, en este caso vamos a poner blue, ¿vale? 00:07:52
Y que queremos cambiar también el color de la fuente, pues color, dos puntos, white, ¿vale? 00:07:59
Entonces, fijaros que esta modificación solo está ocurriendo en los párrafos dentro de nuestro encabezado, ¿vale? 00:08:06
De nuestro elemento div. Sin embargo, por ejemplo, en el encabezado h2 no está ocurriendo a pesar de estar dentro de ese elemento div, ¿vale? 00:08:18
¿Ok? Bueno, ahora lo que vamos a ver es otro tipo de selector que es el selector de hijos, ¿vale? 00:08:29
para ello vamos a utilizar 00:08:37
para explicar bien y que podamos ver bien 00:08:40
la diferencia entre un selector descendente 00:08:42
y un selector de hijos, vamos a crear 00:08:44
una lista, ¿vale? una lista ordenada 00:08:46
la vamos a tener aquí debajo, ¿vale? 00:08:48
entonces recuerdo, pongo L, ¿vale? 00:08:49
y ahora voy a 00:08:53
meter elementos L, ¿vale? 00:08:54
en un primer elemento voy a poner 00:08:56
por ejemplo, vegetales 00:08:57
¿vale? 00:08:59
voy a poner 00:09:02
otro segundo elemento L y que van a 00:09:03
hacer, estos ventanes, ¿no? Vamos a poner un segundo elemento de ahí que van a ser 00:09:06
frutas, ¿vale? Debajo de frutas vamos a crear una lista no ordenada, ¿vale? Por ejemplo, 00:09:15
que va a tener, pues, manzanas, va a tener uvas y va a tener fresas, ¿vale? ¿Ok? Ahora 00:09:22
mismo no veis las puntuaciones ni nada de eso porque hemos quitado todos los márgenes y todo 00:09:36
el pattern. De hecho, si yo cojo esto y lo comento, vamos a comentarlo un segundito, fijaros que ahora 00:09:41
sí aparece. En cuanto lo he comentado han aparecido. Es para que veáis que los efectos afectan mucho 00:09:52
¿Vale? Los estilos. ¿Vale? Ok. Vale. Y debajo de esa lista, pues seguimos escribiendo y vamos a escribir, pues, verduras. ¿Vale? Que sea un poco repetitivo con esto. 00:10:02
Pero bueno, ok, entonces, vamos a hacer una lista, un selector de hijos, ¿vale? 00:10:15
¿Qué es un selector de hijos? Un selector de hijos va a afectar solo a los elementos que dependan directamente de otros, ¿vale? 00:10:24
Y me voy a explicar para que lo veáis bien, y luego vamos a hacer la comparativa con un selector descendiente, ¿vale? 00:10:33
O primero vamos a hacer la comparativa con un selector descendiente, ¿vale? 00:10:40
Vamos a imaginarnos que yo solo quiero afectar a los elementos LI que están debajo del elemento OL, ¿vale? 00:10:43
El elemento de la lista ordenada, ¿vale? 00:10:51
Entonces, yo lo que haría sería poner, si utilizar un selector descendiente, ¿vale? 00:10:54
Pondría OL, luego espacio, LI, y ahora pondría entre llaves lo que quiero que ocurra, ¿vale? 00:11:01
En este caso, pues lo que quiero es cambiar el color de la fuente y que sea rojo, ¿vale? 00:11:09
Y fijaros, fijaros lo que ha pasado, ¿vale? 00:11:13
Al ponerlo al igual que un selector descendiente, me ha modificado todos los elementos LI que hay debajo de este elemento OL, ¿vale? 00:11:17
Sin embargo, si yo quisiera aplicar solo a los LI que pertenecen, cuyo padre sea OL, ¿vale? 00:11:28
Y no me cogiera estos de aquí, cuyo padre es OL, tengo que utilizar el selector de hijos. 00:11:34
¿Cómo se utiliza ese selector de hijos? 00:11:40
muy sencillo, poniendo la tecla 00:11:42
de mayor, poniendo el carácter 00:11:44
mayor que 00:11:47
¿vale? fijaros que ha sido poner 00:11:47
el mayor que y solo me aparecen 00:11:50
ahora vegetales, frutas 00:11:52
y verduras 00:11:55
que realmente es verdura 00:11:56
¿vale? ok 00:11:58
para que veáis la diferencia 00:12:01
¿vale? es importante que entendamos 00:12:04
esta diferencia 00:12:07
vale, ahora vamos a ver el selector hermano 00:12:07
o el selector adyacente 00:12:10
¿vale? como lo queráis llamar 00:12:12
Antes de eso, como hemos hecho antes, voy a quitar estos valores del selector universal para que se vea la web un poquito mejor ahora mismo. 00:12:13
Vamos a imaginarnos un selector hermano, un selector adyacente, digamos que es el que afecte al elemento que haya justo después de otro. 00:12:25
En este caso, yo quiero modificar el párrafo que hay justo después de este elemento div. 00:12:35
Entonces, si yo quiero poner un selector hermano o un selector adyacente, lo voy a escribir aquí, selector adyacente, esto lo que va a hacer es modificar el elemento que se encuentra hermano, lo pongo entre comillas, o justo inmediatamente después de otro. 00:12:41
¿Vale? Entonces, nosotros pondríamos primero el elemento anterior al que queremos modificar, ¿vale? Yo quiero modificar el párrafo que hay justo después del párrafo del elemento div, ¿vale? 00:13:10
Es decir, quiero modificar este párrafo, pero no quiero que me modifique este, el siguiente, ¿vale? 00:13:27
Entonces pongo aquí div y ahora pongo p, ¿vale? 00:13:33
Y lo que voy a modificar en este caso, voy a poner un color de fondo así en un tipo verde, ¿vale? 00:13:38
Con background, color, ¿vale? 00:13:43
Sigue, ¿vale? 00:13:49
Y fijaros que solo me ha modificado ese párrafo, ¿vale? 00:13:50
Ahora, sin embargo, si yo quiero modificar todos los elementos P que haya después de ese div, ¿vale? 00:13:55
¿Ok? Es decir, si yo quiero hacer lo que se llama un selector hermano general, ¿vale? 00:14:09
Es decir, que modifica cualquier elemento P que se encuentre en el mismo nivel jerárquico, ¿vale? 00:14:16
Del elemento dip, ¿vale? 00:14:27
Es decir, a la misma altura, no los que estén por debajo. 00:14:30
Entonces, en este sentido, me va a modificar también algunos otros párrafos, fijaros, ¿vale? 00:14:33
Yo tengo dip, pondría dip, ¿vale? 00:14:38
Y ahora pondría el símbolo, el burrumillo ese, ¿vale? 00:14:41
Que se pone con la tecla Alt-G-R, que es la que está a la derecha del espacio, y el 4, ¿vale? 00:14:45
Le damos dos veces para que aparezca y ahí lo tenemos. 00:14:52
Y ahora pondríamos el párrafo en sí, ¿vale? 00:14:55
Y ahora aquí, por ejemplo, lo que hace es cambiar el tamaño de letra. 00:14:59
Voy a poner un tamaño de 25 píxeles, ¿vale? 00:15:02
Y fijaros que me ha modificado los dos párrafos de a continuación. ¿Vale? Los dos párrafos de a continuación. ¿Ok? Esto es simplemente para que sepáis otras formas en las cuales podéis hacer referencia a esos elementos. ¿Vale? 00:15:07
Ahora lo que vamos a hacer es ver otro tipo de selectores, que es el selector de atributos, ¿vale? 00:15:31
Para esto, este tipo de selector, perdón, funciona modificando el estilo dependiendo de los atributos del elemento, ¿vale? 00:15:38
Vamos a verlo con un ejemplo, vamos a verlo con el ejemplo de los enlaces, ¿vale? 00:15:46
Entonces nos vamos a ir a la web, a la parte donde estamos poniendo contenido, ¿vale? 00:15:50
Y aquí vamos a crear tres enlaces, ¿vale? 00:15:55
Estos enlaces, pues, vamos a poner, como siempre ponemos la almohadilla como nombre del enlace, ¿vale? 00:15:59
Este primero vamos a poner enlace 1, ¿vale? 00:16:05
Ponemos un salto de línea. 00:16:09
Vamos a poner un segundo enlace, ¿vale? 00:16:12
Con el texto enlace 2. 00:16:15
Y a este le vamos a poner un atributo. 00:16:17
Le vamos a poner el atributo target, ¿vale? 00:16:19
El atributo target. 00:16:22
Y le vamos a dar un valor que va a ser barra baja blanca, ¿vale? 00:16:23
Vamos a ponerle otro salto de línea y ponemos un tercer enlace, también con el atributo target, pero en este caso con el valor barra baja, sell, ¿vale? Y ponemos enlace 3, ¿vale? 00:16:28
Y lo que vamos a hacer ahora es modificar el estilo de aquellos elementos A que tengan el atributo target, independientemente de lo que va de la target, ¿vale? 00:16:45
Entonces, nos venimos aquí, como digo, esto va a ser un selector por atributos, ¿vale? 00:16:58
Un selector de atributos que se utiliza poniendo entre corchetes el nombre del atributo, ¿vale? 00:17:04
Entonces, en este caso, nosotros pondríamos primero el nombre del elemento, que como es un enlace, ponemos A, ¿vale? 00:17:14
Y entre paréntesis, el nombre del atributo, en este caso, target, ¿vale? 00:17:21
Entonces, para que lo veamos, vamos a hacerlo primero con un selector general. 00:17:27
Pondríamos A, yo pongo aquí color, ¿vale? 2.3, ¿vale? 00:17:31
Y fijaros que el color del enlace ha cambiado, ¿vale? 00:17:37
O pongo green y el color del enlace ha cambiado. 00:17:40
Ahora, si yo solo quiero modificar aquellos que tienen el atributo target, pongo entre corchetes, tal. 00:17:44
Y fijaros que ahora solo se me modifica el color de los elementos enlace 2 y enlace 3, ¿vale? 00:17:55
¿Vale? Ok. Eso en cuanto a modificar solo aquel que tenga el atributo target. Pero también podemos hacer, modificar, hacer un selector de atributos con un valor concreto, ¿vale? 00:18:02
Que sería igual, ponemos entre corchetes el atributo que queremos comparar, igual al valor, ¿vale? 00:18:20
Entonces, en este caso, vamos a hacer lo mismo. 00:18:28
Vamos a modificar el valor de target, pero solo para aquel que tenga el valor self, ¿vale? 00:18:31
Solo para el que tenga el valor self. 00:18:41
Y en este caso le vamos a poner un enlace rojo, ¿vale? 00:18:43
Entonces, fijaros, tengo yo ahora mismo tres enlaces diferentes, ¿vale? Y cada uno con un color diferente, azul, verde y rojo. ¿Ok? Esto a cuanto al selector de atributos. 00:18:47
Otra forma de dar valor a estos selectores por atributos es utilizando, dándole, haciendo una comparativa por qué palabra o por qué letra empieza, ¿vale? 00:19:03
Lo voy a explicar también con un ejemplo, pero para eso primero vamos a crear contenido nuevo, ¿vale? 00:19:17
Debajo de estos enlaces, voy a poner aquí un salto de línea, ¿vale? 00:19:23
Vamos a añadir un nuevo párrafo, ¿vale? Con un texto lorem ipsum. 00:19:27
Y aquí vamos a poner el atributo class, ¿vale? 00:19:32
Y como contenido este, como texto de lo que vamos a poner en este atributo va a ser destacado, ¿vale? 00:19:38
Vamos a añadir otro párrafo más, también con texto Lorem Ipsum, y en este caso la clase va a ser especial destacado, ¿vale? 00:19:47
Y por último, vamos a añadir otro párrafo más, también con texto Lorem Ipsum, y con una clase que va a ser, en este caso, destacado principal, ¿vale? 00:19:57
Y ahora lo que yo quiero es modificar, ¿vale? Modificar el atributo de... Modificar aquellos párrafos solo los que empiecen por la palabra destacar, ¿vale? En los que la clase empiece por la palabra destacar, ¿vale? Esto sigue siendo un selector de atributos, ¿vale? 00:20:10
Es un selector de atributos en el que lo que yo comparo es el comienzo de palabra, ¿vale? 00:20:31
Por comienzo de palabra. 00:20:44
¿Y esto cómo se hace? 00:20:46
Pues se hace poniendo entre corchetes el nombre del atributo, ¿vale? 00:20:49
El nombre del atributo y vamos a poner el circunflejo, ¿vale? 00:20:55
Y luego el igual. 00:20:59
Y entre paréntesis, el valor que queremos, ¿vale? 00:21:03
Entonces, yo pondría en este caso, como la clase es, como el tipo es una etiqueta P, ¿vale? 00:21:06
Entre llaves, entre cochetes, perdón, pondría el atributo, en este caso, class, el circunflejo, ¿vale? 00:21:13
Que para que no sepa suponer que la tecla mayúscula y la tecla que hay a la derecha de la P, 00:21:21
luego pondríamos igual, ¿vale? 00:21:26
Y entre comillas pondría destacado, ¿vale? 00:21:28
Ahora pongo, abro llave y cierro llave, y dentro voy a poner un color de fondo, background color, amarillo, ¿vale? 00:21:33
Entonces, fijaros que solo me ha modificado los párrafos, el primero y el tercero de aquí, que son el que solo tiene destacado y aquel que tiene destacado principal, ¿vale? 00:21:51
Destacado principal. 00:22:04
De esta misma forma se puede hacer lo mismo en el sentido contrario, ¿vale? 00:22:05
Entonces, para eso vamos a hacer un ejemplo, ¿vale? 00:22:13
Es decir, podemos utilizar en vez de por el comienzo de una palabra, por el fin de una palabra. 00:22:17
Eso lo vamos a hacer creando nuevos valores. 00:22:22
Otra vez vamos a utilizar aquí el enlace, ¿vale? 00:22:24
Voy a crear un primer enlace a una dirección, ¿vale? 00:22:27
Que va a ser http... 00:22:31
Bueno, voy a buscar aquí en el navegador, voy a buscar la dirección de google.es, ¿vale? 00:22:33
Y lo que hago es que la copio y la pego, ¿vale? 00:22:38
Fijaros que aparece ahí google.es. 00:22:41
Voy a coger otra, que es el diario.es, ¿vale? 00:22:44
Y creo otro enlace. 00:22:54
Perdona, es que se me había creado otro enlace, ¿vale? 00:22:56
Y voy a coger otra, que va a ser, por ejemplo, marca.com, ¿vale? 00:22:58
Ahí. 00:23:07
Creo otro enlace 00:23:08
Y lo pego 00:23:10
¿Vale? 00:23:12
Vale 00:23:14
Y voy a poner aquí 00:23:20
Como texto 00:23:22
¿Vale? 00:23:23
Del enlace 00:23:24
Voy a poner Google 00:23:24
Voy a poner un salto de línea 00:23:25
Voy a poner el diario 00:23:28
Y pongo un salto de línea 00:23:31
¿Vale? 00:23:36
Y voy a poner 00:23:38
Marca 00:23:39
Y pongo otro salto de línea 00:23:41
Ahí está 00:23:44
¿Vale? Pongo eso. Entonces, lo que voy a hacer ahora, ¿vale? Bueno, voy a quitar esta barra de final porque tampoco son necesarias, ¿vale? 00:23:49
Lo que voy a hacer ahora es modificar el color de aquellos enlaces en los que el atributo href termine en .es, ¿vale? 00:24:01
Es decir, en este caso, solo se me debería de modificar el enlace de Google y el enlace del diario, ¿vale? 00:24:10
Entonces, para eso, el procedimiento es parecido, ¿vale? Sería de nuevo un selector de atributos por fin de palabra, ¿vale? 00:24:17
Y en este caso, pues pondríamos en primer lugar el tipo, que es el A, ¿vale? Luego pondríamos el atributo, que es href, ¿vale? No lo he puesto aquí como se hace, perdonad, ¿vale? Sería entre llaves, el atributo y en vez de poner el circunflejo que hemos puesto antes, aquí vamos a poner el símbolo de dólar, ¿vale? Ponemos igual y entre paréntesis el valor, ¿vale? 00:24:32
Entonces, yo pondría href, símbolo de dólar, igual, y entre paréntesis, .es, ¿vale? 00:24:56
Y a este, por ejemplo, pues le voy a cambiar el color y le voy a poner rojo oscuro, ¿vale? 00:25:05
Y no se ve mucho porque los enlaces los tenía visitados, entonces aquí aparecen morados, ¿vale? 00:25:12
Lo que voy a hacer también es aumentarle el tamaño para que veáis que ese efecto se está produciendo, ¿vale? 00:25:17
Voy a poner aquí, por ejemplo, 15 píxeles, ¿vale? 00:25:22
os voy a poner 20 píxeles 00:25:25
¿vale? 00:25:28
fijaros que ahora si se ve 00:25:30
que solo estoy afectando a esos 00:25:31
dos elementos, a los elementos que 00:25:33
terminan en .es 00:25:35
¿vale? tanto Google como, pero solo 00:25:37
a los elementos cuyos atributos terminan 00:25:39
en .es, ¿vale? no nos confundamos 00:25:41
¿vale? 00:25:43
vale, eh, otro 00:25:48
otra cosa que podemos 00:25:50
hacer, eh, vamos a 00:25:52
mmm 00:25:54
Es otro selector de atributos, ¿vale? 00:25:55
Pero en este aspecto vamos a coger cualquier parte de contenido, ¿vale? 00:26:02
Y como digo, esto la mejor forma de entenderlo es con un ejemplo. 00:26:07
Y para eso nos vamos a hacer una lista no ordenada, ¿vale? 00:26:09
Con ul. 00:26:14
Y ahora debajo vamos a poner, por ejemplo, vamos a poner cuatro términos. 00:26:16
li4, tabulador. 00:26:21
Uy, no. 00:26:22
Yo me equivoco con esto. 00:26:24
li por 4 00:26:25
tabulador, ahí, ¿vale? 00:26:28
y vamos a poner curso 00:26:30
de php, ¿vale? 00:26:32
curso 00:26:36
de java 00:26:36
curso de 00:26:37
pintura y 00:26:40
sueña 00:26:44
con ser mejor 00:26:46
¿vale? alguna chorrada 00:26:48
vale, y 00:26:50
dentro de este elemento li 00:26:52
vamos a poner 00:26:54
el atributo title, ¿vale? 00:26:55
Y ahora aquí, por ejemplo, a este primero 00:26:58
vamos a poner curso.php 00:27:00
A este segundo 00:27:02
vamos a ponerle un atributo 00:27:04
title que va a ser 00:27:06
nuevo curso 00:27:07
de C++, ¿vale? 00:27:10
O un nuevo curso 00:27:13
de Java, perdón. 00:27:14
A este le vamos a poner un atributo title que va a ser 00:27:18
cursos, ¿vale? 00:27:21
Lo voy a llamar en plural para que veamos 00:27:24
la diferencia cursos de pintura vale y a este último vamos a poner 00:27:26
aprende se mejor 00:27:35
ok pues lo que vamos a hacer ahora es modificar el estilo de todos los 00:27:40
elementos de l y que tengan parte de su texto sea curva cv entonces nos vamos a 00:27:45
nuestro destino y como digo esto es un selector de atributos vamos a llamarlo 00:27:58
selector de atributos por palabra en cualquier posición vale y se hace de 00:28:05
nuevo ponemos llaves ponemos corchetes perdón y en este caso pondremos el 00:28:15
atributo y un asterisco vale y luego el valor que queramos en sí 00:28:20
ok total que lo que vamos a poner es 00:28:26
pondríamos el ee y vale porque es el elemento que queremos modificar 00:28:31
y entre corchetes pondríamos el title asterisco igual que ahora ponemos 00:28:37
¿Vale? Abrimos y cerramos 00:28:44
Y a este 00:28:47
La modificación de estilo que le vamos a hacer 00:28:49
Aumentarle el tamaño ¿Vale? 00:28:51
Y lo vamos a poner a 22 píxeles 00:28:54
¿Vale? 00:28:55
Y fijaros que las modificaciones 00:28:57
Solo se está haciendo 00:29:00
En los tres elementos 00:29:01
Que tenía la palabra 00:29:02
Cur ¿Vale? 00:29:05
Si fijaros que yo pongo ahora 00:29:07
Eh... 00:29:09
Fijaros que tontería 00:29:11
Si yo pusiera aquí en el title C, mejor, curioso, fijaros cómo se ha cambiado automáticamente, ¿vale? 00:29:12
No tiene que ver con que sea curso, tendría que ser que tuviera la palabra CUR, la cadena CUR, C-U-R, ¿vale? 00:29:22
¿Ok? Vale, vale, vale. 00:29:31
Vale, pues ahora lo que vamos a ver es cómo modificar un párrafo, ¿vale? En este caso un párrafo. 00:29:37
que contiene un valor de atributo, ¿vale? 00:29:44
Un valor concreto y que está diferenciado. 00:29:49
Y lo vamos a ver de nuevo, la mejor forma de explicarlo es con un ejemplo. 00:29:53
Para que vosotros podáis entenderlo, ¿vale? 00:29:57
Voy a crear un nuevo párrafo aquí debajo, ¿vale? 00:29:59
De los anteriores, que va a tener un texto de Lorentz. 00:30:03
Y en este caso voy a ponerle como clase, voy a poner texto-destacado. 00:30:07
espacio después de ese texto destacado principal 00:30:13
entonces fijaros que estos cuatro párrafos que estoy sombreando 00:30:18
todos tienen la palabra destacado 00:30:24
excepto el último que acabo de crear que tiene texto guión destacado 00:30:27
vale, pues me voy a ir a mi parte de hoja de estilo 00:30:31
y voy a poner otro selector por atributos 00:30:37
cuya etiqueta 00:30:41
que lo vamos a poner tal que así 00:30:46
va a ser ATR, luego va a ser 00:30:48
el burrumillo, el símbolo 00:30:51
de la ñ, que recuerdo que era 00:30:53
ACP4, igual 00:30:54
el valor 00:30:56
y os voy a poner aquí debajo 00:30:58
la explicación de esto 00:31:00
la explicación de esto sería 00:31:02
cualquier, de lo que vamos a hacer 00:31:04
es cualquier elemento p 00:31:06
que contenga el atributo 00:31:08
class, es lo que vamos a hacer 00:31:10
con el valor 00:31:12
destacado 00:31:14
separado por un espacio en blanco 00:31:15
¿vale? es decir 00:31:18
no nos valdría el valor 00:31:20
el último párrafo que hemos creado porque tenía 00:31:21
texto guión destacado 00:31:23
¿vale? y para que veáis 00:31:26
el resultado 00:31:29
¿vale? 00:31:30
me vengo aquí, yo pondría p 00:31:33
abro mis corchetes 00:31:35
pongo el class ¿vale? 00:31:37
pondría el gurrumillo 00:31:40
igual y entre paréntesis 00:31:41
Y entre comillas, perdón, destacado. 00:31:43
Abro llave y pongo un color. 00:31:47
En este caso, el azul. 00:31:50
¿Vale? 00:31:53
Entonces, fijaros que se ha modificado el color de la fuente de todos los párrafos menos del último. 00:31:53
¿Vale? 00:31:59
¿Ok? 00:32:04
Y por último, vamos a ver el último atributo. 00:32:05
¿Vale? 00:32:11
El último selector de atributos. 00:32:11
En este caso, la sintaxis va a ser ACR. 00:32:17
¿Vale? 00:32:20
Y vamos a poner una barra vertical. 00:32:20
La barra vertical se pone con la tecla Alt-G-R, que es la que está a la derecha del espacio, y luego le vamos a dar al número 1, ¿vale? 00:32:22
Y sale esa barra así en vertical. 00:32:31
Entonces pondríamos A-T-R igual y el valor, ¿vale? 00:32:33
¿Y qué es lo que vamos a hacer aquí? 00:32:37
Pues vamos a seleccionar cualquier elemento P cuyo atributo class, ¿vale? 00:32:40
empiece con la palabra texto, ¿vale? 00:32:47
Es decir, pondríamos P, abrimos, cerramos corchete, 00:32:53
CLASS, barra vertical, igual, y ponemos texto. 00:32:59
Y en este caso, esto lo que le vamos a hacer es aumentarle el tamaño de letra 00:33:05
y ponerle 18 píxeles, o en este caso, disminuirla, ¿vale? 00:33:09
Y fijaros que en este caso solo me ha escogido el último valor, ¿vale? El último valor, ¿ok? 00:33:12
Si yo quisiera hacer alguna modificación en alguno de los elementos, ¿vale? Por ejemplo, en el segundo párrafo, si yo pusiera texto, ¿vale? 00:33:23
Fijaros que al poner texto, el tamaño de este elemento no me ha disminuido, ¿vale? 00:33:33
No me ha disminuido. 00:33:41
Entonces, para que me disminuyese, tendría que ser una palabra, ¿vale? 00:33:43
Una palabra que empiece por texto. 00:33:50
Si yo ahora lo pego, tampoco, ¿vale? 00:33:52
Pues tiene que ser, tendría que ser, si yo pusiera texto y un guión, ¿vale? 00:33:55
Para que veáis las diferencias. Esto lo estoy haciendo modificando directamente el atributo a class y me permite mucho juego, ¿vale? Si yo ahora aquí, fijaros, donde pone destacado, quito la tem, me cambia directamente eso, ¿vale? Entonces, todo esto son formas de hacer modificaciones sobre el estilo utilizando selectores, ¿vale? 00:34:02
¿Lo usamos todo a la hora de diseñar una web? 00:34:23
No, utilizaremos los que nos venga bien o los que necesitemos, ¿vale? 00:34:29
No tenemos por qué utilizarlos todos, ¿vale? 00:34:33
Pero es importante que los conozcáis y sepáis que están ahí, ¿vale? 00:34:35
Muy bien. 00:34:40
Autor/es:
Fernando Martínez Martí
Subido por:
Fernando M.
Licencia:
Reconocimiento - No comercial - Compartir igual
Visualizaciones:
169
Fecha:
20 de enero de 2021 - 0:15
Visibilidad:
Público
Centro:
IES EL BURGO - IGNACIO ECHEVERRÍA
Duración:
34′ 42″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
134.52 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid