CSS avanzado: unidades, variables, funciones y selector

1. INTRODUCCIÓN: Sé que estás familiarizado con la unidad CSS. Usted está familiarizado con Pixel Parson DEM Val. Pero ¿familiarizaste con femin Vmax, unidad VH W? ¿Sabes cómo podemos usar la variable CSS en nuestros proyectos? ¿Te interesa saber cómo podemos usar la función de pantorrilla? Y te interesa aprender alguna otra función CSS, función mínima, función máxima, función almeja ¿Quieres trabajar con selectores CSS muy avanzados como selector simple, selector combinador, selector de atributos, posi Do class y selectores de elementos Posido Entonces este curso es para ti. Hola. Mi nombre es John T Shokar Soy desarrollador web full stack e instructor en línea. Bienvenido a mi curso, CSS Avanzado. Este es uno de los cursos más avanzados en CSS. Si quieres mejorar tu habilidad CSS, entonces este curso es para. 2. Tutorial de unidades en CSS parte 1: Hola, chicos. Me alegro de verte de vuelta. Este es el primer tutorial relacionado con CSS avanzado, y vamos a comenzar con la unidad de medida CSS. Si quieres asignar dentro de altura a un objeto, entonces debes saber cuántos tipos de unidades tenemos en CS. Aquí, puedes ver una lista de unidades que vamos a aprender en este tutorial, Pixel PercentiSEM, REM, viewpoard Sé que ya estás familiarizado con algunas unidades como pixel, percentiSem La mayoría de los casos utilizamos píxeles y percentis. Entonces sin estos, tenemos algunas otras unidades más útiles. En este tutorial, dividimos las unidades en dos partes. El primero es unidades absolutas, y el segundo es unidades relativas. Esta es la lista de unidad absoluta, centímetro, milímetro, pulgadas, píxel, puntos, etcétera Las unidades absolutas son unidades fijas, y la mayoría de las veces usamos unidades de píxeles. Es muy popular. Es muy popular en CSS. Sin eso, tenemos unidades relativas. Las unidades relativas Tse dependen de otros objetos padre. EM, REM, VH porcentajes, todas estas son unidades relativas muy populares Entonces, uno por uno, voy a tratar de explorar toda la unidad en este tutorial. Entonces comencemos la práctica. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor en vivo, y ya creé un documento ETL llamado index dot HTML Y en este documento ETL, dentro de la etiqueta body, tenemos una etiqueta de encabezado, y aquí en t unidades CSS Luego dentro de la etiqueta corporal, tenemos una etiqueta profunda con caja de nombre de identificación. Entonces estilizo esta sección de cuerpo. Primero, asigno una familia de fuentes Área Helvética. Y también estilizo esta caja usando su nombre de identificación. Primero, proporciono un borde, un borde sólido con dos píxeles. Entonces proporciono un color de fondo. Además, proporciono ancho y alto. Con 600 píxeles y altura, 300 píxeles. Aquí usamos Unidad absoluta, y el píxel es una unidad absoluta fija. Ahora la pregunta es ¿qué significa eso? ¿Cuál es el significado de fijo? Si reduzco el ancho del navegador, como puedes ver, nuestra forma no cambia según la semana del navegador. Puedes ver la barra de desplazamiento debajo del navegador. Si muevo esta barra de desplazamiento del lado derecho, se puede ver la forma del rectángulo completo. Es una unidad fija, por lo que no va a cambiar la altura y el peso según la altura del navegador y wi. Por eso lo llamamos unidad absoluta. Entonces vamos a llegar a la posición anterior de este navegador. Y ahora voy a usar un valor relativo. Entonces voy a usar el valor porcentual. Así Hemo tipo 100% con 100%. Y voy a poner este archivo. Hasta configurar este archivo, como puedes ver, aquí puedes ver nuestra caja tomar el 100% de ancho de este navegador. Si extiendo el tamaño del navegador, como puede ver, según el ancho del navegador, aumenta el ancho. Del mismo modo, si reduzco el ancho del navegador, ahora puedes ver, también es reducir el ancho de la caja según el navegador. Es significa que va a tomar el 100% del navegador con. De igual manera, si paso el 50% aquí, y luego este archivo, ahora se puede ver que toma el 50% del ala del navegador. Entonces este es el ejemplo de unidad relativa. Este tipo de valor depende de paren Elemento Die, de lo contrario, Ventana A la pregunta es cómo funciona con paren D. Déjame mostrarte un ejemplo Entonces dentro de esta caja, voy a tomar otro elemento DV, DV y también voy a asignar una ID, caja de ID. Y quiero mover nuestra vieja caja profundamente dentro de esta profundidad, así que voy a cambiar esta caja de nombre de identificación profunda uno. Ahora, la caja uno es nuestro padre profundo y la caja es profunda para niños. Entonces, para darle estilo a esta profundidad. Así que copia el nombre de identificación y ella soy tipo tiene etiqueta nuestro nombre de identificación cuadro uno. Después inserte los colores, voy a usar de manera similar las propiedades Así que copia las propiedades CSS, y voy a pegar dentro de este cuadro uno. Primero, voy a cambiar el color de fondo. No quiero ningún color de fondo. Y luego quiero asignar un ancho absoluto a esta D. Así que voy a asignar 600 píxeles y altura 300 píxeles. Si configuro este archivo, ahora puedes ver cómo elemento p hijo toma el 50% de ancho de este contenedor padre. Entonces como te dije, el valor relativo funciona relativamente de acuerdo con el tamaño de los padres. Entonces si reduzco el de otro modo aumentar la altura y el ancho del navegador, no va a afectar a nuestra caja porque dijimos valor absoluto a sus padres. Entonces déjame mostrarte. Entonces voy a reducir el navegador que. Sub para reducir el ancho del navegador, como puedes ver, aquí puedes ver, tenemos una barra de desplazamiento Pero nuestra caja no cambia la amplia. De igual manera, si aumento el ancho del navegador, también, se puede ver el mismo resultado porque ahora es trabajo de acuerdo al contenedor padre. Pero si quito el contenedor padre, entonces esta caja va a cambiar su ancho. Pero si elimino el parent deep significa caja uno, entonces va a cambiar la forma acuerdo a la ventana del navegador. Entonces va a tomar 50% de maleza de la ventana del navegador. Aquí usamos 50%. Es media que va a tomar 300 píxeles porque decimos caja uno con 600 píxeles. De igual manera, si paso 20% y luego configuro este archivo, ahora se puede ver, ahora es tomar 20% de 600 píxeles. Pero si le quito la caja uno, déjeme mostrarle a usted y esto hasta este archivo. Ahora la ventana se convierte en padre de esta d. Ventana significa la etiqueta del cuerpo. Y ahora voy a hablar de EM y REM ID. Las unidades EM y REM básicamente funcionan con el tamaño de fuente. Déjame mostrarte cómo. Entonces al principio, voy a aumentar la Op. Voy a tomar el 80% Entonces aquí voy a tomar una propiedad llamada tamaño de fuente. Tamaño de fuente. Tamaño de fuente uno EM. Y dentro de esta etiqueta profunda, aquí voy a agregar un párrafo ficticio Herm tipo um 100. Y voy a poner este archivo. Entonces aquí agregamos párrafo ficticio de 100 o, y dijimos tamaño de fuente 1:00 A.M. 1:00 A.M. El valor funciona relativamente porque es una unidad relativa y el padre de caja es óseo Y como puedes ver, en nuestra etiqueta corporal, no utilizamos ningún tamaño de fuente. Entonces usemos el tamaño de fuente. Tamaño de fuente, y voy a usar tamaño de fuente 13 Bigel voy a configurar este archivo Después de configurar este archivo, ahora se puede ver dentro de la caja, nuestro tamaño de fuente se reduce. Ahora 1:00 A.M. Conviértete en 13 píxeles. Pero si uso las 2:00 A.M. Así que voy a cambiar el Vin dos EM. Entonces voy a configurar este archivo. Ahora se puede ver que parece ser, y también está sobrevolado a este contenedor Digamos aquí usamos dos valores de tiempo de 13 píxeles porque en nuestra etiqueta padre, aquí usamos el tamaño de fuente de 13 píxeles, y dos veces hasta 13 píxeles son 26 píxeles. Por eso nuestra fuente become 26 pixel. De igual manera, si se quiere tomar la mitad del valor de este paren D, en ese caso, solo un it para pasar 0.5 pixel 0.5 am. Si configuro este archivo, ahora nuestras fuentes se vuelven demasiado pequeñas porque es hub el valor. Así que nuestro tamaño de fuente se convierte en seis píxeles. Pero si comento, de lo contrario, elimino el elemento padre tamaño de fuente, y aquí uso 1:00 A.M. Value y configuro este archivo. Ahora puedes ver que tenía un valor predeterminado para esta fuente. Ahora la pregunta es, cuál es el valor predeterminado de 1:00 A.M. El valor predeterminado de una M es de 16 píxeles. Si te muestro la configuración de mi navegador y luego voy a la apariencia, puedes ver el tamaño de fuente. Si abro este tamaño de fuente, ahora se puede ver, por defecto, decía 16 píxeles. Pero si aumento el tamaño, supongamos que uso 28 y vuelvo a mi ventana, ahora puedes ver ahora nuestro valor de fuente uno M convertido en 28 pixel. De igual manera, si reduzco el valor, se vuelve tan pequeño. Ahora, un valor M se convierte en nueve píxeles porque aquí decimos nueve píxeles. Entonces es tomar el valor predeterminado del tamaño de fuente del navegador. Y la mayor parte del tiempo, el navegador usa 16 píxeles. Y ahora hablemos de la unidad REM. Entonces aquí voy a escribir REM. Y voy a detener este archivo. REM significa EM relativa. Es bastante similar con EM, pero no funciona según padre. Ahora puedes ver el tamaño de fuente predeterminado, que es de 16 píxeles. Pero si le asigno tamaño de fuente a nuestro cuerpo, algún tipo de tamaño de fuente, y voy a asignar ocho píxeles. Y si configuro este archivo, como pueden ver, no reduce el tamaño de la fuente. No trabajo según pan. Esta RMU está relacionada con la raíz. Si aumento el tamaño de fuente del navegador, déjame mostrarte apariencia tamaño de fuente. Entonces voy a usar el tamaño de fuente de 28 píxeles, y luego de vuelta a la ventana, ahora puedes ver, ahora puedes ver nuestro RM Valcal 28 pixel Entonces ahora arreglemos la onda predeterminada, que es de 16 píxeles. Y si uso dos RAM y como ustedes saben, va a tomar 32 pixel. Y hay otra manera de que podamos manipular la unidad RM usando la etiqueta root. Y como saben, nuestra etiqueta raíz es T Milton. Entonces si estilo el tipo de sonido HTML TML, entonces estableces el calvss voy a usar la propiedad de tamaño de fuente Tamaño de fuente, y voy a establecer el tamaño de fuente diez píxeles. Esta es la voluntad por defecto. Y si configuro este archivo, ahora se puede ver que nuestras fuentes se han convertido en 20 píxeles porque aquí usamos dos RM. Es decir el doble del tamaño de fuente raíz en. Entonces si utilizo un RM y luego configuro este archivo, ahora puedes ver que nuestras fuentes se convierten en diez píxeles porque ahora nuestro tamaño de fuente root tech es diez Bexl y ahora voy a configurar la unidad EM dos Entonces voy a tomar tamaño de fuente uno EM y nosotros con uno EM. Si configuro este archivo, va a tomar con ocho píxeles. Además, va a tomar fuente ocho píxeles. Déjame mostrarte porque como te dije, EMV trabaja ancho según el padre Entonces si configuro este archivo, puedes ver el resultado. Se necesita un ancho de caja ocho píxeles porque Henry estableció el tamaño de fuente de ocho píxeles. También tomas el tamaño de fuente ocho píxeles. Así que el valor AM toma el tamaño de fuente del padre y aplica el tamaño de fuente al ancho del hijo. Y de manera similar, si uso REM Value, REM y REM y configuro este archivo, ahora nuestro tamaño de fuente se convierte en diez píxeles. Además, nuestro ancho se convierte en diez píxeles porque se arraiga bien. Espero que ahora quede tan claro que por qué usamos EM y RMW solo con fuentes, no la altura y el id Así que esta es la primera parte de este tutorial. Así que esta es la primera parte de este tutorial En la siguiente parte del tutorial, vamos a hablar de VH y VW. Entonces, gracias por ver este video, mantente atento. 3. Tutorial de unidades en CSS parte 2: Hola, chicos. Me alegro de verte de vuelta. Esta es otra unidad CSS relacionada con Tutorial. Y en este tutorial, vamos a comenzar con vista altura de arranque y Viewboard Con Entonces comencemos con Viewbard With. Aquí puedes ver una ventana del navegador en tu pantalla. Y llamamos ancho total del ancho del navegador es Viewboard Weav y ancho de viewpot, dividir con a la Si usamos 50 VW entonces va a tomar hub de este navegador. De la misma manera, tenemos altura de viewpot. También se divide con 100. Y si usamos 50 VH entonces va a tomar el 50% de esta ventana. Entonces comencemos la práctica y veamos cómo podemos usarla. Entonces como pueden ver, estamos en vis un editor de código de estudio, y ya creo otro documento HTML nombre Idextdt TML Entonces primero, voy a cambiar el con unidad. Aquí voy a usar 100 VW, y para altura, voy a usar 100 VH. Por ahora, no quiero el tamaño de fuente. Entonces voy a quitarlo. Después de paso este archivo, como se puede ver, se puede ver que ocupa por completo la altura del navegador y el navegador. Pero hay un problema. Se puede ver la palabra de desplazamiento que M abajo. Es un problema. Entonces voy a quitar los encabezamientos d h uno También, voy a decir margen cero. Y también, voy a quitar el borde del borde con cero píxeles, y voy a configurar este archivo. Si configuro este archivo, arriba para configurar este archivo, se puede ver que elimina la barra de desplazamiento de la ventana y ocupa completamente la altura y anchura de esta ventana. Si reduzco el ancho, también se puede ver, no hay barra de desplazamiento. Y también esta unidad trabaja para la altura. Y ahora voy a reducir la unidad Vale. Para eso, voy a pasar 50, 50 VW por altura, queda como está. Después de establecer este archivo, se puede ver el resultado. Ahora, el ancho se convierte en la mitad de esta ventana del navegador. Como saben, todas estas son unidades relativas. Es bastante similar con porcentajes, pero hay una diferencia entre porcentaje y viewpod y altura de vista Trabajo de valor porcentual según el elemento padre. Si establecemos el ancho del elemento padre, 600 píxeles, y luego usamos el ancho del elemento hijo, 50%, entonces se va a establecer con 300 píxeles, pero el ancho del viewpod y la altura de la ventana visual no funcionan así Siempre es trabajar de acuerdo al tamaño de la ventana. Déjame mostrarte. Entonces voy a tratar de ponerlo en un nosotros arreglado. De nuevo, me voy a llevar un contenedor paren. En lo profundo de la etiqueta dip, voy a asignar una identificación. Identificador cuadro uno. Entonces voy a mover este dip dentro de esta etiqueta paren dip Y ahora voy a darle estilo a la caja uno, hashtag, caja uno, y dentro del caliss nuestra primera propiedad es frontera Voy a usar este mismo valor, wed no pixel, borde sólido. Y entonces voy a decir altura y nosotros Ancho, 600 pixel, altura 300 pixel. Si configuro este archivo, puedes ver el resultado. Entonces, en la etiqueta padre, usamos el valor absoluto, y en una etiqueta secundaria, aquí usamos el valor relativo, pero aquí usamos la altura de la ventana y la maleza de viewpot Y como te dije, la altura del viewpot y el viewpot con no funcionan relativamente al contenedor padre Funciona relativamente al tamaño de la ventana. Entonces si reduzco el ancho de este navegador, como pueden ver, relativamente funciona con la ventana, no con el contenedor padre. Pero si utilizo el valor porcentual ahí, entonces aquí voy a usar el 50%. Y luego establecer este archivo. Ahora puedes ver que toma 50% con de este contenedor padre. Entonces espero que ahora te des cuenta cuál es la diferencia entre el valor de viewport y el porcentaje Ambas unidades son unidades relativas, pero su método de trabajo es diferente. Ahora hablemos de nuestras dos últimas unidades, V max y min. Vmax significa Vpot máximo y min significa mínimo de viewpot Entonces comencemos la práctica. Pero antes de comenzar la práctica, quiero despejar la unidad Vmax y Win En tu pantalla, puedes ver una ventana del navegador, y la altura de la Ventana Droser es de 300 píxeles y la Ventana del Navegador D es de 400 píxeles y ella creamos DV dentro de esta ventana del navegador Y también especificamos un ID a este elemento Dp, que es 50 Vmax. Significa que va a tomar el 50% de la semana del navegador ilop, que es de 200 píxeles Ahora se podría pensar que es bastante similar con unidad porcentual, lo contrario, unidad VW, pero no lo es. Unidad Vmax siempre va a tomar el máximo valor de navegador. Ahora la pregunta es, ¿cuál es el significado de eso? Como puede ver, el ancho de nuestro navegador es mayor que el alto del navegador, por lo que va a tomar el valor del ancho del navegador, y 50 VMX de 400 píxeles es de 200 píxeles Por eso decía D ancho 200 píxeles. Pero, ¿qué? Si reduzco el ancho de la ventana del navegador déjame mostrarte. En el siguiente ejemplo, como pueden ver, aquí reduzco el navegador con. Ahora nuestro navegador nos convertimos en 250 píxeles y la altura del navegador es de 300 píxeles. Ahora, la altura del navegador es mayor que la maleza del navegador. Entonces esta vez, la unidad VMx va a tomar esto en la altura en 300 píxeles, y el hasta 300 píxeles es de 150 píxeles Se va a establecer el objeto con 150 píxeles porque la unidad Vmax siempre selecciona el valor máximo Y en el sentido contrario, nos referimos al trabajo unitario. Entonces comencemos lo práctico y aclaremos el concepto. Al principio, voy a quitar el elemento paren dip, caja uno. No lo necesito. Entonces también, voy a eliminar de esta sección de estilo. Y aquí, voy a cambiar el con 50 Vmax. Y aquí, me voy a sentar así de bien. Ahora la pregunta es, ¿cuál es el significado de V max? Y también, voy a cambiar la altura para entenderlo mejor. Entonces aquí voy a pasar 50 H. VMAX va a tomar el máximo Va a comprobar la altura y con ambas y va a tomar la w más grande. quiero decir que va a comparar la altura del mirador y la hierba viewpo y se elige el valor mayor Y según el valor mayor, va a fijar el peso. Déjame mostrarte cómo. Aquí puedes ver cómo la altura de la ventana es más grande que la ventana. Por eso tomo eje de esto. Y según el hub de este valor, se fijó. Supongamos que el ancho de nuestra ventana es de 200 píxeles, pero la altura de nuestra ventana es de 300 Entonces va a tomar 50 valores VMX de esta altura, no el ancho, y nuestra altura es de 300 píxeles, por lo que se va a establecer con 150 píxeles Por eso puedes ver aquí usamos 50 VMX, pero no toman el 50% del ancho del navegador Se necesita el 50% de la altura del navegador. Pero, ¿qué? Si aumentamos el navegador con y lo hacemos más grande que la altura del navegador, déjame mostrarte. Ahora voy a aumentar la maleza del navegador. Ahora puedes ver que el ancho de nuestro navegador es mayor que el alto del navegador. Entonces esta vez se va a llevar el navegador con. Y según el navegador con Value, toma 50 VMX significa hub del ancho del navegador Ahora puedes notar que nuestro ancho de contenedor ocupa el 50% de la maleza del navegador. Pero si reduzco el ancho del navegador, ahora no ocupa el 50% del ancho del navegador. Porque la altura del navegador es mayor que el ancho del navegador. Por lo que ahora configuró el con el 50% de la altura del navegador. Entonces este es el uso de la unidad Vmax. Para el diseño responsive, es muy útil y al contrario, tenemos otra unidad, que soy yo. Entonces voy a duplicar esta línea y comentar la anterior. Entonces voy a configurar este archivo y volver a mi navegador. Y ahora voy a cambiar el nombre de la unidad. 50 significa ver tablero mínimo, y voy a volver a configurar este archivo. Después vuelvo al navegador. Ahora puedes ver el resultado diferente. Esta unidad es completamente opuesta a la unidad Vmax. Ahora puedes notar que puedes ver nuestro navegador ancho es más corto que la sugerencia del navegador. Por eso va a tomar navegador con Win, y según el navegador con VRU, va a poner el ala de caja vacía Window W 200 pixel, entonces va a establecer box width 100 pixel porque aquí usamos 50 de área de viewpot Pero, si aumento el ancho del navegador, déjame mostrarme. Y ahora voy a aumentar el navegador Wi Después de aumentar el ancho del navegador, ahora puedes ver, ahora la altura del navegador es más corta que el navegador wid Por eso decía Con de esta caja, 50% de la altura del navegador. Si reduzco la altura del navegador, como pueden ver, nuestro ancho de caja se vuelve tan pequeño porque ahora toma el 50% de esta gran altura. Si la altura es de 100 píxeles, entonces establece este ancho de caja 50 píxeles. Entonces así es como funcionan Vmax y unidad de tejido. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender la variable CSS. Así que gracias por ver este video, estén atentos para el siguiente tutorial. 4. Variables en Css: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS avanzado, y en este tutorial, vamos a aprender la variable CSS. Con eso, también, vamos a aprender dónde funcionan. Al principio, veamos sin variables, cómo podemos gestionar nuestro trabajo. Entonces vamos a aprender cómo podemos usar variables para facilitar nuestro trabajo. Y podemos sorber nuestra valiosa corbata. En el lado derecho de tu pantalla, puedes ver un navegador. En este navegador, tenemos un diseño web básico, encabezado, maniobra, pie de página, barra lateral, contenido, encabezado, etcétera Aquí puedes ver nuestro color de encabezado y el color del pie de página es similar. Además, cuando abro mi auto en estos elementos de navegación, se puede ver que el color de fondo también es similar. Básicamente, reutilizamos el mismo color tres veces. Si te muestro mi SDML como puedes ver, nuestro color de fondo de cabecera es gris Además, nuestra maniobra sobre el color de fondo es gris. Con eso, nuestro color de fondo de pie de página es gris. Totalmente usamos tres veces de color gris. Ahora, supongamos que necesitamos cambiar el color gris. Quiero sustituir el color gris por el color verde. Para eso, necesitamos cambiar el nombre del color tres veces desde la intersección desde la barra de navegación y desde el pie, es un proceso que consume mucho tiempo. Para resolver el problema, CSS introduce variables CSS, y para crear estas variables, es necesario usar una raíz de nombre Posidoclass Aperclon necesitas escribir root. Luego dentro de los cálices, necesitas declarar las variables y puedes usar estas variables a lo largo de este sitio web Como puedes ver, cómo creamos una variable llamada main color. Y en esta variable, a ella le asignamos un valor y nuestro nombre de valor es color rojo. Vas a usar cualquier tipo de valor, valor de píxel, valor de cadena, valor de color, valor de color, etcétera Entonces tenemos que llamar a esta variable en toda nuestra página web. Y si necesitas cambiar el color, entonces tenemos que cambiarlo una vez. Tenemos que cambiar en nuestra sección variable. Supongamos que quiero el color verde. Entonces voy a sustituir el rojo verde y vas a aplicar color verde toda esta sección. Recuerda, para declarar una variable, primero, necesitamos escribir dos guiones, y luego necesitas escribir nombre de la variable, entre variable, puedes usar guión de lo contrario underscsine, pero no puedes Yo creo una variable, y ahora quiero usar esta variable. Supongamos que quiero usarlo en clase A. Para eso, y dentro los colores aquí declaramos un nombre de propiedad color. Entonces tenemos que llamar eran función. Entonces dentro de la ronda ss, necesitamos llamar al nombre de la variable para aplicar el Val luego automáticamente, va a colocar color rojo en esa posición. De igual manera, quiero aplicar el mismo color para el fondo. En la clase B, utilizo una propiedad llamada color de fondo. Entonces llamo a la función variable y aplico este cull y llamo a esta variable en el cull principal Al mismo tiempo, podemos cambiar el color de fuente y el color de fondo, y podemos crear múltiples variables en nuestra etiqueta raíz. Recuerda, esta es una pseudo clase y podemos llamar a esta variable tanto como queramos Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Entonces como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor en vivo, y ya creé un documento de estimación llamado index dot HTM. Y como puedes ver en mi navegador, hay un diseño de sitio web de BSI Aquí usamos el color gris tres veces en la sección de encabezado, en la sección de vecino sobre, y en la sección de pie de página. Entonces para ese color, quiero crear una variable. Entonces primero, voy a escribir una clase Posito y nuestro nombre de clase Posito es Rob Rube. Entonces el carnívoro es y nuestro varim es Entonces colon y yo teclearía una V y nuestro um es gris. Y semicroón 210 esta línea. Esta es nuestra primera variable llamada color principal, y voy a copiar el nombre de la variable, color principal. Aquí definimos con éxito la variable en nuestra etiqueta raíz. Se trata de un alcance global. Ahora para llamar a esta variable. Para eso, como ustedes saben, usar eran función. En nuestro fondo de cabecera, voy a escribir eran función. Entonces en los vestidos redondos, necesitamos pasar el nombre de la variable y nuestro nombre de variable es color principal. El semicrón esta línea. Si configuro este archivo, como pueden ver, está escrito el mismo resultado. Aquí puedes verlo crecimiento cambiar la llamada de fondo. De igual manera, voy a copiar esta función, y ahora quiero llamar a esta variable en nuestra sección Her, NebBahor En nuestra sección de menú, aquí voy a llamar de nuevo a la variable. Nosotros color principal. Apres el expediente Como pueden ver, no hay cambios si obero mi casar en estos elementos del menú Entonces voy a llamar a la misma variable en nuestra sección de pie de página. Para el fondo, color principal, y hasta preestablecer este archivo, se puede ver el resultado. Ahora necesitamos cambiar este color de las secciones. Para eso, no necesitamos hacer el mismo trabajo tres veces. Sólo queremos ir a la sesión de variables donde declaramos la variable y desde esta sección, voy a cambiar el color. Aquí voy a escribir color verde. Después de establecer este archivo, se puede ver el resultado. Al mismo tiempo, cambia el color de fondo y el color de superficie de los diferentes lugares. Ya era hora. Del mismo modo, se puede crear una variable para cualquier valor. Esta vez, voy a crear variable para para la hambruna. Así que el color principal, Imo tipo guión guión principal forma. Y quiero fuente principal, Georgia. En nuestra etiqueta corporal, su uso área de familia de fuentes. Ahora quiero cambiar la familia de fuentes de headtag aquí dentro de esta etiqueta de cabeza, voy a usar familia de fuentes, así que voy a llamar a la variable Dentro de la función, voy a jugar como el nombre de la variable y nuestro nombre de variable es fuente principal. Después semicon dos en esta diapositiva. Después de establecer el archivo, se puede ver el resultado. Se ha cambiado la familia de fuentes de nuestra sección de cabecera. Este es el uso de variables. Y tenemos que girar dos métodos para crear variables. Cuando usamos postitoclass raíz para declarar variables, entonces va a establecer el alcance global a nuestras Es principal, puedes usar esas variables en cualquier parte de tu sitio web. Pero si quieres usar variables en área limitada, para eso, necesitamos asignar alcance local a nuestra variable. Entonces veamos cómo podemos crear una variable de alcance local. Como puedes ver, en nuestra clase A, ella crea una variable, color principal. Luego dentro de la misma clase, llamamos a la variable usando función were. Ahora, esta variable se convierte en variable de alcance local porque no podemos usar esta variable fuera de la clase A. Supongamos que necesitamos darle estilo a la etiqueta ancla dentro de la clase B A. Para eso, también podemos usar esta variable porque Hey llama a esta variable dentro de la clase B A. Ahora la variable scope se convierte en ámbito local. Empecemos la práctica y veamos cómo podemos usarla. Como puedes ver en nuestra sección de contenido, tenemos párrafo, tenemos encabezamiento dos, también tenemos tripa diez. Es que la sección de contenido voy a declarar una variable, y nuestro nombre de variable es T color. T coloreado y quiero asignar a esta tasa variable. El similar esta línea. Ahora nuestra variable se convierte en variable de alcance local, y quiero cambiar el degral ahora quiero cambiar el color de la fuente del contenido. Quiero color rojo. Pero que aquí hay que llamar a la función donde dentro del latón redondo, quiero T color. De igual manera, quiero cambiar el encabezado a color, que está dentro de la porción de contenido. Tipo Heald donde quiero usar el color T. Con eso, también, voy a aplicar este mismo color en nuestra etiqueta nga, que está dentro del contenido En la sección de color, voy a llamar a la variable ese color T. Uptres arriba este archivo, se puede ver el resultado. Como puedes ver, aplicó con éxito el color rojo o de la parte de contenido. Pero si llamo a esta variable fuera de la sección de contenido, déjame mostrarte. Como puedes ver, tenemos barra lateral y etiquetas cortadas. Quiero aplicar esta variable en sidebar y etiquetas de corte. Aquí estoy para llamar a la función re, donde dije la variable, quiero usar T color. Urest up este archivo, como se puede ver, no cambia nuestra barra lateral y corta los colores tech Porque aquí usamos variable de alcance local y el color T es la variable de alcance local de contenido. No podemos usarlo fuera de la sección de contenido. Pero si llamo una variable de alcance Glover, déjame mostrarte. Aquí quiero usar color principal y quiero configurar este archivo. Después de establecer este archivo, como puede ver, cambiamos con éxito nuestra barra lateral ang tech colores. Así funcionan las variables. Espero que ahora te quede claro cómo podemos usarlo. Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 5. Función Calc(): Entonces soy Hola, chicos. Me alegro de verte ahí. Esta es la primera función CSS relacionada con el tutorial. En realidad, no lo es. Ya cubrimos eran función en nuestro tutorial anterior. Función de pantorrilla, utilizada físicamente para cálculos matemáticos. Ahora la pregunta es, ¿por qué deberíamos usar cálculos matemáticos? Veamos un examen. Entonces como puedes ver, en clase A, su conjunto Con 100% menos 18. Este es uno de los ejemplos de la función de pantorrilla, y en el siguiente ejemplo, Hero use 100% dividido por dos. Su principal ahora el ancho se convierte en 50%, y en el siguiente ejemplo, insertar la posición de fondo, su declarar posición XX y posición YxS, pero usamos la función de pantorrilla Aquí uso 100% -50 pixel, también 100% -20 pixel para YxS Además, podemos usar la función de pantorrilla con colores. Déjame mostrarte. Como puedes ver, color de fondo del héroe en modo HSL, el tono de paso de Heid, la saturación y el relámpago Y para la saturación, utilizo función de pantorrilla para multiplicar con 25%. Se quiere decir que este valor se convierta en 50%. Entonces espero que ahora quede claro cómo podemos usar la función de pantorrilla. Y ahora te voy a mostrar qué tipo de operadores aritméticos podemos usar en función de becerro Entonces, todos estos son operadores aritméticos que podemos usar en función de becerro, suma, subestructura, multiplicación Comencemos lo práctico y veamos cómo podemos usarlo en línea real. Como pueden ver uno al lado del otro, abro mi editor de código de Visual Studio y mi navegador usando la extensión del servidor light. Y dentro de esta página de estimación, aquí creo una profunda. Y a esta profundidad, configuramos con 500 píxeles y una altura de 300 píxeles. Y dentro de esta profundidad, tenemos algún texto ficticio. Y ahora me voy a cambiar con unidad. Aquí voy a usar porcentaje de unidad, 100%. Uprasep este archivo, como puedes ver, ocupa el 100% de ancho del navegador Y ahora voy a añadir algo de relleno a esto. Relleno de 20 píxeles. A la altura de este estilo. Como puedes ver, aumenta un poco nuestro ancho. Y también, se puede ver el colegial que hacemos. Otra pregunta es por qué ha ocurrido. No usa ningún fijo en. Porcentaje de uso de grada en. Entonces, ¿por qué necesitamos usar la barra de desplazamiento para ver toda la D? Debido a que el heno usa relleno. Agregamos relleno desde todas las direcciones. Entonces va a agregar relleno desde el lado derecho. Se va a agregar relleno a 20 píxeles desde el lado derecho y 20 píxeles desde el lado izquierdo. Por eso vemos la barra de desplazamiento a continuación. Y ahora necesitamos y ahora tenemos que reducirlo. Para eso, ella necesitamos usar la función de pantorrilla. Sono tipo CALC. Después dentro de las prensas redondas, primero, voy a pasar el valor porcentual, que es del 100%. Menos del lado derecho, quiero -20 pixel. Y del lado izquierdo, de nuevo, voy a -20 píxeles. Y luego, como pueden ver, aquí agregamos frontera desde todas las direcciones. Entonces necesitas menos un borde de píxel. Desde la izquierda y desde la derecha un píxel. Ure en este archivo, ahora se puede ver el sm. Elimina nuestra barra de desplazamiento, y además toma 100% hierba. Sí, toma 100% de ancho y de la hierba 100%, Hero -42 pixel Si te muestro toda mi pantalla, puedes ver el th Si aumento, de lo contrario, disminuyo la ventana del navegador, como puedes ver, no hay barra de desplazamiento en nuestro navegador. Y también se puede ver hasta 100% de hierba, tenía relleno de 20 píxeles desde todas las direcciones. Entonces este es uno de los buenos usos de la función de pantorrilla. Y ahora quiero centrar vertical y horizontalmente esta caja. Para ello, necesitamos usar valor fijo. Entonces voy a duplicar esta línea y comentar la anterior. Y aquí voy a usar un valor fijo. Valor fijo, 500 píxeles. Y además, voy a eliminar todos los datos dentro de esta etiqueta profunda. Entonces a partir de ahí, voy a eliminar todos los datos. Entonces afuera de la etiqueta profunda, voy a tomar una etiqueta de párrafo, P. Y dentro de esta etiqueta de párrafo, voy a escribir casi 1,500 dammi text Gana 1,500. Y voy a poner este archivo. Después de establecer este archivo, se puede ver el resultado. Ahora, vamos a encender la piel completa para entenderla poco. Y ahora quiero hacer absoluta la posición profunda. Y también, necesitamos colocarlo horizontal y verticalmente centrado. Para eso, vamos a llegar a la edición de código de Viger studio. Entonces aquí, voy a usar posición absoluta. Y de la izquierda, voy a tomar el 50%. Desde arriba, me voy a llevar el 50%. Establece este archivo, podrías pensar que va a centro de profundidad, pero no lo es. Si te muestro mi navegador, como puedes ver, no se centra a lo profundo. Porque si trazo una línea de esta posición a esta posición y divido nuestro navegador en dos partes, ahora puedes ver nuestro 50% de inicio con en esa posición. Desde arriba y dejar, es el punto central. Es la posición del 50%. Por eso nuestro profundo inicio en esa posición. Entonces, para hacerlo alineado horizontalmente y alineado verticalmente, necesitamos menos la mitad del ancho de esta profundidad desde el 50%. Así que vamos al estudio visual Aquí voy a usar la función de pantorrilla. El 50% menos, como puedes ver, nuestro ancho es de 500 píxeles. Entonces aquí de aquí, voy a -250 píxeles. De manera similar desde lo alto. Así que copia el valor. Entonces desde arriba, quiero -150 pixel. Y también a partir de aquí, necesitamos menos el relleno -20 píxeles. Y además, voy a menos un pixel botel menos un pixel Y voy a hacer lo mismo con nuestra propiedad de primer nivel. Entonces voy a copiar esta sección y la voy a pegar aquí. Y esta vez, necesitamos menos 150 píxeles. Porque establecemos una altura de 300 píxeles. Entonces después de configurar este archivo, si te muestro mi navegador, como puedes ver, perfectamente lo hacemos centro. Y si respondo nuestra pantalla, como pueden ver, automáticamente la reproduce central. Después de cambiar el tamaño de nuestra ventana , automáticamente centro vertical y horizontalmente nuestro elemento DB Entonces este es uno de los ejemplos de la función de pantorrilla. Ahora, déjeme mostrarle otro ejemplo. Y ahora voy a arreglar un profundo sin usar posición fija. Pero también, voy a hacer nuestro layout flex. Para eso, tenemos que decirle a tres almen profundos. Déjenme resumir. Entonces ya no necesito este párrafo, así que voy a quitar este párrafo. Y esto es profundo número uno, y voy a establecer un encabezado de nombre de identificación. Entonces cavé esta D para escribir. Y este es nuestro segundo profundo, y aquí lo voy a decir ID content. En nuestro último profundo, voy a establecer ID, pie de página. Y voy a decir esto. Y también voy a comentar toda esta sección. Aquí comento toda la sección de box time. Y también, voy a escribir algún texto. Es este elemento profundo. Para la sección de encabezado, voy a escribir header. Encabezado, para contenido, voy a escribir contin. Y para pie de página, voy a escribir footer. Entonces al principio, voy a darle estilo a la sección de encabezado, encabezado Haztag En cambio los carierss voy a agregar frontera. Borde, un píxel. Y quiero frontera sólida. Sólido y negro. Entonces voy a establecer el color de fondo. Fondo verde. Y voy a tomar el 100% y la altura 100 pixel. Y similar para la parte de contenido, voy a duplicar esta sección y Hemo para pasar el color de fondo rojo Y además, voy a tomar 100% nosotros y para la altura, voy a usar la función de pantorrilla. Entonces primero, voy a cambiar el nombre de identificación contener. Entonces voy a darle estilo al fut como sección. Hasta cuatro etiqueta. Y quiero el color azul. Así que vamos a configurar el archivo y volver al navegador. Entonces aquí se pueden ver tres del elemento profundo, y voy a quitar este texto. Entonces voy a comentar esta etiqueta H one y establecer este archivo. Volvamos al navegador, y ahora quiero asignarle a este elemento de contenido profundo el espacio restante. Para eso, necesitamos usar la función de pantorrilla. Entonces en nuestra sección de contenido, aquí voy a empatar 100 VH significa altura UPod Si configuro este archivo, como pueden ver, nuestra sección de contenido toma 100% de altura eBoard, pero tenía una barra de desplazamiento No quiero esta barra de desplazamiento. Quiero un encabezado fijo y con patas. Para eso, necesitamos menos la altura de encabezado y pie de página de esta barra de contenido. Entonces vamos a llegar al estudio de visas C. Al principio, voy a quitar todas las fronteras. Entonces comento fuera de las fronteras. No necesito. Entonces me voy a llevar a Marzin cero Entonces desde body tag, voy a escribir margen cero. Después de eso, aquí voy a escribir la función de Cal. Dentro de la ronda res es 100 VH menos quiero dos menos la altura del encabezado, y la altura del encabezado es de 100 píxeles. Además, quiero menos la altura del pie de página, y nuestra altura de pie de página es de 100 píxeles. Después paso este archivo, si te muestro mi navegador, vaya , hice una tonta mística Si te muestro mi editor de bacalao, como puedes ver, aquí usamos la función cal en. Necesitamos usar la función cal en altura. Entonces voy a copiar esta sección. Básicamente, voy a cortar esta sección y voy a escribir al 100%. Quiero al 100%. Entonces en nuestra altura, voy a usar la función de pantorrilla. Presiono en este archivo, si te muestro mi navegador, puedes ver el resultado. Aquí puedes ver nuestra sección de contenido agarrar el espacio restante, además no tenemos ninguna barra de desplazamiento. Si lo hago receptivo, como pueden ver, nuestra sección de encabezado y pie de página es fija, pero nuestra porción de contenido va a cambiar altura según el espacio restante. Entonces este es uno de los buenos ejemplos de la función cal. Espero que entiendas. Así que gracias por ver este video. Estén atentos para nuestro próximo video. 6. Función Min(): Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con una nueva función CSS relacionada con el tutorial. Y en este tutorial, vamos a cubrir función mínima, función max, función almeja Ahora veamos qué es la función media. El nombre completo de la función Mint es mínimo bien. Es media la voluntad más baja. Básicamente, en esta función, pasamos relleno numérico múltiple y esta función devuelve la voluntad más baja. ¿Cómo podemos usar esta función en nuestros proyectos de olas? Supongamos que tenemos un profundo y en esta profundidad, quiero agregar ancho dinámico y para eso, no vamos a usar media quad. Para ello, se introduce esta función. Supongamos que en esta profundidad, voy a asignar con el uso de la función media Op, 50% o 500 píxeles. Entonces la función media va a implementar el valor más bajo. Déjeme explicarlo con más detalles. Ahora bien, ¿cómo podemos medir el 50%? Se va a utilizar el 50% de ancho del elemento profundo padre. De lo contrario, tenemos un navegador y en este navegador, solo tenemos un profundo, y luego necesitamos contar el ancho de la ventana gráfica de este navegador En ese caso, el ancho del navegador es el padre de esta profundidad y luego lo va a comparar si el 50% de ventana del navegador es mayor de 500 píxeles o no. Si es mayor a 500 píxeles, entonces va a elegir 500 píxeles porque la función Min siempre elige el valor más bajo. Y de lo contrario, si el 50% es inferior a 500 píxeles, entonces va a tomar el 50% de ancho. Es bastante similar con Vmax y unidad de tejido, y ya lo aprendemos en nuestra sección de unidades Ahora, déjeme explicarlo de manera más auténtica. Supongamos que nuestro navegador Vs 900 pixel y si extraemos el 50% de 900 pixel, entonces devuelve 450 pixel. Después función principal va a comprobar el menor valor. Como puede ver, 450 es menor valor que 500. Entonces se va a asignar D ancho 450 píxeles. Al contrario, si el ancho de nuestra ventana gráfica es de 1,200 píxeles, entonces extraemos el 50% de 1,200 píxeles Como puedes ver, es volver a sintonizar 600 píxeles, y como sabes, 600 es mayor que 500 píxeles En ese caso, va a aplicar 500 píxeles de ancho a esta D. Así que esta función siempre va a devolver dinámicamente el valor mínimo, y podemos usar esta función con diferente tipo de propiedades. Podemos usarlo con margen, relleno, para talla, sombra de caja, etcétera También podemos usar esta función siempre que usemos películas numéricas. Entonces, sin perder el tiempo, comencemos la práctica. Como puedes ver, lado a lado, abro mis viales a tu editor de código y mi navegador usando la extensión if server, y ya creo un documento de estimación llamado index dot stem dentro nuestra página de estimación, tenemos una etiqueta profunda Y en esta etiqueta profunda, asignamos una clase llamada elemento. Y también escribimos lleva dentro de esta etiqueta profunda hola mundo. Después agrego un poco de relleno a nuestra etiqueta corporal y pongo el margen cero. Ahora quiero asignar una dinámica nosotros a este elemento. Es significa que quiero cambiar el elemento que cada vez que cambiemos la forma del viento del navegador. Para eso, primero, voy a seleccionar el elemento, la clase elemt, la clase de elemento, elemento punto Entonces dentro de la primera propiedad Calibrasso se encuentra fondo. Fondo, y aquí voy a usar gris claro. Con eso, voy a usar otra propiedad, Trigo, y quiero cortar hierba dinámica. Para eso, voy a usar la función media. Y como saben, en la función Min, necesitamos pasar múltiples valores. Primer valor, voy a tomar en porcentaje, 50% y segundo valor, voy a tomarlo pixel, que es 500 pixel. No es obligatorio que puedas tomar primero uno es porcentajes y el segundo es pixel Se puede tomar cualquier tipo de valor. Aquí se puede tomar tanto el valor en píxeles, lo contrario tanto el valor en porcentajes Depende de usted. Si configuro este archivo con eso, voy a asignar un poco de altura. Altura aquí voy a usar 400 píxeles. Superior establecer este archivo, como se puede ver, se le asigna una amplia. Ahora voy a abrir mi sección de elementos para medir el ancho de este elemento. Inspeccionar la sección Elemento. Siempre que abro mi causar sobre este elemento, como pueden ver, está escrito 380 por 400. Como sabes, establecemos la altura 400 y nuestra función principal asignamos 380 píxeles ancho porque nuestro ancho de navegador de palabras es 820 píxeles y toma el 50% del ancho del navegador. Porque nosotros en padding, es por eso que el valor es menor al 50%. Está escrito 480. Pero si elimino el relleno y luego configuro este archivo, ahora abro mi Carson en él, y ahora puedes ver que está escrito 410 píxeles Se necesita el 50% de este navegador. Así función mínima, tomar el valor mínimo. Pero, ¿qué? Si aumento el ancho del navegador, déjame mostrarte. Ahora voy a aumentar el navegador W. Como pueden ver, después de aumentar el ancho del navegador, esta vez, nuestra función no tome el 50% del navegador W. Si yo sobre mi auto en él, como pueden ver, es a 500 píxeles de ancho y 400 píxeles de alto debido a que nuestro ancho total estimado de estructura es de 1,518 píxeles Y si devuelves el 50% de 1,518, entonces sería de 759 píxeles 759 píxeles es mayor que 500 píxeles. Y como te dije, nuestra función principal siempre toma el valor mínimo. En ese caso, 500 es valor mínimo. Por eso decía 500 píxeles. Espero que ahora entiendas. Pero si vuelvo a reducir el navegador, ahora puedes ver nuestro ancho de viewpot es 614 pixel y 50% de 640 pixel es 307 pixel Como te dije, esta función siempre toma el valor mínimo. Por eso decía ancho del elemento, 50% de la ventana del navegador. Espero que el tema de la función principal sea claro para ti. Echemos un vistazo al código de Visual Studio. Ahora voy a enganchar este elemento profundo en otro elemento profundo. Aquí usamos esto profundo directamente en nuestra etiqueta corporal. Voy a cortar esta porción, cortar y primero, voy a asignar una identificación a este Atag profundo y nuestro nombre profundo es paren Entonces dentro de este elemento profundo, voy a pegar lo profundo. Ahora tenemos elemento profundo padre y elemento childp. Ahora voy a asignar un peso fijo a este padre profundo. Aquí voy a escribir AtagParin. Después dentro de la Cal sis, primero, voy a asignar, nosotros, y voy a asignar con 600 píxeles. Para entender esta estructura, también voy a asignar frontera. Borde, quiero un borde sólido de píxel y quiero color negro. Y voy a poner este archivo. Si te muestro mi navegador, como puedes ver, nuestro padre Wi es de 600 píxeles y el 50% de parent wide es de 300 píxeles, y la función mínima siempre devuelve el mínimo, y 300 es valor mínimo en comparación con 500. Por eso en nuestro elemento childp, decía 50% de ancho medio 300 píxeles Pero, ¿qué? Si aumento el ancho del elemento parentip, déjame mostrarte Esta vez, voy a establecer el ancho del elemento parentp, 1,200 píxeles, y voy a sub este archivo Después de configurar este archivo, si te muestro mi navegador, ahora puedes ver, ahora asigna un peso de 500 píxeles a este elemento Dip hijo. Si te muestro mi elemento de consola y sobre mi cazar sobre este elemento hijo, como puedes ver, es a 500 pixel semana porque nuestro elemento parentp ancho es de 1,202 ¿Por qué es a 1,202? Porque tomamos un borde de píxel a la derecha y levantamos. Por eso nuestro padre total es quel ciento dos. Si extraemos 50% del ciento dos, va a devolver 601 y 601 es mayor que 500. Y la función principal siempre devuelve el valor mínimo. 500 es el valor mínimo. Ahora voy a reducir el ancho de la ventana gráfica. Aquí dije viewport ancho 718 pixel. Si yo sobre mi tarjeta en este elemento, como pueden ver, aún así devuelvo elemento hijo ancho 500 píxeles. Ahora el cociente es la razón por la que está escrito 500 píxeles. Porque como te dije, función media funciona de acuerdo con el elemento padre, y esta vez nuestro elemento padre es así de profundo, no la ventana del navegador. Y Hero dice valor fijo. Y por eso según el valor fijo, está escrito 500. Y si trato de reducir el objeto de ventana más y sobre mis autos están en él, aún así, puede ver que está escrito hierba de 500 píxeles porque en nuestra etiqueta de padres, herro usa hierba fija Entonces espero que ahora quede claro 14. ¿Cómo podemos usar la función media? Gracias por ver este video, estad atentos para el siguiente tutorial. En el siguiente tutorial, voy a cubrir la función max. 7. Función Max (): Tengo que respaldar chicos, este es otro tutorial, y en este tutorial, vamos a hablar de la función max. Esta función funciona opuesta a la función principal, y el significado completo de la función es el máximo. En esta función, pasamos múltiples valores numéricos y se escribe la renuncia máxima Supongamos que tenemos un mismo tipo de profundidad en un navegador, ahora quiero decir una ed dinámica a este elemento profundo. Y de igual manera, quiero decirlo el valor máximo. Y en esto, aquí usamos la función max. Y en esta función max, tenemos que embotar dos ondas, 50% y 500 píxeles. Entonces, como saben, va a tomar navegador 50% de ancho. Supongamos que el ancho de nuestro navegador es de 900 píxeles y si obtenemos el 50% de 900, entonces se hace para 50 píxeles. Entonces siguiente función va a comprobar, que es el valor máximo 450, de lo contrario, 500. Y como saben, 500 es mayor que 450. Por eso se va a asignar 500 píxeles a esta D. Del mismo modo, si el navegador es de 1,200 píxeles y extraemos 50% de 1,200 píxeles vamos a devolver 600 píxeles. Y como puede ver esta vez, 600 es mayor que 500. Entonces va a asignar 600 píxeles de ancho a esta D. Así que comencemos lo práctico y tratemos de entenderlo. Entonces como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión if server, y ya creo un documento de estimación llamado indextdt HTML Entonces como puedes ver en nuestra etiqueta corporal, tenemos una etiqueta profunda, y aquí está la clase City a este elemento profundo. Y como se puede ver, en este elemento, decimos static en. Y ahora quiero decir hierba dinámica. Para eso, esta vez voy a usar la función Max. Máx. Esta función es completamente opuesta a la función mínima. En esta función, aquí necesito pasar múltiples válvulas. Nuestro primer valor es del 50% y nuestro segundo valor es de 500 píxeles. Si configuro este archivo, como pueden ver, no hay cambios porque nuestro valor estático era de 500 píxeles, pero como saben, función max siempre toma el valor máximo. Si te muestro mi sección de elementos, déjame mostrar y aquí puedes ver nuestro esta vez nuestro ancho de navegador es 958 El 50% de 958 está por debajo de entonces 500 píxeles. Es por eso que nuestra función max elige el valor máximo, que es 500. Pero si reduzco el ancho de mi navegador, déjame mostrarte. Ahora puedes ver el ancho de nuestro navegador es 600 píxeles y el 50% de 600 píxeles es de 300. Entonces esta vez, nuestra función máxima va a elegir 500 porque 500 es mayor que 300. Y recuerde, la función máxima y mínima funcionan acuerdo con el tamaño del elemento padre. Déjame mostrarte. Aquí, voy a tomar otra etiqueta profunda, y voy a mover esta etiqueta profunda dentro de esta etiqueta de elemento padre, algún tipo Dev también voy a asignar una clase parent parent. Entonces voy a cortar esta sección y la voy a pegar dentro del parentan voy a poner este cinco Ahora voy a darle estilo a esta etiqueta de padres. Entonces copio esta etiqueta padre y HemotypePARNT. Luego dentro de los clivss primero, voy a usar la propiedad border, border, y quiero un pixel, borde sólido Con eso, quiero el color negro. Entonces voy a establecer un W W estático y Hemo tipo 700 píxeles de altura, 400 píxeles Voy a establecer este archivo. Ahora voy a configurar este archivo y encender la pantalla completa del navegador. Si reduzco el ancho del navegador y la altura del navegador, no va a afectar a este elemento profundo porque esta vez tenemos un elemento profundo padre y el ancho de este elemento parentip es de 700 píxeles y el 50% de 700 píxeles es de 350 píxeles Como puede ver, 500 píxeles son mayores que 300 píxeles. Por eso decía elemento hijo ancho 500 píxeles. Es trabajo de acuerdo con el contenedor Deep parent, y ya lo aprendemos en nuestro estudio de regresión Ahora voy a mostrarte otro ejemplo. Vamos al código de estudio del usuario. Entonces primero, voy a comentar esta sección de padres. Y además, voy a quitar esta etiqueta de padres de nuestro cuerpo. Y ahora voy a usar función mínima con función máxima. Básicamente, quiero decir, quiero usar tanto la función a la vez. Esta vez, quiero decir 80% de valor. Nuestro primer valor es del 80%. Y en nuestro segundo valor, aquí voy a usar la función mínima. Después dentro de la desnudarse, también, voy a pasar a los dos Nuestro primer valor es del 50% y nuestro segundo valor es de 1,000 píxeles, y voy a establecer este archivo. Otra pregunta es ¿qué tipo de valor va a devolver? Al principio, va a ejecutar la función mínima. Supongamos que nuestros navegadores 1,200 píxeles, entonces nuestra función mínima devuelve el valor mínimo. El 50% de 1,200 píxeles es de 600 píxeles. La función mínima va a seleccionar 600 píxeles, luego se establece 600 píxeles como segundo parámetro de la función máxima. Para entender mejor, voy a duplicar esta línea y comentar hacia abajo y comentar una de las líneas. Esta función mínima va a seleccionar el valor mínimo. Es decir que si nuestro navegador es de 1,200 píxeles va a devolver 600 píxeles. Y el 80% de 1,200 píxeles es 960 píxeles. Voy a hacer de nuevo este archivo y aquí voy a escribir 960 pixel. Como ya sabéis, la función max siempre indica el valor máximo, va a decir nuestro elemento con 960 píxeles. Volvamos al navegador y veamos qué escribió. Como puedes ver, nuestro navegador a cien píxeles. Si enciendo mi consola y sobre mi cursor en esta sección, si se mide el ancho de este elemento, se convierte en 960 píxeles. Pero, ¿qué? Si reduzco el primer valor de la función máxima, déjame mostrarte. Esta vez, voy a pasar el 20%. Ahora, 20% de 1,200 píxeles es 240 píxeles. Aquí voy a escribir 240 píxeles. Esta vez, nuestra función máxima va a seleccionar el valor máximo, que es de 600 píxeles. Si te muestro mi navegador, como puedes ver, esta vez nuestro elemento es de 600 píxeles. Así es como podemos heredar múltiples funciones a la vez. Aquí usamos la función max y la función mínima juntas. No sólo eso, si quieres pasar tercer valor en esta función, sí, puedes. Entonces aquí, voy a usar otra función, la cual aprendimos en nuestro tutorial anterior, y voy a usar la función Cal, CALC Después dentro de las prensas redondas, quiero agregar 500 píxeles con 500 píxeles. Y voy a poner este archivo. Después de establecer este archivo y después de calcular ambos valores de V, va a devolver 1,000 píxeles. Como puedes ver, nuestro valor máximo va a elegir esta vez 1,000 píxeles porque este es el valor máximo. Después de paso este archivo, si te muestro mi navegador, como puedes ver, ahora, nuestro elemento con se convierte en 1,000 pixel. Básicamente, en estos ejemplos, utilizamos la función máxima y mínima para el peso del elemento, pero esta vez, la voy a usar con relleno. Voy a comentar esta línea y después de la altura, voy a escribir padding. Relleno y voy a usar la función max, Max. Entonces dentro de las rotondas, nuestro primer valor es de 30 píxeles en nuestro segundo valor aquí, voy a usar cinco viewpot altura, V g. ya aprendemos sobre esta unidad en nuestros túbulos anteriores. aprendemos sobre esta unidad en nuestros túbulos anteriores Lo siento, no la altura de la ventana. Voy a usar viewpot double. Así que preestablece este archivo. Si vuelvo a mi navegador, aquí puedes ver si sobre mi auto sobre este elemento, puedes ver un relleno fijo a estos elementos, y si disminuyo el tamaño de la ventana, como puedes ver, redujo el acolchado. Y si aumento el tamaño de la ventana, ahora se puede ver que aumenta el tamaño del relleno. Pero si lo reduzco más, entonces en un punto, nuestro valor de relleno se convierte en 30 píxeles. Porque si te muestro un editor de código, aquí pongo el valor mínimo de 30 píxeles. Ahora, tratemos de entender lo mismo con porcentaje. De nuevo, voy a conseguir esta línea, y esta vez, voy a reducir la altura a 100 píxeles y comentar la línea anterior. Y en nuestro segundo valor, voy a tomar el 10% y voy a poner este archivo. Supongamos que nuestro navegador es de 1,000 píxeles. Dentro del comando, voy a escribir 1,000 píxeles. Y el 10% de 1,000 píxeles es de 100 píxeles. Si nuestro pote de vista con es de 1,000 píxeles, entonces según el 10%, nuestro segundo valor se convierte en 100 píxeles. Entonces nuestras formas máximas van a tomar el valor más alto de 100 píxeles. Con eso, también, voy a incrementar nuestro primer valor. Aquí voy a escribir 40 píxeles. Después de establecer este archivo, como puede ver, nuestro valor del 10% sigue siendo mayor que 40 píxeles. Si te muestro mi navegador, ahora puedes ver que tenía relleno de 100 píxeles en todas las direcciones. Y si lo aumento, va a agregar más relleno y si lo disminuyo, va a reducir nuestro acolchado. Pero en un punto, si lo hago por debajo entonces 400 pixel, ahora puedes ver nuestro inicio de vista está por debajo de 400 pixel. 10% de 400 píxeles es de 40 píxeles, pero nuestro área de tablero de visualización es de 388 y el 10% de 88 píxeles es de 38.8 píxeles 38.8 píxeles son menos de 40 píxeles. Por eso si te das cuenta cuando sobrepasé este elemento, como puedes ver, nuestro relleno es de 40 píxeles. Si lo reduzco más, aún se puede ver que nuestro pading es de 40 píxeles Pero si aumento el ancho del navegador, como pueden ver, cuando sobrepasé mis autos en él, ahora nuestro relleno no es fijo, crece continuamente cuando aumento el tamaño de mi navegador. Ahora voy a usar el mismo valor con función mínima. En mi codior de estudio visual, aquí voy a duplicar esta línea y comentar la anterior Esta vez, voy a usar la función Min. Como ya sabéis, la función Min siempre va a devolver el valor mínimo. Al paso este archivo, si te muestro mi navegador y abro mi auto en este elemento, ahora puedes ver pad, nuestro relleno es fijo, 40 pixel. Porque esta vez usamos función mínima y está escrito el valor mínimo. Dijo, relleno de 40 píxeles a este elemento. Ahora voy a usar esta función con taquigrafía. Vayamos al código de Visual Studio y voy a conseguir esta línea otra vez. Esta vez, quiero usar taquigrafía. Entonces de izquierda y derecha, quiero usar la función mínima y de arriba y abajo, voy a usar diez píxeles. Voy a pisar este archivo. Si vuelvo a mi navegador y sobre mi cur en él, ahora puedes ver desde arriba y abajo, agrega 40 píxeles y para izquierda y derecha, agrega diez píxeles Entonces, cuando aumentamos, de lo contrario, disminuimos el tamaño de la ventana del navegador, y de acuerdo al tamaño, va a cambiar el relleno superior e inferior, pero va a arreglar el relleno de diez píxeles a la izquierda y a la derecha. Así es como podemos usar esas funciones. Gracias a ver este video, estad atentos para nuestra próxima función. En el siguiente tutorial, vamos a cubrir la función de almeja 8. Clamp(): Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con funciones. Y en este tutorial, voy a cubrir la función almeja En la función KLM, podemos establecer valor mínimo y valor máximo entre ellos, podemos usar otra onda y la llamamos valor de referencia Si quieres establecer un rango particular para eso, necesitamos usar el valor preferencial. Déjame mostrarte un ejemplo. Supongamos que tenemos un profundo dentro de nuestra página web y quiero establecer un valor dinámico a este elemento profundo. Como puedes ver, usando la función glam, primero establecemos el límite mínimo y por último establecemos el límite máximo Valor mínimo significa, no podemos hacer un ancho de elemento profundo por debajo los 350 píxeles y el valor máximo significa, no podemos tomar más de 500 píxeles de ancho para esta profundidad. Y entre ellos, aquí usamos 50% de valor y el 50% de valor viene de acuerdo con el área del viewpod del navegador Entonces siempre que nuestro navegador ancho 700-1 mil píxeles, en ese caso, va a usar preferir ganar porque el 50% de 700 es 350, así que no podemos tomar menos de 350 valor y el 50% de 1,000 es 500 y no podemos tomar más de 500 valor para esta vista porque aquí se establece límite para eso Déjame mostrarte otro ejemplo. Supongamos que nuestro navegador es de 900 píxeles y el 50% de 900 píxeles es de 450 píxeles. Si nuestro ebot de navegador es de 900 píxeles, en ese caso, va a establecer ancho 450 píxeles al elemento deep De igual manera, en nuestro siguiente ejemplo, nuestro booard de vista es de 1,200 píxeles y 50% de 1,200 píxeles es de 600 píxeles Como puedes ver, 600 píxeles es mayor que 500, significa que va a cruzar el límite máximo. Entonces no va a establecer 600 píxeles a este elemento dip. Se va a establecer 500 píxeles porque establecemos el límite máximo. la misma manera, si nuestro navegador es 600 píxeles y extraemos el 50% de 600 píxeles, se ha convertido en 300 píxeles. Y según el límite mínimo, no va a establecer 300 píxeles de ancho a este contenedor porque según el límite mínimo, va a establecer 350 píxeles. Sin perder el tiempo, comencemos la práctica. Entonces como puedes ver, lado a lado, abro mis sales a tu editor de código y mi navegador usando la extensión if server, y ya creé un documento TML, indextree dot HTML Y ya creo un elemento. Primero, voy a llevar D a este elemento, weed, y para D voy a usar la función CAM. CAM. Entonces dentro de esta función almeja, primero, voy a establecer el valor mínimo y nuestro valor mínimo es de 350 píxeles Además, nuestro valor máximo es 500 píxeles y quiero preferido viel Quiero valor preferido entre de estos dos V. Aquí voy a establecer el 50%, y voy a establecer este archivo. Vamos a abrir la sección de elementos. Inspeccionar elemento. Si estoy sobre mi cursor sobre él, como pueden ver, ahora la ventana de nuestro navegador es de 908 píxeles. Ahora voy a hacer nuestra ventana a pantalla completa. Hasta hacer nuestras ventanas a pantalla completa, como puedes ver, ahora nuestro ancho de ventana es de 1,276 y el 50% de 1,276 está por encima de los 600 píxeles Si yo sobre mi Gara en este elemento, como pueden ver, dicho elemento ancho 500 píxeles porque establecemos el límite máximo y aquí usamos la función Cal para establecer el valor máximo. No podemos ir más allá de los 500 píxeles. De igual manera, si reduzco el tamaño de mi ventana por debajo de entonces 1,000 píxeles, ahora se puede ver que establece 50% de ancho a este contenedor. Hagamos que nuestra ventana sea de 800 píxeles para entenderla mejor. Puedes ver nuestro quindo W es de 800 pixel. Si abro mi cursor sobre este elemento profundo, como pueden ver, nuestro elemento profundo con es de 400 píxeles. Dije el valor preferido, que es del 50%. De nuevo, voy a reducir la maleza de ventana. Voy a hacer que sea de 500 píxeles. Como saben, el 50% de 500 píxeles es de 250 píxeles, pero estamos usando la función glam y establecemos mínimo a este elemento y el ancho mínimo es de 350 píxeles Es por eso que esta vez nuestra función no usa el valor preferido, utilizó el valor mínimo y fijó 350 píxeles con a este elemento. Y podemos usar la función almeja con diferentes propiedades. Podemos usarlo relleno, fusión, tamaño de fuente, etcétera. Pero en este ejemplo, lo voy a usar con tamaño de fuente. Voy a comentar esta línea, a continuación, voy a tomar tamaño de fuente tamaño de fuente, y voy a usar la función almeja Después los vestidos de plumón, primero, vamos a ver el valor mínimo y nuestro valor mínimo es de 16 píxeles. Aquí voy a usar el tamaño de fuente mínimo de 16 píxeles, y nuestro valor máximo es 50 píxeles y además voy a tomar valor preferido, que es cinco VW significa cinco puertos con. Recuerda, el tamaño de la fuente no va a menos de 15 píxeles y no va a más allá de los 50 píxeles. Tengamos el archivo y volvamos a mi navegador. Si te muestro mi navegador, como puedes ver, puedes ver el tamaño de fuente. Si amplío con hasta este navegador, como pueden ver, de vez en cuando, extiende nuestro tamaño de fuente. Pero en cierto punto del tiempo, va a detener nuestro creciente tamaño de fuente. Si calmo mi auto en él, como pueden ver, ahora nuestro tamaño de fuente es de 50 píxeles De igual manera, si disminuyo el ancho de este navegador y el cursor de berma sobre él, ahora puedes ver nuestro tamaño de fuente convertido en 16 píxeles De acuerdo con la altura y el ancho de la ventana gráfica, se ha cambiado el tamaño de fuente, y también podemos establecer límite superior e inferior para este tamaño de fuente Ahora puedes ver el ancho de nuestra ventana gráfica es de 692 píxeles. Si me berma cursor sobre él, como pueden ver, nuestro tamaño de fuente es de 34.6 píxeles, podemos cambiar dinámicamente el tamaño de fuente y también podemos establecer límites Espero que ahora te quede claro cómo podemos usar la función almeja Gracias por ver este video, quédate para nuestro próximo tutorial. 9. Función Attr() en CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con una nueva función CSS relacionada con el tutorial. Y en este tutorial, aprenderemos la función de nutria Función ATTR significa función de atributo. Ahora veamos cómo podemos usar esta función prácticamente. Como pueden ver, lado a lado, abrí mi editor de código de Visual Studio y mi navegador usando la extensión de servidor en vivo, y ya creé un documento TML llamado index TML Como puedes ver en nuestra etiqueta corporal Abe, etiqueta de párrafo, P, y su tipo hola palabra. En nuestra sección de estilo, como puedes ver, nuestra familia de fuentes, nuestra familia de fuentes body es L y además puse algo de relleno y en nuestra etiqueta de párrafo, aquí configuro el tamaño de fuente 35 pixel y establecí un margen. Y ahora quiero usar la función de atributo. Al principio, voy a tomar un atributo en etiqueta de párrafo. Voy a usar atributo class, class next, y voy a asignar un nombre de clase que es gusto. Ahora vamos a mostrarte cómo podemos usarlo. Primero, voy a seleccionar el párrafo. Entonces voy a usar una clase de Posido, que se llama después Entonces dentro de esta clase posito, como ustedes saben, cuando usamos after posito plus o before posito class, usamos content property Entonces voy a escribir contenido. El contenido es necesario si usamos positio superior de lo contrario antes del elemento posito Aquí voy a llamar a la función de atributo ATR, quiero usar qué atributo quiero usar atributo de clase. Clase. Si configuro este archivo, como pueden ver, superior hola mundo, se imprime gusto. Cambiemos el color de la fuente para entender mejor el color, y voy a imprimir en verde. Ahora puedes verlo imprimir Hover desde el párrafo y luego se imprime el nombre de clase que asigné a este párrafo La ayuda de la función de atributo, podemos imprimir el atributo de etiqueta particular en el párrafo. La mayoría de los casos, utilizamos esta función con contenido. De lo contrario, podemos usarlo con JavaScript. Si utilizo otro atributo, supongamos que esta vez voy a asignar I ID DM, quiero imprimir el nombre de ID. Si paso dentro de la función de atributo, ID, y esto arriba este archivo, ahora puedes verlo imprimir hola palabra, el nombre ID Demo. Usando la función de atributo, podemos extraer la val de cualquier atributo. Ahora voy a mostrarte otro ejemplo. Cuando I H son mis cartas que están en este párrafo, entonces quiero mostrar el nombre del atributo. Para eso, necesitamos usar el positioselector Obe. Déjame mostrarte P, colon hover. Voy a establecer este archivo. Después de establecer este archivo, si yo sobre mis carsR en este párrafo, se puede ver el resultado Esto es para este tutorial. Gracias por ver este video, mantente atento al siguiente tutorial. 10. Selector combinador de CSS: Y a partir de este tutorial, vamos a iniciar selectores avanzados CSS Espero que ya sepas que los ID de clase N son selectores, pero CSS vienen con algunos selectores más avanzados, y lo vamos a aprender en nuestros próximos tutoriales Ahora, hablemos de categorías de selectores CSS. Aquí puedes ver un total de cuatro tipos de categoría de selector CSS. El primero es un simple selector. Luego vienen selector combinador, selector de atributos, posito clase posito selector Y en este tutorial, vamos a aprender selector simple y selector combinador Ahora veamos qué tipo de selector de símbolos tenemos. Como puede ver, tenemos que decir cuatro tipos de selector de símbolos, selector tipo, selector de clase, selector de ID y selector universal. Y sé que ya está familiarizado con nuestro primer selector de tres, selector tipo, selector de clase y selector de ID. Si no estás familiarizado con estos selectores, entonces no puedes aprender selectores avanzados Y si no estás familiarizado con eso, entonces déjame mostrarte un poco sobre E. Ya puedes ver, este es el ejemplo de selector de tipo. En el selector de tipo, necesitamos usar el nombre de la etiqueta. En nuestro caso, aquí usamos el párrafo significa etiqueta P. Entonces en el Cal resistir necesitamos usar la propiedad y Val. De manera similar para el selector de vidrio, necesitamos usar el nombre de la clase, y para seleccionar el nombre de la clase, necesitamos usar punto sin, punto el nombre de la clase. Después establecer las calibraciones, necesitamos pasar la propiedad y V. Y además, tenemos un selector simple, que es selector de ID Para el selector de ID, primero, necesitamos escribir tiene etiqueta, luego necesitamos tomar el nombre de ID. En nuestro caso, caja. Entonces en las calibraciones, necesitamos usar propiedad y V. Sé que ya estás familiarizado con eso, pero el selector principal al que voy a ir es Selector universal Representamos este selector usando estrella sinusoidal. Este signo de estrella se utiliza para apuntar a toda la etiqueta EstiML en su documento Entendamos con un ejemplo real. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando si varias extensiones, y ya creo un documento de estimación llamado index dot TML Y en este documento de estimación, crear un layout web básico. Tenemos sección de encabezado, tenemos sección netbur, tenemos sección de contenido, sección barra lateral y la sección de pie Entonces aquí vamos a utilizar nuestro selector universal. Entonces en la parte superior de la etiqueta de estilo, voy a usar el selector. Estrella en el interior del color resiste. Aquí voy a usar una propiedad llamada color. Color, y. después de sub esta bobina, como puedes ver, convierte todo el color de fuente en nuestro navegador en color rojo. Pero acepta la barra lateral porque en nuestra barra lateral, ya usamos la propiedad de color. Y ahora quiero agregar frontera a cada elemento individual. Para eso, en nuestro selector universal, voy a escribir border. Borde un píxel, y quiero borde sólido, y nuestro color de borde es verde. Uptres arriba este archivo, se puede ver el resultado. Aquí puedes ver que tenía borde cada etiqueta en nuestra página web. Tenía frontera a nuestra etiqueta de encabezado, etiqueta de párrafo, etiquetas li, etcétera Entonces este es el ejemplo de etiqueta universal. Y ahora voy a comentar cuál es la línea. Y voy a poner este archivo. Y ahora quiero apuntar a toda la etiqueta que está dentro del contenido Deep. Para eso, después de la etiqueta de contenido, voy a atar tiene tag content. Entonces aquí voy a usar Selector universal, estrella. Entonces dentro del color resiste es decir todo el elemento dentro de la etiqueta de contenido, y luego voy a usar la propiedad CSS. Quiero cambiar el color de la fuente de color. Tasa de color. Y quiero establecer este archivo. Después de configurar este archivo, se puede ver el resultado. Entonces este es el uso del selector Universal. Y el verdadero uso práctico de este selector es ocultar el margen y el relleno de la página web. Déjame mostrarte. Entonces quiero comentar esta sección y establecer este archivo y volver al selector universal. Y aquí, voy a escribir margen cero. Además, voy a escribir padding zero, y voy a configurar este archivo. Básicamente, va a eliminar todo el margen predeterminado y el relleno de nuestras etiquetas. Y básicamente, te ahorra mucho tiempo, y no necesitas quitar margen y relleno de cada tipo. Ahora voy a hablar de combinador selectd. Pero antes, voy a comentar las líneas. Tenemos a cuatro tipos de selector combinador, selector descendiente, selector hijo directo, selector hermano adyacente, selector general Entonces primero, vamos a hablar de selectores descendientes En este ejemplo, como puedes ver, aquí usamos un selector combinador Primero, usamos una clase, y luego usamos un nombre de etiqueta P. Puedes crear una combinación de múltiples etiquetas, clases con etiquetas, etcétera En este ejemplo, quiero apuntar al párrafo que es insertar la clase box. Para eso, primero, necesitamos seleccionar el parentag y seleccionamos la etiqueta padre usando su nombre de clase Después seleccionamos la etiqueta. En el siguiente ejemplo, quiero apuntar a la etiqueta span, que está dentro de la etiqueta de párrafo. Entonces primero, pasamos la etiqueta padre y la etiqueta padre es etiqueta de párrafo. Entonces después del espacio, tenemos que pasar quien etiqueta, quiero seleccionar dentro de la etiqueta de párrafo, y quiero seleccionar etiqueta span. Y ahora, a lo mejor hay mucho párrafo en nuestra página web, y también tenemos mucha etiqueta span en nuestros párrafos. Entonces quiero seleccionar el párrafo particular del elemento profundo. Para eso, en nuestro tercer ejemplo, aquí usamos una etiqueta profunda particular. Después quiero seleccionar todos los párrafos. Y dentro de los párrafos, quiero seleccionar toda la etiqueta span. Básicamente, quiero seleccionar toda la etiqueta span que está dentro del párrafo, y también nuestro párrafo proviene de una etiqueta profunda particular. Entonces este es el ejemplo de los selectores descendientes. Y recuerda, aquí podemos tomar múltiples etiquetas secundarias, lo contrario, múltiples etiquetas padre. Entonces comencemos la práctica y veamos cómo podemos usarla. Entonces como pueden ver, nuevamente, estamos en mi codiator de estudio visual y ya creo una página EstiML llamada index two dot Y dentro de la página de stimal, tenemos alguna etiqueta de párrafo y también una etiqueta profunda Y dentro de esta etiqueta profunda, también tenemos que hacer un párrafo. Y aquí, voy a usar selectores descendientes. Primero, voy a apuntar a la etiqueta de párrafo, P. Luego dentro del color versus, voy a escribir color. Y quiero color, lee. Si configuro este archivo, aplica color rojo a toda la etiqueta de párrafo y también que está dentro de la etiqueta profunda, pero quiero apuntar a esos párrafos que están dentro del cuadro de ID. Para eso, el tipo héroe tiene etiqueta, nuestro nombre de identificación es caja. Si configuro este archivo, esta vez se puede ver que coloreó esas etiquetas de párrafo, que está dentro del elemento box. Y ahora quiero asignar un color a nuestras etiquetas span. Así que Hete abarcan dentro del color cardioss. Verde. Después de sub este archivo, como puedes ver, colorea tanto esta etiqueta de pan, pero quiero colorear solo esta etiqueta span en particular. Para ello, necesitamos seleccionar los elementos padre. Entonces nuestro primer elemento padre es dip tag, Dev y nuestro segundo elemento padre es Parraftag. Así que quiero apuntar a esas etiquetas span que están dentro la etiqueta de párrafo y esos párrafos que están dentro de la etiqueta Dep Si configuro este archivo, como pueden ver, ahora se aplica a esta etiqueta span en particular, que está dentro de la etiqueta de párrafo. Nuestro siguiente selector de combinador es el selector hijo directo. A veces se le conoce como selector hijo. Este símbolo de selector hijo directo es mayor que el pecado. Aquí seleccionamos toda la etiqueta LI que es directamente de la etiqueta UL, y también aquí seleccionamos en la etiqueta de párrafo, que es directamente del elemento box. Así que saltemos al código de Visual Studio y comencemos lo práctico. Así que de nuevo, estoy en mi editor de código de Visual Studio, y ya creo un documento TML, índice HTML de tres puntos Y puedes ver en mi documento, tenemos etiqueta UL, y dentro de esta etiqueta UL, tenemos otra etiqueta UL. Entonces dentro de esta etiqueta UL, tenemos alguna ALI directa, y luego tenemos otra etiqueta UL. Ahora bien, si apunto menos algún tipo tiene etiqueta, este y todas las etiquetas LI dentro de las menos. Dentro del color resis, quiero de color verde. Color verde. Upterse este archivo, como puedes ver, convierte toda la etiqueta LI en color verde, que está dentro de lo menos Se aplicó el color en niño directo, también el nieta. Entonces voy a duplicar esta sección, y aquí voy a usar un selector secundario directo, este y todo el hijo directo dentro de la etiqueta menos. Entonces quiero asignar color rojo. Y quiero establecer este archivo. Después de establecer este archivo, como puedes ver, se aplican todas las etiquetas LI, que es hijo directo del elemento list. Déjame mostrarte otro ejemplo de niño directo. Aquí puedes ver, tenemos una etiqueta profunda, y dentro de esta etiqueta profunda, tenemos una etiqueta de párrafo. Y dentro de esta caja profunda, tenemos otra profunda llamada caja dos. Y en esta profundidad, tenemos otra etiqueta de párrafo. Y ahora quiero aplicar el color de fuente azul, que está dentro de la etiqueta de caja en nuestros párrafos. Para eso, aquí voy a seleccionar hash tag, box, y quiero seleccionar los párrafos, que está dentro de la etiqueta box. Y luego dentro del color cliass. Y quiero el color azul. Arriba prueba este archivo, puedes ver el resultado. Como puedes ver, aplica color azul a todo el párrafo, que está dentro de la caja D, y también aplica color azul, que está dentro de la caja dos Profundo. Pero no quiero aplicar color azul en nuestra caja dos párrafos profundos. Para eso, aquí necesitamos usar el selector directo Child. Caja tipo som, mayor que P. Malestar este archivo, ahora se puede ver el resultado. Ahora selecciona solo el párrafo hijo de la casilla D. Así que este es el ejemplo de selector hijo directo. Ahora hablemos de selectores de hermanos adyacentes. Ahora la pregunta es, ¿qué es hermano? Siply es tu hermano y el signo más medio adyacente. Es decir, la etiqueta del siguiente párrafo de esta etiqueta profunda. Del mismo modo, esta es la etiqueta de párrafo siguiente de esta etiqueta UL. Entonces, para que quede más claro, comencemos la práctica. Entonces como pueden ver lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión de servidor light, y ya creé un documento TML llamado indexfod En este documento, tenemos etiqueta UL, y arriba esta etiqueta UL, tenemos una etiqueta de párrafo. No solo una etiqueta de párrafo, tenemos etiqueta de varios párrafos. Y ahora quiero seleccionar el primer párrafo hasta t etiqueta UL. Para eso, aquí estoy para tocar UL, y necesitamos usar signo adyacente, que es más, más etiqueta de párrafo. Entonces dices los colores, yo quiero aplicar de color. Color rojo. Después de paso este archivo, se puede ver el resultado. Aplica color rojo a nuestra etiqueta de párrafo, que es la siguiente etiqueta UL. Y si quieres apuntar a las otras etiquetas de párrafo, quiero ver la siguiente etiqueta de párrafo, entonces podemos llamarla etiquetas generalizadas entre hermanos Este es el ejemplo de los selectores generalizados de hermanos. Aquí puedes ver un letrero de pedaleo. Esto significa Simons generales, y puedes ver el letrero en tu teclado encima del botón de tabulación Esto va a apuntar a todo el párrafo etiquetar la etiqueta profunda. De igual manera, va a apuntar a todos los párrafos que etiquetan la etiqueta UL. Déjame mostrarte el ejemplo. Entonces voy a comentar la primera línea, y luego voy a escribir el letrero general UL hermano Entonces voy a apuntar a todos los párrafos. Subir la etiqueta UL. Entonces dentro de los reces de color voy a aplicar color Color rojo. Después de configurar este archivo, se puede ver el resultado. Como puede ver, apunta a todos los párrafos posteriores a la etiqueta UL. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender en selectores de revisión Gracias por ver este video. Estén atentos para el siguiente tutorial. 11. Selector de atributos: Hola, chicos. Me alegro de verte. Una vez más, estoy de vuelta con otro tutorial relacionado con el selector avanzado. Y en este tutorial, vamos a cubrir el selector de atributos. En nuestro tutorial anterior, ya aprendimos selector de combinadores En nuestro tutorial anterior, hablamos de que tenemos que contar cuatro tipos de selector, selector simple, selector combinador, selector de atributos, Posidoglass y selector de elementos Posido Y en este tutorial, vamos a aprender selector de atributos. Entonces estos son todos los atributos selector, y tenemos que decir siete tipo de selector de atributos. Como puedes ver, ella usa una etiqueta. Si quieres usar cualquier otra etiqueta, sí, puedes. Y ahora se puede ver atributo y Val. ATTR significa atributo, y bien representa valor Aquí puedes ver que usamos una etiqueta de estimación, que es tabilag. Y en esta etiqueta de TV, se puede ver alguna palabra en color naranja con colapso de borde abarcando, colapso abarcando Todos estos son atributos. Y también se puede ver dentro del doble curso, estos son todos de valor. Valor de estos atributos. Otro ejemplo lo puedes ver en la etiqueta de imagen, puedes ver fuente o título con, estos son todos atributo de etiqueta de imagen. Entonces vamos a apuntar a esta imagen usando su nombre de atributos, no el nombre de clase o ID. Otro ejemplo que puedes ver, tenemos etiqueta de entrada. Tenemos el tipo ID nombre valor. Estos son todos los atributos de la etiqueta de entrada. Entonces veamos qué podemos hacer para usar nuestro primer selector de atributos. Es decir el elemento con especificar atributo. Entonces veamos cómo podemos usarlo. Entonces como puedes ver, lado a lado, abro mis visuales a tu editor de código y a mi navegador, y ya creo un documento de tv llamado index dot t. Y puedes ver en mi navegador, tenemos que duplicar dos imagen, y entre esta imagen, tenemos un párrafo Y en mi párrafo, ponemos un total de tres carriles. Y por fin, tenemos un básico sencillo de. Entonces aquí vamos a aprender sobre el selector de atributos. Así que comencemos nuestro primer selector de atributos. Quiero apuntar imagen, la imagen con atributo impar. Como puedes ver, tenemos que hacer dos imagen, una imagen de gato y una imagen de tigre. En nuestra imagen de tigre, no tenemos atributo, pero en nuestra imagen de gato, tenemos el atributo antiguo. Entonces quiero seleccionar aquellas imágenes que tengan este atributo. Y para apuntarlo, primero, tenemos que pasar el tagnyme y el nombre de la etiqueta es imagen IMG, y luego necesitamos usar square sis Y dentro de la resis cuadrada, y ahora quiero seleccionar aquellas imagen que tengan atributo alt. Entonces copio el nombre del atributo impar y voy a pegar dentro de él. Entonces dentro de la C resistir aquí voy a agregar frontera. Borde, quiero borde, tres píxeles, y quiero borde sólido. Con eso, nuestro color de borde es rojo. Si configuro este archivo y relat mi navegador, puedes ver el resultado Como puedes ver, está en la frontera con nuestra imagen de gato. Pero en la siguiente imagen, no tenemos la frontera. Pero, ¿qué? Si utilizo la etiqueta Al en nuestra siguiente imagen, entonces voy a copiar la etiqueta Al, y la voy a poner en nuestra siguiente imagen. Después de ella, la voy a pegar aquí, y aquí voy a escribir imagen de Tigre. Después de configurar este archivo, como pueden ver, si dete mi navegador, ahora, tanto la imagen tienen el mismo borde, borde sólido de tres píxeles Y ahora quiero seleccionar aquellas imágenes que tengan atributo title. Como puedes ver, en nuestra imagen de tigre, tenemos el atributo title, pero en nuestro catimage no tenemos atributo title Entonces voy a copiar el nombre del atributo, y lo voy a pegar aquí. Voy a establecer este archivo. Si dete mi navegador, puedes ver el resultado Es una frontera en nuestra imagen de tigre, no la imagen CAT. Entonces este es el primer ejemplo de selección de atributo. En el siguiente ejemplo, voy a apuntar a aquellos ancla que tengan el atributo target. Entonces voy a escribir y obtener tang A. Luego dentro de la base cuadrada, necesitamos pasar el nombre del atributo, y nuestro nombre de atributo es target. Entonces voy a copiar el nombre del atributo y lo voy a pegar aquí. Entonces dentro de la base de color, voy a usar una propiedad y nuestro nombre de propiedad es color. Color y. Y voy a configurar este archivo. Después de establecer este archivo, si descargo mi navegador, como pueden ver, en nuestro párrafo, tenemos una etiqueta nCAT, la etiqueta enga con atributo target Entonces ha cambiado el color de este texto. Ahora, hablemos de nuestro siguiente selector de atributos. En este selector de atributos, necesitamos especificar el nombre del atributo. También necesitamos especificar el nombre del valor. Si el valor y el atributo coinciden, entonces va a seleccionar este elemento. Entonces comencemos la práctica. Entonces primero, voy a comentar los dos selectores. Entonces como puedes ver en mi sección de entrada, usamos cuatro etiquetas de entrada, y dentro de la etiqueta de entrada, usamos type attribute. Pero nuestros tipos de entrada son diferentes. En nuestra primera entrada, usamos texto. Entonces nuestra siguiente entrada, usamos botón de radio, y en nuestra tercera entrada para dirección, también usamos texto, y para contraseña, usamos contraseña. Y ahora quiero seleccionar aquellas etiquetas de entrada que tengan atributo type. Además, su valor es el texto. Entonces dentro de la etiqueta de estilo, voy a escribir el nombre del elemento y el nombre del elemento es input. Después dentro del receso cuadrado, nuestro nombre de atributo es type. Y dentro de los códigos dobles, lo contrario, se pueden utilizar códigos individuales. Tenemos que pasar el nombre del valor. El valor es texto. Entonces dentro del receso del auto necesitamos usar las propiedades. Y aquí quiero escribir frontera. Borde tres píxeles, y quiero borde sólido, sólido, y quiero fondo rojo coloreado. borde rojo. Después de paso este archivo, si vuelvo a cargar mi navegador, se puede ver el resultado Como se puede ver, tenía lo que son aquellos sección de entrada que tienen atributo type. También, qué valor es texto. Y ahora quiero apuntar imagen con su fuente y fuente Val. Para eso, voy a copiar una de las fuentes. Quiero apuntar al catimage. Así que copia la fuente y el. Y luego Hamer escriba image luego inserte el cuadrado ss, voy a pasar el nombre del atributo y el valor Entonces dentro del Cariss quiero agregar frontera. Quiero agregar el mismo borde, así que copio la propiedad y el valor y voy a pegar aquí. Pasé este archivo. Si vuelvo a cargar mi navegador, puedes ver el resultado. Esta vez seleccionamos la imagen con nombre de atributo particular y el valor particular. Además, se puede seleccionar la imagen con otros atributos como con d título, etcétera Entonces este es el ejemplo de atributo con selector de valor. Entonces nuevamente, voy a comentar esta sección. Y ahora hablemos de nuestro siguiente selector de atributos. Este es otro selector de atributos. En este selector, necesitamos pasar el nombre del atributo, entonces necesitamos usar este signo. Puedes encontrar este letrero después de presionar la forma, y necesitas presionar seis, luego igual a, y necesitas pasar la ola. Este atributo comienza con el camino. Aquí tenemos que pasar la palabra clave inicial o valor. Déjame mostrarte. Para este ejemplo, voy a seleccionar este código, y lo voy a pegar aquí. Si configuro este archivo y vuelvo a abrir mi navegador, puedes verlo un borde a nuestra imagen de gato Pero si elimino un carácter de este valor, establecen este archivo y relacionan este navegador, ahora puedes verlo no le agregan ningún borde a nuestra imagen de gato porque el valor está incompleto. Pero a nuestra imagen, nuestro valor parte del gato. Esta vez, utilizo atributo source, pero en nuestra diversa selección, pasamos solo las palabras clave iniciales, CAT. Entonces si uso este signo, este signo de inicio para eso, necesitamos alabar ovejas y sincronizar y luego configurar este archivo y ret mi navegador, puedes ver el resultado. Nuevamente, agrega frontera a esta imagen en particular. Porque en nuestra imagen, utilizamos el atributo source y también nuestra imagen, comenzamos con CAT. Ahora, hablemos de nuestro cuarto selector de atributos. En este selector, necesitamos usar atributo con operator. El atributo comienza con el valor o es el primer IA des lista separada. Este selector de atributos o cuando tenemos des seno de lo contrario menos seno comenzar con valor o es primero innato des lista separada Entonces veamos el ejemplo. Al principio, voy a copiar esta línea y comentar esta línea. Entonces voy a pegarlo aquí. Esta vez, voy a usar dd. Voy a usar el atributo Odd, copiar y pegar. Si configuro este archivo y vuelvo a cargar mi navegador, no va a funcionar porque nuestro atributo value no es seguro, y ahora voy a usar este signo de operadores O si configuro este archivo y redirijo mi navegador, además no va a funcionar. Pero, ¿qué? Si utilizo el letrero del tablero. Entonces en nuestro antiguo valor, aquí voy a usar el signo de guión, lo contrario, signo menos. Si configuro este archivo y redirijo mi navegador, ahora puedes ver Agrega boder a nuestra imagen CAT porque tenemos el signo dash en nuestra sección de valor Primero, coincidió con nuestro nombre de atributo, aquí usamos viejo después de usar esta condición, pasamos una imagen de texto. Corta esa porción. Este no es el selector muy utilizado. Ahora, hablemos de nuestro siguiente selector de atributos. Nuestro siguiente selector de atributos con signo de dólar, atributos termina con valor. Entonces comencemos lo práctico y veamos cómo podemos usar este selector. Para eso, primero, voy a duplicar esta sección y comentar la anterior. Y aquí, voy a usar el signo del dólar. Y en esta imagen, aquí usamos etiqueta, y nuestra imagen d valor termina con Imagen de CAT. Entonces voy a copiar los últimos tres caracteres, CAT, copiar, y voy a pegarlo aquí. Después de configurar este archivo, si deod mi navegador, se puede ver el resultado No hay cambios en este resultado. De igual manera, como puedes ver en nuestra siguiente imagen, tenemos etiqueta de título. Esta vez, voy a copiar este título de atributo. Así que aquí para escribir título. Título igual a, y nuestros títulos terminan con GER. Entonces voy a sustituir gato por GER. Después de configurar este archivo, y se carga mi navegador, se puede ver el resultado. Ahora está en Bar a nuestra imagen atada. Ahora, esta vez, quiero seleccionar esas etiquetas de anclaje que tienen la etiqueta HRF y también la extensión JPG en su pozo Para eso, voy a pasar HRM. Copio el nombre del atributo y lo voy a pegar aquí, HD y quiero seleccionar esas etiquetas de anclaje, así que aquí voy a quitar imagen, y voy a pasar NCN A. Con eso, tenemos que pasar el valor final y nuestro valor ensuite dot JPG Copia el valor, y voy a pegarlo dentro del código doble. Y quiero cambiar el color de fuente de esta ventaja. Entonces voy a quitar este borde, y aquí, voy a escribir color. Color rojo. Después de configurar este archivo, si vuelvo a cargar mi navegador, puedes ver el resultado Vaya, nuestro extremo HRF con GER, o extremo HRDF con punto JPG Voy a usar esta extensión nombre punto JPG. Si configuro este archivo y vuelvo a cargar este navegador, puedes ver el resultado Como puedes ver, le agrega color rojo a esta gata. Entonces este es el selector de fin con W ahora hablemos de nuestro siguiente selector de atributos. Este es nuestro selector de seis atributos. Aquí podemos usar estrella sinusoidal. Si el valor ocurre en cualquier parte del atributo, entonces va a seleccionar este elemento. Entonces déjame mostrarte el ejemplo. Entonces primero, voy a duplicar esta sección y comentar la sección anterior. Y aquí voy a usar signo de estrella. Y esta vez, quiero apuntar a esas etiquetas nCAT que tienen atributo target Entonces para copiar el atributo llamado target, y lo voy a pegar aquí. Y ahora quiero pasar solo dos caracteres en esta sección de valores, y quiero pasar AN y voy a configurar este archivo. Después de configurar este archivo, si vuelvo a cargar mi navegador, ahora puedes ver que tenía color rojo en nuestra segunda etiqueta NGA porque si nuestro valor de atributo objetivo contenía un carácter AN en su valor, entonces va a seleccionar esta etiqueta Nga Quiero decir, si este personaje está disponible en cualquier parte de este valor, entonces va a seleccionar esta etiqueta de anclaje. Entonces este es el uso del pecado estrella. Ahora, etiquetemos o los últimos atributos seleccionados. Entonces nuevamente, voy a duplicar esta sección y comentar la anterior. Y en nuestro selector de atributos de lista, necesitamos usar tridlsGee return value matches attribute in space Es decir, sea cual sea el valor que pases, el valor debe tener espacio antes y después. Así que vamos a saltar al código de Visual Studio para que quede más claro. De nuevo, estoy en mi código de Visual Studio, y aquí voy a usar el TridLSIG Y ahora voy a apuntar imagen. Entonces voy a copiar la etiqueta de imagen, y la voy a pegar aquí. Y a partir de la imagen, voy a seleccionar el atributo t. Entonces tipo Hemo Y aquí, voy a pasar un nombre de valor. Para A. Si notas, puedes ver antes del Op, tenemos espacio, y arriba el Op también tenemos espacio. Entonces si configuro este archivo, vuelvo a cargar mi navegador, Uter configuro este archivo, como pueden ver, no está funcionando porque cómo usamos la propiedad de color Necesitamos usar boer Border, y voy a escribir tres píxeles, y quiero borde sólido Con eso, nuestro color de borde es real. Y voy a comentar nuestro anterior P Barty nombre Cull Si configuro este archivo y vuelvo a cargar mi navegador, puedes ver el resultado porque tenemos espacios antes y después del apagado. Del mismo modo, si utilizo la misma etiqueta Al en nuestra siguiente imagen, copio la etiqueta All, y la voy a pegar aquí. Y esta vez, voy a escribir imagen de tigre. Y configurar este archivo y cargar mi navegador. Además, puedes verlo agregar borde a nuestra imagen de llantas. Pero, ¿qué? Si elimino el espacio arriba de la parte superior del carácter, quiero volver a configurar este archivo. Y avisar a mi navegador. Y después de alertar a mi navegador, como pueden ver, elimina a navegante de la imagen del tigre porque deberíamos tener espacio ater y antes de carácter Entonces así es como podemos usar esos atributos selector. Espero que ahora te quede claro. Entonces ya aprendes sobre selector simple, selector combinador y selector de atributos partir del siguiente tutorial, vamos a iniciar clases de poseido y elementos positivos Así que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 12. Tutorial de selectores de pseudoclases en CSS parte 1: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS avanzado. Y en este tutorial, vamos a aprender clases de poseido CSS En nuestro tutorial prehest, hablamos de que tenemos que decir qué tipo de selector, selector simple, selector combinador, selector de atributos, clases postuto y elementos posto Y ya aprendemos sobre selector simple, selector combinador y selector de atributos En este tutorial, voy a cubrir clases possuo. Entonces veamos cuántos positoglss tenemos en CSS. Aquí se puede ver el total de 32 vidrios poseido. Incluye nuestras antiguas clases de posto, también las clases avanzadas de posto, que se introduce en CSS tres Empecemos el tutorial con vaso poseido de primer hijo y último hijo Y recuerda, para usar la clase posto, necesitamos usar el signo de columna Entonces, sin perder el tiempo, comencemos la práctica. Como pueden ver, lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión del servidor Lip, y ya creo un documento estable llamado index dot M. Y en nuestro documento, como pueden ver, primero, tenemos una lista sin ordenar, después tenemos a tres párrafos Entonces otra vez, tenemos nodal ist. También tenemos dos párrafos. A partir de aquí, vamos a iniciar nuestra prositoclase de primer hijo y último hijo Y ahora quiero apuntar a la primera etiqueta LI que está dentro de la etiqueta UL. Quiero apuntar al primer hijo. Para eso, voy a atar LI, entonces necesitamos usar colon y después de colon, recuerden, no necesitamos proporcionar ningún espacio después del colon. De lo contrario, alimentamos el colon. Entonces tenemos que pasar el nombre de Posidocla, que es primer hijo Después dentro de las Tarjetas, aquí voy a usar una propiedad CSS llamada color. Color y. Si configuro este archivo, como puede ver, tenemos lista total para desordenar en nuestro documento Esta es la primera lista nodal, y esta es la segunda lista sin orden Tenemos total a primer hijo en nuestra lista de despedidos. Si configuro este archivo, aquí pueden ver, se ha cambiado el color de fondo hasta el primer hijo de la lista innecesaria. Primero, coloreó el primer elemento de la lista de la lista uno y luego coloreó el primer elemento de la lista de la lista dos. Si nota, puede ver nuestra etiqueta LI dentro de la etiqueta UL. La etiqueta I es el primer hijo de la etiqueta UL. De igual manera, si yo para obtener esta sección y comentar la línea anterior, y ahora voy a cambiar la etiqueta nueve. Aquí voy a pasar P significa etiqueta de párrafo. Como puede ver, tenemos etiqueta de varios párrafos en nuestro documento. Si configuro este archivo, no hay cambios. No cambio el color del teléfono de la etiqueta de párrafo, pero la pregunta es ¿por qué? Porque nuestra etiqueta de párrafo no es el primer hijo. Aquí usamos directamente la etiqueta de párrafo dentro de la etiqueta body. No utilizamos ninguna etiqueta de inmersión de otra manera en cualquier otro momento. Por eso el párrafo no es nuestro primer hijo. Pero si muevo la etiqueta de párrafo dentro de la etiqueta profunda, en ese caso, va a funcionar. Déjame mostrarte. Aquí voy a escribir Deep tag. D. Voy a reservar este tres párrafos dentro de esta etiqueta profunda. Up configurar este archivo, ahora se puede ver el resultado. Ahora coloreó el primer elemento hijo de nuestra etiqueta de párrafo, que está dentro de la etiqueta profunda. De la manera opuesta, tenemos el último elemento hijo. Si tecleo pelo último hijo, luego configuro este archivo, ahora puedes ver resultado diferente. Ahora selecciona el último hijo de este elemento profundo, que es un párrafo. la misma manera, si paso etiqueta aquí, yo y luego configuro este archivo, ahora puedes verlo objetivo elemento lujuria tanto de la lista deswodal Ahora quiero seleccionar el elemento lujuria del último. Como puedes ver, el último hijo selecciona el elemento lujuria de la lista deswodal Pero esta vez, quiero seleccionar el último elemento de la primera lista unodal. Para eso, aquí necesitamos pasar el ID de lista. Entonces voy a duplicar esta sección y comentar líneas anteriores. Aquí voy a escribir hashtag, nuestra lista uno IDNMe es Si configuro este archivo, ahora puedes ver el resultado. Ahora puedes verlo apuntar al último elemento LI de la lista uno. Espero que ahora te quede claro cuál es último hijo y cuál es el primer hijo. Ahora, hablemos de en niño y Nth último hijo. A partir de aquí, voy a quitar al último hijo y voy a sustituir al último por N hijo. Entonces aquí necesitamos usar los tirantes redondos. En el primer selector hijo y el último selector hijo, podemos apuntar solo al primero, de lo contrario, al último. Pero en nuestro selector NhLD, podemos apuntar al especificar uno Supongamos que quiero apuntar al tercer hijo. Dentro del receso redondo, hay que pasar tres. Si configuro este archivo, puedes ver el resultado. Entonces aquí seleccionamos al niño en particular usando el número de índice. la misma manera, si quieres apuntar al quinto, sí, podemos. Sólo ella para pasar cinco y establecer este archivo, y se puede ver el resultado. No sólo eso, en la rotonda se puede realizar algún cálculo Supongamos que voy a pasar dos N. Básicamente N representan el número de serie como uno, dos, tres, cuatro, es decir va a multiplicar dos en cero, dos en uno, dos en dos, de esta manera. Apres este le se puede ver el resultado. Apunta a un ater uno. Primero, va a multiplicar dos en cero y dos en cero igual a cero. Por eso no seleccionas el primero. Después dos en uno, dos en uno igual a dos. Por eso selecciona el segundo. A continuación, dos en dos y dos en dos iguales a cuatro. Por eso seleccionas el cuarto. Entonces de la misma manera, se van a seleccionar los elementos hijos. Como puedes realizar algunos otros cálculos básicos. Si quieres experimentar con eso, sí, puedes. Ahora, hablemos del último hijo. Quiero obtener esta sección y comentar la anterior. Y voy a teclearlo último hijo. También es trabajo como en Gil, pero va a comenzar desde el último de esta lista. Déjame mostrarte. Entonces aquí voy a escribir dos y luego establecer este archivo. Después de configurar este archivo, como puedes ver, selecciona el segundo último elemento de nuestra lista. Básicamente, quiero decir que es de dirección opuesta. Espero que ahora te quede claro lo que hay en niño y en él último hijo. Ahora voy a hablar en él último de tipo y tipo IO. Aquí voy a duplicar esta sección y comentar la anterior. Voy a escribir menos N de Ti. Después dentro de las rotondas aquí paso dos. Esta vez, quiero seleccionar del párrafo. Aquí voy a escribir P. Después de s arriba este archivo, como se puede ver, como se puede ver, primero se selecciona el segundo elemento hijo, que es de la etiqueta profunda. Estos párrafos tienen su etiqueta padre. Pero, ¿qué? Si me desplazo un poco hacia abajo, ahora puedes ver en nuestros dos últimos párrafos, no usamos ninguna etiqueta padre, pero nuestro th de tipo también seleccionamos el último párrafo. Pero nuestro selector de tipo enthrop puede seleccionar aquellos párrafos que no tienen elemento padre Básicamente, quiero decir, puede seleccionar elemento del elemento padre. Además, puede seleccionar aquellos elementos que no tienen elemento padre. Para entender mejor, voy a quitar la etiqueta profunda. Si configuro este archivo, ahora, nuestras etiquetas de párrafo no tienen ningún elemento padre. Entonces, si pongo esta pila, como pueden ver, selecciona el segundo párrafo de nuestro documento tal. Solo hay que recordar que puede seleccionar elemento sin padre. Ahora, hablemos de ello último tipo de parada. De nuevo, voy a duplicar esta sección. Y comentar sección anterior y HemoTypen último. Básicamente, se va a seleccionar elemento desde la dirección opuesta. Después de paso este archivo, se puede ver el resultado. Selecciono nuestro segundo último párrafo de nuestro documento. Ahora, hablemos de otra clase positiva sobre niño. Este selector funciona cuando solo tienes un hijo en tu elemento padre. Déjame mostrarte. De nuevo, voy a seleccionar esta sección y duplicar esta sección y comentar líneas anteriores. Y voy a escribir en las etiquetas LI, yo aquí voy a ejecutar nuestro nuevo nuevo selector positivo, que es solo hijo. Si configuro este archivo, como puede ver, no seleccionó ningún elemento de nuestra lista porque nuestras etiquetas LI no son solo secundarias en nuestras etiquetas UL, ¿sino qué? Si me quito todo esto. Ahora puedes ver que solo tenemos un hijo en nuestra etiqueta UL, y luego establecer este archivo, puedes ver el resultado. Ahora es seleccionar nuestro elemento perfectamente porque solo tenemos un hijo en al menos uno. Pero si tecleo algo dentro de esta etiqueta UL, supongamos que hero type es pan tag, y luego configuro este archivo. Ahora puedes ver que no configuras al niño porque funciona solo con el hijo soltero. Este es el uso de hijo único. Si hay un hermano de este niño, entonces no va a funcionar Espero que ahora te quede claro. Esto es para este tutorial. No quiero que este video sea demasiado largo. Entonces en la siguiente parte de este tutorial, voy a cubrir tipo Ono, primero de tipo, último de tipo, vacío, no lag. Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 13. Selector de pseudoclases en CSS parte 2: Hola chico es bueno verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con Css poseido selector de clases Y vamos a comenzar nuestro tutorial desde este selector, solo tipo Op. En nuestro tutorial anterior, ya aprendemos sobre algunos selectores poseido Sin desperdiciar tu tipo, comencemos la práctica. Como pueden ver lado a lado, abro mis sales a tu codaor y a mi navegador usando extensión de servidor de labios, y abro mi estimación anterior índice Dopomin Vamos a comenzar con solo tipo Op. Él tipo sólo de tipo. Si configuro este archivo, no se puede ver nada. Ahora la pregunta es, ¿cuál es el significado de solo tipo Op? Supongamos que en nuestra lista, tenemos múltiples etiquetas LI. Voy a comentar la mayoría de las etiquetas LI. Ahora solo tenemos una etiqueta LI en esa lista. Después de configurar este archivo, se puede ver el resultado. Es seleccionar la etiqueta LI que está dentro de nuestra lista de primer orden. Ahora se podría pensar que es bastante similar con solo Selector hijo, pero no lo es. En solo selector hijo, si usas cualquier otra etiqueta como span tag, span, hemo tipo P. Entonces configuras este archivo, no va a funcionar Pero con solo up type, si configuras este archivo, también funcionó. Como puedes ver, aquí usamos solo tipo Op con etiqueta Ali, y en nuestra etiqueta UL, no tenemos ninguna etiqueta it. Tenemos solo una etiqueta LI. Pero si obtenemos esta línea y luego configuramos este archivo, ahora no va a funcionar porque ahora tenemos múltiples etiquetas LI. Si la etiqueta LI es solo tipo O en este UL, en ese caso, va a seleccionar. Entonces si vuelvo a quitar esta línea y luego configuro este archivo, puedes ver el resultado. Ahora es seleccionar nuestro elemento de lista. Del mismo modo, si lo usas con etiqueta span, déjame mostrarte. Quiero reemplazar la IA con span. Span. Antes de configurar este archivo, nuevo, voy a duplicar esta etiqueta span y establecer este archivo. Ahora puedes ver, tenemos que hacer dos etiquetas span, pero no seleccionó ninguna de una. ¿Pero qué? Si elimino una etiqueta span, si elimino una etiqueta span de esta lista y luego configuro este archivo, puedes ver el resultado. Ahora puedes verlo seleccionar la etiqueta span. Este es el uso de solo tipo de selector. Ahora hablemos de primero de tipo y último de tipo selectores Es decir el mismo tipo de etiqueta primero y último. Empecemos por lo práctico. Al principio, voy a sacar esta sección y comentar líneas anteriores. Y aquí voy a escribir Foptype. Si configuro este archivo, como puedes ver, selecciona la etiqueta span, pero ahora quiero usarlo con la etiqueta LI. Entonces voy a teclear I. Después de establecer este archivo, ahora puedes verlo seleccionar la primera etiqueta LI en nuestra lista de la manera opuesta, último tipo top trabajo. Si hago esta línea y comento la sección anterior y aquí quiero sustituir primero por último. Entonces s arriba este archivo, se puede ver el resultado. Ahora es seleccionar el último, y en nuestra lista uno, solo tenemos una etiqueta li. Por eso este se cuenta como último y primero también. Ahora, hablemos de nuestro próximo lectter que está vacío. Se utiliza para seleccionar el elemento vacío. Déjame mostrarte. Entonces primero, voy a desbarbarcar estas líneas y a suplicar esta sección y comentar la sección anterior. Y aquí, voy a crear un elemento profundo antes de la lista uno. D. No sólo eso, voy a crear múltiples profundos. Voy a duplicar este profundo a tine, y en nuestro segundo profundo, aquí voy a escribir algún texto. Costilla baja diez, y voy a poner este archivo. Pero nuestro primer DF y último DV está completamente vacío. Esta vez, quiero apuntar a nuestra D. vacía ¿Cómo podemos apuntar a esta profundidad vacía? Déjame mostrarte. Para eso, voy a escribir pitido colon vacío Entonces dentro de la resis de carbón, aquí voy a usar un nombre de propiedad border, border three pixel, y quiero borde sólido. Con eso, nuestro fresador barrenador es rojo. Si subo este archivo, se puede ver el resultado. Puedes ver en mi navegador, este es nuestro primer de border. Entonces viene lo profundo con contenido porque nuestro segundo dV no está vacío. Entonces viene el tercero de border porque nuestro tercer div está vacío. Nuestro profundo estaba vacío. Por eso nuestra frontera se pega entre sí. Pero si agrego algo de relleno, déjame mostrar padding cinco píxeles y luego establecer este archivo. Ahora puedes ver el resultado. Pero ten cuidado si usas selector vacío, porque también es contar espacio como carácter. Déjame mostrarte. En nuestra tercera a, aquí voy a proporcionar un espacio. Se puede ver nuestro tercero si está vacío, pero aquí le doy un espacio. Si configuro este archivo, ahora se puede ver que no tiene ningún borde en nuestra tercera inmersión porque aquí utilizamos un espacio. Ahora hablemos de nuestro próximo selector de posido nada. Si no queremos apuntar a esta clase de especificar la etiqueta especificada de otra manera, entonces usamos no selector. Va a apuntar a otros elementos, pero no va a apuntar al elemento especificado. Déjeme mostrar. Ahora de nuevo, invito a código de estudio visual hit, y aquí se puede ver, tenemos que decir etiqueta de cinco párrafos en nuestro documento. Voy a seleccionar todo este elemento de párrafo. Para eso, voy a escribir P, luego en las carreras de tali, voy a agregar color Color, rojo, y voy a configurar este archivo. Arriba para configurar este archivo, como puedes ver, seleccionas todas las etiquetas de párrafo. Pero en nuestra etiqueta de segundo párrafo, como pueden ver, tenemos una clase llamada gusto. No quiero seleccionar esta etiqueta de párrafo. Para eso, necesitamos usar no posidoClass. Aquí quiero escribir P, colon, nada. Entonces dentro de la clase, voy a seleccionar la clase particular llamada sabor, punto, gusto. Si configuro este archivo, puedes ver el resultado. Ahora puedes verlo seleccionar toda la etiqueta de párrafo, excepto la segunda porque ella usa no PositoCass y especifica el párrafo usando su Ahora, hablemos de nuestra próxima clase de posito Lang. Lang significa lenguaje. Si quieres apuntar a algún idioma en particular en tu página web, en ese caso, necesitas usar esta selección. Para ese ejemplo, como puedes ver, creamos un nombre de página de estimación diferente Langt TML, en nuestra etiqueta corporal, aquí puedes ver 23 El primero es el idioma inglés. El segundo es el idioma francés, y el tercero es el idioma alemán. Para declarar este idioma, aquí usamos el atributo Lang. Ahora quiero apuntar a este párrafo usando su lenguaje. Para eso, necesitamos usar el selector de procedimientos Lang. Primero, quiero dirigirme al idioma francés. Para eso, voy a empatar P, colon, y voy a usar la clase Lang. Línea. Después dentro de las prensas redondas, voy a escribir el disparo de, que es FR. Dentro de la Clase, voy a cambiar el color del párrafo. Lectura de color. Después de configurar este archivo, se puede ver el resultado. Se puede ver en mi navegador, apuntaba al párrafo francés. De igual manera, si quieres apuntar al alemán, entonces voy a elegir de nuevo esta sección, y quiero apuntar al alemán. Para eso, aquí necesitas pasar DE. Si configuro este archivo, puedes ver el resultado. Ahora apuntamos al tercero porque nuestro tercer párrafo está en alemán. Entonces este es el uso del selector de idioma. Y ahora voy a hablar de link posto class sobre Posidoclass, visito PositoClass y Posidoclass visito PositoClass y Posidoclass Básicamente, los posto plus se utilizan con etiquetas ange. Y también puedes usar over y active con otras etiquetas. Veamos cómo podemos usarlo. Nuevamente, estoy en mi con el editor de código de estudio, y como pueden ver, aquí creamos otro documento estable llamado ling dot HTML. Y como puedes ver, tenemos una lista deswodn, y dentro de esta lista desordenada, tenemos algunas Y estas etiquetas LI son lideradas por etiquetas NGA. Y para darle estilo a estas etiquetas NGA, podemos usar para pseudo clases Entonces estos son todos enlaces. Entonces quiero colorear todos los enlaces. Para eso, voy a apuntar a todas las etiquetas ancha en UL A, enlace de colon. Entonces dentro de los colores está, quiero establecer color rojo. Y quiero establecer este archivo. Hasta configurar este archivo, como puedes ver, convierte todos los enlaces en color rojo. Y ahora quiero cambiar el color cuando esté sobre mi cursor sobre este enlace. Para eso, voy a duplicar esta sección, y voy a amarrar A dos puntos Ella. Y cuando coloco el cursor, quiero el color verde Después de configurar este archivo, cuando ober mis autos en este enlace, puedes verlo convertir nuestro color de texto en verde y puedes usar la clase Obernt Posito con cualquier Se puede utilizar con párrafo, etiqueta profunda, etiqueta span, etcétera Sé que ya estás familiarizado con eso. Nuestro próximo Posito seleccionado es visitado y puedes usar visitado con solo en ancla Quiero duplicar esta sección, y aquí voy a escribir en visitado aquí voy a usar color azul. Visitado significa que ya haces clic en este enlace una vez, y puedes ver en mi navegador, todas las etiquetas son rojas porque no visito ninguno de los enlaces, así que voy a hacer clic en Contactar TAs. Así que cada vez que hago clic en Contactas, como pueden ver, convierte todas las etiquetas NCT visitadas porque espero haber cometido un error Como pueden ver, estoy en mi página de enlace punto TML, y en nuestro contactus Anctag redireccionamos nuestra página web, índice punto página índice punto Y configuro este archivo y abro este archivo sin usar Live Server y se puede ver la ubicación del archivo en la sección URL. Ahora esta vez, de nuevo, voy a hacer clic en Contactos. Voy a hacer click en este enlace. Después de hacer clic en este enlace, como puedes ver, reictas a nuestra otra página Pero si hago clic en el botón Atrás, ahora puedes ver esta página de contacto es visitate Espero que ahora puedan entender cómo podemos usar la clase VisitatePosdo Ahora, hablemos de otra Posidoclase que está activa Voy a embotar esta sección y voy a atar una actina de colon Después dentro de los procesos redondos, voy a cambiar el color. Aquí voy a usar el color rosa. Voy a establecer este archivo. Voy a reescribir esta página. Ahora la pregunta es, ¿cuál es el uso de la clase activa de Pozo? Como pueden ver, cada vez que abro mi Carter en él, pueden ver nuestro enlace cambió el color, pero no hago clic en este enlace. Ahora voy a presionar clic en este enlace. Voy a presionar click derecho sobre este enlace. Como pueden ver, sigo manteniendo mi clic derecho sobre este enlace. Es mezquino, nuestro enlace está activo. Hasta que suelte mi clic derecho el enlace sigue actuando. Es malo, cada vez que haga clic en este enlace O, va a activar este enlace y cambiar el color del texto de este enlace. Este es el uso de la clase activa, y cada vez que libero mi botón derecho, entonces vuelve al color visitado porque hago clic en este enlace. Esto es para este tutorial del siguiente tutorial, voy a iniciar target focus, check, disabled enable , required optional et cetera Gracias por ver este video, estén atentos para nuestro próximo tutorial. 14. Selector de pseudoclases en CSS, parte 3: Ahora, hola chico, es bueno verte de vuelta. Una vez más, estoy de vuelta con otro Tutorial relacionado CSS PoseoClasses, vamos a iniciar nuestro recorrido desde este Target, Selector de Pozioglas Target. Este PosidoGass es muy útil con la etiqueta de anclaje. Veamos cómo podemos usarlo. Como pueden ver, lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión del servidor light, y ya creo un documento de estimación llamado index dot HTML. Y puedes ver en nuestra lista desordenada, tenemos un total de tres etiquetas de anclaje, DML CSS JavaScript, y en la sección HDF, aquí uso ID usando hashtag Esto significa que quiero apuntar y redirigir a una sección particular de esta página web. Estos se llaman enlace de la misma página. De lo contrario, podemos llamarlo vinculación interna. Y como puedes ver en nuestra sección de párrafo, utilizamos el ID similar para estos párrafos. Entonces cada vez que hago clic en este enlace TML, entonces quiero resaltarlo la etiqueta de párrafo particular relacionada con TML la misma manera, cada vez que hago clic en JavaScript, entonces quiero resaltar en el párrafo de JavaScript. Para eso, podemos usar PozioCas objetivo . Déjame mostrarte cómo. Supongamos que quiero apuntar al elemento P, P dos puntos y voy a usar Target PosidOLSS Objetivo. Entonces dentro de los laboratorios de autos, voy a cambiar el color de fondo de este párrafo en particular. Fondo y quiero fondo de color rojo. Voy a establecer este archivo. Después de configurar este archivo, no se puede ver nada en nuestro navegador. Pero cada vez que hago clic en el enlace particular, supongamos que quiero hacer clic en el enlace CSS. Voy a dar click en CSS. Después de hacer clic en CSS, se puede ver el resultado. Destacó el párrafo particular relacionado con CSS porque este enlace y los párrafos enlazan con este ID llamado CSS. De igual manera, si quiero resaltar la porción de Javascript, sí, puedo. Ahora la pregunta es, ¿cuál es el proceso que ing reconoce esta identificación? Como puedes ver en mi sección de URL, después de DML, tenemos un ID, Hazteg Siempre que haga clic en CSS también se puede ver que el ID se cambia. Ahora puedes ver ahora el enlace es hashtag CSS. De manera similar para DML. Método de destino, reconozca este ID de esta barra de URL. Espero que ahora te quede claro cómo podemos usar Target PosidoClass Ahora vamos a hablar de enfoque de cristal poseido. Aquí podrás ver todos los PosidoGlass en color rosa. Todos estos son trabajos con formularios de entrada. Voy a probar todos estos en nuestro AtableFM. Empecemos la práctica y veamos cómo podemos usarla. Y vamos a empezar con el enfoque. Entonces como pueden ver, lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión Lifesaver, y ya abro un nombre de documento HTML desde dot En nuestra etiqueta corporal, como pueden ver, tenemos una de. Y en nuestro de tenemos diferente tipo de entrada. Para el nombre, usamos texto de tipo de entrada, y para apellido, también usamos texto de tipo de entrada. Con eso, dijimos requerido porque no podemos dejarlo en blanco. De igual manera, al mismo tenemos tu H, pero su tipo de entrada es número. En nuestra sección H, necesitas pasar los números. También, establecí un límite a esta sección de insumos, límite mínimo, diez años y límite máximo 20 años. Por lo que hay que pasar Valor entre ellos. Nuestra siguiente sección de entrada es la sección de correo electrónico. Aquí utilizamos el tipo de entrada email. Nuestra siguiente sección es pasatiempos, y estos son todos tipo de entrada de casilla de verificación. A continuación, usamos tu género, para tu género, ella usamos radio tipo entrada. Todos estos son botones de radio. L para usar caja CLG. Si haces clic en este menú desplegable, podrás ver muchos nombres de países. Esta es una caja Seleg y todas estas son opciones de esta caja de selección Por defecto, seleccionamos ninguno, y por fin, tenemos un botón de enviar, tipo de entrada submin. Entonces comencemos con focus p clase cero. Dentro de la sección de estilo, aquí voy a escribir, y voy a usar focus con etiqueta de entrada. Entrada. Siempre que nos enfoquemos en la entrada, luego dentro del colss quiero agregar border a esta sección de entrada en particular, border to pixel, y quiero borde sólido Con eso, nuestro color boder es el rojo. Después de sep este archivo, cada vez que hago clic en cualquier sección de entrada, quiero hacer clic en la última sección de entrada. Si hago clic en este campo de entrada, como puede ver, se agrega un borde a este campo de entrada. Pero el problema es que no podemos ver el color rojo del borde. Voy a aumentar el ancho del borde. Quiero cinco Pi frontera sólida. Si configuro este archivo y hago clic en cualquier campo de entrada, puede ver el resultado. Agrega borde de color rojo a este campo de entrada, pero no va a funcionar en checkbox y botón de radio Este es el uso del enfoque PozioClass ahora voy a hablar de check Esta clase posito funciona con casilla de verificación y caja de radio tipo entrada Vayamos al código de Visual Studio. Para eso, voy a sacar esta sección y comentar línea anterior. Aquí voy a usar entrada, revisa nuestro PositoGlass es Entonces dentro de los vestidos redondos, no voy a usar la propiedad border porque bordes no funcionan con checkbox y botones de radio Aquí necesitamos usar box shadow box shadow. Quiero establecer sombra de caja, cero, cero, cero, y quiero tres píxeles. Con eso, quiero de color rojo. De Ss y Xs, tomo cero pixel y por opacidad, tomo también cero Si configuro este archivo y sobre mis autos arriba casilla de verificación y hago clic en la casilla de verificación, puede ver el resultado. Es en la sombra de la caja en nuestra casilla de verificación at. Del mismo modo, si hago clic en botones de radio, se puede ver el mismo resultado. Siempre que desmarque este botón, se puede ver que quitó la sombra de la caja Ahora voy a mostrarte un bonito truco. Para eso, voy a usar un selector de comunidad, y ya nos enteramos de ello en nuestros tutoriales anteriores. Aquí voy a usar un selector adyacente usando plusine. Entonces quiero agregar el nombre de la etiqueta y nuestro nombre de etiqueta es etiqueta. Aquí voy a comentar esta línea y también voy a agregar otra propiedad llamada color, y voy a establecer color rojo. Voy a establecer este archivo. Así que cada vez que haga clic en cualquier casilla de verificación, va a seleccionar la siguiente etiqueta Se va a seleccionar la siguiente etiqueta exacta, que está al lado de la casilla de verificación. Déjeme mostrar. Entonces, si hago clic en la casilla de verificación de música, puedes ver el resultado. Aplica divertido color CSS a nuestra etiqueta. Entonces espero frutos secos claros 40. ¿Cuál es el uso de check PositoClass? Ahora, hablemos de nuestro próximo a PositoClass, que está deshabilitado y habilitado Entonces veamos cómo podemos usarlo. Entonces, como puede ver, todas las entradas están habilitadas. Y ahora voy a desactivar nuestro nombre usando ATM. Entonces efectivamente entrada sección, aquí quiero escribir desactivar. Después de paso este archivo, se puede ver el resultado. No podemos escribir nada en este campo de entrada, pero podemos pasar entrada en nuestras otras etiquetas de entrada. Entonces primero, voy a comentar esta sección. Y ahí voy a agregar frontera a este campo de entrada. Aquí el tipo de entrada es texto. Voy a escribir input, entonces voy a usar square *** dentro del square sis, voy a mencionar input type, y ya lo aprendemos en nuestros tutoriales anteriores. Aquí uso selector de atributos, tipo tipo igual a inst los códigos individuales, voy a pasar el typename, que Entonces dentro del Cariss voy a poner una frontera. Borde tres píxeles, y quiero borde sólido. Con eso, nuestro boderclor es y. Después de paso este archivo, puedes ver Pero el problema es, decía frontera a nuestro botón de desactivación. Nuestro primer campo de entrada está desactivado, pero nuestro segundo campo de entrada está habilitado. Ahora no quiero agregar frontera a nuestro botón de desactivación. Para eso, voy a usar una habilitación de positioglass. Déjame mostrarte. Quiero agregar boder solo el campo enable input Después de resis cuadrada, voy a escribir colon enable. Si configuro este archivo, puedes ver el resultado. Ahora puedes verlo solo agregar el boder en nuestro campo de entrada de apellido porque este es el campo de entrada capaz Del mismo modo, si duplico esta sección y comento la anterior, esta vez, quiero agregar boder en nuestro campo de inhabilitación de entrada Él escribe desactivar. Y establecer este archivo. Después de establecer este archivo, se puede ver el resultado. Ahora está en la frontera en nuestro campo de entrada de desactivación. Este es el ejemplo de habilitar y deshabilitar Posidoclass. Ahora, hablemos de otras dos clases posito, que es obligatoria y opcional Si se requiere algún campo de entrada, entonces puede apuntar a este campo. Y si el campo de entrada es opcional, también puedes apuntar a este campo. Déjame mostrarte el ejemplo. Como puede ver, nuestro campo de nombre y apellido es obligatorio, pero en nuestro campo de correo electrónico, no utilizo atributo obligatorio. Entonces ahora quiero apuntar a este campo requerido. Entonces voy a seleccionar esta línea y comentar la sección anterior Como saben, el campo requerido es muy importante. Si intentas enviar este formulario sin campo requerido entrada, ahí va a mostrar masas. Por favor, rellene este campo. No puedes enviar el formulario sin rellenar este campo de entrada. Antes de iniciar mi CSS, voy a eliminar el atributo de desactivación, y voy a volver a guardarlo. Aquí quiero eliminar esta sección y voy a escribir entrada y quiero seleccionar la requerida. Entonces si se requiere el campo de entrada, entonces dicho sobre esta frontera. Además, quiero agregar color de fondo. Fondo, y quiero fondo color verde. Si configuro este archivo, puedes ver el resultado. Como puede ver, seleccionamos con éxito los campos de entrada requeridos y también diseñamos estos campos de entrada requeridos. De igual manera, al contrario, tenemos otra clase de Pozio, que es opcional Voy a comentar esta sección anterior, y aquí voy a escribir entrada opcional. Si el campo de entrada es opcional, entonces puedes ver que va a aplicar propiedades CSS, cuyo campo de entrada es opcional. Usando este PoseroGlass, podemos apuntar a aquellas secciones de entradas que es opcional, que no es obligatorio Ahora hablemos de otras dos Posidoclass, que está en rango y fuera de Estas clases de Posido funcionan solo con el número de tipo de entrada. Entonces aquí puedes ver en nuestro campo H, aquí usamos número de tipo de entrada, y también puedes ver en nuestra estimación, número de tipo de entrada. Con eso, también establecemos el valor mínimo y máximo para este campo de entrada. No podemos tomar más de 20, además no podemos tomar menos de diez. Entonces, si alguien intentó pasar 30, en ese caso, nuestra sección de entrada no va a tomar este número. Entonces ahora está fuera de alcance. Para eso, tenemos PositoGlass, que está en rango y fuera de Entonces déjame mostrarte cómo funciona. Aquí voy a escribir entrada en rango. Y quiero usar el borde y el color de fondo rojo, y voy a configurar este archivo. Siempre que paso el valor 10-20, entonces no va a mostrar ningún color porque ahora nuestra entrada en rango. Pero si paso un valor débil, supongamos 60, ahora se puede ver que nuestro CSIS se ha ido porque este valor no está en rango que especificé para manejar el valor fuera de rango, también podemos reflejar otras propiedades de Csis Déjame mostrarte cómo. Para eso, necesitamos usar pseudo clase fuera de rango Primero, voy a quitar la sección fronteriza. No lo necesito. Entonces voy a conseguir esta sección. Y esta vez, voy a escribir fuera de rango, y aquí voy a decirlo color de fondo, rojo, y voy a poner este cinco. Por defecto, como puedes ver, nuestro campo de entrada H es verde. Entonces si paso diez, 11, entonces va a devolver en rango positocls Pero si paso nueve, ahora puedes ver que ha cambiado el color de fondo. Ahora nuestro número está fuera de página, puedes avisar a tu usuario si pasan entrada incorrecta. Entonces esto es para este tutorial. En el siguiente tutorial, voy a cubrir los restantes Posidoglasses Así que gracias por ver este video Stune para el siguiente tutorial 15. Selector de pseudoclases en CSS, parte 4: Hola, chicos, me alegro de verles de vuelta. Este es otro tutorial relacionado con CSS poseudoglass selector En este tutorial, vamos a aprender las gafas posto restantes Entonces vamos a comenzar con Leer solo y leer y escribir PosidoGlass En nuestro estimLPM, si usamos el atributo de solo lectura, entonces solo podemos leer esta sección de entrada No podemos escribir nada en este feed de entrada, y el modo de lectura es el modo predeterminado Volvamos al código de Visual Studio y tratemos de entender cuál es el uso de los dos select. Entonces como pueden ver, lado a lado, abro mi editor de código isalts Studio y mi navegador usando IPServereTension, y ya creo un nombre de documento estimado documento Entonces en nuestro campo de entrada de primer nombre, si hago clic en él, como pueden ver, aquí podemos escribir el contenido. Pero si utilizo atributo de solo lectura, entonces tipo heraldo, solo lectura Este este archivo, ahora puedes ver nuestro primer nombre de campo de entrada no es isible Pero cada vez que hago clic en él, y si intento ingresar, los datos no van a funcionar. No podemos llenar este campo de entrada con datos, pero también podemos pasar el valor por defecto aquí. Déjame mostrarte. Él escribe valor, y quiero pasar el nombre a la una. Voy a establecer este archivo. Después de establecer este archivo, como puede ver, automáticamente, tenía un valor predeterminado en este campo. Pero cada vez que trato de eliminar este valor predeterminado, no puedo porque solo tenemos pernon para leer este campo de entrada, no correcto Ahora quiero seleccionar este campo de entrada usando PosidoGass. Para eso, necesitamos usar positoglass de solo lectura. Entrada de tipo pequeño. Colón, de sólo lectura. Después dentro del clivrass primero, voy a decir la frontera Borde, quiero un borde de píxel, y quiero borde sólido y el color de nuestra botella es rojo. Si configuro este archivo, puedes ver el resultado. Podemos apuntar con éxito el campo de solo lectura usando la clase Posito de solo lectura Pero si duplico esta sección y comento la anterior y quiero escribir entrada, leer escribir. Leer y escribir. Después establece este archivo, podrás ver diferentes resultados. Ahora es seleccionar el otro campo de entrada porque leer escritura es el modo predeterminado de campo de entrada. Ahora hablemos de nuestra próxima clase a posito, que es válida e inválida Utilizamos estas clases de posito si nuestro tipo de entrada es el número de teléfono de correo electrónico Quiero decir cuando el campo de entrada requirió un valor válido, entonces podemos usar estas clases. La mayoría de las veces usamos clase inválida. Supongamos que si alguien escribió un correo electrónico incorrecto, en ese caso, quiero mostrar advertencia a este campo de entrada Déjame mostrarte la demostración. Aquí puedes ver que tenemos campo de entrada llamado tu correo electrónico. Vamos a apuntar a este campo de entrada y aplicar ambas clases. Al principio, voy a duplicar esta sección de entrada y comentar la sección de entrada anterior. Entonces entrada herramuty, colon inválido. Después de establecer este archivo, como puedes ver, agrega borde a nuestro campo de entrada de apellido. Pero la pregunta es ¿por qué? Porque en este campo de entrada, utilizamos atributo requerido, por lo que no podemos dejarlo ahí. Por ahora, voy a eliminar este atributo requerido y establecer la antigüedad de este archivo, y luego voy a aumentar el píxel del borde, cinco píxeles y volver a configurar este archivo. Ahora puedes ver cada vez que hago clic en este campo de entrada e intento agregar correo electrónico como puedes ver, es un color de borde rojo. Pero si uso agrego el signo res y escribo un correo electrónico adecuado, algo así como gmail.com Ahora puedes verlo quitar el borde rojo porque ahora este es un correo válido. Es un formato de correo electrónico válido. Si no pasamos los datos válidos en nuestro campo de entrada, en ese caso, va a devolver las propiedades no válidas. Si elimino el.com, puedes ver el resultado. Nuevamente, agrega borde de color rojo a este campo de entrada. Espero que ahora te quede claro cómo funciona su trabajo. Ahora voy a usar clase válida. Voy a comenzar esta sección y aquí voy a escribir tipo de entrada válido. Aquí usamos clase pasito válida, y voy a escribir color verde Voy a establecer este archivo. Después de establecer este archivo, la clase válida juega el papel opuesto de inválido. Si pasamos un correo electrónico válido, algo así como agregar uno, agregar el gmail.com rojo Como puedes ver, todavía se aplica color de borde verde. Siempre que uses the.com y llene la condición, ahora puedes verlo aplicar color de borde rojo Entonces espero que ahora te quede claro. La mayoría de las veces usamos vidrio posto inválido. De nuevo, voy a comentar tanto esta sección, y ahora hablemos de nuestro próximo selector de posido Nuestro próximo PosidoGlass es predeterminado. Es trabajo si el valor ya existe y podemos usar vidrio por defecto con tres cosas. Podemos usarlo con casilla de verificación, de lo contrario, tipo de entrada de radio y el tercero es el tipo de opción, que usamos dentro del tanque selecto Vamos a saltar al código de isalt studio y veamos cómo podemos usarlo prácticamente Como puede ver en nuestro formulario, nuestra casilla de verificación no está seleccionada Pero cada vez que relaciono mi baile de graduación, de lo contrario , abro por primera vez, entonces quiero marcar una de las opciones. Entonces podemos usar la clase por defecto. Vuelvo al campo de entrada de hobby y por defecto, quiero verificar viajes. Aquí voy a teclear cheque. Y voy a poner este archivo. Después de configurar este archivo, como puedes ver, cuando vuelvo a cargar mi navegador, por defecto, marcó la opción de viaje Ahora dentro de esta sección de estilo, voy a usar la clase predeterminada. Aquí voy a escribir input, colon, default. Entonces dentro de la resis de Cali, voy a usar una propiedad llamada box shadow box shadow. Sombra de caja, cero, cero, cero, y quiero tres píxeles. Con eso, quiero sombra de caja de color rojo. Después de configurar este archivo, se puede ver el resultado. Se apunta al valor por defecto, que ya está seleccionado, y también se puede utilizar la opción por defecto con botones de opción. Ahora voy a hacer este Sen en nuestro cuadro de selección en la sección Botext Como puede ver en nuestro país, tenemos que aburrir el nombre de cuatro países, Estados Unidos, India, Reino Unido y alemán. En nuestra etiqueta select, por defecto, herramter pizarra a un Después de la India, voy a escribir seleccionarlo, y voy a configurar este archivo. Entonces, para configurar este archivo, cada vez que hago clic en esta sección Dp abajo, como pueden ver, no está funcionando. No, está funcionando, pero no podemos aplicar sombra de caja en nuestras etiquetas selectas. Déjeme mostrar. Aquí, voy a añadir color verde. A continuación, establezca este archivo. Después de configurar este archivo, si abro esta opción dp down, aún no está funcionando. Usémoslo con etiqueta particular nueve. Voy a ser esta sección y comentar la anterior aquí voy a teclear opción. Si configuro este archivo y abro este punto marrón, ahora puedes ver el resultado. Ahora puedes ver que ha cambiado el color de fuente de wel por defecto, que es la India. Ahora, hablemos de nuestra positoclase nosotros. Nuestra clase us posito es root. Ya usamos la clase posito root en nuestro tutorial anterior Cuando dices que es variable, usamos esta clase. Utilizamos esta clase para declarar variable. No lo voy a explicar a si quieres conocerlo, ve a la sección variable y mira este video. Gracias por ver este video, estén atentos para nuestro próximo tutorial. partir del siguiente tutorial, vamos a iniciar pseudo selector de elementos Estén atentos. 16. CSS3 es() mejorada para pseudoclases: Me alegro de verlos de vuelta chicos. En este tutorial, vas a aprender un nuevo nombre de clase Posito es posto Supongamos que tenemos un profundo con ID ABC y dentro de esta profundidad, tenemos un párrafo. la misma manera, tenemos otra identificación profunda X Y, y dentro de esta profundidad, tenemos otro párrafo. Y ahora quiero cambiar tanto el color del párrafo. Tanto el párrafo están dentro del elemento p diferente, pero tal vez tengamos algún otro párrafo en nuestro sitio web, pero especialmente, quiero cambiar los colores del párrafo. Para seleccionar tanto el párrafo, primero asignamos el ID, luego seleccionamos el párrafo particular que está asociado a esta D. Luego cambiamos el color. Este es nuestro antiguo método, y para crear este método, necesitamos escribir varias líneas. Pero ahora tenemos clase es poseido para hacer este código de alineación múltiple en una sola Algo así. Primero, necesitamos usar el selector de poseido E, luego dentro de la ronda ress necesitamos pasar tanto el ID D, y luego fuera de la ronda ress necesitamos pasar el elemento, qué elemento quiero apuntar, y qué elemento se encienda entre ellos Entonces aquí pasamos P, luego dentro de los colores, necesitamos usar la propiedad CSS. Así que este tipo de código reduce nuestro tamaño de archivo CSS. También aumentó, y también aumentó la velocidad de la página. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Y también, te voy a mostrar otras variantes de esta clase poseido Entonces como pueden ver, lado a lado, abro mi editor de código de resultados estudio y mi navegador usando la extensión Lifesaver, y ya creo un nombre de documento estim índice punto t Así que al principio, voy a decir el est. Entonces dentro de la etiqueta corporal, al principio, voy a tomar un DV y nuestro nombre profundo es el gusto uno, el gusto uno. Entonces voy a duplicar este Dev y asignarle un nuevo ID a esta profundidad que es sabor dos. Entonces dentro del gusto uno Profundo, voy a asignar una etiqueta de encabezado H uno. Entonces en nuestro primer dhading, voy a escribir la sección uno Y en nuestro rubro de la CND, voy a escribir Sección dos, Sección Dos Entonces voy a tomar otro rumbo en nuestro gusto una D, y voy a usar la partida dos. Y aquí voy a escribir subtítulo. Entonces voy a escribir etiqueta de párrafo, P, y aquí voy a pasar un párrafo ficticio, inferior, y voy a pasar dos palabras Y después de este párrafo, voy a tomar otra etiqueta de encabezado, que es H tres. Y aquí voy a pasar la subpartida dos. Entonces voy a tomar otro párrafo. P. Y en este párrafo, voy a pasar y heraldo tipo, um cinco Después dentro de la prueba dos D, voy a agregar un pequeño párrafo. Baja T. Voy a poner este archivo. Después de configurar este archivo, puedes ver el contenido en mi navegador. Y ahora quiero agregar una línea horizontal entre estos dos D. Para eso, Healtype HR. A partir de este archivo, se puede ver el resultado. Ahora voy a mostrarte el viejo método. Quiero cambiar todo el color de rumbo dentro del gusto. Para ello, necesitamos seleccionarlo varias veces. Déjame mostrarte cómo. Primero, tenemos que seleccionar el ID y la Dame es probar uno. Entonces necesitamos seleccionar el elemento, que es H uno. Entonces necesitamos proporcionar coma y voy a duplicar esta línea a tiempo. Para seleccionar H dos elementos, necesitamos pasar H dos y para seleccionar H tres elementos, nuevamente, necesitamos pasar H tres. Ahora dentro del color ss, voy a usar la propiedad CSS que está coloreada. De color rojo. Si subo este archivo, se puede ver el resultado. Cambió todo tipo de color de rumbo de nuestro gusto uno D. Pero el problema es que necesitamos escribir tres líneas de código, y ahora voy a convertirlo en un liner usando su selector Psitoglass Déjame mostrarte cómo. De nuevo, voy a escribir nuestro nombre de identificación, probar uno. Prueba uno. Entonces tenemos que usar es selector de positro. E. Luego dentro de los versos redondos, necesitamos seleccionar el nombre del elemento. Nuestro primer elemento es H uno. Nuestro segundo elemento es H dos, y nuestro tercer elemento es H tres. Luego dentro de los colses, podemos seleccionar nuestra propiedad, y nuestra propiedad es de color Y esta vez, voy a usar el color verde. Si configuro este archivo, puedes ver el resultado. Básicamente, anula nuestra antigua propiedad con una nueva. Si comento toda esta sección y vuelvo a configurar este archivo, se puede ver el mismo resultado. Ahora, no necesitamos escribir nuestro nombre de identificación varias veces. Sólo tenemos que usar es Po selector cero. Ahora, déjame mostrarte otro ejemplo. Para eso, voy a agregar otra etiqueta de encabezado fuera de la etiqueta profunda, H uno, y voy a escribir fuera de encabezado. Y voy a poner este archivo. Como puedes ver, tenemos etiqueta de rumbo dentro gusto uno Dev, prueba dos Dev y fuera DD. Ahora, decido que quiero seleccionar esta etiqueta de encabezado, que está dentro del sabor uno y sabor dos. No quiero seleccionar el exterior. Para eso, voy a duplicar esta sección y esta vez, necesito amarrar es necesitamos usar vestido redondo. Entonces dentro de los vestidos redondos, necesitamos pasar el nombre de identificación. Hashtag prueba uno. Prueba una coma hashtag sabor dos. Después de eso, quiero seleccionar solo encabezado una etiqueta. Voy a quitarme estos vestidos redondos y voy a escribir H uno. Esta vez quiero color rosa. Después de configurar este archivo, se puede ver el resultado. Este es el segundo método que podemos utilizar es Positroselector Es así como podemos seleccionar el rubro particular que ha venido del sabor uno y el sabor dos. Pero si no eres fácil, como puedes ver, no puede seleccionar el rumbo exterior. Ahora voy a mostrarte otro ejemplo. Aquí voy a crear un selecto complejo. Para eso, voy a usar Es Posidoseleccionado al tiempo. Supongamos que quiero seleccionar todo el párrafo, que es del gusto uno y pegar dos. Para eso, nuevamente, necesitamos usar es Posidoselected. Entonces voy a duplicar esta sección y comentar esta sección. Y aquí voy a amarrar alquitrán E. Luego en la ronda resiste, voy a seleccionar los elementos, que es H uno, coma, y párrafo P. Si configuro este archivo, ahora se puede ver el resultado Ahora se puede ver con el encabezado, también aplicó color en nuestros párrafos. Y ahora les voy a mostrar nuestro otro ejemplo. En este ejemplo, te voy a mostrar cómo podemos usar Over selector con es Positoselector Para eso, voy a duplicar esta sección y comentar la sección anterior. Y voy a quitar esta. Y aquí quiero a Hober en nuestro párrafo. Entonces primero, necesitamos escribir el elemento, qué elemento quiero flotar Voy a escribir P. Entonces Colón, necesitará pasar el selector HoberPosito, que Y voy a poner este archivo. Después de que puse este archivo, si yo Ella mi Carr en este párrafo, se puede ver que cambió el color de la fuente Entonces así es como podemos usar Su selector con es PozioSelector Entonces estos son cuatro ejemplos diferentes que como podemos usar es el selector de posido Entonces gracias por ver este video. Estén atentos para nuestro próximo Tutorial. 17. CSS tiene pseudo-clase: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con otro Positoselector. En esta ocasión vamos a cubrir CSS tiene PosidoClass. Es otra nueva positoclase en CSS. Ahora vamos a tratar de entender qué es el hash PosidoGass. Para entenderlo correctamente, permítame mostrarle un ejemplo. Como pueden ver, hemos puesto dos elementos. Aquí tenemos ProTolt encabezando un elemento. Como puedes notar tanto el sabor dentro de esta etiqueta, hola mundo es el mismo. Pero en nuestra primera etiqueta de encabezado, aquí usamos la etiqueta span. Nos movemos mundo dentro de la etiqueta span, y ahora quiero seleccionar el elemento, cual tiene esta etiqueta span. En nuestro caso, nuestro primer H un elemento, esta etiqueta porque aquí usamos etiqueta span, pero en nuestro St. H un elemento, no usamos esta etiqueta span. Usando la etiqueta Span, vamos a seleccionar el elemento padre de esta etiqueta span. En nuestro caso, H una etiqueta. Es un selector padre. Se va a seleccionar el primer encabezado un elemento. Entonces, ¿cómo podemos usarlo? Hablemos de su sintaxis. Primero, tenemos que inclinar H uno, el elemento principal que quiero seleccionar, luego necesitamos escribir dos puntos, tiene. Entonces dentro del Rundss necesitamos pasar este elemento hijo En nuestro caso, span. Después dentro del Calviss puedes implementar las propiedades CSS Si hay etiqueta span dentro de la etiqueta de encabezado uno, entonces va a seleccionar la etiqueta de encabezado. De lo contrario, no va a seleccionar el elemento padre. Aquí, el elemento objetivo es H una etiqueta y dicho selector es span. Entonces dentro de los calivs puedes aplicar cualquier propiedad CSS. En nuestro caso, aquí aplicamos toma decoración subrayado. Y va a agregar este subrayado en nuestra primera etiqueta H one Entonces comencemos la práctica y veamos cómo podemos aplicarla. Entonces como pueden ver lado a lado, abrí mi editor de código de Visual Studio y mi navegador usando la extensión de servidor light, y ya creé TML nombre de documento index dot TML Ahora, puedes ver en nuestra etiqueta corporal, aquí tenemos prot dos H una etiqueta, pero en nuestra primera etiqueta H una, tenemos etiqueta Span para esta palabra mundo Y también tenemos etiqueta de dos párrafos. Y en nuestra etiqueta de primer párrafo, aquí usamos palabra negrita, B, etiqueta negrita, esta. Pero en nuestra etiqueta de segundo párrafo, aquí no usamos ningún elemento hijo. Ahora vamos a saltar a esta sección de estilo. Aquí, voy a escribir etiqueta de estilo. Estilo. Dentro de esta etiqueta de estilo, quiero seleccionar solo esta etiqueta de encabezado que tenga el elemento hijo span. Para eso, necesitamos escribir H un colon. Entonces tenemos que usar hash p clase cero tiene. Entonces dentro de la resis redonda, aquí necesitamos escribir nombre del elemento hijo. En nuestro caso, span. Entonces dentro del Cariss podemos usar la propiedad CSS como si atara color, así que voy a cambiar el color de fuente de este encabezado uno y quiero que sea rojo Después establece este archivo, podrás ver el resultado. Usando la etiqueta child, span, aquí seleccionamos el elemate padre la misma manera, puedes seleccionar la etiqueta de párrafo porque en esta etiqueta de párrafo, ella usa bool tag dentro de ella, B. Voy a conseguir esta sección y esta vez, quiero seleccionar la etiqueta de párrafo, P aquí voy a buscar la etiqueta B, negrita, y voy a configurar este archivo Después de configurar este archivo, se puede ver el resultado. No sólo eso, aquí podemos pasar múltiples etiquetas a la vez. Supongamos con etiqueta bool, quiero buscar etiqueta span, y aquí voy a agregar etiqueta span, span Y dentro de la etiqueta span, voy a poner esta palabra. Si configuro este archivo, entonces va a aplicar el mismo CSS en nuestro segundo párrafo. Déjame mostrarte. Supongamos que establece este archivo, puedes ver el resultado. Ahora la pregunta es ¿por qué? Porque como te dije, aquí podemos pasar múltiples etiquetas. Ahora va a buscar en esos párrafos que tienen etiqueta B dentro de él y span tag dentro de él. Es por eso que selecciona etiqueta de varios párrafos. Ahora, permítanme asignar una clase a esta etiqueta de párrafo. Clase y HendTyo. En nuestro segundo párrafo, voy a añadir una identificación. ID dos. Con eso, también, voy a usar la clase uno. Voy a satisfacer. Ahora, voy a seleccionar el párrafo, lo contrario elementos usando su nombre de clase. Aquí apuntamos al elemento usando tag name, pero esta vez vamos a apuntar al elemento usando class name. Sí, podemos hacerlo usando esta clase de Posido. Déjame mostrarte cómo. Entonces aquí escribimos uno, Colin hash. Dentro de este selector posidoClass, quiero apuntar a la etiqueta span span. Después dentro del receso de color, voy a usar propiedad, texto, decoración, subrayado Además, voy a asignar la misma clase en nuestra primera clase de etiqueta H one, y voy a aprobar una. Ahora bien, si pongo esta pila, aquí se puede ver el resultado. Ahora puedes ver que son esas clases las que tienen la etiqueta span child. Aquí puedes ver aquí usamos mismo nombre de clase en tres etiquetas, H una etiqueta o etiqueta de primer párrafo, y en nuestra etiqueta de segundo párrafo, usamos el mismo nombre de clase, uno, uno, pero en nuestro primer párrafo, no tenemos la etiqueta de gasto dentro de ella. Por eso no lo seleccionamos. Pero en nuestro segundo párrafo, tenemos esta etiqueta de pluma dentro de él. Por eso selecciona este párrafo y de subrayado. la misma manera, selecciona la primera etiqueta H una porque en esta etiqueta H una, tenemos esta etiqueta pan. Entonces así es como podemos usar esta clase poseido. Y recuerda, también podemos aplicar selección anticipada dentro de él, como selector directo hijo, y muchos más. Pero no voy a mostrarlo todo en este tutorial. Pero déjame mostrarte un selector avanzado. Entonces aquí, amtype deep tag, DV dentro de esta etiqueta profunda, sección amotype Y dentro de esta sección, voy a poner nuestro primer elemento profundo. Entonces aquí, voy a atar otra etiqueta profunda. Dentro de esta etiqueta profunda, aquí, voy a pasar nuestro segundo elemento dip. Voy a mover este elemento dentro de esta etiqueta profunda. Ahora voy a cont out toda la selección voy a guardarla Después de eso, aquí, voy a usar selectron infantil directo Aquí puedes notar tanto en el elemento deep, tenemos la etiqueta H one. Pero en nuestro primer elemento, aquí usamos sección antes de la etiqueta H one. Ahora, vamos a crear una selección de pasito de has. Así que escriba D hash de punto y coma. Dentro del receso redondo, voy a escribir H uno. Entonces dentro de la Caris aquí voy a cambiar el color de fondo, tipo fondo rojo Ahora, como pueden ver, ambos elementos profundos tenían la misma etiqueta H una, pero quiero seleccionar aquellos elementos profundos que tienen selector directo hijo, directo hijo h una etiqueta, como esta. Como puedes ver, en nuestro primer elemento div, después de esta etiqueta dip, tenemos etiqueta de sección. Pero en nuestro segundo elemento div, tenemos directamente H una etiqueta. Entonces aquí, voy a usar dichl Selector, éste, y voy a configurar este archivo Después de configurar este archivo, aquí se puede ver el resultado. Aquí seleccionamos este segundo elemento dip porque dentro de él, tenemos el selector hijo directo H una etiqueta, pero en nuestro primer elemento div, tenemos etiqueta de sección, luego tenemos H una etiqueta. Por eso selecciona éste. Entonces así es como podemos usar Hash Persio Selector. Creo que ahora está claro para ti. Gracias por ver este video Di sintonizado para nuestro próximo Tutorial. 18. Pseudoelementos en CSS Parte 1: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS avanzado. Y en este tutorial, vamos a aprender el elemento poseto CSS En nuestro tutorial anterior, aprendemos gafas CSS poseido En nuestro tutorial anterior, ya sabemos que tenemos que decir qué tipo de categoría de selector CSS. Selector simple, selector combinador, selector de atributos, Busudoglasses y selector de elementos posto y Ya cubro todos estos en nuestro tutorial anterior, excepto el elemento posteto Así que hoy en este tutorial, voy a cubrir el elemento posito Veamos qué tipo de elementos positivos tenemos. Como puede ver, tenemos un total de seis tipos de elementos posito arriba, primera letra, primera línea, selección y carpeta de lugar Y en este tutorial, voy a cubrir solo los cuatro selectores, primera letra, primera línea, selección y marcador Y vamos a aprender arriba y antes en el siguiente tutorial. Entonces, sin perder el tiempo, comencemos la práctica. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión if server, y ya creo un documento de estimación llamado index dot HTML. Y nuestro documento de estimación empieza con un párrafo y Adalis luego otra vez un párrafo Entonces voy a aplicar primera letra y primera línea en estos párrafos. Entonces comencémoslo. Entonces quiero seleccionar el párrafo hijo tipo elemento nombre P. Entonces voy a usar colon seno, pero necesitamos usar colon seno dos t. Para los elementos positivos, necesitamos usar dos t. Entonces quiero seleccionar la primera letra, tipo de convocatoria, primera letra Dentro de los calibrados, voy a usar una propiedad en color Color y. Además, voy a aumentar el tamaño de la fuente. Tamaño de fuente. Aquí lo voy a decir 32 píxeles. Paso arriba este archivo, se puede ver el resultado. Como puedes ver en nuestra página web, aplicó esta primera letra CSS de este Panagrama Cambió el color de fuente de esta carta. A medida que aumenta el tamaño carta. la misma manera, si quieres seleccionar el elemento AI de primera letra para eso, solo necesitas reemplazar P con AI y este este archivo. Paso arriba este archivo, se puede ver el resultado. Este es el uso del elemento de primera letra. Ahora, hablemos de nuestro segundo elemento, que es la primera línea. Para eso, voy a fechar esta sección y comentar la sección anterior. Y aquí voy a empatar, voy a seleccionar el párrafo P, y también voy a empatar primera línea. Si configuro este archivo, puedes ver el resultado. Aquí puedes verlo aplicar este estilo, la primera línea de este párrafo. Ahora, hablemos de nuestro siguiente selector de elementos, que es la selección. Esto se introduce en CSS tres. Veamos cómo podemos usarlo. Primero voy a comentar esta sección y después me di cuenta de ésta. Si notas, puedes ver, cada vez que seleccione mi párrafo, puede ver que nuestro color de texto se vuelve blanco y el color de fondo se vuelve azul. A esto se le llama selección. Si desea cambiar el color de fondo, de lo contrario, cualquier propiedad después de la selección, entonces puede usar este selector de elementos. Déjame mostrarte cómo así primero, voy a seleccionar el elemento P. Después Clal colon, voy a escribir selección. Selección y dentro de las prensas redondas, nuestra primera propiedad es fondo. fondo y el color de fondo es rojo, y nuestra segunda propiedad es el color. Color, ¿por qué? Si configuro este archivo, molesto este archivo, si configuro este elemento de párrafo, como pueden ver, ahora nuestro color de fondo se vuelve rojo y el color del texto se vuelve blanco. Se trata de un elemento de selección de usuarios. Pero si selecciono la etiqueta LI, entonces no es trabajo. Decido aplicar el CSS de selección a toda esta página web. Para eso, solo necesitas eliminar el nombre de la etiqueta P, necesitas usar la selección de codones de colon. Ala este archivo. Si selecciona las etiquetas de párrafo y LI, puede ver el resultado. Como puedes ver, aplica fondo rojo y color de texto blanco. Este es nuestro trabajo de elementos de selección. Ahora, hablemos de nuestro último elemento positivo, que es más antiguo. Para eso, voy a duplicar esta sección. Y comente la sección anterior. Voy a establecer este archivo. Básicamente, el marcador de posición funciona con un establo de. Por eso abrí mi anterior estable Dpment que es mesa frontal de puntos, y ya estás familiarizado con este establo de Como puedes ver en esto desde, no tenemos ningún marcador de posición en este fro, aquí voy a agregar un En nuestra sección de entrada de nombre, aquí voy a usar un marcador de posición, y voy a escribir Introduce tu nombre Del mismo modo, voy a agregar el marcador de posición en nuestra sección de apellido Entonces voy a copiar el marcador de posición y teclearlo aquí y colocarlo aquí y Hemo escriba ingrese su apellido Además, voy a añadir un marcador de posición en nuestra sección. Entonces voy a escribir placeholder y aquí voy a pasar 15 y voy a configurar este archivo Después de configurar este archivo, puede ver el marcador de posición en nuestra etiqueta de entrada Y cada vez que trato de llenar cualquier entrada, elimina nuestro marcador Este es el uso de marcador de posición. Ahora quiero darle estilo a este marcador de posición. Para eso, necesitamos escribir comodín de dos puntos, y luego dentro de los calibrados, voy a aplicar el CSS Color y quiero color rojo. Después de que paso este archivo, se puede ver el resultado. Se aplica color rojo todo el texto marcador de posición. Espero que ahora te quede claro, ¿ cuál es el uso del marcador de posición En el siguiente tutorial, voy a subir y antes del selector de elementos. Gracias por ver este video, estad atentos para nuestro próximo tutorial. 19. Antes y después de los pseudoelementos en CSS: Si. Oigan, chicos, me alegro de volver a verles. Este es el segundo tutorial relacionado con el selector de elementos CSS, y en este tutorial, voy a cubrir repunte CSS antes En nuestro tutorial anterior, ya aprendemos sobre la primera letra, primera línea, la selección y el marcador En este tutorial, voy a encubrir y antes. Pero antes necesitamos aprender cómo funcionan realmente superiores y antes de Posidoelector En este documento, como puede ver, tenemos un párrafo. Ahora voy a darle estilo a este párrafo usando repunte antes Primero, voy a seleccionar el párrafo del nombre del elemento. Después colon colon. Voy a escribir antes. Esto es antes del selector de elementos. Entonces en el Cali versus nuestra primera propiedad es de fondo. Lectura de antecedentes. Con eso, también, voy a cambiar el color de la fuente. Color y el color es blanco. Voy a usar el HexaValuhTag FFA. Si configuro este archivo, no va a pasar nada. Ahora el cociente es cómo funciona realmente. Aquí puedes ver un párrafo. La mayoría de los desarrolladores piensan que Ara significa después la etiqueta de párrafo y antes significa antes de la etiqueta de párrafo. No, no es así. Antes significa el primer hijo de este párrafo. Hasta antes, entonces empieza nuestro párrafo. Antes es el primer hijo de este párrafo. la misma manera, atar es el último estilo de este párrafo. Cuando termine el contenido del párrafo, entonces viene el apta tang. Ambos elementos están dentro de la etiqueta de párrafo, no fuera de la etiqueta de párrafo. Veamos cómo podemos realmente usarlo. Pero antes de sumergirnos en él, debes saber usar upar y antes, necesitamos usar un contenido de nombre de propiedad csus Sin contenido, no podemos usar upturn antes de Clectrón. Dentro de este selector antes, voy a usar otra propiedad csus que es content Contenido. Aquí puedes pasar cualquier texto, cualquier imagen, cualquier URL, lo que quieras. Aquí quiero escribir un texto. Voy a usar códigos dobles y voy a escribir hola. Ahora bien, si configuro este archivo, se puede ver el resultado. Antes de comenzar nuestro párrafo, agrega esta palabra hola de la misma manera, voy a crear selector superior. Voy a duplicar esta sección y voy a escribir superior. Dentro del curso Doble, voy a mecanografiar world. Si configuro este archivo, puedes ver el resultado. Al final de este párrafo, es un mundo. Redujamos el tamaño de la fuente. Aquí quiero escribir tamaño de fuente 30 pixel, y voy a configurar este archivo. Ahora puedes ver el resultado. Ahora bien, estos son todos elemento hijo de la etiqueta de párrafo. Básicamente, creamos dos elementos usando antes y después del selector. Y si quieres usarlo como elemento D, sí, puedes. Se puede establecer un ancho d alto a este elemento, etcétera. Voy a escribir esta jugada, bloque de visualización, y voy a usar la misma propiedad en nuestra sección superior. Esta obra de teatro, bla. Después de establecer este archivo, se puede ver el resultado. Ahora es en un Demin. Además, si quieres agregar altura y ancho, sí, puedes. Voy a escribir altura, altura, 100 pixel. Si configuro este archivo, puedes ver el resultado. Ahora, déjeme mostrarle otro ejemplo. Para eso, voy a comentar esta sección y también voy a quitar esta propiedad. Con eso, quiero usar el efecto Over. B, C y más. Si pongo este archivo, como pueden ver, esto es sólo un párrafo. Pero cuando abro el cursor sobre este párrafo, se puede ver el resultado. Como pueden ver, ahora aparece el elemento superior mundo y cada vez que me quito el cursor, ahora está desaparecido. Este es un buen ejemplo de superior poco select. Recuerda, puedes usar después y antes de los procedimientos seleccionados con cualquier etiqueta. Puedes usarlo con párrafo, etiqueta de anclaje, elemento profundo, cetera, lo que quieras Pero hay excepción. No se puede usar con etiqueta de imagen. Es necesario que recuerdes eso. Espero que ahora te quede claro. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 20. Tutorial de pseudoelementos de marcador: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con Advancess y en este tutorial, vamos a aprender un nuevo elemento posito, que se Ya estamos familiarizados con estos elementos posito después de la primera letra, primera línea, selección y marcador En esta lista, tenía un nuevo elemento positivo, que es marcador. Al principio, tratemos de entender cuál es el significado de eso. Aquí puedes ver en lista de pedidos y tenemos algunos nombres de alimentos en esta lista. Ahora quiero cambiar el color de estos puntos. ¿Qué solíamos hacer para cambiar el color de este punto? Simplemente asignamos un nuevo color a una etiqueta LI y llamamos a este marcador de proceso, pero no podemos separar el color del texto del color del marcador para resolver este tipo de problema, introdujo CSS, clase Marker Posido Empecemos lo práctico y veamos cómo podemos usar este nuevo elemento posito Como de costumbre, lado a lado, abro mi editor de código de estudio de resultados y mi navegador usando la extensión del servidor Lip, y ya creo un documento estable llamado index dot HTML. Como puedes ver en mi navegador, tenemos nwterlist y WADA list Además, tienes Lista de Guerra. Ahora quiero separar el color del marcador del color del texto. Para eso, necesitamos usar el marcador Posito selectord. Aquí voy a escribir marcador de colon colon. Entonces dentro del color resis, voy a decirlo color. Color y quiero decirlo color rojo. Si configuro este archivo, puedes ver el resultado en mi navegador. Aquí puedes ver en mi navegador, se han cambiado los colores del marcador. Cualquiera que sea el tipo menos que usemos, va a aplicarlo todos estos. Pero ahora decido que quiero cambiar el color del marcador de unwaters. Para eso, aquí voy a empatar UL unwaer east AI. Dentro de la lista debajo todas las etiquetas LI, quiero aplicar el marcador selector poseido Si configuro este archivo, puedes ver el resultado. Ahora aplica el color del marcador, solo la lista inferior. Recuerda, por ahora, este selector de marcadores solo soporta una propiedad CSS, que es color. No se puede aumentar el tamaño del marcador con este selector. A lo mejor podría apoyar en el futuro. Esto es para este tutorial. Gracias por ver este video, estad atentos para el siguiente tutorial.