Guía completa de CSS (incluye animación, Flexbox, cuadrícula y Sass)

1. Introducción a la clase: Hola, y bienvenidos. Mi nombre es Jet Shokar Soy Full Stack Web Developer, freelancher e instructor online Y bienvenidos a Webcourse CSS Complete Guide. Este es el curso más completo, bien organizado y amigable para principiantes para desarrolladores web que quieran aprender CSS. No te voy a explicar por qué CSS es importante. Porque estás aquí, ya lo sabes. Por lo que este es uno de los cursos más completos sobre CSS. Aquí puedes aprender sobre animación CSS, flexbox, codicia y SAS Hasta el día de hoy, ya subo 19 horas más contenido. Además, viene con 171 videos Lista. Vamos a comenzar con conceptos básicos sobre CSS, como color de fondo, borde, contorno, relleno, etcétera A continuación, vamos a aprender todas las propiedades del texto, todo tipo de propiedades de fondo. Vamos a aprender sobre el diseño CSS como la propiedad de visualización, la visualidad, el índice Z, la posición, media queries, estable, etcétera Además, vamos a aprender sobre las unidades CSS, funciones, variables y muchas más. Después de eso, vamos a saltar a la sección de selector avanzado. Sí, vamos a aprender CSS advance selector, como combinator selector, attribute selector, positoselector, y Y luego cubro algunos temas avanzados de CSS, como regla de entrada, comportamiento de desplazamiento, relación de aspecto, color de ascenso A continuación, vamos a aprender animación CSS. Entonces vamos a saltar a la grilla CSS, CSS ex box, y por fin, vamos a cubrir el preprocesador CSS Vamos a aprender CS. Como te dije, este es el curso más completo sobre CSS. Y si quieres interesarte aprender CSS en detalle, entonces podemos comenzar nuestro viaje desde la siguiente lección. Muchas gracias. 2. Qué es CSS: Hola, amigos, bienvenidos. A partir de este tutorial, vamos a iniciar CSS tres. Este es el primer tutorial relacionado con CSS, y en este tutorial, te voy a dar la introducción de CSS. El nombre completo de CSS es Cascading Style Sheet. Y utilizamos hoja de estilo en cascada que DML. Sin TML, no es tan útil. Primero, necesitas crear una estructura TML, luego necesitas usar CSS para darle estilo a las estructuras Ahora podrías tener cociente por qué aprendemos CSS. El uso básico de CSS es diseñar las etiquetas TML. Supongamos que tomas cualquier etiqueta de párrafo , de lo contrario, creas Davil de otra manera, cualquier etiqueta profunda, y ahora quieres sentir color a estas etiquetas, de lo contrario, dando padding, merging, border, etcétera, podemos hacer Podemos hacer todo tipo de estilismo en nuestra etiqueta ATML con CSS. Simplemente creamos estructura usando ASTML y manejamos esta parte de estilo usando CSS Y a continuación utilizamos CSS para el sitio web responsive. Sitio web receptivo que presenta CSS tres. Ahora podrías tener ion, ¿qué es el sitio web responsive? Supongamos que crea un diseño de sitio web para resolución de escritorio, y luego desea abrir el mismo sitio web en su tableta y móvil. En ese caso, CSS va a jugar el papel clave. Va a cambiar tu diseño de diseño acuerdo a la resolución del dispositivo. Y el tercer uso más importante del CSS es la animación en la página web. Usando CSS tres, puede animar cualquier estructura TMS, y el cuarto uso importante de CSS dos D y tres D transformación de elementos AT Puedes rotar el elemento, puedes cambiar la perspectiva. También se puede jugar con índice Z, etcétera. Y el cuarto punto importante es, es hacer que nuestro proceso de desarrollo web sea muy rápido. Ahora podrías haber empatado cómo hizo que nuestro sitio web fuera muy rápido. Déjame mostrarte. Entonces aquí puedes ver, tenemos un archivo CSS en el centro, y alrededor del archivo CSS, tenemos búsquedas totales Documento estable, como como página principal Página exterior, página de contacto, galería, etcétera Así que ahora podemos darle estilo a todo el documento TML, lo contrario, todos los archivos de estimación del único archivo CSS Si notas algún sitio web, su encabezado, su pie de página, su barra lateral, todo queda exactamente igual. Solo para cambiar el contenido dentro de la página. Supongamos que desea cambiar el color de fondo de su sitio web. Quieres usar el color de fondo rojo en tus páginas web. Para eso, solo necesitas cambiar una vez en tu archivo CSS. Una vez que cambies el color de fondo en el archivo CSS, se va a reflejar en cada documento TML Pero si quieres hacerlo sin CSS, para eso, necesitas usar color BG en tus etiquetas TML, y necesitas hacer lo mismo en tu archivo ETML por seis veces Uno por uno, necesitas abrir todo el documento TML y necesitas cambiar el color de fondo Y es un proceso muy largo e irritante. Ahora, hablemos de qué tipo de software necesitamos para aprender CSS. Básicamente, necesitamos t dos software, un editor CSS y un navegador. Para eso, puedes usar cualquier editor TML, como Note plus plus, código Visa studio, atom, etcétera Básicamente para este tutorial, voy a usar Vs code Editor. Pero depende de ti qué editor vas a elegir. Entonces esto es para este tutorial. Así que gracias por ver este video, estén atentos para el siguiente tutorial. 3. Tutorial de implementación de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS tres. Y en este tutorial, vamos a aprender cómo podemos implementar CSS en nuestro documento STbl Básicamente, tenemos total de tres vías para implementar CSS con un estable. La primera y más sencilla forma es el estilo inline. Usando el estilo inline, puedes usar CSS directamente en tus etiquetas estables. Solo necesitas asignar atributo de estilo en tu etiqueta estable. Y el segundo método es la etiqueta de estilo Impage. Dentro de su documento de tabla, puede usar la etiqueta de estilo para implementar el CSS. Y en la tercera forma, puedes crear una hoja de estilo externa para tu código CSS. Este es el método más popular y efectivo. Aquí, necesitamos crear un archivo CSS separado, y vinculamos este archivo con etiquetas estables. Ahora intentemos entender qué es el método de estilo Inland, cómo podemos usar el método de estilo Inland. Como puedes ver en este ejemplo, tenemos encabezado una etiqueta, y dentro de este encabezado una etiqueta, tenemos un texto. Bienvenida. Y ahora quiero cambiar el color de fuente de este texto. Para eso, vamos a utilizar el método de estilismo Inland. En primer lugar, tenemos que usar atributo de estilo dentro de este encabezado una etiqueta. Entonces necesitamos asignar la propiedad CSS, en nuestro caso, color, y luego necesitamos proporcionar el valor y el valor es verde. Y si notas, como puedes ver, separamos propiedad y valor usando colon seno, y terminamos nuestra línea con punto y coma la misma manera, si quieres agregar otra propiedad, sí, puedes, algo así. Supongamos que desea aumentar el tamaño de la fuente. Para eso, necesita usar esta propiedad, tamaño de fuente, dos puntos, y debe proporcionar el valor, que es de 15 píxeles. Entonces este es el método de estilo en línea. Usamos código CSS directamente en nuestra etiqueta EstaML. Ahora se podría pensar que este es el buen proceso, pero no lo es. Vale la pena cuando tienes poca cantidad de etiqueta EstaML porque cuando tienes mucha etiqueta estable, entonces no es posible darle estilo a toda la etiqueta una por una Sí, puedes, pero no es un buen hábito. Porque siempre que necesite cambiar alguna propiedad o un valor, entonces es muy difícil averiguar la propiedad. Además, crea nuestra página muy larga y más pesada. Y para resolver este problema, puedes usar la etiqueta de estilo Impage Como puede ver en este ejemplo, esta es la estructura básica de la tabla. Si te gusta ir en la etiqueta de estilo Impage, entonces necesitas usar la etiqueta de estilo dentro de la etiqueta de la cabeza Ahora podemos usar toda la propiedad CSS dentro de la etiqueta style. Y una cosa importante que debes recordar, puedes usar etiqueta de estilo en el interior de la etiqueta de la cabeza , no en ningún otro lugar. Entonces dentro de esta etiqueta de estilo, necesitamos tomar un selector, algo así. Supongamos que desea seleccionar esta etiqueta de encabezado y desea cambiar el color de fuente. En ese caso, debe apuntar a esta etiqueta de encabezado usando su nombre de etiqueta, H uno. Entonces dentro del Caliss se puede utilizar propiedad y valor. Ahora va a aplicar color verde a toda la etiqueta de encabezado uno. Si tienes múltiples encabezado una etiqueta, va a seleccionarla toda. Por ahora, en nuestra etiqueta corporal, solo tenemos una etiqueta encabezada una, pero este método también viene con una desventaja. Supongamos que tiene diez archivos estables, entonces necesita hacer lo mismo en cada uno de sus archivos estables. Entonces esta no es la mejor manera de implementar CSS. Ahora, hablemos del método más popular, que es la hoja de estilo externa. En este método, necesitamos crear un archivo CSS separado. Entonces para crear este archivo CSS, necesitamos definir propiedad y valor usando el selector LPOP Supongamos que aquí creamos un archivo CSS, estilo punto CSS. Para crear el archivo CSS, necesitamos usar esta extensión punto CSS, y luego necesitamos vincular el archivo CSS con nuestro documento Tamil. Dentro de la etiqueta de la cabeza, aquí necesitamos usar la etiqueta Link. La etiqueta de enlace se usa especialmente para este propósito. Se utiliza para vincular documento CSS. Dentro de la etiqueta de enlace, necesitamos usar algún atributo. Nuestro primer atributo es RL. RL significa hoja de estilo de relación. Entonces necesitamos declarar el tipo de este archivo, que es texto CSS. Significa que el formato de archivo es texto y el estilo es CSS. Y este es el atributo más importante, que es HRF. En este atributo, necesitamos proporcionar la ruta del archivo. HREF significa referencia de hipervínculo. Y aquí hay que proporcionar el nombre de archivo exacto, de lo contrario, la ruta del archivo Entonces este es el mejor método para usar CSS. Mediante este método, podemos conectar un archivo CSS con múltiples documentos EstiML Entonces esto es todo para este tutorial. En nuestro próximo tutorial, vamos a aprender de ello prácticamente. Entonces gracias por ver este video, Estatua. 4. Tutorial de color y color de fondo de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS tres. Y en este tutorial, vamos a aprender sobre la propiedad de color CSS y el color de fondo. Usamos la propiedad de color para cambiar el color del texto, y para cambiar el color de fondo de cualquier elemento, usamos el color de fondo. Podría ser cualquier etiqueta de tamal. Sería un párrafo, etiqueta profunda, mesa, etcétera Entonces, sin perder el tiempo, comencemos la práctica. Como pueden ver, lado a lado, abrí mi editor de código de Visual Studio y mi navegador usando la extensión del servidor Lip, y ya creé el documento TM llamado index dot TML Como puedes ver en nuestra etiqueta corporal, tenemos una etiqueta de rumbo. Y en esta etiqueta de encabezado, aquí escribimos, hola mundo. Si notas, puedes ver en mi navegador, por defecto, el color es negro. Ahora quiero cambiar el color extraño. Para eso, aquí voy a usar el método CSS inline. Así que aquí voy a escribir style, style attribute, entonces quiero usar esta propiedad CSS llamada gaviota Color, y quiero asignar rojo color rojo. Si configuro este archivo y aprendo mi navegador, puedes ver el resultado. Ahora puedes ver que cambió el color de fuente de este texto. Aquí puedes tomar cualquier nombre de color. Supongamos que desea color verde, para escribir nombre de color. Y luego solo configuras este archivo, y podrás ver el resultado en mi navegador. Y recuerda, podemos usar diferentes colores formateados Vdo. Podemos usar hexavalu argv value, argv value et cetera argv value et cetera Si buscas color websp, déjame mostrarte y abrir cualquier página Aquí puedes ver el valor xa de este color. Con eso, también aporta valor RGV. Esto se llama valor xA y esto se llama valor argv. Si copio este valor y rasgo este verde con este número xa y luego configuro este archivo y vuelvo a documento, ahora puedes ver el resultado. Convierte nuestro color de fuente en color verde claro y apenas es visible. Entonces cambiemos el color. Esta vez, voy a usar este color de tonalidad rosa. Entonces voy a copiar este valor hexa. Y voy a sustituir este valor hexa por él. Después de reemplazar el conjunto el archivo y volver al documento, ahora se puede ver el color. Recuerda, hexavalu vienen con siempre dice código de dígitos, pero empieza con una etiqueta sine Como te dije, CSS soporta formato de múltiples colores. Admite colores Hixadcimal, colores decimales ixa con transparencia, colores RGB, colores RGBA, colores HSL, colores decimales ixa con transparencia, colores RGB, colores RGBA, colores HSL, colores HSLA. Vamos a aprender sobre todo en nuestros próximos tutoriales. Pero para este tutorial, voy a usar hexa Valu de otra manera nombre de color A continuación, voy a crear un párrafo, P. Y dentro de este párrafo, voy a añadir algún texto ficticio Entonces voy a escribir Loren. 20. Básicamente, va a agregar 20 palabras de párrafo con texto ficticio Y voy a poner este archivo. Después de configurar este archivo, se puede ver el párrafo en mi navegador, pero voy a duplicar este párrafo. Entonces voy a seleccionar este párrafo y dubigating. Al principio, voy a configurar este archivo, y después voy a cambiar el color de fuente del párrafo. Entonces este es nuestro primer párrafo. Entonces para cambiar el color de fuente del párrafo, aquí voy a usar el método Ilenss Así que para escribir atributo de estilo, y quiero aplicar color. Color y quiero color verde. Paso este archivo, se puede ver el resultado. Y también, quiero agregar un color de fondo a este párrafo. Para eso, después del semicolor aquí necesitas escribir color de fondo Y quiero color de fondo lou y voy a configurar este archivo. Ustep este archivo, como puedes ver, agrega un color de fondo a nuestro primer párrafo, y yo voy a hacer lo mismo a nuestro segundo párrafo Entonces copio el atributo con valor y propiedad. Y también, voy a pegarlo en nuestro segundo párrafo. Y esta vez, voy a usar otro color. Esta vez para fondo, voy a usar el color rojo. Y para el color aficionado, quiero usar el color blanco. Después de configurar este archivo, se puede ver el resultado. Usando la propiedad de color de fondo, podemos cambiar el color de fondo de cualquier elemento, y usando la propiedad de color, podemos cambiar solo el color de fuente, y debes recordarlo. Y ahora decides que quieres resaltar esta palabra constructora desde el primer párrafo. Para eso, necesitas usar la etiqueta Span. Necesitas mover esta palabra dentro de la etiqueta span. Déjame mostrarte cómo. Así que aquí, necesitas usar la etiqueta span. Se escupió. Y dentro de la etiqueta span, hay que mover esta palabra, de lo contrario la oración. Y luego necesitas tamizar y para resaltar esta palabra, decides que vas a cambiar el color de fondo de esta palabra Para eso, de nuevo, hay que tomar atributo de estilo. Estilo y otra vez, necesitas usar la propiedad de color de fondo. Color de fondo, y esta vez quieres fondo verde. Verde. Si configuro este archivo, puedes ver el resultado. Pero hay un problema. Tu color de fuente y tu color de fondo es el mismo. Por eso ahora tu fuente no es visible. Para eso, decides que vas a cambiar el color de la fuente ahora. Vas a cambiar el color de fuente de esta porción, constructor. Entonces aquí, puedes usar la propiedad de color. Color, y tú decides que vas a usar el color blanco. ¿Por qué? Después de paso este archivo, ahora se puede ver el resultado. Entonces así es como puedes usar color y las propiedades de color de fondo. Básicamente, en este tutorial, utilizamos en el método Lentes. En el siguiente tutorial, vamos a aprender sobre selectores básicos Entonces gracias por ver este video, Estatuto para el siguiente tutorial. 5. Tutorial básico de selectores de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS tres. Y en este tutorial, vamos a aprender selectores básicos CSS Cuando trabajamos con el método impage, lo contrario el archivo CSS externo, entonces los selectores básicos son muy útiles y no es útil para los métodos de estilo en línea Entonces veamos cuántos tipos de selectores básicos tenemos. Tenemos un total de tres tipos de selector básico. Podemos seleccionar elemento por nombre de etiqueta, por nombre de clase y por nombre de ID. Ahora, veamos cómo podemos seleccionar elemento por nombre de etiqueta. Este es el ejemplo del selector de nombre de etiqueta. Podemos seleccionar el elemento usando un nombre de etiqueta estable. Supongamos que quiero seleccionar todas las etiquetas de encabezado en nuestra página web. Para eso, solo para escribir H uno, entonces necesitamos usar Cariass Va a seleccionar toda la etiqueta de encabezado en tu página web. De igual manera, si quieres seleccionar la etiqueta de tabla, de lo contrario , etiqueta profunda, solo necesitas poner el nombre y luego necesitas usar Cariss Después dentro de los cálices, puedes pasar tu propiedad y lo harás Supongamos que desea asignar color de fuente rojo a su encabezado una etiqueta con la que desea establecer el tamaño de fuente, 15 píxeles. Entonces tenemos que pasar esta propiedad y valor dentro de la clase. Este método se llama selector TagNem porque aquí usamos las etiquetas estabal para apuntar al Pero hay un pequeño problema con este selector. Si tienes múltiples etiquetas de tabla, de lo contrario, múltiples etiquetas profundas en tu página web, en ese caso, va a aplicar todas las propiedades a toda esta etiqueta profunda. Ahora hablemos de nuestro siguiente selector básico, que es el selector de clases. Como te dije, supongamos que tenemos múltiples H una etiqueta, pero no quieres aplicar esta propiedad todo op. En ese caso, puede usar el selector de nombre de clase. Para ello, el selector de nombre de clase es muy efectivo. Entonces, cómo podemos usarlo, déjame mostrarte. Entonces como puedes ver aquí seleccionamos un encabezado de nombre de clase. Para seleccionar la clase, es necesario utilizar el signo de punto. Arriba un signo de punto, necesitas pasar el nombre de la clase. En nuestro caso, encabezado. Después dentro de los calres puedes usar tus propiedades CSS. Y para asignar esta clase en tu etiqueta TML, necesitas usar el atributo class Supongamos que aquí usa una etiqueta profunda, luego dentro de la etiqueta Dip, necesita usar el atributo class. Igual a dentro del doble curso, es necesario pasar el nombre de la clase. Puedes elegir tu propio nombre de clase cualquier cosa. Ahora bien, cualquier CSS que uses se va a aplicar solo en este elemento deep porque a este elemento deep le asignó la clase de encabezado. Ahora, hablemos de la especificación del nombre del selector de clases. Tenemos alguna limitación para usar Clases. Déjame mostrarte. Este es el primer método que puedes usar class. Y este es otro ejemplo que puedes usar class. Aquí puedes ver hasta punto, usamos un total de dos palabras, menos menú de guión Sí, puedes usar guión sinusoidal. Además, puedes usar asco sine. Con eso, también puedes usar estuche camel. Pero una cosa más importante que debes recordar, no puedes asignar, de lo contrario proporcionar ningún espacio entre dos palabras. Si usas espacio entre estas dos palabras, entonces en ese caso, no va a funcionar. Entonces hay que recordar esta cosa importante. Ahora, hablemos de otro selector, que es selector de ID. Es bastante similar con selectro de clase. Solo quiero usar HtagSign antes del nombre de ID. En nuestro caso, Hateg significa. Usando hastag nuestro CS va a identificar que es una identificación. Y este es el ejemplo de que cómo podemos usar el selector de ID. Como puedes ver, tenemos una lista ni, y en esta lista sin orden, asignamos un ID ID igual a mid para asignar este ID, necesitamos usar el atributo ID. Entonces ahora podrías tener duda. ¿Cuál es la diferencia entre el selector ID y CLS? El ID debe ser Q. Puede usar el selector de ID una vez en una página web. No puede usar el mismo ID varias veces, pero puede usar el mismo selector de clase varias veces. Si quieres usar miles de veces, sí, puedes. Ahora la pregunta es, ¿por qué es eso? Porque algunos elementos son creados por una sola vez. En una página web, no creamos una sección de encabezado varias veces. Lo creamos solo por una vez. Por eso usamos ID para eso. Básicamente ID asignar a este elemento una identidad única. Entonces esa es la diferencia básica entre ellos. Ahora, hablemos de algunos selectores descendientes. Es bastante avanzado y selector de siguiente nivel. Supongamos que tiene cientos de etiquetas Anca en su sitio web. Podría estar en cualquier parte de tu sección de encabezado, sección de contenido, sección de barra lateral, sección de pie de página, sección nebr, etc., pero quieres apuntar a esas etiquetas de gato que están dentro de la sección de encabezado De lo contrario elemento de cabecera. En ese caso, necesitamos usar este tipo de selector de anuncios. Este es el encabezado de selección padre, y como puedes ver, es un ID. Entonces quiero apuntar a toda esta etiqueta de anclaje, que está dentro de esta sección de encabezado. Entonces proporciono un espacio y objetivo y apunto al elemento ancla. la misma manera, si quieres apuntar a todo este párrafo, que está dentro del ítem de la lista, para eso, puedes usar este. Como pueden ver, esta es una clase, menos espacio, quiero apuntar a todo el párrafo que está dentro del elemento list. Y en nuestro último selector, apuntamos a esta etiqueta UL en particular, que tienen ID de menú. Luego proporciono un espacio y apunto toda la etiqueta LI que está dentro de esta etiqueta UL en particular. Sé que suena confuso. No te preocupes por ello. Esto apenas comienza. Ya creé capítulos particulares para estos selectores avanzados Ahora solo lo olvidé. No hace falta que recuerdes nada. Ni siquiera trato de recordar todas estas cosas. Cuando trabajamos con él, entonces lo buscamos. Esto es solo un video básico de introducción del selector CSS. Así que gracias por ver este video. Estén atentos para el siguiente tutorial. 6. Tutorial de frontera de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre la propiedad de borde CSS. ¿Por qué necesitamos usar la propiedad fronteriza? La frontera de CS tiene algunas propiedades. Nuestro primer nombre de propiedad es frontera con nuestro segundo nombre de propiedad es estilo borde, y nuestro nombre de tercera propiedad es el color del borde. Usando la frontera de CS con la propiedad, podemos controlar la frontera con. Podemos hacer que sea de dos píxeles, un píxel, de lo contrario 100 píxeles también. Y usando la propiedad de estilo de borde, podemos cambiar el estilo de borde. Podría ser punteado, discontinua, tenemos un total de diez estilos de borde diferentes, y lo vamos a aprender en este tutorial Y usando nuestra tercera propiedad, podemos asignar cualquier color a nuestra frontera. Déjame mostrarte un ejemplo de esta botella. Como pueden ver, tenemos un elemento profundo. Y en este elemento profundo, tenemos un párrafo. Pero fuera del párrafo, tenemos un borde rojo. Este es el ejemplo de frontera. Si quieres crear este tipo de borde, entonces necesitas establecer el borde con dos píxeles. Con eso, necesitas escribir estilo borde sólido. Este es un borde sólido. borde sólido le proporciona la línea recta, y nuestra tercera propiedad es el color del borde. Como puedes ver, nuestro borde es de color rojo. Entonces así es como podemos usar esta propiedad y crear un borde. Ahora, hablemos del estilo de borde. Como te dije, tenemos que diez diferentes estilos de frontera. CSS proporcionan un total de diez bordes. El primer borde es sólido. El segundo borde está punteado. Entonces ven das, luego doble. Siguiente, arboleda. Entonces hemos levantado frontera. A continuación, tenemos recuadro, luego afuera, ninguno y mezclar Entonces estos son el estilo de borde que vamos a aprender en este tutorial. Ahora hablemos de taquigrafía fronteriza. Como puedes ver en este ejemplo, aquí usamos total tres propiedad diferente de borde con estilo y color, pero no quiero usar tres líneas diferentes. Quiero hacerlo todas las cosas en una sola línea. Para eso, Cs border tienen taquigrafía, y este es el ejemplo de taquigrafía Solo necesitas escribir border property, y luego necesitas proporcionar los valores. Primero, debe proporcionar el ancho del borde. Entonces necesitas proporcionar el estilo de borde y, por último, debes proporcionar el color del borde. Ahora no necesitas escribir tres líneas diferentes para este trabajo. Ahora, hablemos de un tema diferente. Supongamos que desea asignar un borde solo al lado derecho. En ese caso, es necesario utilizar la propiedad de derecho fronterizo. Y si quieres usar solo bottom, lo contrario solo a la izquierda, entonces puedes usar estas propiedades. Entonces estas son todas las propiedades relacionadas con la frontera que voy a cubrir en este tutorial. Entonces, sin perder el tiempo, comencemos la práctica. Como pueden ver, lado a lado, abrí mi editor de código de Visual Studio y mi navegador usando la extensión del servidor lip, y ya creé un documento TML llamado index dot HTML Como puedes ver en esta página, voy a crear una etiqueta H one, etiqueta encabezado, y además tienes un total de dos párrafos. Ahora decido que quiero darle un borde a esta etiqueta de encabezado. Para eso, voy a usar el método de estilo Impage. Entonces dentro de la etiqueta de la cabeza, voy a usar estilo de etiqueta de estilo. Y dentro de esta etiqueta de estilo, primero, necesitamos seleccionar la etiqueta de encabezado uno. En nuestro tutorial anterior, ya aprendemos sobre algún selector básico. Aprendemos sobre el selector de impuestos. Entonces aquí, voy a usar un selector Stimaltax, que es H uno Entonces dentro del oliver dice, voy a usar propiedades fronterizas. Primero, voy a asignar frontera con propiedad. Frontera Bordeamos con, y quiero asignar borde de dos píxeles. Dos píxeles. Nuestra siguiente propiedad es el estilo de borde. Estilo de borde. Estilo de borde, y quiero borde sólido. Sólido. Y nuestra última propiedad es color de borde, color de borde, y quiero asignar borde rojo. Derecha. Después de establecer este archivo, se puede ver el resultado. Aquí puedes verlo agregar un borde rojo a la etiqueta de encabezado uno. Podemos usar la propiedad border en cualquier etiqueta Astb. Podría ser mesa, párrafo, etiqueta LI, lo que sea. Ahora, hagamos algún experimento con este valor. Supongamos que quiero aumentar el borde que Algunos escriba cinco píxeles. Si configuro este archivo, puedes ver el resultado. Aumentó el borde con hasta cinco píxeles. Ahora es muy visible. Y ahora te voy a mostrar diferente estilo de borde. Primero, te voy a mostrar estilo de borde punteado, algunos quitan sólido y tipo punteado. Después de paso este archivo, se puede ver el resultado. Este es el ejemplo del estilo de borde punteado. Ahora nuestro borde hecho con puntitos. Ahora, hablemos de otro estilo de borde, que es dash. Entonces voy a quitar punteado y escribir guión y establecer este archivo. Después de paso este archivo, se puede ver el resultado. Ahora nuestro borde hecho con guión. Siguiente frontera voy a aplicar, que es el doble. Va a proporcionar dobles fronteras. Duplique y establezca este archivo. Vamos a acercar el ritmo en un poco. Espero que ahora te quede claro. Ahora proporciona estilo de doble borde. Siguiente estilo de borde que voy a aplicar, que es groove. Si configuro este archivo, puedes ver el resultado. Vamos a hacer zoom el poquito fino. Entonces a esto se le llama estilo de borde de grupo. Si notas puedes ver que se ve como un marco de fotos. Básicamente, proporciona la pequeña vista de tres D, y el siguiente borde que voy a aplicar, que se plantea. Levantado y establecer este archivo, se puede ver el resultado. Es bastante similar con Group. Justo lo opuesto a la dirección de la luz. Siguiente frontera que voy a aplicar, que es recuadro. Si configuro este archivo, puedes ver el resultado. Básicamente, agrupados, levantados, recuadros, principio, tanto el estilo de borde proporcionan tres vista D. Estos efectos dependen del valor del color del borde. Ahora, hablemos de otro estilo de borde que no es ninguno. Como se puede ver, no hay frontera. Ninguno valor no define bordes. Nuestro siguiente y último estilo de borde es mix. Para mix no escribimos el nombre. Sólo para aportar los valores. Déjame mostrarte cómo. Aquí, primero, necesitamos proporcionar el valor máximo, luego el valor correcto, luego botón, luego levantar. Entonces en la parte superior, quiero borde punteado, punteado. A la derecha, luego proporciono espacio, y a la derecha, quiero frontera discontinua discontinua Y en el fondo, quiero botella sólida, sólida. Y a la izquierda, quiero botella doble. Doble. Si configuro este archivo, se puede ver el resultado diferente. Ahora este borde hecho con estilo de borde mixto. En la parte superior, tenemos borde punteado. A la derecha, tenemos frontera rayada. Al final tenemos doble frontera, y en el fondo, tenemos frontera sólida. Entonces así es como funciona el estilo de borde mixto. Ahora, hablemos del método taquigráfico, cómo podemos usar el método taquigráfico y escribir todas las cosas en una sola línea Entonces primero, voy a comentar todas las líneas, luego voy a escribir border property, border. Como ya le dije, al principio, tenemos que asignar la frontera con. Entonces voy a asignar a pixel border. Entonces necesitamos proporcionar estilo de borde, que sea sólido. Con eso, necesitamos proporcionar el color del borde. Y hasta el espacio, voy a usar boercolor verde Y voy a poner este archivo. Después de paso este archivo, se puede ver el resultado. Ahora no necesitamos teclear tres líneas para lograr este resultado. Podemos hacerlo con una sola línea. Ahora tú decides que no quiero bordear toda la dirección. Quiero bordear en la posición inferior. Para eso, necesitas usar diferente probidad fronteriza. Voy a comentar esta línea, y aquí, voy a escribir border bottom border bottom. Y quiero borde de tres píxeles. Con eso, quiero borde sólido, sólido, y nuestro color de borde es rayo. Si configuro este archivo, ahora se puede ver, ahora le asignó borde en la posición inferior. De igual manera, si quieres asignar borde en la posición correcta, sí, puedes, necesitas cambiar de propiedad. Ahora en tipo, borde, rack. Si configuro este archivo, puedes ver el resultado. Ahora le asignó frontera en la posición correcta. Y una cosa más importante de la que me olvidé hablar, que es el radio fronterizo. Supongamos que he cometido esta línea y quiero esta frontera. Por lo que descomento esta línea. Ahora, como pueden ver, tenemos frontera sólida. Pero si notas, los bordes son muy afilados. No quiero filo en mi frontera. Quiero que sea suave. Para eso, tenemos borde radio purpert Somer apretado, radio de borde, aquí voy a pasar, cinco píxeles Si pongo esta pila, ahora puedes ver ahora nuestros bordes de borde son curvos, y puedes controlar la carbonosidad de este borde si aumentas y de lo contrario disminuyes el valor Supongamos que esta vez voy a pasar 50 píxeles, radio de borde, 50 píxeles y establecer este archivo. Ahora se puede ver la diferente forma de este borde. Entonces, usando la propiedad de radio fronterizo, podemos controlar las edades fronterizas. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a hablar de esquema. Así que gracias por ver este video, estén atentos para el siguiente tutorial. 7. Tutorial de esquema de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vamos a aprender sobre el esquema CSS. ¿Cuál es el uso de la propiedad outline? Pero antes necesitamos aprender cuántas propiedades tenemos en bosquejo. Tenemos total para la propiedad de contorno, contorno con estilo de contorno, color de contorno y contorno opuesto. Como borde, tenemos diez estilos de contorno diferentes. Déjame mostrarte un ejemplo. Aquí puedes ver un elemento profundo. Y en este elemento profundo, tenemos un párrafo, y este es el fondo de este elemento profundo. Si digo valor de desplazamiento, y si asigno contorno de Oset a este elemento dip, déjame mostrarte entonces va a quedar algo así Aquí se puede ver otro borde fuera del borde rojo, y nosotros lo llamamos contorno. Básicamente, usamos outline para crear dos bordes diferentes. Ahora, si notas puedes ver, tenemos un espacio entre borde y contorno, y podemos asignar este espacio usando la propiedad de contorno oposite Y si hablo de estilos de contorno, tenemos estilos casi similares que tenemos en borde, guion punteado sólido doble tientas levantado inserción principio Ahora, hablemos de taquigrafía de esquema. Similar a la propiedad de borde CSS, el esquema de CS también tiene taquigrafía No necesitamos usar estas tres líneas para crear contorno, solo para escribir una línea, sino antes, solo para usar esta propiedad outline. Después del uso esquema de propiedad, tenemos que pasar toro tres valor. Primero, tenemos que pasar ala de contorno, luego tenemos que pasar el estilo y el color del contorno. Entonces así es como podemos usar taquigrafía. Entonces, sin perder el tiempo, estudiemos prácticas y veamos cómo podemos usar outline. Como de costumbre, lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión del servidor de labios, y ya creo un documento de estimación llamado index dot DML Entonces como puedes ver dentro de esta página estival, tenemos una etiqueta de encabezado uno También, tenemos que etiquetar el párrafo. Ahora, al principio, voy a asignar un borde a nuestra etiqueta de párrafo. Para eso, voy a usar etiqueta de estilo dentro del estilo de etiqueta de cabeza estilo dentro de la etiqueta de estilo. Primero, voy a seleccionar el párrafo usando la etiqueta P. Entonces dentro de los CarlsAsí que la primera propiedad nav es frontera. Borde, y quiero borde de tres píxeles, tres píxeles. Con eso, quiero sólido bot sólido. Además, quiero usar el color rojo. Si configuro este archivo, puedes ver el resultado en mi navegador. Ahora voy a crear esquema a este párrafo. Para eso, como te dije, primero, necesitamos usar la propiedad Outline With. Contorno con contorno con, y voy a usar tres píxeles. Nuestro siguiente nombre de propiedad es el estilo de esquema. Contorno, estilo, estilo de contorno, voy a usar sólido. Y nuestra última propiedad es contorno coloreado. Contorno, color, contorno coloreado verde. Y voy a poner este archivo. Arriba establece este archivo, aquí puedes ver el resultado. Aquí se crea un contorno fuera del borde, fuera del área fronteriza. Y si quieres cambiar el estilo de contorno como puedas, si quieres usar contorno punteado, puntearlo entonces podrás ver el resultado. Entonces así es como puedes usar contorno y borde juntos. Y si quieres proporcionar brecha entre contorno y borde, en ese caso, necesitas usar un esquema de nombre de propiedad opuesto. Déjame mostrarte algún tipo contorno opuesto, y voy a pasar el valor de tres píxeles, tres píxeles. Hasta configurar este archivo, se puede ver el resultado. Proporciona poca brecha entre contorno y borde. Si aumento el valor, entonces voy a pasar ocho píxeles y establecer este archivo, ahora se puede ver el resultado. Ahora la brecha entre contorno y borde es de ocho píxeles. Ahora, déjame mostrarte cómo podemos usar la taquigrafía para lograr el mismo resultado Para eso, voy a quitar toda esta línea. Y esta vez, necesitamos usar solo probabilidad de esquema. Esquema. Nuestro primer valor es el ancho del contorno, que es de tres píxeles. Nuestro siguiente valor es el estilo de contorno, y voy a usar sólido, y nuestro color de contorno es verde. Si configuro este archivo, puedes ver el resultado. Entonces así es como podemos usar la propiedad de acortar esquema. Y recuerda, podemos usar la propiedad de contorno en la etiqueta Atmel. Entonces esto es para este tutorial. En el siguiente tutorial, vamos a hablar de relleno. 8. Tutorial de relleno de CSS: Bienvenidos de nuevo, chicos, una vez más, estoy de vuelta con un nuevo tutorial relacionado CSS. Y en este tutorial, vamos a aprender sobre el relleno CSS. ¿Por qué el relleno es la parte más importante en CSS? Ahora, hablemos de cuántas propiedades tenemos en CSS padding. Tenemos total de cuatro propiedades relacionadas con CSS padding, padding top, padding right, padding bottom, padding let. Pero antes necesitamos entender cómo funciona básicamente el relleno. Como puedes ver en este ejemplo, dentro de este elemento profundo, tenemos un párrafo. Pero si te das cuenta, puedes ver, tenemos un espacio entre este párrafo y la frontera. Básicamente, hablo de esta brecha, y a esto lo llamamos relleno de brechas. De acuerdo con este ejemplo, la brecha entre borde y párrafo se llama paddy Podemos controlar el acolchado cada uno de los laterales. Supongamos que si quieres agregar el mismo relleno en todas las direcciones, en ese caso, puedes usar el mismo valor. Además, puedes usar la taquigrafía para eso, agregando diez píxeles. En ese caso, no es necesario escribir cuatro líneas para eso. Si proporciono relleno de diez píxeles, entonces va a asignar diez píxeles de relleno a cada uno de los lados. Pero, ¿y si usas diferentes acolchados en diferentes sitios para el relleno superior ?, usas diez píxeles. Por derecho, usas 20 píxeles. Para la parte inferior, usas 15 píxeles y para la izquierda, usas 25 píxeles. Para eso, también, puedes usar taquigrafía. Solo necesitas proporcionar un total de cuatro valores diferentes. Primero, debe proporcionar el valor máximo, luego debe proporcionar el valor correcto, luego el valor inferior y luego el valor libbed Entonces, sin perder el tiempo y para crear este tema, estudiemos la práctica. Entonces como puedes 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 creo un documento TML nombre índice punto TML como puedes ver dentro de nuestra etiqueta corporal, tenemos una etiqueta de encabezado uno Al principio, voy a crear una etiqueta Dip dentro de la etiqueta corporal. Entonces voy a escribir DIV, D. Y dentro de esta etiqueta dip, voy a asignar una etiqueta de párrafo, P. Y para párrafo, voy a escribir Loren y quiero agregar un total de 20 palabras Y voy a poner este archivo. Y ahora quiero asignar una clase a este dip. Para asignar una clase, necesitamos usar class class attribute, y voy a asignar, y nuestro nombre de clase es taste, y voy a establecer este archivo. Y ahora quiero darle estilo a este elemento deb usando su nombre de clase Para eso, voy a atar sabor a punto. Ahí está el hígado dice, primero, voy a asignar frontera a este párrafo, frontera. Y quiero agregar borde de dos píxeles. Y nuestro estilo boer es sólido. Con eso, quiero que el color negro se aburra. Y voy a poner este archivo. Por ahora, se puede ver en este párrafo, tenemos un pequeño hueco en la parte superior e inferior. Lo llamamos margen, no relleno. Y vamos a aprender sobre margen y el siguiente tutorial. Ahora, de vuelta a la topping. Entonces por ahora, voy a quitar esta etiqueta de párrafo. No necesito esta etiqueta de párrafo y volver a configurar este archivo. Ahora se puede ver que Bdfaul no aportó ningún margen a estos textos Ahora agreguemos un poco de relleno, relleno, y quiero relleno de diez píxeles en cada dirección. Si configuro este archivo, puedes ver el resultado. Ahora, desde todas las direcciones, agrega relleno de diez píxeles. Si lo aumento, entonces voy a hacer 30 píxeles y lo guardaré de nuevo. Ahora puedes ver el resultado. La distancia entre el borde y el texto es de 30 píxeles ahora en todas las direcciones. Recuerden, acolchados, no se extiendan fuera del borde. Se extiende dentro de la frontera. Si configuro un color de fondo a este div, déjame mostrarte algún tipo de color de fondo, color de fondo, y. con eso, quiero usar color de fuente. Color blanco. Y si configuro este archivo, ahora es más claro para ti, que es el área de relleno. Si comento este relleno y vuelvo a configurar este archivo, ahora puedes ver que esta es la zona exacta que ocupaba nuestro texto. Pero si uso padding y luego configuro este archivo, ahora puedes ver ahora agrega espacio extra fuera del área de texto. Y ahora decides que quieres mantener diferentes acolchados en diferentes sitios. Supongamos que para arriba, quieres mantener el relleno de 50 píxeles. Y por derecho, quieres darle 30 pixel patty, de lo contrario, diez pixel patty Y para fondo, quieres darle una hamburguesa de 100 píxeles. Y para la izquierda, se quiere asignar una empanada de cinco píxeles. Si configuro este archivo, puedes ver el resultado. Desde la parte superior, proporciona un relleno de 50 píxeles. Y desde el lado derecho, asignó relleno de diez píxeles. Desde la parte inferior, asignó relleno de 100 píxeles y desde el lado izquierdo, asignó relleno de cinco píxeles. Entonces así es como funcionan los acolchados. Ahora, déjame mostrarte otro método abreviado de cómo puedes usar el relleno. Para eso, voy a comentar esta línea y ponerla de nuevo. Ahora quiero asignar relleno. Entonces primero, voy a escribir padding, padding y desde arriba e abajo, quiero asignar 100 pixel padding. Y de izquierda y derecha, quiero asignar relleno de diez píxeles. Si configuro este archivo, puedes ver el resultado. Entonces este es otro método abreviado. Aquí en el primer valor, necesitamos proporcionar valor superior e inferior, y en el segundo valor, necesitamos proporcionar valor izquierdo y derecho. Entonces esto se trata de propiedad de relleno. En el siguiente tutorial, vamos a hablar de margin property. Así que gracias por ver este video, estén atentos para el siguiente tutorial. 9. Tutorial de márgenes de CSS: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS tres. Y en este tutorial, voy a hablar de margen CSS. Es una de las propiedades más útiles en CSS. Ahora, déjame mostrarte cómo ha funcionado. Como puedes ver en este ejemplo, tenemos una etiqueta profunda, y dentro esta etiqueta profunda, tenemos un párrafo. En nuestro tutorial anterior, aprenderemos sobre pad. Ya conocemos el trabajo de relleno desde adentro, pero el margen es opuesto. Se trata de trabajo desde fuera. Agrego espacio fuera de la zona fronteriza. Ahora la pregunta es ¿por qué necesitamos usar margen? Supongamos que desea agregar otro profundo por debajo de este elemento profundo. En ese caso, es necesario proporcionar espacio entre estos dos profundos. Déjame mostrarte cómo. Entonces este es el ejemplo de otra profundidad. Y entre estos dos profundos, como pueden ver, tenemos un espacio, y podemos asignar este espacio usando margen. Esta es una de las propiedades más útiles en CSS. Si no usamos margin, entonces tanto el elemento se superpone entre sí. Ahora, hablemos de las propiedades de margen. ¿Cuántas propiedades tenemos en margen? Tenemos que remolcar cuatro propiedades, margen superior, margen derecho, margen inferior y levantamiento de margen. Es bastante similar con acolchado. Y si hablo del extremo corto de esta propiedad, entonces puedes usar solo propiedad de margen. Si quieres agregar el mismo margen desde toda la dirección, en ese caso, puedes usar margin, y luego puedes usar el do. Entonces no es necesario escribir esta línea de cuatro para eso. Reduzco tu carbón. Pero, ¿qué? Si necesitas usar un valor diferente para toda esta dirección, sí, puedes. Además, puedes usar short y para eso. Primero, debes proporcionar valor, luego a la derecha, luego abajo, luego levantar. Básicamente, sigue el sentido de las agujas del reloj. F parada, luego a la derecha, luego abajo, luego encendida. Ahora, el margen viene con otro valor, que es auto. Utilizamos Auto Value cuando necesitas centrar un elemento profundo en nuestra página web. Si haces Auto desde la elevación y dirección correcta y estableces algo a este elemento profundo, entonces automáticamente sumerges el elemento se alinea en el centro. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Entonces como pueden ver lado a lado, abrimos mi coordinador de salt studio y mi navegador usando la extensión del servidor light, y ya creo un documento de estimación llamado index dot stem. Y como puedes ver en esta página tamal, tenemos una etiqueta de un encabezado y dos Deep tag Y dentro de esta etiqueta dip, tenemos algo de texto. Y si notas, puedes ver en nuestra primera etiqueta Dip, primero asignamos un nombre de clase, y en nuestra segunda etiqueta Dip, asignamos una clase llamada second. Ahora usando esta clase, voy a seleccionar este elemento dip. Entonces dentro de esta etiqueta de estilo, voy a seleccionar la primera clase, voy a escribir punto primero. Entonces dice Madi caribra, primero, voy a usar propiedad fronteriza, frontera Y voy a asignar dos pixel border, y nuestro estilo de borde es solent y nuestro color de borde es rojo Entonces voy a duplicar esta sección. Y rasgar esto primero con el segundo. Y también, voy a cambiar el nombre del color, que es verde. Si configuro este archivo, puedes ver el resultado. Ahora bien, si notas puedes ver, no hay espacio entre estos dos D. Si quieres proporcionar espacio, usar relleno no va a funcionar. Déjame mostrarte. Supongamos que en nuestra primera etiqueta, quiero agregar padding bottom, padding bottom, ten pixel. Y establecer este archivo. Ahora se puede ver que suma espacio desde el interior, no desde el exterior. Entonces, si quieres agregar espacio entre estos dos de elemento, necesitas usar la propiedad margin. Entonces, si usas margin, margin bottom, y luego estableces este archivo, ahora puedes verlo agregar un poco de espacio entre estos dos delement Básicamente, agrega espacio de diez píxeles, y si lo haces 100 y luego configuras este archivo, ahora puedes ver la distancia. De igual manera, quiero añadir margen en nuestro segundo debilment. Esta vez, voy a usar margin top, voy a pasar 50 pixel, y voy a establecer este archivo, margin top 500 pixel. Si configuro este archivo, ahora puedes ver que la distancia entre deep one y deep two elemento es total 600 porque en nuestro primer elemento dip, usamos la propiedad margin bottom, y proporcionamos 100 pixel. Y en nuestro segundo elemento dip, utilizamos la probabilidad máxima de margen. Propiedad superior de margen, 500 píxeles. Entonces la distancia entre el primer elemento dip y el segundo elemento es de 600 pixel. Por ahora, voy a quitar esta propiedad de margen superior. No lo quiero y configuré este archivo de nuevo. Ahora quiero asignar la propiedad margin lip en nuestro segundo elemento DB. Entonces Hemo tipo margin, lip, margin lap, y voy a asignar 150 pixel Si configuro este archivo, puedes ver nuestro segundo elemento profundo se mueve del lado derecho porque en el lado izquierdo, usamos un margen de 150 píxeles. Y si quieres usar taquigrafía y asignar margen desde la dirección para eso, solo necesitas usar margin property Y si configuras este archivo, ahora podrás ver el resultado. Tanto de la dirección, tenía un margen de 150 píxeles. Ahora bien, si creo otro elemento profundo debajo de este segundo elemento profundo, déjame mostrarte DIV Dev y dentro de este elemento profundo, voy a escribir algún párrafo Lowm y quiero agregar 30 palabra Si configuro este archivo, ahora se puede ver la distancia entre el segundo y el elemento 30 es de 150 píxeles porque su propiedad de margen de uso. Básicamente, agrega margen a nuestro segundo elemento desde toda la dirección. Y si quieres agregar margen diferente desde diferente dirección, sí, puedes. Déjame mostrarte cómo. Entonces desde la parte superior, quiero un margen de 70 píxeles. Y del lado derecho, quiero un margen de 50 píxeles. Y de abajo, quiero margen de diez píxeles. Y del lado izquierdo, quiero un margen de 200 píxeles. Si pongo esta pila, ahora puedes ver el resultado. Desde la parte superior, tenemos un margen de 70 píxeles. Si comento esta línea y la vuelvo a poner, ahora es más claro para ti. Desde arriba, tenemos un margen de 70 píxeles. Desde la derecha, tenemos un margen de 50 píxeles. Desde abajo, tenemos margen de diez píxeles, y desde P, tenemos margen de 200 píxeles. Ahora déjame mostrarte otra taquigrafía de cómo podemos usar el margen Entonces voy a hacer p esta línea y comentar la anterior. Esta vez, quiero asignar margen de arriba y abajo y derecha y tarde. Entonces de arriba e abajo, quiero 200 píxeles. Y de izquierda y derecha, quiero 20 píxeles. Si configuro este archivo, puedes ver el resultado. Ahora, de arriba y abajo, tenemos 200 píxeles, y de izquierda y derecha, tenemos 20 píxeles. Ahora, déjame mostrarte otra toma así que voy a duplicar esta línea y comentar la anterior. Esta vez, desde arriba, voy a asignar valor cero. Y de izquierda y derecha, también voy a asignar valor cero. Y desde abajo, quiero asignar 100 píxeles. Si configuro este archivo, puedes ver el resultado. De izquierda y derecha y arriba, tenemos valor cero, pero desde abajo, tenemos 100 píxeles. Entonces este es nuestro trabajo básicamente de fusión. Ahora déjeme hablar de otra propiedad, que es margin auto. Déjame mostrarte el ejemplo de cómo podemos usar el valor automático. Entonces voy a comentar esta línea, y primero, voy a asignar wed a este contenedor porque por defecto, D no tiene dentro de la altura. Entonces voy a asignar N V a este contenedor con 500 píxeles. Voy a establecer este archivo. Y además, voy a aumentar el tamaño del pase y alejar un poco el contenido. Ahora nuestro segundo elemento D con es de 500 píxeles. Pero si te das cuenta, puedes ver que este elemento DP no se alinea en medio. Me alineo en lado lep. Quiero asignar igual espacio a la derecha y levantar. Para eso, necesitamos usar autopperty de margen. Entonces escribe margin desde arriba e abajo, quiero 50 pixel, y de izquierda y derecha, quiero o si configuro este archivo, puedes ver el resultado. Ahora de arriba e abajo, usó margen de 50 píxeles y de izquierda y derecha, usa Auto y lo hace centro. Ahora se vuelve bastante receptivo. Ahora se puede ver también alineando el centro. Espero que ahora te quede claro cómo podemos usar margin property. En el siguiente tutorial, vamos a aprender sobre esta propiedad, ancho y alto. Gracias por ver este video Sy melodía para el siguiente tutorial. 10. Tutorial de altura y ancho de CSS: Oigan, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre dos propiedades más importantes sobre CSS, que es la altura y Wi. Como pueden ver, esta es la D, y esto se llama con propiedad. Si quieres aumentar tu tamaño profundo, acuerdo a la posición horizontal, en ese caso, necesitas usar con propiedad. Y si quieres aumentarla dirección vertical, en ese caso, necesitas usar la propiedad height. Se puede utilizar con probabilidad y propiedad de altura con valor porcentual, también valor de píxel. Si quieres ir con valor fijo, entonces necesitas usar el valor de píxel. Y si quieres ir con ajustable con altura, en ese caso, necesitas usar valor porcentual. Vamos a aprender sobre las unidades en nuestro próximo tutorial. Este método es más claro si empezamos la práctica. 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 lp, y ya creo un documento TML llamado index dot TML Dentro de la etiqueta corporal, como puedes ver, tenemos primero un Deptag con nombre de identificación Entonces al principio, voy a seleccionar este DP usando su nombre de identificación. Y para seleccionar la D con ID, usamos HtagsInhTag ID Después establece la propiedad clrASF que voy a usar, que es WI Con, y voy a usar peso fijo 300 pix, y voy a configurar este archivo. Si configuro este archivo, no se puede ver nada en mi página. Entonces decido que voy a agregar color de fondo. Color de fondo, rojo, y establecer este archivo. Además, se puede ver que no hay nada en esta página porque acabamos de establecer mié, no la altura. Entonces voy a decidir que voy a asignar altura a esta diablicidad. Altura, 200 píxeles. Y voy a poner este archivo. Ahora puedes ver el elemento profundo en mi página web. Las unidades de píxeles son unidades estáticas. Si aumento, de lo contrario, disminuyo la altura del navegador y la ventana, entonces no va a reflejar este elemento porque estos son todos unidad fija. Y ahora decido que quiero asignar el 50% del ancho del navegador a este elemento. Para ello, necesitamos usar unidad dinámica, que es el valor porcentual. Entonces aquí, voy a quitar esta unidad estática, y voy a reemplazar con 50%. No te preocupes. Vamos a conocer esta unidad en nuestro próximo tutorial. Ahora puedes ver que este elemento profundo toma el 50% del navegador que. Si hago clic derecho en nuestro navegador e inspecciono el elemento, y cambio el tamaño de la ventana del navegador. Como puedes ver, según el tamaño de la ventana del navegador, se cambia el ancho del elemento porque aquí tomamos el 50% del ancho del navegador. la misma manera, si quieres aumentar el ancho de este elemento hasta en un 80%, sí, solo puedes cambiar el valor porcentual. Y voy a sustituir 50 ancho 80. Y voy a poner este archivo. Después de establecer este archivo, se puede ver el resultado. Pero y si usamos valor estático y luego cambiamos el tamaño, déjame mostrarte. Entonces esta vez, voy a usar 500 píxeles. Ahora aquí usamos valor estático. Ahora no podemos cambiarlo dinámicamente. Entonces si reduzco el navegador a tamaño, ahora puedes ver que nuestro ancho no está cambiando según el tamaño del navegador porque ella usamos tamaño fijo, y ahora voy a poner algunas tomas ficticias en este elemento profundo Entonces ella escribirá Loren, 300, ¿qué? Si configuro este archivo, ahora puedes ver en mi navegador, nuestro contenido de texto sobrevolado de este elemento profundo Si notas en nuestra sección de estilo, aquí puedes ver para cualquiera de las alturas, tanto los casos usamos valor estático, pero nuestro texto se ajusta según el viento profundo. Si aumento el Doi, 500 píxeles y el conjunto de este archivo, como se puede ver, de nuevo, ajusta el texto, pero no es trabajo bastante bien para la altura, y este es el gran problema con la propiedad height Necesitas usar la propiedad height cuando sepas que tu contenido no va a desbordarse a este elemento DB. Y si quieres resolver este problema, necesitas usar la propiedad de altura mínima y altura máxima. Entonces esto es para este tutorial. Y el siguiente tutorial, voy a hablar de altura mínima y altura máxima. Entonces gracias por ver este video. 11. Tutorial de altura mínima y altura máxima de CSS: Hola, chicos. Encantado de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS. Y en este tutorial, vamos a aprender la altura mínima y la altura máxima de la propiedad. Por qué necesitamos usar la altura mínima y la probabilidad máxima de altura. Entonces estudiemos práctico. Entonces como pueden ver, aquí abro mi anterior documento estim y navegador Y ya sabes que si usamos altura fija, entonces nuestro contenido obtiene desbordamiento de este contenedor. Para resolver este problema, no utilizamos la propiedad height. Sin usar la propiedad de altura, nos gustaría ir con altura máxima y probabilidad mínima de altura. Déjame mostrarte el ejemplo. Supongamos que tienes menos contenido. Entonces voy a quitar algún contenido de este párrafo. Entonces configuraré este archivo. Ahora nuestro contenido está perfectamente organizado en nuestro elemento profundo, y además tenemos algo de espacio en este contenedor. Entonces, para este elemento profundo, nuestro requisito de altura mínima es de 200 píxeles. Entonces voy a quitar propiedad de altura, y voy a reemplazar con altura mínima. Altura mínima, altura mínima 200 píxeles. Después de establecer este archivo, como puede ver, no hay cambios en nuestra forma. Pero, ¿qué? Si aumento un poco el contenido, déjame mostrarte. De nuevo, voy a agregar más contenido. Lowm 200. Y luego establecer este archivo. Ahora puedes ver los diferentes sul. Ahora la altura aumenta según el tamaño del contenido. Entonces podemos aumentar la altura tanto que queramos, pero no podemos disminuirla menos de 200 porque aquí usamos propiedad de altura mínima. Decimos altura mínima 200 píxeles. Entonces ese es el uso de la propiedad de altura mínima. Ahora hablemos de propiedad de altura máxima. Pero antes, voy a eliminar todo el contenido de este párrafo. Por ahora voy a agregar algo menos de contenido, Lowm 50. Eso es. Ahora decido que no quiero aumentar la altura más de 600 píxeles. En ese caso, necesitamos usar la altura máxima de propiedad. Entonces aquí voy a escribir altura máxima, altura máxima, 600 píxeles. Voy a establecer este archivo. Hasta configurar este archivo, como puede ver, no hay cambios. Básicamente, quiero decir que no quiero aumentar la altura más de 600 píxeles. Ahora voy a aumentar el tamaño del contenido. Entonces aquí voy a escribir wim 200. Up configurar este archivo. Como pueden ver, nuestra altura de contenedor profundo aún no alcanza los 600 píxeles, así que voy a agregar más contenido. Inferior. Aquí voy a añadir otro párrafo de 300 palabras. Si configuro este archivo, ahora puedes ver el resultado. Debido a la propiedad de altura máxima, nuestro contenedor no puede alcanzar más de 600 píxeles. Por eso esta vez nuestro párrafo sobrevoló de este contenedor Entonces este es el uso de la propiedad de altura mínima y altura máxima. Espero que ahora el tema sea claro 42. Gracias por ver este video Estén atentos para los dos siguientes demasiado tenues. 12. Tutorial de ancho mínimo y ancho máximo de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vas a aprender dos nuevas propiedades CSS, ancho mínimo y ancho máximo. Entonces, sin perder el tiempo, estudiemos prácticos. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión del servidor lip, y ya creo un documento HTML llamado index dot HTML. Dentro de la etiqueta body tenemos una etiqueta heading one y una etiqueta deep, y primero establecemos un ID para este elemento div. Ahora, vamos a usar este ID para darle estilo a este elemento DV. Así que aquí dentro de la etiqueta de estilo, voy a seleccionar el ID. Hashtag primero. Después dentro del Cirass. Entonces al principio, voy a asignar un borde a este contenedor profundo. Entonces voy a usar la propiedad fronteriza. Borde, y quiero borde de tres píxeles, y quiero borde sólido. Con eso, quiero borde de color rojo, y. trastornar este archivo. Uy, no está funcionando. Creo que cometí algunos errores. Sí. La primera ortografía de nuestro nombre de identificación es incorrecta. Primero, y guárdala de nuevo. Perturbar este archivo, se puede ver el resultado. Ahora voy a asignar un peso fijo a este elemento DV. Entonces voy a usar con ppty We 300 pixel, y voy a volver a guardarlo Ahora, déjame mostrarte el problema. Como puedes ver en mi directorio de trabajo actual, hay un nombre de imagen Amita dot JPG Entonces dentro de este elemento profundo, voy a usar la etiqueta de imagen IMG Con eso, necesitamos proporcionar la fuente de imagen en nuestro atributo source. Y nuestro nombre de imagen es Amita Amita punto JH. Si configuro este archivo, aquí puedes ver el resultado. Este es el tema. Aquí puedes ver nuestro ancho de imagen es mucho más grande que el de Deid Como puedes ver, nuestro profundo Con es de 300 píxeles, pero nuestra imagen es mucho más grande. Por eso la imagen sobrevolada de este contenedor. Y luego voy a usar etiqueta de imagen. IMG, y dentro de la etiqueta de imagen, voy a establecer ancho con 100% Y voy a poner este archivo. Después de establecer este archivo, como puede ver, se fija a este contenedor. Pero en este tutorial, vamos a aprender sobre ancho mínimo y ancho máximo. Esta vez, voy a usar la propiedad de ancho mínimo. El ancho mínimo y el ancho máximo funcionan juntos. Déjame mostrarte cómo. Entonces aquí, voy a establecer el ancho mínimo. Mínimo wid, voy a establecer 300 píxeles. Entonces voy a usar ancho máximo, ancho máximo, ancho máximo, voy a usar 500 píxeles. Y quiero establecer este archivo. Después de configurar este archivo, como puedes ver, ahora nuestro elemento profundo se convierte en rueda de 500 píxeles. Si inspecciono este elemento, déjame mostrarte y abrir mis tarjetas en esta imagen, como puedes ver, ancho de la imagen es de 500 píxeles y la altura es 357 píxeles porque Aquí establecemos un ancho máximo de 500 píxeles. Por lo que no podemos expandir este ancho de elemento profundo más de 500 píxeles. Y si trato de reducir el ancho del elemento profundo, no podemos reducirlo por debajo los 300 píxeles porque Hear establece un ancho mínimo de 300 píxeles. Es bastante similar con altura mínima y máxima propiedad de altura. Básicamente, con esta propiedad, podemos establecer límite superior y límite inferior. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender sobre el tamaño de cajas CSS pprity Así que gracias por ver este video. 13. Tutorial de tamaño de caja de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre el dimensionamiento de cajas. Antes de hablar sobre por qué usamos el dimensionamiento de cajas, déjame mostrarte un problema. Aquí puedes ver un elemento profundo, y lo configuramos con 200 píxeles. Pero esta profundidad vienen con borde de diez píxeles. Después de usar la frontera, aumentó la maleza profunda. Si usamos diez píxeles boded a la izquierda y a la derecha, entonces el total nos convertimos en 220 píxeles No solo eso, si agregamos relleno a izquierda y derecha, supongamos a la izquierda, usamos relleno de diez píxeles. También a la derecha, usamos relleno de diez píxeles. Ahora el ancho total se convierte en 240 píxeles, pero el ancho real es de 200 píxeles. Debido a que usamos relleno de diez píxeles de cada uno de dirección, también usamos borde de diez píxeles. Es por eso que el ancho total se convierte en 240 píxeles. Para resolver este problema, el tamaño de la caja nos va a ayudar. Si usamos el tamaño de la caja, entonces nuestro ancho de elemento profundo se vuelve siempre 200. No va a aumentar el ala del elemento profundo. En última instancia, para resolver este problema, tamaño de la caja introduciendo CSS. Después de usar el tamaño de la caja, el total con sería de 200 píxeles. Y para aplicar este tamaño de caja, necesitamos usar el tamaño de la caja, el tamaño de caja y el valor es caja de borde Básicamente, la propiedad de dimensionamiento de caja vino con dos valores, caja de borde y caja de contenido. Si usamos border box, entonces no podemos aumentar el ancho, lo que sea que usemos. Si usamos padding margin border, además no va a aumentar el con, pero si usamos content box, entonces va a funcionar como está. En ese caso, puede aumentar el Oi. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión del servidor Lip, y ya creo un nombre de documento Tim index dot HTML. Y dentro de este documento de estimación, tenemos una etiqueta profunda. Y dentro de esta etiqueta profunda, tenemos algún texto ficticio Al principio, voy a asignar un ID a este elemento profundo. ID de desarrollo, ID igual a caja. Después dentro de esta etiqueta de mosaico, voy a seleccionar este elemento profundo usando su nombre de ID. Tiene etiqueta, caja. Entonces pones los cálices, nuestra primera propiedad es nosotros W, y voy a decir 500 píxeles Quiero configurar este archivo, y después voy a agregar boder para devaluar Entonces voy a usar la propiedad fronteriza. Pixel BDert. Y quiero polvo sólido. Con eso, el color del borde es rojo. Voy a establecer este archivo. Y ahora voy a usar relleno. Después de usar relleno, aumenta nuestro ancho. Déjame mostrarte. Relleno de cada una de las direcciones quiero diez píxeles. Y establecer este archivo. Después de configurar este archivo, se nota que aumenta el ancho del elemento. Si inspecciono este elemento y como están mis tarjetas en este elemento profundo, ahora puedes ver que nuestro ancho profundo se vuelve 524 pixel porque 500 es ancho real de esta profundidad. Y entonces tenemos dos bordes de pixel de cada uno de este lado, así que se ha convertido en 504. Con eso, también tenemos relleno de diez píxeles a la izquierda y a la derecha. Por eso se convierte en 524. Entonces este es uno de los grandes temas. Si usamos margen de relleno de borde , aumenta el ancho profundo. Pero después de usar la propiedad de dimensionamiento de cajas, no va a aumentar el ancho del elemento profundo. tamaño de la caja sigue siendo el ancho profundo, lo que asignamos. Déjame mostrarte. Así que aquí, voy a escribir tamaño de caja, dimensionamiento de cajas, y voy a usar probabilidad de cuadro de borde. Voy a establecer este archivo. Después de establecer este archivo, como puede ver, redujo el peso profundo del elemento. Ahora bien, si uso padding, 50 pixel, y también uso border, cinco pixel y configuro este archivo. Y si inspecciono este elemento y sobre mi auto en este elemento, ahora se puede ver todavía escrito hierba de 500 píxeles porque usamos tamaño de caja Pubert Después de usar relleno y borde, no aumenta la maleza profunda Pero si usa un valor diferente para eso, si usamos el tamaño de la caja, cuadro de contenido y luego configuramos este archivo. Ahora puedes ver si abro mi azar sobre este elemento, nuestro ancho se convierte en 610 pixel porque A no usamos la propiedad de dimensionamiento de cajas. Básicamente, la propiedad de dimensionamiento de la caja reduce tamaño del contenido que está dentro de esta caja. Por eso mantuvo lo real. Entonces el cuadro de contenido es el valor predeterminado de esta propiedad. Entonces necesitamos usar la caja fronteriza. Y después de establecer este archivo, se puede ver el resultado. Nuevamente, se convierte en 500 píxeles. Entonces esto es para este tutorial. En el siguiente tutorial, vamos a aprender sobre la propiedad CSS overflow. Así que gracias por ver este video. Estén atentos para el siguiente tutorial. 14. Tutorial de desbordamiento de CSS: Oigan, chicos, un placer volver a verles. ¿Qué va a volver con un nuevo tutorial relacionado con CSS? Y en este tutorial, vamos a aprender sobre la propiedad de desbordamiento de CSS. Como puedes ver en este ejemplo, tenemos un elemento profundo, y nuestro texto se desborda de este elemento profundo, y ese es el problema. Este tipo de problema aparece cuando utilizamos altura fija a este elemento profundo. Supongamos que usamos 200 píxeles de altura para este elemento profundo, y siempre que intentemos insertar datos de más de 200 píxeles, en ese caso, en buen desbordamiento de este contenedor. Y para manejar esta situación, CSS introduce la propiedad de desbordamiento y viene con cuatro valores diferentes El primer valor que podemos usar está oculto. Podemos ocultar datos de desbordamiento usando este valor. El siguiente valor es scroll. Podemos usar scrollbar dentro este elemento profundo para desplazar los datos de desbordamiento Podemos leer los datos después de scroll. Podría ser horizontal, de lo contrario verticalmente. Nuestro siguiente valor es auto, y hay una diferencia menor entre scroll y auto. La diferencia entre scroll y auto es si usamos el valor scroll, entonces puedes ver esta barra de desplazamiento en este elemento deep Si no hay datos de desbordamiento. Pero si usamos autovalu entonces muestra el scroll o cuando nuestros datos se desbordan Los datos IB se desbordan verticalmente, luego auto Valu proporcionan palabras de desplazamiento vertical y datos IP desbordan horizontalmente, luego auto Valor proporcionar palabra de desplazamiento horizontal. Y el último valor es visible. Es el valor por defecto. Se va a mostrar los datos de desbordamiento tal como están, y tenemos que decir tres tipos de propiedades de desbordamiento. El primero es desbordamiento y el segundo es desbordamiento X, y el tercero es desbordamiento Y. Nuestro primer desbordamiento de propiedad funciona en todas las direcciones. Funciona para vertical y horizontalmente en ambos. Nuestra siguiente propiedad es overflow X. Si desea controlar los datos de desbordamiento en posición horizontal, entonces necesita usar overflow X. Y particularmente si desea controlar los datos de desbordamiento vertical, en ese caso, necesita usar la propiedad desbordamiento Y. Entonces, sin hablar demasiado, comencemos la práctica y veamos cómo funciona. Entonces finalmente, estamos en mi estudio de visa codiitor y como siempre, aquí creo un documento de estimación llamado index dot DM Y en esta página de estimación, tenemos una etiqueta profunda con cuadro de nombre de identificación. Y dentro de este elemento profundo, tenemos un párrafo. Y ahora voy a seleccionar este elemento profundo usando su nombre ID. Entonces dentro de la etiqueta de estilo, voy a usar tiene etiqueta, y el nombre de identificación es caja. Después dentro del Cali dice, primero, voy a usar con Cupertin con 250 pixel, altura 250 pixel Así que la grada usa lo mismo dentro de la altura. Y si te das cuenta, puedes ver que Harrow usa altura fija, y con eso, quiero asignarle un borde Borde, dos píxeles y quiero borde sólido con eso, nuestro color de borde es rojo. Y voy a satisfacer. Después de satisfacfile se puede ver el resultado. Ahora puedes ver nuestro contenido sobrevolado de este defraudo Y para resolver este problema, CSS introduce la propiedad overflow. Entonces primero, voy a escribir desbordamiento de nombre de propiedad. Y primer valor que voy a usar, que está oculto. Si guardo este archivo, ahora no se pueden ver los datos de desbordamiento fuera del contenedor. Básicamente, oculta todo el contenido de desbordamiento, pero no quiero ocultar estos datos. Quiero leer estos datos dentro de este elemento profundo. Para eso, tenemos otro valor, que es scroll. Si configuro este archivo, ahora se puede ver dentro de este elemento dip, tenemos una barra de desplazamiento. Aquí tenemos barra de desplazamiento horizontal. También tenemos barra de desplazamiento vertical. Ahora puedes leer todo el párrafo dentro de este elemento dip. Puede desplazarse hacia arriba y desplazarse hacia abajo en el párrafo. Si notas puedes ver solo la barra de desplazamiento vertical está activa, no horizontalmente porque nuestro contenido es texto Si insertamos una imagen a este elemento profundo, entonces nuestra barra de desplazamiento horizontal también activa Y ahora voy a reducir el tamaño del párrafo. Entonces voy a quitar algunos datos. Y voy a poner este archivo. Después de que configuré este archivo, ahora puedes ver nuestro contenido no va a desbordarse de este contenedor, pero aún tenemos barra de desplazamiento horizontal y vertical Para resolver este problema, tenemos otro valor, que es Auto. Así que para eliminar el valor de desplazamiento y reemplazar con auto. Si configuro este archivo, puedes ver el resultado. Ahora no tenemos barra de desplazamiento en este elemento deb. Pero si agrego más palabra a este párrafo, permítame mostrarle baja M 150 palabra y luego volver a poner este archivo. Ahora puedes ver que nuestra barra de desplazamiento está emparejada de nuevo. Esta vez, solo se puede ver la barra de desplazamiento vertical, no la barra de desplazamiento horizontal Entonces si usamos AutoPpert, podemos ver esta barra de desplazamiento si nuestros datos se desbordan De lo contrario, no va a mostrar la barra de desplazamiento. Así que la mayoría de los casos usamos overflow auto value. Ahora, hablemos de la propiedad perdida, que es visible. Entonces voy a quitar auto y teclear visible. Si configuro este archivo, puedes ver el resultado. Básicamente, es el valor predeterminado, y va a mostrar los datos de desbordamiento tal como están. Ahora hablemos de otras propiedades de desbordamiento. Entonces aquí voy a usar desbordamiento. Y? Y aquí voy a usar valor oculto. Si configuro este archivo, puedes ver el resultado. Ahora puedes verlo ocultar datos de desbordamiento vertical. Pero si paso el valor scroll, scroll overflow Y, scroll y set este archivo. Ahora puedes ver la barra de desplazamiento vertical. Si recuerdas, cuando usas solo la propiedad overflow, entonces nuestro valor scroll proporciona scrollbar tanto en la dirección, vertical como horizontal también Pero si usamos particularmente desbordamiento Y y luego usamos el valor scroll, en ese caso, va a mostrar solo la barra de desplazamiento vertical. Y si utilizo los datos y vuelvo a configurar este archivo, aún así, se puede ver la barra de desplazamiento vertical Para resolver este problema, si quieres mostrar la barra de desplazamiento siempre que tengamos datos de desbordamiento, en ese caso, necesitamos usar Auto propiedad Auto. Hasta configurar este archivo, se puede ver que no hay ninguna barra de desplazamiento Pero si aumento los datos, smiltp M 150 word y configuro de nuevo este archivo, ahora se puede ver la barra de desplazamiento Ahora hablemos otra propiedad que es overflow X. Así que voy a quitar y y teclear X. Después de paso este archivo, como pueden ver, no hay barra de desplazamiento horizontal en este elemento deep porque en este elemento deep, su uso toma datos. No tenemos datos que puedan desbordarse en dirección XX. Y ahora decido que voy a crear un elemento profundo dentro de este dentro de este elemento dip box. Entonces HemotyPETV y aquí voy a usar el método de estilismo interior Entonces voy a usar style attribute style. La primera propiedad es la altura. Para la altura, voy a usar 100 píxeles. Para Wi, voy a usar 400 píxeles. Y para el color de fondo, color de fondo, voy a usar rojo. Si configuro este archivo, puedes ver el resultado. Ahora tenemos scullr horizontal en este elemento dip porque ahora tenemos el contenido que se desborda en dirección horizontal Entonces así es como podemos usar esta importante propiedad CSS, overflow. Entonces esto es para este tutorial. Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 15. Tutorial de radio de borde de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre la propiedad CSS border radius. Ya lo aprendemos en nuestros tutoriales anteriores. Pero en este tutorial, vamos a conocerlo en detalle. Entonces, como pueden ver, tenemos un elemento profundo, y dentro de este elemento profundo, tenemos algún contenido. Por defecto, este elemento profundo viene con esquina afilada. Pero en este ejemplo, se puede ver la curva en la esquina, y podemos controlar la curva usando la propiedad de radio de borde. radio del borde viene con cuatro propiedades totales, borde superior del borde, radio superior derecho del borde, radio inferior derecho del borde, radio del borde inferior del borde. Y si quieres hacer lo mismo en una sola línea para eso, tenemos una taquigrafía, y la taquigrafía es propiedad de radio de borde Aquí puedes usar todos los cuatro valores a la vez. En este ejemplo, tenemos un total de cuatro esquina diferentes. Primero, segundo, tercero y cuarto. Y si quieres usar esta propiedad taquigráfica, entonces necesitas escribir algo así Para nuestra primera esquina, utilizamos 20 radios de borde Bixel. Para el segundo, usamos un radio de borde de 30 píxeles, y para el tercero, usamos 50 radios de borde Bixel Y para la última esquina, usamos boerradius de diez píxeles. Esto es sólo un ejemplo. Empecemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor light, y ya creo un documento ETML llamado index dot TML Y en esta página de tabla, tenemos una etiqueta profunda con cuadro de nombre de identificación. Al principio, voy a darle estilo a este elemento profundo usando su nombre de identificación. Entonces aquí voy a escribir style tag, style, y dentro de esta etiqueta de estilo, voy a seleccionar el elemento box, tiene tag box. Entonces dentro de los calibrosAsí primero propiedades con con, y voy a decir 300 píxeles Nuestro segundo nombre de propiedad es padding, y quiero proporcionar 25 píxeles pading. También, voy a decir la frontera. Frontera, y quiero frontera pupixl, y nuestra frontera es sólida Con eso, quiero borde de color negro. Negro. Y quiero establecer este archivo. Después de establecer este archivo, y verá el resultado. Y si te das cuenta, puedes ver todas las esquinas están muy afiladas, pero no quiero esquina afilada para el borde. Entonces, al principio, quiero asignar radio de borde esquina superior del labio. Para ello, necesitamos usar frontera Radio superior izquierda. Borde radio superior izquierda, voy a usar diez píxeles, y voy a configurar este archivo. Después de configurar este archivo, si zona un poco esta página, se puede ver el resultado. la misma manera, quiero cambiar el radio de la esquina superior derecha. Para eso, necesitamos usar borde superior, derecho, radio. 50 píxeles. Quiero establecer este archivo. configurar este archivo, se puede ver el resultado. Y a continuación, voy a cambiar el radio de la esquina inferior derecha. Para eso, necesitamos usar la probabilidad de radio inferior derecha del borde, suma a tipo, borde inferior, derecha, propiedad de radio. Y voy a pasar 50 píxeles. Quiero establecer este archivo. Up configurar este archivo, se puede ver el resultado. Y nuestro apellido de propiedad es el radio del borde inferior del labio. Entonces para duplicar esta sección, y voy a reemplazar justo por ella. Y hemo para decir diez píxeles. Si guardo este archivo, se puede ver el resultado. Así de esquina a esquina, se puede cambiar el radio usando estas propiedades. Pero, ¿qué? Si quieres un radio igual en cada esquina para eso, puedes usar la taquigrafía Entonces voy a comentar esta línea y héroe para usar otra propiedad nombre border radius, border radius, 30 Pixel. Ahora va a proporcionar un radio de 30 píxeles en cada esquina. Si configuro este archivo, puedes ver el resultado. Y si quieres asignar diferentes radios para diferentes esquinas, sí, puedes. Supongamos que para esquina superior izquierda, quiero usar 30 pixel, y para esquina superior derecha, quiero usar 50 pixel, pase de sonido 50 pixel. Y para la esquina inferior derecha, quiero usar diez píxeles. Y para la esquina del labio inferior, quiero usar 20 píxeles. Si pongo esta bilis, se puede ver el resultado. Ahora bien, no necesitamos escribir esta línea de cuatro para eso. Además, tenemos otra taquigrafía. Déjame mostrarte cómo. Voy a conseguir esta línea y comentar la anterior. Aquí voy a pasar diez píxeles, 50 píxeles. Ahora podrías tener cojín. ¿Qué significa eso? Aquí pasamos el valor total de dos. va a aplicar el primer radio de botter, superior del labio y esquina inferior derecha Y el segundo va a aplicar labio inferior y esquina superior derecha. Si configuro este archivo, puedes ver el resultado. Es con dirección opuesta. No sólo eso, podemos usar valor porcentual con radio de borde. Déjame mostrarte cómo algunos duplican esta línea y comentan la anterior. Y esta vez, voy a usar 20% de radio fronterizo. Si configuro este archivo, puedes ver el resultado. Y si quieres lograr sobre la forma de cualquier rectángulo, para eso, necesitas usar 50% de radio de borde. Si configuro este archivo, puedes ver el resultado. Podemos lograr una forma ovalada perfecta usando este valor. Y si quieres hacer un círculo usando radio de borde para eso, necesitas usar tenoide de igual altura así que si uso height, 300 pixel y luego configuro este archivo, y nuestro radio de borde es 50%, entonces va a crear un círculo Así que este es el tutorial detallado sobre la propiedad de radio de borde. Entonces esto es todo para este tutorial. Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 16. Tutorial de sombras de cajas de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre CSS, box shadow. Entonces veamos qué es la sombra de caja y cómo podemos usar la sombra de caja. Aquí se puede ver un elemento profundo, y dentro de este elemento profundo, tenemos algún texto. Y si notas puedes ver, no hay sombra a este elemento profundo. Y si le agregamos sombra a este elemento profundo, entonces se ve así. Aquí puedes ver, después de usar la sombra de caja, aquí puedes ver una sombra en la parte inferior y derecha, y podemos crear esta sombra usando la propiedad de sombra de caja. Ahora, veamos cómo podemos usar la propiedad box shadow. Para usar la propiedad de sombra de caja, total necesitaría usar cinco valor. Cada valor tiene su propósito diferente. El primer valor significa horizontal opuesto. Usando este valor, puedes definir izquierda y derecha. Básicamente, funciona en dirección Xxs. Nuestro siguiente valor significa V opuesto, que significa verticalmente opuesto. Se puede comparar con la dirección YxS. Usando este valor, puedes controlar el lado superior e inferior. Nuestro siguiente valor significa desenfoque. Puedes controlar la borrosidad de la sombra usando este valor. Si no quieres usar la sombra cerrada, entonces puedes usar este valor. Y el cuarto valor significa spread. ¿Cuánta área quieres extender tu sombra? Se puede controlar con este valor, y el quinto y último valor es coloreado. Usando esta Vu, puedes controlar el color de la sombra. 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 del servidor light, y ya creo un estim document name index dot TM Y como pueden ver, dentro de este código de estimación, tenemos una etiqueta profunda con cuadro de nombre ID, y ahora voy a darle estilo a este elemento Entonces voy a seleccionar esta profundidad usando su nombre de identificación. Entonces voy a usar a alguien para usar tiene tag boobs. Después dentro del color resis, primero, voy a usar con propiedad. Con 300 píxeles. Nuestra siguiente propiedad es altura, altura, 200 píxeles. Con eso, quiero agregar algo de margen. Margen, izquierda, 200 píxeles. Si configuro este archivo, aquí no se puede ver nada porque no utilizamos ningún color de fondo. Entonces voy a agregar color de fondo, rojo. Si configuro este archivo, puedes ver el resultado. Y ahora quiero agregar sombra de caja a este elemento profundo. Para eso, necesitamos usar la propiedad de sombra de caja, sombra de caja, sombra de caja, primero, necesitamos usar XS Valu. Entonces voy a pasar dos píxeles, y luego tenemos que pasar Y XS Value. Además, voy a usar dos píxeles. Para sombra horizontal y vertical, utilizamos dos píxeles. Y recuerda, también, puedes usar valores menos para mover la sombra. Y luego quiero usar valor de desenfoque. Para desenfoque, voy a usar cinco píxeles. Y por ahora, no quiero usar el valor diferencial. Entonces directamente, quiero saltar al valor del color. Para el color, voy a usar el color negro. Si configuro este archivo, aquí se puede ver V resultado. Básicamente, después de usar la sombra, parecía un objeto de tres D. Y ahora quiero mover la sombra en dirección XXS, así que voy a incrementar el valor XXS Entonces aquí voy a pasar ocho, ocho píxeles. Después de establecer este archivo, aquí puedes ver el resultado. Y de la misma manera, si quieres moverlo hacia abajo, entonces necesitas aumentar XS V pero yo decido que quiero moverlo hacia arriba. Entonces como te dije, podemos usar valor menos aquí. Entonces voy a usar menos ocho píxeles. Voy a establecer este archivo. Arriba para configurar este archivo, ahora puedes ver, movemos nuestra sombra hacia arriba. Entonces así es como podemos colocar nuestra sombra en cualquier dirección. Si utilizo menos el valor cuatro existe, ahora se puede ver que cambiamos con éxito la dirección de la sombra. Y una cosa más importante que debe recordar el valor de desenfoque, valor de color y el valor de propagación son opcionales. Si no proporcionas, también va a funcionar. Déjame mostrarte. Si elimino tanto el valor como guardo el archivo, puedes ver el resultado. Pero si te das cuenta, puedes ver esta vez, tenemos una sombra sólida porque eliminamos el valor de desenfoque. Entonces sin desenfoque, nuestra sombra es que no se vean tan bonitas. Entonces voy a agregar algo de desenfoque. Tres, pixel. Y quiero enviar este archivo. Y si quieres que esta sombra vuelva a ser nítida, solo para pasar cero píxeles. Eso es. Ahora, hablemos spread Value y quiero extenderlo hasta diez píxeles. Entonces aquí, después de la propiedad de sangre, después de la sangre Valor, voy a atar diez píxeles, y voy a volver a poner este archivo. Después de configurar este archivo, como puedes ver, ahora nuestra sombra se extendió hasta diez píxeles. Y si agrego poco borroso, algo difuminado de diez píxeles y configuro este archivo Ahora puedes ver el resultado. Extiende Vallow, extiende la sombra en todas direcciones. Y si quieres cambiar el color, sí, puedes. Supongamos que quieres usar el color azul. Sé que se ve muy asqueroso, pero para el ejemplo, voy a usarlo. Y quiero sub este archivo. Entonces así es como funcionan las sombras. Ahora, quieres agregar otra sombra de caja a este elemento. Sí, puedes. Solo necesitas usar coma y necesitas proporcionar los mismos valores. Esta vez, quiero sombra de caja de ocho píxeles a la dicción. Además, para la dicción YX, voy a usar cinco píxeles Y para la sangre, de nuevo, voy a usar diez píxeles. Y para el valor spread, voy a usar cinco píxeles. No, no voy a usar el spread value para este ejemplo. Entonces directamente voy a usar el color, y para el color, voy a usar el color negro. Y voy a poner este archivo. Arriba para configurar este archivo, aquí puedes ver que tenemos otra sombra. Aquí agregamos otra sombra de color negro. Si aumento el valor, algo de 15 píxeles, 15 píxeles y vuelvo a poner este archivo, ahora se puede ver la sombra muy claramente. Entonces así es como podemos usar múltiples sombras en múltiples ducciones. Aquí puedes usar múltiples sombras tanto como quieras. Entonces así es como puedes usar la propiedad shadow. Por ahora, voy a quitar de esta manera también. Básicamente, voy a comentar esta línea. Ahora hablemos de otro valor, que es el recuadro. Aquí se puede ver esta sombra fuera de la caja, pero ahora quiero usar la sombra dentro de la caja. Entonces, ¿cómo es posible? Sí, es posible si utilizamos el recuadro Vd. Entonces después de la propiedad de color, voy a escribir recuadro Si configuro este archivo, puedes ver el resultado. Ahora, se puede ver esta sombra desde el interior. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender sobre la propiedad de flotación. Así que gracias por ver este video. Estén atentos. 17. Tutorial de flotador de CSS: Hewis bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre la propiedad flotante CSS. Es la propiedad más útil en CSS. Básicamente, sin esta propiedad, no podemos imaginar un sitio web. Entonces entendamos el valor flotante con imágenes. Aquí puedes ver un elemento profundo. Y si creo otro elemento profundo, algo así, entonces lo va a colocar debajo de este elemento dip anterior. Pero si te das cuenta, puedes ver en el lado derecho, tenemos mucho espacio en blanco, pero por defecto, va a colocar la D debajo del elemento de anterior. Entonces necesitamos mover este elemento profundo, este lado. Quiero colocar el nuevo de lament, lado derecho del delement anterior Básicamente, el primer elemento dip ocupa todo el viento del navegador. Por eso no tenemos ningún lugar para nuestro segundo elemento dip lo coloque a un lado este elemento profundo. Para resolver este problema, CSS introducir la propiedad float. Usando la propiedad float, podemos ajustar este segundo elemento dip lado derecho de este elemento profundo anterior, y nuestra propiedad float viene con valor total dos, izquierda y derecha. Para azul profundo, necesitamos usar hoja flotante y para rojo profundo, necesitamos usar flotar derecho. Y además, tenemos un valor por defecto para float, que es ninguno. 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 Live. Y ya creo un documento EstiML llamado index dot TML Y como puedes ver en esta página de estimación, tenemos bit total dos elementos profundos, uno y dos. Y ya estilizo este elemento profundo. Nuestro primer elemento profundo con es de 300 píxeles, y nuestro segundo elemento Deep con es de 200 píxeles. Pero después de crear este elemento profundo, como pueden ver, tenemos mucho espacio en el lado derecho, pero por defecto, CSS este nuestro segundo elemento dip por debajo del elemento db one. Por defecto, nuestros elementos profundos toman el ancho completo de esta página, y ahora necesitamos eliminar el espacio no utilizado usando la propiedad float. Entonces en nuestro primer elemento dip, voy a usar la propiedad float, float LP. Después paso este archivo, como puedes ver, ahora puedes ver nuestro segundo elemento profundo yendo fondo arriba debo un elemento. Pero si utilizo valor flotante a nuestra primera derecha profunda, si configuro este archivo, como pueden ver, nuestro primer elemento se mueve hacia el lado derecho, y nuestro segundo elemento profundo ocupa el espacio en blanco. Pero no quiero esta estructura. Quiero colocar nuestro primer elemento profundo en primera posición, luego quiero mover nuestro segundo elemento profundo lado derecho. Entonces aquí quiero usar float, P, y para el segundo elemento deep, voy a usar float right. Si configuro este archivo, ahora se puede ver la resina, y si aumento el ancho del navegador, aún así, se puede ver que coloca nuestros elementos ep diez a la derecha. Ahora tenemos otro problema. Si notas, puedes ver, tenemos un gran espacio entre estos dos elementos profundos. No quiero ningún espacio. Quiero mover segundo elemento profundo eb sentarse junto a la Deb un elemento Para eso, necesitamos usar el valor de flotación t. en nuestro segundo elemento profundo. Si configuro este archivo, puedes ver el resultado. Ahora bien, no tenemos espacio entre estos dos elementos profundos. Además, se pegan entre sí. Y ahora te voy a dar otro ejemplo. Entonces voy a crear otro elemento profundo, y esta vez, su ID es tres. También, voy a escribir el texto tres. Y voy a duplicar esta sección, y voy a sustituir nuestro ID dos por tres. Y voy a establecer fondo color floración. Por ahora, voy a quitar la propiedad float. No lo necesito. Y voy a configurarlo con 500 píxeles, y voy a configurar este archivo. Después de establecer este archivo, como puedes ver, por defecto, lo coloca detrás del elemento DB uno y deep two porque este es el tercer elemento dB. Y si utilizo la propiedad float, float, derecho, y este este archivo, ahora puedes verlo colocarlo debajo entonces deep dos porque no tenemos espacio nup en el lado derecho para colocar este elemento deep porque es con 500 pixel. Pero si aumentamos el ancho del navegador, entonces ¿qué pasó? Después de aumentar el ancho del navegador, ahora se puede ver, ahora coloca nuestro elemento profundo, lado derecho de este profundo dos elemento porque ahora tenemos suficiente espacio para colocarlo aquí. Pero y si quieres colocarlo debajo del uno y dos elementos profundos, déjame mostrarte cómo quieres usar propiedad de labio flotante, float led. Si usas float lap y configuras este archivo y reduces el ancho del navegador, ahora puedes ver, ahora se coloca perfectamente ese lado de labio de este navegador porque no tenemos suficiente espacio hasta para dip to element. Básicamente usando la propiedad de alimentos, colocamos Dep Elements en el lado derecho era del lado del labio, y hace que nuestro sitio web sea bastante receptivo Entonces esto es para este tutorial. En el siguiente tutorial, vamos a aprender sobre la propiedad tier. Entonces gracias por ver este video. Estén atentos para el siguiente tutorial. 18. Tutorial de CSS claro: Oigan, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con una nueva tesis relacionada con el tutorial. Y en este tutorial, vamos a aprender sobre propiedad clara. Ahora, veamos cuánto valor tenemos en propiedad clara. Tenemos que decir tres propiedad clara, izquierda, derecha, y ambas. Ahora, intentemos entender por qué necesitamos usar esta propiedad. Como puedes ver en este ejemplo, tenemos que sumergir elemento lado a lado, y tenemos algún texto debajo de los dos elementos dip. Y para este elemento de dos dip, utilizamos propiedad de altura mínima. Y para el elemento footer, no utilizamos ningún valor flotante. Pero para este elemento de dos profundidades, utilizamos el valor float derecha e izquierda. Pero el problema es, supongamos que tenemos mucho contenido en nuestro elemento Dp one. En ese caso, este elemento profundo va a desbordarse del elemento profundo Puta, y ese es el gran problema si usamos valor flotante. Pero para resolver este problema, CSS introducir propiedad clara. Para resolver esta propiedad, necesitamos usar la propiedad de lágrima para nuestro último elemento de inmersión, y aquí necesitamos usar auto P. Pero es posible que tenga duda. ¿Por qué necesitamos usar el valor de elevación? Porque tenemos datos de desbordamiento en nuestro elemento de inmersión de laboratorio. Si tenemos datos de desbordamiento en nuestro elemento profundo derecho, en ese caso, necesitamos usar right. Pero, ¿qué? Si tenemos datos dinámicos y no sabemos qué elemento profundo va a desbordarse. En ese caso, usamos lágrima ambos. Si usamos ambos valores, llegó a despejarlo de ambos lados. Entonces, sin perder el tiempo, estudiemos lo práctico y veamos cómo podemos usarlo. Como pueden ver, lado a lado, abro mi editor de código Visu studio y mi navegador usando la extensión de servidor p, y ya creo un documento TML nombre índice punto Y aquí se puede ver en esta página de estimación, tenemos un total de tres elementos profundos, y decimos tres ID para eso, uno, dos, y tres Si notas, puedes ver en nuestro primer elemento Deep uno, y en nuestro segundo elemento Dep dos, usamos para probidad, izquierda y derecha Es por eso que el primer elemento de inmersión se coloca en el lado izquierdo y el segundo elemento de inmersión se coloca en el lado derecho. Pero ¿qué pasa con el tercer elemento dip? Aquí no utilizamos ninguna propiedad float. Es por eso que nuestro tercer elemento dip va detrás de uno y dos elementos dip, y no quiero usar propiedad float para el tercer elemento dip. Entonces voy a usar propiedad clara para eso. Así que para escribir claro ambos. Si configuro este archivo, ahora puedes ver el resultado. Por ahora, voy a usar el 100% con el 100%. Voy a establecer este archivo. Después de usar el 100% de ancho, todavía funciona tal como está. Ahora, de nuevo, voy a comentar esta diapositiva, y voy a aumentar de profundidad a altura. Voy a escribir 400 píxeles. Y voy a poner este archivo. Después de que configuré este archivo, ahora se puede ver, ahora tenemos enfrentando el mismo problema. Pero esta vez, no voy a usar clara ambas propiedades. Esta vez, voy a usar claro a derecha porque la altura de nuestro contenedor profundo del lado derecho es mucho más que la del lado izquierdo. Entonces si configuro este archivo, ahora puedes ver el resultado. Ahora vuelve a funcionar perfectamente. Pero, ¿qué? Si aumento la altura profunda de un elemento. Entonces aquí voy a pasar 600 píxeles. Si lo hago 600 píxeles de altura y luego configuro este archivo, ahora se puede ver el problema. Nuestro contenedor profundo un desbordamiento y altura profunda tres contenedores. Para resolver este problema, necesitamos usar la propiedad lap porque colocamos nuestro contenedor profundo de un lado de vuelta. Entonces si paso vuelta lágrima vulate y pongo este archivo, se puede ver, de nuevo, resolvemos nuestro problema. Pero si usamos ambas propiedades, rasgamos ambas y establecemos este archivo, ahora puedes ver que no hay cambios. Ahora ajusta según el elemento de desbordamiento. Si nuestro segundo elemento div es desbordamiento, lo va a colocar de acuerdo al elemento deep two. Entonces esto es todo para este tutorial. Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 19. Tutorial de fuentes CSS: Hola, chicos. Me alegro de verte de vuelta. 1 segundo. Estoy de vuelta con otro tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre las fuentes CSS. Entonces veamos qué tipo de propiedad de formulario vamos a aprender en este tutorial. Entonces estas son todas las propiedades de fuente que vamos a aprender en este tutorial. Nuestra primera propiedad es el tamaño de fuente. Usando esta propiedad, podemos definir el tamaño de fuente. Our next property es la familia de fuentes. Usando esta propiedad, podemos definir qué fuente vamos a usar. Entonces tenemos el peso de la fuente. Podemos controlar la audacia de la fuente usando esta propiedad. También tenemos otra propiedad llamada estilo de fuente. Usando la propiedad de estilo de fuente, podemos hacer que nuestra fuente sea cursiva. Entonces tenemos variante de fuente y altura de línea, y vamos a aprender sobre ello en nuestro tutorial. Nuestra propiedad de tamaño de fuente viene con algún valor predefinido extra pequeño, extra pequeño, pequeño, más , mediano grande, extra grande, extra grande, etc. Ahora, hablemos de la probidad del tamaño de la fuente. En probidad de tamaño de fuente, podemos aportar valor en diferentes unidades Podemos usar unidad de píxeles, unidad porcentual, unidad EM, unidad ER EM, etcétera Y vamos a aprender todo al respecto en este tutorial. Ahora hablemos de otra propiedad que es la familia de fuentes. Usando la propiedad de familia de fuentes, puede definir qué fuente va a usar y puede usar múltiples familias de fuentes a la vez. Supongamos que usa la familia de fuentes Arial, Heldica y Vardana En caso de que Areal no esté disponible En ese caso, va a usar Heltica. Y si Arial y Heltica ambas fuentes no están disponibles en tu sistema, entonces va a saltar a la Verdana Así que en nuestra familia de fuentes, podemos pasar un valor, lo contrario, podemos pasar múltiples valores. Y recuerda, si alguna de la familia de fuentes no está disponible en tu sistema, en ese caso, va a usar la fuente predeterminada, fuente predeterminada de tu navegador. Ahora, hablemos de otra propiedad que es la altura de línea. Como puede ver en este párrafo, tenemos múltiples líneas. Pero si usamos la propiedad de altura de línea, va a proporcionar espacio entre líneas, algo así. Podemos controlar el espacio entre líneas usando la propiedad de altura de línea. Entonces, sin perder mucho tiempo, comencemos lo práctico y veamos cómo podemos usar estas propiedades. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión del servidor Lip, y ya creo un documento ETML, llamado index dot TML Se puede ver en nuestra etiqueta corporal, tenemos una etiqueta de encabezado, y también tenemos una etiqueta profunda, y dentro de esta etiqueta profunda, tenemos un gran paragrama Y ahora voy a darle estilo a esta caja usando su nombre de clase. Entonces dentro de la etiqueta de la cabeza, voy a usar etiqueta de estilo. Estilo. Dentro de esta etiqueta de mosaico , primero, voy a selt este elemento profundo usando su ID type dot box Entonces dentro del auto resiste, nuestra primera propiedad es con. Primero, voy a asignar un mojado a este contenedor con 400 píxeles. Entonces voy a asignar relleno. Relleno de 25 píxeles. Nuestra siguiente propiedad es border, border, y quiero dos pixel border. Con eso, quiero frontera sólida. Y nuestro color de borde es y. Y quiero establecer este archivo. Después de establecer este archivo, aquí puedes ver el resultado. Primera propiedad que voy a usar, que es tamaño de fuente tamaño de fuente, y voy a tomar tamaño de fuente, 15 píxeles. Si configuro este archivo, aquí puedes ver el resultado. Es reducir nuestro tamaño de fuente. Y si quieres reducirlo más, entonces necesitas reducir el valor. Supongamos que escribo ocho píxeles. Y establecer este archivo. Ahora puedes ver nuestra fuente de párrafo es muy pequeña, y es muy difícil leer este texto. Entonces decido que voy a aumentar el tamaño de la fuente. Voy a hacer que sea de 20 píxeles. Si configuro este archivo, ahora puedes ver el resultado. Entonces aquí usamos valor estático. Y ahora les voy a mostrar otro ejemplo donde vamos a usar valor dinámico. Para eso, voy a reducir alguna línea de este párrafo. Y voy a duplicar esta sección. Y aquí, voy a usar otra clase, que es la casilla dos, y voy a configurar este archivo. Con eso, también, necesitamos darle estilo a la caja de dos secciones. Entonces voy a duplicar esta sección y hemotipo caja dos Pero esta vez había usado el tamaño de fuente diez píxeles. Si configuro el archivo, se puede ver la diferencia entre el tamaño de la fuente. Pero como te dije, vamos a usar cero dinámico. Entonces por ahora, voy a comentar ambas líneas y aquí voy a darle estilo a la etiqueta body. Sí. Entonces voy a teclear cuerpo, y luego dentro del auto ss, voy a usar propiedad de tamaño de fuente. Tamaño de fuente 30 píxeles. Si configuro este archivo, ahora puedes verlo hacer nuestro en las fuentes 30 pixel, que está dentro de la etiqueta body. Ahora podrías tener cociente. Nuevamente, utilizo valor estático, pero te prometo, vamos a usar valor dinámico. Básicamente, vamos a utilizar el valor porcentual. Ahora voy a usar el valor porcentual, así que voy a usar el tamaño de fuente y voy a pasar el 25%. Se llama valor relativo. Si configuro este archivo, ahora puedes ver los diferentes. Para usar el valor dinámico, de lo contrario, porcentaje es valor, deberíamos tener que compararlo con la etiqueta padre. Y como puedes ver, nuestra caja uno y la caja dos son del elemento profundo dentro de la etiqueta corporal. Así que aquí usamos body tag tamaño de fuente 30 pixel. Entonces cuando usamos 25% de 30 píxeles, hace que nuestro tamaño de fuente sea 7.5 píxeles. Y si aumentamos el valor, supongamos 50 píxeles y luego establecemos el archivo. Ahora puedes ver ahora nuestro tamaño de teléfono es de 15 píxeles. Y si usamos el 100% y luego configuramos el archivo, ahora puedes ver tanto el tamaño del teléfono están en venta. Ahora hace que nuestro teléfono tenga un tamaño 30 píxeles porque en nuestro padre, usamos 30 píxeles. La siguiente unidad que vamos a utilizar para nuestro cuarto tamaño, que es EM. Déjame mostrarte. Tamaño de fuente, y voy a usar una EN. Esta unidad también funciona de acuerdo con el valor padre. Y como puede ver, nuestro valor padre es de 30 píxeles. Si usamos 1:00 A.M. Y luego configuramos este archivo, como puedes ver, no hay diferencia de su tamaño de fuente. Pero si lo hacemos a las 2:00 A.M. Y luego configuramos el archivo, ahora puedes ver nuestro segundo elemento de buceo el tamaño de fuente es el doble que nuestro primer elemento de buceo. Como puedes ver en nuestra etiqueta padre, aquí usamos 30 píxeles. Entonces una M estrellas por 30 píxeles, y si lo hacemos dos, básicamente, duplica el valor. Y como te dije, EM también funcionará de acuerdo con el valor del contenedor padre. la misma manera, si se quiere reducir el tamaño de fuente, solo hay que pasar por debajo del uno v. Supongamos que voy a pasar 0.5 am y luego en el archivo, y aquí se puede ver el resultado. Ahora está escrito 15 píxeles. Entonces así es como este tipo de valores trabajan juntos. Sin esto, tenemos otras unidades ERM y muchos mole. Así que vamos a aprender sobre ello en nuestros próximos tutoriales. Por ahora, voy a hablar otra propiedad que es la altura de línea. Entonces voy a comentar ambas líneas. Y voy a poner este archivo. Y también, voy a volver a reservar el tamaño de fuente predeterminado para la etiqueta body Y en nuestro primer cuadro, voy a usar altura de línea propiedad altura de línea, altura de línea. Aquí voy a usar 15 píxeles. Si configuro este archivo, básicamente reducimos nuestra altura de línea de primer elemento. Si lo reduzco más, cinco píxeles y luego configuro este archivo, ahora puedes ver nuestra línea superpuesta entre sí. Y de la misma manera, si se quiere aumentar el hueco de línea, supongamos que voy a pasar 50 píxeles y luego establecer este archivo, ahora se puede ver la diferencia. Ahora aumentamos el espacio entre estas líneas. No sólo eso, también podemos usar unidad EM. Déjame mostrarte. Supongamos que un EM es la unidad predeterminada. Un EM es el tamaño predeterminado. Si configuro este archivo, como pueden ver, C no hay diferencia. Y si quiero aumentar el tamaño de la brecha entre estas dos líneas a partir de la brecha existente, quiero dos brechas de tiempo. Para ello, necesitamos pasar dos valores EM. Si configuro este archivo, puedes ver el resultado. Básicamente, este tutorial es para fuentes, no para las unidades, y ya creo otra sección diferente para unidades. Así que no te preocupes por ello. Ahora, hablemos de nuestra otra propiedad, que es el peso de la fuente. Podemos controlar el grosor de la fuente y la audacia usando esta propiedad Así que voy a escribir fuente Espera, fuente a ocho, y podemos usar algunas ve predefinidas. Tenemos audaz, más audaz, más ligero. Supongamos que voy a usar más audaz, y luego voy a configurar este archivo Después de establecer este archivo, se puede ver el resultado. Como puedes ver, aumenta nuestra fuente a ello. Sé que mi fuente rara vez es visible, así que voy a aumentar el tamaño de la fuente. Tamaño de fuente 18 píxeles. Y voy a poner este archivo. Ahora puedes ver que nuestra fuente se ve muy atrevida. Fuente a ocho propiedades vienen con algún valor predefinido. Tenemos valor 100-900. Si usamos 100 y luego configuramos este archivo, puedes ver que nuestras fuentes se ven mucho más delgadas. la misma manera, si usamos 900, este es el punto más alto y configuramos este archivo, ahora puedes ver, nuevamente, hace que nuestra fuente sea más audaz Ahora usemos otra propiedad, que es la familia de fuentes. Familia de fuentes, y voy a usar la fuente ARL. ARIEL. Por ahora, voy a usar solo una fuente aérea, y voy a configurar este archivo. Después de paso este archivo, ahora se puede ver el resultado. Aquí usamos fuente para 8900, por lo que hace que nuestra fuente aérea sea más audaz Pero si uso 100 de vez en cuando configuro este archivo, puedes ver que nuestras fuentes ven mucho más delgadas que la versión anterior. Y ahora puedes aumentar el peso de la fuente uno por uno. Si usamos 700 y este es este archivo, ahora puedes verlo volver a hacer que nuestra fuente sea más audaz Por ahora, voy a hacer que la fuente a ocho sea normal. Y quiero establecer este archivo. La siguiente propiedad que voy a usar, que es estilo de fuente estilo de fuente. estilo BdFaultFont viene con tres valores, cursiva normal y obliqu Si quieres cursiva tu fuente y sin usar la etiqueta I para eso, solo en tie fonttyle Italia Si configuro este archivo, puedes ver el resultado. Ahora hace nuestro estilo de fuente en cursiva. Y el siguiente valor que tenemos, que es oblicuo Básicamente cursiva y oblicua se ve muy similar. Simplemente tienen menor diferencia entre ellos. Déjame decirte la diferencia. Supongamos que usamos fuente aérea, y esta fuente al viene con variante cursiva. Pero lo que yo cualquier fuente no tengo ninguna versión en cursiva, en ese caso, necesitamos usar obligu value Este valor oblicuo hace que esta fuente sea cursiva. Ahora, hablemos de la siguiente propiedad, que es la variante de fuente, algún tipo de variante de fuente. Y nuestra variante de fuente propiedad Cai total de dos valores, normales y pequeñas mayúsculas Si usamos mayúsculas pequeñas y luego configuramos este archivo, se puede ver el resultado. Básicamente, hace todo el carácter en mayúsculas. Además, si notas después de la parada completa, hace que el segundo personaje sea un poco más grande. No solo eso, puedes usar taquigrafía para toda esta propiedad. Déjame mostrarte cómo. Entonces en nuestro segundo elemento div, voy a usar una fuente de nombre de propiedad. Al principio, necesitamos proporcionar valor de estilo de fuente, y voy a usar Obliq A continuación, necesitamos proporcionar variante de fuente, y voy a usar mayúsculas pequeñas. Y tercero, tenemos que proporcionar el peso de la fuente, y voy a usar la fuente normal. Entonces necesitamos proporcionar altura de línea. Y aquí voy a proporcionar dos E. Y también, necesitamos proporcionar letreros de fuentes. Entonces voy a usar Slash, y voy a pasar 18 pixel A continuación, tenemos que pasar la familia de fuentes. Aquí puedes pasar múltiples nombres de fuente a la vez. También puedes usar un cuarto nombre. Por ahora, voy a usar la fuente AL. Aéreo. Si configuro este archivo, ahora puedes ver el resto. Lo sentimos, este valor significa tamaño de fuente, y este valor prueba la altura de línea. Así que el tamaño de la fuente, voy a usar uno va a hacer. Y para la altura de línea, voy a usar dos EM. Y si configuro este archivo, se puede ver el resultado. Primero, necesitamos proporcionar el tamaño de fuente, luego debe proporcionar la altura de línea, y debe recordar este orden para usarlo en un solo forro. Entonces estas son las propiedades más importantes sobre la fuente. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender sobre CSS, formato de texto, decoración de texto, y muchos más. Así que gracias por ver este video, estén atentos para el siguiente tutorial. 20. Propiedades de formato de texto CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con el nuevo tutorial relacionado CSS. Y en este tutorial, vamos a aprender CSS básico relacionado con la propiedad de texto. Entonces estas son todas las propiedades relacionadas con el texto en CSS. Alineación de texto, alineación de texto último, transformación de texto, sangría de texto, espaciado entre palabras, espaciado entre letras Y vamos a aprender todo al respecto en este tutorial. 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 del servidor Lip, y ya creo un documento EstiML llamado index dot TML Y en este documento de EstiML, tenemos un Profundo y dentro de este elemento profundo, tenemos un párrafo Y como pueden ver, aquí le asignamos un cuadro de nombre de identificación, y le damos estilo a esta caja. Él es con acolchado, borde y uso para aérea familiar. Al principio, voy a usar una propiedad llamada texto alinear texto Alinear. BitifulO párrafo texto align es izquierda. Pero si uso derecho, y luego configuro este archivo, ahora se puede ver el resultado. Ahora nuestro texto de párrafo alineado desde el lado derecho. No sólo eso, tenemos otro valor para esta propiedad, que es centro. Y voy a sub este expediente. Ahora nuestro párrafo alineado desde el centro. Con eso, tenemos otro valor, que es justificar. Entonces si utilizo justify y luego configuro este archivo, ahora puedes ver el resultado. Ahora se puede ver desde ambos lados, tenemos igual espacio. Ahora nuestro texto se alinea desde el lado del labio también desde el lado derecho. Entonces esta es nuestra justificación alinear el trabajo con el texto. Y recuerde, el valor por defecto de alineación de texto es tarde. Ahora hablemos de otra propiedad que es text align last. Entonces aquí, voy a escribir texto alinear último. Esta propiedad de alineación de texto se utiliza para nuestra última línea. Puedes controlar, por qué quieres alinear tu última línea. Supongamos que si quieres alinearlo lado derecho, derecho, y luego establecer este archivo, ahora puedes ver el resultado. Básicamente, apunta a la última línea y se alinea a la derecha. Y si lo hago centro centeral y denso está bien, y guarida en este archivo, se puede ver el resultado También, tenemos otro valor para esta propiedad. Tenemos valor estrellado. También tenemos valor de lujuria. Si utilizo el valor en estrella, es como levantar alinear. Y si usas valor de lujuria, entonces lo que me gusta escribir align. Ahora, hablemos de nuestra siguiente propiedad que es transformar texto, algún tipo texto, transformar. Y primer valor voy a usar, que es mayúscula. Si lo pongo en mayúscula y comprimo este archivo, ahora puedes verlo convertir todo el carácter en mayúsculas Todos estos están ahora en mayúsculas. En el sentido contrario, tenemos otro valor llamado minúsculas. Uterset este archivo, como puedes ver, convierte todo el carácter en minúsculas Siguiente valor que voy a usar, que es capitalizar. Si utilizo este valor y el conjunto de este archivo, ahora puedes verlo convertir todo el primer carácter de cualquier palabra mayúscula. Toda la palabra que puedas ver en este párrafo empieza con mayúscula más adelante. Además, tenemos otra propiedad que no es ninguna. Es trabajo como valor por defecto. Entonces por ahora, voy a usar mayúsculas. Y voy a poner esto bien. Siguiente propiedad que voy a usar, que es sangría de texto Entonces voy a escribir sangría de texto. Esta propiedad, particularmente trabajar en primera línea. Usando esta propiedad, puedes mover la primera línea. Supongamos que no quiere comenzar su primera línea desde esa posición. Quieres iniciarlo hasta 100 píxeles. Para que puedas pasar para pasar 100 píxeles. Y si configuro este archivo, se puede ver el resultado. Ahora nuestra primera línea proporciona un margen de 100 píxeles a t. Para borrar este tema, por ahora, voy a comentar esta línea. Y si lo vuelvo a poner, ahora te queda más claro cómo es el trabajo. Siguiente propiedad que voy a usar, que es el espaciado entre palabras, tipo de sonido, espaciado entre palabras. Usando esta propiedad, podemos proporcionar espacio entre palabras. Supongamos que agrego un espacio de 30 píxeles entre nuestras palabras. Si configuro este archivo, puedes ver el resultado. Ahora, así como puede ver, la brecha entre palabra es de 30 píxeles. Si quieres aumentarlo, solo para pasar un valor mayor y desde este archivo, puedes ver el resultado. Por ahora, voy a comentar esta línea. A continuación, voy a usar otra propiedad, que es el espaciado entre letras. Interlineado entre letras, quiero 20 píxeles. Si configuro este archivo, ahora puedes ver el resultado diferente. Usando la propiedad de espaciado de Watts, podemos crear espacio entre dos palabras Pero usando la propiedad de espaciado entre letras, podemos crear espacio entre letras. Por eso se puede ver la brecha entre estas letras. Por ahora, voy a usar cinco píxeles porque se usa 20 píxeles en número para letras. Y voy a poner este archivo. Entonces estas son las propiedades de formato de texto más útiles en CSS. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a hablar de CSS toma propiedad de decoración. Así que gracias por ver este video. Estén atentos. 21. Tutorial de decoración de texto CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con una nueva tesis relacionada con el tutorial. Y en este tutorial, vamos a aprender sobre tomar propiedades de decoración. Aquí puedes ver, tenemos un total de tres tomas de propiedad de decoración, toma línea de decoración, toma color de decoración, toma estilo de decoración. Si usa propiedad de línea de decoración fiscal, entonces tiene cuatro subrayado de valor, sobre línea de línea a través y ninguno Y estos son todos toman los valores de propiedad de estilo de decoración, sólidos punteados, de doble onda, y también toma propiedad de decoración vienen con taquigrafía No es necesario escribir esta línea de tres para propiedad y VDO Puedes usar esta taquigrafía. Toma decoración bajo tarifa de línea WV. Primero, necesitas usar Sabor DegreonPperty, luego necesitas pasar Toma valor de línea de decoración, que es subrayado Y a continuación, hay que pasar tomar degreon valor de color. Y por fin, hay que pasar lleva valor de estilo de decoración. Entonces, sin perder el tiempo, comencemos lo práctico y veamos cómo podemos usar estas propiedades. Entonces como pueden ver lado a lado, abro mi Visual Studio Cditor y mi navegador usando la extensión del servidor Lip, y abro mi documento de estimación anterior Entonces usemos la decoración fiscal Pperty. Pero primero, voy a usar esta propiedad en nuestra etiqueta de encabezado. Entonces aquí, voy a seleccionar la etiqueta de encabezado, H uno, luego la lista. Voy a teclear toma decoración en. Línea de decoración de impuestos, y voy a usar subrayado propiedad Subrayar valor. Si configuro este archivo, aquí puedes ver el resultado. Como pueden ver, tenía un subrayado en nuestra etiqueta de encabezado uno Y si no quieres usar subrayado, solo necesitas escribir otro valor Línea ovalada y establecer este archivo. Se puede ver el resultado. Se puede utilizar la línea de decoración Tex en cualquier texto. Podría ser párrafo, etiqueta de encabezado, etiqueta UL, etcétera Ahora déjame mostrarte otro anuncio sobre línea de decoración de texto, que es línea a través. Si utilizo este valor y luego configuro este archivo, como pueden ver, es trabajo como strike tag en nuestra tabla. Tenía una línea en medio de este texto. Por ahora, voy a usar el valor de subrayado. Subrayar. Toma color de decoración, toma color de decoración. Toma color de decoración, voy a usar color rojo. Si configuro este archivo, puedes ver el resultado. Y nuestra última propiedad es tomar estilo de decoración. Entonces voy a escribir decoración de texto, estilo. Si utilizo dash y luego configuro este archivo, puedes ver el resultado. Como frontera dst, agrega subrayado a este texto Del mismo modo, se pueden utilizar otros valores. Si quieres usar dotate, puedes ver el resultado. Además, puedes usar Pasador ilm. Vas a sumar doble subrayado, o esta prueba y tenemos otro valor, que es onda Si utilizo esta vista y luego configuro este archivo, como puedes ver, ahora nuestro subrayado sigue el estilo del patrón, y ahora te voy a mostrar el short y como puedes usar la propiedad shorten Entonces el tipo Hemo lleva decoración. Toma decoración, primero tenemos que pasar valor de línea, que es subrayado, y luego tenemos que pasar valor de color, que es rojo Entonces tenemos que pasar decoración estilo velo, que es manera. Y si comento esta línea y configuro este archivo, se puede ver el mismo resultado. Siempre prefiero taquigrafía sin usar líneas múltiples. Entonces esto es todo para este tutorial. En nuestro siguiente tutorial, vamos a aprender sobre qué wrap y qué propiedad break. Así que gracias por ver este video. Estén atentos para el siguiente tutorial. 22. Tutorial de ajuste de palabras y descanso de palabras: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. En este tutorial, vamos a aprender dos nuevas propiedades, Word wrap y word break. Veamos por qué necesitamos usar la propiedad de WordAP. Como puedes ver en este ejemplo, tenemos un contenedor profundo y también tenemos una palabra no rompible Como pueden ver, la palabra es muy larga. Entonces, si usas este tipo de palabra grande y ya dices Dev weed, entonces en ese caso, va a desbordarse a este contenedor. Para resolver este problema, CSS introduce WordAP y esta propiedad Wadrap vienen con dos valores, break word Si usamos breakword y epi file, entonces vas a romper la palabra según el tamaño profundo Ahora, hablemos de nuestra otra propiedad que es art break. Esta propiedad artbrek viene con un valor total de dos, romper todo y mantener Mantener todo el valor es el valor predeterminado. Necesitamos usar break all value. Déjame mostrarte un ejemplo. Como puedes ver, tenemos un elemento DB y dentro de este elemento deve, puedes ver un párrafo En este párrafo, tenemos muchas palabras. Si usamos lo que romper y romper valor, entonces va a romper nuestra palabra por caracteres. Básicamente, va a romper todas las palabras. Si no usamos break property, entonces nuestra palabra hindi empieza desde la siguiente línea. Espero que ahora te quede claro cómo podemos usar qué romper propiedad. Sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla 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 creo un documento de estimación llamado index dot HTML. En esta página de estimación, como puedes ver, tenemos un elemento profundo con ID, caja. Además, tenemos una etiqueta de rumbo. Al principio, voy a darle estilo a esta caja D. Él para escribir tiene etiqueta, y nuestra identificación profunda es caja. Entonces dentro de la surge, primera propiedad voy a usar con W 400 Pixel. Además, voy a usar border, y quiero un borde de píxel. Con eso, quiero borde sólido y nuestro color de borde es rojo. Voy a establecer este archivo. Hagámoslo de dos píxeles. Ahora es más visible. Ahora voy a agregar en palabra, que va a tomar más de 400 píxeles de ancho. Déjame mostrarte. Voy a incrementar Lorem O R E M. Si configuro este archivo, se puede ver el problema Ahora nuestra palabra se desborda de este elemento profundo. Ahora necesitamos romper la palabra según el tamaño profundo. Para eso, necesitamos usar una propiedad y la propiedad llamada Wordrap Aquí voy a escribir word rap y necesitamos usar un valor llamado breakword Si utilizo este valor y luego sub este archivo, se puede ver el resultado. Ahora rompe la palabra según el ancho profundo. Si hago zoom un poco esta página, ahora es más claro para ti. Este es el uso de la propiedad Wadrap, y viene con otro valor que es normal y es la voluntad predeterminada Entonces no voy a usar esta vista. Básicamente, Wadap solía romper palabras largas, pero ahora voy a aumentar un poco la longitud de esta palabra Voy a escribir algo de D después de eso y voy a deslizar este archivo. Si configuro este archivo, ahora puedes ver el resultado diferente. No rompió la palabra. Básicamente, lo mueve a la siguiente línea. Como te dije, Wadrap sólo se usa para romper palabras largas, no los orbes medianos Para resolver este problema, necesitamos usar otra propiedad que es Word break. Voy a comentar esta línea en la siguiente línea, voy a usar Word break. Propiedad Word Break, necesitamos usar break all value. Si configuramos este archivo, puede ver el resultado. Rompe con éxito la palabra larga y también rompe con éxito la palabra pequeña. Este es el uso de ambas propiedades. Esto es para este tutorial. Gracias por ver este video, Estén atentos para el siguiente tutorial. 23. Tutorial de sombras de texto de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con una nueva tesis relacionada con el tutorial. En este tutorial, vamos a aprender sobre una nueva propiedad, que es la sombra de texto. Ahora veamos qué es la sombra de texto. Aquí hay una palabra llamada hola palabra y no tiene ninguna sombra. Pero si uso te shadow para esta palabra, ahora se ve así. Ahora puedes ver sombra detrás todos los personajes y para crear esta toma sombra, necesitamos usar la propiedad te shadow. Como puede ver, primero pasamos dos píxeles dos píxeles, cinco píxeles y naranja. Nuestro primer valor de dos píxeles significa sombra H. H shadow significa sombra horizontal. Y nuestro siguiente valor significa sombra vertical, sombra V, y nuestro tercer valor significa radio de desenfoque. trabajo de sombra horizontal en la dirección izquierda y derecha, y el trabajo de sombra vertical en la dirección superior e inferior. Usando el valor de desenfoque, puedes controlar la nitidez de esta sombra y nuestro último valor significa Aquí puede usar nombre de color, valor hexadecimal, valor argv, etcétera. Ahora intentemos entender la sombra horizontal y vertical con interfaz gráfica. Aquí puedes ver que tenemos X xs y dirección YxS xxSTNDS para sombra horizontal y YxSTNDS para sombra vertical y YxSTNDS Si quieres mover tu sombra horizontalmente lado derecho, entonces necesitas pasar 1234 valor y si quieres moverlo dejar lado, entonces necesitas pasar menos valor menos 1234. De la misma manera, el trabajo de sombra vertical. Si mueves tu sombra a la baja, entonces necesitas pasar uno, dos, tres, cuatro valor Si quieres mover tu sombra hacia arriba, entonces necesitas usar menos valor menos uno menos dos menos tres menos cuatro. Espero ahora te quede claro qué es H shadow y qué es V shadow. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión Live Server y ya creo un nombre de documento EstiML index dot HTML Y como pueden ver, en nuestra etiqueta corporal, tenemos una etiqueta de encabezado uno. Al principio, voy a darle estilo a esta etiqueta de encabezado. Voy a seleccionar esta etiqueta de encabezado usando su nombre de etiqueta H uno. Después dentro de la propiedad Clirasf, voy a usar color negro coloreado Segunda propiedad que voy a usar, que es sombra de texto, texto, Sombra. Primero, voy a proporcionar el valor horizontal horizontal a píxel. Entonces necesitamos proporcionar el valor del eje vertical a píxel. Si notas puedes verla usar valor horizontal positivo, va a mover nuestro lado derecho de sombra y también usar valor vertical positivo. Significa que va a mover la sombra hacia abajo. Entonces tenemos que pasar valor de desenfoque. Para valor de desenfoque, voy a pasar cinco píxeles y necesitamos pasar color. Para el color, voy a usar el verde. Si configuro este archivo, puedes ver el resultado. Si elimino el valor de desenfoque y luego configuro este archivo, ahora puedes ver nuestra sombra luciendo muy nítida y si quiero moverla lado del labio, así que voy a pasar menos valor menos dos píxeles en dirección horizontal. Si configuro este archivo, puedes ver el resultado y también si quieres moverlo hacia arriba, entonces necesitas usar menos valor vertical. Si configuro este archivo, puedes ver el resultado. Ahora, de nuevo, voy a usar el valor de desenfoque, pero esta vez, voy a usar el valor de desenfoque de dos píxeles. Después de establecer este archivo, como se puede ver en dos píxeles de sangre a esta sombra Y si eliminas el color y luego estableces este archivo, entonces por defecto, va a agregar color negro como sombra. Así es como podemos usar tomar la propiedad de sombra. Es una de las propiedades más útiles en CSS. Esto es para este tutorial. Gracias por ver este video estatua. 24. Tutorial de espacio en blanco de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vamos a aprender sobre CSS propiedad de espacio en blanco. Esta propiedad vino con valor total de cinco, normal, no AP, pre línea, pre dap. Normal es el valor predeterminado. Ahora te voy a explicar qué es el espacio en blanco y por qué necesitamos usar esta propiedad. Como puedes ver en este ejemplo, tenemos un elemento profundo y dentro de este elemento profundo, tenemos un párrafo ficticio Si te das cuenta puedes ver aquí arreglamos con a este contenedor, 200 pixel, entonces utilizo el valor por defecto, espacio en blanco, normal. Como ya les dije, lo normal es el valor por defecto, por lo que es el trabajo tal como es. Pero si usas espacio en blanco, asentir el valor, entonces puedes ver la diferencia Ahora puedes ver todo el párrafo en una sola línea. Puedes ver que nuestro contenido se desborda de este contenedor, y si quieres ocultar el contenido de desbordamiento, sí , puedes, necesitas usar desbordamiento oculto. A veces necesitamos mostrar en una sola línea. Es por eso que necesitamos usar Nodev VD esta propiedad vienen con otro valor, que es pre tag en nuestro Atmel Si sabes cómo funcionan pre tag en Atmel, entonces puedes entender Aquí puede proporcionar el espacio Asma que desee. Puedes proporcionar mucho espacio en blanco en tu texto y también es similar con valor nob Déjame explicarte el tema con ejemplo. Como puedes ver, aquí usamos pre tag. En este elemento profundo tenemos un total de tres líneas, pero no utilizamos ninguna etiqueta de rotura para romper la línea. Pero si notas la salida, aquí puedes verla impresa como es a nuestra estructura TMA Imprime ambas líneas por separado. Supongamos que si proporciono espacio entre Dlo y set, aquí se puede ver el ejemplo También proporciona el espacio en nuestra sección de salida dentro de este desarrollo. Ese es el uso de pre wave. Por defecto, etiqueta TML, no tome este espacio, pero héroe use pre valor Por eso toma este espacio. Proporciona el mismo espacio, lo que proporcionamos en nuestra estructura EstiML Ahora, hablemos de otro valor que es la prelínea. Es bastante similar con pre valor, pero no toma más de un solo espacio. Es solo contar el espacio único. Esa es la diferencia entre prelínea y pre valor. Y si hablo de nuestro siguiente valor, que es pre Ap, también es trabajo como pre tag. Toma espacio en blanco tal como es, ingresa etiqueta tal como es, pero no AP no funcionan en ella. Aquí no se puede mostrar todo en una sola línea. Sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código de estudio de resultados y mi navegador usando la extensión Live Server y ya creo un documento TML llamado index dot DM Entonces, como es habitual en esta página de estimación, tenemos una etiqueta profunda con un cuadro de nombre de identificación, y diseñamos esta etiqueta dip. Aquí dijimos 300 píxeles fijados a él y fijamos un borde a píxel negro sólido. Al principio, voy a hacer zoom un poco esta página para que la veas con claridad. Al principio, voy a convertirlo en un trazador de líneas, así que no voy a usar Rb Val. Voy a escribir blanco espacio en blanco, sin RAD. Si configuro este archivo, aquí puedes ver el resultado. Ahora hace de nuestro párrafo un trazador de líneas. Como puede ver la barra de desplazamiento horizontal en la parte inferior. Yo rompo el párrafo en nuestra etiqueta de estimación usando Enter, aun así puedes verlo imprimir nuestro párrafo en una sola línea. Además, si proporciono múltiples espacios y luego configuro el archivo, aún así se puede ver el mismo resultado. Si desea ocultar estos datos de desbordamiento, entonces puede usar la propiedad oculta de desbordamiento. Desbordamiento oculto. Y establecer este archivo. Por ahora, no quiero esto, así que voy a usar, así que voy a comentar esta línea y esta vez voy a demostrar que prevalece. Espacio en blanco, pre. Si configuro este archivo, ahora puedes ver el resultado. Ahora se puede ver el espacio en blanco ante este mundo. Si paso más espacio en blanco y configuro este archivo, aún se puede ver el resultado. También puedes notar que puedes ver desde aquí, rompemos nuestra línea. Si vuelvo a romper esta línea y luego configuro este archivo, aún así, se puede ver el resultado. Soporte de pre valor NoDAP. Por eso nuestro contenido puede desbordarse de este contenedor. También soporta espacios en blanco. No sólo eso, también soporta saltos de línea. Si notas puedes ver nuestra última línea desbordamiento de este contenedor porque no hay suficiente espacio para esta línea en este contenedor. Por eso desborda e imprime todo el contenido en una sola línea. Ahora hablemos de otro valor que es pre línea. Si usamos pre line, y luego establecemos este archivo, aquí puedes ver la diferencia. No apoyo ningún rap, pero apoya la nueva línea. Si divido esta línea y luego configuro este archivo, aquí se puede ver el resultado. Si usamos valor de prelínea, entonces no imprime nuestro párrafo en una sola línea Ahora hablemos del último valor, que es pre rap, algún tipo, pre rap. Voy a sub este archivo. Después de sub este archivo, ahora se puede ver el resultado. Pre rap tampoco soportan ningún RAP, pero soporta espacios en blanco y saltos de línea. Esa es la diferencia entre todo este valor, y también viene con otro valor llamado normal y es el valor predeterminado, así que no lo voy a usar aquí. Esto es para este tutorial. En el siguiente tutorial, vamos a aprender sobre el desbordamiento de texto. Gracias por ver este video. Estén atentos para el siguiente tutorial. 25. Tutorial de desbordamiento de texto de CSS: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con los SSI y en este tutorial, vamos a aprender sobre un nuevo CSIS relacionado con la propiedad y nuestro nombre de propiedad es Estos son los valores que vienen con la propiedad de desbordamiento de texto CSS. Clip clip es el valor por defecto, puntos suspensivos y cadena. Ahora veamos por qué necesitamos usar la propiedad de desbordamiento de texto. En el tutorial anterior, aprenderemos sobre NoAP sabemos si usamos espacio en blanco de valor norab, sin RAP, entonces va a hacer todo nuestro párrafo en una sola línea y se desborde de nuestro contenedor Si usamos overflow hidden property, entonces hideo text Pero ahora quiero decirle a nuestro usuario, este texto no ha terminado. Quiero mostrarle puntos triples, lo contrario, ETC, etcétera Si usamos propiedad oculta directamente, como puede ver, a veces puede cortar nuestro texto y no se ve tan profesional para resolver este problema, puede usar la propiedad de desbordamiento de texto. Si usamos elipsis de valor de desbordamiento de texto, entonces va a agregar triple punto después de esta oración, y viene con otra cadena de valores Aquí podemos especificar la cadena exacta lo que quiero imprimir. Supongamos que dentro de los cuadrados pasamos punto doble, vas a imprimir la misma cadena que es después de esta línea. Empecemos la práctica y veamos cómo podemos usarla. 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 creo un documento TML llamado index dot HTML Y como puedes ver dentro de la etiqueta corporal, tenemos una etiqueta profunda y aquí establecemos una caja de identificación, y además diseñamos nuestro ID. Aquí decimos 300 píxeles de ancho dos píxeles borde y espacio en blanco, norab Después de usar Whitespace No AB, como puedes ver, nuestro desbordamiento de contenido de este contenedor Si solo uso desbordamiento y uso oculto y configuro este archivo, aquí puedes ver que no se ve genial. Cortó nuestro texto. Un usuario no puede entender es este fin o no, pero quiero mostrarle al usuario que queda más palabra en este párrafo. Para eso, necesitamos usar desbordamiento de texto. Entonces para comentar esta línea y aquí voy a escribir desbordamiento de texto, y voy a usar elipsis Si configuro este archivo, vaya, creo que hay un problema Necesitamos usar el valor de desbordamiento de texto con valor de desbordamiento. Tenemos que hacer que se desborde oculto y luego establecer este archivo, ahora se puede ver el resultado. Se agregan tres puntos último de esta línea. O sea, tenemos más contenido en el Sparagram. Este es el primer valor. También tenemos otro valor. Entonces, para duplicar esta línea y comentar la anterior. Esta vez, voy a usar otro valor que es stream. No necesitamos escribir el nombre Value, necesitamos pasar dentro de los códigos dobles, voy a pasar la cadena exacta lo que quiero imprimir. Quiero imprimir ss cuadrados y luego dentro del cuadrado sis quiero imprimir dos puntos. Después de configurar este archivo, como pueden ver, no está funcionando, creo que hay un problema con el navegador. Tal vez Chrome no soporta esta característica. Voy a copiar mi URDL y voy a abrir Firefox. Como puedes ver, aquí abro mi navegador Firefox y si paso esta URL y luego presiono Enter, ahora puedes ver el resultado. Aquí lo puedes ver en la cadena exacta, lo que escribimos en nuestra sección CSS. Así es como se puede utilizar la propiedad de desbordamiento de texto. Aquí puedes pasar cualquier cadena, lo que quieras imprimir. Esto es para este tutorial. Gracias por ver este video. Estén atentos. 26. Tutorial de modo de escritura de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender otra nueva propiedad, que es escribir movimiento. Entonces veamos qué tipo de valor tenemos en esta propiedad. Entonces estos son todos valor que vamos a utilizar en esta propiedad. Nuestro primer valor es TV con guión horizontal, y es un valor predeterminado Soportes de TV para arriba e inferior. Nuestro siguiente valor es RL vertical. RL significa derecho a levantar. Entonces tenemos R. R vertical significa labio a derecha. Entonces tenemos a los lados RL y lados R. Entonces como pueden ver, tenemos un elemento profundo, y en este elemento profundo, tenemos un párrafo dammi Y si usas la propiedad de modo de escritura, entonces puedes escribir tu párrafo así. Puedes rotar verticalmente tu párrafo. Usando esta propiedad, podemos rotar particularmente el contenido del texto, no el elemento deep. 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 del servidor p, y ya creo un documento de estimación llamado index dot HTML. Y si te das cuenta, puedes ver en esta página estal, tenemos una etiqueta profunda, y aquí establecemos un cuadro de nombre de identificación Y también, tenemos un párrafo en esta etiqueta profunda. Y si notas en nuestra sección de estilo, ya establecemos en ancho fijo a este desarrollo, y también usamos border. Entonces al principio, voy a usar nuestra propiedad, que es el modo de escritura. Modo de escritura. Primer valor que voy a usar, que es RM vertical. Al paso de este archivo, aquí puedes ver el resultado. Si notas, ahora puedes ver que nuestra D sigue siendo de 400 píxeles, pero se enruta el párrafo, y giramos este párrafo verticalmente de derecha a izquierda Si aumento el tamaño del párrafo, entonces hemotipo bajo m 100 y luego en este archivo, ahora se puede ver el resultado Comienza desde la derecha, luego va al lado del labio. Y si lo hago labio opuesto a derecha. Entonces primero para escribir L, luego voy a escribir R y el conjunto de este archivo. También se puede ver el resultado. Ahora puedes ver ahora nuestras corbatas comienzan desde el lado del labio y van hacia el lado derecho. Ahora, déjame mostrarte otra propiedad que es sideway RL Entonces voy a quitar R vertical y voy a escribir de lado RL Si configuro este archivo, Después de sub este archivo, como puedes ver, no está funcionando porque navegador Chrome no envía esta función. Entonces voy a abrir este archivo en Firefrogs Browser. Si pagino esta URL y abro este archivo, puedes ver el resultado. Por lo que algunas características no son compatibles con el navegador Chrome. Por eso necesitamos usar el navegador Firebog. Ahora, hablemos del último valor, que es la TV horizontal. Quiero usar TV horizontal. Si configuro este archivo, como pueden ver, imprima el resultado tal como está. Además, si abro mi navegador Firefox y luego vuelvo a cargar este navegador, también, puedes verlo imprimir como es porque es el valor predeterminado Así que esto es todo acerca de la propiedad de modo de escritura en CSS. Gracias por ver este video. Estén atentos para el siguiente tutorial. 27. Tutorial de conteo de columnas de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con el árbol CSS. Y en este tutorial, vamos a aprender un nuevo CSS relacionado con la propiedad, y nuestro nombre de propiedad es Colm count. Es una de las propiedades más útiles. Entonces veamos por qué es útil. Entonces como pueden ver, tenemos un elemento profundo, y en este elemento profundo, tenemos un párrafo. Este es un párrafo normal, y es aburrido. No se ve muy interesante. Pero si notas en periódicos y otras revistas, puedes ver nuestros párrafos, el párrafo dividido en columnas. A veces se ve así. Proporciona espacio entre la columna. Podemos crear esta parte usando el conteo de columnas. Y todas estas son propiedades relacionadas con el recuento de columnas, recuento de columnas, ClumGap, regla de colum, regla de colum con, estilo de regla de colum, color de regla de colum, colum con, aleta de colum, colum Ya sabemos sobre el recuento de columnas, y veamos cómo funciona la brecha de columna. Usando la propiedad de conteo de columnas, podemos dividir el párrafo en tres partes, pero usando la propiedad de brecha de columna, podemos proporcionar espacio entre estas particiones. Puede aumentar el tamaño de la brecha, lo contrario, puede disminuir el tamaño de la brecha. Nuestra siguiente propiedad también es propiedad importante, que es regla de columna. Usando esta propiedad, puede proporcionar líneas entre estas particiones, y también puede controlar el grosor usando esta propiedad. Siguiente propiedad, tenemos ancho de columna. Usando esta propiedad, puede aumentar el ancho de columna, lo contrario, disminuir el ancho de columna. Nuestro párrafo dividido en tres columnas, pero usando esta propiedad, se puede controlar el tamaño. 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 Visales studio y mi navegador usando la extensión de servidor en vivo, y ya creé un documento TML llamado index dot Y en esta página de tML, tenemos una etiqueta profunda, y le asignamos una ID a esta profunda, que es box Y si te das cuenta, su estilo esta caja. Uso de héroe fijo con 600 píxeles, y también decimos frontera. Entonces primera propiedad que voy a usar, recuento de columnas. Recuento de columnas, recuento de columnas, y quiero dividir este párrafo en tres columnas tres. Y voy a poner este archivo. Después de establecer este archivo, aquí puedes ver el resultado. Se parte nuestro párrafo en tres partes. Aquí puedes dividir tu párrafo en muchas partes. Supongamos que si quieres dividir este párrafo en cuatro secciones, sí, puedes. Tienes que pasar cuatro. Es necesario establecer este archivo. Pero por ahora, me gustaría ir con tres partes. Entonces este es el uso de la propiedad de recuento de columnas. Ahora hablemos de otra propiedad que es la brecha de columna. Así Hemotipo columna brecha y él para pasar un peso. Y como pueden ver, esta es la brecha por defecto. Y si quiero aumentar la brecha, solo ayúdame a pasar una ola. Supongamos que quiero aumentar la brecha de 50 píxeles. Y si configuro este archivo, aquí se puede ver el resultado. Y si quieres más brecha, solo aumenta el valor. Así que su pase de 100 píxeles. Después de establecer este archivo, ese es el resultado. Por ahora, me gustaría ir con 50 píxeles. Siguiente propiedad que voy a usar, que es regla de columna. Y tenemos muchas propiedades relacionadas con la regla de columna. Entonces primera propiedad voy a usar columna Regla W. Por ahora, voy a usar columna con tres píxeles. Y siguiente propiedad voy a usar estilo de regla de columna. Columna. Regla. Estilo. Estilo de raíz de columna, y voy a usar valor de punto. Si configuro este archivo, sí, se puede ver el resultado. Uy, creo que hice algo mal porque aquí usamos PC, no pixel Entonces necesitamos usar el valor de píxel PX. Entonces si configuro este archivo, ahora puedes ver el resultado. Si elimino este borde, entonces voy a hacer que sea cero pixel y vuelva a configurar este archivo. Ahora se puede ver esta línea sólo aparecen entre las columnas, no el lado izquierdo, no el lado derecho, tenemos diferente estilo similar a la propiedad border. No te voy a mostrar uno por uno. Porque ya estamos familiarizados con eso. Y ahora voy a usar otra regla de columna relacionada con la propiedad. Entonces voy a duplicar esta sección, y esta vez, voy a usar el color. Regla de columna, color. Y aquí voy a usar de color rojo. Si configuro este archivo, ahora puedes ver el color de las reglas de columna. No sólo eso, también se puede utilizar la taquigrafía para la propiedad de regla de columna Déjame mostrarte. Entonces justo cuando empatas regla de columna. Y primero, tenemos que pasar regla de columna con, que es de dos píxeles. A continuación, tenemos que pasar el estilo Regla de Columna, que es sólido. Y entonces tenemos que pasar regla de columna coloreada. Por ahora, voy a usar el verde. Y voy a comentar esta línea de tres. Si configuro este archivo, como puedes ver en mi navegador, ahora nuestra regla de columna es de color verde, y es de dos píxeles y su estilo es sólido. Y si quieres aumentar la regla de columna con solo para aumentar el valor, supongamos que uso diez píxeles y el conjunto de este archivo, puedes ver el resultado. Ahora hablemos de otra propiedad que es el peso de columna. Para usar esta propiedad, necesitamos comentar esta línea, recuento de columnas porque no usamos tanto la propiedad a la vez. Entonces voy a comentar esta línea y ella para usar columna nosotros. Ancho de columna, y quiero hacer mi columna con 100 píxeles. Si configuro este archivo, aquí puedes verlo dividir nuestra columna en cuatro partes. Pero si reduzco la columna dio valor, cero pixel y ademas voy a reducir regla de columna con un pixel y luego este archivo. Ahora puedes ver que divide nuestra columna en seis partes porque siempre se trata de dividir nuestra columna en partes iguales. Como puedes ver, héroe se fija con 600 píxeles. Entonces si divido 600 píxeles con 100, entonces va a devolver seis. Por eso se dividió en seis partes. Ahora hablemos de otra propiedad que se llama column span. Pero antes, voy a comentar esta línea, y voy a descomentar esta línea, recuento de columnas Además, voy a usar 20 píxeles de brecha entre esta columna y nuestro estilo de regla de columna sólido y dos píxeles. Y el grosor es de dos píxeles. Si pongo este archivo, de nuevo, estamos de vuelta a la vieja etapa. Ahora te voy a mostrar ¿ cómo podemos usar la propiedad de columna Span Supongamos que quiero mover este encabezado una etiqueta dentro de este devaluar Entonces voy a mover este encabezado una etiqueta dentro esta casilla D. Si configuro este archivo, puedes ver el resultado. encabezado uno es mucho más grande para este ejemplo, así que voy a usar el encabezado cinco, etiqueta, H cinco. Y guárdala otra vez. Ahora puedes ver nuestra etiqueta de rumbo cinco ajustar en nuestra columna uno, y no la quiero. Quiero aumentar el tamaño esta columna para esta etiqueta en particular. Entonces si utilizo el encabezado tres, el conjunto de este archivo. Ahora voy a mostrarte cómo va a funcionar exactamente. Entonces tenemos que seleccionar esta etiqueta encabezando tres, H tres. Entonces dije la culia dice, necesitamos usar span de columna. Palmo de columna. Y voy a proporcionar todo el espacio dentro de esta profundidad. Entonces voy a pasar todo. Si configuro este archivo, puedes ver el resultado. Ahora, para esta etiqueta en particular, ampliamos el tamaño de la columna. Entonces esto es para este tutorial. En el siguiente tutorial vamos a aprender sobre CSS para regla de fase. Así que gracias por ver este video. Estén atentos. 28. Tutorial de reglas de @font face: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender una nueva propiedad en la fase de fuente roja. Usando esta propiedad, puedes descargar cualquier fuente y puedes usarla en tu página web. Ahora la pregunta es ¿por qué necesitamos usar esta propiedad? Ya tenemos una propiedad llamada familia de fuentes. Entonces como puede ver, si usamos la familia de fuentes, podemos proporcionar ARIA Heltica and Sensory en esta familia de fuentes Si la fuente ARL instala el sistema de usuario, entonces va a aplicar la fuente ARL Si no es así, entonces va a chequear por Heltka también, si la Heltica no está disponible, entonces va a saltar al Sansai Y si todos estos no están disponibles, ahí va a usar el navegador de fuentes predeterminado. Para resolver este problema, anteriormente utilizamos WebSafFonts Las fuentes Websap son compatibles con muchos sistemas operativos populares como Windows, Mcewas, Además, es compatible con sistemas operativos móviles, Android Iwase Este sistema operativo utiliza un grupo común de fuentes en su sistema. Entonces ese es el método anterior que podemos usar diferentes fuentes. Pero ahora tenemos airear fuente reress propiedad. Utilizándolo, podemos usar cualquier fuente en nuestra página web. Y así es como puedes usar esta propiedad fonfhase. Fontfhase está en los calices que necesitas para transmitir a la familia. Y aquí puedes tomar tu propio nombre. Se puede pasar cualquier nombre. Y siguiente propiedad que necesitas usar, que es fuente. Y en cambio la fuente, hay que pasar la URL, la URL exacta de la fuente. Y recuerda tomar el nombre de la fuente, aquí no puedes usar ningún espacio entre el nombre. Aquí puedes usar estuche camel, lo contrario guión, pero no puedes usar el espacio A continuación, es necesario pasar la fuente y aquí pasar la ruta exacta con la extensión. Primero, debes pasar el nombre de la carpeta, luego debes usar barra diagonal y tu nombre de fuente Ahora veamos ¿cómo puedes usar esta fuente? Para utilizar este aficionado, es necesario utilizar la propiedad de la familia de fuentes. Entonces necesitas pasar el nombre de fuente, el nombre de fuente que asignes en tu selector vasto de fuente. 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 Visal studio y mi navegador usando la extensión del servidor lip, y ya creé un documento ML llamado index dot TML Y como puedes ver, dentro de la etiqueta corporal, tenemos una etiqueta profunda con caja de nombre de identificación. Y ahora necesitamos usar esta propiedad font phase. Pero antes necesitamos descargar una fuente para usarla. Hay muchos sitios web que proporcionan fuentes para descargar, pero me gustaría preferir Font Squirrel Aquí, puedes ver diferentes tipos de fuente. Por ahora, me gustaría ir con OpenSNS. Esta es una de las fuentes más útiles en el sitio web. Entonces voy a seleccionar esta fuente, así que voy a darle click aquí. Y si te das cuenta puedes ver que también proporcionan versión de diferente grosor de esta fuente, ligera, negrita, audaz, cursiva, etcétera Y si quieres tomar una unidad de sabor de esta fuente, solo tienes que seleccionar esta opción, taste drive. Y si escribes algo, supongamos que voy a escribir hola palabra. Aquí puedes ver el resultado. Por lo que es una fuente muy buena para usar en nuestro sitio web. Y si quieres cambiar el tamaño de fuente, desde aquí, puedes cambiar el tamaño de fuente. Si utilizo 14, se usa el tamaño de 14 píxeles para los párrafos. Entonces si lo uso, puedes ver el resultado. Es una fuente muy buena para usar en nuestro sitio web. Y si abres este desplegable, aquí podrás ver diferentes estilos de fuente de estas fuentes, Opensun bold, bold, italic, etcétera Y si decides que vas a usar esta fuente en tu sitio web, entonces necesitas ir a esta sección webfont Keith Y estos son todos WebFonFleetension. Wo TTF EotSG. Y la superposición W es la más recomendada porque soporta todo el navegador moderno. Luego después de seleccionar esta extensión, necesitamos descargar esta fuente. Entonces voy a hacer clic en el botón Descargar. Como puede ver, aquí está descargando con éxito nuestra fuente. Después muevo este archivo descargado en esta carpeta nombre fuente. Entonces, como puede ver, necesitamos extraer este archivo. Entonces voy a presionar extracto aquí. Entonces después del extracto, aquí puedes ver las fuentes web de carpeta. Si lo abro, estas son todas las fuentes que podemos usar en nuestra página web. Supongamos que quiero usar fuente regular. Entonces voy a abrir esta carpeta y voy a copiar. Entonces voy a copiar este archivo en particular se abre en fuente web regular punto Olive. Y voy a mover este archivo a la carpeta principal de fuentes. Y también, voy a eliminar estos archivos innecesarios. No lo necesito. Ahora volvamos al editor de código de Visal Studio Entonces como pueden ver, nuevamente, estamos en mi editor de código visal Studio Al principio, necesitamos usar la propiedad de regla de fase de fuente CSS. Entonces aquí voy a escribir en la fase de letra leída. Entonces necesitamos usar Cali Vss. Al principio, necesitamos usar la propiedad de la familia de fuentes. Familia de fuentes. Y en esta propiedad de la familia de fuentes, necesitamos pasar un valor Tenemos que pasar el nombre de la fuente. Y si te muestro mi nombre de fuente, nuestro nombre de fuente es open sans. Entonces su tipo abre soles. Y entonces necesitamos proporcionar la ruta de origen de esta fuente. Su tipo es RC. Y aquí necesitamos usar el valor de URL para ubicar esta fuente. Como usted sabe, URL significa localizador uniforme de recursos, y dentro de los rundres para proporcionar la ruta de fuente Entonces, como saben, nuestra fuente está en nuestra carpeta de fuentes. Fuentes y nuestro nombre de fuente es OpenSNSRgular fuente web. Eso es. Si configuro este archivo y si lo uso en nuestra caja profunda, algún tipo, hastag box Es el caliberss aquí quiero usar OpenSensFont para Así que de nuevo, necesitamos usar familia de fuentes. Entonces básicamente, voy a copiar esta línea y la voy a pegar aquí. Y voy a poner este archivo. Después de configurar este archivo, si te muestro mi navegador, puedes ver el resultado. Entonces después de establecer este archivo, como puedes ver, aplica Opensunspw Y de la misma manera, si quieres cambiar la fuente de encabezado una etiqueta, sí, puedes. Supongamos que voy a seleccionar encabezamiento uno, H uno, luego dentro del hígado dice, voy a usar una familia, familia fuentes, OpenSN si configuro este archivo, se puede ver el resultado Entonces así es como puedes descargar cualquier tipo de fuente y puedes aplicarla en tu navegador. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender las fuentes de Google. Así que gracias por ver este video. Estén atentos para nuestro próximo Tutorial. 29. Tutorial de CSS con fuentes de Google: Oigan, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con un nuevo CSS relacionado con Tutorial. Y en este tutorial, vamos a aprender, ¿por qué deberíamos usar la fuente de Google en nuestras páginas web? Ahora, intentemos entender qué son las fuentes de Google. Entonces como puedes ver, tenemos un servidor, y en este servidor, tenemos nuestro archivo estable imágenes CSS y nuestras fuentes. Si se aumenta el visitante a este sitio web, entonces nuestro tiempo de carga del servidor aumentó. Nuestro servidor toma tiempo para completar la solicitud porque hay muchos visitantes al mismo tiempo. Supongamos que un visitante intentó acceder a esta página y nuestro servidor intentó llenar su solicitud. Al mismo tiempo vinieron otros dos visitantes y enviaron la solicitud. En esa situación, aumentó el tiempo de respuesta del servidor. Al mismo tiempo, este servidor va a servir TML, CSS, imágenes y fuentes Pero si usamos fuentes de Google, entonces necesitamos reducir la carga de nuestro servidor porque entonces usamos directamente el servidor de Google para servir la fuente. Esta vez, nuestro servidor va a entregar tesis HTML e imágenes. Pero para las fuentes, va a usar el servidor de Google, y eso es disminuir nuestro tiempo de carga y abrir nuestra página más rápido que la etapa anterior. Esta vez vamos a acceder a todas las fuentes desde el servidor de Google. Ahora comencemos la práctica y veamos cómo podemos usar Google Fonts. Para acceder a la fuente Google, es necesario visitar este sitio web, phons.google.com Te va a redirigir esta página. Aquí, puedes ver muchas fuentes. Y a partir de ahí, puedes buscar en cualquier frente que te imagines. Por ahora, me gustaría ir con MonsatFont así seleccionaría esta Desde aquí, se puede cambiar el tamaño de fuente, y estos son los estilos que proporciona esta fuente. Para acceder a esta fuente, es necesario hacer clic en este botón, fuente Gate. Desde aquí, puedes descargar esta fuente en tu sistema local. También puedes usarlo desde el servidor de Google. Para eso, debes hacer clic en Obtener código incrustado. Sí, puedes ver que esta fuente está disponible para dispositivos web Android, dispositivos IOS y aplicaciones flutter Pero lo vamos a usar para ola. Si seleccionamos onda también se puede ver que tenemos otras dos opciones, tinta y entrada. Por ahora, vamos a usar la opción Link porque no aprendemos sobre las reglas de entrada, estamos familiarizados con las etiquetas de enlace. Vamos a aprender el método de reglas de entrada en nuestros próximos tutoriales. Entonces por ahora, me gustaría ir con enlaces. Solo necesitas copiar este código. Luego volvamos al código de Visual Studio. En tu código de Visual Studio, debes pegar este código dentro de la etiqueta head. Entonces debajo de la metaetiqueta, voy a pegar este código, y voy a configurar este archivo. Ahora podemos usar esta fuente, y ahora voy a usar esta fuente en particular para la etiqueta H one. Entonces debajo de la etiqueta del título, aquí voy a usar etiqueta de estilo. Y dentro de esta etiqueta de mosaico y dentro de esta etiqueta de mosaico, luego dentro de esta etiqueta de mosaico, voy a seleccionar esta etiqueta H una, H una. Entonces este cardia dice, primero, voy a usar el nombre de propiedad familia de fuentes. Familia de fuentes. Entonces volvamos al navegador. Aquí, se puede ver la familia de fuentes, Monsor it sensorial. Así que copia esta sección. Y volvamos al código del estudio. Y aquí voy a pasar este valor. Después de configurar este archivo y ejecutar este código, podrás ver el resultado en nuestro navegador. Cambió de rumbo uno de forma. No sólo eso, también se puede utilizar cualquier fuente d valor 100-900. Entonces así es como puedes usar la fuente de Google en tu página web. Es proceso muy sencillo. Entonces esto es todo para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 30. Tutorial de estilo de lista de CSS: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender acerca de CSS es tyle Ahora veamos qué es el estilo y cómo funciona. Todos estos son propiedad de estilo. Imagen de estilo, posición de estilo, estilo t e ist ty. Entonces como pueden ver, este es el ejemplo de lista. Y en esta lista, tenemos un total de cuatro elementos de la lista. Pero si notas el icono de estilo, es una imagen. No es un punto de viñeta, de lo contrario, caja cuadrada. Puede usar cualquier imagen como imagen de estilo de lista. Luego viene la posición de estilo. Tenemos dos tipos de posición dentro y fuera, y la vamos a aprender prácticamente. Entonces nuestra siguiente propiedad es de tipo estilo. Como saben, tenemos un total de dos tipos de elemento de lista, Wada y lista unwale Ahora, hablemos de nuestra última propiedad, que es el estilo. Utilizamos esta propiedad como un trazador de líneas. Si no quieres escribir esta propiedad de tres, entonces puedes usar esta. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Entonces, como pueden ver lado a lado, abrí mi editor de código de Visual Studio y mi navegador usando la extensión del servidor light, y ya creé un nombre de documento TML índice punto t. Y si notas puedes ver dentro la etiqueta body, tenemos una etiqueta de encabezado Además, tenemos bajo lista y un Wadlelist. Y ahora voy a darle estilo a esta lista nwdal. Entonces para eso, aquí voy a usar la etiqueta Style. Baldosa e inserte esta etiqueta de estilo. Primero, tenemos que seleccionar el nodal es UL. Y recuerda, si quieres aplicar todas las menos propiedades, entonces necesitas usar la etiqueta UL, de lo contrario, etiqueta OL, no los menos elementos. Quiero decir que no las etiquetas LI. Entonces aquí voy a usar UL. Luego inserte el rebaje de color. Primera propiedad, voy a usar tipo de estilo. Tipo de estilo Les. Tipo de estilo, voy a usar valor de círculo. Si configuro este archivo, puedes ver el resultado. Si te das cuenta, puedes ver en mi navegador, hace que nuestro elemento de lista apunte o círculo. Y si quieres usar cajas cuadradas, sí, puedes. Sólo para escribir cuadrado. Si configuro este archivo, puedes ver el resultado. Y si no quieres mostrar ninguna viñeta, también puedes usar un valor llamado none. Si configuro este archivo, puedes ver el resultado. Ahora, no hay viñeta antes de los elementos de la lista. Por ahora, me gustaría ir con círculo V. Ahora, hablemos de lista Wada Entonces voy a duplicar esta sección, y voy a sustituir UL por OM. Dal es el estilo de lista es diferente de nodal ist. Si quieres usar alfabético, entonces necesitas escribir Alfa superior Si utilizo Ea superior, como pueden ver, uno, dos, tres, cuatro, reemplace con AVCD De igual manera, si quieres usar Alfa inferior, Alfa inferior. Y esto en este archivo, ahora se puede ver AVCD reemplazar por AVCD pequeño También, tienes otros testamentos, romanos superiores y romanos inferiores Entonces si escribo romano inferior y esto en este archivo, sí, se puede ver el resultado. Ahora nuestros artículos de lista empiezan con números romanos. Y si paso romano superior, romano superior y luego pongo este archivo, ahora se puede ver el resultado. Y el valor por defecto es decimal. Si paso decimal y luego configuro este archivo, se puede ver el resultado. Ese es el valor predeterminado. Por eso imprime uno, dos, tres, cuatro. Entonces estos son los valores wardaistas más populares. Y si no quieres mostrar nada, puedes pasar ninguno aquí y luego mandar este archivo. Por ahora, me gustaría ir con Alfa superior, así HemotyPuper Alpha Y ahora voy a hablar de posición de estilo. En una propiedad de posición de estilo, tenemos un valor total de dos. Pero primero, voy a usar border. Borde a píxel, borde sólido. Con eso, nuestro borde lor es rojo. Y voy a poner este archivo. Al principio, voy a escribir List style position, Last style position, y voy a pasar dentro. Si configuro este archivo, puedes ver el resultado. Se movió el menor artículo un poco dentro de esta caja. Y si uso afuera, en este de este archivo, aquí se puede ver el resultado. Después de usar el valor interior, mueve nuestro elemento de lista un poco hacia el lado derecho. Entonces ese es el uso de esta propiedad. Ahora hablemos de otra propiedad, que es la imagen de estilo lista. Entonces héroe tipo List style image. Entonces aquí necesitas usar el valor de URL, URL. Luego dentro del rebaje redondo, necesitamos proporcionar la ruta del archivo. URL significa localizador uniforme de recursos. Y dentro del rebaje redondo, necesitamos proporcionar la ruta del archivo de imagen. Ahora vamos a descargar una imagen del sitio web. Entonces como puedes ver en tu pantalla, aquí abrimos un buscador de iconos de nombre de sitio web. Desde aquí, se puede descargar el icono de osp. Puedes buscar cualquier tipo de icono y descargarlo. Entonces desde el Sarchbar voy a escribir flecha derecha. Después de buscar este icono, puedes ver el resultado. Proporciona gratis y premium ambos tipos de icono. Entonces a partir de aquí, voy a seleccionar versiones gratuitas. Entonces estos son todos iconos gratuitos que puedes descargar. A mí me gustaría ir con éste. Entonces voy a hacer click en este icono. Después de hacer click en este icono, puedes ver, Hey proporciona diferentes tipos de formato, PNG, SVG, y otros formatos. Para este ejemplo, voy a usar PNG. Además, puedes seleccionar tu propia resolución. No quiero un ícono más grande. Por eso voy a usar el tamaño de 48 píxeles, y después voy a dar click en el botón Descargar. Después de hacer clic en el botón Descargar, como puedes ver, se descarga en nuestra carpeta descendente. Ahora vamos a mover este icono de la carpeta hacia abajo a nuestro directorio de trabajo actual. Entonces como puedes ver en mi directorio de trabajo actual, ya muevo esta imagen PNG en mi directorio, y renombré este archivo flecha punto PNG Y ahora voy a usar este archivo PNG en mi sección de URL. Entonces dentro de esta barra de URL, voy a proporcionar la ruta del archivo. Flecha punto PNG. Después de sub este archivo, se puede ver el resultado. Pero hay un problema. Como puedes ver, robar nuestra imagen son más grandes que las viñetas, y no hay manera fácil de resolver este problema. Sí, podemos usar el selector combinador, de lo contrario, podemos crear contenido en blanco para alinearlo, lo contrario, reducir el tamaño Pero básicamente, estamos en ahora solo etapa inicial. Entonces voy a reducir el tamaño de la imagen usando Photoshop. Entonces como pueden ver, abro esta imagen en la aplicación Photoshop, y ahora voy a reducir el tamaño de la imagen. Entonces voy a seleccionar esta sección de imagen y Calienta aquí opción tamaño de imagen, y quiero que sea 12 pixel por 12 Bigel Creo que es bueno para ello. De lo contrario, puedo hacer que sea de 16 píxeles. Bien. Entonces voy a alabar O. Y voy a establecer este archivo como archivo PNG exportar como PNG. Además, voy a sustituir esta imagen por esta imagen. Sí. Y luego, de nuevo, voy a saltar al editor de código de visult studio Si configuro este archivo, puedes ver el resultado. Esta es la sección básica de Tutorial. Aún no conocemos el selector Avanzado, así que no pude mostrarles muchos ejemplos. En nuestros próximos tutoriales y sección avanzada, vamos a conocer diferentes tipos de selectores Entonces te puedo mostrar los ejemplos. Entonces esto es para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 31. Tutorial de imagen de fondo de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre CSS, propiedad de imagen de fondo. Imagen de fondo, repetición de fondo y posición de fondo. Ahora, tratemos de entender qué es la imagen de fondo. Si quieres establecer imagen en tu fondo, entonces puedes usar esta propiedad, imagen de fondo. Si quieres usar esta propiedad, necesitas escribir background hibadimage entonces en su lugar la URL, necesitas pasar la ruta del archivo de imagen , algo así Supongamos que tiene imagen llamada one dot JPG, y necesita poner esta ruta de archivo de imagen en esta URL secti Entonces veamos cómo podemos usarlo prácticamente. 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 creo un documento TML llamado index dot TML Entonces al principio, dentro de esta etiqueta de estilo, voy a darle estilo a la etiqueta body. Entonces soy cuerpo tipo. Y dentro de esta etiqueta corporal, voy a aplicar la imagen de fondo. Y aquí, voy a escribir imagen de fondo URL, slaver dot JPG Si configuro este archivo, puedes ver el resultado. Como puedes ver, cubre todo nuestro fondo de página con esta imagen. Además, repite la imagen de fondo una y otra vez para cubrir este espacio. Esta es la primera propiedad. Ahora, hablemos de la segunda propiedad, que es repetición de fondo. La probidad de repetición de fondo viene con seis valores, repetir, no repetir, repetir X, repetir Y, espaciarlo y redondearlo Repetir es el valor predeterminado. Y si no usas repetición, no va a repetir la imagen una y otra vez. Además, puedes repetir tu imagen desde la dirección XX y también desde la dirección de x. Y si usas el valor del espacio, entonces va a proporcionar espacio entre esta imagen. Y si usas valor redondo, entonces va a estirar tu imagen. Estos son todos los valores predefinidos de la propiedad de repetición de fondo. Ahora veamos cómo podemos aplicarlo prácticamente. Entonces al principio, voy a usar esta propiedad, fondo, repetición de fondo. Y aquí voy a aplicar no repetir. No, repita. Si configuro esta página, como pueden ver, ahora, nuestra imagen no se repita. Ahora ha aparecido sólo por una vez. Y ahora quiero repetir esta imagen desde la dirección X. Entonces aquí voy a pasar, fondo repetir, repetir X. Si configuro este archivo, se puede ver el resultado. la misma manera, si quieres repetir tu imagen x dirección, solo para pasar repetir Y. Después de establecer este archivo, puedes ver el resultado. Y ahora voy a usar el siguiente valor que es el espacio. Espacio de repetición de fondo. Si configuro este archivo, puedes ver el resultado. Si extiendo el ancho del navegador, ahora está claro para ti. Ahora puedes ver que proporciona espacio entre la imagen. Si tenemos arriba el contenido, entonces va a funcionar horizontal y verticalmente también. Deja que te lo demuestre. Así que para reducir el tamaño del navegador, y voy a duplicar esta caja cinco veces y luego volver a configurar este archivo. Ahora puedes ver el resultado. Este es el uso del valor del espacio. Ahora, voy a eliminar todos los condils innecesarios. Pero así es como funcionan los valores del espacio en la propiedad de repetición de fondo. El siguiente valor que voy a usar, que es fila. Entonces aquí, voy a reemplazar el espacio con Run. Después de paso este archivo, se puede ver el resultado. Como te dije, valor redondo, estira nuestra imagen. Ahora, hablemos del valor de posición de fondo. Estos son todos los valores predefinidos de posición de fondo, aptp, centro de labio, labio inferior, parte superior derecha, centro derecho, derecha, inferior, centro centro, centro, fondo Además, puede usar el valor porcentual para la propiedad de posición de fondo CSS. Con eso, también puedes pasar valor de píxel en la dicción YxS y la dirección Xs Entonces veamos cómo podemos usarlo prácticamente. Entonces al principio, voy a usar el valor de repetición de fondo, no repeat. No, repita. Entonces voy a usar la propiedad de posición de fondo. Posición de fondo. Si configuro este archivo, por defecto, viene la posición del portátil. Entonces voy a usar nosotros propiedad superior, derecha arriba. Si configuro este archivo, puedes ver el resultado. Ahora mueve nuestra imagen de fondo a la derecha en la posición superior. Esta es la posición superior derecha. Entonces voy a usar centro derecho. Después de configurar este archivo, aquí se puede ver el resultado. No tenemos un upcontent. Por eso se tambaló hacia arriba. Entonces voy a duplicar esta sección de cuadro de línea 510. Si configuro este archivo, ahora puedes ver el resultado. Creo que no es un buen ejemplo. Entonces voy a quitar todo op. Además, voy a quitar el contenido dentro del pantano empinado Entonces voy a darle estilo a este paso de pantano usando su ID, caja Hatag Entonces dentro de la caliva dice, voy a decirlo con la altura con el 100% Altura 800 píxeles. Y luego voy a agregar un borde. Borde un píxel, sólido, y acuarela es y. arriba este archivo, como puede ver, este es el tamaño de nuestra caja. Y ahora voy a usar todas estas propiedades dentro de esta caja D. Y voy a quitar la etiqueta del cuerpo. Si configuro este archivo, ahora es más claro para usted. Aumentemos el ancho del borde. El pixel. Ahora nuestras fronteras son mucho más visibles. Entonces como puedes ver, ella usamos centro derecho, y puedes ver la posición. Ahora decido que voy a mover nuestra imagen de fondo a la derecha abajo. Para eso, necesitamos usar el valor inferior derecho. De la misma manera, hemos dejado valor lateral. Si quieres moverlo salto al fondo, necesitas reemplazar derecha por izquierda. Y luego hay que configurar este archivo. Y si quieres colocarlo ep posición central, en ese caso, necesitas reemplazar el valor inferior por el centro. Y si usas el valor del centro de vuelta, puedes ver el resultado. De la misma manera, tenemos centro de valor. Si quieres colocar esta imagen, centro de este elemento profundo, solo necesitas pasar centro centro. Si configuro este archivo, puedes ver el resultado. Y si quieres presionarlo en la parte superior central, solo necesitas pasar TOP central. Ahora va a mover nuestra imagen al centro de la posición superior. Además, puedes moverlo en posición central, inferior. No sólo eso, como te dije, puedes usar el valor porcentual para mover tu imagen de fondo. Entonces voy a duplicar esta sección, y voy a comentar la línea anterior. Y aquí quiero mover nuestra imagen usando el valor porcentual. A partir del XX es, quiero moverlo 25%. Y de los YxS voy a moverlo 50%. Si configuro este archivo, se puede ver la posición. De XXs se mueve 25%, y de xs, se mueve 50% Además, puedes usar la unidad Pixel. Entonces voy a duplicar esta sección y comentar la línea anterior. Y esta vez voy a usar Pixel Unit. Desde XXs quiero moverlo 300 pixel y desde los YxS quiero moverlo 200 Si configuro este archivo, ahora puedes ver la posición. Desde Xs, movió 300 píxeles, y desde xs, mueve 200 píxeles. No solo eso, puedes usar múltiples imágenes de fondo a la vez. Para eso, solo necesitas usar entre esta ola. Nuevamente, voy a escribir URL, y dentro de la URL, necesitamos proporcionar otra ruta de archivo. Entonces si te muestro mi directorio de trabajo actual, ahí puedes ver otra imagen, man dot JPH voy a usar esta imagen Hombre punto JPG. Por otra parte, necesitamos proporcionar valor de repetición de fondo para esta imagen. Entonces otra vez, voy a pasar coma y aquí voy a pasar ninguna repetición También, necesitamos definir la posición. Entonces voy a usar coma, y voy a definir a la derecha, esquina inferior. Derecha, abajo. Si configuro este archivo, aquí se puede ver la imagen. Básicamente, nuestra imagen anterior se superpone con esta imagen. Por eso voy a moverla esquina de laptop. Lap top. Entonces como puedes ver, en el mismo elemento DB, aquí usamos diferentes fondos. Además, podemos proporcionar diferentes propiedades de repetición de fondo y diferentes propiedades de posición de fondo. Entonces de esa manera, puedes usar múltiples imágenes en el fondo. Y si quieres usar la taquigrafía de las tres propiedades, solo necesitas escribir fondo Antecedentes. Y luego primero, debe proporcionar la ruta del archivo UR. Entonces, para copiar la ruta del archivo, entonces necesita proporcionar valor de propiedad de repetición de fondo, que no es repetición, no repetición, y también necesita definir la posición. Y voy a pasar ptaf. Y voy a comentar todas estas líneas anteriores. Si configuro este archivo si configuro este archivo, puedes ver el resultado. No sólo eso, si quieres aplicar color de fondo, sí, puedes. Simplemente interpasa el color de fondo del cabello. Supongamos que quiero usar fondo de color dorado, dorado. Y luego establecer este archivo, se puede ver el resultado. Entonces, al mismo tiempo, podemos usar el color de fondo. También, podemos usar imágenes. Entonces espero que ahora esté claro para usted cómo podemos usar estos tres antecedentes relacionados con la propiedad. Entonces esto es todo para este tutorial. Gracias por ver este video. Estén atentos. 32. Tutorial de adjuntos de fondo de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre una nueva propiedad, que es el apego de fondo. Tenemos que t dos propiedad relacionada con el apego de fondo, scroll y fijo. Scroll es el valor predeterminado. Y si usas valor fijo, entonces va a arreglar tu imagen de fondo y puedes desplazar tus tomas que de otra manera contenían sobre la imagen de fondo. Entonces veamos cómo podemos usarlo. Entonces como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión del servidor lip, y ya creé un documento STL, llamado index dot TML Entonces como puedes ver en este STML, tenemos una etiqueta profunda con cuadro de nombre de identificación Además, se puede ver en nuestra etiqueta corporal, utilizamos un fondo. Aquí utilizamos un fondo, una imagen de flor. Y ahora voy a agregar algún texto ficticio en esta caja. Entonces aquí quiero escribir Lorem 1,000. Después de presionar Enter y configurar este archivo, puede ver el resultado. Ahora puedes ver que tenemos una barra de desplazamiento en el lado derecho. Y si reduzco el ancho del navegador, déjame mostrarte algo así. Ahora puedes ver si me desplazo hacia abajo mi barra de desplazamiento, también nuestra imagen de fondo se mueve con la barra de desplazamiento. Para resolver este problema, necesitamos usar la propiedad de adjunto de fondo. Entonces usemos la propiedad. Así que en su lugar el Carirass voy a usar el nombre de la propiedad, adjunto de fondo, y voy a usar campo fijo Si configuro este archivo, entonces otra vez, volver al navegador y desplazarse el contenido esta vez se puede ver el resultado diferente. Ahora puedes ver, arriba para desplazarte este contenido, como puedes ver, la imagen de fondo fijó su propio lugar, nuestro contenido moviéndose hacia arriba y hacia abajo. Y si usas otro valor, que es scroll, y el conjunto de este archivo, y si me desplazo hacia abajo en mi página, ahora puedes ver, de nuevo, nuestro fondo se mueve con el contenido porque scroll es el valor predeterminado. Para arreglar el fondo, es necesario usar valor fijo. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender sobre el tamaño del fondo. Así que gracias por ver este video. Estén atentos. 33. Tutorial de tamaño de fondo de CSS: Hola, chicos. Encantado de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre la propiedad CSS background size. Estos son todos los valores relacionados con la propiedad de tamaño de fondo. Nuestro primer valor es Auto. El segundo valor es la longitud. Aquí puede proporcionar valor de píxel para su tamaño de fondo. Entonces puedes usar percentis. Se puede definir el tamaño de fondo con valor porcentual. Entonces ven encubierto, y el último está contenido. Entonces 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 del servidor lab, y ya creo un documento SML llamado index dot ATM Entonces, como de costumbre, tenemos una etiqueta profunda con caja de identificación. Se puede ver cuadro, aquí establecemos borde y un fondo, y fijamos nuestro fondo, no repetimos. Y nuestra posición de fondo es laptop. Por ahora, voy a quitar la posición de fondo, laptop. No lo necesito. Entonces este es nuestro bucle de imagen fondo sin propiedad de tamaño de fondo, pero quiero reducir el tamaño del fondo. Para eso, voy a usar la propiedad background size, background size, y aquí voy a usar pixel value. Voy a pasar 150 píxeles. Si configuro este archivo, puedes ver el resultado. Redujo el tamaño de la imagen de fondo. Como puedes ver, aquí pasamos solo un valor. Es media para ambos el eje va a aplicar 150 píxeles. Pero si paso 200 para YxS y esto establece este archivo, ahora puedes ver, ahora aplica 150 pixel para Xxs ahora puedes ver, ahora aplica y 200 pixel para YxS Para que puedas controlar el tamaño XX de la imagen de fondo y el tamaño YX de manera diferente Como puedes ver, nuestra altura de inmersión de caja es 800 píxeles, así que pasa 800. Después de establecer este archivo, como puedes ver, aumentamos el tamaño del fondo en dirección YxS Pero esta vez para excesos dirección, quiero usar 100% porque para este ancho de caja, usamos 100% tamaño Entonces después de establecer este archivo, ahora se puede ver el resultado. Ahora es cubrir toda nuestra profundidad con esta imagen de fondo. Para que puedas usar unidad fija y unidad dinámica juntas. De lo contrario, también se puede utilizar sólo por ciento este valor. Déjame mostrarte algunos para duplicar esta línea y comentar la línea anterior. Entonces tanto de la dirección quiero 100% dentro de la altura para esta imagen de fondo. Si configuro este archivo, aquí puedes ver el resultado. la misma manera, si quieres usar solo el 30%, entonces configura este archivo. Como se puede ver el resultado. Entonces así es como puedes controlar tamaño de la imagen de fondo con estos valores. Y ahora voy a usar valor predefinido. Esta vez, voy a usar un valor llamado cover. Si configuro este archivo, puedes ver el resultado. Si usas el valor de cobertura, va a cubrir el agujero profundo con esta imagen de fondo. Pero si te das cuenta, puedes ver desde el lado derecho , corta nuestra imagen. Básicamente, este valor redimensiona la imagen de fondo para cubrir todo el contenedor Incluso si tiene que estirar la imagen o cortar un poco de un lado de la imagen. Ahora, hablemos de otro valor, que es contener. Voy a duplicar esta sección y comentar la línea anterior, y voy a reemplazar la portada por contener. Antes de establecer este archivo, déjame decirte qué va a hacer este le. Básicamente, va a cambiar el tamaño de la imagen de fondo para asegurarse de que la imagen sea completamente visible Entonces si configuro este archivo, ahora puedes ver que nuestra imagen es completamente visible. Y de acuerdo a la relación de imagen, como puede ver, nuestra porción inferior no está cubierta por esta imagen. Entonces este es el uso de la propiedad de tamaño de fondo. Espero que ahora te quede claro. Entonces esto es todo para este tutorial. En el siguiente tutorial vamos a aprender sobre origen de fondo CSS. Entonces gracias por ver este video, Estado. 34. Tutorial de origen de fondo de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender la propiedad origen de fondo. Ahora, veamos cuáles son los valores proporcionados por origen de fondo. Entonces estos son todos los valores que podemos usar en nuestra propiedad de origen de fondo, relleno, caja de borde, caja de contener. Ahora puede que tengas duda, ¿qué significa eso? Entonces comencemos la práctica y veamos cómo podemos usarla. Entonces déjame explicarte con lo práctico. Entonces como pueden ver lado a lado, abro mi editor de código vis Studio y mi navegador usando la extensión de servidor if. Y aquí abro un documento estable llamado índice punto t. así que si notas en esta casilla D, establecemos con 60%. Además, establecemos la altura, 800 píxeles, con eso, Hero usa padding. Relleno de 30 píxeles de cada una de las direcciones. Además, tenemos borde de tres píxeles, pero voy a hacer que sea de 20 píxeles. Y voy a poner este archivo. Y su tamaño de fondo definido 200 píxeles también usa la propiedad de fondo como un trazador de líneas. Entonces usemos la propiedad de origen de fondo. Origen de fondo. Como te dije, esta propiedad viene con tres valores, relleno, caja de borde , y caja de contenido. La caja de relleno es la voluntad predeterminada. Si usamos la caja de relleno, nuestra imagen de fondo parte de este relleno. Pero si usamos content box, content box, up to set this file now you can see our background image start from the content area because we use this value. Entonces si aumento el tamaño del fondo, 500 píxeles y luego configuro este archivo, puedes ver el resultado. Nuestra imagen de fondo parte del área de contenido. Básicamente usando esta probidad, podemos declarar desde donde quiero comenzar nuestros antecedentes Este valor sólo funciona si no usamos valor repetido. Pero si eliminamos el valor no repeat y luego establecemos este archivo, ahora puedes ver, nuevamente, comienza desde la org real en su lugar. Entonces voy a usar no repetir Val. Ahora, vamos a saltar al siguiente valor, que es la caja de relleno. Cuadro de relleno, si utilizo este valor y luego configuro este archivo, ahora puedes ver nuestra imagen de fondo comenzar desde el área de relleno. Pero si usamos border box y luego configuramos este archivo, ahora puedes ver nuestra imagen ligeramente movida dentro del borde. Esta vez, nuestra imagen de fondo parte de la zona fronteriza. Si uso el estilo de borde, puntearlo, luego establecer este archivo, ahora es más claro para usted. Así podemos comenzar nuestra imagen de fondo desde el área de relleno también desde el área de contenido. Entonces ese es el uso de la propiedad de origen de fondo. Espero que ahora te quede claro. Gracias. Gracias por ver este video. 35. Tutorial de clip de fondo de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre un nuevo fondo relacionado con la propiedad, que es fondo ellos. Básicamente, esta propiedad se relaciona con el color de fondo. Esta propiedad es bastante similar con nuestra propiedad anterior, fondo origi Ahora, hablemos de los valores de esta propiedad. Estos son todos los valores que voy a usar con clip de fondo, caja de relleno, cuadro de borde y cuadro de contenido. Entonces 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 Live, y ya creo un documento de estimación llamado index dot DML Como de costumbre, tenemos una etiqueta profunda con cuadro de nombre de identificación, y dentro de esta etiqueta profunda, tenemos algún contenido de texto ficticio Y ya diseñamos esta etiqueta dip usando su cuadro de nombre ID, Heist con 60% de altura, 300 píxeles, y además proporciono relleno, que es de 30 píxeles, cada uno de la dirección Con eso, tenemos borde punteado. Entonces comencemos el nombre de la propiedad, que es fondo claro Antecedentes Tet. Aquí, el primer val que voy a usar, que es el cuadro de contenido. Contienen caja. Si configuro este archivo, no va a funcionar porque no proporcionamos ningún color de fondo a esta caja. Entonces voy a pasar el color de fondo blanco. Entonces si configuro este archivo, ahora se puede ver, ahora se puede ver que proporciona color de fondo blanco al área de contenido solamente. Y ahora quiero cubrir el área de relleno con este color de fondo. Entonces solo quiero pasar caja de relleno. Después de establecer este archivo, aquí puedes ver el resultado. Con eso, si quieres cubrir el área de borde con el color de fondo, para eso, solo necesitas pasar la propiedad de caja fronteriza. Caja de borde. Si configuro este archivo, puedes ver el resultado. Entonces ese es uno de los usos de esta propiedad. Ahora déjame mostrarte otro ejemplo. Podemos utilizar esta propiedad con imagen de fondo también. Ahora, agreguemos la imagen de fondo a nuestra etiqueta de encabezado uno. Imagen de fondo tipo infierno. Y voy a usar la URL de imagen de fondo. Tenemos una imagen de flor en nuestro fondo, flower dot JPG. Si configuro este archivo, puedes ver el resultado. Es una imagen de fondo de flor en nuestra etiqueta auditiva. Ahora voy a usar el tamaño de fuente, tipo tamaño de fuente, y voy a usar 150 píxeles. Entonces también, voy a cambiar la familia de fuentes tipo familia de fuentes, y voy a usar la fuente Impact, impact, solo el impacto. No quiero nada más, y voy a configurar este archivo. Después de que configuré este archivo, se ve así. Y si no quieres repetir tu fondo, solo necesitas usar ningún valor de repetición. Repetición de fondo, no repetición. Por ahora, me gustaría ir con fondo repetido, y luego voy a usar la propiedad del labio de fondo. Clip de fondo. Y aquí voy a pasar texto. Y voy a hacer que mi color sea transparente. Si configuro este archivo, puedes ver el resultado. Aquí puedes verlo perfectamente mantener la imagen de fondo según el encabezado un texto. Si reduzco el tamaño, si lo hago 100 pixel y este archivo, ahora se puede ver que se ve mucho mejor que el anterior. Si hago cuerpo color de fondo blanco, Ahora es mucho más visible. Y una cosa me olvidé hablar fondo clip propiedad vienen con otro valor, que es texto, y esto va a funcionar sólo en el texto. Espero que ahora te quede claro cómo podemos usar la propiedad de clip de fondo. Así que gracias por ver este video. Estén atentos para el siguiente tutorial. 36. Tutorial de modos de color de CSS: Oigan, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y esta es la parte más importante de este tutorial. En este tutorial, vamos a aprender sobre los modos de color. Aquí vamos a aprender ¿cómo podemos asignar color a un elemento usando modo diferente? El primer modo que tenemos es nombre de color. Puedes usar cualquier nombre de color, supongamos rojo, amarillo, azul, gris oscuro, lo que quieras usar. A continuación, tenemos código hexadecial, y el tercero es el valor RGV Argv significa rojo, verde y azul. De la misma manera, tenemos RGBA. A significa Valor Alfa. Usando el valor A, podemos controlar la transparencia de este color. Y entonces tenemos valor HSL. HSL significa saturación de tono y luminosidad. Y similar para dar valor, tenemos HSLA. A significa Valor Alfa. Ahora hablemos del valor del nombre del color, cómo podemos usar el valor del nombre del color. Entonces estos son todos los colores más populares en CSS que usamos, rojo, verde, azul, naranja, amarillo, rosa, mazina, marrón, tomate, Vallet, etcétera Y hay muchos nombres de color, que aquí no defino. Puedes buscarlo en sitios web. Solo necesitas buscar websubclor en tu navegador, y luego va a proporcionar todos los Ahora, hablemos del modo hexadecimal. Este es el ejemplo del modo hexadecimal. Los códigos de color hexadecimales comienzan con tiene carácter. Entonces tenemos que pasar a seis dz. Como puedes ver, aquí pasamos un valor AF 0000. Este código de color significa color rojo. Y en el siguiente ejemplo, Él usamos el hashtag 0000 AF, y este código de color significa color azul. Si lo buscas en color websp con código hexadecimal, puedes encontrar los códigos hexa de cualquier Nuestro siguiente modo de color es RGB. R significa rojo, G significa verde y B significa azul. Primero, necesitamos proporcionar el valor rojo, y tenemos que proporcionar el valor 0-255, no menos de cero, no más de 255 Y así es como podemos crear cualquier color. Y si paso el código de color exacto, va a devolver color rojo porque nuestro valor verde es cero. También nuestro valor azul es cero. Y para el valor rojo, utilizamos el valor más alto 255. Por eso va a devolver el color rojo perfecto. No te preocupes. Te voy a mostrar el ejemplo con prácticamente. El siguiente valor es HSL. HSL significa H para tonalidad es para saturación, L para luminosidad. En Hue, aquí puedes pasar valor entre cero, dos, 360. Si pasas cero, ahí va a devolver el color rojo. Si pasas 120, va a devolver color verde, y siguiente valor, saturación significa intensidad. Puedes controlar la intensidad del color usando este valor. Se puede controlar el brillo de este color, lo contrario, opacidad de este color usando esta propiedad Y nuestro siguiente valor ligereza, tú controlas la luz de este color. Y aquí se puede pasar valor entre cero y cien por ciento. No te preocupes. Voy a mostrar el ejemplo con prácticamente. Y nuestros dos últimos valores de color son RGBA y HSLA. A significa Valor Alfa. Es opacidad media de cualquier color. Aquí puedes pasar el valor 0-1. Si pasas valor cero, entonces va a hacer que tu objeto completamente transparente. Y para proporcionar todo color, es necesario pasar un valor. Y si quieres aplicar el 50% de color, de lo contrario, 50% de transparencia, entonces necesitas pasar 0.5 Wow. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usar estos modos de color. Entonces como de costumbre, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Live Server. Entonces al principio, voy a colorear nuestra etiqueta H one, encabezando una. Entonces aquí uso propiedad de color. Como sabéis, nuestro primer modo de color es el nombre del color. Entonces aquí, voy a aportar un color. Por defecto, viene con color negro. Entonces quiero el color rojo. Pasa el nombre del color ROJO. Si configuras este archivo, puedes ver el rojo. No hay nada especial. Y ahora voy a usar el modo de color diferente en nuestro paso de caja. Entonces aquí voy a usar una propiedad llamada color de fondo. Entonces voy a descommen esta línea, y al principio, voy a usar un nombre de color llamado azul Y voy a poner este archivo. Como puedes ver, después de pasar este nombre de color , llena nuestra caja de color azul. Si quieres usar color dorado, ORO dorado, puedes ver el resultado. Proporciona el color dorado. Además, puedes buscar cualquier nombre de color. Busquemos un nombre de color, que es comenzar con A. Aquí puedes ver un nombre de color verde forzado. Si utilizo este color y configuro este archivo, puedes ver el resultado. Aquí podemos usar cientos de nombres de colores. Ahora, hablemos de este segundo modo, que es el código decimal xa. Para usar xa valor dicimal, primero va a escribir x un código tiene Entonces quiero el color azul. Para el color azul, necesitamos usar este código de color, 0000 si si. Si utilizo este color, como pueden ver, como pueden ver esta vez, nuestra caja se llenó de color azul. Y si usamos color rojo, solo el color rojo puro, entonces necesitas pasarlo comenzar con FF luego 0000. Si configuro este archivo, puedes ver el resultado. Y si utilizo azul y rojo juntos, pasaría FF 00 FF. Y este es este archivo, va a devolver color rosa. Si tienes conocimientos sobre la rueda de colores, entonces puedes entender por qué está escrita de color rosa. Y si utilizo valor FF para color verde, ahora tenemos seis F en nuestro valor hexadecimal. Va a volver de color blanco puro porque si mezclamos RGV advance con todo el potencial, entonces va a volver de color blanco Entonces usando esta combinación, podemos usar muchos colores. Nuestro estudio visual proporciona la paleta de colores. Si arrastro nuestro mouse y cambio el valor, como pueden ver, proporciona mucha versión adicional de este color. Supongamos que quiero usar el color verde. Entonces estas son todas variantes de color verde con el Valor hexa dicial Aquí puedes ver el valor de la cabeza Disial Si utilizo este color y configuro este archivo, como puedes verlo aplica el color en nuestra caja Ahora hablemos de movimiento RGV. Entonces voy a duplicar esta sección y comentar la anterior. Y esta vez, voy a empatar RGB. Entonces dije que la ronda usa primero va a pasar R valor R stas para rojo. Entonces voy a usar 255. Y para el verde, voy a pasar cero, y para el azul, también, voy a pasar cero. Si configuro este archivo va a devolver color rojo puro. Pero si utilizo valor 255 para el azul, nuevo, va a devolver el color rosa. la misma manera, si paso 255 por valor verde va a devolver color blanco. Si abro esta paleta de colores, que es proporcionada por el editor de código Wiser Studio, aquí puedes ver el valor RGV Si arrastro mi mouse y selecciono cualquier color, lo contrario, cualquier variante de color, aquí puedes ver el valor RGV Si utilizo este código y configuro este archivo, como puedes ver, aplica este color exacto en nuestra caja. Ahora hablemos de otro modo de color, que es HSL. Voy a duplicar esta sección y comentar la línea anterior, y voy a sustituir RGB con Hic Hue saturación y luminosidad. Para Hue, voy a pasar 120. Es para color verde, y para saturación, voy a usar 50%. También por ligereza, voy a usar 50% de luz. Si configuro este archivo, como pueden ver, es de color verde de retorno. Y si aumento el valor, si aumento el valor de saturación, entonces se puede ver si lo hago al 100%, va a devolver color verde puro. Pero si aumento el valor de ligereza, supongamos que voy a hacerlo al 100%, entonces va a devolver el color blanco exacto porque si aumento la ligereza de cualquier color, se vuelve blanco. Necesito usar por debajo del 100%. Supongamos que voy a usar el 90, 90%. Ahora puedes ver, ahora usaba este color verde muy claro. Entonces, si cambio el color usando esta paleta de colores, se puede ver el valor HSL. A partir de un, se puede utilizar cualquier color. Si disminuye el valor de luminosidad de este color, entonces va a proporcionar la versión más oscura de este color. Y ahora voy a pasar 240 valor 240. Esta protagoniza la variante de color azul. Si sub este archivo, ahora se puede ver que proporciona versión más oscura de color azul. Y si lo hago al 100%. Y este es este archivo. Además, si hago luz, 50%, aquí puedes ver el resultado. Ahora proporciona exactamente de color azul. Ahora, hablemos del valor Alfa. Voy a usar el valor Alpha con valor RGV. Entonces duplique esta sección y comente la línea anterior, y aquí voy a pasar RGBA Como sabes, primero cabello, necesitas pasar valor de color rojo. Para el color rojo, voy a usar rojo puro 255, y para el verde, voy a usar cero. También para el azul, voy a usar cero. Pero para Alpha, por ahora, voy a usar uno. Si configuro este archivo, como pueden ver, proporciona color rojo puro. Ahora, voy a adjuntar una imagen de fondo a la caja D. Así que escribe imagen de fondo URL, y voy a proporcionar imagen de otoño o flor. Si configuro este archivo, puedes ver el resultado. Lo sentimos, necesitamos usar esta imagen de fondo en nuestra etiqueta de arranque, no en el límite DB. Entonces voy a cortar esta sección. Y voy a pegarlo dentro del guid corporal . Quiero establecer este archivo. Ahora, como pueden ver, no podemos ver nuestra imagen dground a través este paso de pantano porque nuestro DV está lleno de color rojo y no es transparente Pero si quiero que sea completamente transparente, necesitamos pasar valor cero como Alfa. Si lo hago cero, entonces establece este archivo. Ahora puedes ver que nuestra caja es completamente transparente. Y si quiero disminuir la transferencia C, necesitamos aumentar el valor uno por uno. Primero, voy a usar 0.1. Y esto en este archivo ahora puedes ver, ahora puedes ver nuestra caja sigue siendo transparente, pero puedes ver capa roja. Y de la misma manera, si aumento el valor, si lo hago cinco, y esto en este archivo, como pueden ver, ahora nuestro color de caja es semitransparente. Entonces así es como se puede controlar la transparencia. Si paso nueve valor y esto en este archivo, se puede ver el resultado. De la misma manera, el trabajo de valor de Hs A. Entonces voy a duplicar esta línea y comentar la anterior. Y si paso Hs A, para ti, voy a usar 120 grados. Y para la saturación, voy a usar el 100%. También, para lightnas, voy a usar el 50%. Y para Alpha Velu voy a usar uno. Si configuro este archivo, como pueden ver, devolverá color verde puro. Pero esta vez nuestra caja no es transparente. Si lo hago cero y luego configuro este archivo, ahora lo puedes ver completamente transparente. Y si aumento un poco el valor, 0.3 y luego configuro este archivo, ahora es semitransparente Entonces así es como puedes controlar la transparencia de cualquier color. Entonces esto es todo para este tutorial. Espero que ahora te quede claro cómo podemos usar el modo diferente en nuestra propiedad coloreada. Y también aprendemos sobre la transparencia. Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 37. Tutorial de fondo de gradiente de CSS: Oigan, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre los colores de degradado. Ahora la pregunta es, ¿qué es el gradiente? Si quieres aplicar más de un color en un solo elemento, en ese caso, necesitas usar degradado. Ahora, intentemos hablar sobre diferentes tipos de gradientes CSS. En cuanto estilo podemos aplicar color degradado. Podemos aplicar gradiente en estilo lineal. También podemos aplicar gradientes radiales, y también tenemos gradientes lineales repetidos y gradientes radiales repetidos Ahora al principio, tratemos de entender qué es el gradiente lineal. Este es el ejemplo de gradiente lineal. El color degradado lineal fluye de un lado a otro lado. Puede ser flujo de arriba a abajo, vuelta a la derecha, derecha a vuelta y de abajo a arriba. Como puedes ver en nuestro primer ejemplo, en la parte superior, Herou usa color verde oscuro, pero en la parte inferior, herrow usa color verde claro la misma manera, en nuestro segundo ejemplo, en el lado izquierdo, usamos amarillo oscuro, y en el lado derecho, usamos amarillo claro. Pero en nuestro tercer ejemplo, en el lado derecho, usamos color azul oscuro en el lado izquierdo, usamos color azul claro. Y en nuestro último ejemplo, en la parte inferior, usamos el color rosa oscuro, y en la parte superior, usamos el color rosa claro. Además, se puede proporcionar el valor diagonal y ángulo es. Ahora, hablemos de gradiente radial. Este es el ejemplo de gradiente radial. Este estilo degradado no va a comenzar de ningún lado. Se puede iniciar desde el centro, también desde la parte inferior derecha, parte inferior del labio, laptop, etcétera Si notas el cuarto ejemplo, como puedes ver, nuestros colores degradados empiezan desde la esquina superior. En la esquina superior del labio, se puede ver la variante oscura de este color. Y en la esquina inferior derecha, se puede ver la versión más clara de este color. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos aplicar. Entonces como pueden ver, lado a lado, abrí mi editor de código visual studio y mi navegador usando la extensión del servidor de labios, y ya creé un documento Sal llamado index dot a table. Entonces como notas, en nuestra etiqueta corporal, tenemos una etiqueta profunda con vidrio llamado caja. Y estilo esta etiqueta dip en nuestra sección de estilo. Aquí decimos 90% de ancho, y decimos 600 píxeles de altura, y también establecemos un sólido a píxel boded, y nuestro color de fondo es gris Entonces como puedes ver en este cuadro, aplicamos solo un color, que es gris, pero quiero aplicar varios colores en nuestro fondo. Para eso, necesitamos usar terneros degradados. Entonces voy a eliminar esta línea, y voy a aplicar este fondo de nombre de propiedad. Y quiero aplicar gradiente lineal. Gradiente lineal. Como te dije, el color degradado lineal funciona direccionalmente. Se puede mover del regazo al lado derecho de arriba a abajo y de abajo a arriba, también del lado derecho al lado del labio. Aquí puedes aplicar múltiples colores tanto como quieras, pero me gustaría comenzar con dos colores. Entonces nuestro primer color es el rojo, y nuestro segundo color es el amarillo. Si configuro este archivo, puedes ver el resultado. Por defecto, se mueve de arriba a abajo. Se aplica color rojo en la parte superior y aplica color amarillo en la parte inferior. Y ahora quiero dar la dirección. Quiero dirigirlo por el lado derecho. Entonces aquí, voy a empatar la posición inicial para pasar coma a derecha Se puede ver el resultado. Comienza desde el lado del labio y lo dirigimos por el lado derecho. Es por eso que el color U aparece en el lado derecho. Y si paso Value a lap y configuro este archivo. Ahora puedes verlo enviado color rojo en el lado derecho. Ahora se mueve de derecha a izquierda. Además, se puede cambiar la dirección. Puedes hacerlo arriba, de lo contrario, abajo. Pero ahora les voy a mostrar ¿cómo podemos extender el color en posición diagonal? Supongamos que quiero establecer la dirección en esta esquina. Para eso, tenemos que pasar abajo a la derecha. Déjame mostrarte abajo a la derecha. Si configuro este archivo, se puede ver el ángulo. Ahora los colores parten de esta esquina y se int esta esquina. Y así es como puedes sentarte arriba a la derecha, labio superior, labio inferior, lo que quieras. No sólo eso, también se puede pasar ángulo particular. Entonces voy a duplicar esta línea y comentar la línea anterior. Y esta vez voy a pasar ángulo particular. Supongamos que quiero pasar 45 D. Si configuro este archivo, puede ver el resultado. Ahora nuestro color degradado comienza desde el ángulo de 45 grados. Por lo tanto, puede rotar el color de degradado lineal en cualquier dirección, y también puede pasar el valor menos. Supongamos que pasas -45 grados. Si configuro este archivo, puedes ver el resultado. Ahora se dice la dirección del gradiente lineal. Con eso, como te dije, podemos aplicar múltiples colores. Podemos aplicar más de dos colores. Entonces aquí voy a aplicar otro color llamado verde. Si configuro este archivo, puedes ver el resultado. Básicamente, puedes aplicar color tanto como quieras. Si quieres aplicar color azul con color verde, sí, solo puedes pasar el valor. Después del coma, es necesario escribir azul. Después de establecer este archivo, se puede ver el resultado. Y recuerda, puedes escribir cualquier tipo de valores de color. Por ahora, aquí usamos nombres de color, pero puedes aplicar valor hexa RV, de lo contrario, colores transparentes Déjame mostrarte el ejemplo. Entonces, para duplicar esta línea y comentar la anterior. Y esta vez al principio, voy a eliminar este valor de grado, y después del color rojo, quiero aplicar color en modo RGB, algún tipo RG BA Como ya sabéis, A value significa Alfa. Para el rojo, voy a escribir 255. Para el verde, voy a pasar cero, y para el azul, voy a pasar 255 otra vez. Y para el valor Alfa, voy a usar 0.0 0.5. Es medio semitransparente. Si configuro este archivo, puedes ver el resultado. Vaya, hay algún error de mecanografía en mi código. Tenemos que cerrar el latón marrón. Si vuelvo a configurar este archivo, se puede ver el resultado. Ya aprendemos sobre diferentes modos de color en nuestro tutorial anterior. Entonces nuestro color es semitransparente. Pero si paso solo cero, entonces configuro este archivo. Ahora puedes ver que nuestro color es totalmente transparente. Ahora solo se puede ver el color rojo. Espero que ahora te quede claro. Ahora hablemos de terneros repetidos de gradiente lineal. Déjame mostrarte cómo podemos usarlo. Entonces voy a fechar esta sección y comentar esta línea, y al principio, voy a cambiar el nombre del valor. Para eso, necesitamos escribir gradiente lineal repetate, repitiendo el gradiente lineal, tasa, verde y azul Quiero establecer este archivo. Un conjunto este archivo, se puede ver el resultado. Ahora podrías tener duda, ¿cuál es la diferencia entre estos dos? Se podría pensar que su proceso de trabajo es el mismo, pero no lo es. Pero aquí podemos usar el valor porcentual con el c. Déjame mostrarte. Supongamos que para el verde, voy a aplicar el 10%. También para el azul, voy a aplicar 20%. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver que nuestro color degradado se está repitiendo. A esto se le llama gradiente lineal repetitivo. Además, se puede dar dirección. Entonces aquí pasaría 45 grados. Si configuro este archivo, puedes ver el resultado. Ahora, hablemos del valor de gradiente radial. Voy a duplicar esta sección y comentar la línea anterior, y voy a eliminar esta línea. Y como valor, esta vez voy a escribir gradiente radial. Y voy a empezar a comer dos colores rojo y amarillo. Si configuro este archivo, se puede ver la resina. Aquí no proporcionamos ninguna dirección, y es la posición por defecto. Es por eso que los gradientes radiales parten desde el centro. En la posición central, comienza con el color rojo, y luego se rocía amarillo en las esquinas. Además, puedes proporcionar todo el color que quieras. Supongamos, con rojo amarillo, quiero aplicar color verde. Y establecer este archivo, se puede ver el resultado. No sólo eso, también se puede definir la relación de este color. Supongamos que quiero aplicar color rojo 5%. Y para el amarillo, voy a usar el 15%. Y para el verde, puedes tomar cualquier valor. Voy a usar el 60%. Si configuro este archivo, puedes ver el resultado. Además, se puede definir la forma de este gradiente. Puedes usar elipse, también círculo. Déjame mostrarte. Si configuro la altura de mi caja 300 píxeles y el conjunto de este archivo, ahora puedes ver nuestra forma de degradado es elipse Es la forma predeterminada, pero no quiero la forma de elipse Quiero círculo. Para eso, aquí necesitas escribir círculo. Después de paso este archivo, como puedes ver, ahora aplica forma de círculo. No sólo eso, también se puede definir el tamaño del degradado. Y para definir el tamaño, tenemos un valor total de cuatro. Nuestro primer valor es la esquina más alejada, y aquí está el valor predeterminado Entonces tenemos el lado más cercano. También tenemos esquina más cercana y nuestro último vale es el lado más alejado Entonces voy a aplicar uno por uno todos estos. Entonces primero, voy a duplicar esta línea y comentar la línea anterior. Y al principio, voy a quitar este círculo de valores. El primer valor que voy a usar, que es cierra la vista. Hasta que necesitamos escribir una palabra clave, que es una después de eso, tenemos que proporcionar la dirección. Entonces para dirección, voy a pasar el 50% y el 50%. Soy yo en el centro. Si configuro este archivo, puedes ver el resultado. Y ahora voy a mover este círculo al lado del labio. Entonces voy a usar el 20%. Si configuro este archivo, puedes ver el resultado. Nuestro primer valor significa dirección y nuestro segundo valor significa dirección Y xs. Y si quieres moverlo verticalmente, entonces necesitas cambiar el segundo valor. Supongamos que quiero moverlo 90%. Si configuro este archivo, puedes ver el resultado. Por la izquierda, me muevo 20%, y desde arriba, aquí me muevo 90%. Y por ahora, voy a eliminar este valor porcentual de este color. No lo quiero. Y voy a volver a poner este archivo. Ahora voy a aplicar otra cara, que está lejos esta señal. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver ahora nuestro color se puede mover para este lado tanto como sea posible porque él lo usamos para este lado, pero la posición del centro sigue siendo la misma, que es de 20% en 90%. Si lo hago 50% por 50% de los xs y de los xs, si lo hago 50% por 50%, se puede ver el resultado. El siguiente valor que tenemos es el rincón más lejano. Si usamos la esquina más alejada y esto en este archivo, entonces nuestro color intenta llegar a la esquina tanto como sea Después de establecer este archivo, se puede ver el resultado. Además, tenemos esquina más cercana. Entonces si reemplazamos más lejos con el más cercano, y ponen este archivo, lo siento, lado más cercano, no esquina Entonces si lo hago de lado, establecen este archivo, se puede ver el resultado. Si lo muevo 20% en 90% y el conjunto de este archivo, es como se trabaja en el lado más cercano. Pero si lo hago esquina más cercana, y luego pongo este archivo, ahora el color intenta llegar a la esquina más cercana. Pero si sustituyo el más cercano más lejano y este es este archivo, se puede ver el resultado Ahora trata de llegar a la esquina más lejana. Así es como este gradiente trabaja en conjunto, y necesitamos experimentar con eso. Ahora hablemos del último valor, que es repetir gradiente radial. Entonces nuevamente, voy a duplicar esta sección y comentar la línea anterior. Por ahora, voy a quitarlo todo, y voy a empatar el valor nombre repitiendo gradiente radial y semigld dos en esta línea Primer color voy a usar rojo. El segundo color voy a usar amarillo. Y el tercer color, voy a usar el verde. Para el verde, voy a aplicar el 15%, y para el amarillo, aquí voy a aplicar el 10%. Si configuro este archivo, puedes ver el resultado. Entonces esto es para este tutorial. En el siguiente tutorial, vamos a hablar de otra propiedad de gradiente, que es gradiente cónico Así que gracias por ver este video. Estén atentos. 38. Tutorial de fondo de gradiente cónico de CSS: Un placer verlos chicos. En este tutorial, vamos a hablar de una nueva propiedad de gradiente, que es gradiente cónico Ahora podrías ion ¿qué tipo de gradiente es ese? Un gradiente cónico es un degradado con transición de color, gira alrededor del bote central Para crear un degradado cónico, debe definir al menos dos colores. Ahora, definamos gradiente cónico. Así que vamos a quitar el color de fondo, y aquí voy a usar otra propiedad, que es imagen de fondo. Y voy a aplicar gradiente cónico. Gradiente cónico. Entonces necesitamos usar latón redondo. Al principio, voy a aplicar gradiente cónico de tres colores. Al principio, voy a pasar rojo, y nuestro segundo color es el amarillo, y el tercer color es el verde. Si configuro este archivo, puedes ver el resultado. Se trata de gradiente cónico con tres colores. Ahora voy a aplicar dos colores más. Entonces a continuación voy a aplicar azul y negro. Si subo este archivo, así es como se ve. No sólo eso, también se puede definir grado. Además, se puede definir grado para cada color. Déjame mostrarte. Entonces voy a duplicar esta línea y comentar la línea anterior. Y voy a introducir dos colores. Supongamos que para el color rojo, quiero aplicar 90 grados. Para color amarillo, también, quiero aplicar 90 grados. Y para el color verde, voy a aplicar 180 grados. Si subo este archivo, se puede ver el resultado. Entonces como puedes ver, combínalo toma 360 grados. Ahora, vamos a crear un gráfico circular con eso. Si escribo radio de borde, radio de borde 50%, y luego sub este archivo, se va a convertir en un gráfico Pi. No sólo eso, también se puede especificar el ángulo de inicio de este color. Déjame mostrarte. De nuevo, voy a duplicar esta sección y comentar la línea anterior, y esta vez, voy a usar sólo dos colores. Y también, voy a revocar estos valores grados. Y voy a poner este archivo. Después de establecer este archivo, como puede ver, nuestros colores parten de esta línea de estado, este ángulo. Pero podemos rotar este gradiente. Déjame mostrarte cómo. Ahora aquí, voy a pasar de 90 grados. Si pongo este archivo, se puede ver la resina. Lo giramos hasta 90 grados. Si paso 45 puedes ver el resultado. Ahora rotas este ángulo 45 grados. No sólo eso, también puedes cambiar esta posición central. Déjame mostrarte cómo. Entonces nuevamente, voy a duplicar esta sección y comentar la línea anterior. Y esta vez, voy a cambiar la posición. Entonces aquí estamos en tipo al 60% de XXs y de YxS voy a usar 45% Si configuro este archivo, puedes ver el resultado. Entonces así es como podemos usar el color degradado cónico. Además, viene con otro valor, que es repetir gradiente cónico Así que de nuevo voy a duplicar esta línea y comentar la línea anterior. Y esta vez voy a aplicar gradiente cónico repetido Creo que hay un error ortográfico repitiendo repitiendo gradiente cónico, y voy a aplicar a dos colores rojo, 10% y amarillo, 20% Si configuro este archivo, puedes ver el resultado. Entonces esta es la nueva propiedad de color degradado en CSS. Si quieres explorarlo, entonces necesitas probarlo tú mismo. Entonces esto es para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 39. Tutorial de opacidad de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vamos a aprender sobre la nueva propiedad de ACS llamada opacidad Básicamente, utilizamos la opacidad para transparentar cualquier elemento ML. Entonces comencemos la práctica y veamos cómo podemos usarla. Entonces como pueden ver, lado a lado, abro mi código de Visual Studio y mi navegador usando la extensión del servidor lip, y ya creo un documento TML llamado index dot TML Si escribiste, puedes ver, tenemos una etiqueta dip, y también establecemos una casilla de identificación. Y dentro de esta etiqueta dip, tenemos una imagen, una audiencia para etiquetar y un párrafo. Y ahora voy a usar la propiedad Opacidad en nuestra etiqueta de caja. Entonces tipo héroe Opacidad. Y aquí tenemos que pasar el valor 0-1. Supongamos que voy a pasar 0.5. Es medio semitransparente. Si configuro este archivo, aquí puedes ver el resultado. Ahora toda nuestra sección de inmersión se vuelve semitransparente, y si la haces completamente transparente, solo necesitas reducir el valor, 0.0. De lo contrario, directamente cero. Si pongo este cinco, como pueden ver, ahora nuestro elemento dip no es visible. Ahora es completamente transparente. Y si quieres que sea completamente visible, aquí necesitas pasar uno. Si configuro este archivo, esta es la razón. En nuestro tutorial anterior, aprendemos sobre el valor Alpha de transferencia de colores RGVaclor Va a transparentar nuestros colores de fondo. Pero si usamos la propiedad de opacidad, va a transparentar todo el contenido, todo el contenido dentro de este elemento box Va a transparentar la imagen, el texto, todo. Ahora bien, si quieres transparentar especialmente esta imagen, solo necesitas usar la propiedad de opacidad en tu etiqueta de imagen Entonces dentro de la etiqueta de imagen, voy a escribir Opacidad, y quiero que sea semitransparente Entonces voy a pasar 0.3. Si configuro este archivo, puedes ver el resultado. Básicamente, no hay nada tanto en esta propiedad, pero es propiedad muy útil. Entonces esto es para este tutorial. Gracias por ver este video statune para el siguiente tutorial 40. Mezcla de fondo de CSS y mezcla mixta: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con una nueva propiedad CSS relacionada con el tutorial. Y en este tutorial, vamos a aprender sobre una nueva propiedad CSS, que es el modo de mezcla de fondo. Ahora la pregunta es, ¿qué significa eso? Supongamos que al mismo tiempo usas color de fondo degradado, también imagen de fondo, y ahora decides que vas a mezclar tanto el fondo. Quieres mezclar la imagen con el color de fondo, y puedes crear diferentes efectos con él. Y esto es posible por esta propiedad, el modo de fusión de fondo. Y estos son todos los valores del modo de mezcla de fondo CSS, borde de color normal, matiz, múltiple , moño de color, color, pantalla , luz dura, saturación, superposición de luz suave, etcétera Entonces detengamos lo práctico y veamos cómo podemos usarlo. Entonces como pueden ver, lado a lado, abro mi editor de código de estudio de resultados y mi navegador usando la extensión del servidor de labios, y ya creo un documento ML llamado index dot TML Si notas, puedes ver, tenemos una etiqueta Deep en este documento. Y aquí usamos gradiente de color color de fondo degradado a esta etiqueta dip con el color de fondo degradado, y ahora voy a poner una imagen con este fondo. Para eso, voy a usar propiedad de imagen de fondo, fondo dash Imagen. Entonces aquí, después de la coma, voy a usar URL Después dentro de las rotondas dentro de los códigos individuales, voy a proporcionar el nombre de la imagen, flower dot JPG Si te muestro mi directorio de trabajo actual, puedes ver el nombre de la imagen. Entonces app debería ser Capito. Después de establecer este archivo, no se puede ver la imagen porque antes de usar la imagen de flor, aquí usamos un fondo degradado. Ahora la imagen de la flor es PhaniGradient fondo. Así que voy a usar un fondo de propiedad entonces modo. Antecedentes. Modo soso. Primer valor que voy a usar, que es pantalla. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver nuestra imagen, tratar de coincidir con el fondo degradado, y es devolver este efecto si usamos el modo de fusión de pantalla. Y ahora voy a usar otro valor, así que voy a duplicar esta línea y comentar la anterior, y aquí voy a usar overlay. Si configuro este archivo, puedes ver el resultado. De nuevo, voy a duplicar esta línea, y voy a usar otro valor, que es múltiple. Si configuro este archivo, puedes ver el resultado. A continuación, voy a usar oscurecer. Entonces voy a comenzar esta línea y comentar la anterior, y aquí voy a sustituir multiplicar por oscurecer Después de establecer este archivo, se puede ver el resultado. A continuación, voy a usar el valor de color. Entonces voy a comentar sobre esta línea, y quiero sustituir oscurecer por color Después de establecer este archivo, se puede ver el resultado. Cada vez va a devolver un resultado diferente. Y deberías probar uno por uno todo este valor para obtener el resultado diferente. Y recuerda, lo normal es el valor por defecto. Además, puedes usar múltiples imágenes. Si no quieres usar ningún color degradado y quieres mezclar entre dos imágenes, sí, puedes. Solo necesitas pasar dos imágenes de fondo. Y luego puedes aplicar los mismos modos de fusión uno por uno. Ahora hablemos de la otra propiedad del modo ciego, que es el modo ciego mixto La diferencia entre el modo mixto entonces y modo de mezcla está en fondo entonces la propiedad mode, necesitamos usar el color de fondo y la imagen de fondo innata propiedad sim Quiero decir que necesitamos usar la imagen y el fondo degradado color fondo innato Pero en modo mixto entonces, se puede utilizar uno de los valores inear propiedad Quiero decir, supongamos que usas color degradado y quieres mezclar el color de fondo con un texto. De lo contrario, puede mezclar diferentes elementos DV a la vez. Ahora, hablemos de los valores. Todos estos son valores que podemos usar en estados de ánimo mixtos de marca Entonces, sin perder el tiempo, comencemos la práctica. Por ahora, voy a duplicar esta línea y comentar la línea anterior. Y esta vez, voy a usar sólo la imagen de fondo. Quiero quitar el color degradado, y voy a configurar este archivo. Después de configurar este archivo, se puede ver el resultado. Además, voy a comentar esta línea. Y ahora voy a poner un texto en este elemento profundo. Entonces aquí, voy a usar la etiqueta H dos, H dos, y en su lugar el encabezado para etiquetar, voy a escribir hola mundo. Y voy a poner este archivo. Y ahora necesitamos darle estilo a este elemento H dos. Entonces aquí, voy a seleccionar H dos y dentro del receso de color, primera propiedad, voy a usar fondo, fondo, y voy a usar fondo de color rojo. Tarifa. La segunda propiedad voy a usar texto, línea de texto, Salton, y voy a establecer el tamaño de fuente tamaño de fuente, y quiero que sea de 55 píxeles Después de establecer este archivo, se puede ver el resultado. Y también, quiero colocarlo en medio, así que voy a agregar algo de margen superior. Fusionando la parte superior superior, quiero asignar 200 píxeles Si configuro este archivo, puedes ver el resultado. Y además, si quieres cambiar el estilo de fuente, sí, puedes. Just into tag familia de fuentes familia de fuentes aeriales. Y ahora quiero aplicar la propiedad mix blend mode en nuestro elemento HT. Modo mezcla de mezcla. Primero voy a usar, que es pantalla. Si configuro este archivo, aquí puedes ver el resultado. Y a continuación voy a aplicar otro valor, que es overlay. Después de configurar este archivo, se puede ver el resultado. A continuación, voy a usar otro valor. Entonces voy a comentar tanto la línea, y esta vez, voy a aplicar diferencia voluntad si guardo este archivo, se puede ver el resultado. Entonces uno por uno, puedes probar todos los valores, y te va a dar un efecto diferente. Entonces esto es todo para este tutorial. En el siguiente tutorial, vamos a aprender sobre la propiedad display. Así que gracias por ver este video. Estén atentos para el siguiente tutorial. 41. Tutorial de visualización de CSS: Hola, chicos, es bueno verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender una nueva propiedad llamada display. La propiedad de visualización especifica el comportamiento de visualización de un elemento. Déjame simplificarlo. La propiedad display en CSS especifica cómo se debe mostrar un elemento de estimación en la página web. Define el tipo de caja de renderizado utilizada para el elemento, que afectan su disposición y posicionamiento en relación con otros elementos. Ahora, hablemos de los valores de esta propiedad. Todos estos son valores de esta propiedad. Aquí puedes ver, tenemos un total de 21 valores. Y en este tutorial, voy a cubrir estos cinco valores, bloque no inline, inline block, y last item. Y creo sección más segura para estos cuatro valores, lino GET, lino interior, y lectura interior Así que no te preocupes por ello. En nuestro próximo tutorial, vamos a aprender sobre ello, y vamos a aprender valores relacionados con la tabla en nuestros próximos tutoriales. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Entonces como pueden ver, lado a lado, abro mi código de Visual Studio y mi navegador usando la extensión de servidor en vivo, y ya creo un documento ML, llamado index dot HTML. Entonces en nuestra etiqueta corporal, tenemos una lista unwale, y en esta lista, tenemos un total de cinco elementos de lista Entonces vamos a comenzar nuestro viaje con dispity. Entonces dentro de esta etiqueta de mosaico, primero, voy a seleccionar H una etiqueta, H una. Entonces dentro de los Calverss voy a usar dstablet Primero val voy a usar, que es monja. Básicamente, Nun Value solía ocultar el elemento, NONE. Si configuro este archivo, puedes ver el resultado. Ahora puedes verlo ocultar la etiqueta H one de esta página. Si usas valor de monja, va a eliminar completamente el elemento la misma manera, si quieres ocultar la lista inferior, solo necesitas empatar. Primero, debes seleccionar este elemento, L, L, luego dentro de los versos del auto. Nuevamente, es necesario utilizar display probilty display none. Si configuro este archivo, como pueden ver, no hay lista nodal en esta página Ahora está completamente en blanco. Recuerda, este elemento y etiquetas siguen disponibles en nuestra página. Simplemente no hay propiedad, esconde este elemento. Si selecciono este documento y presiono controlarte, puedes ver el resultado. Aquí puede ver todas las etiquetas li. Además, se puede ver la etiqueta del encabezado. Es un valor muy útil. Por qué no usar Hort Efect de lo contrario animación, nunca usan este valor Entonces por ahora, voy a quitar este nn Value. No lo necesito. Ahora hablemos de nuestro próximo valor, que está en línea. Entonces como pueden ver, hay una lista, y tenemos que decir cinco elemento de la lista. Y ahora voy a agregar border todo este ítem de lista que puedas entender todas las etiquetas LI claramente. Entonces voy a escribir IA luego dentro del Colver dice, voy a agregar frontera Borde un píxel, y quiero borde sólido. Con ese borde el color es rojo. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver que los artículos LI toman todo el ancho de este elemento. Un solo artículo toma habitación completa. Para despejarla más fácilmente, voy a agregar el bodred en nuestra etiqueta UL Entonces para copiar esta propiedad y valor y la voy a pegar aquí, y esta vez, voy a usar el color negro aburrido, Negro. Y quiero dos píxeles aburridos. Después de establecer este archivo, como puedes ver, la lista desordenada, consume toda el área, toda el área en blanco Entonces si especifico ancho de esta etiqueta malvada, supongamos con 300 píxeles. Después establece este archivo. Ahora puedes ver que nuestros elementos de lista consumen el ancho exacto de este contenedor, cual se especifica en nuestra sección de ancho 300 píxeles. Y ahora quiero mostrar todo el elemento de la lista lado a lado. No quiero mostrarles uno debajo del otro, así que necesitamos mostrar en línea todos los artículos LI. Entonces dentro de los artículos LI, voy a usar exhibir la propiedad. Pantalla en línea. Si configuro este archivo, puedes ver el resultado. Ahora puedes verlo imprimir todo el artículo en una sola fila. Es mezquino lado a lado. Este valor inline es muy útil para las propiedades relacionadas con el texto, supongamos como span, list items, etcétera La mayoría de las veces usamos el valor en línea con etiquetas y cortamos. Ahora, hablemos del valor del blog. Para eso, voy a usar alguna etiqueta de span ficticio. Span. Y dentro de la etiqueta span, voy a escribir uno. Entonces duplico esta etiqueta span cuatro veces. Y voy a numerar esta etiqueta span. Dos. Cinco. Antes de establecer este archivo, como puede ver, no usamos la propiedad display para la etiqueta span. Entonces si configuro este archivo, puedes ver el resultado. Ahora puedes verlo imprimir todos los artículos uno por uno en una sola fila. Si utilizo el bloque de propiedades de visualización, básicamente, va a jugar el papel opuesto de en línea. Déjame mostrarte. Entonces si selecciono todas las etiquetas, pan, y luego dentro del auto res, voy a usar disboty display, y voy a usar display block Si configuro este archivo, puedes ver el resultado. Ahora puedes verlo imprimir todo el artículo en una fila diferente. Si agrego el borde, alguien que copie esta línea y la pruebe aquí y establezca este archivo, puede ver el resultado. Ahora juega lo contrario roll up en valor de línea. Básicamente, este tercer valor de bloque convierte el elemento span en un desarrollo. Ahora estos elementos son trabajo como un desarrollo. Déjame mostrarte. Ahora podemos asignar W con 300 píxeles. Después de asignar la hierba, se puede ver el resultado. Pero, ¿qué? Si descommen esta línea, asignada con, ahora puedes ver nuestra propiedad Con no funcionan correctamente en porque span es una etiqueta relacionada con el texto Pero si usas display property block, lo convierte, y ahora es trabajo como un deve ilment Ahora hablemos de otra propiedad, que está en bloque de préstamo. Como puede ver, todos los elementos de la lista están alineados en una sola línea porque su uso propiedad inline, pero desea asignar W a este elemento. Si usa un valor en línea, entonces no puede asignarlo a estos elementos. Además, quiero asignar relleno y margen desde toda la dirección. Si asignamos padding o margin, déjame mostrarte algún tipo padding 20 pixel. Si configuro este archivo, va a asignar relleno desde el lado izquierdo y el lado derecho. No va a asignar relleno desde la parte superior e inferior. Si configuro este archivo, puedes ver el resultado. Si asignamos margen a este elemento de la lista, no va a funcionar desde toda la dirección. Va a funcionar sólo el lado izquierdo y derecho. Déjame mostrarte. Margen Quiero agregar pH de margen de cinco píxeles. Si configuro este archivo, puedes ver el resultado. Como puede ver, proporciona un margen de cinco píxeles desde el lado izquierdo y el lado derecho, pero no proporciona un margen de cinco píxeles desde la parte superior e inferior. Para resolver este problema, tenemos bloque inline V. Quiero imprimir todo el elemento en una sola línea. También quiero asignar margen. No te preocupes por cinco. Si aumento el ancho del navegador, ahora está alineado con la línea única. Pero si usamos inline Inline lob value, inline block, y luego este archivo, ahora se puede ver que proporciona margen desde arriba e abajo Ahora puedes verlo imprimir todo el elemento en una sola fila. Ya que funciona como un elemento de bloque. Por eso podemos asignar con margen, etcétera. Etiqueta span, etiqueta LI, etiquetas CAT, todos estos son elementos relacionados con el texto. Por defecto, no funciona como un de iliment. Por eso no podemos proporcionar maleza, altura, margen, etcétera Pero podemos convertir este elemento como un ilment usando propiedad interior, propiedad, propiedad de bloque en línea, etcétera Ahora, hablemos de la última propiedad para este tutorial, que es el elemento de lista. Como puedes ver, en nuestra etiqueta span, usamos display block. Pero por ahora, voy a duplicar esta línea y comentar la línea anterior. Y si convertimos elemento de lista, desvalorizamos Listarlo y luego configuramos este archivo después de establecer este archivo, como puede ver, no hay cambios porque elemento de lista convierte este pen tags en elementos de lista Ahora es trabajo como una lista de elementos de etiqueta UL. Es bastante confuso. Permítanme aclarar el concepto con el ejemplo. Entonces aquí, voy a crear una etiqueta dip. BF, y voy a asignar el nombre de la clase punto, y el nombre de la clase es box. Y dentro de esta etiqueta dip, voy a tomar etiqueta total de dos párrafos, P. Y en esta etiqueta de párrafo, voy a usar spentag span en párrafo, voy a usar total tres etiqueta Spen Entonces voy a duplicar el spentag dos veces. Este es span uno. Este es el lapso dos. Y este es el span número tres. Entonces voy a duplicar de nuevo toda la sección. Y voy a poner este archivo. Después de establecer este archivo, se puede ver el resultado. Y ahora voy a seleccionar toda la etiqueta de párrafo dentro de esta caja. Entonces dentro de esta etiqueta de azulejo, primero, voy a escribir punto BOX. No te preocupes. Vamos a aprender sobre los seleccionados avanzados en nuestro próximo tutorial. Por ahora, te voy a mostrar el cuadro de ejemplo, y quiero seleccionar todo el párrafo dentro de esta caja. Entonces dentro de la Calibra dice, primera propiedad, voy a usar color de fondo, color de fondo, voy a usar azul Siguiente propiedad, voy a usar poco relleno, relleno, diez píxeles. Además, voy a usar poco margen. Margen, 20 píxeles. Por fin, voy a usar esta propiedad. Exhibir, y quiero menos artículo. Quiere configurar este archivo. Después de establecer este archivo, aquí puedes ver el resultado. Ahora se puede ver que funciona como una lista de elementos. Y además, si comento esta sección por ahora, no necesito esta sección y la voy a volver a configurar. Ahora puedes ver el resultado real. Ahora puedes verlo convertir toda la etiqueta de párrafo en un elemento de lista. Y también, se pueden ver los puntos de lana. Pero notas aquí no usamos ninguna etiqueta LI o etiqueta UL, solo para usar etiqueta de párrafo y etiqueta span, pero sigue funcionando como elementos de lista. Este es el poder del elemento de lista ame. Y ahora podemos aplicar toda la propiedad de elemento de lista en estos artículos. Ahora somos capaces de usar la propiedad de imagen de estilo, posición de estilo, etcétera. Déjame mostrarte. Entonces voy a usar una propiedad llamada ist tyle position. Posición de estilo de lista. Por defecto, nuestro valor está afuera, así que voy a usar valor interior. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver que nuestros puntos de ítem de lista se mueven al interior de este contenedor. Entonces este es el poder de este valor. Entonces esto es para este tutorial. Gracias por ver este video, estén atentos a los próximos tutoriales. 42. Tutorial de visibilidad de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con una nueva tesis relacionada con el tutorial. Y en este tutorial, vamos a aprender sobre una nueva propiedad, que es la visibilidad. Visibilidad bastante similar con propiedad Disbnun. Y estos son todos los valores relacionados con la propiedad de visibilidad, colapso oculto visible. Sé que ya estás familiarizado con el Video visible y oculto, pero la propiedad de Cole funcionará con televisores. Entonces comencemos la práctica y veamos cómo podemos usarla. Entonces como pueden ver, lado a lado, abrí mi editor de código Visal Studio y mi navegador usando la extensión Lifesaver, y ya creo un documento STL llamado Entonces como puedes ver en nuestra etiqueta corporal, tenemos debajo lista y un párrafo, y voy a usar propiedad de visibilidad en nuestra etiqueta de estilo. Entonces al principio, voy a usar voy a seleccionar etiqueta UL UL. Entonces dije la propiedad ClrassF, voy a usar display Ahora podría haber cuestionado por qué uso la propiedad de exhibición. Déjame mostrarte. Pantalla y valor de visualización de hemotipo, monja Si utilizo el valor de visualización monja y luego configuro este archivo, como pueden ver, oculto nuestra etiqueta UL Se quitó completamente la etiqueta UL. Por eso nuestra etiqueta de párrafo cambia hacia arriba. Pero si comento esta línea y uso visibilidad, visibilidad, oculto y denso hasta este archivo. Ahora puedes ver lo diferente. Como puede ver, oculta nuestra etiqueta UL, pero aún así tenemos el área exacta en esta sección, y esa es la principal diferencia entre la visualización y la propiedad de visibilidad. Básicamente, es muy útil con Efecto Hor y animaciones. Ahora, hablemos de nuestro último valor, que es el lapislázuli. Para eso, como te dije, necesitamos crear una mesa. Entonces aquí, dentro del cuerpo etiquetar la etiqueta UL, voy a crear una tabla. Mesa. Y dentro de esta tabla, voy a crear dos datos de tabla, TD. Dentro de la tabla primero voy a crear fila de agudos PR y voy a crear un total de dos filas de tabla Entonces duplico esta sección, y dentro de esta fila de tabla, voy a crear dos columnas así que escriba TD. Y aquí voy a escribir uno. Y voy a crear otra etiqueta TD. Entonces duplico esta sección, y este día voy a escribir dos. Esta es la celda número uno, y esta es la celda número dos. Y voy a duplicar toda esta sección y reemplazar una por C, y reemplazar dos por cuatro. Y voy a poner este archivo. Después de establecer este archivo, puedes ver la tabla, pero no puedes ver las celdas de la tabla porque aquí no usamos ningún borde. Entonces dentro de la etiqueta de la mesa, voy a usar border. Frontera, y voy a usar la frontera uno. Si configuro este archivo, puedes ver el resultado. Ahora agrega borde a esta tabla. Entonces como puede ver, tenemos un total dos filas en esta tabla y dos columnas en esta tabla. Y ahora quiero ocultar el valor de cuatro columnas de esta tabla. Para eso, necesitamos usar la propiedad de visibilidad. Quiero ocultar el cuarto, así que voy a asignar una clase a la clase de etiqueta T, y nuestra clase ellos es cuatro. Después estableces la etiqueta de estilo, ramo tipo punto cuatro. Entonces dije el Cairass voy a usar la visibilidad del nombre de la propiedad Visibilidad igual a oculta. Si configuro este archivo, puedes ver el resultado. Después de establecer este archivo, como puede ver, oculta con éxito el número de celda cuatro de esta tabla. Entonces esta es la forma en que puedes ocultar celular de esta tabla. ¿Pero qué? Si necesitas esconder una fila de esta mesa, déjame mostrarte. Así que quita este ejemplo o algunos quitan este vaso. Entonces en esta etiqueta Tar, voy a asignar una clase clase X. Puedes asignar cualquier nombre de clase. Entonces voy a seleccionar esta clase dentro de esta etiqueta de estilo, X dentro de la visibilidad de Cliras. Esta vez, voy a usar este valor Caps. Y si configuro este archivo, y si configuro este archivo, no está funcionando porque aquí no usamos Tau. Ahora bien, si configuro este archivo, se puede ver el resultado. Se alzó con éxito una fila de esta tabla. Este es el uso de este valor, colapso. Entonces gracias por ver este video. Estén atentos para nuestro próximo tutorial. 43. Tutorial de diseño básico de CSS Html: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vamos a crear este diseño básico de maquetación. Es un diseño muy sencillo y básico, y voy a crear este diseño usando esas propiedades que aprendemos en nuestros tutoriales anteriores. Aquí, no voy a usar ninguna propiedad CSS avanzada. Básicamente, en este tutorial, voy a terminar todas las propiedades CSS que aprendemos en nuestros tutoriales anteriores. Como puedes ver, en este diseño, vamos a crear una sección de encabezado, una sección de menú, una sección de contenido, una sección barra lateral y una sección de pie de página. Así que comencemos la práctica y veamos cómo podemos usar las propiedades básicas de CSS para crear el layout. Como puedes ver, estamos en mi codeador de visual studio aquí vamos a intentar crear un layout básico de DML Al principio, voy a tomar un elemento profundo dentro de la etiqueta body, D. Luego dentro de este elemento, voy a tomar un total de cinco otro elemento div, Dev y voy a duplicarlo por tiempo. Ahora voy a asignar un ID a nuestro elemento paren Deb, Bev ID, y voy a Se puede asignar cualquier nombre. Depende de usted. Además, voy a asignar un ID a nuestro primer elemento div, que está dentro del contenedor. De lo contrario, puedes llamarlo rapero. El tipo de identificación. Este elemento profundo es para sección de encabezado, voy a asignar encabezado. Y en nuestro segundo elemento div, voy a asignar ID Min en nuestro tercer elemento div, voy a asignar contenido ID. Y en nuestro cuarto elemento, voy a escribir ID side word. Esta es la sección de palabras secundarias en nuestro quinto elemento profundo, aquí voy a asignar ID footer. Después dentro del elemento deep header, aquí voy a usar encabezado una etiqueta, H una. Entonces voy a escribir, puedes escribir todo, así que por ahora, voy a escribir hola palabra. De lo contrario, puede escribir su propio nombre de sitio web. Por ahora, voy a escribir hola mundo. Entonces voy a saltar a la sección de menú aquí voy a usar etiqueta UL. Dentro de la ist nodal, voy a usar la etiqueta LI, I. También dentro de la etiqueta LI, voy a usar Cuttag Como saben, la etiqueta NCT se utiliza para fugas. Entonces escribe A, y dentro de esta etiqueta C, nuestro nombre de primer enlace es H. Entonces voy a duplicar esta sección varias veces y en nuestro segundo enlace de menú, aquí voy a escribir sobre nosotros. En nuestro tercer enlace, aquí voy a escribir Galla y en nuestro cuarto ítem, voy a pasar contactos Y luego voy a saltar a la sección de contenido. Al principio, dentro de la sección de contenido, voy a pasar rumbo a etiqueta y él escribe. Voy a escribir maquetación de diseño básico. Disposición de diseño básico. Entonces voy a escribir al párrafo ficticio. Entonces aquí uso la etiqueta P, y voy a escribir um 30 palabra. Además, voy a duplicar esta sección. Aquí paso dos párrafos. Entonces voy a saltar a la sección de barra lateral. También en esta sección, quiero imprimir, quiero imprimir la opción de menú. Copo la etiqueta UL con la etiqueta LI. Entonces voy a pegarlo dentro de la sección de barra lateral. Entonces dentro de la sección de pie de página, aquí quiero escribir un DammitexToWise, puedes De lo contrario, puede escribir cualquier párrafo, lo contrario, puede proporcionar alguna fuga. Básicamente, voy a escribir mi sitio web. A los derechos de autor. 2024. Entonces esta es nuestra estructura básica de TMS de nuestro sitio web Y si configuro este archivo y te muestro mi navegador, déjame mostrarte. Ahora puedes ver ahora nuestro sitio web se ve así, y eso se ve muy aburrido e inútil. Y ahora vamos a iniciar la tesis. Entonces comencemos este estilo con la etiqueta de rapero. Lo siento, elemento rapero. Entonces voy a usar etiqueta de estilo dentro del estilo de etiqueta de cabeza. Después dentro de esta etiqueta de estilo, voy a seleccionar al rapero. Quiero seleccionar el elemento Dip padre, y voy a usar el envoltorio ID. Entonces copia el nombre de identificación y yo voy a pegarlo aquí. Entonces dentro de la res de color está, la primera propiedad voy a usar border border. Quiero un pixel, borde sólido. Con eso, quiero negro color boddblack voy a configurar este archivo Y también voy a asignar weed a este contenedor envoltorio, weed, y quiero establecer con 1,000 pixel. Son este archivo, si te muestro mi navegador, déjame mostrarte, se ve así. Ahora voy a abrir mi página web y mi editor lado a lado. Después dentro de la envoltura, también voy a usar otra propiedad llamada color de fondo. Fondo y quiero establecer color blanco. Recuerda, cuando empieces a diseñar tu página de mesa, debes comenzar con la etiqueta corporal. Al principio, voy a seleccionar la etiqueta corporal. Cuerpo, luego dentro de la culivra dice, voy a seleccionar propiedad de familia de fuentes, familia de fuentes, y voy a usar fuente aérea Real. Quiero establecer este archivo. Después de configurar este archivo, se puede ver el resultado. Cambia todas las fuentes que están dentro de la etiqueta body, y luego voy a asignar un color de fondo a nuestra etiqueta body. Impresionante tipo fondo dentro de la etiqueta del cuerpo, entonces voy a usar, y voy a usar fondo de color gris, gris. Quiero establecer este archivo. Y aquí se puede ver el resultado. Y ahora quiero centrar este elemento profundo dentro de esta página web. Para eso, voy a usar margin property. Déjame mostrarte. Entonces dentro del envoltorio, voy a escribir margin. De arriba y abajo, quiero margen de cero píxeles, cero, y de izquierda y derecha, quiero margen automático. Auto. Subvamos el archivo y volvamos al navegador. Ahora puedes verlo alinear con éxito el contenedor padre a mitad de esta página. Desde la izquierda y la derecha, proporciona el mismo espacio. Y si te das cuenta puedes ver, hay un margen desde este lado superior, pero no usamos ningún margen de arriba y abajo. Para eso, inserta tu etiqueta corporal, necesitamos usar otra propiedad. Entonces inserte el cuerpo etiquetarla en el margen de tipo. Margen, cero. Y también, necesitamos hacer que la propiedad de relleno sea cero. Y si configuro este archivo y vuelvo al navegador, se puede ver el resultado. Ahora no tenemos ningún espacio desde la parte superior. Y ahora vamos a diseñar el layout desde el interior. Así que volvamos al código de estudio del usuario. Y ahora vamos a darle estilo a la sección de encabezado. Entonces voy a escribir encabezado de hashtag. Entonces dije el calress voy a usar una propiedad llamada fondo, y quiero decirlo color carmesí Carmesí quiero satisfacer. También, quiero duplicar esta sección y esta vez, esta vez, quiero configurar la sección de menú. Voy a escribir menú Hateg. Aquí lo vamos a decir color de fondo, salmón claro. Y quiero establecer este archivo. Y además, voy a usar el mismo color en nuestra sección de pie de página. Entonces duplico de nuevo esta sección, y esta vez, voy a seleccionar Pie de página. Así que copia el nombre ID Pie de página, y voy a pegarlo aquí. Colocamos menú con Pie de página. Y para la barra lateral, voy a usar azul claro duplicar esta sección y reemplazar menú con barra lateral. Copia el nombre de identificación y voy a reemplazar con Min quiero configurar este archivo. Después de configurar este archivo, si te muestro mi navegador, aquí puedes ver el resultado. Lo siento, para la sección de barra lateral, quiero usar azul claro. Entonces voy a sustituir el color salmón claro por azul claro. Y voy a poner este archivo. Después de que configuré este archivo, yo diseño luzco así. Ahora al principio, quiero asignar altura a nuestra sección de cabecera. Entonces voy a escribir en la sección header, height property. Altura, y voy a asignar 100 píxeles de altura, y voy a configurar este archivo. Vamos a abrir el navegador y el editor uno al lado del otro. Después de proporcionar 100 píxeles de altura a la sección de encabezado, se puede ver el resultado. Ahora vamos a saltar a la opción de menú. Aquí puede ver el elemento del menú como un elemento de lista, y los elementos están debajo entre sí, pero quiero imprimir los elementos del menú en línea. Para eso, necesitamos usar la propiedad display inline. De lo contrario, puede usar la propiedad dp inline. Seleccionemos todos los elementos de la lista, que se encuentra dentro de la etiqueta de menú. Entonces Herodotipo, hashtag, menú, luego dentro del menú, toda la etiqueta LI, luego dentro del color dice, voy a usar display, y voy a usar inland gog Quiero establecer este archivo. Después de configurar este archivo, se puede ver el resultado. Ahora imprime el valor lado a lado. Ahora puedes verlo imprimir los artículos uno al lado del otro. Ahora estos artículos están dispuestos en una línea. Además, va a funcionar como elemento de bloque. Quiero decir también que va a funcionar como un elemento profundo. Ahora aquí podemos asignar margen de relleno lo que queramos usar. Ahora voy a apuntar a toda la etiqueta Cut que está dentro del menú. Para eso, voy a duplicar esta sección, y voy a seleccionar toda la LI dentro de la etiqueta de menú, toda la etiqueta LI, luego dentro de la etiqueta LI, quiero seleccionar toda la etiqueta NGA Entonces voy a usar dis propiedad solo bloque. Quiero establecer este archivo. Ahora voy a proporcionar un poco de acolchado a estos tanques de anclaje. Para eso, voy a usar la propiedad padding. Relleno de izquierda y derecha, voy a pasar cinco píxeles y desde arriba e abajo, voy a pasar diez píxeles. Si configuro este archivo, puedes ver el resultado. De arriba y abajo, voy a pasar cinco píxeles y de izquierda y derecha, voy a pasar diez píxeles. Después de configurar este archivo, se puede ver el resultado. Creo que no es suficiente, así que voy a aumentar el valor. De arriba y abajo, voy a usar diez píxeles y de izquierda y derecha, voy a usar 15 píxeles. Después de configurar este archivo, se puede ver el resultado. Y ahora necesitamos darle ancho a esta área de contenido. Además, necesitamos darle peso a esta zona lateral. Entonces, como saben, nuestro ancho total de esta continua es de 1,000 píxeles. Entonces para el área de contenido, voy a usar 800 píxeles, y para el área de la barra lateral, voy a usar 200 píxeles. Entonces, al principio, necesitamos seleccionar el área de contenido usando su DNameHZTA Entonces dentro de los calibrss voy a asignar trigo. Residuos, 800 píxeles. Entonces, ¿dentro de la palabra secundaria? Como voy a asignar mojado. Oeste 200 píxeles. Si configuro este archivo, ahora se ve así, y ahora necesitamos cambiar la sección de la barra lateral en el lado derecho. Para hacerlo, necesitamos usar la propiedad float y ya estamos familiarizados con eso. Dentro de la sección de contenido voy a escribir float, float, it. Para la barra lateral, voy a usar la propiedad float wt. Quiero establecer este archivo. Después de establecer este archivo, se ve así. Como puedes ver nuestro desbordamiento de contenido desde el contenedor, también puedes ver nuestra etiqueta de pie, nuestra sección de pie de página debajo de la sección de la barra lateral. Ahora, si recuerdas en nuestros tutoriales flotantes, aprenderemos sobre otra propiedad llamada clear. En nuestra barra lateral de elementos anterior usamos la propiedad float. Por eso va a publicar pie de página debajo de la sección de barra lateral. Ahora, necesitamos borrar la sección de pie de página. Básicamente, la propiedad clara controla el flujo junto al elemento flotado Si uso claro y voy a usar claro ambos. Si subo este archivo, se puede ver el resultado. Ya aprendimos sobre esta propiedad en nuestro tutorial anterior, así que no la voy a explicar a fondo. Ahora, agreguemos algo más de contenido a nuestras etiquetas de párrafo. Dentro de esta etiqueta de párrafo , de nuevo, voy a usar Lim. Lorem esta vez quiero añadir 100 palabras, y voy a hacer lo mismo para nuestro siguiente párrafo Lim. 100. Up configurar este archivo, se puede ver el resultado. Básicamente, utilizo el contenido extra para sentir el área de contenido, y luego voy a asignar algunos pading a nuestra sección de pie Entonces escribe padding, y voy a usar el extremo corto. De arriba y abajo, quiero proporcionar cinco píxeles y de izquierda y derecha, quiero proporcionar diez píxeles. Y de izquierda y derecha, voy a proporcionar diez píxeles. Up configurar este archivo, se puede ver el resultado. Y si quieres mover este contenido en el lado derecho, solo necesitas usar la propiedad text align. Alineación de texto, derecha. Y es necesario establecer este archivo. Después de configurar este archivo, se puede ver que movió el contenido del lado derecho. Ahora bien, si notas nuestra sección de barra lateral no se ve tan bien. Entonces para eso, voy a usar propiedad de altura mínima. Además, voy a usar la propiedad de altura mínima para el área de contenido. Entonces voy a usar la altura mínima, y quiero asignar una altura mínima de 500 píxeles. Entonces voy a copiar esta sección y voy a usar el mismo valor para la sección de barra lateral, altura mínima, 500 píxeles. Si configuro este archivo, ahora se ve bastante bien. Ahora se nota que puede ver que hay una brecha entre la sección de cabecera y la sección minu Esta brecha es proporcionada por nuestra etiqueta UL. lista ByefultUnwal proporciona esta brecha, y ahora necesitamos apuntar a la etiqueta UL, que está dentro del Minutag que Menú Hera moo tipo Hastag. Después en establecer el menú, voy a apuntar a la etiqueta UL UL. Luego dentro de los cariverss, necesitamos hacer cero la propiedad de margen y la propiedad de relleno. Tecleamos margen cero. Además, necesitamos hacer que el relleno sea cero. Si configuro este archivo, puedes ver el resultado. Además, se puede ver lo mismo para la etiqueta de encabezado uno. También se proporciona poco margen desde la parte superior. Como necesitamos que sea cero. El tipo hastag header, luego voy a seleccionar la etiqueta H una que está dentro de la etiqueta de encabezado Entonces dentro del hígado dice, voy a escribir margin property, margin zero. Además, voy a hacer que el relleno sea cero. Si configuro este archivo, puedes ver el resultado. Ahora quiero eliminar todo el subrayado de las etiquetas de anclaje, que se encuentra dentro del menú Voy a seleccionar toda la etiqueta de anclaje que está dentro del menú. Para eso, necesitamos usar propiedad de decoración de texto, decoración de texto, ninguna. Y quiero establecer este archivo. También quiero cambiar el color por defecto de esta etiqueta de anclaje. Por defecto, proporciona color azul, pero quiero color negro para esta fuente. Voy a usar propiedad de color, color, negro. Voy a establecer este archivo. Además, tenemos que hacer lo mismo para la opción del menú de la barra lateral. Aquí voy a atar hashtag, barra lateral, luego dentro de la barra lateral, quiero apuntar a todos los y cortar ta. Entonces dentro del carnívoro voy a usar lleva Toma decoración, aprende también voy a usar de color. Color, quiero de color negro. Voy a establecer este archivo. Y ahora, si te das cuenta, puedes ver, no hay brecha entre el contenido y la barra lateral del navegador. Para eso, voy a agregar poco relleno a esta sección de contenido. Así que vamos a saltar a la sección de contenido y voy a usar la propiedad padding. Relleno, y voy a asignar diez pading de píxeles desde toda la dirección Antes de poner este archivo, voy a decirte algo. Si configuro este archivo, va a aumentar el ancho real del contenedor. Porque como te dije, si añadimos relleno desde todas las direcciones, lo contrario lado a lado, va a aumentar el ancho del elemento. Déjeme mostrar. Después de establecer este archivo, se puede ver el resultado. Como puedes ver, proporciona poco espacio en el lado izquierdo. Ya que proporciona poco espacio en el lado derecho, pero nuestra estructura estim está completamente rearreglada Para resolver este problema, necesitamos usar la propiedad de tamaño de caja, y ya lo aprendimos en nuestro tutorial anterior. tamaño de la caja de corbata Hemo, y voy a usar el valor de la caja de borde Si configuro este archivo, puedes ver el resultado. Básicamente, como te dije, vamos a usar solo estas propiedades que aprendimos en nuestros tutoriales anteriores. Por eso no voy a usar ninguna propiedad avanzada para crear este diseño. Solo uso las propiedades básicas que aprendemos en nuestros tutoriales anteriores. Después de usar box sizing puberty, podemos agregar tanto relleno como queramos. Básicamente, reducir el área de contenido y agregar el relleno a su alrededor. Y ahora me gustaría cambiar el color de fondo agregando. Aquí uso el color negro, pero no quiero el color negro. Entonces para eso, voy a usar el color blanco. Voy a establecer este archivo. Como le voy a asignar poco margen. Entonces desde arriba, voy a asignar 40 píxeles. Y desde la derecha, quiero usar cero píxeles. Desde abajo también voy a usar cero pixel y desde la izquierda, quiero asignar 20 pixel. Si configuro este archivo, puedes ver el resultado. Y ahora quiero agregar poco relleno a la sección de encabezado. Aquí voy a escribir asignar el relleno desde la parte superior. Voy a usar relleno de propiedad. Top acolchado, top acolchado, voy a usar T pixel. Además, voy a reducir algo de altura. Aquí voy a pasar 80 píxeles de altura, y voy a establecer este. Solo trato de arreglar la alineación vertical de la etiqueta de encabezado uno. Entonces voy a aumentar el relleno superior vedo. Voy a hacer que sea de 30 píxeles. Después vuelve a configurar este archivo. Creo que 40 es perfecto. Después de estudiar este archivo, se puede ver el resultado. Sí, 40 es perfecto. Aquí, solo intenté crear un layout básico con esta propiedad que aprendimos en nuestro tutorial anterior. No utilizamos ninguna propiedad CSS avanzada, y este diseño no responde. Es solo un diseño de suding. Aquí no aplicamos ninguna propiedad de posición. Además, no aplicamos ninguna animación, efectos de hover, etcétera porque este es el final de la sección CSS básica partir del siguiente tutorial, vamos a saltar a la sección adversa. Vamos a aprender sobre la posición, índice Z, media queries, etcétera Vamos a aprender sobre unidades, variables, funciones y muchas más. 44. Tutorial de posición de CSS (absoluto, relativo, fijo, fija) 90p mejorado: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre una nueva propiedad, que es la posición CSS. Básicamente, esta propiedad viene con cinco valores, estática, relativa, absoluta, fija y pegajosa para usar el valor correctamente, necesitamos usar algunas propiedades de ayuda. Todas estas son propiedades de ayuda que podemos usarlo con propiedades de posición. P derecha, arriba e abajo. No podemos usar lept y right juntos, necesitamos usar una propiedad entre ellos. la misma manera desde arriba e abajo, necesitamos usar una propiedad, y para entender la vuelta a la derecha y la posición superior e inferior, necesitamos entender Xs Xxs y YxS Supongamos que desea mover el elemento hacia el lado derecho. Para eso, necesitas usar Xs, Xs positivos y si quieres moverlo del lado izquierdo, en ese caso, necesitas pasar valores menos. la misma manera, si proporcionas un valor positivo de Y xs, entonces va a mover el elemento hacia abajo, y si proporcionas valor menos, entonces va a mover el elemento hacia arriba. Sin hablar demasiado, comencemos lo práctico y veamos cómo podemos hacerlo. 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. Entonces, como puede ver en nuestro documento de estimación, tenemos una etiqueta de encabezado y una etiqueta de dos párrafos. Y entre estas etiquetas de dos párrafos, tenemos una etiqueta profunda con gusto ID, y en nuestra sección de estilo, ya diseñamos este elemento profundo. Vamos a experimentar con la propiedad de posición. Al principio, voy a usar el valor relativo, la posición relativa. Posición, relacionar. Básicamente, aquí utilizo solo una propiedad, la posición relativa, pero no uso el valor inferior de la vuelta superior. Si configuro este archivo, no va a cambiar nada. Déjame mostrarte. Después de separar este archivo, como puede ver, no hay cambios. Como te dije antes, para usar la propiedad de posición, necesitamos usar otra propiedad de apoyo. Voy a usar la propiedad P. P y de la vuelta, voy a moverlo cien pixel. Si configuro este archivo, ahora puedes ver el resultado. Mueve nuestro elemento 100 píxeles desde el lado izquierdo. Además, quiero moverlo desde la parte superior. Entonces voy a usar la propiedad top, top cien pixel. Si vuelvo a configurar este archivo, se puede ver el resultado. Se movió el elemento, 100 píxeles desde la parte superior. La posición relativa mueve el elemento desde la posición exacta del elemento. Si paso -100 pixel desde la parte superior, entonces configuro este archivo, ahora puedes ver el resultado Así es como funciona la posición relativa. Ahora, hablemos de nuestra próxima propiedad que es absoluta. Al principio voy a comentar tanto la línea, voy a cambiar la posición. Relativo a absoluto. Si configuro este archivo, ahora puedes ver el resultado. En CSS, el posicionamiento absoluto es una técnica de diseño que permite controlar con precisión la posición de un elemento en relación con sus ancestros de posición de contención o más cercanos. Como puede ver, no utilizamos la propiedad lit y top, solo para usar la posición absoluta. Nuestro segundo párrafo por defecto, ir detrás de este elemento. Ahora voy a usar propiedad top, propiedad top y lip. Su tipo desde arriba quiero asignar 100 píxeles. Si configuro este archivo, va a funcionar acuerdo a la posición absoluta de esta pantalla. Esta es la posición absoluta de nuestra ventana, por lo que va a mover el elemento, 100 píxeles desde esta posición. Si configuro este archivo, puedes ver el resultado. Si lo hago diez píxeles y configuro este archivo, ahora puedes ver ahora es más claro para ti. Básicamente, es trabajo de acuerdo al elemento Tarrant. De igual manera, si trato de moverlo p lado, para eso, voy a usar el valor p, lap 20 pixel. Lo sentimos, 20 píxeles no 200 píxeles. Si configuro este archivo, puedes ver el resultado. Como te dije, este puesto funciona de acuerdo con el elemento padre. Y como puedes ver, en nuestro caso, nuestro elemento padre es body tag. Solo necesitas recordar una cosa. La posición relativa trabaja de acuerdo con la posición exacta, pero la posición absoluta funciona de acuerdo con el elemento padre. Ahora, hablemos de nuestro siguiente valor, que es la posición fija. Pero antes de usar este valor, voy a duplicar esta etiqueta de párrafo varias veces. Y voy a poner este archivo. Después de configurar este archivo, aquí puedes ver la barra de desplazamiento. Si me desplazo hacia abajo esta barra de desplazamiento, como pueden ver, mueve nuestro elemento profundo con esta barra de desplazamiento. Pero si utilizo posición de valor fijo fijo, y luego configuro este archivo, ahora se puede ver que no hay cambios. Pero si me desplazo hacia abajo en mi página, como pueden ver, nuestro elemento se fija a su posición. Nuestro elemento no se mueve con esta barra de desplazamiento. Entonces ese es el uso del valor fijo. Pero si usas absoluto por lo demás relativo, entonces vas a mover el elemento con el scroll. Ahora, hablemos del siguiente valor, que se está pegando. Pero antes, de nuevo, voy a duplicar este párrafo varias veces y establecer este archivo. Entonces aquí voy a usar el pegado de posición y voy a configurar este archivo. Después de configurar este archivo, se puede ver el resultado. Ahora se puede ver antes del elemento, tenemos que decirle a cuatro paragrama también utilizo top end lit propiedad Por ahora, voy a cambiar los valores. Desde arriba, quiero pegarlo 50 pixel y desde la vuelta, también, voy a pegarlo 50 pixel, y voy a configurar este archivo. Después de configurar este archivo, si me desplazo por esta página, como pueden ver, los elementos se adhieren a la posición exacta. Qué mencionamos en nuestra sección de estilo, top 50 y lap 50. Si trato de desplazarme hacia abajo en mi página, como pueden ver, no se mueve. La propiedad de posición pegajosa en CSS es una posición híbrida de relativa y posición fija. Hasta que obtenga la posición de desplazamiento especificada, qué mencionas usando la propiedad top y lip, se comporta como una posición relativa y después de alcanzar la posición de desplazamiento , se vuelve fija Este comportamiento es particularmente útil para crear elementos como encabezado, barra lateral y pie de página. Lo siento, no el pie de página. No lo usamos para pie de página. Básicamente, lo usamos para encabezado y barra lateral. Siempre que los usuarios se desplacen hacia abajo en la página, algún momento necesitamos pegar la barra lateral y la sección de encabezado a nuestra área de puntos de vista Por eso necesitamos usar la posición pegajosa. Ahora les voy a mostrar cómo podemos usar el valor absoluto y el valor relativo juntos. Al principio, voy a despejar todos los elementos de nuestra etiqueta corporal. Voy a quitarlo todo. Entonces, por ahora, nuestro cuerpo es completamente negro. Al principio, dentro de la etiqueta body, voy a asignar a la etiqueta de párrafo usando P, y quiero algo de texto ficticio Inferior 200. Entonces después de este párrafo, voy a crear una etiqueta profunda y quiero asignar un cuadro de nombre de clase. Entonces dentro de esta etiqueta profunda, aquí voy a crear deep tag, B dot box dos. Y ahora al principio, voy a darle estilo a este elemento box def Es esta etiqueta de estilo, voy a escribir punto box. Después dentro de los colores, primero, voy a asignar ancho con 500 píxeles. Y además, voy a asignar altura, altura 500 píxeles. Entonces voy a asignar color de fondo. Antecedentes. Amarillo, por lo demás, color rojo. Voy a establecer este archivo. Entonces, para establecer este archivo, como pueden ver, este es nuestro elemento profundo, y es un elemento paren deep Entonces voy a darle estilo a la caja dos elemento, tot, caja dos Entonces puse los autos es. Primera propiedad voy a usar W W 100 pixel. Entonces voy a usar altura, altura 100 pixel y el color de fondo es rosa. Pero voy a usar la propiedad de posición, posición absoluta. Y desde arriba, quiero 50 píxeles. Y del laboratorio, quiero 50 píxeles. Si configuro este archivo, puedes ver el resultado. Como te dije antes, posicionamiento absoluto funciona de acuerdo con el elemento dip padre, lo contrario, elemento padre, pero puedes ver, no está funcionando de acuerdo a él. Para resolver este problema, necesitamos usar la propiedad de posición en nuestro elemento de inmersión de caja. Voy a escribir posición y necesitamos que nuestra posición sea relativa. Si configuro este archivo, ahora es trabajo de acuerdo con el elemento padre exacto. Ahora bien, si muevo nuestro elemento paréntivo hacia la izquierda y hacia la derecha, va a mover el elemento hijo acuerdo con el elemento parentb . Déjame mostrarte. Desde arriba quiero moverlo 100 pixel. Y desde el laboratorio, quiero moverlo 200 pixel. Después de establecer este archivo, se puede ver el resultado. Entonces esta es la posición relativa y la posición absoluta trabajan juntas. Recuerde, trabajo de posicionamiento absoluto según elemento relativo inmediato. Entonces espero que ahora te quede claro cómo funciona el posicionamiento en CSS. Así que gracias por ver este video, estad atentos para el siguiente tutorial. 45. CSS Zindex: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre el índice CSS Z. La propiedad del índice Z depende de la propiedad de la posición CSS. Y si no usas la propiedad de posición, entonces no eres capaz de usar propiedad del índice Z. Entonces intentemos entender cómo podemos usar esta propiedad. Sé que ya estás familiarizado con Xxs y YxS. La dirección vertical significa xs y la dirección horizontal representa el eje X. Ahora, tratemos de entender qué es el índice Z. Sin Xxs y Yaxs tenemos otro eje, que se conoce como Zixis Es bastante similar con el orden de pila. Vamos a entenderlo con esta imagen. Como puedes ver, tenemos un elemento de tres div, Di A, B y C. Es principal, primero creamos Di A, luego creamos D B y último creamos profundo C. Por eso es seguir este orden, B es la parte superior del elemento A y C es la parte superior del elemento B. Y usando la propiedad de posición, organizamos de esta manera, y ahora quiero traer B arriba de B. De lo contrario, si quiero traerla por encima de la, en ese caso, necesitamos usar el índice Z. En una oración, puede controlar el orden de apilamiento del elemento posicionado en una página. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla prácticamente. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión del servidor lip, y ya creo un documento TML llamado index dot HTML Entonces en nuestra etiqueta corporal, tenemos totall tres dim Db A, D B, y deep C. Además, aquí asignamos ID, caja uno, caja dos, y caja tres Y si te muestro mi sección de estilo, como puedes ver, en nuestra etiqueta corporal, usamos fuente Aerial. Después le damos estilo al elemento DB. Escuchamos asignamos 200 píxeles de ancho y 200 píxeles de alto, y establecemos la posición absoluta. Después asignamos un borde, un borde sólido. Entonces, una a una, diseñamos las cajas. Como puedes ver, en nuestras cajas, Harrow usa color verde oscuro Además, establecemos la posición desde la parte superior y la tapa. Desde arriba, asignamos 100 píxeles y desde p asignamos 50 píxeles. Después en nuestra caja dos, desde arriba, asignamos 150 píxeles y desde lab asignamos 100 píxeles. Y en nuestra caja dos, asignamos desde 200 píxeles superiores y desde la cama 150 píxeles. Entonces básicamente, quiero decir que decimos tres posiciones diferentes para para los tres elementos diferentes. Y como te dije, necesitamos usar la propiedad de posición para usar el índice Z. Por eso a todos nuestros D, utilizamos la posición absoluta. Y ahora voy a usar la propiedad del índice Z. Supongamos que quiero mover B por encima de la. Para eso, en nuestra casilla dos, voy a usar la propiedad del índice Z, el índice Z, y aquí, voy a pasar una. Por defecto, el valor del índice Z es automático. Y si configuro este archivo, como pueden ver, se mueve el elemento B por encima de la R. De la misma manera, si se quiere mostrar A por encima de la, para eso, se necesita usar el mismo índice Z. Entonces voy a copiar este índice Z y eliminarlo. Después inserte la caja uno, la voy a pegar aquí. Si configuro este archivo, puedes ver el resultado. Ahora se mueve un elemento por encima de la R. No sólo eso, también se puede utilizar el valor del índice Z en menos. Déjame mostrarte. Para eso, voy a comentar esta línea. Entonces en nuestra casilla dos, nuevamente, voy a usar el índice Z. El índice menos uno. Si configuro este archivo, puedes ver el resultado. Ahora se puede ver, ahora se movió eleminado detrás la A y C. Ahora voy a crear otra caja Entonces voy a hacer obtenemos esta sección y C con B. Y también quiero cambiar el ID, llamar a la casilla cuatro. Además, necesitamos css este elemento, así que voy a duplicar esta sección y reemplazar tres por cuatro, y necesitamos posicionarlo, así que voy a cambiar el valor superior labed Aquí voy a pasar 250, y también voy a aumentar el valor establecido, que es 200 Y luego voy a cambiar el color y su conjunto de color naranja. Y ahora voy a configurar este archivo. Después de configurar este archivo, se puede ver el resultado. Ahora voy a comentar el índice Z del recuadro dos. Si configuro este archivo, puedes ver este orden de pila. Y ahora quiero traer A por encima de la. Entonces en nuestra caja uno, voy a usar Zain dx one, y voy a configurar este archivo Después de establecer este archivo, se puede ver el resultado. Y ahora quiero traer B por encima de la A. Para ello, necesitamos usar la propiedad índice Z. Valor del índice Z dos. Si paso el índice Z valor dos y el conjunto de este archivo, se puede ver el resultado. la misma manera quiero llevar C por encima de la A y B. Para eso, de nuevo, voy a usar propiedad del índice Z y voy a pasar el valor del índice Z tres. Yo configuro este archivo, se puede ver el resultado. Además, quiero brnt cuadro cuatro arriba de la A B C. Así que aquí voy a pasar índice Z Video cuatro Si subo este archivo, se puede ver el resultado. Entonces así es como puedes organizar el ítem usando la propiedad índice Z. Espero que ahora te quede claro cómo funciona el índice Z. Entonces esto es para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 46. Tutorial de consultas de medios de CSS: Hola, chicos, es bueno volver a verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender una nueva propiedad, que es media query. Básicamente, media query se utiliza para crear diferentes SS para diferentes plataformas. Y si hablo de los tipos de medios, estos son todos los tipos de medios. Y aquí tenemos cuatro tipos de medios, todos impresos, pantalla y voz, y todos los tipos van a funcionar para todo, va a funcionar para impresión, pantalla y voz juntos. Supongamos que alguien intentó imprimir su sitio web. Y usando medios de tipo de impresión, puede controlar el estilo de impresión de su impresión hacia abajo. Quiero decir que puedes crear CSS por separado para fines particularmente impresos, y el tipo de medio más utilizado es la pantalla. Pantalla Min, pantalla móvil, pantalla computadora, pantalla de tableta. Todas estas pantallas del dispositivo vienen con diferente resolución. Y para crear nuestra página web perfectamente receptiva, necesitamos seguir todos estos. Quiero decir, necesitamos crear diferentes descaros para pantalla móvil, pantalla de laptop, de otra manera, pantalla de tablet Y el último es el discurso de tipo medio. Las personas ciegas no pueden leer nuestras páginas web. Por lo que utilizan lectores de pantalla y medios de tipo discurso van a leer el texto en su sitio web. Especialmente en este tutorial, me voy a centrar en el tipo de medios de pantalla porque el tipo de pantalla es el más popular y útil. Ahora, tratemos de entender qué es la pantalla. Aquí puedes ver navegador, y llamamos al navegador con viewpot Para diferentes sitios de viewport, tecleamos diferenciss. Supongamos que se trata de una ventana gráfica y su resolución es 1920. De igual manera, tenemos otros viewpot 14 40, 13 66, 1024 y 700-900 Estos son nuestro tamaño de ventana gráfica de uso común para consultas de medios. 700-900, utilizamos esta olla para pantalla móvil. Además, tenemos resolución para teléfonos de gama baja, que está entre 320 480. Para crear tu página web perfectamente receptiva, necesitamos escribir diferentes descaros para toda esta resolución Ahora veamos cómo podemos usar la pantalla de medios. Al principio, es necesario escribir a la velocidad media. Entonces como sabéis, vamos a utilizar para pantalla. Así que aquí hay que escribir pantalla. Entonces aquí establecemos la propiedad de ancho máximo 900 píxeles. En media query, aquí corremos a condicionar usando Qor. El primero es la pantalla y el segundo es el valor que aportamos dentro de las carreras de la ronda D. Se va a través de la condición donde nuestro ancho de pantalla está por debajo entonces 900 pixel porque aquí decimos ancho máximo 900 pixel. 900 píxeles es el punto de interrupción de nuestra pantalla. Y podemos crear diferentes puntos de interrupción para diferentes resoluciones para móvil para laptop, para etiqueta Ahora veamos cómo podemos escribir CSS dentro de esta media query. Si nuestra condición es verdadera, si nuestra resolución por debajo de los 900 píxeles, entonces va a establecer la clase contenedor con 50%. Ahora veamos sin esta condición de ancho máximo, cuántas opciones tenemos. Entonces estas son todas condiciones que podemos usar con media query. Similar al ancho máximo, tenemos altura mínima, anchura mínima, orientación, escaneo, todo opin No solo eso, también puedes usar ancho máximo y ancho mínimo juntos. Y para usar avance de condición múltiple, también soporta operadores lógicos y no en mí. Supongamos que quiere decir CSS 600-900. En ese caso, se puede utilizar y operador. Además, puedes usar no operador, si no quieres apuntar tanto a la condición. También apoya orientación, resolución. Además, puedes apuntar usando colores, etcétera. Entonces, sin perder tu importante tiempo, comencemos la práctica y veamos cómo podemos usarla. Entonces como pueden ver, lado a lado, abrí mi editor de código serve studio y mi navegador usando la extensión Lifesaver, y ya creé un documento estim llamado index Entonces en nuestro documento de estimación, y dentro de la etiqueta corporal solo para escribir una etiqueta auditiva dice es tutoriales de consulta de medios. Y aquí dijimos cuerpo fondo color blanco y lejos familia aérea Heldica sensorial Al principio, te voy a mostrar una demo básica de cómo funciona la pantalla multimedia. Pero antes en nuestro navegador, voy a abrir la sección de inspeccionar y selecciono esta opción. Después de seleccionar esta opción, como puede ver, proporciona ancho de ventana gráfica en esta sección A proporciona altura. Entonces a partir de aquí, podemos controlar el ancho de la ventana gráfica Por ahora, el ancho de nuestra ventana gráfica es de 898 de resolución. Si te das cuenta, puedes ver nuestro color de fondo corporal es blanco. Ahora, quiero establecer un color de fondo diferente en diferente resolución. Para eso, necesitamos usar la pantalla de medios. Entonces aquí están tecleando en la pantalla d media. Dentro de las prensas redondas, necesitamos establecer una condición. Y aquí, voy a usar una propiedad llamada viento máximo para establecer la condición. Ancho máximo máximo, Colón, 800, 800 píxeles. Su media si la ventana gráfica w está por debajo de entonces 800 píxeles, entonces va a desencadenar esta condición Entonces aquí quiero decir color de fondo. Primero, voy a seleccionar la etiqueta, cuerpo, luego dentro de los carivores al principio, tro seleccionar la etiqueta corporal Cuerpo, luego dentro de los cardiorss. Voy a decir color de fondo, fondo, y quiero decir color rosa. Rosa. Entonces voy a duplicar esta sección. Esta vez, voy a decir ancho máximo, 600 píxeles. Si el máximo pesa por debajo de 600 píxeles, entonces voy a decir color de fondo, leer. Y voy a poner este archivo. Después de configurar este archivo, como pueden ver, no hay cambios en mi área de mirador. Aún así devolvió el color de fondo blanco porque nuestra resolución es mayor a 800 píxeles, y ahora voy a disminuir el ancho de esta área de viewpot Entonces, como puede ver, estamos disminuyendo este ancho de área de ventana gráfica Ahora se nota hasta menos de 800 píxeles, activó esta condición y dijo color de fondo rosa. Si lo reduzco por debajo de los 600, ahora puedes ver ahora nuestro color de fondo se vuelve color rojo porque ahora nuestra resolución es de 584 pixel. Como ya les dije, a estos se les llama punto de interrupción. Primero dijimos punto de interrupción a 800 píxeles, luego decimos punto de interrupción a 600 Ahora puede que tengas duda. ¿Qué significa eso? ¿Para qué sirve el uso real? Supongamos que usa tableta y la resolución de su pantalla es mayor a 800 píxeles. Entonces podrás ver tu sitio web el color del cuerpo es blanco. Y si usas la resolución de pantalla del móvil 800-600, en ese caso, en tu móvil, puedes ver que tu color de fondo es cerdo Y si la resolución de tu dispositivo está por debajo entonces de 600 píxeles, en ese caso, puedes ver diferentesss Ahora es el fondo se convierten en color rojo. Ahora agreguemos otro punto de interrupción. Entonces voy a duplicar esta sección, y esta vez, voy a decir punto de interrupción a 400 píxeles Pero esta vez no voy a cambiar el color de fondo. Aquí voy a usar propiedad diferente. Quiero cambiar el tamaño de la fuente. Tamaño de fuente, y quiero que sea de 12 píxeles. Y quiero establecer este archivo. Después de configurar este archivo, como puede ver, no hay cambios debido a nuestra resolución de pantalla es mayor a 400 píxeles. Pero si disminuyo la resolución de la pantalla, ahora se puede ver que cambió el tamaño de fuente. Ahora hace que la fuente sea de 12 píxeles. Y si lo aumento, ahora se puede ver que aumentó el tamaño de la fuente. Así es como funciona la consulta de medios. Y ahora voy a abrir mi proyecto anterior, que es el diseño básico de maquetación TML Así que en nuestro tutorial anterior, creamos este proyecto, que se llama diseño básico TML layout Este diseño de TM no responde. No utilizamos ninguna consulta de medios para que sea receptiva. Si reduzco la resolución del navegador, como pueden ver, no hay punto de ruptura, y nuestro sitio web es parcialmente visible. Y también se puede ver la barra de desplazamiento horizontal. Y ahora quiero que sea responsive usando media query. Si no lo hacemos receptivo, si alguien intentó abrirlo en su teléfono móvil, lo contrario tablet, en ese caso, necesitan usar barra de desplazamiento para ver esta página Entonces voy a usar media query para que sea receptivo. Así que volvamos al código a studio. Al principio, voy a crear media query para rapero. Como puedes ver en nuestra sección de rapero, aquí la tienes con 1,000 píxeles. Entonces aquí, voy a crear media query. En la lectura, pantalla de medios, y dentro de la rotonda aquí hay que decir la condición Y aquí, voy a decirlo máximo wid. Ancho máximo máximo, Colón, y voy a decirlo 1,000 píxeles. Tomémoslo más de mil, algo 1020. Entonces quiero cambiar de rapero con. Entonces dentro de esta sección, estoy configurando el envoltorio, esta etiqueta. Copia esta sección y envoltorio hemorrotipo dentro de la carirasa con la que voy a establecer, con, y voy a poner rapero Y luego voy a duplicar esta sección. Y esta vez, si nuestro punto de interrupción es 810 algún tipo, 800, diez, entonces voy a hacer rapero ancho 500 Además, voy a crear otro punto de interrupción. Entonces voy a duplicar esta sección, y esta vez voy a decirlo ancho máximo 510 entonces y luego voy a decirlo rapero ancho en. Si utilizo autovalu entonces va a tomar el ancho exacto de esta resolución Ahora vamos a sub el archivo y volvamos al navegador. Y ahora voy a tratar de reducir el ancho del navegador. Entonces si trato de reducir el ancho del navegador, como pueden ver, primero, activa este punto de interrupción Ahora nuestro navegador con es de menos de mil y 20 píxeles, y si lo reduzco más, ahora está activo, este punto de interrupción Ahora nuestro navegador con es inferior a 810 píxeles, y tiene un ancho de envoltura de 500 píxeles. Y si lo reduzco más, menos de 510 pixel, ahora puedes ver nuestro ancho de envoltorio es igual a nuestro visor con porque aquí usamos valor automático Ahora notas puedes ver nuestro sabor desbordamiento de este contenedor porque dentro de este dip rápido, tenemos un elemento profundo donde usamos altura y ancho fijos. Por eso puedes ver la barra de desplazamiento horizontal. Básicamente, nuestro objetivo es que necesitamos ocultar esta barra de desplazamiento. Ahora, déjame mostrarte la sección de contenido. Como puedes ver en nuestra sección de contenido, Hero use fijo con 800 píxeles. Entonces en nuestra sección de consultas de medios, necesitamos controlar el contenido con. Así que voy a copiar el selector contenido, luego de vuelta al nuestro primer punto de interrupción Entonces aquí, voy a seleccionar la parte de contenido. Entonces en cambio los Carlss aquí lo voy a decir con valor con, y voy a usar valor porcentual Voy a usar el 80%. De la misma manera, necesitamos manejar la sección lateral de la burla. Si te muestro mi sección de barra lateral, como puedes ver, su usó fix con 200 píxeles. Entonces voy a copiar el selector de barra lateral. Entonces en nuestro primer punto de interrupción, voy a establecer barra lateral dentro de la Cari resis, voy a usar con propiedad con Y aquí me voy a llevar el 20%. Vamos a quedarnos por debajo entonces 20% porque tenemos relleno, borde, etcétera Entonces aquí me voy a llevar 18%. Ahora, vamos a configurar el archivo y volver al navegador. Y esta vez, voy a abrir mi sección de consola, y voy a seleccionar la L. Como pueden ver, ahora nuestro navegador con 3,080 Si reduzco el ancho del navegador y hago por debajo entonces 1020, ahora puedes ver nuestro navegador Ws 1002. Y esta condición se empareja con nuestro primer punto de interrupción. Por eso redujo el ancho del envoltorio. Al establecer nuevo ancho a nuestra sección de contenido, también en nuestra sección de barra lateral. Y también, necesitamos manejar la sección de contenido y la sección barra lateral para una resolución más baja. Así que volvamos a la con un código de estudio, y voy a copiar estas secciones. Entonces si nuestra resolución por debajo entonces 510, entonces quiero hacer contenido width Auto. Además, ancho de barra lateral Auto. Y voy a poner este archivo. Si te muestro esta sección de barra lateral, aquí puedes ver que usamos float ProptFloatr Por eso voy a usar el valor de la barra lateral 100%, no Auto. Además, voy a usar el dedo del pie de contenido al 100%. Va a hacer exactamente lo mismo como Auto. Además, necesitamos eliminar el flotador de esta sección de contenido y barra lateral. Entonces aquí, voy a usar la propiedad float, float Nun. Además, voy a usar el mismo valor en nuestra sección de barra lateral. Entonces copia el valor, y voy a pegarlo aquí. Y voy a poner este archivo. Hasta configurar este archivo, si te muestro mi navegador y trato de reducir el área del puerto del navegador, ahora puedes ver arriba abajo entonces 800 pixel. Nuestra sección de barra lateral no es tan perfecta. Así que volvamos al código de este es estudio, y me salto a la sección de la pantalla de medios. Esta es nuestra segunda condición. Si nuestra pantalla multimedia por debajo entonces 810 píxeles, entonces hace que nuestro envoltorio sea de 500 píxeles. Pero también, necesitamos manejar la sección de contenido y la sección de la barra lateral. Entonces voy a copiar el mismo valor con el selector. Y aquí voy a pagar paso. Y voy a poner este archivo. Si configuro este archivo y vuelvo a mi navegador, como pueden ver, no es resolver el problema. Entonces voy a aumentar el ancho de la sección de la barra lateral. Entonces aquí lo voy a hacer 25%. Y también, voy a hacer la sección de contenido 75%. Y voy a poner este archivo. Arriba configuré este archivo, si vuelvo a mi navegador, hasta configurar este archivo, como pueden ver, todavía no funciona porque creo que hice algún error. Sí, cambié el valor en nuestra primera condición. Tenemos que cambiar el valor en esa posición. Entonces aquí, voy a teclear 75%. Y para SDVar voy a usar el 25%. Y en nuestra primera condición, voy a usar 80% de ancho para nuestra sección de contenido y 18% de ancho para nuestra sección de barra lateral. Y voy a poner este archivo. Después configuré este archivo, si vuelvo a mi navegador otra vez, ahora puedes verlo resolver el problema. Ahora tenemos otro problema en ese momento. Si notas nuestra altura de barra lateral es limitada. Necesitamos aumentar esta altura de la barra lateral. Entonces voy a hacer que sea casi 800 pixel. Así que volvamos al editor de código. Y esta vez, voy a usar otra propiedad. Altura. Si te muestro mi altura anterior para barra SD por defecto, es altura mínima 500 pixel. Entonces voy a cambiar la altura mínima. Así que copio esta propiedad y valor y vuelvo a la consulta de medios. Y aquí voy a pasar la altura mínima, 900 pixel. Si configuro este archivo y vuelvo a mi navegador, ahora puedes ver, es trabajo, perfecto. Esta resolución es para tablet. Ahora, vamos a reducir el navegador Weav. Ahora voy a hacer que sea de menos de 510 píxeles. Después de hacerlo menos de 510 píxeles, como puedes ver, ahora nuestro rapero se lleva hierba de 100 personas. Ahora bien, si me desplazo hacia abajo en mi página, aumenta la altura de nuestra sección de barra lateral porque en nuestra condición anterior, usamos 900 píxeles. Entonces necesitamos ajustar la altura. Así que volvamos al código de estudio resultado, y esta vez, voy a decir altura mínima en nuestra barra lateral, voy a establecer una altura mínima de 300 píxeles. Y voy a poner este archivo. Después de configurar este archivo, si vuelvo a mi navegador, se puede ver el resultado. Aún así toma gran cantidad de espacio. Usemos el valor. Entonces voy a hacer que sea de 150 píxeles. Si te muestro mi navegador, también, podemos imprimir nuestra opción de menú cibernético en línea. Además, necesitamos alinear el texto con patas en el centro. Entonces, alineemos el texto con patas en el medio. Así que volvamos al código de Visual Studio, y voy a seleccionar el elemento footer. Entonces voy a copiar esta sección pie de página y voy a pegarlo aquí. Entonces dentro del Cass, voy a escribir texto alinear texto alinear centro Y voy a poner este archivo. Y si te muestro mi navegador, como puedes ver, ahora es Alinear en medio. la misma manera, podemos alinear texto de nuestra sección de encabezado en el medio. Así que de nuevo, estoy de vuelta a mi editor de código de Visual Studio, y esta vez voy a apuntar a este elemento, encabezado H uno. Luego de vuelta a mi sección de medios aqui. Y aquí, voy a escribir dentro del texto Calira alinear. Centro. Después de configurar este archivo, si te muestro mi navegador, podrás ver el resultado. Además, si no quieres mostrar tu menú lateral en Mobile Resolutation, si quieres ocultar esta sección, sí, puedes particular, puede ocultar esta sección para Resolución Móvil. Déjame mostrarte. Volvamos al código de estudio de usuario. Y para esta sección de barra lateral, aquí voy a usar la propiedad display none. No mostrar ninguno. Si configuro este archivo y comento todas estas líneas innecesarias porque aquí usamos display in, por eso no lo necesitamos. Y volvamos a y navegador, ahora puedes ver que no hay una sección de barra lateral encima de la sección de pie de página. Simplemente tenemos sección de contenido y sección de menú y sección de encabezado. Pero si aumento el ancho del navegador, déjame mostrarte. Después de aumentar el navegador con, tiró otra condición, yo verdadera condición de versión tablet. Por eso, nuevamente, devolvió la sección de barra lateral. Pero si reduzco la resolución, se puede ver, de nuevo, la altura de la sección de la barra lateral. Entonces así es como puedes controlar diferentes CSS para diferentes resoluciones. Espero que ahora te quede claro cómo podemos usar media queries. En nuestro próximo Tutorial, vamos a conocer más sobre las consultas avanzadas de medios. Además, vamos a aprender sobre respuesta avanzada Entonces esto es todo para este tutorial. Gracias por ver este video Satune. 47. Tutorial de propiedades de tabla CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con el estilo CSS. Y en este tutorial, vamos a aprender estilo de etiqueta de mesa. Vamos a aprender todas las propiedades CSS tabla relacionada. Entonces veamos el nombre de las propiedades que se utiliza para formatear nuestra pestaña. Entonces estas son todas las propiedades que voy a usar en este tutorial. Espaciado de bordes, colapso de borde , alineación vertical, lado de leyenda, celda vacía y diseño de tabla. Usando estas propiedades CSS, puede eludir atributos estimales como el relleno de celdas, el espaciado entre celdas, la alineación vertical No necesitamos usar este atributo si usamos estas propiedades. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Como pueden ver lado a lado, abrí mi editor de código viisal Studio y mi navegador usando la extensión de servidor en vivo, y ya creé un documento STL llamado index dot t. Y como puedes ver en mi navegador, ella creará una tabla Y en esta tabla en nuestra primera fila, creamos un encabezado. Y en esta fila, tenemos un total de tres columnas, nombre, apellido y ahorros. Y también, puedes ver la estructura de la tabla en nuestra página astable Dentro de esta etiqueta de mesa, primero tenemos mesa TR y dentro de nuestra primera fila de mesa, tenemos encabezado de mesa Entonces tenemos datos de tabla. Como usted sabe, Tia tax significa fila de tabla y etiqueta TD significa datos de tabla. De lo contrario, tv colum. Ahora, veamos cómo podemos usar las propiedades CSS en esta tabla. Entonces al principio, como puedes ver dentro de esta etiqueta de azulejo, tenemos Tavil y Tavilldta y cabecera de mesa, y aquí está el boer sólido de un píxel y nuestro color de borde es y nuestro Entonces al principio, voy a usar nuestra primera propiedad, que es el espaciado entre bordes. Entonces aquí, voy a seleccionar la tabla tagnyme. Entonces dentro del auto ss, nombre de nuestra propiedad es el espaciado entre bordes. Y voy a decir que el espaciado entre bordes, diez píxeles. Si configuro este archivo, aquí puedes ver el resultado. Ahora puedes ver en mi ficha desde todos los lados, agrega espacio a nuestra frontera. Y si quieres más brecha, entonces necesitas aumentar el valor. Si paso 20 y luego configuro este archivo, se puede ver el resultado. No solo eso, puede especificar diferentes espacios para columna y fila. Supongamos que para colum voy a tomar diez píxeles de espacio, y para filas, voy a tomar 20 píxeles de espacio Si configuro este archivo, puedes ver el resultado. Para columna sabia, toma diez píxeles, y para fila sabia, toma 20 píxeles. Y si no quieres mostrar gap entre columnas, solo hazlo un pixel y luego establece este archivo, podrás ver el resultado. Pero por ahora, voy a sumar igual cantidad de espacio desde toda la dirección. Entonces voy a pasar diez píxeles de toda la dirección. Ahora, hablemos de nuestra próxima propiedad. Al principio voy a comentar esta línea, y a continuación voy a usar el colapso fronterizo. Frontera bajo colapso de scoe. Esta es una propiedad relacionada con la tabla. Entonces necesitamos usar esta propiedad dentro del selector de tabla. Esta propiedad viene con dos valores separados y colapso. El valor predeterminado es separado. Entonces aquí voy a usar un valor llamado colapso. Ahora bien, si configuro este archivo, como pueden ver, muestra un solo borde para las celdas. Pero si utilizo los valores diferidos por separado y luego configuro este archivo, ahora se puede ver el resultado Ahora puedes verlo agregar borde extra a nuestras celdas. Ahora puedes verlo agregar borde para todas las etiquetas TD. Y si no quieres mostrar el espacio, entonces necesitas usar el valor de colapso, colapso. Eso es diferente. Ahora, hablemos de nuestra próxima propiedad, que es la alineación vertical. Para eso, necesitamos agregar algunos datos extra en nuestras celdas. Además, tenemos que asignar fijos nosotros a nuestra mesa. Entonces primero, voy a agregar algunos datos ficticios. Entonces por Mohan, quiero agregar wim y quiero agregar cinco palabra ficticio, y voy a configurar Después de poner este archivo, aquí, voy a agregar fijo nosotros a esta tabla. Entonces voy a pasar con 300 píxeles. Si configuro este archivo, puedes ver el resultado. Agreguemos un poco más de datos dammi para este ejemplo. De nuevo, voy a agregar Lim diez, y voy a volver a configurar este archivo. Ahora puede ver después de eso más datos en esta tabla, aumenta la altura de la fila, y alinea los datos de la segunda columna en el centro Por defecto, verticalmente, alineó los datos en el centro. Y ahora quiero moverlo arriba. Para ello, tenemos un atributo estable, que es V align. Pero como te dije, no vamos a usar ningún atributo estable. Vamos a usar CSS. Así que vamos a saltar a esta etiqueta de estilo. Al principio, necesitamos apuntar a todos los datos de la tabla, por lo que HemoTypeTD Entonces es en la resis cali voy a pasar una propiedad, alinear vertical. Y aquí, voy a usar la propiedad llamada vertical align, vertical align, y quiero alinearla arriba, así voy a pasar top. Si configuro este archivo, puedes ver el resultado. Ahora puedes verlo alinear nuestros datos en la parte superior. Esta propiedad viene con tres valor, arriba, abajo y medio. Y si quieres colocarlo abajo, solo para pasar fondo. Eso es. Entonces espero que ahora te quede claro cómo funciona la alineación vertical. Ahora, hablemos de relleno. Si recuerdas, en TML, básicamente usamos el relleno de celdas. Y si no te acuerdas, déjame mostrarte el atributo. Ya que en la etiqueta table, voy a usar el atributo llamado cell padding. Relleno de celdas, y voy a asignar diez píxeles. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver en cada celda desde toda la dirección se agregan diez píxeles de relleno. Y ahora voy a hacer lo mismo usando CSS, no no usando este atributo. Entonces voy a quitar esta línea. Y si quieres hacer lo mismo, solo necesitas usar relleno. Supongamos que en nuestras celdas de datos de tabla, quiero agregar el relleno, pero no en nuestro encabezado de tabla. Entonces aquí voy a usar padding diez píxeles. Y si configuro este archivo, se puede ver el resultado. No agrego padding en nuestra primera fila porque nuestra primera fila la componía datos TH, que es encabezado de tabla, y asignamos padding en nuestros datos de tabla, etiquetas TD. Por eso comienza en el relleno desde la segunda fila. Y si quieres apuntar a la etiqueta TH, solo necesitas pasar el pH. Y si configuro este archivo, se puede ver el resultado. Ahora agrega relleno a nuestras etiquetas con encabezado de mesa. Ahora hablemos de la siguiente propiedad, que es el lado del caption. Pero antes, permítanme tratar de explicarle qué es el título. En nuestra etiqueta de tabla, tenemos una etiqueta llamada caption. Déjame mostrarte. Etiqueta de subtítulo. Y dentro de esta leyenda, voy a escribir emplear. Y si pongo este suelo, se puede ver el pie de foto encima de la tabla emplear. Esta es la mesa de empleados. Podemos cambiar la posición de esta leyenda. Entonces voy a seleccionar dentro de la etiqueta de estilo, voy a seleccionar el pie de foto, la etiqueta de leyenda. Subtítulo de tipo de sonido. Entonces dijiste los cálices, voy a usar nuestra propiedad que se llama sitio de subtítulos, sitio subtítulos, y viene con un valor total de dos, inferior y superior Por defecto, viene con valor máximo, así que voy a usar el valor inferior. Si configuro este archivo, puedes ver el resultado. Ahora se puede ver la captura y el fondo. Ahora, hablemos de nuestra próxima propiedad, que es celda vacía. Si notas en nuestra tabla, en cada celda, tenemos datos, y ahora voy a eliminar uno de los datos de nuestro celular. Entonces voy a quitar 150. Y voy a poner este archivo. Después de establecer este archivo, se puede ver el resultado. Ahora tienes la opción. O puedes mostrar la venta estable, lo contrario, puedes ocultar esta venta estable. Entonces voy a usar, y dentro de la etiqueta de la tabla, necesitamos usar la propiedad llamada D sell. Celdas vacías, su valor total de Taoi dos, ocultar y mostrar. Show es el valor predeterminado, así que voy a usar hide. Después de establecer este archivo, como puedes ver, no cambia nada porque hero use border collapse value. Pero si uso por separado, déjame mostrarte. A continuación, establezca este archivo. Ahora puedes ver el resultado. Ahora se puede ver que tenía la celda particular. Entonces ese es el uso de la propiedad de celda vacía. Nuestra siguiente y última propiedad es que se diseñarán. Entonces voy a usar esta propiedad. Después de celda vacía, voy a escribir diseño de tabla, esta propiedad vienen con un total de dos valores auto y fijo. Primero, voy a usar el valor automático. Después de paso este archivo, no puedes ver ningún cambio, pero déjame mostrarte. Supongamos que nuestra segunda fila de mesa, en nuestra primera columna, quiero agregar una palabra grande. Después de nob, quiero agregar algo de B. Si configuro este archivo, puedes ver el resultado Pero si recuerdas flecha usa hierba fija a esta mesa, 300 pixel, pero aun así alarga nuestra mesa. Aumenta el ancho de esta mesa. Entonces, según el tamaño de los datos, puede aumentar el fijo con. Pero si utilizo el diseño de tabla fijo, y establecen este archivo, ahora se puede ver el resultado. Desborda los datos de la celda, pero no extiende el Tavy Entonces, si uso el valor automático, que es el valor predeterminado, entonces tengo este archivo, luego otra vez, a la vieja situación. Entonces estas son todas las propiedades que se recuperan en este tutorial. Espero que ahora te quede claro cómo podemos usar estas propiedades con celdas de tabla. Así que gracias por ver este video Estén atentos para el siguiente tutorial. 48. Tutorial de cambio de tamaño de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vamos a aprender sobre una nueva propiedad, que es CSS resize Básicamente, si te va a dar la facilidad cambiar el tamaño profundo por parte del usuario. Puedes cambiar la altura y el ancho usando gota de dragón. Ahora hablemos de los valores, cuántos valores tenemos en esta propiedad, horizontal, vertical, ambos y ninguno, y ninguno es la propiedad por defecto. Empecemos lo práctico y veamos cómo podemos usar estos valores. Como pueden ver, lado a lado, abro mi editor de código isalstudio y mi navegador usando la extensión Lifesaver, y ya creo un documento de estimación llamado Además, puedes verla crear un elemento profundo, y ella decimos 300 píxeles de altura y 500 píxeles de peso. Si trato de redimensionarlo usando Kurzar no, no va a funcionar Entonces voy a usar la propiedad resis, pero si uso solo la propiedad recise, entonces no va a funcionar Con eso, necesitamos usar otra propiedad de ayuda. Aquí, moti redimensiona. Cambiar el tamaño vertical. Si configuro este archivo, como pueden ver, no hay nada. No podemos cambiar el tamaño del DV verticalmente. Para usar la propiedad recise, necesitamos usar la propiedad overflow Aquí voy a escribir desbordamiento. Auto. Ahora voy a configurar este archivo. Up configurar este archivo, como se puede ver en la esquina, tenemos opción de redimensionar Ahora podemos redimensionarlo verticalmente. Podemos redimensionarlo en dirección vertical. Para entender mejor, agreguemos un párrafo ficticio en este recuadro D. Voy a escribir P tag, luego dentro de esta etiqueta P, voy a escribir low y quiero agregar 300 word. Voy a establecer este archivo. Arriba configuramos este archivo, como pueden ver, tenemos barra escolar vertical. Pero si aumento el tamaño de la caja, ahora se puede ver que quitó la barra escolar vertical porque no tenemos datos de desbordamiento. Aumentamos verticalmente la altura profunda, y ahora aumentemos el ancho profundo. Para eso, aquí necesitas pasar valor horizontal, redimensionar horizontal Si configuro este archivo, ahora tenemos la opción de aumentar el ancho profundo, pero no podemos cambiar el tamaño de la altura profunda porque esta vez pasamos valor horizontal, y si quieres redimensionarlo desde la dirección de ambas, para eso, necesitas usar ambos Cambiar el tamaño de ambos. Si configuro este archivo, esta vez puedes cambiar el tamaño del elemento deep tanto desde la dirección Como saben, en forma de estimación, tenemos una etiqueta llamada área de texto y por defecto el área de texto admite el cambio de tamaño. Déjame mostrarte. Aquí, voy a escribir esta etiqueta dip. De lo contrario fuera de esta área de texto de etiqueta dip. Voy a establecer este archivo. Después de establecer este archivo, aquí se puede ver el área de texto. Por defecto, viene con función de cambio de tamaño. Pero si quieres detener este cambio de tamaño, para eso, youg usar resize monja Value. Déjame mostrarte cómo. Entonces aquí, primero, voy a seleccionar el área de texto. Entonces dentro de la resis redonda, luego dentro de los cálices, voy a pasar redimensionar, ninguno, y establecer este archivo Arriba configura este archivo, ahora puedes ver que no hay opción para cambiar el tamaño de la caja deterior porque hero use redimensionar Esto es para este tutorial. Espero que ahora esté ahí para ti, ¿cómo podemos usar redimensionar Paperty Así que gracias por ver este video, mantente atento para el siguiente tutorial. 49. Tutorial de cursor de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vamos a aprender sobre una nueva propiedad llamada CSS cursor. Como puedes ver dentro de la caja cuadrada roja, tenemos un Kursel Puedes ver el cursor dentro de la caja cuadrada roja, y si quieres cambiar el estilo Kazar, entonces necesitas usar CarsAlpperty Todos estos son valores que solían cambiar el estilo de Kazar. Como puedes ver, casi tenemos un total de 36 valores por defecto, monja, menú contextual, salud, puntero, progreso, peso, alféizar, etcétera Entonces comencemos lo práctico y veamos cómo podemos usar estos valores. Entonces como pueden ver, lado a lado, abro mi editor de código de estudio de resultados y mi navegador usando la extensión Lifesaver, y ya creé un documento ML llamado index dot HTML Entonces aquí puedes ver en este navegador, ya creamos un elemento profundo. Ahora voy a usar la propiedad llamada cursor. Entonces aquí dijiste esta caja. Voy a escribir cursor de nombre de propiedad. CurZr y yo queremos asignar el valor del infierno. Diablos, yo puse este archivo y mi en este elemento profundo, ahora se puede ver con la erosina tenemos marca de cociente seno Es mezquino, es indicar el infierno. Y luego voy a duplicar esta línea y comentar la línea anterior. Esta vez, voy a cambiar el valor. Aquí voy a cambiar CursPonter. Si configuro este archivo y sobre mi curr sobre este elemento profundo, puedes ver el resultado Ahora reemplaza la arosina con seno puntero. Y el siguiente valor que voy a usar, que es el progreso. Entonces voy a duplicar esta sección y comentar línea anterior y reemplazar el puntero con progreso. Si configuro este archivo y cómo mis autos en este elemento profundo, se puede ver el resultado. Se puede ver con la flecha, tenemos círculo, un círculo de carga. Indica progreso. Entonces voy a usar otro estilo de autos. Voy a duplicar de nuevo esta línea y comentar la línea anterior. Esta vez, voy a usar el Menú Contexto. Voy a reemplazar el progreso con contexto Minu si configuro este archivo y Huber mi tarjeta en este elemento profundo, no se puede ver nada Después de usar el menú Concurso, no hay cambios. Es como valor predeterminado. El siguiente valor voy a usar Auto. Nuevamente, voy a duplicar esta línea y comentar línea anterior y reemplazar el menú del concurso con Auto. Si configuro este archivo y alguna vez mis tarjetas están en este elemento, puede ver que es lo que como valor por defecto. A continuación, voy a saltar a otro valor, que es el peso. De nuevo voy a duplicar esta línea y comentar la anterior y reemplazar auto con peso. Si configuro este archivo y mis tarjetas están en este elemento profundo, como pueden ver, es bastante similar con la carga, de lo contrario, el progreso. Esto es para señal de peso. Entonces otra vez, voy a comenzar esta línea y comentar la anterior y reemplazar peso con vender si configuro este archivo y sobre mi curor sobre este elemento profundo, puedes ver el resultado Tenía un signo más. Ahora parece una señal de adición. Y si no quieres mostrar tu cursar cuando estás como tu cursor en este elemento profundo, entonces necesitas usar Nun vd Así que de nuevo voy a duplicar esta línea y presagio línea anterior y reemplazar L con valor de Nun Ninguno. Si configuro este archivo y sobre mi cursor sobre él, puedes verlo ocultar mi cursor porque esta vez usamos monja Vd Por lo que es muy difícil mostrar todo el valor uno por uno. Yo creo este archivo para ti y aquí aplico todos los valores uno por uno al texto del párrafo. Entonces, si sus autos en los ítems del párrafo, se pueden ver los diferentes resultados. mira, predeterminado, E Redimensionar, EW redimensionar, agarrar, agarrar ayuda a mover, N redimensionar, N redimensionar, no soltar, ninguno, no permitir, todo ello ninguno Para que puedas experimentar por ti mismo y podrás comprobar el valor uno por uno. Entonces esto es para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 50. Tutorial de unidades de CSS 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 de 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 el 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. Así que 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. 51. Tutorial de unidades de CSS 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 fijo. De nuevo, me voy a llevar un contenedor paren. En lo profundo de la etiqueta dip, voy a asignar una identificación. ID caja 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 al 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 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. 52. Variables de 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. Del mismo modo, 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. 53. 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. 54. Tutorial de ruta de clip de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender una nueva propiedad, que es CSS clip path. Esta propiedad viene con un total de cuatro valores de círculo, elipse, inserción y Entonces veamos cómo podemos usar este valor y crear diferentes formas. Al principio, vamos a comenzar con círculo. Para crear un círculo, necesitamos una imagen. Ahora en esta imagen, necesitamos crear este círculo. Básicamente, necesitamos eliminar la parte oscura de esta imagen. Tenemos que mostrar cuál está dentro de esta parte del círculo. Para crear el círculo, necesitamos tres cosas. Primero, necesitamos el radio. Usando radio, podemos definir el tamaño del círculo. Entonces necesitamos definir la posición donde necesitamos crear este círculo. Para eso, necesitamos proporcionar Xxs y YxS. Como pueden ver, colocamos este círculo en el medio. Para eso, podemos tomar XX 50% y YxS 50%. Entonces después de aportar este valor, nuestra ruta de clip se ve así. Entonces comencemos la práctica y veamos cómo podemos aplicarla. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor Live, y ya creé un documento TML llamado InexoTETM Como puedes ver, dentro de la etiqueta corporal, ella insertamos imagen. Ahora quiero aplicar la ruta de clip de forma de círculo a esta imagen. Para eso, tenemos que ir a la sección de estilo. Estilo. Y dentro de esta etiqueta de estilo , primero, voy a seleccionar imagen. Después dentro del carro resis, voy a aplicar ruta de clip. Trayectoria de clip, círculo de trayectoria de clip. Como ya les dije, para crear este círculo, al principio, necesitamos definir el radio. Entonces aquí, me voy a llevar el 30%. Además, puedes tomar valor en pixel, y luego necesitamos definir la posición donde queremos colocar nuestro círculo. Entonces voy a escribir al 50%, quiero colocarlo midle. Por eso paso el valor del 50% de Y xs y el 50% de X xs, y voy a configurar el archivo. Después de configurar este archivo, se puede ver el resultado. Y si quieres aumentar este tamaño de círculo, necesitas jugar con este valor. Supongamos que voy a pasar el 60%. Si configuro este archivo, puedes ver el resultado. Y de la misma manera, si quieres disminuir el valor, entonces solo pasa el 10%. Se puede ver el resultado. Así es como funciona. Además, si quieres cambiar la posición de este círculo, sí, solo puedes jugar con el valor X e Y Xs. Supongamos de ss, quiero colocarlo 70%. Y a partir de xs, quiero colocarlo apenas 30%. Si configuro este archivo, puedes ver el resultado. A partir de XXs toma 70%. De YXS toma 30%. Y si quieres crear forma de círculo de cubo, déjame mostrarte. Aquí voy a pasar YX es 50% y XX es 0%. En la parte superior establece este archivo, se puede ver el resultado. Ahora crea forma de círculo de cubo. Y si quieres colocar la esquina de la laptop skip path, necesitas pasar x es cero y YX es cero En la parte superior establece este archivo, se puede ver el resultado. Entonces espero que ahora te quede claro cómo podemos usar el valor del círculo. Ahora hablemos de la forma del eclipse. Entonces voy a duplicar esta línea y comentar la línea anterior. Pero antes, déjame explicarte cómo podemos crear esta forma. Entonces este es el ejemplo de la forma de elipse. Para crear esta forma de elipse, necesitamos contar cuatro cosas Primero, necesitamos radio horizontal, radio vertical, y luego necesitamos Xxs y una posición YxS Ahora, vamos a aplicar este valor para crear esta forma. Al principio, voy a sustituir círculo roid elipse. Elipse, primero, es necesario proporcionar el valor horizontal. Para valor horizontal, voy a tomar 10% y para valor vertical, aquí voy a tomar 40%. Entonces quiero colocar la forma de elipse en el centro. Aquí voy a pasar 50% de Xxs y 50 y 50% de YxS Después de establecer este archivo, se puede ver el resultado. Ahora, aumentemos el valor horizontal. Voy a llegar al 20%. Después de establecer esta lima, podrás ver la forma ovalada perfecta. Y si quieres que esta Ellipe forme horizontalmente, entonces solo tienes que reemplazar estas válvulas Que sea 40% y haga éste 20%. Después vuelve a configurar este archivo. Puedes ver el resultado y cambiando XXs e YxS, puedes cambiar la posición de estas Ahora, hablemos del siguiente valor, que es el insecto. Básicamente, este valor va a crear una forma rectangular, y para crear esta forma, necesitamos t cuatro bien. Arriba, derecha, abajo y levante. Empecemos lo práctico y veamos cómo podemos crear esta forma. Voy a duplicar esta línea y comentar la línea anterior. Aquí voy a escribir recuadros. Después al principio, voy a eliminar todos los valores y primero voy a proporcionar el valor superior de arriba. Desde arriba, me voy a llevar el 10%. Y de la derecha, voy a tomar el 20% y de abajo, voy a tomar el 15% y de la izquierda, voy a tomar el 10%. Si configuro este archivo, puedes ver el resultado. Esto es lo que crea. Y para que quede más claro, cambiemos el valor. Desde arriba, voy a tomar 25%, y desde la derecha, voy a tomar 30%. Y desde abajo, voy a tomar 35 pers, y desde la izquierda, voy a tomar 40%. Si configuro este archivo, puedes ver el resultado. Usando este valor, puede crear una forma rectangular, lo contrario, cualquier forma cuadrada. Ahora hablemos de la forma más importante de esta propiedad, que es el polígono Usando el valor de polígono, puede crear cualquier tipo de forma. Como puedes ver, ella creará un triángulo. También puedes crear forma de estrella, cualquier tipo de forma geométrica. Como puedes ver en este ejemplo, creará una forma rectangular. Para crear la forma rectangular, necesitamos un total de tres puntos. Y para definir cada punto, necesitamos exceso de valor y valor YXS Entonces necesitamos un total de tres pares de excesos y valor YxS. Entonces vamos a iniciar este rectángulo desde este punto, punto rojo. Entonces vamos a crear este punto azul, después vamos a saltar al punto amarillo. Entonces comencemos lo práctico y veamos cómo podemos crear esta forma. Entonces primero, voy a duplicar esta línea y comentar anterior y volver a configurar este archivo. Y voy a sustituir el recuadro con él polígono. Para crear el triángulo, aquí necesitamos empatar tres puntos. Al principio, quiero partir de este punto. Entonces de los Xxs voy a pasar el 50% y de los YxS voy a pasar 0% Y luego quiero crear otro punto en la esquina inferior derecha. Entonces necesitamos proporcionar coma entonces tanto de los xs, necesitamos tomar el 100% De Xxs voy a pasar al 100% y de los YxS voy a pasar al Coma, y luego voy a crear punto de labio a esquina inferior. Entonces de los Xxs voy a tomar 0% y de los YxS voy a tomar Si configuro este archivo, puedes ver el resultado. Crea una forma de triángulo perfecta. Y ahora voy a crear otra forma geométrica usando el mismo valor, polígono Voy a ser esta línea y comentar la anterior. Y nuevamente, voy a eliminar todos los valores y establecer este archivo. Entonces, al principio, voy a hacer punto en esta posición. De nuevo, voy a pasar de Xs, voy a pasar 50% y de las Y xs, voy a pasar 0%. Coma. Esta vez, voy a pasar cuatro victorias, y después quiero hacer punto en esa posición. Entonces de los XXs voy a pasar al 100%, y de los Ys, voy a pasar el 50% Entonces quiero hacer punto en esta posición. Entonces de los XXs voy a pasar 50% y de los YxS voy a pasar al 100% Y a continuación, voy a hacer punto en esa posición. Entonces de los XXs voy a pasar 0% y de los YxS voy a pasar Si configuro este archivo, puedes ver el resultado. Esta vez creo este tipo de forma geométrica usando esta forma de polígono Y ahora voy a crear otro ejemplo. Aquí voy a crear un letrero de adición. Para eso, voy a duplicar esta línea y comentar la anterior y eliminar nvals y establecer este archivo Entonces, para crear el signo de adición, quiero comenzar desde este punto. Entonces aquí voy a pasar 40% desde dirección X y 0% desde dirección YxS Este es nuestro primer punto. En el segundo punto, voy a pasar 60% desde XX es dirección y 0% desde dirección YxS En el siguiente punto, siguiente, voy a crear otro punto, y quiero crearlo en esa posición. Entonces desde el XXX, voy a tomar 60% otra vez y de los YxS voy a tomar 40% Entonces voy a crear punto en esa posición. Para eso, de nuevo, voy a pasar 100% posición X y 40% posición YxS Entonces voy a pasar 100% posición X y 60% posición YxS A continuación, voy a pasar 60% posición XX, posición 100% YxS A continuación, voy a pasar 40% de posición Xxs solo para eliminar este coma innecesario porque necesitamos espacio entre estos dos valores 40% de la dirección de exceso y 100% de dirección YxS A continuación, voy a tomar 0% de dirección ss, y desde la dirección Xs, voy a tomar 60%. Por fin, voy a tomar 40% exceso de dirección, y 40%, YX es dirección Guardemos el archivo y veamos qué crea. Espero que así se vaya a crear el letrero de adición. No, no es crear el signo de adición. Creo que cometí algún error. Aquí no creo este punto, cuándo crear este punto. Creo que olvidé mencionar algunos puntos. El propósito principal es utilizar este valor, se pueden crear diferentes tipos de forma geométrica. Solo necesitas mencionar los puntos correctos usando el valor XX e YXS Esto es para este tutorial. Espero que ahora te quede claro cómo podemos aplicar Keep path. Así que gracias por ver este video. Estén atentos para el siguiente tutorial. 55. Tutorial de formas CSS afuera: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otra tesis relacionada con el tutorial. Y en este tutorial, vamos a aprender una nueva propiedad llamada shape outside. Básicamente, utilizamos esta propiedad para el formato de texto. Pero vamos a usar esta propiedad con ruta de clip. Esta propiedad viene con cuatro valores, elipse circular, recuadro y Ahora voy a mostrarle por qué usamos esta propiedad. Supongamos que creamos un círculo usando el trazado de clip. Además, puede crear el mismo círculo usando el radio de borde. Pero el problema es un crear este círculo, todavía ocupa el área de texto, pero quiero usar este espacio en blanco así. Para eso, necesitamos usar la forma fuera de la propiedad. Después de usar esta propiedad, nuestras tomas se ajustan de acuerdo a la forma. Entonces comencemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código salt studio y mi navegador usando la extensión if server, y ya creo un documento TML, llamado index dot TML Entonces como puedes ver en nuestra etiqueta corporal, tenemos una etiqueta de imagen, y luego tenemos un paragrama Y configuré el juego de flujo de imagen. Y luego al principio, voy a aplicar keypat a esta imagen Entonces aquí estoy para usar esta propiedad, ruta de clip. Círculo de ruta clave. Primero, necesitamos definir el radio. Voy a usar el 30%. También, necesitamos definir la posición, así que voy a empatar al 50% en un 50%. Voy a establecer este archivo. Después de configurar este archivo, se puede ver el resultado. Crea nuestro círculo perfectamente, pero el problema es que aquí puedes ver el innecesario espacio en blanco. Tenemos que llenar este innecesario espacio en blanco con el texto. Tenemos que cubrir este espacio en blanco. Para eso, voy a usar una forma de llamada de propiedad afuera Forma afuera y ella voy a usar el valor. Y aquí, voy a pasar el valor exacto de la forma del círculo. Entonces para copiar este valor. Y voy a pegarlo en forma afuera. Si configuro este archivo, puedes ver el resultado. Ahora bien ajustar según la forma. Ahora vamos a mover este círculo poco con lado de labio. Entonces Hemo para pasar Xs 20%, también para cambiar este valor X es 20% Después de configurar este archivo, se puede ver el resultado. De lo contrario, puedes hacerlo 30% por resultado perfecto. Eso se ve bien. Como pueden ver, esta vez nuestro párrafo toma tratar de ajustar de acuerdo a la forma redonda. Ahora puedes ver otro problema. Nuestro texto casi se adjunta con esta forma. Aquí necesitamos proporcionar un poco de margen. Aquí, voy a pasar Forma, margen, 20 píxeles. Necesitamos usar particularmente esta propiedad, margen de forma. Después de establecer este archivo, se puede ver el resultado. Ahora voy a redirigir a un sitio web, que es nfili.com A partir de aquí, podemos crear diferentes formas usando Keep Path. Podemos crear cualquier forma. Después de crear esta forma, desde aquí, podemos copiar la propiedad key path y el valor. Voy a copiar el valor de la forma del polígono. Y entonces voy a sustituir el valor de Kipath por este valor Entonces también, voy a reemplazarlo en nuestra forma sección exterior. Si configuro este archivo y vuelvo a mi navegador, aquí puedes ver el resultado. Desde este sitio web, podrás lograr diferentes tipos de forma flecha derecha, signo cerrado, elipse, hexágono, pentágono, lo que quieras Este sitio web es muy buen sitio web. A partir de aquí, se puede extraer cualquier tipo de forma con el valor. Esto es para este tutorial. Gracias por ver este video, Situne por el siguiente tutorial 56. Tutorial de filtro de CSS Parte1: Hola, chicos. Me alegro de verte de vuelta. Este es el primer tutorial relacionado con la animación CSS, y vamos a comenzar este tutorial usando la propiedad de filtro CSS. Usando filter, podemos cambiar los efectos de imagen, y tenemos que t 12 efectos que podemos usar en nuestra imagen. Nuestro nombre de primer efecto es ninguno. Si no quieres usar ningún efecto, puedes usar esta propiedad. Y usando propiedad borrosa, puedes difuminar tu imagen Y usando tess value, puedes reducir el brillo o aumentar el brillo Y para el contraste, puedes usar el valor de contraste, y el valor del tirador de Rp funciona como una sombra de esta imagen. Usando el valor bribón, podemos en blanco y negro nuestra imagen. Y usando rotar, puedes sentir un color diferente con diferente ángulo, y nuestro siguiente valor es invertir. Si recuerdas la vieja regla del caminar, entonces puedes entender el efecto muy fácilmente, y nuestro siguiente valor es la opacidad Utilizando el valor de opacidad, podemos controlar la transparencia de esta imagen Si quieres controlar la saturación de esta imagen, puedes usar el valor saturado. Si quieres más color en tu imagen o menos coloreado en tu imagen, puedes usar este valor, y nuestro siguiente valor es Citia y nuestro último valor es URL Este valor RL trabaja con imágenes SVG. En este tutorial, voy a cubrir los seis efectos. Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi coetor de visual studio y mi navegador usando la extensión if server Ya creo un documento de estimación en mi directorio de trabajo actual. Como puedes ver en mi navegador, hay una imagen, y ya inserto esta imagen usando Imgtag como puedes ver en mi sección de estilo, establecemos 600 píxeles de peso a esta imagen y altura automática Voy a usar todo este filtro en esta imagen. Los efectos son jugar un papel muy importante en la animación CSS. Por eso empiezo este tutorial con efectos CSS. Al principio, voy a usar la propiedad de filtro. Filtra, y nuestro primer valor es ninguno. Si configuro este archivo, aquí puedes ver que no hay cambios, hay cambios en esta imagen porque este es el valor predeterminado de esta propiedad y nuestro siguiente valor es desenfoque, entonces escribe, desenfoque. Supongamos que quiero sangrar esta imagen hasta cuatro píxeles. Si configuro esta imagen, aquí puedes ver el resultado. Si quieres que sea más sangre, puedes aumentar el valor. Supongamos 20 píxeles. Si configuro este archivo, puedes ver el resultado. El valor predeterminado de esta propiedad de desenfoque es cero. Si utilizo valor cero y luego configuro este archivo, aquí puedes ver el resultado. Ahora nuestra imagen es claramente visible y este es el uso del valor de desenfoque y nuestro siguiente valor es el brillo. 100 es el valor predeterminado de brillo, 100%. Y este trabajo de valor con porcentaje. Si configuro este archivo, se puede ver que no hay cambios, y ahora quiero reducir el brillo, 20%. Si configuro este archivo, puedes ver el resultado. Redujo el brillo de esta imagen. Y si quieres llegar al brillo normal, entonces necesitas pasar 100. Si configuro puedes ver el resultado. Y si quieres aumentar el brillo de esta imagen, entonces necesitas pasar más del 100% de valor. Supongamos que voy a pasar 300%. Si configuro este archivo, puedes ver el resultado. Si pasamos el 0% de brillo y el conjunto del archivo, ya puedes ver que es completamente negro. Vamos a saltar al siguiente valor, que es el contraste. Voy a escribir contraste. 100 es el valor predeterminado de contraste, 100%. Si configuro este archivo, puedes ver el resultado. Si quieres aumentar el contraste de esta imagen, necesitas pasar el entonces necesitas pasar más del 100% de valor. Supongamos 200%. Si configuro este archivo, ahora puedes ver el contraste, si quieres disminuir el contraste, entonces necesitas pasar por debajo valor del 100%, algo del 50%. Si configuro este archivo, se puede ver el contraste. Si pasamos 0% de valor y luego establecemos el archivo, ahora se puede ver que no hay contraste en esta imagen. Si pasamos 0%, como puedes ver, nuestra imagen se convierte en color gris. Nuestro siguiente valor es la sombra paralela. Pero antes de usar este valor, voy a reducir la imagen. 400 píxeles. Este valor es similar a la propiedad de sombra de caja. Primero, necesitamos proporcionar sombra horizontal. Voy a proporcionar diez píxeles. Esto es para la dirección XX. A continuación, necesitamos proporcionar sombra vertical. Para YxS voy a pasar diez píxeles una vez más, y luego voy a pasar la borrosidad de esta sombra, que es de que es Entonces tenemos que pasar el color de la sombra. Voy a usar el color verde. Si configuro este archivo, aquí se puede ver el resultado y se puede cambiar la borrosidad de esta sombra también Si paso cero pixel y luego configuro el archivo, ahora se puede ver que actúa como una sombra sólida. No sólo eso, se puede utilizar el valor negativo en este parámetro. Supongamos que quiero esta sombra menos dirección YxS. Si configuro este archivo, puedes ver el resultado. Este es el efecto de sombra paralela del Reino Unido, y nuestro último valor es la escala de grises. Déjame mostrarte. Escala de grises. Mediante este efecto, podemos convertir nuestra imagen coloreada en una imagen en blanco y negro. 0% es el valor predeterminado de este parámetro de escala de grises. Si configuro este archivo, puedes ver que no hay cambios. Pero si utilizo al 100% y luego configuro el archivo, ahora puedes verlo completamente girado esta imagen en blanco y negro. Hay que recordar que necesitamos pasar valor entre cero y cien por ciento, no más del 100%. Se puede utilizar cualquier valor entre estos. Supongamos que quiero pasar el 70%. Si configuro este archivo, puedes ver el resultado. Ahora la imagen se llenó con 70% de gris y 30% de color. Esto es para este tutorial. En el siguiente tutorial, voy a cubrir los filtros restantes, U rotar, invertir opacidad, saturar, CiPIa Gracias por ver este video, estén atentos para nuestro próximo tutorial. 57. Tutorial de filtro de CSS Parte2: Hola, chicos. Me alegro de verte de vuelta. Esta es la segunda parte del tutorial filtrado CSS. En este tutorial, vamos a cubrir los seis filtros. Huh rotar, invertir, opacidad, saturar, spia Empecemos la práctica y veamos cómo funciona. Aquí puedes ver lado a lado, abro mi corator visual studio y mi navegador usando la extensión salvavidas, y abro mi documento de estimación anterior para este ejemplo Al principio, voy a llamar a la propiedad de filtro, filtro. Nuestro primer valor es Hu Rotar. Y aquí puedes usar 023 60 grados Vdo. Voy a aprobar DAG de 150 grados luego configuro este archivo, aquí se puede ver el resultado. Si apruebo 100 grados, configuro este archivo, se puede ver el resultado diferente. Usando este valor, puedes probar combinación 360, 360 grados. Si configuro este archivo, puedes ver el resultado. No hay ningún parámetro negativo para este valor. Vamos a saltar al siguiente valor, que es invertir. Pronto inmersión invertido. Si configuro este archivo, aquí puedes verlo invertir completamente la imagen, y podemos pasar el parámetro cero, 200% Supongamos que quiero pasar 0%. Si configuro este archivo, aquí pueden ver, este es el valor diferido de esta propiedad Si paso el 50% y luego configuro el archivo, si uso el valor del 50%, ahora está completamente convertido en un color gris. Si aumento el valor, algo 70% y configuro este archivo, ahora se puede ver el resultado. Todavía es invertir nuestra imagen, pero se puede ver la capa gris sobre ella. De igual manera, si reduzco el valor por debajo del 50%, algo 20% y luego configuro el archivo, como se puede ver no invertir la imagen completamente. Este es el uso del valor invertido. Nuestro siguiente valor es la opacidad. Como pueden ver, ahora nuestra imagen es totalmente visible y ahora quiero que esta imagen sea transparente. Para estos, necesitamos usar el valor de opacidad. Si configuro este archivo, como puede ver, no hay cambios porque no proporcionamos ningún parámetro en este valor. Ahora quiero hacer esta imagen semitransparente. Quiero aportar el 50%. Si configuro este archivo, puedes ver el resultado. Y si haces que esta imagen sea completamente transparente, necesitas pasar 0%. Si configuro este archivo, las imágenes siguen existiendo en este lugar, pero lo hicimos completamente transparente. Y si haces esta imagen completamente visible, necesitas pasar el 100% de valor. Entonces espero que ahora puedas entender este valor, cómo se usa. Espero que ahora puedas entender valor de opacidad, cómo se usa O el siguiente valor es saturar. Este valor va a proporcionar fuerza en píxeles de colores. Voy a escribir saturar. Usando este valor, puede controlar la intensidad de este color, y 100 es el valor predeterminado de esta propiedad, 100%. Si configuro este archivo, se puede ver que no hay cambios, y ahora quiero saturar este color Voy a pasar 200%. Si configuro este archivo, puedes ver el resultado. Se puede ver el cambio del color, y si quieres que se desatura, necesitas pasar valor inferior al 100%, algo 70% Si configuro este archivo, ahora se puede ver el color de la imagen luciendo muy opaco. Si paso el valor 0% y luego configuro el archivo, ahora se puede ver esta imagen completamente convertida en una imagen en escala de grises significa imagen en blanco y negro Espero que ahora entiendas lo que es saturar. Nuestro siguiente valor es Cipia. Alguien para amarrar a Ciphia. Este filtro te da el aspecto vintage de esta imagen. Si configuro este archivo, puedes ver el resultado. Aquí se puede pasar parámetro entre cero y cien por ciento. Si paso 0% y luego configuro este archivo, ahora puedes ver la imagen real. Si aumento el valor, 50% y luego configuro el archivo, aquí puedes ver que aplica algún efecto Ciphia en esta imagen, y 100 es el valor más alto de esta propiedad No hay ningún valor negativo y valor de píxel para esta propiedad, y nuestro último valor es URL. Para ello, debes tener conocimiento de las imágenes SVG. Y si no tienes conocimientos básicos de animación SVG o imagen AVG, puedes consultar mi curso, y este curso está disponible en esta plataforma. Sólo tienes que ir a mi perfil de instructor y podrás encontrar este curso. Lo último que quiero decir, supongamos que quiere aplicar múltiples efectos en esta imagen. Supongamos que primero quieres usar efecto borroso en esta imagen Algunos para escribir desenfoque a píxel. Y después quiero aplicar efecto SPI en esta imagen. Spia 50%. Si configuro este archivo, puedes ver el resultado. Y ahora quiero aumentar el brillo de esta imagen. Brillo, 200%. Si configuro este archivo, puedes ver el resultado. Para que puedas agregar tanto efecto como quieras. Entonces espero que ahora el concepto de filtro CSS sea claro para ti. En el siguiente tutorial, vamos a entender qué son las transiciones CSS. Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 58. Tutorial de transición de CSS: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender una nueva propiedad relacionada con CSS, que es la transición CSS. Esta es una de las propiedades más importantes para la animación CSS. Ahora la pregunta es, ¿qué es la transición? Transición significa suavidad. Supongamos que quiere cambiar su posición de un objeto. De lo contrario, desea aumentar el ancho del objeto. Déjame mostrarte el ejemplo. Como pueden ver en mi documento de estimación, tenemos que voltear demasiado profundo, y quiero aumentar el ancho cuando hober sobre mi objeto rojo Y ya veo una transición en este objeto. Si hober mi cursor en este objeto, se puede ver el resultado Y puedes ver cuando nuestro contenedor extiende el ancho, puedes ver un efecto de suavidad. Si no usáramos el efecto transición, el trabajo se haría de una sola vez. Entonces no se puede ver la suavidad cuando aumenta el ancho Por eso necesitamos usar la transición. Del mismo modo, para nuestro siguiente objeto, reducimos las boerras sobre el objeto Déjame mostrarte. Como pueden ver, hay una hermosa transición. Y si no usamos esta transición, entonces se haría de una sola vez. Se haría sólo un abrir y cerrar de ojos inured. Entonces, para propósitos de suavidad, necesitamos usar esta transición Hablemos de propiedades. Básicamente, la transición viene con cinco propiedades transición, propiedad de transición, duración de transición, retardo de transición y función de temporización de transición Básicamente, nuestra primera propiedad es extremo corto de todas estas propiedades. Si desea utilizar esta propiedad de cuatro en una línea, en ese caso, puede usar solo la propiedad de transición. Básicamente, nuestra primera propiedad es propiedad de transición. Usando esta propiedad, podemos especificar por qué queremos usar estas transiciones. Supongamos que quiero usar esta transición para el radio de borde. De lo contrario, nosotros. En ese caso, necesitamos declarar el nombre de la propiedad. Algo así como propiedad de transición, radio de agua, de lo contrario, propiedad de transición Ancho. Nuestra siguiente propiedad es la duración de la transición. En esta propiedad, puede especificar cuánto tiempo desea ejecutar la animación. Nuestra siguiente propiedad es el retraso de transición. Usamos esta propiedad para determinar cuándo comenzará la transición, y nuestra última propiedad es la función de sincronización de transición. Esta propiedad viene con algunos efectos incorporados, y usando estos efectos, puede controlar la suavidad de esta transición . Esto es. Estudiemos prácticas y veamos cómo funciona. Aquí se puede ver lado a lado, abro mis visuales pocos Coretor y mi navegador usando extensión de servidor if, y ya creé un documento TML llamado index Y aquí se puede ver un DV dentro de este documento. Y la altura DV es de 200 píxeles y también es de 200 píxeles. No utilizo ningún efecto Hover en esta profundidad. Y ahora quiero aumentar Ancho de esta Div. Entonces primero, voy a usar la propiedad de transición. Propiedad de transición. Como te dije, quiero aumentar el ancho. Voy a llamar a la propiedad de ancho. Con esta propiedad, necesitamos usar otra propiedad. Necesitamos usar la propiedad de duración de transición , duración de transición. Usando esta propiedad, podemos declarar cuánto tiempo queremos ejecutar esta transición y quiero ejecutar nuestra animación durante dos segundos. Voy a escribir dos a. puedes tomar tu propio valor, lo contrario, puedes usar milisegundos también Cuando estoy sobre mi cursor en este d, quiero aumentar el ancho del contenedor. Voy a usar psutocls dot one colon hover. Entonces dentro del auto resisto quiero aumentar el ancho del contenedor, algún tipo con 400 pixel. Si configuro este archivo, si configuro este archivo y vuelo el cursor en esta inmersión, puedes ver la transición, y puedes ver la suavidad de esta De igual manera, si vuelo el cursor hacia fuera, también se puede ver la suavidad A ver qué pasó si me quito la transición. Entonces voy a comentar esta propiedad de dos. Si configuro este archivo y sobre mis curs están en este cuadro, se puede ver el resultado No hay suavidad, cuando aumenta el ancho. Sólo parpadear en tus ojos, completa la transformación Es por eso que necesitamos usar la propiedad de transición porque le da un hermoso efecto de suavidad a esta transformación Y como puedes ver, solo aplicamos esta transición en nuestro ancho. Pero si aumento la altura en nuestro selector Her, altura 350 pixel. Y luego establecer este archivo. Y si yo sobre mi cursor, como pueden ver, apenas parpadeo de inure, aumenta la altura Pero aún puedes ver el efecto de suavidad en tu ancho Y si quieres agregar el mismo efecto para height, entonces después de width, necesitas escribir el nombre de la propiedad height. Y además, es necesario declarar la duración de esta transformación. Entonces quiero usar tres segundos. Si configuro este archivo y sobre mi cursor en este DV, puedes ver el resultado. O con transformación completa en dos segundos, pero nuestra transformación de altura completa en tres segundos. No sólo eso, podemos aplicar el mismo efecto para el color de fondo. Fondo tipo Soto, verde. También, necesitamos llamar a esta propiedad fondo, altura, fondo. Para antecedentes, quiero usar cuatro segundos. Si pongo este archivo y sobre mi cursor en esta D, se puede ver que tardó cuatro segundos en cambiar el color. Entonces este es el uso de la propiedad de transición y la duración de la transición. Y ahora quiero usar todo este valor en una sola línea. Entonces voy a comentar esta línea de dos, y ahora voy a llamar a sólo transición. Y ahora voy a usar todo el valor en una sola línea. Entonces voy a copiar los valores y pegarlo aquí. Y también, voy a copiar los valores de duración, y después de un espacio, voy a pegarlo. Si configuro este archivo y HoberMkarr en este Dev, puedes ver todos los efectos a la vez Usando esta propiedad, podemos convertirla en un liner. Este es el extremo corto de toda esta propiedad. Al principio, debe declarar los nombres de las propiedades de transición y luego debe declarar el tiempo de duración de la transición. Ahora suponga que desea usar duración de transición de dos segundos para toda esta transformación. En ese caso, puedes escribir todos aquí, un Dowlin también necesitas pasar solo un tiempo de duración, dos segundos Ahora va a aplicar el efecto de transición, todas estas propiedades. Si configuro este archivo y Su mi cursor y sobre mis cuajadas están en esta D, se puede ver el resultado Al mismo tiempo, se aplicó para suavizar esto en altura, ancho y fondo. Si quieres usar la misma duración para todo este efecto, puedes usar esta taquigrafía todo.Esto es para este tutorial En nuestro próximo tutorial, vamos a hablar sobre la función de temporización de transición. Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 59. Tutorial de función de temporización de transición de CSS: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a hablar sobre la función de temporización de transición. Usando esta función, puede controlar la suavidad de esta transición Y estos son algunos valores comunes relacionados con la función de temporización de transición. Lineal, está adentro, está afuera, está adentro hacia fuera Albahaca cúbica. Y también tenemos otro valor, pero estos no son tan importantes. Nuestro primer valor es, es un valor predeterminado. Especifique un efecto de transición con un inicio lento, luego primero y luego termine lentamente. Nuestro siguiente valor es lineal. Especifica un efecto de transición con la misma velocidad de principio a fin. De principio a fin, mantiene la misma velocidad. Nuestro siguiente valor está en. Especificar un efecto de transición con un inicio lento, y nuestro valor es out es donde se encuentra el roll up opuesto. Especificar un efecto de transición con un final lento, y nuestro siguiente valor de tiempo es eso. Especificar un efecto de transición con un inicio y un final lentos, y nuestro último valor es bezier cúbico Permite definir sus propios valores en una función de bezier cúbico Para que puedas establecer tus propios valores de tiempo. Sin este valor de seis, tenemos otro valor, que es el inicio de paso, final del paso y los pasos. Estos no son tan importantes, pero es bueno saberlo. Veamos cómo está funcionando prácticamente. Aquí se puede ver, abro un sitio web, qvhypenwzia.com. Aquí puedes ver el ejemplo en tiempo real de estos valores. Es lineal, está adentro, está fuera y está afuera. Al principio, voy a aumentar el tiempo de duración, la duración a la segunda. Entonces voy a iniciar este ejemplo con valor por defecto. Si hago clic en el botón Ir, podrás ver el resultado. Nuestro siguiente valor es lineal. Si hago clic en el botón Ir, podrás ver el resultado. Valor lineal mantener la misma velocidad de principio a fin, y de ahí viene es si hago clic en Botón Ir, se puede ver el resultado De ahí viene eso. Si hago clic en Botón Ir, podrás ver el resultado. Nuestro último valor es fácil ahora. Tan fácil de especificar efecto de transición con inicio lento y lento. Déjame mostrarte otro ejemplo. Como puede ver, hay cinco DV diferentes y utilizo cinco valores de función de temporización diferentes para ellos. Si voy mis autos o todo este ítem, puedes ver el resultado. Esto es para lineal, y esto es para facilidad esto es para es in. Esto es para es out y esto es para Easy out. Espero que entiendas la diferencia. Así que saltemos al eator del estudio de resultados y veamos cómo podemos usarlo. Como puedes ver en tu pantalla, lado a lado, abro mi Visual Studio Creator y mi navegador usando la extensión Lifesaver, y ya creé un documento STML llamado index dot DML llamado index Y como pueden ver, ya creé D para este ejemplo. En nuestro tutorial anterior, aprenderemos sobre la propiedad de transición y la duración de la transición. Pero en este tutorial, vamos a aprender la función de temporización de transición. Así que voy a llamar a esta propiedad función de tiempo de transición. Empecemos la práctica con el valor por defecto, que es E. Algunos para escribir E. Si configuro este archivo y sobre mi cursor en este div, puedes ver el resultado. Este efecto de transición, comienza con lento, luego primero, y luego termina con lento. Este es el valor predeterminado y nuestro siguiente valor es lineal. Algunos para escribir, lineal. Si configuro este archivo y sobre mi cursor en este div, puedes ver el resultado. Este efecto de transición mantiene la misma velocidad de principio a fin, y nuestro siguiente valor está en, Así que el tipo está en, yo configuro este archivo y pongo el cursor en el DV especifico un efecto de transición con un inicio lento De igual manera, tenemos valor opuesto está fuera. Sum Rotive está fuera. Si configuro este archivo y las curvas de Hoberm están dentro de esta caja, como puede ver, especifique un effet de transición con un Nuestro siguiente valor está dentro. La suma otiva está dentro. Si configuro este archivo, y una vez más, las curvas de Hobermi están en esta D, se puede ver el resultado Se especifica un efecto de transición con un inicio y un final lentos. Hablemos de otro valor, que son los pasos. Pronto a escribir, Pasos. Aquí podemos completar nuestra transición con pasos. Supongamos que quiero completar esta transición en dos pasos, así que quiero pasar dos aquí. Si configuro este archivo y acopo mis autos en este DV, puedes ver el resultado Como pueden ver, en dos pasos completa la transición, y si me quito el cursor, se puede ver el mismo efecto. En dos pasos, completa la transición. Y ahora quiero completar esta transición en cinco pasos. Si pongo este archivo y sobre mis autos en esta caja, puedes ver el resultado. En cinco pasos completa la transición. Entonces este es el valor de USKaso Steps. La mayoría de las veces tratamos de evitar este valor. No utilizamos este valor. Pero para fines educativos, debes tener conocimiento al respecto. Nuestro siguiente valor es el inicio de pasos. Entonces voy a escribir, paso, inicio. Si configuro este archivo y sobre mi cursor en este div, se puede ver en un solo paso que completa la animación. Pero si utilizo el valor final del paso, Guardar final, y configuro este archivo. Yo abro el cursor, va a iniciar mi animación hasta dos segundos. Déjame mostrarte. Así que voy a pasar por encima de mi cursor en esta profundidad. Como puedes ver, hasta dos segundos, inicia la animación, y completa la transición en un solo paso. Entonces este es un UC de valor final de paso. Vamos a saltar al último valor, que es Qubic bezier Algún tipo Qubic bezier. En Cubic bezier, puedes completar la animación en cuatro pasos Por qué no usar el valor de paso en nuestra transición, no hay suavidad. Pero en albahaca cúbica podemos mantener la suavidad de esta transición Supongamos que para nuestro primer paso, voy a tomar 0.5 segundos, para nuestro segundo paso, voy a dar 0.6 segundos, y para nuestro tercer paso, voy a tomar 1 segundo. Y para nuestro cuarto paso, voy a tomar 0.1 segundo. Si configuro este archivo y sobre mis cartas están en el div rojo se puede ver el resultado. Empiezas con lento y luego terminas primero. Para nuestro primer sf, tardó 0.5 segundos y para nuestro segundo paso, tardó 0.6 segundos, y para nuestro tercer sf tardó 1 segundo, y para nuestro último tf tardó 0.1 segundo. Este es un valor uksOpe V sier. Puedes cambiar la duración como quieras. Espero que ahora te quede claro qué es la propiedad de la función de sincronización de transición. En nuestro siguiente tutorial, vamos a hablar sobre la propiedad de retardo de transición. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 60. Tutorial de retraso de la transición de CSS: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender qué es la propiedad de retardo de transición. Básicamente, es mezquino ¿después cuánto tiempo quieres iniciar la transición? Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi creador de visual studio y mi navegador usando extensión del servidor Lip y abro mi documento de estimación anterior. Usemos la propiedad de retardo de transición. Voy a empatar retraso de transición, y voy a pasar valor de tres segundos, tres S. Si configuro este archivo y Obermcurs están en esta D, como pueden ver, después de tres segundos, inicia De igual manera, si me quito el cursor, como pueden ver, hasta tres segundos, se transita por completo. Puedes configurar en cualquier momento como quieras. Esta es una UTs de función de retardo de transición, y ahora voy a usar taquigrafía toda esta propiedad Como puede ver, el total usa cuatro propiedades de transición, propiedad transición, duración de transición, función de sincronización de transición y retardo de transición. Quiero que sea un trazador de líneas. Para eso, primero, voy a comentar estas cuatro propiedades de transición. Entonces voy a llamar a la transición. Al principio, es necesario declarar el nombre de la propiedad. En nuestro caso, con sonido para pegar aquí. Y entonces tenemos que pasar el valor de duración de transición, que es dos segundos dos a, y luego vienen la función de temporización de transición, que es E. Y nuestro último valor es el valor de retardo de transición, que es de dos segundos. Ahora bien, no necesitamos usar estas cuatro propiedades. Solo hay que recordar que tenemos que seguir esta secuencia. Primero, necesita pasar la propiedad, luego necesita pasar la duración, y luego necesita pasar la función de sincronización. Por fin, hay que pasar el retraso. Entonces, si configuro este archivo y el cursor de Hoberm en este DV, se puede ver hasta dos segundos que inicia la animación Como puedes ver, ha funcionado perfectamente. Y ahora quiero decirte una cosa importante. Esto no es necesario que usemos transición con solo Su selector. Puedes usar esta transición cuando cargues tu página. También una cosa hay que recordar si no declaramos la propiedad en nuestro caso con, así que voy a comentar esto. Y luego establecer este archivo. Como puedes ver, no va a funcionar correctamente. Entonces necesitamos declarar la propiedad antes de usar esta propiedad en nuestro selector Hobart, y debes recordarla Y ahora voy a usar esta transición con diferentes pseudoselectores Entonces escribe activo. Al principio, eliminemos el valor del retraso. Entonces voy a configurar este archivo. Si sobrepasé mi auto en este div, como pueden ver, no está funcionando porque nuestro pseudo selector está activo Necesitamos presionar el clic del mouse para ejecutar esta animación. Déjame mostrarte. Como pueden ver, sigo presionando mi mouse débil, solo ejecuto mi animación. Cuando nuestro mouseti esté activo, entonces va a realizar la animación De lo contrario, no es trabajo. Esto es para este tutorial. Espero que ahora todas las propiedades de transición sean claras para ti. Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 61. Introducción a CSS Transform 2D: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender una nueva propiedad, que se transforma. Y básicamente, nos vamos a centrar en la re transformación. Al principio, veamos algún ejemplo ¿qué es transformar? Aquí puedes ver dos ejemplos. Este es un elemento normativo, y este elemento profundo se gira en sentido horario, 20 grados. Usando la transformación de Kuri, podemos rotar cualquier profundidad en el sentido de las agujas del reloj, de lo contrario en sentido antihorario De igual manera, tenemos otro ejemplo. Esta es una normalidad y este elemento profundo está sesgado 20 grados a lo largo de los Xxs y diez grados a lo largo de los YxS Así podemos sesgar nuestro elemento, rotar nuestro elemento, escalar nuestro elemento y muchos más Veamos cuáles son los valores en la transformación de dos D. Como puede ver, tenemos un valor total de 11 en transformación. Traducir, traducir X, traducir Y, rotar, escalar, escala X, escala Y, sesgar, sesgar, sesgar Y, y nuestro último Y tenemos otro valor que es valor predeterminado, que es ninguno. Y usando la propiedad matricial, puedes usar todo este valor en una línea. En este tutorial, voy a cubrir este valor de cuatro. Traducir, traducir Traducir Y y recordarlo. Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi Visual Studio Creator y mi navegador usando la extensión del servidor Lip, y ya creé el documento TML llamado index dot TML Como pueden ver, dentro de mi estructura de estimación, ya creé el elemento Dev. Dije, 200 píxeles de ancho y 100 píxeles de alto. Y también digo color de fondo y moderno. Al principio, voy a iniciar esta transformación con valor de rotación, tipo de sonido, propiedad de transformación. Voy a usar el valor de rotación. Dentro del paréntesis, necesitamos pasar el parámetro grado. Supongamos que quiero rotar este elemento 40 grados. Voy a pasar 40 DG. Si configuro este archivo, puedes ver el resultado. De igual manera, si paso 90 grados y luego configuro este archivo, como pueden ver, nuestro elemento profundo gira 90 grados. Nuestro valor rotado es parte de la titransformación. No sólo gira nuestro elemento, también gira nuestro contenido. No sólo eso, también puedes usar valor negativo. Supongamos que quiero girarlo -60 grados -60. Si configuro este archivo, puedes ver el resultado. Y si quieres voltear esta profundidad, puedes usar menos 180 grados, de lo contrario, 180 grados. Si configuro este archivo, puedes verlo elemento prepower. Entonces este es el uso del valor de rotación. Hablemos de nuestro próximo valor, que es traducir. Entonces quiero escribir traducir aquí. Voy a establecer este archivo. Como puede ver, no hay cambios. Ahora la pregunta es, ¿cuál es el significado de traducir? El método translate mueve un elemento desde su posición actual. Como pueden ver, esta es la posición actual de este elemento, y quiero mover este elemento, 100 píxeles dirección X y 200 píxeles yx es dirección En ese caso, necesitamos usar este valor, traducir. Al principio, tenemos que pasar la dirección XX, luego tenemos que pasar la dirección x. Entonces, al principio, quiero mover este elemento en dirección de 100 píxeles s. Voy a pasar 100 px. Esto es para el parámetro XX. A continuación, quiero mover este elemento 50 pixel dirección yxs. Voy a pasar 50 px. Si configuro este archivo, como pueden ver, movió el elemento de su posición actual de acuerdo con el parámetro dado para los Xxs y YxS En dirección SS 100 píxeles y en dirección YxS 50 píxeles. Vamos a saltar al siguiente valor, que es translate X, Summer type translate X. Es el paréntesis, necesitamos pasar el parámetro one, que es XX parámetro Esta función mueve el elemento a lo largo del eje X. Si configuro este archivo, como pueden ver, esta es la posición exacta de este elemento porque aquí no pasamos ningún parámetro. Y ahora quiero mover este elemento 200 pixel dirección Xxs Voy a pasar 200 aquí PX. Si configuro este archivo, puedes ver el resultado. De igual manera, tenemos otro valor para la dirección YxS. Voy a escribir, traducir Y. Como pueden ver, esta es la posición exacta de este elemento. Ahora quiero mover este elemento 100 píxeles en dirección YxS Dentro del paréntesis, voy a pasar 100 píxeles. Si configuro este archivo, puedes ver el resultado. Mueve nuestro elemento 100 píxeles en dirección YxS. Esto es para este tutorial. En el siguiente tutorial, voy a cubrir estas propiedades de escala, escala escala X, escala Y. Gracias por ver este video, estad atentos para nuestro próximo tutorial. 62. CSS transforma la escala 2D: Hola, chicos. Me alegro de verte de vuelta. Este es el segundo tutorial relacionado con la transformación. Y en este tutorial, vamos a aprender esta escala de tres valores, escala X, y la escala Y. Intentemos entender qué es escalar y cómo funciona. Supongamos que este es nuestro elemento DV, y este es el exceso de dirección y esta es la dirección YxS Si quieres disminuir y aumentar el tamaño de este elemento, en ese caso, necesitas usar el valor de escala. Vamos a aumentar el tamaño de este elemento para aumentar el tamaño de este elemento, necesitamos dos parámetros. Parámetro de exceso y parámetro YxS. Este método de escala aumenta o disminuye el tamaño de un elemento. Entonces veamos cómo podemos usarlo prácticamente. Como puedes ver en tu pantalla, lado a lado, abro mi creador de visual studio y mi navegador usando la extensión Lifesaver, y ya creé documento de estimación llamado índice dos puntos Entonces intentemos aumentar el elemento profundo dos V dos veces el ancho original y tres veces el alto original. Entonces primero, voy a llamar a nuestra propiedad name transform. Transformar Escala. Al principio, necesitamos pasar el valor de dirección en exceso de dirección, quiero escalar este elemento dos veces. Quiero pasar dos aquí y en dirección Xs, quiero escalarlo tres veces, así que quiero pasar tres aquí. Si configuro este archivo, puedes ver el resultado. Como puedes ver, su escala nuestro elemento y también escala nuestro texto dentro de este elemento. De manera similar, se puede reducir la escala del elemento. Volvamos a la posición normal. Si configuro este archivo, es el tamaño normal de este elemento, y ahora quiero disminuir el elemento deep para que sea hap up su ancho y alto originales Para la dirección de x, voy a pasar 0.5, para dirección YxS, también, voy a pasar 0.5 Si configuro este archivo, puedes ver el resultado. Este es el caso de uso del valor de escala y nuestro siguiente valor es la escala x. Déjame mostrarte. Volvamos al tamaño predeterminado, y voy a llamar a la escala X, y voy a establecer este archivo. El método KX aumenta o disminuye el ancho de un elemento Supongamos ahora quiero aumentar el ancho del elemento profundo dos veces. En ese caso, necesitamos pasar sólo el valor XX, y quiero aumentarlo dos veces. Si configuro este archivo, puedes ver el resultado. Como puede ver, aumenta el ancho dos veces. Si quieres disminuir el ancho, necesitas pasar valor de 0.1 entre 0.9. Paso de sonido 0.5. Si configuro este archivo, puedes ver el resultado. Disminuye el ancho de este elemento. Volvamos al tamaño predeterminado de este elemento. Y ahora nuestro siguiente método es la escala Y. Voy a escribir la escala Y. Este método de la escala Y aumenta o disminuye la altura de un elemento. Quiero aumentar la altura tres veces su tamaño original, así que quiero pasar tres aquí. Si configuro este archivo, puedes ver el resultado. Y de la misma manera, si quieres disminuir la altura, necesitas pasar valor entre 0.120 0.9 Aquí voy a pasar 0.6, 0.6. Si configuro este archivo, puedes ver el resultado. Se ha reducido la altura de este elemento. Este es el caso de uso del valor de escala. Espero que ahora te quede claro cómo es el trabajo. En el siguiente tutorial, vamos a aprender este valor de tres, sesgar x, y sesgar Y. Pero antes vamos a aprender otra propiedad, que es transformar Gracias por ver este video, estén atentos para nuestro próximo tutorial. 63. Transforma CSS en 2D: Hola, chicos, me alegro de verles de vuelta. Esta es la tercera transformación de la historia CSS relacionada con el video. En este tutorial, vamos a aprender esta propiedad tres, skew, skew x y skew y Este método usa un elemento a lo largo del eje Xaxis e Y por los ángulos dados. Este método usa un elemento a lo largo del eje Xaxis e Y por los ángulos dados En cambio este parámetro, necesitamos pasar ángulos. Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi Visual Studio Creator y mi navegador usando la extensión salvavidas, y ya creo un documento TML llamado index Entonces primero tenemos que llamar a la propiedad name transform sum para escribir transform. Al principio, voy a iniciar este tutorial con sesgo x valor Voy a pasar sesgo X. Dentro de este paréntesis, necesitamos pasar el valor del ángulo Usando este valor, solo podemos cambiar la dirección XX. Si usamos este valor desde este punto, va a cambiar el ángulo. Supongamos que voy a aprobar 20 grados. Si configuro este archivo, puedes ver el resultado. Como puede ver, a partir de este punto, toma un ángulo de 30 grados. De igual manera, también se puede utilizar el valor negativo. Yo paso -20 grados y luego pongo este archivo, como se puede ver, a partir de este punto, gira en la dirección del lado derecho. Como nuestro ángulo de rotación es de 20 grados, pero en ese caso, -20 grados. Como puede ver, esta rotación se mueve solo en dirección X, no YX es dirección Vamos a llegar a la posición por defecto, y voy a usar skew Yo skew Y. Ahora la rotación trabaja en dirección vertical Si apruebo 20 grados, 20 DG y configuro este archivo, se puede ver el resultado. A partir de este punto se movió 20 grados dirección YxS. Básicamente, se mueve hacia abajo. Si quieres moverlo hacia arriba, necesitas pasar valor menos. Si paso -20 grados y luego configuro este archivo, se puede ver el resultado. Espero que ahora te quede claro cómo funcionan X y Sky Property. Hablemos de nuestro próximo valor, que sólo es sesgo Al principio, voy a volver a la posición predeterminada, y voy a escribir solo SQ. En este método en nuestro primer parámetro necesitamos pasar ángulo X y luego necesitamos pasar el ángulo YX Al principio, voy a pasar ángulo Xs de 30 grados. Y luego voy a pasar ángulo YX de 20 grados. Si configuro este archivo, puedes ver el resultado. No sólo eso con valor positivo, también se puede utilizar el valor negativo. Supongamos que quiero pasar -20 grados en dirección Y xs. Si configuro este archivo, puedes ver el resultado. Esto depende de ti, ¿cómo puedes usar estos valores? Hablemos de otra propiedad que está relacionada con la transformación, este nombre de propiedad es transform origin. Ahora la pregunta es, ¿cuál es el Ukage de transformar la propiedad de origen Es alla U para cambiar la posición sobre el elemento de transformación. ¿Qué significa eso? Supongamos que este es nuestro elemento DV. Si recuerdas el valor de rotación, entonces también puedes recordar el punto de rotación, que es el centro de este elemento. Este punto de rotación es el centro de XXs también YxS, pero no quiero rotar mi elemento desde el punto medio Quiero cambiar el punto de rotación. Quiero rotar este elemento desde este punto significa esquina portátil. De igual manera, si quiero rotar a partir de este punto, entonces esta es nuestra esquina inferior derecha, y esta es nuestra esquina inferior regazo. También esta es nuestra esquina superior derecha. Puedes tomar el punto por el nombre. De lo contrario, puede tomar porcentaje o valor de píxel. Si quieres tomar el punto de rotación dentro de este elemento profundo, algo en esa posición, sí, puedes. De acuerdo con la posición de punto blanco, necesitas tomar 20% en dirección en exceso y además necesitas tomar 30% en dirección YxS Solo una cosa que debes recordar al usar esta propiedad, puedes cambiar la posición del elemento transform. Vamos al creador del estudio visual y veamos cómo funciona. Como pueden ver, este es nuestro ty normal, y giro este dp desde la posición central 20 grados. Pero si cambio la posición del origen de la transformación a partir de este punto, sonido a t transforma el origen. Y voy a pasar de la posición del labio XXs y de la posición YxStP Sonido para pasar arriba. Antes de establecer este archivo, quiero volver a esta profundidad en la posición normal. Voy a comentar estas dos líneas. Si configuro este archivo, ahora está de vuelta a la posición normal. Ahora voy a descommen estas líneas, y ahora voy a poner este archivo, solo enfocarme en esta esquina Si configuro este archivo, puedes ver el resultado. De esta esquina se mueve 20 grados. Aumentemos el valor de rotación. Voy a escribir 80 grados. Si configuro este archivo, puedes ver este resultado. A partir de este punto, gira 80 grados. Volvamos a la posición por defecto. Una vez más, voy a cambiar el punto de rotación. Voy a inclinar abajo derecho. Ahora, a partir de este punto, va a rotar nuestro elemento. Si configuro este archivo, puedes ver el resultado. Ahora la rotación o está en punto es este punto. Volvamos a la posición por defecto. Una vez más, voy a cambiar la rotación o está en posición. Pero esta vez no voy a usar ningún rincón. Ahora quiero apuntar de rotación algo en este lugar. Dirección XX, voy a pasar 20% por dirección YxS, voy a tomar 40% Si configuro este archivo, puedes ver el resultado. A partir de este punto, gira el elemento 80 grados. Si paso XX es valor cero y YX valor 100 y luego configuro el archivo También voy a cambiar el ángulo de rotación 20 grados y luego volver a configurar este archivo. Como puedes ver, ahora nuestro punto de rotación es vuelta esquina inferior porque en dirección X, usamos valor cero, pero en dirección YxS, usamos valor 100% Por eso nuestro punto de rotación es la esquina inferior de vuelta. Ahora la pregunta es, ¿cuál es el caso de uso de esta propiedad? Básicamente, esta propiedad se utiliza para la animación. Como sabéis, este es nuestro tutorial de animación CSS. Por eso tenemos que aprender sobre ello. Esto es para este tutorial. En nuestro siguiente tutorial, vamos a aprender nuestro próximo valor. Vamos a aprender nuestro último valor, que es la matriz. Gracias por ver este video, estad atentos para nuestro próximo tutorial. 64. CSS transforma la matriz 2D: Hola, chicos. Me alegro de verte de vuelta. Este es el último tutorial relacionado con la transformación de ti. Y en este tutorial, vamos a aprender el valor matricial. Ahora la pregunta es, ¿qué es la matriz? El método de matriz, combina todos los métodos de transformación tui en uno solo Este método toma un total de seis parámetros, que contiene la función de matriz que le permiten rotar, escalar, mover y sesgar elementos Sobre todo si no usamos demasiado este elemento. Entonces veamos cómo funciona. Como pueden ver, lado a lado, abro mi visual studio coator y mi navegador usando la extensión if server, y ya creo un documento de estimación llamado Idexfo Al principio, voy a llamar a la propiedad name transform, y voy a llamar a nuestra matriz de valor. Al principio, necesitamos pasar el valor X de la escala. Entonces voy a pasar una. En nuestro exceso de dirección, no quiero escalarlo. Por eso paso un valor, y a continuación, tenemos que pasar el valor Y sesgado, y voy a pasar -0.3 Y entonces tenemos que pasar sesgo x valor, y aquí voy a pasar cero A continuación, tenemos que pasar el valor de la escala Y, y aquí voy a pasar uno. Ahora solo tenemos dos parámetros lay translate X y translate Y. Para traducir X, voy a pasar cero, y para traducir Y, voy a pasar cero. Si configuro este archivo, como pueden ver, es solo sesgar nuestro elemento profundo -0.3 grados Y si quieres escalar este elemento dos veces, necesitas pasar la escala X dos y la escala Y dos. Si configuro este archivo, puedes ver el resultado. Con sesgo, también es escalar nuestro elemento. Este es el caso de uso de este método matricial. Ahora, usemos todo el valor de la transformación de ti uno por uno con su efecto e intentemos crear una animación hover Voy a comentar esta línea, y al principio, voy a crear el pseudo selector, D, colon hover Entonces dentro de la Calibra dice, voy a usar transform property, y voy a teclear transform Al principio, voy a usar el valor de escala, y quiero escalar este elemento en dos tiempos. Voy a pasar hasta aquí. Si configuro este archivo y sobre mi cursor en este de elemento, puedes ver el resultado. Como puedes ver, en un solo paso completa la transición. Para proporcionar una suavidad en esta transformación, necesitamos usar la propiedad de transición Quiero escribir transición. Aquí, primero, necesitamos declarar el nombre de la propiedad y nuestro nombre de propiedad se transforma. Entonces necesitamos declarar el tiempo de transición, que es de 1 segundo. Si pongo este archivo y sobre mi cursor en este de elemento, se puede ver la suavidad de esta transformación Pero en este ejemplo, nuestra escala de elementos profundos desde la posición central. Pero ahora quiero cambiar la posición de origen de transformar. Entonces, para escribir, transformar Aisin. Tarde arriba. Si pongo este archivo y cómo están mis cuajadas en este elemento profundo, como pueden ver, a partir de este punto, es escalar nuestro elemento profundo Usemos nuestra siguiente propiedad de transformación de dos d, que es traducir. Entonces, para duplicar esta línea, y quiero comentar la anterior. Aquí voy a escribir traducir. Y quiero mover nuestro elemento profundo, 200 píxeles excesos dirección y 150 píxeles dirección YxS Si pongo este archivo y Her Mikers ahí en este elemento profundo, se puede ver el resultado Se mueve nuestro elemento profundo, 200 píxeles excesos dirección y 150 píxeles YX es Usemos nuestro siguiente valor, que es el sesgo. Una vez más, voy a duplicar esta línea y comentar la anterior. Aquí voy a escribir sesgo. Y en dirección XX, quiero girarlo 20 grados y en dirección x, quiero girarlo diez grados. Si configuro este archivo y Obermkurs están metidos en esta profundidad, se puede ver el resultado Como sabéis, nuestro origen de transformación es lap off. Entonces cuando yo Obermkers esté metido en esta inmersión, se puede ver el resultado Espero que ahora te quede claro qué es transformación de dos D y cómo podemos usarla en nuestra animación. Gracias por ver este video. En nuestro siguiente tutorial, vamos a aprender tres D transformación. Estén atentos para nuestro próximo tutorial. 65. Tutorial de Transform 3D para CSS: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender este método de cuatro traducir. Traducir, traducir Y, traducir Z, y traducir tres D. Ya aprendimos sobre estas dos VLU en nuestro tutorial anterior Pero aquí, lo voy a usar con transformación de tres D. Veamos cómo funciona. Como pueden ver, lado a lado, abro mi creador estéreo visual y mi navegador usando la extensión Lifesaver, y ya creé un documento TML llamado index Como puede ver, dentro del continente de patentes, tenemos un contenedor de caja Usemos nuestra primera VLU pero antes voy a llamar a la propiedad transform Algunos para escribir transformar. Nuestro primer valor es traducir X, alguien para escribir, traducir X. Dentro del paréntesis, voy a pasar 200 píxeles Si configuro este archivo y cursor de Hobermi en este de lement, puedes ver Es mover mi elemento 200 píxeles en dirección XXLs. Y si quieres moverlo en sentido contrario, en ese caso, necesitas pasar -200 píxeles Si configuro mi archivo y cursor de Hobermi en esta casilla, puedes ver el resultado Ya lo aprendemos en nuestro tutorial de precesión, hagamos esta transición tres D. Quiero pasar otro valor, que es prospectivo, prospectivo de 200 píxeles También quiero pasar rotar valor Y, rotar, Y aquí voy a pasar 30 grados. Si configuro este archivo y sobre mi curor en este de elemento, puedes ver el resultado Como puedes ver mueve nuestro elemento profundo, también gira nuestro elemento profundo. Ya sabes, usamos prospectiva, por eso te da tres mirada D. Entonces hablemos de nuestro siguiente valor, que es traducir Y. Entonces para usar, traducir Y. Aquí voy a usar valor positivo. Si configuro este archivo y Ober Mi cursor sobre este de elemento, se puede ver el resultado Déjame usar el valor de rotación x. Entonces para escribir, rotar X. Si configuro este archivo y Obermicursor en este DP, se puede ver, ahora se ve más atractivo Vamos a usar nuestra siguiente propiedad, que es traducir Z, alguien para escribir, traducir Z. Si paso 200 pixel, y luego configuro este archivo I I Hoberm cursor sobre este div, como pueden ver, no está funcionando Pero ya dije traducir ese valor en esta inmersión. Usemos otro valor con eso. Voy a usar rotar valor con eso, rotar, y 60 grados. Si configuro este archivo y el cursor de Hobermi en este DV, puedes ver el resultado Pero se ve bastante similar a traducir X, pero no lo es. Déjame mostrarte. Déjame usar el valor prospectivo con eso. SMTyppEspectiva, prospectivo 900 píxeles. Si configuro este archivo y cursor de Hobermi en este DV, puedes ver el resultado Déjame mostrarte la verdadera demostración, entonces puedes entenderla correctamente. Supongamos que este es nuestro elemento dev. Al principio, voy a rotar este DVLement si usamos transls valor Z, entonces es mover así Espero que ahora te quede claro cómo funcionan los valores de traducir z. Hablemos de nuestro último valor, que es traducir tres D. Algunos a escribir, traducir tres D. Aquí tenemos que pasar el valor total de tres, XX YxS y Zaxs Supongamos que para XXs voy a pasar 50 pixel y para xs, voy a pasar 50 pixel también para Zexs voy a pasar Si configuro este archivo y abro mi Carter en este DV, puedes ver el resultado. Y si aumento el valor de Traducir Z, supongamos que voy a escribir 40 píxeles y luego establecer este archivo y sobre mi cursor sobre este desarrollo, se puede ver el resultado. Al mismo tiempo, es movimiento en XX es dirección, dirección YxS, y dirección Z xs Espero que ahora te quede claro lo que es tránsito tres D valor. Esto es para este tutorial. En nuestro próximo Tutorial, vamos a cubrir estos dos valores, escala tres D y Escala Z. Gracias por ver este video, estad atentos para nuestro próximo tutorial 66. Escala de tutoriales de CSS Transform 3D: Hola, chicos. Me alegro de verte de vuelta. Este es otro tutorial relacionado tres D transformación. En este tutorial, vamos a aprender estos cuatro métodos, ScalX Y, escala Z, y habilidad tres D. Ya aprendemos sobre método ScalX y escala Y en nuestros tutoriales anteriores Pero una vez más, voy a repetir este método en este tutorial. Pero el método más importante para tres D es la escala. Define una transformación a escala de tres D dando un valor para las Zs y nuestro último método es la escala tres D. Usando este método, podemos usar tres valores diferentes a la vez Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi coordinador de Visual Studio y mi navegador usando la extensión de servidor p, y ya creo un documento TML llamado index dot HTML Entonces primero, voy a usar el nombre de propiedad transform, sum to type, transform aquí. Nuestro primer valor es SKXuTyp escala x aquí, habilidad X. Quiero escalar este elemento dos veces en dirección x, así que voy a pasar a Si configuro este archivo y Ober mi cursor en este elemento D, se puede ver el resultado Del mismo modo, podemos usar el valor Y de la escala. Voy a cambiar la escala Y. Si configuro este archivo y ober mi cursor sobre este de elemento, se puede ver el resultado Debido a que no proporcionamos ningún punto de origen de transformación, es por eso que es escala a mitad de este elemento. Es una posición de origen por defecto. Pero si usas transformar el valor de origen con eso, déjame mostrarte y luego establecer este archivo y las tarjetas Hobermi están en este desarrollo, puedes ver el resultado diferente Hablemos de nuestro valor más importante, que son las habilidades. Pero primero, voy a comentar esta línea. Voy a teclear básculas a aquí. Escala al tiempo. Si configuro este archivo y las tarjetas de Hobermi están en este desarrollo, como pueden ver, no hay cambios porque este valor solo funciona con tres transformación D, necesitamos darle tres D L. Voy a comentar esta línea, y voy a usar este valor con prospectiva y rotar Y. También voy a descommen Si configuro este archivo y sobre mi cursor sobre este desarrollo, ahora puedes ver el resultado. Si aumento el valor de conjunto de escala, suma escriba siete aquí y configuro este archivo y sobre mi cursor sobre este desarrollo, ahora se puede ver la diferencia, cómo se ha funcionado. De igual manera, si disminuyo el valor de escala, sumo al tipo 0.5 y configuro este archivo y sobre mi cursor sobre este desarrollo, se puede ver el resultado. Espero que ahora te quede claro cómo se trabaja el método Scalet Hablemos de nuestro último método, que es la escala tres D. Tipo de suma escala tres D aquí, escala tres D. Usando este método, aquí necesitamos pasar el total de tres valores escala X, escala Y y escalas. Usando eso, podemos usar tres valores diferentes a la vez. Entonces para XXs, quiero escalarlo dos veces. Para YxS, quiero escalarlo tres veces y para Xxs quiero escalarlo cinco Si configuro este archivo y Ober mi cursor sobre este deve lement, se puede ver Al principio, escaló este elemento dos veces en dirección en exceso, luego tres veces en la dirección de Y x, y luego cinco veces en la dirección de Xerox Este es el uso del valor D de la escala tres. Espero que ahora te quede claro. Esto es para este tutorial. En el siguiente tutorial, vamos a aprender sobre una nueva propiedad, lo cual es prospectivo. Gracias por ver este video, estad atentos para nuestro próximo tutorial. 67. Tutorial de CSS Transform Rotate 3D: Hola, chicos. Es bueno verte de vuelta. En este tutorial, vamos a iniciar la transformación de tres D. En nuestro capítulo anterior, aprendemos sobre la transformación de dos D. Pero en este capítulo, vamos a aprender tres D transformación. Sin transformación de tres D, no podemos imaginar la animación. Entonces veamos los valores relacionados con la transformación de tres D. Como puede ver, tenemos un total de diez valores relacionados con la transformación de tres D. Rotar X, rotar Y, rotar Z, rotar tres D, traducir Z, traducir tres D, escala tres D, escala Z, prospectivo y matriz tres D. En el método rotar X, necesitamos pasar valor de ángulo. Del mismo modo, necesitamos pasar el valor del ángulo para rotar Y, pero para rotar el método tres D, necesitamos pasar el parámetro total de cuatro, X Y Z, y el valor del ángulo. Entonces en este tutorial, vamos a cubrir este método de cuatro, rotar x, rotar Y, rotar Z, y rotar tres D. Veamos como funcionan los métodosa en ejemplo real Como pueden ver, tenemos que decir por elemento profundo en nuestro documento, y dije por diferente valor arraigado para este ejemplo. Si yo sobre mi cursor, giro x elemento profundo, se puede ver la transformación. De esta manera, rotar X obra. Aquí utilizamos el valor rotatx con prospectiva. Si usamos valor de rotación, dibuja una línea en dirección X desde este punto hasta este punto. Déjame mostrarte el verdadero ejemplo. Supongamos que es un elemento profundo, y si utilizo valor rotatx, va a crear una línea desde este punto hasta este punto Esta es nuestra línea de origen de transformación. Si paso valor positivo, algo 40 grados, entonces va a rotar nuestro elemento de esta manera. Si paso -40 grados, entonces va a rotar este elemento de esta manera. ¿Puedes ver mi cara? Absolutamente no. Pero si utilizo ángulo de 90 grados, entonces va a rotar este elemento así. Ahora el elemento no es visible correctamente. Pero si lo giro 180 grados, ahora se puede ver la parte opuesta de este elemento. De esa manera, la rotación se calentará. Hablemos de nuestro siguiente valor, que es rotar Y. Si obero mi cursor en este DV, se puede ver el efecto Además, utilizamos el valor prospectivo con eso, que puedas entender este valor fácilmente. Si usamos rotar el valor Y, dibuja una línea desde este punto hasta este punto. Dirección YxS media. Por eso lo llamamos rotar Y. Usando valor de ángulo, puedes girarlo lado izquierdo, de lo contrario, lado derecho. Veamos el ejemplo de cómo funciona. Si usamos el valor de giro Y, va a dibujar una línea desde este punto hasta este punto significa dirección YxS Esta es nuestra línea de origen y por defecto, siempre ha llegado al centro. Si paso el perímetro positivo de 40 grados, va a rotar este elemento de esta manera. De igual manera, si paso -40 grados, entonces va a rotar este elemento de esta manera. Si giro este elemento 90 grados, ahora todo el elemento es menos visible y puedes ver mi cara. Si lo giro 180 grados, se puede ver la parte opuesta de este elemento. Nuestro siguiente valor es rotar Z. Si yo berma cursor en esta inmersión, se puede ver el resultado Define tres rotación D a lo largo de las Zs. Veamos cómo funciona. Este es el ejemplo de la rotación de Zexis. Define tres rotaciones D a lo largo del eje Z, por defecto, punto de análisis está siempre centrado, y usando valor positivo o negativo, podemos girarlo de esta manera, de lo contrario de esa manera Nuestro último y último valor es rotar tres D. Es definir rotación completa de tres D. Si yo Hoberm cursor sobre este div, se puede ver el resultado. Al final de este ejemplo, les voy a dar la demostración de cómo es el trabajo. Comencemos la práctica con el valor de los huevos girados. Como pueden ver, lado a lado, abro mi visual studio Creator y mi navegador usando la extensión if server, y ya creo un documento de estimación llamado demo dot TML Como pueden ver, dentro de un contenedor paren, creo un contenedor de caja, y dije altura y ancho similares para nuestro contenedor paren y nuestro contenedor hijo Para contenedor paren, dije un color de fondo gris, y para contenedor infantil, digo color de fondo chocolate Llamemos a la propiedad transform y usemos el valor rotate eggs. Entonces para llamar a transform rotate X. Aquí necesitamos pasar un parámetro de ángulo giratorio, así que voy a escribir 40 grados. Si configuro este archivo, aquí puedes ver el resultado. Oye, es correctamente, pero no puedes sentir demasiado el cambio. Para ello, voy a utilizar prospectiva y transición que puedas entenderlo muy fácilmente. Lo voy a usar con Su selector, punto, caja, colon, Ella. Dentro de las calibraciones, voy a llamar a esta propiedad. Y voy a llamar propiedad de transición por suavidad. Transición y nuestro nombre de propiedad es transform y nuestra duración de transición es de 1 segundo. Si dije este archivo y sobre mi cursor sobre este elemento profundo, se puede ver cómo funciona, pero no está nada claro en absoluto. Por eso voy a usar otro vdo que es prospectivo Te va a dar los tres d dos, y no voy a explicar cómo funcionan los prospectos. Para prospectiva, te daré un video por separado. Usemos el valor prospectivo. Entonces escriba prospectiva. Y dentro del paréntesis, necesitamos pasar el valor y nuestro valor es de 200 píxeles Si configuro este archivo y luego sobre mi cursor sobre este de elemento, puedes ver el resultado, cómo funciona. Supongamos que crea una línea desde este punto hasta este punto significa dirección Xx. Usando este valor, puedes girarlo hacia arriba, de lo contrario hacia abajo. Este es el uso ks del valor rotatx. Cambiemos el ángulo de rotación 90 grados. Si configuro este archivo y sobre mi cursor sobre este de elemento, ahora puedes ver el resultado. Ahora es completamente invisible. Si quieres darle la vuelta por completo, entonces necesitas pasar 180 grados valor 180 grados. Si configuro este archivo y sobre mi cursor en esta inmersión, puedes ver el resultado. Como puedes ver gira nuestro elemento deve 180 grados. No sólo eso, también se puede cambiar la posición de origen de la transformación. Déjame mostrarte. Voy a llamar a transformar propiedad de origen. Transformar el origen. Ahora no quiero rotar este elemento a mitad de este elemento. Quiero rotarlo desde esta esquina. En ese caso, necesitamos usar el valor inferior derecho, derecho, abajo. Antes de poner este archivo, también, voy a cambiar el ángulo de rotación, que es de 30 grados. Si configuro este archivo y sobre mi curarlo sobre este de elemento, como pueden ver, desde la esquina inferior derecha, como pueden ver, desde la esquina inferior derecha, gira 30 grados. Espero que ahora te quede claro cómo funciona el valor rotativo. Entonces saltemos al siguiente valor, que es rotar Y. Pero antes, voy a comentar esta línea. Y aquí, voy a escribir rotar Y. Si pongo este archivo y el cursor Obermi sobre este de lement, se puede ver el resultado Como puedes ver divide nuestro elemento y dibuja una línea desde este punto hasta este punto. Es la dirección media de YX. Y a partir de esta línea, se puede torcerla lado izquierdo, lo contrario lado derecho según el valor del ángulo. Todo es similar al valor de rotar x. Simplemente dibuja una línea y divida este elemento de este punto a este punto en dirección YxS Por eso lo llamamos rotar Y. Hablemos de nuestro siguiente método, que es rotar Z. pudrición sonora, rotar Z. Si configuro este archivo y sobre mi cursor en profundidad, puedes ver el resultado Dibuja una línea en Zdaxs. Quiero decir medio de este elemento DV. Déjame mostrarte ejemplo y ver cómo funciona. Y se puede ver una foto. Si usa rotar x, dibuja una línea desde este punto hasta este punto. Usando este valor, puedes rotar tu elemento al revés o a la baja Si usa el valor de rotación Y, puede rotar el elemento, el lado del labio o el lado derecho. Si usas rotar el valor Z, déjame mostrarte cómo funciona. Espero que ahora te quede claro cómo gira ese trabajo de valor. Hablemos de nuestro último valor, que es rotar tres D. Al principio, veamos la demostración real. Si uso rotar tres D, podemos usar todo el valor de rotación a la vez. Esta línea es para la línea de rotación XXS, y esta es para YxSt una es nuestra línea y esta es para YxSt una es nuestra Ahora voy a girarlo en dirección S. Al mismo tiempo, voy a girarlo en dirección YxS esta línea es para dirección Xxs, al mismo tiempo, podemos girarla en dirección zxs Básicamente, se define la rotación de tres D. Al principio, voy a llamar al valor, rotar CD. Luego dentro del paréntesis, es necesario pasar cuatro parámetros totales, XX YxS Zaxs Puede especificar el acceso de rotación usando un número para los tres primeros argumentos Pero para el cuarto argumento, es necesario especificar el valor del ángulo. Para Xs, voy a pasar dos comas para YxS voy a pasar menos uno menos uno De igual manera, para Zaxs también voy a pasar menos uno. Pero en nuestro cuarto parámetro, necesitamos pasar el valor del ángulo, algunos para escribir 45 grados. Si configuro este archivo y Rober mycar en este deve lement, se puede ver el Este es el Reino Unido de rotar tres método D. Esto es para este tutorial. En nuestro próximo tutorial, voy a cubrir estos dos valores. Traduce Z y traduce tres D. Gracias por ver este video, estad atentos para nuestro próximo tutorial. 68. Tutorial de perspectiva de CSS: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender una nueva propiedad, que es CSS prospectiva. En nuestros tutoriales anteriores, ya nos enteramos de ello. Pero en este tutorial, lo vamos a utilizar de manera individual. Pero antes de comenzar la práctica, veamos algunos ejemplos. Aquí puedes ver este es el ejemplo de rotatis y este es también el ejemplo de los rotáticos Pero la diferencia es para este elemento, utilizamos prospectiva. Por eso es proporcionar tres D L. De igual manera, este es el ejemplo de rotación YXS Para nuestro primer ejemplo, no usamos prospectiva, pero para nuestro segundo ejemplo, usamos prospectiva. Por eso es proporcionar tres D L. Si usas prospectiva, puedes ver claramente la rotación, y si no usas prospectiva, no puedes entender la rotación. Tratemos de entenderlo con más detalles. Supongamos que está viendo una pantalla de proyector desde este punto. Se puede decir que la distancia y el ángulo de punto de vista se llaman prospectiva. Se verá más grande si miras más de cerca y si lo miras desde la distancia, se verá más pequeño. Déjame mostrarte la verdadera demostración. Supongamos que este es nuestro elemento div. Si lo miras de cerca, se verá más grande, y si lo miras desde la distancia, se verá más pequeño. A esto se le llama prospectivo. Se ve pequeña y grande a pesar de no ser redimensionada. Espero que ahora esté claro para usted, prospectivo viene con otra propiedad que es de origen prospectivo. Por defecto, viene con centro, pero puedes cambiar el prospecto donde quieras. Tratemos de entender con detalle el origen prospectivo. Supongamos que esta es tu habitación. Si lo miras desde la posición central, puedes ver todas las paredes y el piso con claridad. Este es tu piso superior, este es tu piso inferior. Esta es tu pared lateral derecha, y esta es tu pared lateral de labio, y esta es tu pared de fondo. Pero si miras tu habitación desde la esquina de la laptop, quiero decir desde esta esquina, entonces no puedes ver temprano la planta izquierda y la planta superior. Del mismo modo, si miras tu habitación desde esta posición significa posición superior, entonces no puedes ver el último piso temprano. Se puede ver el piso inferior, pared de fondo, la pared lateral derecha y la pared lateral izquierda porque su posición de origen prospectiva es superior. De igual manera, si miras tu habitación desde la esquina superior derecha, no puedes ver la pared derecha y además tu piso superior apenas es visible o no. Porque tu origen prospectivo es correcto y superior. Pero si miras tu habitación desde el lado derecho, por error, escribo palabra correcta en posición de ascensor. Si usa el origen prospectivo del lado derecho, entonces no puede ver la pared derecha correctamente. Se puede ver el fondo se puede ver el piso inferior, se puede ver el piso superior y también se puede ver la pared lateral del labio. Pero su pared lateral derecha no es visible. Si usas origen prospectivo inferior derecho, entonces tampoco puedes entender la pared correcta. Como puede ver, tampoco la pared derecha no es visible. Con eso, el piso inferior rara vez es visible. De igual manera, si miras tu habitación desde la posición inferior, entonces no puedes ver el piso inferior correctamente. Si miras tu habitación desde la esquina inferior del regazo, entonces no puedes ver el lap val. Además, no se puede ver completamente el piso inferior. Si usaste solo el origen prospectivo de regazo, entonces no puedes ver el labio al. Se puede ver a la derecha val, se puede ver fondo l, se puede ver planta baja, también se puede ver planta alta, pero no se puede ver labio al. Todos estos son valores de origen. Además, puedes usar el valor porcentual con eso. Con prospectiva, se puede cambiar el origen prospectivo. Comencemos la práctica y tratemos de entender cómo podemos usar la propiedad de origen prospectivo y prospectivo. Como pueden ver, lado a lado, abro mi visual studio coreor y mi navegador usando la extensión if server, y ya creo un documento TML llamado index dot Como puede ver, hay un elemento DB. Ahora quiero rotar este DvElement cuando obar mi cursor sobre Así que aquí voy a usar la propiedad transform, Entonces escriba transform. Transformar rotar, rotar X, y quiero girarlo hasta 50 grados en dirección Xxs Si configuro este archivo y Hobermkaza sobre este elemento profundo, se puede ver Como puede ver, gira nuestro elemento, pero no está claro porque no utilizamos ningún valor prospectivo. En nuestros tutoriales anteriores, usamos prospectiva como valor de transformación, pero ahora voy a usar propiedad prospectiva, y necesitamos usar esta propiedad prospectiva en nuestro continente base, no en el continuador hijo Aquí tenemos que empatar prospectiva. Voy a pasar Prospectiva 800 pixel. Si configuro este archivo y Hobermcur están en este de lement, ahora se puede ver En nuestros tutoriales anteriores, utilizamos la prospectiva como un valor de transformación. Solo hay que recordar prospectivo darle al elemento tres D look. También debe recordar si usa propiedad prospectiva individualmente, entonces necesita usarla en el contenedor padre, no en el contenedor hijo. Ahora cambiemos el valor prospectivo. Supongamos que voy a pasar 100. Como ya les dije antes, disminuir el valor del prospectivo hará que las cosas se vean más grandes. Si yo sobre mi cursor sobre este de lement, se puede ver la diferencia Ahora se ve más grande porque observamos muy de cerca este elemento. Por eso se ve más grande. De la manera opuesta, si aumentamos el valor prospectivo 1,200 pixel y luego establecemos este archivo y sobre mi cursor sobre este de lement, puedes ver el resultado Ahora se puede ver el objeto más pequeño. Porque sabemos que un objeto se ve pequeño cuando lo vemos desde la distancia. Como puede ver, ahora la distancia es de 1,200 píxeles. Por ahora, voy a escribir 800 píxeles prospectiva. Hablemos sobre el origen prospectivo y cómo funciona. Entonces al principio, voy a llamar a esta propiedad, que es origen prospectivo, origen prospectivo. Por defecto, centro de valor S y centro de valor YxS. Entonces tipo raíz, centro y centro aquí, centro centro. Si configuro este archivo y los autos Hobermi están en este desarrollo, como pueden ver, desde el punto central, gira nuestro elemento Como puede ver, no hay cambios porque esta es la posición central central. Al principio, voy a usar el valor. Origen prospectivo, derecho. Si configuro este archivo y los Obermicars están en este desarrollo, se puede ver el resultado Como puedes ver, nuestro elemento no se desborda desde el lado derecho porque ahora nuestra perspectiva es del lado derecho. Por eso no podemos ver el vel correcto. De igual manera, si usamos valor de elevación p y establecemos este archivo y bermca en este de elemento, ahora no puedes ver el lip vel como puedes ver, nuestro elemento no se desborda desde el lado del labio, sino que se desborda desde el lado derecho Si usamos alguna forma de cubo, entonces puedes entenderlo correctamente. Puedes probar todo el valor de origen uno por uno. No sólo eso, también se puede utilizar el valor porcentual. Vamos a aprender todo esto cuando vamos a trabajar con proyectos reales. Esto es para este tutorial. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 69. Tutorial de estilo de transformación de CSS: Hola chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender una nueva animación CSS relacionada con propiedades, y el nombre de la propiedad es transform style. Básicamente, este papeleo trabaja con Transform Property. Aprendamos más sobre ello. La propiedad de estilo de transformación especificó cómo se representan los elementos de estado en tres espacios D. Básicamente, esta propiedad viene con dos valor. Nuestro primer valorem es plano. Especificé que el elemento hijo no conservará sus tres posiciones D, este es el valor predeterminado. El valor principal e importante se conserva tres D. Especifica que los elementos secundarios conservarán su posición tres D. Básicamente, quiero decir, si usamos tres valores D conservados en el elemento padre, entonces nuestro elemento padre funciona como un objeto tres D. Déjame mostrarte el ejemplo. Aquí puedes ver que hemos animado un elemento hijo, como puedes ver, el elemento dV más pequeño que pasa por el elemento DV más grande. Como ustedes saben, dv más grande o elemento padre. Si usamos tres valores D conservados, entonces podemos realizar este tipo de tres efectos D. Si no usamos el valor de tres D preservado, déjame mostrarte. Ahora puedes ver que nuestro elemento padre no actúa como un elemento tres D, y nuestro elemento hijo no puede pasar por el elemento padre. Entonces esta es la jaula de uso de la propiedad de estilo transform. Déjame mostrarte otro ejemplo. Aquí puedes ver un paren Deb, y dentro del paren Deb, tenemos un niño profundo, y yo roto a nuestro hijo af 40 grados en YxS duction, por defecto, nuestro estilo pen transform Por eso nuestro padre Deep no actúa como un objeto de tres. Pero si usamos la propiedad de estilo de transformación y usamos preservar el valor de tres D, entonces nuestro fondo profundo actúa como un objeto de tres, y nuestro hijo en movimiento profundo pasa a través del elemento de fondo. Entonces, sin perder el tiempo, comencemos la práctica. Como pueden ver, lado a lado, abro mi Visual Studio Creator y mi navegador usando la extensión del servidor Lip, y ya creo un documento SML llamado index dot HTML Aquí puedes ver el total de dos elementos div, elemento padre y nuestro elemento hijo. Como puede ver, ya rotamos nuestro elemento hijo 50 grados en dirección Xxs, y ya uso propiedad prospectiva en nuestro elemento padre Digo valor prospectivo 800 pixel ahora quiero rotar el elemento DIV padre. Voy a usar la propiedad transform en nuestro contenedor padre. Transformar. Girar Y, y quiero girarlo 30 grados en dirección YX, 30 grados Si configuro este archivo, puedes ver el resultado. Sí, es rotar nuestro elemento, pero no proporcionó ningún bucle D tres porque no usamos ninguna propiedad de estilo de transformación, así que voy a usar propiedad transform style, Transform style. Por defecto, esta propiedad vino con valor plano, pero voy a usar tres valores D conservados. Si configuro este archivo, ahora puedes ver el resultado. Ahora puedes ver nuestro elemento hijo pasar por el elemento padre. Debe recordar que necesita usar esta propiedad en su contenedor padre, no en el contenedor hijo. Si enciendo mi barra de herramientas de desarrollador y selecciono este elemento, como puede ver, nuestro valor de transformar rotar X es de 50 grados. Oye, este es nuestro elemento hijo. Si aumento el ángulo de rotación, se puede ver la transformación. Si disminuyo el ángulo de rotación, también se puede ver la transformación. Rotemos el contenedor padre. Entonces voy a seleccionar contenedor padre, y voy a rotar este contenedor padre. Si giro el contenedor padre, se puede ver la mirada de tres D. Ahora puedes ver claramente nuestro elemento hijo pasar por el elemento padre. Esta es la jaula de uso de la propiedad de estilo de transformación. Ahora, cambiemos el origen transformador de nuestro elemento hijo. Entonces escribe, transforma origen, y yo soy tipo bottom. Si configuro este archivo, ahora puedes ver el resultado. Desde abajo, gira nuestro elemento hijo 50 grados. Déjeme mostrarle con claridad. Si aumento el valor de rotación o elemento padre, se puede ver claramente. Como se puede ver, desde la parte inferior , gira nuestro elemento. Esto es para este tutorial. Espero que ahora entiendas cuál es el uso de transformar la propiedad del estilo. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 70. Tutorial de visibilidad de backface de CSS: Hola, chicos. Bienvenida de nuevo. Una vez más, vengo con un nuevo tutorial y en este tutorial, vas a aprender una nueva propiedad, que es la visibilidad de backface. Es necesario utilizar esta propiedad con transformar la propiedad. Antes de comenzar la práctica, intentemos entender qué es la visibilidad de backface. La propiedad de visibilidad de cara posterior define si la cara posterior de un elemento debe ser visible o no cuando se enfrenta al usuario Ahora la pregunta es, ¿qué es backface? La cara posterior de un elemento es una imagen especular de la cara frontal que se muestra Supongamos que dentro de este elemento, escribes hola mundo. Si lo giro 180 grados, entonces se puede ver la cara posterior de un elemento Como ya sabéis, es reflejo de tu elemento. Como se puede ver la reflexión del texto. Esta propiedad es útil cuando se gira un elemento. Te permite elegir si el usuario debe ver la cara posterior o no Supongamos que no quieres mostrar la cara posterior de un elemento Usando esta propiedad, puedes controlarla. Y nuestra propiedad de visibilidad de backface viene con dos valores, visible y oculto Déjenme explicarlo con objeto tres D. Como puedes ver en tu pantalla, aquí tienes un cubo de tres D. Si usas valor oculto, entonces no puedes ver la parte opuesta de este cubo. Pero si usas valor visible, entonces puedes ver la otra parte a través de este cubo. Esta es la principal diferencia de estos dos valores. Déjame mostrarte otro ejemplo. Como puedes ver en tu pantalla, hay dos elementos div, y yo uso transform property, ambos de este elemento. Como puede ver, utilizamos el valor de rotación Y. Si hober mi cursor en nuestro primer elemento div, puedes ver, puedes ver la cara posterior de nuestro primer Como pueden ver, reflejan nuestro texto, pero no quiero mostrar la cara posterior cuando rote nuestro elemento En este elemento, utilizamos la propiedad de visibilidad backfat. Si hober mi cursor, ahora no se puede ver la cara posterior de este elemento Porque usamos valor oculto para éste. Empecemos lo práctico y tratemos de entender cómo funciona su trabajo. Como pueden ver, lado a lado, abro mi coor visual studio y mi navegador usando la extensión Lifesaver, y ya creo un documento TML llamado Como puedes ver en mi navegador, tenemos un total de dos elementos Dev, continuer y box Como te dije antes, si quieres usar la propiedad de visibilidad de backface, entonces también necesitas usar transform property Dentro del selector de Hober, voy a escribir transform Transformar, rotar, Y, y quiero girarlo 180 grados. Si configuro este archivo y las curvas de Hoberm están en este delement, puede ver que gira También se puede ver el texto espejo. Ahora voy a usar nuestra nueva propiedad, que es la visibilidad de backface. Voy a teclear visibilidad de fase trasera. Primero, voy a usar el valor visible. Si configuro este archivo y Obermi curs están en este de lement, se puede ver Pero si uso valor oculto, déjame mostrarte y establecer este archivo y sobre mica ahí en este elemento deve, No no puede ver la cara posterior de este Este es el caso de uso de la propiedad de visibilidad de la cara posterior. Esto es para este tutorial. partir del siguiente tutorial, vamos a aprender animaciones CSS. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 71. Tutorial de animación de CSS Parte1: Hola, chicos. Me alegro de verte de vuelta. Entonces, finalmente, vamos a aprender animación CSS. Puedes animar cualquier elemento SML usando animación CSS. Veamos un ejemplo. Como puedes ver, hay un elemento DV. Se está animando automáticamente sin pasar el mouse. Es convertir rectángulo círculo y luego es convertir círculo en rectángulo. Este es el pequeño ejemplo de animación. Es trabajo de forma automática. No necesitas ningún efecto de hover. Veamos qué tipo de propiedad tenemos en CSS para crear esta animación. Como puedes ver, tenemos un total nueve propiedades relacionadas con la animación CSS. Nuestro primer nombre de propiedad es nombre de animación. Usando esta propiedad, puede definir un nombre para la animación. De ahí viene la duración de la animación. Usando esta propiedad, puede definir cuánto tiempo desea ejecutar esta animación. De ahí viene la propiedad de retardo de animación. Se especifica un retraso para el inicio de una animación. De ahí viene el recuento de iteraciones de animación. Se especifica el número de veces que se debe reproducir una animación nuestra siguiente propiedad es la dirección de la animación. Se especificó si una animación debe ser reproducida hacia adelante, hacia atrás o en ciclos alternos. Y luego viene la función de sincronización de animación. Se especifica la curva de velocidad de la animación. Nuestra siguiente propiedad es el modo de película de animación. Se especifica un estilo para el elemento cuando la animación no se está reproduciendo. Vamos a conocerlo en nuestros últimos tutoriales. Nuestra siguiente propiedad es el estado de fase de animación. Se especifica si la animación se está ejecutando o pausa, y nuestra última propiedad es la animación. Esta es la propiedad taquigráfica. Puede usar todos estos valores de propiedades a la vez usando esta propiedad. Vamos a aprender todas estas propiedades una por una. Ahora, para usar todas estas propiedades de animación, necesita crear un selector, y el nombre del selector es Add keyframes Al principio, debe escribir fotogramas clave de Aderate y luego debe proporcionar cualquier nombre de animación Solo hay que recordar, no proporcione ningún espacio en este nombre. Puedes proporcionar guión, puedes usar guión bajo o estuche de camello también, pero no proporcionar ningún espacio Luego, dentro de los cálices, debes proporcionar dos palabras clave diferentes de y dos Es media desde donde quieres comenzar la animación y usando dos palabras clave, necesitas proporcionar el punto final de la animación. Dentro de los cálices, puedes usar cualquier propiedad CSS. Supongamos que desea cambiar el ancho del contenedor. Sí, puedes. Hay otro método que puedes usarlo. Se puede utilizar el porcentaje para el mismo trabajo. Puede reemplazar la posición inicial con 0% y de manera similar, puede reemplazar la posición final con 100%. Ambas declaraciones van a devolver el mismo resultado. Pero aquí puedes usar cualquier valor porcentual 0-100. Supongamos que quieres cambiar el color en el punto de inicio de la animación y también quieres cambiar el color al 20%. Puede proporcionar múltiples valores si usa este método. Entonces, sin perder el tiempo, estudiemos prácticas y veamos cómo funciona. Como pueden ver, lado a lado, abro mi creador de estudio isalts y mi navegador usando t extensión de servidor Como pueden ver ya creé un documento TML llamado index dot TML Como puedes ver, hay un elemento profundo y el nombre de la clase es box. Y ya estilo este de elemento con 250 pixel, altura 200 pixel, y ademas alineo este elemento profundo medio de esta pagina web. Ahora quiero animar esta profundidad. Quiero transformar este rectángulo en un círculo. Con eso, también quiero cambiar el color sin usar su selector. Voy a usar diferentes propiedades de animación CSS. Al principio, voy a crear Selector de fotogramas clave a la velocidad Fotograma clave Después del selector de fotogramas clave necesitamos proporcionar un nombre de animación Para nuestra animación, voy a tomar ejemplo. Entonces dentro de lo surge, necesitamos usar dos palabras clave de y dos, de, y luego voy a usar dos. Desde el punto de partida, quiero decir radio de frontera cero, algún tiempo propiedad de radio de borde. Radio de borde 0%. Al final de esta animación, quiero cambiar el radio del borde, 50%. Radio de borde 50%. Si configuro este archivo, no va a ejecutar la animación porque necesitamos vincular este nombre de animación con esta caja. Para ello, voy a tomar una propiedad, que es nombre de animación nombre de animación, nuestro nombre de animación es ejemplo. Usando este método, puedes usar este fotograma clave varias veces y no necesitas crear esta animación una y otra vez Ahora, con el nombre de la animación, también, necesitamos declarar el tiempo de duración de la animación. Voy a llamar a otra propiedad, que es la duración de la animación. Y por 2 segundos, quiero ejecutar esta animación. Aquí se puede utilizar el valor de segundo o milisegundo también. Entonces, si configuro esta página, puedes ver la animación aquí, pero ejecuta nuestra animación solo por una vez y se necesitan dos segundos para completar esta animación. Y ahora decido ejecutar esta animación por cinco veces. Para ello, necesitamos usar otra propiedad, que es el recuento de iteraciones de animación Entonces t animación, recuento de iteraciones, y quiero ejecutarlo cinco veces Por eso me paso cinco aquí. Entonces si configuro este archivo, como pueden ver, se ejecuta nuestra animación cinco veces. Tres, cuatro y cinco. Después de completar el término, deja de ejecutar nuestra animación. Y si quieres ejecutar esta animación para siempre, necesitas pasar aquí un valor infinito, algo t infinito. Si configuro este archivo, como pueden ver, ahora es ejecutar nuestra animación para siempre. No quiero ejecutar esta animación para siempre, así que quiero pasar tres valores aquí. Quiero ejecutarlo tres veces. Ahora, como puedes ver, después de completar la animación, vuelve a la posición anterior en un solo paso. Cuando regresa de valor final a valor inicial, como puede ver, no hay transición. En un solo paso, completa la animación. Para proporcionar la base suave, necesitamos usar otra propiedad, que es dirección de animación, dirección de animación St. Y voy a usar valor alterno. Si configuro este archivo, ahora puedes ver la suavidad cuando vuelve a la posición normal Si lo ejecuto tiempo infinito, se puede ver la suavidad. Como puede ver, cuando vuelve a la posición de inicio, hay una suavidad. Ahora, hablemos de la propiedad de dirección de animación. Básicamente, la dirección de la animación vino con cuatro valores, inversa inversa alterna inversa normal. Normal es el valor predeterminado. La animación se reproduce de forma normal. Trabajo hacia adelante. De la manera opuesta, los revólveres funcionan hacia atrás. Si usa el valor inverso, la animación se reproduce en dirección inversa. Luego viene el valor alterno. Si usas un valor alternativo, al principio, jugó hacia adelante, luego es jugar hacia atrás. Nuestro último valor es inverso alternativo. En ese caso, la animación se reproduce primero hacia atrás y luego hacia adelante. Ya aprendiste sobre el valor alterno. Se mueve de la posición de inicio a la posición final, luego de vuelta a la posición a la posición de inicio. Nuestro siguiente valor se invierte. Déjame mostrarte. Si utilizo este valor y luego configuro este archivo, como puedes ver, la animación está comenzando desde círculo y luego convertirlo a un cuadrado. Hablemos de nuestro último valor, que es el inverso alternativo. Si utilizo un valor inverso alternativo y luego configuro este archivo, como puede ver, la animación se reproduce primero hacia atrás, luego hacia adelante. Entonces este es el caso de uso de la propiedad de dirección de animación. Por ahora, voy a usar valor alterno. Si configuro este archivo, ya lo aprendes. Esto es para este tutorial. En el siguiente tutorial, te voy a mostrar los diferentes métodos de fotogramas clave Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 72. Tutorial de animación de CSS Parte2: Me alegro de verles chicos. En este tutorial, te voy a mostrar el segundo método para ejecutar la animación. En nuestro tutorial anterior, usamos de y dos palabras clave. Pero en este tutorial, vamos a utilizar el valor porcentual. Sin perder el tiempo, volvamos al codiador de Visual Studio Como pueden ver, lado a lado, abro mi coreador de Visual Studio y mi navegador usando la extensión Lifesaver, y abro mi documento anterior Como saben, de es nuestra posición de partida. Voy a reprimir de con 0%, 0%. Conoces dos palabras clave o posición final. Voy a reprimir dos palabras clave con el 100%. Entonces si guardo este archivo, como pueden ver, es o de la misma manera. Y ahora quiero cambiar el color de fondo en la posición final, así que voy a usar propiedad de fondo, fondo, nuestro color de fondo es rojo. Si configuro este archivo, como pueden ver, con la transformación de forma, también se ha cambiado el color. Como puede ver, para esta animación, utilizamos un total de cuatro propiedades de animación CSS diferentes, el nombre de la animación, la duración de la animación, recuento de iteraciones de animación y la dirección de la animación Ahora les voy a mostrar cómo podemos usar 410 de esta animación. Quiero decir, ¿cómo podemos usar este valor de cuatro propiedades en una sola línea? Para estos, necesitamos llamar a otra propiedad de animación, que es la animación. Animación. Al principio, tenemos que pasar el nombre de la animación. Como puedes ver, nuestro nombre de animación es ejemplo. Entonces para copiar el nombre y pegarlo aquí. Entonces tenemos que pasar el tiempo de duración de la animación. Como puedes ver, nuestro tiempo de duración de animación es de dos segundos, soun para pasar a segundo Recuerda, necesitas seguir esta secuencia, y luego voy a pasar el valor de recuento de iteraciones, que es infinito A continuación, voy a pasar el valor de dirección de animación , que es alterno. Por ahora, estas cuatro líneas extra no son necesarias. Voy a comentar estas líneas y voy a establecer este archivo. Como puedes ver, ha funcionado perfectamente. Funciona de la misma manera. Ahora voy a hablar de otra nueva propiedad, que es retardo de animación. Para ello, voy a comentar esta línea y descommen estas Después de la propiedad de duración, voy a escribir delay de animación. Aquí voy a pasar tres es, gana tres segundos. También puede tomar valor de milisegundos. Es malo si reprimo este archivo, nuestra animación será protagonizada hasta tres segundos Déjame mostrarte algunos para establecer este archivo. Como puedes ver, después de tres segundos , inicia nuestra animación. Entonces este es el caso de uso de la propiedad de retraso. Por fin, voy a usar otra propiedad, que es la función de sincronización de animación. Pero antes, te voy a mostrar los valores relacionados con la función de sincronización de animación CSS. Básicamente, tenemos que ejecutar seis valor es lineal está adentro está fuera, está adentro hacia fuera Q weg bezier Si usa el valor E, se especifica una animación con inicio lento, luego primero, luego termina lentamente. Este es el valor predeterminado. Nuestro siguiente valor es lineal. Especifico una animación con la misma velocidad de principio a fin. Entonces viene nuestro tercer valor, que está en, especificar animación con un inicio lento. De la manera opuesta, tenemos otro valor. Es out, especificar una animación con un final lento. Nuestro quinto valor es e in out, especificamos una animación con un inicio y un final lentos y nuestro último valor es Bzier cúbico Puedes definir tus propios valores en una función de sier cúbico. Déjame mostrarte el verdadero ejemplo de cómo funcionan. Aquí puedes ver los elementos con diferentes valores de función de temporización. Lineal es es adentro, afuera y e afuera. Como puede ver, utilizamos el tiempo de duración de anuación para todo esto Pero como se puede ver, el trabajo de manera diferente. Su velocidad no es la misma. Como puede ver, lineal mantener la misma velocidad de principio a fin, luego llegar nuestro siguiente valor, que es la facilidad. Como puedes ver, comenzó con lento, luego primero y termina lentamente. Y luego vienen ein. Se especificó la animación con inicio lento. Y luego viene IO. Se especifica la animación con final lento y nuestra última vil es EEO Se especifica animación con inicio lento y final lento. Entonces esta es la diferencia entre todos los valores de la función de temporización. Entonces déjame mostrarte cómo podemos usarlo prácticamente. Así que voy a llamar a nuestro nombre de propiedad que es la función de sincronización de animación. Animación, función de temporización. Al principio, voy a usar es valor, convocar a escribir es Si configuro este archivo, como pueden ver, empieza con lento luego primero y termina lentamente. Y este es el valor por defecto. Voy a usar nuestro siguiente valor, que es lineal. Invocar tipo, lineal. Si configuro este archivo, como pueden ver, mantiene la misma velocidad. No se puede entender la diferencia en este ejemplo. Puedes entenderlo correctamente cuando iniciemos nuestro ejercicio y proyecto. Entonces voy a usar nuestro otro valor, que es EN. Si configuro este archivo, como pueden ver, se especifica animación con inicio lento. Nuestros próximos valores están fuera. El tipo de suma está fuera. Si configuro este archivo, como se puede ver, se especifica animación con final lento. Nuestros valores de lujuria están adentro hacia fuera, suma a tipo está adentro hacia fuera. Si configuro este archivo, como pueden ver, se especifica la animación con inicio lento y final lento. Ahora voy a usar nuestro valor de lujuria que es cúbico Bzier. Voy a escribir Bzier cúbico aquí necesitas pasar valor total cuatro, no más de cuatro valor, no menos de cuatro valor, no menos de cuatro Al principio, voy a tomar 0.1 valor y luego voy a tomar 0.4 valor. A continuación, voy a tomar 1.0 de valor. Entonces vienen 0.1 valor. Se va a cubrir la animación con cuatro pasos. Para nuestro primer paso, va a tomar 0.1 segundos. Para nuestro segundo paso, va a tomar 0.4 segundos, y para nuestro tercer paso, va a tomar 1 segundo, y para nuestro último paso, va a tomar 0.1 segundos una vez más. Entonces, si configuro este archivo, puedes ver el resultado. Después de tres segundos, se puede ver el patrón de animación. Con este valor, podrás completar tu animación en cuatro pasos. Como puedes usar todo el paso como taquigrafía. Para ello, es necesario utilizar este valor en tercera posición. Primero, debe pasar el nombre de la animación luego el tiempo de duración, luego la función de temporización, luego el valor de retardo, luego el recuento de iteraciones y luego la dirección de la animación. No te preocupes por ello. Vamos a aprender todo esto cuando iniciemos nuestros proyectos. Ahora voy a cambiar de color al 50% de la animación. Quiero decir 50% posición de animación, 50% dentro de la Caris es, quiero cambiar el color de fondo Fondo Azul. Si configuro este archivo, como pueden ver, en la posición del 50% de animación, cambió el color. Primero, convierte el color chocolate en color azul, luego convierte el color azul en color rojo. Podemos usar tanto valor como quieras aquí. Entonces esto es todo para este tutorial. En nuestro próximo tutorial, vamos a aprender qué es modo película de animación y qué es el modo de animación enyesado Así que no te pierdas nuestro próximo video. Así que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 73. Tutorial de modo de relleno de animación CSS: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender una nueva animación CSS relacionada con propiedades y nuestro nombre de propiedad es CSS Animation Fl Mode. Pero ahora la pregunta es, ¿qué es el modo de película de animación? La propiedad de modo película de animación especifica un estilo para el elemento cuando la animación no se está reproduciendo. Podemos usarlo antes de que comience. También podemos usarlo después de él. De lo contrario, podemos usarlo tanto la condición. Al mismo tiempo, podemos usarlo antes la animación y subir la animación. Ahora, hablemos de los valores relacionados con el modo película de animación. Esta propiedad viene con valor total de cuatro, ninguno, adelante, atrás, y ambos. Ninguno es el valor predeterminado. La animación no aplicará ningún estilo al elemento antes o después de que se ejecute. Nuestro siguiente valor es adelante. El elemento conservará los valores de estilo establecidos por el último fotograma clave Básicamente, depende de la dirección de la animación y el recuento de iteraciones de animación Nuestro siguiente valor es al revés. El elemento obtendrá los valores de estilo que establece el primer fotograma clave y los conservará durante el periodo de retardo de animación De lo contrario, podemos usar nuestro último valor, que es ambos. La animación seguirá las reglas tanto para adelante como para atrás, extendiendo las propiedades de la animación en ambas direcciones. Vamos a utilizar este valor de cuatro modos de película en este tutorial. Empecemos la práctica y veamos cómo funciona. Como pueden ver lado a lado, abro mi coeator de estudio de resultados y mi navegador usando la extensión Lifesaver, y ya creé el documento TML llamado index dot STML También puedes ver un Y configuré 150 píxeles de ancho y 100 píxeles de alto en este elemento deve Ahora voy a animar este elemento profundo y también le voy a poner color diferente a este elemento Voy a aumentar el ancho de este elemento. Y como pueden ver, ya creo el fotograma clave para esta animación, y nuestro nombre de fotograma clave es ejemplo Dentro de los cliorss voy a atar. Al principio, voy a tomar 0%. Dentro de los cliorss al principio, voy a cambiar el color de fondo, Voy a poner color amarillo. Como voy a aumentar el ancho del ítem, suma tipo width W, como pueden ver, nuestro ancho anterior es de 150 pixel, y ahora voy a poner 200 pixel. También voy a duplicar esta línea tres veces. 0%, luego vienen 50% por fin, 100%. En el 50% de la animación, voy a aumentar el ancho a 50 píxeles. Y también, voy a cambiar el color de fondo. Color de fondo rojo. Y en 100%, voy a decir ítem con 300 píxeles, y también voy a cambiar el color. Esta vez, voy a usar el color azul. Entonces, básicamente, creamos un fotograma clave de animación simple. Usemos este fotograma clave en esta caja. Para el primero, voy a tomar propiedad de animación, animación. Nuestro nombre de animación es ejemplo. Entonces necesitamos pasar el tiempo de duración de la animación, y quiero completar esta animación en 2 segundos. A continuación, voy a pasar el valor de retardo de animación, y quiero retrasar esta animación por tres segundos. Si configuro este archivo, como pueden ver, hasta tres segundos ejecuta nuestra animación. Y después de completar la animación, vuelve a su posición inicial. Ahora voy a usar la propiedad de modo película de animación. Podemos usarlo después del valor de duración, lo contrario, podemos llamar al nombre de la propiedad. Voy a llamar al nombre de la propiedad Modo de campo Animación. Como ustedes saben, esta propiedad venía con cuatro valores. Al principio, voy a usar el valor hacia atrás hacia atrás. Si uso hacia atrás, es saltar directamente al 0% de esta animación. Permítanme aumentar el tiempo de retardo de animación. Voy a usar cinco segundos para este ejemplo. Si configuro este archivo, como pueden ver, ya saltó a la persona cero. Comienza desde la persona cero, luego viene el 50%, luego viene el 100%. Después de completar la animación, vuelve a la posición normal. Déjame mostrarte una vez más. Si configuro este archivo, inicia la animación desde la persona cero y luego se demora 5 segundos y luego ejecuta nuestra animación. Como sabéis, si usamos el valor hacia atrás, el elemento obtendrá los valores de estilo que establece el primer Crefon y conservará esto durante el periodo de retardo de animación Vamos a saltar a nuestro siguiente valor, que es hacia adelante. Alguien a quien empatar aquí. Si usamos este valor, simplemente es ejecutar nuestra animación, pero al final, no vuelve al estado inicial. Déjame mostrarte. Si configuro este archivo, como pueden ver, después de 5 segundos, va a ejecutar nuestra animación. Como se puede ver no volver al estado inicial. Como saben, el elemento conservará estos valores de mosaico que establece el fotograma clave lust Como puedes ver, nuestro iframe lust es 100% y su color de fondo es azul A en esa posición, establecemos elemento con 300 píxeles. Vamos a saltar al siguiente valor, que es ambos. Si utilizo este valor, ambos, va a comenzar nuestra animación desde 0% y después de completar la animación, se pegó en la posición cien por ciento. Si configuro este archivo, como pueden ver, se inicia desde el 0%. Después después de cinco segundos de retraso , inicia nuestra animación. Como se puede ver después de completar la animación, no se vuelve al estado inicial de este elemento. Si usamos este valor, seguirá la regla tanto para adelante como para atrás. Este es el caso de uso de ambos inmuebles. Ahora, hablemos de nuestro último valor, que no es ninguno. Algunos de tipo, ninguno aquí. Si configuro este archivo, como pueden ver, aquí no va a pasar nada. Después de cinco segundos, simplemente ejecutamos nuestra animación. Entonces este es el caso us de no valor. Esto es para este tutorial. Espero que les guste este tutorial. Ahora te queda claro qué es el modo película de animación. Gracias por ver este video. Estén atentos para nuestro próximo Tutorial. 74. Tutorial de modo de estado de animación de CSS: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender una nueva animación CSS relacionada con propiedades, y nuestro nombre de propiedad es Animation Place State Moon. Ahora la pregunta es, ¿qué es el estado del lugar de animación? La propiedad de estado de lugar de animación especifica si la animación se está ejecutando o pausa. Puedes ejecutar tu animación, de lo contrario, puedes pausar tu animación con esta propiedad. Básicamente, esta propiedad viene con dos valores, pausa y funcionamiento. Si usa el valor de pausa, se especifica que la animación es pausa, y ejecutar es el valor predeterminado de esta animación. Sin perder el tiempo, solo estudia práctico y trata de entender qué es el estado de juego de animación. Como pueden ver, lado a lado, abro mi visual studio coreor y mi navegador usando la extensión de servidor p, y abro mi documento TML anterior Ahora quiero detener mi animación cuando abro mi Kara sobre este elemento profundo. Para eso, necesitamos usar la animación place state property. Como puedes ver, retrasamos nuestra animación por 5 segundos. Si configuro este archivo, se puede ver después de cinco segundos, se ejecuta nuestra animación. Ahora quiero detener esta animación mientras se está ejecutando. Para detener la animación, voy a Ella mi cursor. Al principio, voy a crear un selector de hover para esta caja Voy a escribir punto, caja, cursor dentro del Cariss, voy a usar nuestro estado de reproducción de animación de propiedad Al principio, voy a usar el valor de pausa, así que voy a escribir pausa aquí. Si configuro este archivo, como pueden ver, después de cinco segundos, va a ejecutar nuestra animación. Pero voy a ho mi cursor sobre este elemento. Como puedes ver, detiene nuestra animación. No ejecuto la animación por completo. Yo me quito el cursor, como se puede ver completa la animación. Déjame mostrarte el ejemplo una vez más. Pero antes, voy a reducir el tiempo de demora. 1 segundo. Si configuro este archivo, como pueden ver, después de una vez más, se ejecutó nuestra animación. Pero cuando hober mi cursor sobre este elemento, detengo la animación Pero ahora voy a quitar el cursor de este elemento. Como puedes ver, ahora está completa la animación. Luego volvamos al estado normal de este elemento. Pero ahora quiero ejecutar esta animación cuando hora mi cursor sobre este elemento. Para ello, voy a copiar esta propiedad. Y pegarlo aquí. Por defecto, quiero pausar esta animación. Pero cuando ober mi cuidador en este elemento, quiero ejecutar esta animación Entonces en nuestro selector de Hober, voy a escribir animación play State running Si configuro este archivo, como pueden ver, una vez más, la animación no se está ejecutando, pero si obero mi cara sobre este elemento, como pueden ver, arriba una vez más, se ejecutó nuestra animación Este es el caso de uso de la animación PlayTatepperty. Espero que ahora te quede claro cómo funciona su trabajo. Gracias por ver este video, Estén atentos a nuestro próximo tutorial. 75. Tutorial de ajuste de objetos de CSS: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender otra propiedad CSS, que es el ajuste a objetos. Esta propiedad CSS object fit se utiliza para especificar cómo debe cambiar el tamaño de una imagen o un video para que se ajuste a su contenedor Esta propiedad le dice al contenedor que llene el contenedor de varias maneras, como preservar esa proporción de espera o estire y ocupe tanto espacio como sea posible. Esta propiedad viene con un total de cinco valor. Siente el contin, la cubierta, la monja y la escala hacia abajo. Empecemos la práctica de cómo podemos aplicar estos valores. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Lifesaver, y ya creé un documento TML llamado index Entonces como puedes ver, dentro de esta etiqueta body, tenemos una imagen y la resolución predeterminada de imagen es de 600 por 450 píxeles. Pero aquí, voy a asignar altura y peso pescados a esta imagen Entonces dentro de la etiqueta de la cabeza, voy a usar etiqueta de estilo. Estilo y dentro de la etiqueta de estilo, voy a seleccionar la imagen IMG Entonces dentro del clivuss voy a poner con altura. Ancho, voy a asignar 200 píxeles. Además, voy a asignar altura, altura, 300 píxeles. Si configuro esta imagen, como pueden ver, la imagen se aprieta para que se ajuste al contenedor, y el tamaño del contenedor de la imagen es de 200 y 300 píxeles. Ahora el problema es que la relación de aspecto original está completamente destruida y aquí dentro, entra la propiedad del objeto. Voy a aplicar la propiedad objeto. Voy a escribir object fit y voy a comenzar con cover value cover. Si configuro este archivo, puedes ver el resultado. Si usamos la cubierta de alimentación de objetos, la imagen mantiene su relación de espera original, y de acuerdo con la relación exacta del objeto, siente la dimensión dada. Como puede ver, nuestro ancho es 200 píxeles y la altura es de 300 píxeles. Entonces según la dimensión, sin cambiar la relación de aspecto, se ajusta a la imagen. Ahora nuestra imagen no se ve apretada. Ahora, hablemos del siguiente valor, que es contener. Voy a duplicar esta línea y comentar la línea anterior. Y esta vez, voy a usar contener valor, contener. Después de establecer este archivo, se puede ver el resultado. Si usa ajuste a objetos, contenga la imagen, mantenga su relación de aspecto, pero se redimensionó para que se ajuste dentro de la dimensión dada Y como puede ver, nuestra dimensión es de 200 píxeles y 300 píxeles. Entonces ahora se puede ver que no cambia la relación de aspecto de esta imagen, sino que encaja en la dimensión dada. Y si usas valor de campo sonido duplica esta línea y comentas o previas una, como te dije, campo es el valor predeterminado. Rellene, y luego establezca este archivo, podrá ver el resultado. Ahora apretó la imagen. Además, si utilizo no valor. De nuevo, voy a duplicar esta línea y comentar anterior y colocar llenar con ninguna y establecer este archivo. Ahora se puede ver que no aprieta la imagen. Y el último valor que voy a aplicar es reducido. Entonces voy a duplicar esta línea y comentar la anterior y reemplazar ninguna con escala descendente. En la parte superior establece este archivo, se puede ver el resultado. Es bastante similar con valor de contenido, de lo contrario, valor de monja Si usa la alimentación de objetos, reduzca la escala, las imágenes se reducen a la versión más pequeña de ninguno o contenido. Entonces así es como funcionan las propiedades de ajuste a objetos. Ahora, permítame mostrarle el ejemplo real por qué necesitamos usar el valor de alimentación de objetos. Entonces como puedes ver en este ejemplo, tenemos un total de dos imágenes una al lado de la otra, y como puedes ver, establecemos con 100% y establecemos una altura de 400 píxeles. La altura del contenedor es de 400 píxeles y el ancho es del 100%, en nuestras imágenes, como puedes ver, usamos estilo en línea. Utilizamos flotación, elevación y juego con 50% y altura 100%. Utilizamos el mismo valor CSS para nuestra siguiente imagen. Ahora el problema es, si trato cambiar el tamaño de la ventana del navegador, supongamos que quiero reducir el ancho de la ventana del navegador Ahora se puede ver que apretó ambas imágenes. Entonces es destruir la relación de aspecto real de estas imágenes. Pero si utilizo el ajuste de objeto de propiedad Supongamos Ajuste de objeto, cubrir También voy a usar en nuestra imagen a Objeto encajar, cubrir, y luego establecer este archivo. Después de configurar este archivo, como se puede ver después de recargar este navegador, se resuelve el problema Como te dije, el valor de la portada mantiene relación de aspecto de la resolución de la imagen tal como está. También, siente la imagen en una dimensión dada. Es por eso que necesitamos usar la propiedad object fit. Espero que ahora te quede claro. Gracias por ver este video. Estén atentos para el siguiente tutorial. 76. Tutorial de selección de usuario de CSS: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con otra tesis relacionada con el tutorial. Y en este tutorial, vas a aprender una nueva propiedad, que es el usuario select. Básicamente, el usuario selecciona el trabajo como securoty. No permito que el usuario copie datos de su sitio web, y esta es la razón principal por la que usamos user select. Esta propiedad viene con cuatro valor, auto, ninguno, texto, y todo. Auto es el valor predeterminado. Entonces 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 Lifesaver, y ya creo un documento HTML, llamado index dot Entonces, como puedes ver en nuestra etiqueta corporal, tenemos una caja de clase de etiqueta profunda. Y en este elemento dip, tenemos algún texto ficticio Ahora bien, si trato de copiar esto, lo contrario, seleccione este texto ficticio, sí, podemos Pero no quiero dar permiso usuario para copiar el texto. De lo contrario, seleccione el texto. Por lo tanto, necesitamos usar la propiedad de selección de usuario. Así que para escribir usuario seleccione. Como saben, el valor predeterminado es auto. Si utilizo valor automático y el conjunto este archivo y trato de seleccionar este texto, sí, podemos seleccionar el texto. Pero si uso non value, algunos para reemplazar auto por none, y luego configuro este archivo, esta vez si trato de copiar el texto, de lo contrario , seleccionamos el texto, no podemos porque esta vez no va a permitir copiar o seleccionar porque aquí usamos user select property, none. Pero podemos seleccionar el texto del encabezado, pero no podemos seleccionar el texto que está dentro de este desarrollo. El siguiente voy a usar, que es texto. Es bastante similar con el valor automático. Si utilizo este valor, como pueden ver, ahora podemos seleccionar el texto. A continuación tenemos otro valor, que es, así que voy a sustituir el texto por A. Si configuro este archivo, va a permitir copiar, lo contrario seleccionar el texto. Solo tenemos que dar click una vez en nuestra sección de texto. Después de un clic, va a seleccionar automáticamente todo el contenido. Este es el uso del valor. En lugar de hacer clic, permitió seleccionar el texto en un solo clic. Esta es la principal diferencia entre todos los valores. Esto es para este tutorial. Gracias por ver este video, Estén atentos para el siguiente tutorial. 77. Pausa de decoración de cajas de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vamos a aprender una nueva propiedad, que es la ruptura de decoración de Bob. Se utiliza para la decoración de texto y estilo de texto, y ha venido con un valor total de dos, rebanada y arado Ahora, comencemos la práctica y veamos cómo podemos usar el valor y crear diferentes efectos. 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 creo un nombre de documento TML en Exotst Entonces, en nuestra etiqueta corporal, tenemos una etiqueta de encabezado y una etiqueta span, y estilo la etiqueta span, el color de fondo de Hearst y configuro el tamaño de fuente 21 píxeles con esa es la altura de la línea 32 píxeles Y ahora voy a agregar alguna etiqueta break dentro de esta etiqueta span. Entonces en esta frase, aquí voy a usar alguna etiqueta de break BR BR. BR. BR break and break tag, y voy a agregar otra etiqueta de un break, BR. Voy a tomar un sorbo de este archivo. Arriba configuras este archivo, puedes ver el resultado. Rompe la oración en múltiples líneas. Y ahora voy a agregar frontera a esta etiqueta span. Borde a píxel, y quiero borde sólido. Con eso, nuestro color de borde es el negro. Si configuro este archivo, se puede ver la resina. Ahora puedes notar que puedes ver o bordear, comenzar desde esta posición y terminarlo en esa posición. Además, voy a agregar radio de borde. Radio de borde de cinco píxeles. Después de configurar este archivo, se puede ver el radio del borde, pero quiero el radio del borde en cada línea. No lo quiero en la línea de inicio y final. Lo quiero en todas las líneas. Para resolver el problema a la hora de utilizar la rotura de degradación de la caja. Así hematita, caja, decoración, rotura. Y como te dije, viene con un total de dos valor, slice y clone. Slice es el valor predeterminado, por lo que su uso Clone value. Después de configurar este archivo, como pueden ver, no está funcionando porque aquí uso el navegador Chrome. El navegador Chrome no es compatible con esta propiedad. Para usar la propiedad en un navegador Chrome, es necesario usar el prefijo. Así que vamos a duplicar la línea y usar prefijo. Web. Si configuro este archivo, esta vez se puede ver, ahora se agrega radio de botella en cada palabra. Ahora nos permite asignar relleno a cada sección. Entonces si paso padding y quiero agregar padding y quiero agregar relleno y quiero agregar diez píxeles padding desde cada dirección, y luego establecer este archivo, se puede ver el resultado. Aumentemos la altura de la línea para una mejor visibilidad, 50 píxeles. Hasta configurar este archivo, se puede ver el resultado. Esta característica sólo es posible por esta propiedad, caja de descanso decoración. Espero que ahora te quede claro. Gracias por ver este video. Estén atentos para el próximo Tutorial. 78. Tutorial de citas de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS. Y en este tutorial, vas a aprender otra nueva propiedad, que son los códigos. Esta propiedad no funciona con ninguna etiqueta TML. Para eso, necesitas usar una etiqueta especial, que es código, Q. Qtag significa etiqueta de cotización Empecemos lo práctico y veamos el ejemplo. Como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Live Server y ya creo un documento TML nombre índice punto HTML Como puede ver la etiqueta del cuerpo, tenemos una etiqueta Q utilizada como etiqueta de cotización. Por eso se puede ver la frase en esta cita. Básicamente, usando la propiedad COTS, podemos reemplazar la cotización con cualquier otro carácter. Supongamos que sin usar códigos quiero mostrar el signo del dólar. Voy a usar la propiedad Cotizaciones. Códigos, entonces aquí necesitamos usar Doble código pecado y dentro de los códigos dobles, voy a pasar signo de dólar. Esto es para iniciar seno. También, voy a pasar a otro personaje. Aquí voy a pasar y por ciento. Después de establecer este archivo, se puede ver el resultado. Ahora reemplaza códigos con signo de dólar y también reemplaza códigos con y seno de persona. Comienza con signo de dólar y termina con y signo de persona. Se puede sustituir la cotización por cualquier signo. Supongamos que si quieres usar menos que seno y mayor que seno, entonces este archivo, puedes ver el resultado. Si buscas en caracteres de comillas de Google, entonces te muestra varios sitios web que proporcionan diferentes tipos de cotización y puedes copiar la cotización y aplicarla aquí. Si abro el sitio web de Wikipedia, se pueden ver muchas comillas. Desde aquí, puede copiar el letrero de cotización. Supongamos que quiero usar este letrero de cotización, éste. Divertido copiar este letrero de cotización y reemplazarlo por él. Si configuro este archivo y vuelvo a mi navegador, puedes ver el resultado. De esa manera, puedes usar Imogs cualquier tipo de carácter como cita Esto es para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 79. Tutorial de imagen de borde de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS. Y en este tutorial, vamos a aprender la propiedad de imagen de borde. Ya está familiarizado con propiedad de color de borde, borde con propiedad, propiedad radio de borde, pero usando la propiedad de imagen de borde, podemos asignar imágenes en nuestro borde. Además, podemos asignar color degradado en nuestros bordes. Antes de comenzar la práctica, déjame mostrarte algunos ejemplos. Aquí se puede ver que tenemos un desarrollo y en este desarrollo, tenemos frontera, pero esta frontera no es sólida Está hecho con imágenes. Parece un marco de imagen. Básicamente en este tutorial, vamos a aprender cómo podemos crear border usando imágenes usando la propiedad border image. Entonces comencemos la práctica. Tenemos un total de seis propiedades relacionadas con imagen fronteriza. Fuente de imagen de borde, corte de imagen de borde, ancho de imagen de borde, imagen de borde, inicio, repetición de imagen de borde e imagen de borde. Nuestra última imagen de borde de propiedad funciona como un trazador de líneas. Entonces comencemos la práctica y veamos cómo podemos usar. Entonces como pueden ver, lado a lado, abro mi editor de código de estudio y mi navegador usando extensión de servidor en vivo. Y ya creé un documento TML llamado index dot HTML Entonces en nuestra etiqueta corporal, tenemos una caja D. Y en esta caja, tenemos algún texto ficticio Si escribiste, puedes ver cómo usamos borde, borde sólido, y nuestro color de borde es negro, y nuestro ancho de borde es de 30 píxeles. Y ahora necesitamos reemplazar el borde negro sólido por una imagen. Si te muestro mi directorio de trabajo, tenemos algunas imágenes, y voy a usar esta imagen, 05. Si ves, puedes ver que esta imagen está en blanco en el centro y se cubre con formas geométricas. Vamos a utilizar esta imagen como imagen de borde, y esta es una imagen PNG. Volvamos al editor de código. Al principio, voy a usar una propiedad que es fuente de imagen de borde. Fuente de imagen de borde de tipo sonido. Entonces necesitamos proporcionar la ruta de la imagen, URL. Entonces Hemo escribe URL, luego configura los versos redondos para proporcionar la ruta del archivo de imagen, que es 05 puntos PNG Ahora, fijemos el archivo y veamos qué devuelve. Arriba establece este archivo, puedes ver las imágenes, pero puedes ver la imagen en las esquinas. Además, se puede notar que quitó el color del borde negro sólido. Así que vamos a saltar a nuestro siguiente valor, que es border Image slice. Yo uso esta propiedad porque quiero mostrar esta forma geométrica a cada lado. Pero antes necesitamos entender qué es rebanar. Vamos a saltar al sbtare de photoshop. Como puedes ver en nuestra fotosfera aquí abrimos una imagen. Usando la técnica de rebanado, puedes definir cuánta porción de tu imagen quieres mostrar en tu borde Supongamos que quiero mostrar esta cantidad de área en mi sección fronteriza. Esta cantidad de área contiene la forma geométrica completa. Por eso quiero mostrar esta área. Si vuelvo a seleccionar esta área, puedes notar en la sección info cuánta área seleccionamos. la misma manera, quiero seleccionar área de esta imagen porque vamos a aplicar esta imagen como imagen de borde. Entonces a partir de aquí, quiero seleccionar esta cantidad de área. Después de seleccionar el área, aquí puedes ver el resultado. Si vuelvo a seleccionar esta área, ahora puedes ver en nuestra sección de info, devuelve cuánta área seleccionamos. Regresa con la altura, 28 por 28. Quiero decir, 28 píxeles. Ahora, volvamos de nuevo al co deditor. Aquí voy a pasar frontera Rebanada de imagen 28. Pixel. No necesitamos mencionar la unidad, tenemos que pasar el número. Ahora, fijemos el archivo y veamos qué devuelve. Después de configurar este archivo, se puede ver el resultado. Esto es lo que devolvió. Ahora se puede ver la forma geométrica en cuatro esquinas y para el borde, estiró la imagen. la misma manera, si quieres mostrar la imagen del hub, quiero decir si quieres mostrar el área geométrica del hub, déjame mostrarte, si quieres mostrar esta cantidad de área, entonces necesitas pasar este valor, pixel por 15 pixel. Déjame mostrarte. Si paso, si reemplazo 28 por 15 y este este archivo, ahora se puede ver un diseño diferente. Pero por ahora, me gustaría ir con 28. Quiero para toda la zona geométrica en nuestra frontera. Y si quieres eliminar el área de estiramiento para eso, necesitas usar otra propiedad, que es la repetición de imagen de borde. Estos son todos los valores que podemos usar con border image repeat property, repeat, stretch, round y space. Aquí, voy a usar la tercera propiedad llamada border Image repeat. Borde, imagen, repetición. Y aquí voy a pasar el valor llamado repeat. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver, ahora horizontal y verticalmente, repite la forma geométrica, y si lo hago estirar y establecer este archivo, puedes ver que es bastante similar con resultado antiguo y hay otro valor. Pero antes de mostrar el valor, volvamos a escribir repetir de nuevo. Repita el conjunto de este archivo. Se puede ver en la esquina no alineado perfectamente. Para ello, necesitamos usar otro valor llamado round. Voy a duplicar esta línea y comentar o anterior y reemplazar repetir con redondo. Si configuro este archivo, esta vez se puede ver que no hay problema en la esquina. No sólo eso, se puede definir manera diferente el valor horizontal y vertical. Déjame mostrarte. Entonces nuevamente, voy a duplicar esta línea y comentar la anterior. Y esta vez horizontal, voy a usar repetir valor, repetir, y para vertical, voy a usar stretch value, stretch. Si configuro este archivo, puedes ver el resultado. Ahora repite la forma geométrica de los Xxs y estira la forma en dirección YxS Entonces así es como puedes definir valores de repetición de imagen. Y si quieres escalar el tamaño del boder de otra manera, reduce el tamaño del borde, solo para cambiar el valor Supongamos que por ahora nuestro ancho de borde es de 30 píxeles. Si lo hago 20 pixel y luego configuro este archivo, se puede ver el resultado. Como puedes ver, ahora redujo el ancho del borde. Si reduzco o aumento el ancho del borde, no va a afectar a la imagen. De acuerdo con el ancho del borde, va a reducir la escala, de lo contrario, escalar la imagen. Ejemplo, si aumento el tamaño, si lo hago 50 pixel y el conjunto de este archivo, se puede ver el resultado. Entonces por ahora, quiero que sea de 30 píxeles. Y ahora les voy a mostrar otra propiedad, que es la imagen fronteriza de inicio. Tipo hemo, imagen de borde, inicio. Usando esta propiedad, puede controlar qué tan lejos del área fronteriza desea mostrar la imagen. Pero para entender mejor, quiero agregar color de fondo a esta caja. Fondo, voy a usar color morado. Voy a usar color morado medio. Voy a escribir morado mediano mediano. Después de establecer este archivo, se puede ver el resultado. Ahora puedes notar que nuestra imagen de borde está dentro del área de la caja. No es salir del área de la caja. Ahora use esta propiedad, podemos mover la imagen del borde fuera del área de la caja. Supongamos que quiero moverlo 20 pixel afuera. Si configuro este archivo, puedes ver el resultado. Ahora movió el píxel boerimage fuera de esta caja. A continuación, voy a usar otra propiedad que es el ancho de la imagen del borde. Después de la rebanada de imagen, quiero usar esta cabeza de propiedad. Algunos tipos de ancho de imagen de borde. Usando este valor, podemos controlar el ancho de la imagen del borde. Si paso 15 píxeles, lo contrario, diez píxeles, ahora va a establecer la imagen con diez píxeles. Lo sentimos, tenemos que pasar el pixel de la unidad. Si configuro el archivo, puedes ver el resultado. Reduce el tamaño de la imagen. la misma manera, si paso 20 píxeles, y luego configuro este archivo, se puede ver el resultado. Básicamente, usamos esta propiedad para escalar la imagen, de lo contrario, reducir la imagen. Entonces ya usamos los cinco valores. Ahora voy a usar el valor lst, que es imagen de borde Como te dije, va a funcionar como un one liner. Si usa este valor, primero, necesitamos pasar la fuente de la imagen, luego tenemos que pasar el área de corte, luego necesitamos asignar el peso, luego necesitamos proporcionar el valor exterior y, por último, necesitamos proporcionar el valor de repetición. Empecemos la práctica y veamos cómo podemos aplicar esta. Al principio, voy a comentar todas las líneas incluyendo fuente de imagen. Entonces voy a usar la propiedad, que es imagen de borde. Al principio, aquí tenemos que pasar la ruta de origen. Voy a copiar esta URL y la voy a pegar aquí. Luego después del espacio, necesitamos proporcionar el área de rebanada, que es 28. Entonces tenemos que pasar el ancho de la imagen, que es de 20 píxeles y entre el valor de corte y el valor de ancho, necesitamos usar barra diagonal Es necesario. Entonces otra vez, voy a usar slash, y esta vez voy a pasar, y aquí tenemos que pasar valor inicial, y voy a usar algo de diez píxeles, y por fin, tenemos que pasar el valor de repetición, y quiero usar el valor round Round Vamos a configurar el archivo y ver si funciona correctamente o no. Después de establecer este archivo, creo que cometí algún error Ups. Cuando no necesite esta barra después del segundo último valor. Si configuro este archivo, ahora es trabajo perfectamente. Se puede ver el resultado. Esta es la taquigrafía de la propiedad de imagen fronteriza. Primero, necesitamos proporcionar fuente, luego necesitamos proporcionar área de rebanada. A continuación, necesitamos proporcionar ancho de imagen. Entonces tenemos que proporcionar valor inicial y por fin, tenemos que proporcionar el valor de repetición. Ahora no quiero mostrar la imagen del borde. Quiero mostrar el color degradado. Para eso, podemos volver a utilizar esta propiedad. Voy a ser esta línea y comentar la anterior y esta vez aquí voy a usar color degradado lineal. Voy a conducir lineal. Gradiente. Entonces dentro de los rounders está, quiero de color rojo y azul Rojo, y el siguiente color es azul. También podemos definir la dirección del gradiente. Hemo tipo dos, derecha. Uy, hay un ingrediente de error ortográfico, DENT También si quieres proporcionar valor de corte, supongamos que voy a cortar 25 píxeles, 25 Si configuro este archivo, nuevamente no está funcionando. Creo que cometí algún error. Primero, voy a quitar esta dirección, vamos a quitar la dirección y luego volver a poner este archivo. Ahora es trabajo. Si paso la dirección, déjame intentarlo de nuevo. Heitize dos a la derecha. Después de establecer este archivo, nuevamente, no está funcionando. Oh, vaya, tenemos que proporcionar la coma. Si configuro este archivo, ahora puedes ver el resultado. Ahora ha funcionado perfectamente. Así es como podemos usar las propiedades de imagen Ber. Espero que ahora te quede claro. Así que gracias por ver este video. Estén atentos para el siguiente tutorial. 80. Selector de 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. 81. 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. 82. Tutorial de selectores de seudo clases de 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í, i 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. 83. Selector de pseudoclases de 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 Significa 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. 84. Selector de pseudoclases de 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 puede 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, es necesario 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 85. Selector de pseudoclases de CSS parte 4: Hola, chicos, me alegro de verles de vuelta. Este es otro tutorial relacionado con CSS poseido selector de vidrio En este tutorial, vamos a aprender las gafas posto restantes Vamos a comenzar con solo lectura y reescribir posto glass En nuestro timLPM, 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 rojo de lectura es el modo predeterminado. Volvamos al código de Visual Studio y tratemos de entender cuál es el uso de estos dos seleccione. Como pueden ver, lado a lado, abro mi editor de código isults Studio y mi navegador usando libServereTension, y ya creo un nombre de documento estimado documento En nuestro campo de entrada de primer nombre, si hago clic en él, como pueden ver, aquí podemos escribir el contenido. Pero si utilizo el atributo de solo lectura, entonces aquí escribimos solo lectura. Y este este archivo, ahora puedes ver nuestro campo de entrada de primer nombre no es disible 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 predeterminado aquí. Déjame mostrarte. Él va a escribir 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 intento eliminar este valor predeterminado, no puedo porque solo tenemos pernon para leer este campo de entrada, no correcto Ahora quiero seleccionar este escudo de entrada usando Posidoglass. Para eso, necesitamos usar positoglass de solo lectura. Entrada de smotype, dos puntos, solo lectura. Después dentro de los calibrados, primero, voy a decir la frontera Borde, quiero un borde de píxel, y quiero borde sólido y nuestro color de borde es rojo. Si configuro este archivo, puedes ver el resultado. Podemos apuntar con éxito el campo de solo lectura usando la clase Posido 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, ahora hablemos de nuestro próximo selector de Positro 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 siempre que cargue mi baile de graduación, de lo contrario , abro la 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 puedes ver en nuestro país, tenemos que, tenemos que emular 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 clase nosotros posito. Nuestra clase us posito es root. Ya usamos la clase posito root en nuestro tutorial anterior Cuando dices que es variable, usamos esta clase. Usamos esta clase para declarar variable, así que no voy a explicarla a si quieres aprender sobre ella, 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. 86. Pseudo elemento de 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 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, Bseudoglasses y selector de elementos posto. 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 Adast luego otra vez un Entonces voy a aplicar primera letra y primera línea en estos párrafos. Entonces empecemos. Entonces quiero seleccionar el párrafo suma 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, aplica el CSS, primera letra 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. Esto se 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. Entonces primero, voy a seleccionar elemento P. Entonces colon clal, 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 quitar el nombre de la etiqueta P, necesitas usar la selección de refrigerante 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 elemento positivo nosotros, que es la soldadura. Para eso, voy a duplicar esta sección. Y comente la sección anterior. Voy a establecer este archivo. Básicamente, el marcador funciona con un establo de Por eso abrí mi comentario estable anterior, que es de tabla de puntos, y ya está familiarizado con esta tabla de. Como puedes ver en esto desde, no tenemos ningún marcador de posición en este fro, así que aquí voy a agregar un En nuestra sección de entrada de nombre, aquí voy a usar un marcador de posición, 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. 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 marcador de posición de dos puntos, y luego dentro de los calibrados, voy a aplicar el CSS Color y quiero color rojo. Después de configurar 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. 87. CSS antes y después de los pseudolementos: 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. 88. Función CSS Attr() mejorada: 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, abro mi editor de código visual studio y mi navegador usando la extensión if server, y ya creé un nombre de documento TML IndexoTML Entonces como puedes ver en nuestra etiqueta corporal ab, etiqueta párrafo, P, y aquí escribe hola palabra. Y en nuestra sección de estilo, como puedes ver, nuestra familia de fuentes, nuestra familia de fuentes body es aérea y además puse algo de relleno y en nuestra etiqueta de párrafo, aquí configuro 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 y 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 Yo Ella mis cartas están en este párrafo, entonces quiero mostrar el nombre del atributo. Para eso, necesitamos usar el selector de positio de Oper. 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. 89. Tutorial de incremento de contador y restablecimiento de contador: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS, y en este tutorial, vas a aprender sobre una nueva propiedad llamada contador CSS, y vamos a aprender a contador relacionado con la propiedad. Incremento de contador y contador lo es. Pero antes, veamos qué es contador. Este es el ejemplo de contador. Contador CSS son variables mantenidas por CSS cuyo valor puede ser incrementada por regla CSS Se utiliza para rastrear cuántas veces se utilizan. Entonces como puedes ver en este ejemplo, tenemos etiqueta corporal y dentro de esta etiqueta corporal, tenemos encabezado una etiqueta, y luego dentro de este encabezado una sección, tenemos etiqueta de encabezado dos. Entonces tenemos HR, que va a dividir esta sección. Pero si notas en nuestro navegador, el resultado es diferente. Antes del texto, como puedes ver, término y CSS, imprime la sección uno. la misma manera, para la siguiente etiqueta H una, imprime la Sección dos, y para la tercera H una etiqueta, imprime la sección tres. También se puede ver, tenemos alguna subsección dentro de esta sección uno También aquí, numeramos esta subsección. Esto es lo que podemos hacer usando contador. No necesitamos mencionar esta sección manualmente. Si duplico esta porción, si duplico esta porción y cambio el texto, supongamos que si la hago HTML y JavaScript. Entonces en esta sección, se puede ver el resultado. Ahora crea una nueva sección llamada Sección cuatro, y si duplico una de las subsecciones y configuro este archivo, se puede ver el resultado En nuestra Sección dos, ahora tenemos total cuatro subsección, pero antes de la etiqueta H dos, no creamos nada No lo tecleamos manualmente. Entonces usando contador, podemos rastrear cuántas veces usamos. Y como te dije, los contadores somos como variables. Como les dije, tenemos que ejecutar dos contador relacionado con propiedad, incremento de contador y restablecimiento de contador, y también tenemos relacionado con función, que es contador Estas dos propiedades y la función se correlacionaron entre sí. Ahora intentemos entender cómo funcionan esta propiedad y la función. Nuestra primera propiedad es counter resit. Aquí, al principio, primero, tenemos que pasar un nombre de contador. Entonces hay que mencionar en qué dist quiero ejecutar el contador. Aquí puedes tomar cualquier nombre de contador. Solo necesitas recordar que no puedes proporcionar ningún espacio en este nombre. Básicamente, aquí creamos una variable y un valor. Nuestra variable es el nombre del contador y el valor que pasamos aquí y nuestro valor es uno. Ahora tenemos que imprimir este contador. Para eso, necesitamos usar esta función de contador, y para ejecutar esta función de contador, necesita usar el contenido de la propiedad CSS. Entonces hay que mencionar el nombre exacto usando la función Counter Contador dentro de la dirección redonda es, como puedes ver aquí creamos un contador llamado mi contador. Voy a pasar el nombre de la variable. Entonces una llamada a este valor, necesitamos incrementar el valor Básicamente, quiero decir que incrementamos el contador. Para eso, de nuevo, es necesario utilizar esta propiedad, incremento de contador En esta propiedad, al principio, hay que mencionar qué contador desea incrementar En nuestro caso, mi contador, y luego hay que pasar el valor de incremento cinco En nuestro caso, quiero incrementar el contador con cinco. Se va a imprimir primero va a imprimir uno, luego va a imprimir seis porque incrementa el contador con cinco A continuación, va a imprimir seis más cinco. Se va a imprimir 11. Al principio, necesitamos crear el restablecimiento del contador. Aquí hay que mencionar el nombre del contador y el valor del contador. Entonces necesitamos imprimir el contador usando la función de contador. Para eso, necesitamos usar propiedad de contenido, contador de contenido y dentro del receso redondo necesitamos pasar el contador que quiero incrementar. En el siguiente paso, necesitamos incrementar el contador usando la propiedad de incremento de contador Entonces no va a resetear el contador. Va a volver a imprimir el mostrador. Después del incremento el conteo ars no va a restablecer el contador Entonces va a imprimir el mostrador. Después de volver a imprimir el countr, va a incrementar el contador y sigue y Ahora hablemos del uso práctico de esta propiedad. Entonces como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando extensión de servidor en vivo y ya creo un documento de estimación llamado index dot HTML. En nuestra etiqueta de estimación, tenemos encabezado una etiqueta. Entonces tenemos algunas etiquetas de párrafo y encabezamiento dos etiquetas. Primero, tenemos el encabezamiento dos, luego el párrafo. Primero, tenemos la rúbrica dos, luego el párrafo. Es así como repito estos Rúbrica dos y párrafo por el tiempo. Y ahora quiero iniciar un contador antes de todos los rubros. Para ello, vamos a utilizar incremento del contador CSS y el valor de restablecimiento del contador Veamos cómo funciona. Entonces al principio, voy a saltar a etiqueta del cuerpo, al mostrador de descanso, y aquí voy a llamar a counter resit property Descanso de mostrador. Primero, voy a proporcionar un nombre de contador, y nuestro nombre es M y nuestro nombre de contador es M Counter Después de proporcionar el nombre, entonces voy a pasar un valor y voy a pasar cero. Significa que va a iniciar el contador después del valor cero. Entonces va a arrancar este contador desde el uno, y ahora voy a seleccionar el encabezado para etiquetar, H dos, encabezado dos, y voy a usar sudo clases B cuatro Entonces antes de toda la H para etiquetar dentro de las prensas redondas, voy a usar contenido. Primero, tenemos que proporcionar NameFirst, necesitamos proporcionar un nombre para este contenido, y voy a pasar el capítulo de nombre Entonces voy a ejecutar una función llamada counter. Entonces tipo de cabello. Contador, luego dentro de los latones redondos, luego dentro de las prensas redondas, necesitamos pasar el nombre del contador y el nombre del contador es mi contador Entonces voy a usar doble curso y dentro del doble curso, voy a usar columna seno y un uso esta columna signo, uso Semicolmn para terminar la línea Si configuro este archivo, paso superior este archivo, ahora se puede ver antes de cada etiqueta H dos, se agrega Capítulo cero. Ahora la pregunta es ¿por qué imprime cero? Porque aquí no incrementamos nuestro contador. Necesitamos incrementar nuestro contador, y para incrementar el valor, necesitamos usar la probabilidad de incremento del contador Entonces llamemos a la propiedad de incremento del contador. Dentro de los dos, entonces voy a usar incremento de contador. Entonces quiero incrementar mi contador. Y quiero incrementar en uno. Y voy a poner este archivo. Hasta configurar este archivo, se puede ver el resultado. Ahora imprime el capítulo uno, capítulo dos, el capítulo tres, el capítulo cuatro. Cada vez que incrementa nuestro contador r en uno. Ahora bien, si cambio el valor dos, ahora, cada vez va a incrementar nuestro contador r en dos Hasta configurar este archivo, se puede ver el resultado. Primero, imprime el Capítulo dos, luego imprime el Capítulo Cuatro, luego el Capítulo Seis, luego el Capítulo Ocho. Cambiemos el color del capítulo para entenderlo mejor. Entonces voy a usar propiedad de color, y voy a decir color verde. Lo siento, verde, no gris. Hasta configurar este archivo. Ahora es mucho más visible. Ahora, cambiemos la voluntad de restablecimiento del contador. Si lo hago cinco y luego configuro este archivo, esta vez puedes ver nuestro capítulo comenzar con siete porque por defecto, nuestro valor de contador comienza con cinco, entonces va a sumar dos en este contador. Por eso imprime el Capítulo siete, cada vez que va a sumar dos en nuestro valor anterior. Por eso imprime Capítulo nueve y Capítulo 11 y Capítulo 13. Si paso un contador grement y establecen este archivo, ahora se puede ver que imprime números de serie, pero empieza con el Capítulo seis Solo necesita recordar en nuestra propiedad de mostrador, necesitamos proporcionar primero vamos a proporcionar un nombre de contador, luego debemos mencionar desde donde queremos comenzar nuestro mostrador. Y si no aporto ningún valor a la propiedad de restablecimiento de contador, voy a quitar este valor y el conjunto de este archivo, entonces se puede ver que funciona en serie Por defecto, el valor de restablecimiento del contador viene con cero. Por eso se imprime desde 1234. Ahora decides que no quieres imprimir número en contador. Quiere imprimir Alpha etics. Para eso, solo necesitas mencionar el coma superior de mi contador necesitas mencionar el Alfa Alfa superior. Si configuro este archivo, puedes ver el resultado. Ahora imprime Capítulo A, Capítulo B, Capítulo C, Capítulo D. De la misma manera, puedes imprimirlo en minúsculas, en para cambiar de superior a inferior. Alfa Inferior. Hasta sofocar, se puede ver el resultado Esta vez, puedes verlo imprimir letras minúsculas, Capítulo A, Capítulo B, Capítulo C, Capítulo D. Y si quieres imprimir Roman Vu, puedes, necesitas pasar romano inferior. Se puede ver ahora imprimimos números romanos, y el último valor es romano superior. Entonces si paso superior Y así este archivo, se puede ver que imprime números romanos en la camada superior. No sólo eso, se puede crear subcunter dentro del mostrador Déjame mostrarte el ejemplo. Para el siguiente ejemplo, nuevamente, creo un nuevo documento html llamado index two style. Como pueden ver, tenemos encabezado una etiqueta, luego debajo de este encabezado una etiqueta, tenemos alguna rúbrica a etiqueta. Después de cada etiqueta H una, tenemos H para etiquetar. Tenemos tres H para etiquetar. Estos son todos sub rubro. Y ahora quiero correr a diferente contador para rumbo y diferente contador para subpartida Entonces primero, voy a crear el contador cuatro H una etiqueta. Entonces primero, voy a llamar a la propiedad de restablecimiento de contador. Sección de restablecimiento de contador, restablecimiento de contador. Voy a ponerle nombre sección. Y luego voy a crear H uno antes. Entonces aquí quiero escribir H uno, punto y coma, colon, colon, colon, selector de posit antes, luego dentro la voluntad ciersSF para llamar a Contin. Después en códigos dobles, quiero imprimir sección. Espacio de sección. Entonces voy a pintar el mostrador. Y dije que la prensa redonda es que necesitamos proporcionar el nombre del contador, y nuestro nombre de contador es sección. Después después de imprimir esta sección, quiero imprimir, después quiero imprimir un signo de dos puntos. Eso es. Y entonces tenemos que incrementar el contador Entonces tenemos que llamar a la propiedad de incremento de contador. Contador incremento contador incremento, y voy a pasar sección Y voy a poner este archivo. Después de establecer este archivo, se puede ver el resultado. Primero, imprime la Sección uno, luego imprime, Sección dos, luego imprime Sección tres en nuestra etiqueta de encabezado uno. Ahora, necesitamos crear sub encabezados de contador cuatro, y va a funcionar cuando solo tengamos H una etiqueta Entonces para crear este subcunar, vamos a saltar a la etiqueta H uno Después dentro de la sección de texto H one, vamos a crear el resto del contador. Cuenta ar reset, y voy a pasar un nombre, y voy a nombrarlo subsección Y voy a incrementar con uno, así que no voy a pasar ningún valor Entonces necesitamos crear antes cuatro H dos, H dos, colon, colon, antes de proceder al selector, antes. Entonces dentro del clirass quiero copiar esta sección y la voy a pegar aquí. Primero, voy a sustituir sección por subsección, copiar la sección de valor y nombre contenido con subsección Entonces en nuestra función de contador, necesitamos cambiar el valor. Sección dos, subsección. También, tenemos que cambiar en nuestra sección de contra-grement. Después de establecer este archivo, se puede ver el resultado. Dentro de cada sección tenemos subsección, y también asignamos contador a cada subsección Entonces esta es nuestra contrapalabra. Espero que disfrutes de este proceso. Gracias por ver este video. Estén atentos para el siguiente tutorial. 90. Color de caret de CSS: Hola chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre una nueva propiedad, que es el color correcto. Entonces veamos cómo podemos usar esta propiedad prácticamente y cuál es el beneficio de usar esta propiedad. Entonces como pueden ver lado a lado, abrí mi editor de código so studio y mi navegador usando la extensión if server, y ya creé un documento TML llamado index dot HTML Entonces en nuestra etiqueta corporal, tenemos un pro. Además, puedes ver la t desde mi navegador. Tenemos algunos campos de entrada, nombre, apellido, edad, correo electrónico y pasatiempos. Ahora el quien es lo que es carrito? Si hago clic en algún campo de entrada, como pueden ver, si lo zoom un poco, como pueden ver, un pelo Karsalblink Esto se llama caret. Si quieres cambiar el color parpadeante de Karzal, solo necesitas usar una propiedad llamada carret Déjame mostrarte cómo puedes usarlo. Como puedes ver, ya selecciono la etiqueta de entrada y el área de texto. Dentro de esta selección, voy a usar color de caret. Arrete color y voy a decirlo rojo. Si configuro este archivo y pienso en alguno del campo de entrada, ahora puedes ver que cambió mi auto o color. Ahora puedes ver que cambió el color del quilate. Ahora se vuelve rojo y se aplica el color carret en todos los campos de entrada También en nuestra área de texto. Se puede utilizar cualquier formato de color, hexa, RGBA, etcétera. Si pasas auto, déjame mostrarte entonces va a aplicar el color por defecto, que es que si hago clic en cualquier campo de entrada, ahora puedes ver que devuelve el color negro. Además, si no quieres mostrar el quilate para eso, puedes usar color transparente. Déjame mostrarte. Quiero reemplazar Auto por transparente. Si configuro este archivo y hago clic en cualquier campo de entrada, ahora no puedes ver mi carrito porque ahora se ha vuelto transparente. Pero aún así, puedes escribir cualquier cosa en este campo de entrada. Agrega uno. Pero no se puede ver el quilate. Espero que ahora te quede claro qué es el color quilate. Gracias por ver este video. Estén atentos para el siguiente tutorial. 91. Regla @import: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender algo nuevo en CSS, que son las reglas de importación de CSS. Entonces, ¿por qué usamos el método de regla de entrada? Supongamos que tiene tutor dos archivos CSS. Ahora quieres usar un archivo CSS en otro archivo CSS. Para eso, usamos regla de entrada. No necesitamos enlazar para archivar en nuestra TimlPage. Solo necesitamos vincular el archivo CSS principal con nuestra página de estimación y otra que va a jugar el papel de apoyo, que vas a vincular con el archivo CSS de punto Min, y para importar el archivo CSS a otro archivo CSS, necesitamos usar esta regla en la entrada roja. Luego dentro del doble curso, necesitamos pasar el nombre del archivo, de lo contrario, ruta de archivo. Además, hay otro método que puedes definir input. Es otro método donde puedes usar URL. Si quieres proporcionar ruta absoluta, en ese caso, puedes proporcionar ruta como esta usando URL. En nuestro primer método, puedes pasar la ruta relativa, pero en nuestro segundo método, puedes pasar ruta relativa, también ruta absoluta. Con eso, viene con otra opción donde podemos definir los medios de comunicación. Como puedes ver en este ejemplo, Hero usa un medio llamado print. Entonces cada vez que alguien intentó imprimir la página, en ese caso, va a aplicar este CSS, estilo de impresión o CSS. Espero que ya estén familiarizados con este medio de comunicación. Toda la impresión, la pantalla y el habla. Todo tipo de medios cubren tres tipos de medios a la vez. La segunda es la impresión. Se utiliza sólo para fines de impresión, y el tercero es la pantalla. Se utiliza en nuestra pantalla móvil, pantalla táctil, pestaña, laptop, computadora, etcétera, y el último es el habla Ahora, veamos cómo podemos usar esta regla mediática prácticamente. Entonces como pueden ver, lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión de servidor en vivo, y ya creé un documento Html llamado index dot HTML. Y como puedes ver, creamos un layout web básico. Aquí puedes ver, tenemos sección de encabezado, tenemos sección de menú, tenemos sección contenido, sección de barra lateral, y en la parte inferior, tenemos FootarSection, y no ponemos ningún color en esta página HTML Y así si te das cuenta, dentro de la etiqueta de la cabeza, tenemos una etiqueta de enlace. Y en esta etiqueta de enlace, aquí vinculo archivo css de punto principal. Este es nuestro archivo CSS Min dot. Y en este archivo CSS, escribimos CSS visualmente para la estructura, no para el color. Por eso no se puede ver ningún color en esta página. Y si te das cuenta, puedes ver, también tenemos otro archivo llamado color dot CSS. Este archivo se crea por separado para colores, color de fondo, color sección de encabezado, color de sección de menú, sección de contenido, color, color de aparador, etcétera Y ahora voy a introducir este archivo CSS de punto de color en particular en el archivo CSS de punto principal. Puede usar directamente el archivo CSS de puntos coloreados con nuestro HTML usando la etiqueta Link, pero no voy a usar eso. Voy a importar el archivo CSS de puntos coloreados en el archivo CSS de puntos principales. Entonces voy a ingresar este archivo. Solo una cosa que debes recordar, necesitas importar el archivo en la parte superior. Entonces aquí, voy a escribir en la entrada roja. Después dentro de los códigos dobles, voy a pasar la ruta del archivo, que es de color punto CSS. Y punto y coma a esta línea. Y voy a poner este archivo. Después de que configuré este archivo, como pueden ver, ahora puso todo el color en mi maquetación. Se siente coloreado en la sección de encabezado, sección menú, sección de barra lateral y sección de pie de página. También, los antecedentes de esta página web. Y ahora quiero importar el archivo CSS de punto PrintStyle. Si alguien intentó anclar esta página web, entonces no quiero imprimir la sección de la barra lateral. Además, no quiero imprimir este manubar. Solo quiero imprimir la sección de contenido exacto. O que sus cinco creativos estilo de impresión CSS. Aquí básicamente ocultamos la barra lateral y la sección del menú. Como puedes ver, el menú y la barra lateral no muestran ninguno. También, y también aumento el contenido con área 100%. Y ahora voy a ingresar este archivo usando el método de regla de entrada. Entonces aquí voy a escribir a la tasa Import, y esta vez, voy a usar URL. Y dentro de los códigos dobles, voy a pasar Printylet CSS, y voy a configurar este archivo Después de establecer este archivo, se puede ver el resultado. Y hay otro problema. Después de la entrada, el estilo de impresión CSS, quita nuestra maniobra y nuestro lado fue sección Para resolver el problema, necesitamos definir los medios de comunicación. Tenemos que definir el propósito mediático. Para eso, es necesario definir los medios de comunicación. Entonces aquí, voy a escribir print. Si configuro este archivo, ahora puedes ver la sección cibernética, también la sección de menús. Pero si trato de imprimir la página, déjame mostrarte la impresión. Ahora puedes ver en nuestra página de impresión, no tenemos la sección de menús y la sección de barra lateral. Imprimo encabezado, contenido y la sección de pie de página. Entonces esto es lo que podemos hacer usando medios impresos. 92. Fuentes de iconos de Css: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender sobre las fuentes de iconos. Vamos a aprender cómo podemos usar teléfonos con iconos en nuestras páginas de tamales Pero antes de comenzar nuestra práctica, veamos qué son las fuentes de iconos. Entonces como pueden ver, aquí me OpenE plantilla de sitio web. Y en esta sección de barra superior, como pueden ver, tenemos dirección de oficina, departamento de ventas, tiempo abierto, etcétera Pero aquí se pueden ver los iconos antes del texto. Horario abierto, llámanos y dirección de la oficina. Aquí puede ver el icono de llamada, icono del mapa y el icono del reloj. Estas no son una imagen. Estas son fuentes de iconos. Además, puedes ver este ícono en esa sección ícono GR, ícono Subot, ícono de documentación e ícono de carrito No utilizamos imágenes para eso. Utilizamos fuentes de icono para crear este icono. Como cualquier otro phons, todas estas son fuentes Estos iconos están hechos con fuentes. Si usamos imágenes sin fuente entonces va a aumentar el tiempo de carga de nuestro servidor. Además, va a crear nuestro diseño de sitio web muy pesado. Por eso usamos fuentes de iconos. El beneficio de usar la fuente de icono es todo tipo de fuentes disponibles en un solo archivo. No necesitamos buscar ningún tipo de icono en el sitio web. Se puede acceder a miles de imágenes desde un solo archivo. Ahora veamos cómo podemos insertarlo en nuestra página web. Para eso, necesitamos ir a Google y buscar fuentes de iconos. Y aquí puedes ver un sitio web, Font Awesome. Este es uno de los sitios web más populares que proporcionan fuentes de iconos. Sin él, hay muchos sitios que proporcionan fuentes de iconos. Incluso Google proporciona fuentes de iconos. Pero en este video tutorial, me gustaría ir con Font Awesome. Entonces voy a hacer click en este enlace. Como puedes ver, es redireccionar a este sitio web. Por lo que este proporcionar versión gratuita también proporciona la versión P, pero nos gustaría ir con la versión gratuita. Entonces voy a hacer click en este botón, empieza gratis. Después de hacer clic, empieza gratis, es redirt a esta página Ahora, aquí puedes ver en esta sección, enseña cómo podemos usar este teléfono. Podemos usarlo en nuestros proyectos web, proyectos escritorio con APIs. En diversos proyectos, podemos usar estos fones, pero me gustaría ir en nuestro proyecto web Así que aquí puedes ver la opción de descarga. Simplemente haga clic en la opción Descargar. Después Haga clic en Opciones de descarga rehizo a esta página. Ahora somos nosotros. Esta es la fuente impresionante Verse six. Esta es la última versión. Se estrenó en abril de 2024. Para descargar esta fuente, sólo tienes que ir a la fontsom.com slash Desde aquí, puedes ver la opción de descarga. Como sabéis, vamos a utilizar esta fuente para nuestros proyectos web. Para eso, necesitamos usar esta opción. Necesitamos descargar esta opción, gratis para web. Ya descargué esta fuente. Si haces clic en esta opción, automáticamente, va a descargar esta fuente. Si descarga esta fuente, proporcionará Cs archivo es archivo que se puede utilizar con preprocesadores Además, proporciona archivos SVG. Y no te preocupes. Vamos a aprender sobre SAS, preprocesador CSS y gráficos WIG en nuestro próximo tutorial Entonces después de hacer clic en este botón de descarga, se descargará en un archivo Z. Entonces necesitas extraer este archivo. Después extraer este archivo. Como pueden ver, si abro esta carpeta, proporciona archivo CSS, archivo CS, como pila, script, SVG, formularios web, etcétera Entonces al principio, voy a abrir la carpeta CSS. Aquí proporciona todo tipo de fuentes, marcas, SVG sólido regular, etcétera Y si quieres usarlo todo, entonces puedes usar este archivo todo. Ahora intentemos explorar cuál es el significado de todo tipo de fuente. Así que vamos a llegar a la página web y hacer clic en los iconos de esta opción de menú. Si hago clic en las ICO, como pueden ver, aquí pueden ver Font Awesome Version six proporcionan un total de 30,199 fuentes Pero es sólo para la proversión. Ahora, vamos a desplazarnos un poco hacia abajo en la página y saltemos a la sección de fuentes. Entonces voy a empezar con formas sólidas. Aquí puedes ver que todos los íconos son sólidos. Y si quieres formas de luz, entonces haz clic en Luz. Ahora puedes ver que todas las fuentes están hechas con línea de borde. Ahora bien estas no son fuentes sólidas. Del mismo modo, si selecciono la sección delgada y desmarco la sección de luz, ahora se puede ver que los iconos de borde son más delgados que la versión anterior Y si te muestro el normal, déjame mostrarte regular. Ahora puedes ver que todos los iconos están hechos con 50 50. Quiero decir que se hizo con sólido. Como se hizo con línea de borde. Por lo que divide nuestro icono en un estilo diferente. Por lo que proporciona todo tipo de CSS para eso. Pero si quieres usar todo tipo de avance de fuente para eso, puedes usar esta , esta opción. Entonces vamos a usar todas las fuentes. Entonces para copiar este archivo y quiero moverlo en nuestro directorio de trabajo actual. Este es mi directorio de trabajo actual, y quiero pegarlo aquí. Con eso, necesito copiar otros cinco, lo siento, otra carpeta, que es fuentes web. Entonces voy a copiar esta carpeta de fuentes web. Aquí puedes ver todo tipo de fuentes. Entonces voy a copiar toda la carpeta y voy a pegar en mi directorio de trabajo actual. Para mí y para ti, es una forma difícil de usar fuentes web. No te preocupes. Además, te voy a mostrar el camino fácil. Ahora, saltemos al códitor del estudio Wizard. Entonces como pueden ver, estamos en mi código ieditor y este es mi directorio de trabajo actual Aquí puedes ver el archivo css de Adt. También tenemos una carpeta llamada fuentes web. Ahora voy a abrir pila Adt Css. Y ahora necesitamos vincular toda la fuente que está dentro de nuestra carpeta de fuentes web con este archivo. Para eso, necesitamos desplazarnos hacia abajo en mi página. Necesitamos desplazarnos hacia abajo en la página CSS de Aldo. Y como puedes ver, tenemos fuente, y esta fuente redirecciona a toda la fuente que está dentro de la carpeta webfont Entonces necesitamos vincularlo de nuevo. Para eso, para eso, necesitamos cambiar el directorio raíz actual. Tenemos que redireccionarlo ganó carpeta. Así que voy a rewope esto para puntear desde cada enlace URL. Porque esta carpeta es mi directorio de trabajo actual. Por eso no necesitamos ir dos pasos más allá para vincular la carpeta. Sé que esta es la manera muy difícil. Esta no es la manera fácil, pero necesito mostrártelo. Y luego voy a poner este archivo. Esto es. Y ahora voy a abrir mi proyecto anterior donde creamos un diseño web de Bessy ¿Te acordaste de este proyecto Bessy web layout? Sí, vamos a aplicar todas las fuentes de icono en este proyecto. Y ahora necesitamos vincular todos los archivos CSS de punto en esta página web. Así que dentro de la etiqueta head después de la etiqueta title, voy a escribir link, link, y necesitamos proporcionar la ruta de este archivo, todo punto CSS, y voy a establecer este archivo. Ahora nuestros íconos están listos para usar. Ahora, veamos qué icono vamos a usar. Vamos a usar el icono de inicio para el menú de enlace de inicio. Así que saltemos al sitio web. Entonces entonces hay que seleccionar la opción gratuita porque vamos a utilizar la versión gratuita de la fuente. Por eso me gustaría ir con opción gratuita. Y para el hogar, voy a usar este icono, casa. Entonces voy a hacer click en este icono. Después de hacer clic en este icono, como puedes ver, proporciona alguna opción. Podemos descargarla como archivo SVG. Además, proporciona un enlace de Sable. Si uso el código, el código exacto, entonces va a crear el icono. Además, si estás codificando con react, también proporciona código para react. Para VA y además proporciona es muy bueno. Pero vamos a usar la fuente en nuestra página t. Entonces voy a copiar este enlace. Y si notas nuestro ícono es sólido. Es por eso que asignar una clase F es sólida. Y este es el icono de la casa. Además, asigna una casa clase FA. Si utilizo la versión regular, ahora puedes ver que nuestra clase sigue siendo la misma si es una casa, pero también le asignó otra clase llamada Aregular la misma manera, si hago clic en versión más ligera, ahora le asigna una clase, Vuelo, y es una casa. Por eso me devuelve una casa. Y si selecciono esta opción, ahora le asigna una nueva clase, que es Fa dutne significa tono dual la misma manera, si haces clic en esta opción delgada, ahora puedes ver que proporciona vidrio fino FA. Entonces vamos a comenzar con clase sólida, F es sólida. Entonces nuevamente, voy a copiar este código. Así que copio este pellizco, y voy a pegarlo antes de la casa. Así que tenemos que ir a la sección de menú en mi una página estable. Entonces antes de la casa, quiero pasar tenemos que pegarlo aquí. Entonces si configuro este archivo, ahora puedes ver el icono de inicio adjunto con la opción Menú Inicio. Y si no te gusta el icono sólido, solo necesitas cambiar el nombre de la clase. Supongamos que quiero usar Light Virgin. Vuelo Ligero. Y si configuro este archivo, arriba para configurar este archivo, como pueden ver, no va a funcionar correctamente porque creo que si selecciono la versión light, sí, es una versión pro. Sólo la versión pro puede usar esta opción. Ahora sólo tenemos una opción. Tenemos que ir con sólidos. Entonces quiero volver a copiar este código y reemplazarlo por el anterior y volver a configurar este archivo. Entonces tenemos alguna limitación. Esta versión no es gratuita para todos. En nuestra versión gratuita, solo proporciona 1,392 iconos. Así que tenemos que ir con alguna versión anterior de esta fuente. Como te dije antes, te voy a mostrar un total dos métodos que podemos usar los teléfonos web en nuestras páginas web. Este es el difícil, y ahora voy a mostrarte el método fácil, método muy fácil. Entonces como pueden ver, aquí abro un sitio web, llamado wthschool.com Este sitio web es el mejor recurso para aprender el desarrollo de sitios web. Ahora, da clic en la sección CSS. Después de hacer clic en la sección CSS, desplácese un poco hacia abajo. Aquí puedes ver la opción. Nombre iconos CSS. Da click en esta opción, y esto te proporcionará un total de tres ejemplos de cómo puedes usar los iconos CSS. Proporciona enlace de CDN de fontosom. Además, proporciona el icono de Boosterp enlace CDN. Con eso, proporciona fuentes de Google. Como te dije, vamos a usar fontosom para este tutorial Entonces aquí puedes ver una opción, nombre, leer más sobre cómo empezar con pontosom en nuestro tutorial de PontosomFive Su edición gratuita proporciona un total de 588 iconos. Establecer rápido solo para copiar esta etiqueta de script. Así que voy a copiar esta etiqueta de script, y luego voy a saltar a mi editor de código de Visual Studio. Después inserte esta etiqueta de cabeza, al principio, voy a pegar esta etiqueta script Entonces un título, voy a pegar esta etiqueta de script, y voy a configurar este archivo. A continuación, volvamos a llegar al sitio web. A continuación, vamos a probar algunos íconos de accesibilidad. Por lo que hago clic en este enlace, y como pueden ver, proporciona algunos íconos de accesibilidad. Supongamos que desea utilizar este icono de subtítulo. Para eso, necesitas copiar esta clase. Entonces después de copiar esta clase, saltemos al código del estudio. Déjame mostrarte. Entonces aquí, voy a usar ITAC I. Luego dentro de este iTag voy a asignar una clase Y como te dije, necesitamos usar la clase particular para usar el ícono de subtítulo, que es el rápido subtitulado AA Voy a establecer este archivo. Después de establecer este archivo, como puedes ver, no está funcionando porque aquí necesitamos un código J en particular. Para eso, volvamos al navegador otra vez. Para ello, es necesario iniciar sesión en este sitio web. Te proporcionará el código JavaScript, el código JavaScript Wontosom, algo así Este es su enlace de CDN pontosom personal. Simplemente copie este código y vuelva al navegador y reemplace este código, reemplace el código antiguo con código. Y el conjunto de este archivo. Después de paso este archivo, ahora se puede ver el resultado. Imprimo letrero de subtítulo, y luego voy a duplicar esta línea varias veces. Total tres veces. Y ahora, paso a paso, voy a aumentar la altura de esta fuente. Entonces para eso, necesitamos usar style attribute style. Como te dije, nuestros iconos funcionan como fuente, por lo que puedes usar las propiedades de la fuente para manipular este tamaño de fuente. Entonces voy a usar la propiedad de tamaño de fuente, tamaño de fuente, y voy a asignar 24 píxeles. Si configuro este archivo, puedes ver el resultado. Como puedes ver, aumentó nuestro primer tamaño de fuente. De la misma manera, voy a aumentar todo el tamaño de la fuente. Entonces en la siguiente fuente, voy a asignar 36 semanas estilo sal tamaño de fuente 36. Con eso, quiero asignar un nuevo color de fuente, y es muy sencillo cambiar el color de esta fuente. Solo para usar propiedad de color. Color, y quiero color rojo. Entonces solo establece este archivo. Después de establecer este archivo, se puede ver el resultado. Entonces voy a duplicar de nuevo esta línea y esta vez voy a quitar ambas líneas porque no hace falta que pruebes tanto aire frío. Voy a incrementar el valor. Esta vez, voy a usar 48, pixel, y aquí voy a usar color verde y volver a configurar este archivo. Ahora probemos otros íconos. Así que de nuevo, vuelvo al sitio web y salto a la sección de iconos CSS y redirijo al pontosmo ser tutorial A partir de aquí, según situación, se pueden obtener diversas formas. Supongamos que si quieres fuentes de alerta, entonces estas son las fuentes de alerta que puedes usar en tu sitio web. Y si quieres iconos de animales, solo tienes que pegarte en los íconos de animales, podrás ver el resultado. Es proporcionar todo tipo de iconos de acuerdo a sus necesidades, fecha y hora, diseño, editor, educación, etcétera Supongamos que voy a usar este, este Por icono. Pero esta vez, no voy a usar este nombre de clase. Voy a usar el Unicode. Solo para usar solo un nombre de clase FAs. Déjame mostrarte. Voy a copiar este UICode y volvamos al con el editor de código de estudio Entonces aquí, voy a crear un botón, botón, y en este botón, luego dentro de este botón, voy a usar iTag I. Y en esto etiqueta, primero, voy a Multar una clase, y en esta clase, necesitamos usar solo un nombre de clase, AA es Entonces voy a usar el Unicode particular. Usaremos este unicode para usar el icono de Bal. Además, voy a pasar un texto en este botón y a ella estoy tecleando botón. Y voy a poner este archivo. Ahora puedes ver que esta etiqueta de botón viene con un icono de bola. Y si quieres aumentar el tamaño del botón, el tamaño de la bola, lo contrario, toma tamaño, necesitas usar la propiedad de tamaño de fuente. Estilo, voy a usar el tamaño de fuente. Y para este botón, voy a usar 24 píxeles, y voy a volver a configurar este archivo. Después de configurar este archivo, verá el resultado. Entonces así es como podemos usar diferentes íconos según la situación. Hay varios sitios web que proporcionan este tipo de fuentes, pero font toosos el mejor Si tienes suscripción pro, entonces puedes acceder a toda ella. Entonces esto es para este tutorial. Gracias por ver este video. Estén atentos para nuestro próximo Tutorial. 93. Tutorial de estilo de barra de desplazamiento de CSS: Hola, chicos, es bueno volver a verles. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS, y en este tutorial, vamos a aprender el estilo de la barra de desplazamiento. Antes de comenzar nuestra práctica, veamos qué tipo de estilo podemos aplicar en nuestras barras de desplazamiento. Como puede ver en este ejemplo, tenemos un total de seis barras de desplazamiento diferentes. Tenemos barra de desplazamiento sólida, tenemos barra de desplazamiento con sombra Tenemos barra de desplazamiento que se hace con borde, tenemos barra de desplazamiento de gradiente Para crear este tipo de barra de desplazamiento, CSS introduce algunas propiedades nuevas Estas no son propiedades. Se trata de elementos poseido Entonces intentemos entender los elementos poseido. Los elementos positivos se introducen particularmente en la barra de desplazamiento de estilo. El primer elemento positivo es la barra de desplazamiento. El segundo elemento positivo es el pulgar de la barra de desplazamiento. La tercera es la pista de murciélago de desplazamiento, y la cuarta es la esquina de la barra de desplazamiento Algunos navegadores no soportan este elemento. Solo Chrome, Safari y opera lo soportan correctamente. Además, no utilizamos esta propiedad directamente en nuestro navegador. Necesitamos usar prefix, webkit, y después de usar el prefijo webkit, se ve así Después de dos dos dos puntos, necesitamos escribir guión webkit, guión, luego tenemos que pasar el nombre positoelmin Entonces sin hablar demasiado, comencemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código de estudio Rizal y mi navegador usando la extensión if server, y ya creo un documento tML llamado index Entonces, como puedes ver, Hary creó la devilment y además establecemos un gusto de identificación Con eso, también se puede ver una barra de desplazamiento vertical. Y voy a darle estilo a esta barra de scrull, y ya aplico algunos CSS en este gusto profundo Aquí establecemos con 250 píxeles de altura 400 píxeles. Además, establecemos margin border y overflow, overflow auto. Por eso se puede ver esta barra de scrull. Entonces, al principio, necesitamos seleccionar el elemento DV usando su nombre de ID. Tiene DAG, sabor, sabor, colon colon, guión, webkit Necesitamos usar este prefijo sin usar prefijo, creo que no va a funcionar. Entonces voy a escribir webket scrollbar. Luego dentro de la Cali resis, usando este posto vidrio, podemos definir el ancho de la barra de desplazamiento Podemos definir barra de desplazamiento personalizada con. Entonces me voy a llevar con 20 pL. Si configuro este archivo, no puedes ver nada porque necesitas aplicar un color de fondo. Entonces voy a usar el fondo de propiedad de diagrama, y voy a usar el color gris. Después de establecer este archivo, se puede ver el resultado, y también se puede notar el grosor de la barra de desplazamiento Y ahora necesitamos aplicar la pista de barra de desplazamiento. Entonces voy a rebasar esta sección, y aquí voy a escribir scrollbar dash Aquí, no voy a mencionar. Solo quiero mencionar el color de fondo. Y por ahora, voy a aplicar el color verde. Y voy a poner este archivo. Después de establecer este archivo, como puedes ver, define nuestro track. Además, voy a comentar este color de fondo desde la barra de desplazamiento Recuerda, nuestros autos se mueven en la pista de la barra de desplazamiento, no esta barra de desplazamiento Para que quede más claro, permítame aplicar algún radio fronterizo. En algún momento radio fronterizo, voy a aplicar diez píxeles. Después de establecer este archivo, se puede ver el borde. Esta es nuestra área de seguimiento de barra de desplazamiento, y ahora voy a aplicar nuestra tercera propiedad, nuestro tercer elemento posito, que es scroll Entonces voy a excavar esta sección. Y voy a sustituir a Jack por el pulgar. Con eso, voy a cambiar el color del pulgar. De lo contrario, no se puede entender el pulgar. Voy a aplicar color amarillo, y voy a configurar este archivo. Después de configurar este archivo, se puede ver el resultado. Ahora puedes ver que nuestro pulgar de barra de desplazamiento funciona correctamente. Además, puedes aplicar colores degradados. Entonces voy a aplicar colores de degradado lineal. Entonces voy a duplicar esta sección y comentar la línea anterior. Y aquí, voy a escribir gradiente lineal. Y aquí, voy a pasar a los dos colores rojo, y nuestro segundo color es el amarillo. Después de espárrago este tiempo, se puede ver el resultado. Además, podemos aplicar el color degradado en nuestra pista. Hagamos este pergamino pero rastreemos un poco atractivo. Entonces aquí voy a aplicar el color gris. Y voy a poner este archivo. Usemos alguna versión más clara de este color gris. No hay gris preciso, esta gran cantidad de gris. Y voy a poner este archivo. Sí, ahora se ve bastante bien. También, voy a aplicar pequeña sombra de caja. Entonces voy a escribir box shadow. Primero, voy a insertarlo. Insertar, entonces de XX es cero, de YX es cero, y para la borrosidad voy a usar seis píxeles Y también necesitamos aplicar el color de sombra. Entonces escribe RGBA RGBA dentro del latón redondo, rojo por rojo, voy a pasar cero Para verde, también voy a pasar cero y para azul, también voy a pasar cero. Y para el valor Alfa, voy a pasar 0.3. Quiero 30% transparente. Si configuro este archivo, si configuro este archivo, puedes ver el resultado. Después de asignar la sombra de caja, parece una forma de tres D. Ahora nuestra barra de desplazamiento se ve un poco atractiva. Con eso, voy a usar el tipo similar de sombra de caja en nuestra área del pulgar. Entonces voy a copiar esta sección box shadow, y la voy a pegar aquí. Voy a establecer este archivo. Después de establecer este archivo, se puede ver el resultado. Entonces esta es la barra de desplazamiento vertical. Además, se puede aplicar barra de desplazamiento horizontal. Para eso, tenemos que pasar una imagen. Entonces hero type mag dot source, y si te muestro mi directorio de trabajo actual, hay una imagen imagen punto JPG. Voy a pasar la ruta del archivo, imagen punto JPG. Voy a establecer este archivo. Después de establecer este archivo, aquí puede ver la barra de desplazamiento horizontal, y ambas la barra de desplazamiento siguen la misma propiedad. Ahora, si te das cuenta, puedes ver en la esquina, tenemos un espacio. Para llenar esta área de esquina, también viene con este elemento positivo, que es la esquina de la barra de desplazamiento. Para eso, voy a duplicar esta sección y reemplazar pulgar con esquina. Y en la esquina, voy a usar sólo el color de fondo. No necesito usar wer radius. Sí, puedes si quieres usarlo. Entonces escribe fondo, y quiero fondo color rojo. Si configuro este archivo, puedes ver el resultado. Además, puedes usar color degradado si quieres usar. Entonces espero que ahora te quede claro cómo podemos darle estilo a nuestra barra de desplazamiento Para eso, necesitamos usar algún selector de elementos Posido, que es barra de desplazamiento, pista de palabras escolares, pulgar de palabra escolar y esquina de palabras de desplazamiento Y si quieres jugar con el ancho de la escuela, sí, puedes. Si quieres reducirlo algo diez píxeles, y luego archivo de subs, puedes ver la barra de desplazamiento Y se aplica la propiedad width solo la palabra escuela vertical. Al mismo tiempo, si quieres mencionar la altura, entonces se va a aplicar la palabra escuela horizontal. Ahora tu diseño de palabras de desplazamiento y control de comportamiento está en tu mano. Utter mencionó este ancho de barra escolar, entonces necesitamos proporcionar una pista de barra de desplazamiento donde se va a mover nuestra barra escolar, y luego necesitamos crear el elemento pulgar Y al fin, podemos controlar la esquina del bar escolar. Entonces espero que ahora te quede claro cómo podemos usar estas propiedades. Así que gracias por ver esta estación de video para el siguiente tutorial. 94. Tutorial de raíz de flujo de visualización de CSS: Oigan, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vamos a aprender un nuevo valor. Este valor está relacionado con la propiedad de visualización, que es la raíz de flujo. En nuestro tutorial anterior, ya cubrimos estos valores relacionados con la probidad de visualización, pero hay otro valor introducido en la propiedad de visualización, que es la raíz de flujo Ahora, veamos dónde podemos usar este valor. Supongamos que tenemos un elemento profundo, y dentro de este elemento profundo, tenemos otro elemento profundo. Entonces este es nuestro elemento profundo padre, y este es nuestro elemento profundo hijo. Así que cada vez que usamos la propiedad float al elemento hijo, entonces se crea un problema. No importa el valor que uses. Puede ser derecha o izquierda. Y el tema se ve así. Como puedes ver el padre deep close por encima del elemento childiv y el child y el elemento childi van afuera al parent Para resolver este problema, ya tenemos dos soluciones. Nuestra primera solución es que necesitamos usar la propiedad overflow en nuestro auto overflow. Pero esta solución no es funcionar correctamente todo el navegador. A veces no funciona en Internet Explorer. Por lo que no se sugiere esta solución. Sin esto, tenemos otra solución, que es gear fix. Para usar clear fix, necesitamos usar Aptar Positoselector. Necesitamos usar esta clase pasito en nuestro padre. Y entonces tenemos que usar tres propiedades CSS, contener un contenido en blanco, luego mostrar propiedad y rasgar propiedad. Además, esta solución no es perfecta porque aquí necesitamos escribir múltiples líneas. Tenemos que tomar selector de upra, necesitamos crear, necesitamos tomar tres propiedades, y llamamos a este método car fix Y esta tampoco es una solución permanente. Pero ahora CSS introducir solución permanente, que se llama display flow root. Entonces 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 if server, y ya creo un documento de estimación llamado index dot HTML. Entonces, como puedes ver en nuestra etiqueta corporal, tenemos una etiqueta Deep parent, y dentro de esta etiqueta Deep parent, tenemos una etiqueta Dip secundaria. Y puedes ver el resultado en mi navegador. Y también, estilizo estos elementos Deep. Esto es lo que paren elemento Deep. Aquí establecemos con 600 píxeles, y luego establecemos el margen 55 50, y también establecemos dos píxeles borde sólido. Luego en nuestra etiqueta child, usamos 100 píxeles y 100 píxeles de altura. Con eso, su color de fondo es el rojo. Y ahora voy a usar la propiedad float en mi elemento hijo. Entonces HemotipoFlotar, flotar, dejar. Arriba paso este archivo, aquí puedes ver el problema. Ahora elemento childp se mueve fuera del elemento parentib. Para resolver este problema, CSS introduce el valor raíz de flujo. Entonces en nuestro elemento parentib, voy a usar esta propiedad Mostrar flujo Raíz. Y voy a poner este archivo. Después de establecer este archivo, se puede ver el resultado. Como puedes ver, ahora resuelve nuestra proteína. Si utilizo float, right, y el conjunto de este archivo, se puede ver el resultado. Ahora mueve nuestro elemento hijo al lado derecho. Además, no destruye la estructura de nuestros padres. Espero que ahora sea Clearfo ¿cuál es el uso de este valor? Si usas este valor, no necesitamos usar overflow, de lo contrario, clearfake Entonces esto es para este tutorial. Gracias por ver este video Aturdir para el siguiente tutorial 95. Qué es el diseño de cuadrícula de CSS: Hola, chicos. Bienvenido de nuevo. En este tutorial, te voy a presentar qué es CSS grid y cómo funciona, ¿ por qué deberíamos usar CSS codicia El primer eft es, es un sistema de cuadrícula bidimensional Es nuevo sistema de maquetación. Lo llamamos bidimensional porque podemos manejar filas y columnas juntas. Nuestro segundo beneficio es el diseño de rejilla reemplazar el diseño de flotación. Ya no necesitamos usar la propiedad float como Margin tier y no necesitamos enfocarnos en flotar establecido y flotar a la derecha. Podemos crear diseños muy fácilmente. Nuestro tercer beneficio es crear nuestro código muy rápido y limpio porque no necesitamos enfocarnos en las propiedades flotantes y esto aumenta la legibilidad del código Nuestro cuarto beneficio es que no necesitamos usar ningún framework CSS como bootstrap, foundation, CSS materializado, etcétera B si entiendes grid correctamente, entonces no necesitas usar ningún Porque puedes manejar todas las cosas con CSS grid. Tratemos de entender cómo funciona realmente la cuadrícula. Supongamos que esto es un profundo y dentro de esta profundidad, tenemos seis deeps diferentes y llamamos a esta estructura sistema de cuadrícula Sin usar flotación y margen, podemos proporcionar brechas allí y podemos manejarlo juntos. Llamamos a este contenedor padre es contenedor de cuadrícula. Para crear este contenedor de cuadrícula, necesitamos usar la propiedad CSS en nuestra profundidad principal que es la propiedad de visualización, cuadrícula de visualización. Cuando usamos una cuadrícula de propiedades de visualización , automáticamente asume este contenedor padre como contenedor de cuadrícula. Como puedes ver todos los elementos de esta inmersión, nosotros la llamamos elementos de cuadrícula. Aquí puedes ver una licencia individual, llamamos celda de cuadrícula aquí puedes ver algunas líneas entre estas profundas y la llamamos línea de cuadrícula. Aquí puedes ver cuatro líneas de cuadrícula. Todas estas son líneas verticales. Y aquí se puede ver un hueco entre estos dos celulares, nosotros lo llamamos cuneta De igual manera, estas líneas están trabajando verticalmente. Como te dije, está funcionando bidimensional y podemos manejarlo muy fácilmente, y es trabajo como celdas de tabla, fila y columnas. Aquí se puede ver, de acuerdo a esta estructura, tenemos dos filas de cuadrícula en nuestra imagen, y aquí se puede ver en bordes amarillos, lo llamamos columnas de cuadrícula. Y aquí se puede ver un hueco entre filas y columnas, y lo llamamos área de cuadrícula. En nuestros próximos videos, vamos a entender cómo podemos crear cuadrículas. En nuestro próximo video, voy a cubrir todas las propiedades de la cuadrícula en esta serie de tutoriales. También vamos a aprender cómo podemos crear un hermoso diseño usando estas propiedades de cuadrícula. Aquí puede ver el nombre del navegador que puede soportar nuestro sistema de cuadrícula. Internet Explorer no es compatible con el sistema de red. Edad compatible, Firefox lo soporta, Chrome lo soporta, Safari lo soporta, y también Opera lo soporta. La mayoría de las veces estamos trabajando con Chrome Safer y Firefox Gracias por ver este video, estén atentos para nuestro próximo Tutorial. 96. Creación de cuadrícula de CSS con filas y columnas: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender cómo podemos crear arenillas. Vamos a comenzar con dos propiedades. Nuestra primera propiedad es la columna de tabletas Greet, y nuestra segunda propiedad es Greet template Row. Entonces comencemos la práctica y tratemos de entender cómo funciona. Aquí puedes ver, ya creo un documento de eTmal, y abro este documento TML usando la extensión de servidor Life Y en nuestro lado derecho, puedes ver nuestro navegador web. Entonces primero, voy a crear un De donde voy a crear un contenedor de cuadrícula. Dev y también, voy a asignar una clase a este contenedor de clase profunda. Y dentro de esta profundidad, voy a crear otras seis profundidades profundas y voy a establecer como clase, ítem, y ítem uno Voy a duplicar esta profundidad por cinco veces. Aquí utilizo varias clases, y voy a cambiar el nombre de la clase. Tema dos, ítem tres, ítem cuatro, ítem cinco y ítem seis. Dentro de esta profundidad, voy a escribir algún texto. El primero, el segundo, el tercero, el cuarto, el quinto y el último es el sexto. Si pongo este archivo, aquí se pueden ver todos los consejos, primero, segundo, tercero, cuarto, quinto y sexto. Primero, voy a establecer un color de fondo a este contenedor, punto, contenedor, fondo, gris. Yo configuro este archivo, aquí se puede ver el resultado. Además, voy a asignar wed a este contenedor, con 700 píxeles. Como voy a darle margen a este contenedor. Margen. Para top, voy a usar 50 pixel. Para ascensor, voy a usar cero. Para bottom, voy a usar cero, y para p, voy a usar 50 pixel. Si configuro este archivo, aquí puedes ver el resultado. Ahora voy a proporcionar diferentes colores para diferentes artículos. Entonces voy a crear un elemento selector uno. También voy a establecer un fondo a este ítem. Si guardo este archivo, se puede ver el resultado. Ahora voy a duplicar este ítem varias veces. Para el ítem dos, voy a decir color naranja. Para el ítem tres, voy a decir color verde. O punto cuatro, voy a decir color amarillo. Para el ítem cinco, voy a decir color azul, y para el ítem seis, voy a decir color morado. Si configuro este archivo, puedes ver los resultados. Larry puede ver todo el color en nuestras profundidades. Volvamos a nuestro padre D, que clase es contenedor. Voy a usar una propiedad que es display y voy a usar display grid. Si configuro este archivo, aquí se puede ver que no hay cambios porque no creamos fila y columna a esta cuadrícula. Primero, voy a crear columnas. Voy a usar la columna plantilla de codicia. Aquí podemos mencionar cuántas columnas queremos. Con eso, podemos mencionar el ancho de columna. Supongamos que quiero dos columnas, nuestra primera columna es de 200 píxeles de ancho y nuestra segunda columna es de 250 píxeles de ancho. Si configuro este archivo, aquí podemos ver que es crear nuestras columnas. Nuestra primera columna toma 200 píxeles de ancho y nuestra segunda columna toma 250 píxeles de ancho. Aquí puedes ver en una fila creamos dos columnas. Supongamos que quiero cambiar el ancho de la primera columna, algo de 350 píxeles. Si configuro este archivo, se puede ver el ancho de columna. Del mismo modo, podemos establecer la altura usando otra propiedad. Déjame mostrarte. Grandes filas de plantilla. Aquí podemos definir cuántas filas queremos. Aquí puedes ver, tenemos un total tres filas en nuestra continuidad padre. Para nuestra primera fila, quiero decir 100 píxeles de altura. Si configuro este archivo, aquí puedes ver el resultado. Es aplicar solo para nuestra primera fila , y para nuestra segunda fila, quiero establecer una altura de 200 píxeles, y para nuestra tercera fila, quiero establecer una altura de 100 píxeles. Si configuro el archivo, aquí podemos ver el resultado. Si nota, no afecta el ancho de nuestro contenedor, que es de 700 píxeles. No sólo eso, podemos agregar otra columna a esta D. Para esto, primero, voy a reducir el valor de esta primera columna, 150 píxeles, y para nuestra tercera columna, voy a tomar 150 píxeles una vez más, 150 píxeles una vez más. Si configuro este archivo, aquí puedes ver el resultado. Ahora crea tres columnas, y aquí puedes ver para nuestra primera fila, establece una altura de 100 píxeles, y para nuestra segunda fila, establece una altura de 200 píxeles, y no hay una tercera fila en este contenedor. Si tuviéramos la tercera fila en nuestro contenedor, va a establecer una altura de 100 píxeles. Déjame mostrarte. Voy a duplicar este artículo una vez más. Y si configuro este archivo, lo siento, necesitamos duplicar nuestro profundo, no el selector. Si duplico esta D y configuro este archivo, aquí puede ver el resultado. Aquí puedes ver para nuestra tercera fila, crea 100 píxeles de altura porque mencionamos 100 píxeles de altura para nuestra tercera fila. Aquí puedes ver un espacio en blanco, y ahora quiero llenar este espacio en blanco con nuestra tercera columna. Para estos, necesitamos usar una propiedad, que es auto. Si configuro este archivo, aquí puedes verlo llenar el área con nuestra última columna. Voy a llenar todo el espacio restante con nuestra tercera columna Supongamos que quiero cambiar nuestra segunda columna con 100 píxeles. Si configuro este archivo, puedes ver el resultado. Si utilizo Auto para nuestro ancho de segunda columna y si uso este Valu para nuestro tercer ancho de columna, y si configuro este archivo, puedes ver un resultado. Ahora puedes ver nuestra primera columna tomar 150 píxeles de ancho y nuestra última columna tomar 100 píxeles de peso. Y nuestro espacio de mezcla cubierto con la segunda columna porque usamos el valor automático para nuestra segunda columna. Déjame mostrarte una cosa. Si usas el navegador Firefox o Chrome, solo tienes que pulsar Ap 12. Está abierta la opción Developer en tu navegador. Si resalta el dip del contenedor aquí puede ver una opción llamada GET. Como puede ver las propiedades, mostrar GED. Como puedes ver un ícono de GED aquí. Se llama GED Editor. Si haces clic en él, aquí puedes ver muchas opciones. Por ahora, no lo voy a extender. Extenderé todas las cosas después, así que la cierro. Pero si hago clic en esta opción de cuadrícula, aquí se puede ver alguna línea y también se pueden ver los números de línea y nosotros lo llamamos líneas de cuadrícula. Solo es posible si usa la propiedad de cuadrícula de visualización. Aquí puedes ver que usamos píxeles, pero también podemos usar porcentaje. Déjame mostrarte. Supongamos que quiero usar dos columnas. Para primera columna, quiero usar 40% y para nuestra segunda columna, quiero usar 30%. Si configuro este archivo, aquí puedes ver el resultado. Nuestra primera columna cubre 40% del área de nuestro total Con de contenedor. Y ahora quiero usar tercera columna para nuestra tercera columna, voy a usar Auto Vin. Si configuro este archivo, puedes ver el resultado. Nuestra primera columna toma 40% o segunda columna toma 30%, y nuestra tercera columna también toma 30% porque nuestra primera y segunda columna toman 70%. Si I -70% de 100%, el valor restante es 30% Por eso se tarda un 30%. No sólo eso, podemos usar pixel con porcentaje. Supongamos que para nuestra primera columna, quiero usar 100 píxeles. Si configuro este archivo, puedes ver el resultado. Nuestra primera columna es de 100 píxeles y nuestra segunda columna toma el 30% del ancho de nuestro contenedor y nuestra tercera columna cubre el espacio restante. No sólo eso, hay otra unidad que es Fer significa fracción. Supongamos que quiero dos columnas de un Fer y otra es una FR. Si configuro este archivo, aquí lo pueden ver nuestro contenedor profundo. Nuestra primera columna toma la primera mitad y nuestra segunda columna toma o la segunda mitad. Si utilizo otro valor Fer y configuro este archivo, aquí se puede ver, es crear un total de tres columnas y todas las columnas toman un ancho similar, un ancho similar, es igualmente dividir el ancho del contenedor, que es 700. Si utilizo dos valores aer para nuestra tercera columna y luego configuro el archivo, aquí podemos ver que nuestra tercera columna toma dos veces espacio que nuestra primera columna y segunda columna. Aquí puedes ver que podemos controlar rejillas sin usar float A continuación, voy a usar otra propiedad que es grid gap. Déjame mostrarte. Voy a usar 15 píxeles y si configuro este archivo, aquí se puede ver que proporciona igual hueco entre filas y columnas. Si hago clic en esta opción de cuadrícula, la puedes ver. Ahora se puede ver con claridad. En el siguiente tutorial, te voy a explicar con claridad. Hay otra unidad que podemos usar como un valor de columna de plantilla de cuadrícula, que es repetir. Déjame mostrarte. Repetir es básicamente una función. Supongamos que quieres dos columnas con igual ancho. En nuestro primer parámetro, necesitamos pasar cuántas columnas queremos. En nuestro caso, dos, y luego hay que pasar el tamaño de ancho, que es de 150 píxeles. Si configuro este archivo, aquí puedes ver el resultado. Aquí tenemos que escribir el valor de ancho múltiples veces. Si queremos cuatro columnas, necesitamos teclear cuatro aquí. Si configuro este archivo, aquí puedes ver el resultado. Crea cuatro columnas con el mismo ancho. Por ahora, voy a usar dos columnas. Con eso, quiero usar una columna de esfuerzo. Sí, podemos hacerlo. Simplemente escriba uno FR. Si guardo este archivo, aquí se puede ver el resultado. Primero, crea dos de igual tamaño con columna y luego cubre el espacio restante con nuestra tercera columna. Del mismo modo, podemos usar el valor porcentual y el valor de píxel aquí. Déjame mostrarte. Supongamos que quiero 40% de columna. Si guardo este archivo, aquí se puede ver el resultado. Del mismo modo, podemos usar nuestra unidad de fracción en nuestras filas. No sólo eso, podemos usar unidades de fracción para nuestras filas. Pero antes, voy a establecer una altura a nuestro contenedor padre. Altura 700 píxeles. Si configuro este archivo, aquí puedes ver el resultado. Ahora quiero dos filas con igual altura. Voy a usar la función refit, dos filas con una F o altura Si configuro este archivo, aquí puedes ver el resultado. Aquí puedes ver que es dividir por igual nuestras filas. Este valor sólo se aplica para dos filas primera y segunda. Si utilizo tres y luego pongo las cinco, aquí se puede ver que todas las tres filas están divididas por igual. Su altura es igual. Del mismo modo, podemos usar el valor de píxel aquí. Supongamos que para nuestra primera fila, voy a usar 100 píxeles. Para nuestra segunda fila, voy a usar el 30%. Para nuestra tercera fila, voy a usar uno Para unidad. Si configuro este archivo, aquí puedes ver el resultado. Espero que ahora el concepto sea claro para ti. Estas dos propiedades son las más importantes para crear una estructura de cuadrícula. Nuestro primer nombre de propiedad es columna de plantilla de cuadrícula, y nuestro segundo nombre de propiedad es plantilla de cuadrícula Fila. En nuestro siguiente tutorial, vamos a entender qué es la brecha de cuadrícula. Gracias por ver este video, mantente atento para nuestro próximo tutorial. 97. Tutorial de Gap de cuadrícula de CSS: Me alegro de verles chicos. En este tutorial, vamos a aprender una nueva cuadrícula CSS relacionada con propiedades. ¿Cuál es la brecha de cuadrícula CSS? Tenemos un total de tres propiedades relacionadas con la brecha de cuadrícula. Nuestra primera propiedad es la brecha de fila de cuadrícula, y nuestra segunda propiedad es la brecha de columna de cuadrícula y la última es la brecha de cuadrícula. Tratemos de entender cómo funciona la propiedad de brecha de cuadrícula. Aquí se puede ver una brecha entre los elementos de la cuadrícula, lo llamamos brecha de cuadrícula. Si viene con fila sabia, entonces lo llamamos brecha de fila. Y si viene con columna sabia, entonces la llamamos columna Gap. Empecemos la práctica y tratemos de entender cómo funciona. Aquí se puede ver lado a lado, abro mi visual studio coitor y mi navegador usando la extensión de servidor if, y ya creé documento TML en mi directorio Aquí puedes ver, tenemos un total dos columnas de cuadrícula con Oi para valor y tenemos un total de tres filas en nuestra cuadrícula, 100 píxeles, 150 píxeles y 100 píxeles. Entre estos rubros, quiero poner un hueco. A lo mejor voz de fila, a lo mejor columna vie. Primero, quiero usar Row Voice gap. Voy a usar un hueco de fila de cuadrícula de propiedad. Y quiero asignar diez pixel gap entre estas filas. Déjame mostrarte diez píxeles. Si configuro este archivo, aquí puedes ver el resultado. Aumentemos el valor 30 píxeles. Aquí puedes ver los huecos entre filas. Se puede aumentar el tamaño de la brecha, cantidad que desee. Esto es brecha de fila. Si desea espaciar entre columna sabia, entonces necesita usar leer la propiedad Gap de columna . Déjame mostrarte. Voy a escribir ed columna gap. Voy a usar 20 pixel gap entre columnas. Si configuro este archivo, aquí puedes ver el resultado. Aquí puede ver que la brecha de fila es 30 píxeles y la brecha de columna es de 20 píxeles. No solo eso, podemos usar propiedad de Stan para estas dos propiedades. Para estos, necesitamos usar la propiedad de brecha de lectura. Déjame mostrarte brecha. Primero, tenemos que pasar el valor de fila y luego tenemos que pasar el valor de la columna. Para fila, voy a usar 20 píxeles y para columna, voy a usar 30 píxeles. Si usamos la propiedad red gap, no necesitamos usar esta propiedad ya no necesitamos usar esta propiedad, así que la voy a quitar. Si configuro este archivo, aquí puedes ver el resultado. La distancia entre fila es 20 píxeles y la distancia entre columna es de 30 píxeles. Si utilizo igual valor para hueco de fila y hueco de columna, 30 píxeles para fila y 30 píxeles para columna y configuro este archivo, aquí puede ver el resultado. Ahora quiero mostrar tres columnas en nuestro contenedor. Voy a teclear C, repetir la columna tres. Si configuro este archivo, aquí puedes ver el resultado. También puedes ver la brecha similar entre los elementos de la cuadrícula, y aquí puedes ver un espacio en blanco porque usamos tres tamaños de fila diferentes. Si elimino este, significa el último y configuro este archivo. Ahora se puede ver que no hay brecha. Nuestra altura de primera fila es de 100 píxeles y nuestra segunda altura de fila es de 150 píxeles. Espero que ahora te quede claro lo que es la propiedad de Bit gap. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 98. Tutorial de posicionamiento de elementos de cuadrícula de CSS: Una vez más, estoy de vuelta con un nuevo tutorial relacionado con la cuadrícula CSS. En este tutorial, vamos a aprender el posicionamiento de cuadrícula CSS. Tratemos de entender cuáles son los elementos de la cuadrícula y cuál es el significado de la posición del elemento de la cuadrícula. Aquí se puede ver un paren profundo y lo llamamos contenedor de rejilla Todo lo profundo dentro del contenedor paren, lo llamamos artículos de cuadrícula Ahora la pregunta es, ¿cuál es el significado del posicionamiento? Supongamos que quieres mover Grid three item en quinto lugar, y además decides mover Pip tans al tercer lugar, algo así, y lo llamamos gran posicionamiento Como pueden ver, movemos el tercer ítem en el quinto lugar. De igual manera, movemos el quinto ítem en el tercer lugar. Tan relacionado con este tipo de alineación, tenemos algunas propiedades CSS. Déjame mostrarte. Como puede ver, tenemos siete propiedades CSS como inicio de fila de cuadrícula, final de fila de cuadrícula, fila roja, inicio de columna de cuadrícula, etc. Por fin, tenemos una propiedad de extremo corto llamada área de cuadrícula. Así que saltemos al coordinador del estudio visual y tratemos de entender cómo funciona. Aquí puedes ver, ya creo un documento TML y abro mi navegador y mi codador lado a lado Si te muestro, aquí puedes ver, tenemos un contenedor padre dentro de este contenedor padre, tenemos un total de seis de profundidad. Se trata de seis elementos de la cuadrícula. Como puede ver, cada elemento de cuadrícula coloreado es diferente. Al principio, voy a mover el primer elemento de la cuadrícula al sexto lugar. Y de manera similar, voy a mover el ítem de seis cuadrículas al primer lugar. Como puedes ver, ya creamos nuestros selectores. Tema uno ítem dos, ítem tres. Como te dije anteriormente en esta serie de tutoriales, tenemos una opción de navegador en nuestra consola, que son las líneas de cuadrícula. Déjame mostrarte. Simplemente seleccione su navegador y elogie debloper medio Ep 12 Voy a abrir este panel, parte inferior de mi navegador. Voy a presionar esta opción. Aquí puedes ver una opción en mi contenedor de pluma, que es grid. Si hago clic en él, aquí pueden ver algunas líneas. Ahora puedes ver los números de línea de cuadrícula. Se puede ver la fila sabia. También, se puede ver en columna sabia. En este tutorial, vamos a entender cuál es el caso de uso de estas líneas. Vamos a saltar a nuestro primer selector de elementos, que es el ítem uno. Como ya les dije, voy a mover este primer ítem en seis posiciones. Al principio, voy a usar una propiedad que es genial inicio de fila. Al principio, necesitamos mover este ítem de calificación en segunda fila. Como pueden ver, esta es nuestra segunda fila. Voy a teclear dos aquí. Si configuro este archivo, ahora puedes ver nuestro ítem de primer grado pasar a la segunda fila y también necesitamos declarar la posición. Para ello, necesitamos usar otra propiedad CSS, que es la fila de cuadrícula N. Una vez más, si te muestro mis líneas de cuadrícula, aquí puedes ver, nuestra posición final es de tres. Por eso tenemos que pasar tres. Si robot usa la propiedad de fila de cuadrícula, tal vez crea algunos problemas cuando responde a su lado web. Si configuro este archivo, aquí se puede ver, no hay cambios, pero es buena manera de usar esta propiedad. Y ahora necesitamos trabajar con columnas. Como puede ver, necesitamos mover este elemento de la cuadrícula, tercera posición. Para ello, voy a usar otra propiedad CSS, columnas grid revuelven. Aquí, voy a poner tres. Si configuro este archivo, puedes ver el resultado. Trasladamos con éxito nuestro primer artículo leído en el sexto lugar. También necesitamos declarar la posición de esta columna. Lee la columna A. Como puedes ver, nuestra fila termina en cuarta posición, por lo que necesitas pasar cuatro. Si configuro este archivo, aquí puedes ver que no hay cambios. No es obligatorio, pero para fines receptivos, es muy importante. Y ahora quiero mover este cuarto ítem en primera posición. Para eso, voy a copiar este código, y voy a saltar a nuestro cuarto ítem seleccionado y voy a pasar el código. Entonces nuestra fila de inicio es la primera, así que voy a escribir uno y nuestra fila final es dos. De igual manera, como puede ver, nuestras columnas comienzan con una y terminan con dos, tipo Sumo, las columnas comienzan, una y la columna terminan dos. Si configuro este archivo, aquí puedes ver el resultado. Trasladamos con éxito nuestro cuarto contenedor en primer lugar. Pero lo importante es que no cambiamos nuestra estructura timus Aquí puedes ver nuestra estructura extremista. Usando las propiedades de cuadrícula CSS, podemos cambiar sus posiciones sin cambiar su estructura real. Ahora te voy a mostrar método abreviado todas estas propiedades. Ahora quiero mover el quinto ítem en primer lugar. Entonces salto al selector de quinto elemento, y luego voy a usar una propiedad de cuadrícula CSS diferente. Si desea crear una taquigrafía para fila, entonces necesita usar la propiedad de fila de cuadrícula Déjame mostrarte la fila de calificaciones. Primero, necesitamos proporcionar esta posición de fila inicial , que es una, y luego necesita usar slash luego necesitamos proporcionar la posición de fila final, que es dos Del mismo modo, tenemos propiedad taquigráfica para columna, que es columna de cuadrícula. Déjame mostrarte. Nuestras columnas comienzan con la línea número uno y terminan con la línea número dos. Si configuro este archivo, aquí pueden ver, movemos con éxito nuestro artículo de quinto grado en primer lugar. Pero ¿qué pasa con el artículo de cuarta raza? No eliminamos artículo de cuarta raza de este contenedor. Sigue existiendo en primer lugar. Apenas el punto cinco, se superpone al cuarto. Por eso no podemos ver el cuarto. No sólo eso, tenemos otra taquigrafía de esta propiedad Usando esta taquigrafía, podemos pasar el valor del puerto a la vez, que es el área de la cuadrícula. Déjame mostrarte. Supongamos que quiero mover el sexto ítem en segundo lugar. Para estos, necesitamos proporcionar inicio de fila y punto de inicio de columna. Nuestro punto de inicio de fila es uno y nuestro punto de inicio de columna es dos, y luego necesitamos proporcionar fila y el punto final de columna. Nuestro punto final de fila es dos y nuestro punto final de columna es tres. Si configuro este archivo, aquí pueden ver que movemos con éxito nuestro contenedor seis en segundo lugar. Solo necesitamos usar una propiedad de cuadrícula CSS, que es el área de cuadrícula. Solo necesita recordar, primero, debe proporcionar el punto de inicio de la fila y luego debe proporcionar el punto de inicio de la columna. A continuación, debe proporcionar un punto final de fila y debe proporcionar un punto final de columna. Espero que ahora te quede claro cómo funcionan las columnas de fila. Hay muchos métodos en los que podemos posicionar nuestras cuadrículas. En mis próximos videos, te voy a enseñar a todos ellos. En nuestro siguiente tutorial, vamos a aprender ¿cómo podemos cubrir nuestros elementos de cuadrícula? Supongamos que quieres cubrir tu tercer artículo con solo quiero llenar esta área en blanco con este tercer artículo. Significa que va a tomar dos columnas de ancho. Recuerdo este método, span. Estén atentos para nuestro próximo tutorial. Gracias por ver este video. Nos vemos pronto. 99. Tutorial de expansión de elementos de cuadrícula de CSS: Me alegro de verles chicos. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con la cuadrícula CSS. En este tutorial, vamos a aprender elemento de cuadrícula CSS, abarcando Pero antes de comenzar la práctica, necesitamos entender cuál es el significado de span. Vamos a simplificarlo. Aquí se puede ver un contenedor de rejilla, y dentro de este contenedor de rejilla, tenemos hasta seis artículos. Si te das cuenta, puedes ver cada artículo D con el mismo, y ahora quiero extender d1w Quiero extender el artículo número uno hasta dos artículos. De igual manera, quiero extender el ítem dos filas, algo así. Para el artículo uno, usamos el tramo de columna, y para el elemento dos, usamos rowspan y otros artículos dispuestos automáticamente en su propio lugar Empecemos la práctica y tratemos de entender cómo funciona. Aquí se puede ver lado a lado, abro mi visual studio coreor y mi navegador usando la extensión del servidor light Como puede ver, tenemos un total de seis artículos de rejilla en nuestro contenedor de patente y lo arreglamos en serie. Empecemos por las líneas de la cuadrícula. Voy a alabar a Atwel. Y si hago clic en esta opción, se pueden ver las líneas de la cuadrícula. Y ahora quiero pasar nuestro primer ítem, columna sabia, quiero extender esta columna hasta la línea número tres. Voy a escribir Mala columna d tres. Ya sabes que el artículo uno es nuestro primer artículo. Si configuro este archivo, aquí puedes ver el resultado. Abarcar con éxito nuestro primer elemento de cuadrícula, columna uno. Si notas puedes ver que todos los elementos de la cuadrícula cambian automáticamente sus lugares. Se puede ver que el ítem número seis ha bajado y no especificamos ninguna altura a nuestra tercera fila. Por eso se ve pequeño. Ahora voy a especificar altura para esta tercera fila, 100 píxeles. Si configuro este archivo, ahora puedes ver el resultado. Nuestra altura de primera fila es de 150 píxeles y nuestra segunda altura de fila es de 150 píxeles, pero nuestra tercera altura de fila es de 100 píxeles. Una vez más, voy a encender mis líneas de cuadrícula. Y ahora quiero extender nuestra segunda fila de ítems sabiamente, y quiero extenderla de este punto a este punto. Significa cuatro. Para ello, necesitamos trabajar con estas dos propiedades. Voy a copiar estas propiedades y pegarlas aquí. Voy a cambiar el punto final de fila de grado, que es cuatro. Si configuro este archivo, aquí puedes ver el resultado. Ahora se ve como una página web. Este es nuestro encabezado, y esta es nuestra barra lateral. No sólo eso, podemos usar la propiedad taquigrafía para esto. Déjame mostrarte leer fila. Si comento esto a la propiedad, y si tecleo 14, y si configuro este archivo, aquí se puede ver el mismo resultado. No hay cambios. Espero que ahora te quede claro cómo se usan las ortografía. Déjame mostrarte una cosa. Aquí puedes ver, tenemos que decir tres columnas con una e o valor. Para este ejemplo, voy a comentar esta propiedad. Una vez más, voy a encender las líneas de la cuadrícula. Aquí se puede ver, tenemos que decir cuatro líneas de columna en nuestra estructura. Pero lo que pasó si pasamos cinco valor aquí, si configuro este archivo, aquí lo puedes ver extender nuestra columna con valor predeterminado. Ahora tenemos un total de cuatro columnas en nuestro contenedor. Pero aquí se puede ver, no declaramos cuatro columnas, solo declaramos tres columnas. Podemos extender nuestro artículo de rejilla más allá del contenedor. Entonces automáticamente ordena el elemento de la cuadrícula de acuerdo con el valor de la fracción Pero esta no es la buena práctica, así que voy a usar cuatro. Si configuro este, se puede ver el resultado. Ahora voy a arreglar el tercer ítem en su posición absoluta. Para esto, dentro del selector de ítem tres, voy a escribir grit Row Y también voy a encender las líneas de la cuadrícula. Nuestro tercer artículo comienza desde la fila número dos y termina hasta la fila número tres, nuestra siguiente propiedad es la columna de cuadrícula. Y también comienzas desde la columna número dos y terminas en la columna número tres. Si configuro este archivo, puedes ver que no hay cambios. Esta es la posición absoluta del tercer ítem. Ahora no puedo mover esta cuadrícula de este espacio, y ahora quiero extender el ancho de la segunda columna hasta la línea número tres. Para ello, voy a usar la propiedad de columna de cuadrícula. Y nuestra columna comienza desde la línea número uno y termina en la línea número tres. Si configuro este archivo, puedes ver un resultado diferente porque ya colocamos nuestro tercer dip en esa posición, por lo que nuestro segundo elemento de la cuadrícula no puede tomar su lugar. Luego se encoge automáticamente. Pero si te das cuenta, puedes ver usamos solo la propiedad de columna de cuadrícula. No utilizamos la propiedad de fila de cuadrícula. Si utilizo la propiedad de fila de cuadrícula, déjame mostrarte. Fila e intenta mover este artículo en este lugar. Déjame mostrarte. Pero primero, voy a encender la línea roja. Nuestra fila comienza desde la línea número dos y termina hasta la línea número tres. Si configuro este archivo, ahora puedes ver un resultado diferente. Ahora se superponen entre sí. Si quieres ver el ítem S completamente, entonces necesitas usar la probidad del índice Z. Déjame mostrarte. Voy a escribir el nombre de probidad índice Z. Por defecto, viene con cero. Suma raíz tipo uno. Si configuro este archivo, ahora se puede ver el segundo ítem con completamente. Nuestro tercer ítem aún existe detrás de este segundo ítem. Ahora voy a mostrarte el diferente valor que usamos para abarcar, que es span Déjame mostrarte. Suma roo tipo, span, y quiero abarcar nuestro primer ítem hasta cuatro columnas span, espacio, cuatro. Si configuro este archivo, lo siento, no tenemos cuatro columnas en nuestro contenedor. Es por eso que extiende la columna y crea una nueva línea de rejilla. Para eso, necesitamos usar span tres. Si configuro este archivo, ahora volvemos a nuestro antiguo resultado. Si te muestro las líneas de la cuadrícula, aquí puedes ver que tenemos un total de cuatro líneas. Este trabajo de valor con números de elemento de cuadrícula y este trabajo con números de línea de cuadrícula. Esta es la principal diferencia entre dos valores. Como podemos abarcarlo fila sabiamente. Déjame mostrarte. Span dos. Si configuro este archivo, ahora abarcamos nuestro primer contenedor, fila también es columna vois Debido a que usamos propiedad indexada para nuestro segundo artículo, es por eso que nuestro primer artículo, no cubre el segundo artículo. Sé que es un poco complicado, pero estoy tratando de explicarlo muy sencillo. No sólo eso, podemos usar este valor con este valor diferente. Déjame mostrarte abarcan dos. Si configuro este archivo, aquí puedes ver el resultado. Por ahora, no lo necesito, lo voy a deshacer. Y también quiero cambiar el valor final del dibujo de la cuadrícula. Dos. Una vez más, voy a encender las líneas de la cuadrícula. Supongamos que tenemos muchas columnas en nuestro contenedor, y quiero extender el elemento de la cuadrícula roja de principio a fin de este contenedor. Pero no sé cuánta línea de columna tenemos. Para estos, podemos usar puntos menos. Aquí puedes ver un número de línea menos uno. Recuerda, nuestro último número de línea siempre comienza con menos uno. Entonces podemos usar el menos vo aquí. Déjame mostrarte. Si tecleo menos uno y configuro este archivo, aquí puedes ver que no hay cambios. Espero que ahora te quede claro cómo son las franjas por lo que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 100. Tutorial de nomenclatura de líneas de cuadrícula de CSS: Hola, chicos. Es bueno verte de vuelta. En este tutorial, vamos a aprender la nomenclatura de líneas de cuadrícula CSS En nuestro tutorial anterior, usamos líneas de cuadrícula para hacer girar nuestros elementos de cuadrícula. Pero en este tutorial, vamos a aprender cómo podemos asignar nombre de línea, y ¿cómo podemos usar el nombre de línea como valor? Déjame simplificarlo. Este es nuestro artículo de encabezado, y este es nuestro elemento de la barra lateral. Para crear este elemento de la barra lateral, necesitamos usar gDrawPperty y En la propiedad de redibujar, primero, tenemos que pasar el punto de inicio de línea y luego tenemos que pasar el punto final de línea Pero en este tutorial, no vamos a usar números de línea. Vamos a crear nuestro propio nombre de valor. Como pueden ver, para el punto de partida, utilizo inicio de la tarjeta lateral y para el punto final, utilizo Empecemos la práctica y veamos cómo funciona. Aquí puedes ver, lado a lado, abro mi estudio de usuario Creator y mi navegador usando la extensión del servidor Lip. Ya creo un documento stimal para este ejemplo aquí se puede ver un layout web, cual creo usando cuadrículas Aquí puedes ver un encabezado, una maniobra para diferentes cajas, y una barra lateral y lujuria un pie de página, aquí puedes ver el contenedor y todo el DV dentro de este contenedor Yo creo este diseño usando spanning. Vamos a saltar al selector de profundidad del contenedor. Aquí puedes ver, tenemos un total tres columnas de rejilla con una A para valor. Como puede ver, tenemos un total de cinco filas con diferentes tamaños. Para cabecera, utilizo 150 píxeles de altura. Para maniobra, uso 50 píxeles de altura, y para nuestra tercera fila, una vez más, utilizo 150 píxeles de altura Y para pie de página, una vez más, utilizo 50 píxeles de altura. Y aquí puedes ver, abarco mi encabezado de principio a fin de uno a menos uno, y aquí puedes ver, usamos valor de cuadrícula para Voy a encender mis líneas de cuadrícula usando el modo desarrollador. Y se pueden ver los números de línea. Esta no es una plantilla muy compleja, pero en algún momento necesitamos enfrentar plantillas difíciles o una plantilla muy compleja En ese caso, es muy difícil recordar estos números y puede crear problemas muy grandes. Entonces, para resolver este problema, asignamos un nombre a estas líneas y llamamos a este proceso la nomenclatura de líneas de cuadrícula Entonces veamos cómo funciona. Primero, voy a comenzar con filas, y necesitamos asignar estos nombres de líneas con estos valores. Entonces para la línea de cuadrícula número uno, voy a usar un nombre que es inicio de encabezado. Déjame mostrarte. Primero, voy a usar la sis cuadrada. En cambio el cuadrado sis, voy a asignar un nombre para nuestra primera línea, inicio de cabecera. Solo hay que recordar que no puede dar ritmo entre dos orbes Y voy a encender Word wrap. De lo contrario, no se pueden ver mis líneas. Puedes usar guiones, guiones bajos o cualquier otro carácter Si comienzo este encabezado, también, tenemos que terminar este encabezado, y quiero terminar este encabezado en la fila número dos. Quiero usar cuadrado *** una vez más y en su lugar el cuadrado ***, voy a escribir header end, header end. Si configuro este archivo, aquí puedes ver que no hay cambios. Ahora les voy a mostrar cómo podemos usar estos nombres en nuestro valor. En nuestra propiedad gredro, voy a escribir header start porque este es nuestro punto de partida Y para nuestro punto final, voy a usar el valor final de encabezado. Si guardo este archivo, aquí pueden ver, no hay cambios. Así que nuestros nombres funcionan correctamente. Vamos a saltar a la sección del menú. Vamos a crear un punto de partida para Menú. Para ello, no necesitamos usar otra base cuadrada. Solo quiero usar un espacio entre el extremo del encabezado y el punto de inicio del Menú. Para el punto de inicio del Menú, voy a usar Manurt Voy a usar el nombre de inicio del menú. principio a fin este menú después de 50 píxeles, voy a usar el nombre de fin del menú Fin del menú. Voy a usar estos nombres en nuestras propiedades de Bedro. Déjame mostrarte. Voy a copiar el nombre de inicio del menú, y voy a reprimir dos con este nombre Para nuestro valor final de menú, voy a usar el nombre de fin de menú. Si configuro este archivo, aquí puedes ver que no hay cambios. Es un trabajo muy perfecto. Similitud, puedes tomar nombres para todas las filas. Estos métodos de nomenclatura de líneas son muy útiles cuando trabajamos con diseños complejos Ahora voy a nombrar nuestras columnas. Aquí se puede ver que tenemos a tres columnas. Pero si notas puedes ver, aquí usamos el valor de repetición, y yo uso un valor de esfuerzo para tres columnas. ¿Cómo podemos asignar nombre para los valores repetidos? Hay dos métodos que puedes asignar nombre para tus columnas. O tecleas un esfuerzo tres veces y cada vez que usas estos corchetes. De lo contrario, podemos asignar nombre con este valor de repetición. Déjame mostrarte. Antes de uno por valor, voy a usar un nombre, que es call start. Y después de un valor de esfuerzo, voy a escribir call end. Puedes escribir cualquier nombre como quieras , pero hay un problema. Se va a usar llamada Inicio y llamada tres veces. Primero, va a usar Call Start aquí, y luego va a usar call end aquí. Una vez más, va a usar Call Start aquí y luego va a usar Call end aquí y seguir adelante. ¿Cómo podemos usarlo correctamente? Para ello, primero, necesitamos teclear llamar Inicio. Y luego tenemos que asignar desde donde empiezan nuestras columnas. Nuestras columnas parten de un smartype uno. Para endpoint, voy a usar call end Call. Porque abarco hasta tres columnas, así que voy a usar tres cabellos. No necesitas notar el número de línea aquí, necesitas notar cuántas columnas quieres usar. Si configuro este archivo, aquí puedes ver que no hay cambios. Entonces no hay problema. Funcionó perfectamente. Ahora quiero abarcar nuestro encabezado hasta dos columnas. Quiero usar dos cabellos. Si configuro este archivo, puedes ver el resultado. Se utilizó el valor de dos columnas para el elemento de cabecera. Quiero volver a mi antigua posición, algunos para usar tres. Podemos usar el mismo valor para nuestras columnas de menú. Déjame mostrarte algunos para copiar el valor y voy a reemplazarlo por éste. Debido a que nuestro elemento de menú toma una cantidad de área de columna, es por eso que podemos usar este valor. Si guardo este archivo, se puede ver que no hay cambios. De esa manera, puedes asignar cualquier nombre para tus líneas y podrás usarlo varias veces. Espero que el concepto de nombres de cuadrículas sea claro para ti. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 101. Tutorial de nomenclatura de áreas de cuadrícula de CSS: Me alegro de verlos de vuelta, chicos. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS Grid. Tutorial de Inglish, vamos a aprender CSS grid area, name En nuestro tutorial anterior, aprendemos sobre la nomenclatura de líneas de cuadrícula Pero en este tutorial, vamos a aprender a nombrar áreas de cuadrícula Utilizamos este método para posicionar nuestros elementos de la cuadrícula. Veamos qué tipo de propiedades tenemos que podemos usar para el posicionamiento. Nuestra primera propiedad es áreas de plantilla de cuadrícula y nuestra segunda propiedad es área de cuadrícula. Empecemos lo práctico y tratemos de entender cómo funciona su trabajo. Aquí puedes ver en nuestro tutorial anterior, creamos un diseño básico usando propiedades de cuadrícula y aquí asignamos nombres para líneas de cuadrícula. Y usando estos nombres, posicionamos nuestro artículo y abarcamos nuestros artículos. Ahora voy a crear la misma plantilla sin usar la propiedad de fila de cuadrícula y la propiedad de columna de cuadrícula. No necesitamos usar nombres de líneas para eso. Aquí pueden ver, tengo otro archivo de tabla, área de cuadrícula en, y voy a usar esta plantilla. Al principio, dividimos esta cuadrícula en tres columnas con una F para Valor y ya tenemos fibrosa para encabezado para menú, para cajas y para pie de página. Ahora voy a asignar un nombre diferente para cada elemento de la cuadrícula. Para esto, voy a usar propiedad de área de cuadrícula. Dentro de esta área de cuadrícula, puedes tomar cualquier nombre. Voy a usar el mismo nombre para eso, que es encabezado. Y no necesitamos usar códigos invertidos para eso. Del mismo modo, voy a usar la misma propiedad para cada artículo de grado. Para Menú, voy a usar el mismo nombre, Menú para caja, voy a usar la caja uno. Para la caja dos, voy a usar la caja dos. Para la caja tres, voy a usar la caja tres. De igual manera, para la casilla cuatro, voy a usar la casilla cuatro. Para sidebar, voy a usar el mismo nombre, que es sidebar para Footer, voy a usar Footer. Si configuro este archivo, aquí se puede ver que todo está desaparecido. Porque no utilizamos ningún posicionamiento, por eso los artículos se han ido. En nuestro paren deep, voy a usar una propiedad nueva. Déjame mostrarte y el nombre de nuestra propiedad es excelentes áreas de plantilla, excelentes áreas de plantilla. Dentro de las áreas de plantilla de cuadrícula, voy a usar códigos dobles. Déjame mostrarte una cosa. Voy a volver a mi antiguo expediente. Aquí puedes ver mi maquetación anterior. Si presiono Aptl y enciendo líneas de cuadrícula, aquí puedes ver que hemos sacado tres columnas en nuestra estructura y nuestra sección de encabezado usa tres columnas para eso Así que estoy de vuelta a mi nuevo diseño y aquí voy a usar este nombre de encabezado tres veces. Déjame mostrarte. Entonces para copiar el nombre, y lo voy a pegar aquí. Encabezado, encabezado y encabezado. Para tres columnas, uso este nombre por tres veces. Si configuro este archivo, aquí puedes ver el resultado. Pero si notas, deja un ritmo en blanco porque espera seis filas en nuestra estructura de cuadrícula, y aquí solo usamos una fila. Una vez más, si te muestro mi antiguo diseño, aquí puedes ver nuestro menú también usar tres columnas. Entonces dentro de los códigos dobles, voy a usar Nombre del menú por tres veces. Si configuro este archivo y te muestro mi maquetación, aquí puedes ver el resultado. Una vez más, estoy de vuelta a mi viejo diseño. Aquí puedes ver en nuestra primera columna, usamos el cuadro uno. En nuestra segunda columna, usamos la casilla dos, y en nuestra tercera columna, usamos la barra lateral. Voy a duplicar esta línea, y para nuestra primera columna, voy a usar box one name. Para nuestra segunda columna, voy a usar el cuadro dos nombre. Para nuestra tercera columna, voy a usar Sidebar Name. Usamos estos nombres de columna para nuestra tercera fila, una vez más, voy a excavar esta línea Aquí puedes ver nuestra cuarta fila, comenzar con la casilla tres, luego venir la casilla cuatro, y luego venir barra lateral una vez más. Voy a escribir la caja tres, la casilla cuatro, y luego voy a la barra lateral. En nuestra última fila, aquí puedes ver, usamos tres columnas para nuestro pie de página. Voy a usar este nombre de pie de página tres veces si Dov TER pie de página, pie de página y pie Y punto y coma para terminar esta línea. Si configuro este archivo y te muestro mi diseño, aquí puedes ver que creamos con éxito nuestro diseño antiguo sin usar la propiedad de fila de cuadrícula y columna de cuadrícula. Este es el segundo método que podemos usar para posicionar nuestros elementos de cuadrícula. Solo necesitamos usar dos propiedades para eso. Nuestra primera propiedad es área de cuadrícula y nuestra segunda propiedad es áreas de tabletas de cuadrícula. Por lo que este tipo de técnica de posicionamiento es muy útil para proyectos pequeños. Si tu diseño no es complejo, entonces puedes usar este proceso. Pero si tu proyecto es más complejo y grande, no recomiendo usar este proceso. Si notas, aquí puedes ver, usamos tres nombres de columna para cada fila. Si elimino uno del nombre de la columna, cualquiera de la fila, así que voy a quitar menú. Y si configuro este archivo, aquí se puede ver que todo se ha ido. Debido a que usamos tres columnas, es por eso que necesitamos pasar tres nombre de columna. Si configuro este archivo, una vez más, aquí se puede ver, ahora se ve perfecto. Y ahora, supongamos que desea utilizar dos columnas para la sección del menú. En ese caso, hay que pasar punto aquí. Si configuro este archivo, ahora es trabajo. Si desea usar el elemento de menú solo en la segunda columna, en ese caso, debe pasar otro punto antes del punto de menú punto de menú. Si configuro este archivo, puedes ver el resultado. Podemos alinear nuestro elemento de cuadrícula y podemos posicionar nuestro elemento de cuadrícula solo usando puntos. Pero no se puede usar este punto en medio de estas dos columnas. Déjame mostrarte. Si elimino encabezado de este lugar y uso un punto y configuro este archivo, puede restroy tu diseño Una vez más, voy a repetir este proceso como funciona. Al principio, debe usar un área de codicia de nombre de propiedad para cada elemento de codicia, y luego debe asignar un Puedes usar cualquier nombre para eso. Luego, dentro del selector de contenedor padre, debe usar una propiedad que es áreas de plantilla de cuadrícula. Entonces necesitas recordar cuántas columnas asignas a esta estructura de cuadrícula. Según mi maquetación, aquí se puede ver, utilizo tres columnas. Entonces en cada fila, tenemos que pasar tres Valu y aquí se puede ver, abarcamos nuestra fila de la barra lateral es también. Por eso uso este nombre de barra lateral en la fila número tres y la fila número cuatro. Espero que ahora entiendas lo que es el nombre del área de cuadrícula. Gracias por ver este video y mantente atento a nuestro próximo tutorial. 102. Tutorial de la función MinMax de cuadrícula de CSS: Oye, es bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado CSS greet. En este tutorial, somos manera de aprender CSS Greet MinMax función. Usando esta función, podemos cambiar dinámicamente la altura de filas y columnas. Empecemos. En este tutorial, vamos a aprender otros dos valores sin Min Max. El primero es el contenido máximo y el segundo es el contenido mínimo. Veamos cómo podemos cambiar el ancho de realzar dinámicamente. Aquí se puede ver lado a lado, abro mi visual studio coater y mi navegador usando la extensión del servidor lip Y ya creo un documento TML. Como puede ver, dentro de mi contenedor de patente, tenemos ocho ventas de grid diferentes y declaramos columna Ford para nuestras ventas de grid con un valor FR. También tenemos dos filas con 175 píxeles de altura. Empecemos la práctica. Empecemos la práctica. Como pueden ver en mi primer elemento de la cuadrícula, hay un texto, nombre primero. Voy a insertar más texto dentro de este elemento de la cuadrícula. Luum 20. Va a agregar 20 palabras dentro de este elemento de la cuadrícula. Si configuro este archivo, aquí puedes ver el resultado. Déjame reducir algunas palabras y luego voy a poner este archivo. Aquí puedes verlo averías nuestras líneas según OID este elemento de la cuadrícula Pero qué pasó si utilizo Max content value para nuestra primera columna, usémoslo. Voy a usar Max content value para nuestra primera columna. Si configuro este archivo, puedes ver el resultado. Aquí puedes ver que no hay salto de línea para este párrafo y también desbordamiento del contenedor con tamaño. Si usamos este valor, no va a romper nuestras líneas. Va a imprimir todo el párrafo en una línea. No es una cosa muy útil para nuestros proyectos reales. Voy a reducir alguna palabra de este párrafo. Y luego voy a guardar este archivo. Vamos a reducir algunas palabras más. Ahora se ve perfecto. Ahora voy a agregar algo más de texto en nuestro cuarto contenido, Lum, diez, y voy a guardar este archivo. Entonces voy a usar nuestro siguiente Valor para esta columna, que es el contenido de Mint. Si configuro este archivo, aquí puedes ver el resultado. Cambia dinámicamente los ocho según la palabra más grande de esta frase. Como voy a añadir más texto en este ítem. Agreguemos más texto. Presa ocho. Si configuro este archivo, aquí puedes ver, nuestro texto superpone el elemento de la cuadrícula. Para resolver este problema, podemos agregar un valor mínimo de contenido en nuestra fila. Déjame mostrarte. Voy a quitar el valor de 170 píxeles y aquí voy a escribir Mint content value. Si configuro este archivo, ahora se puede ver que decía la altura del ítem de calificación, acuerdo con el área de texto. Supongamos que quiero agregar párrafo de 50 vatios en nuestro séptimo ítem. Voy a saltar al séptimo ítem y voy a escribir Lorem 50 Si configuro este archivo, aquí puedes ver, aquí puedes ver, según el tamaño del texto, es cambiar altura y ancho. Se va a consumir estatura mínima y peso mínimo según este texto. Por eso este nombre de valor es contenido principal. Y ahora quiero fijar la altura mínima de nuestra fila. Voy a quitar alguna palabra de este texto. Entonces voy a configurar este archivo. Ahora voy a usar la función MinMax para establecer una altura fija Déjame mostrarte. Voy a usar la función Min Max aquí. Mín Máx. Dentro de este paréntesis, y aquí tenemos que pasar los dos valores para tamaño mínimo de pro y para tamaño máximo de pro Supongamos que nuestra altura mínima de fila es 175 píxeles y para el máximo, voy a usar la propiedad main content. Porque quiero cambiar la altura acuerdo a este tamaño de contenido, si nuestro contenido toma más de 170 píxeles de altura. Si configuro este archivo, aquí se puede ver por defecto, nuestra fila viene con 170 píxeles de altura. Pero como puedes ver en nuestra primera fila, toma más de 170 píxeles de altura porque contiene tamaño tomar más de 170 píxeles para nuestro valor máximo, utilizamos contenido principal. Por eso puede tomar tanta altura que quiera. La función Min Max es muy útil para nuestras filas. Aquí decimos valor mínimo para la altura de nuestro artículo. Pero si nuestro contenido toma más altura, entonces podemos usar el valor del contenido principal como valor máximo. Pero qué pasó si digo 200 píxeles de altura máxima, déjame mostrarte. Si configuro este archivo, aquí puedes ver, por defecto, nuestra segunda fila toma 175 píxeles de altura, pero nuestra primera fila se extiende hasta 200 píxeles y luego nuestro desbordamiento de contenido de este ítem. Por eso nos referimos a usar contenido principal como tamaño máximo. Contenido principal. Ahora puede contener todo el contenido en nuestra fila y ahora voy a usar la función MinMax como valor de columna Vamos a usarlo. Para nuestra primera columna, voy a usar la función MinMax. Voy a establecer un ancho mínimo de esta columna, que es de 150 píxeles. Además, voy a tomar 200 píxeles para ancho máximo. Y aquí se puede ver que ya establecemos el ancho máximo del contenedor, que es de 700 píxeles. Pero voy a usar el valor porcentual en este lugar, 80%, y va a hacer que nuestra página web sea más receptiva. Si configuro este archivo, aquí puedes ver el resultado. Agreguemos más contenido a nuestra primera columna. Lorom seis. Aquí puedes ver nuestra primera columna tomar ancho máximo de 200 píxeles. Si aumento el tamaño de ancho máximo, 300 píxeles y luego configuro este archivo, ahora puedes ver los cambios. Por defecto, va a tomar 150 píxeles de ancho, y puede extenderse hasta 300 píxeles. Después de eso, va a romper nuestras líneas. Ahora voy a usar 200 píxeles para nuestro ancho mínimo. Si activo mi opción de desarrollador y selecciono este contenido, aquí puedes ver el ancho máximo de este contenido es de 300 píxeles. Si trato de hacerlo responsive, y después selecciono este ítem, aquí puedes ver que el ancho mínimo de este ítem es 200 pixel porque ya establecemos un tamaño mínimo a esta columna. Del mismo modo, si escalamos nuestra ventana, déjame mostrarte. Y luego selecciona este ítem, podrás ver que no puede extenderse con más de 300 píxeles. Espero que ahora te quede poco claro cómo funciona. Si utilizo el valor porcentual en nuestra talla máxima, déjame mostrarte. 60%. Después establece este archivo. Ahora puedes ver un resultado diferente. Va a tomar un 60% de ancho de este contenedor. Aquí podemos usar valor porcentual, valor de aire, valor de píxel, etcétera Pero si reduzco el tamaño del navegador y luego se va a detener en 200 píxeles de ancho, no podemos reducir nuestra primera columna más de 200 píxeles. Espero que ahora quede claro cómo se trabaja el valor principal y el valor máximo. Gracias por ver este video y estad atentos para nuestro próximo tutorial. 103. Tutorial de cuadrícula de CSS implícito y explícito: Me alegro de verles chicos. Una vez más, estoy de vuelta con un nuevo tutorial y en este tutorial, vamos a aprender cuadrícula implícita y codicia explícita Veamos qué es eso. Aquí se puede ver lado a lado, abro mi coheor de visual studio y mi navegador usando IPSeretension Como puede ver en mi contenedor padre, tenemos un total de ocho celdas de cuadrícula. Al principio, voy a establecer con altura. Al principio, voy a usar el valor de columna de plantilla de cuadrícula, leer columnas de plantilla y voy a crear dos columnas con un valor efer Para estos, voy a usar el valor de repetición. Repita dos columnas con una e o valor. Si configuro este archivo, puedes ver el resultado. También voy a decir altura de fila. Para esto, voy a usar la propiedad de raíz templada de Creta. Pero voy a decir tres filas de altura a partir de esta cuatro fila. Voy a usar el valor de repetición una vez más, repetir tres filas coma valor de 100 píxeles Si configuro este archivo, puedes ver el resultado. Además, voy a proporcionar brecha entre estas celdas. Entonces para escribir, leer, propiedad gap. 20 pixel. Si configuro este archivo, puedes ver el resultado. Entonces aquí puedes ver, acabamos definir dos tamaños de columna y tres tamaños de fila. Pero tenemos que decir ocho celdas en esta estructura. No diseñamos nuestro séptimo artículo de cuadrícula y ocho elementos de cuadrícula. Supongamos que extraemos dinámicamente los datos del servidor, y quiero mostrar estos datos en nuestra séptima y octava columna. Para estos, necesitamos establecer la altura, pero ya definimos la altura usando la probidad de filas de plantilla de cuadrícula Entonces, ¿qué son estas columnas? ¿Cómo podemos establecer la altura de estas columnas? Déjame mostrarte algo. Si elogio a Eptel y te muestro mi barra de herramientas para desarrolladores y hago clic en este ícono de cuadrícula, aquí puedes ver algunas líneas de cuadrícula Como puede ver, le damos estilo a tres filas y dos columnas, y llamamos a esta estructura grano explícito, porque definimos explícitamente esta área usando estas dos propiedades Y esta que no definimos, y la llamamos codicia implícita Entonces, para darle estilo a esta cuadrícula implícita, tenemos algunas propiedades nuevas Vamos a verlo. Aquí puedes ver, tenemos un total de tres propiedades relacionadas con la cuadrícula implícita Nuestra primera son las filas automáticas de cuadrícula, nuestra segunda son las columnas automáticas de cuadrícula y la última son los flujos de cuadrícula automática. Empecemos lo práctico y tratemos de entender cómo funciona su trabajo. Después de brecha de cuadrícula, voy a usar nuestra nueva propiedad, que es autoros de cuadrícula Así que escribe, túnicas automáticas de grano Aquí podemos definir nuestra altura implícita de fila de cuadrícula. Para nuestro ítem implícito, voy a definir 50 píxeles de altura Si configuro este archivo, ahora puedes ver ahora la altura implícita del elemento de grado es de 50 píxeles Si agregamos más celda a este contenedor, permítame mostrarle a alguien que duplique esta línea dos veces y establezca este archivo. Ahora puedes ver que establece automáticamente la altura de 50 píxeles para estos elementos de la cuadrícula. Por ahora, voy a eliminar estas columnas. No lo necesito y configuré este archivo. Aquí puedes ver cuando añadimos una nueva celda, se va a agregar fila es. Pero ahora quiero agregar nueva columna celular sabia. Para eso, necesitamos usar otro valor, que es el flujo automático de rejilla, así tipo, rejilla, flujo automático. Viene con dos tipos de valor, fila y columna. Por defecto, es trabajar con fila. Pero aquí voy a usar columna. Si digo este archivo, ahora se puede ver el resultado porque ya definimos tres filas en nuestra grilla explícita, luego después de tres filas va a agregar todo el artículo de ventas columna sabia. Aquí puedes ver que no definimos ningún tamaño de columna a este elemento de cuadrícula. Se toma con de acuerdo a este tamaño de texto, y ahora quiero asignarnos a nuestra cuadrícula implícita Para eso, necesitamos usar una propiedad que es grid auto column. Y aquí voy a aportar 0.5 e o valor para nuestra grilla implícita Si configuro este archivo, aquí puedes ver el resultado. Nuestras columnas de cuadrícula explícitas toman una e o valor y nuestra columna de cuadrícula implícita toma la mitad e o valor Si agrego algo más de columna a este contenedor, déjame mostrarte luego establecer este archivo. Ahora puedes ver, también es tomar 0.5 e o valor según este elemento de la cuadrícula. Esta es nuestra cuadrícula implícita y nuestra cuadrícula explícita. Espero que ahora te quede claro, gracias por ver este video. Estén atentos para nuestro próximo Tutorial. 104. Tutorial de alineación de elementos de cuadrícula de CSS: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender la alineación de elementos de cuadrícula CSS. En nuestro video anterior, aprenderemos sobre cómo podemos crear diseños usando elementos de cuadrícula CSS y cómo podemos posicionar estos elementos. Pero en este tutorial, vamos a aprender sobre alineación horizontal y la alineación vertical. Tenemos un total de seis propiedades relacionadas con la alineación de cuadrícula CSS. Alinee el artículo, justifique el artículo, coloque el artículo, se alinee, justifique a sí mismo y coloque uno mismo. Empecemos lo práctico y tratemos de entender cómo funciona su trabajo. Aquí puedes ver lado a lado, abro mi código de strew visual y mi navegador usando la extensión del servidor de vida, y ya creé TML nombre de documento índice punto TML Aquí puedes ver que tenemos un total de diez artículos de cuadrícula. Nuestros primeros seis elementos de cuadrícula son elementos de cuadrícula explícitos y nuestros últimos cuatro elementos de cuadrícula son elementos de cuadrícula implícitos Aquí puede ver nuestra altura explícita del elemento de cuadrícula es de 100 píxeles y nuestro elemento de cuadrícula implícito es de 50 píxeles Ahora quiero pasar mi quinto artículo de la cuadrícula, y quiero gastarlo en fila sabia. Para eso, voy a saltar al ítem quinto selector, y aquí voy a usar una propiedad CSS que es grito. Aquí voy a gastar este artículo hasta dos filas, algunas para escribir, span, y luego voy a pasar dos. Si configuro este archivo, puedes ver el resultado. Y aquí se puede ver nuestro décimo elemento de la cuadrícula y quiero pasar este artículo leído columna sabia. Voy a saltar al selector de ítem diez, y aquí voy a usar una propiedad CSS, que es columna de cuadrícula. Voy a escribir columna de rejilla. Quiero abarcarlo hasta dos columnas. Si configuro este archivo, puedes ver el resultado. Aquí gastamos nuestro artículo, fila sabia, y aquí giramos nuestro artículo columna sabia. Comencemos la alineación. Primero, voy a cubrir la alineación vertical. Para eso, necesitamos usar align item y align self property. Estas propiedades venían con cuatro valores. Déjame mostrarte. El primero es el inicio, el final, el centro y el estiramiento. Si utilizo valor inicial, va a colocar nuestro contenido, inicio de este contenedor significa en ese lugar. Si usamos valor, va a colocar nuestro contenido en ese lugar. Si usamos center, va a colocar nuestro contenido, centro de este elemento de cuadrícula, y stretch es nuestro valor predeterminado. Una vez más, estoy de vuelta con mi codador de visual studio ahora voy a saltar al contenedor padre Entonces primero, voy a usar un valor CSS, que es align items, sound type align items. Voy a usar nuestro primer valor y nuestro primer valor es el centro. Si guardo este archivo, aquí puedes verlo alinear nuestro centro de contenido. Y este es nuestro proceso de alineación vertical. Si te muestro mis líneas de cuadrícula, aquí la puedes ver claramente. Como puede ver, este es nuestro elemento de cuadrícula, y este es el contenido dentro de este elemento de cuadrícula. Como puedes ver, presiona nuestro contenido en medio de este ítem porque usamos align items center. Pero, ¿qué pasó con nuestro quinto artículo? Según esta línea, alinea nuestro contenido final de este elemento de la cuadrícula, pero no lo es. Debido a que abarcamos nuestro quinto elemento de la cuadrícula, es por eso que utilizó dos elementos, y según el ítem, se centraba el contenido. También puede ver la misma alineación para nuestros elementos de cuadrícula implícitos Ahora voy a usar el valor final, SoTend. Si configuro este archivo, ahora puedes ver la alineación. Aquí puedes verlo alinear nuestro contenido, final de este ítem. De igual manera, si utilizo valor inicial, déjame mostrarte. Y luego establecer este archivo, se puede ver la alineación. Aquí puedes verlo alinear nuestro contenido, inicio de este ítem, y nuestro último valor de ítem de alineación es stretch. Déjame mostrarte. Si uso este valor y configuro este archivo, es un posicionamiento de alineación predeterminado. No es muy importante. Es un valor predeterminado. Por ahora, voy a usar Center Value. Y ahora voy a hablar de auto alineado. ¿Qué es align self? Aquí puedes ver que todo el contenido del ítem está alineado al centro, y ahora decido alinear nuestro ítem de tercer grado de manera diferente. Quiero decir, quiero usar Alinear valor final para este tercer ítem. Voy a saltar al tercer selector de ítem. Y para este tipo de alineación, necesitamos usar align self property, Sumtyp align Y aquí voy a usar el valor final. Si configuro este archivo, puedes ver el resultado. Si enciendo mis líneas de cuadrícula, aquí puedes ver que todos los contenidos están alineados en el centro, pero nuestro tercer elemento de cuadrícula se alinea al final. Podemos usar esta propiedad solo en celda individual, no para todo el contenedor. Así que ahora está claro para usted si queremos aplicar alineación, todos estos elementos para eso, necesitamos usar align item property. Y si queremos aplicar en ítems individuales, para eso, necesitamos usar propiedad de celda alineada. Ahora voy a hablar de alineación horizontal. Para la alineación horizontal, necesitamos usar dos propiedades, justificar IM y justificarse a sí mismo. Es similar a nuestro anterior, y necesitamos usar el mismo valor para eso, iniciar el centro y estirar. Empecemos la práctica. Una vez más, estoy de vuelta a mi coreador de visual studio y voy a saltar al contenedor padre Ahora quiero alinear nuestro contenido horizontalmente al centro. Para ello, necesitamos usar una propiedad, que es justificar IM. Y nuestro valor es centro. Si configuro este archivo, aquí puedes ver el resultado. Si enciendo mis líneas de cuadrícula, se puede ver con claridad. Centró horizontalmente nuestro contenido. Del mismo modo, si utilizo diferente valor, y luego configuro este archivo, ahora se puede ver el resultado. Ahora puedes ver el final de este elemento de la cuadrícula. De igual manera, tenemos otro valor, que es el inicio. Si configuro este archivo, ya sabe el resultado. Se alinea horizontalmente el inicio del contenido de este elemento let. Si quieres mover tu contenido, levantar lado, entonces necesitas usar start, si quieres mover tu contenido, lado derecho, entonces necesitas usar end. Como saben, el estrés es nuestro valor predeterminado, así que no lo voy a explicar aquí. Ahora voy a hablar de justificar la autopropiedad. Supongamos que centraste horizontalmente tu primer artículo. Para eso, necesitamos usar justificar el inmueble. Déjame mostrarte. Aquí voy a usar Justifique el inmueble. Voy a usar el valor central. Si configuro este archivo, puedes ver el resultado. Si enciendo mis líneas de cuadrícula, se puede ver con claridad. Si necesitas alinear tu contenido individualmente, puedes usar la propiedad de celda justificada. De igual manera, tienes un valor total de tres para eso, centro, inicio y fin. Ahora quiero hablar de dos nuevas propiedades, lugar artículo y lugar el. Colocar el artículo es un final corto, alinear el artículo y justificar el artículo. Si quieres usar este valor en una línea, entonces puedes usarlo. En esta propiedad, primero, debe pasar el valor del elemento de alineación, y luego debe pasar el valor del artículo justificado entre ellos, debe proporcionar un espacio. De igual manera, tenemos propiedad de celda de lugar. Esto es para elementos de cuadrícula individuales. Primero, necesitas pasar align cell value y luego debes pasar justify elf value. Veamos la práctica cómo funciona su trabajo. Una vez más, vuelvo a ser un creador de estudio visual. Por ahora, voy a comentar esta línea de dos. Primero voy a usar la propiedad place item. Voy a escribir artículos de lugar. Como sabes, primero tenemos que pasar align item value y luego tienes que pasar justificar el valor de los artículos. Nuestro primer valor es el centro. Y nuestro segundo hilo es Señor y ahora voy a poner este archivo. Si configuro este archivo, aquí se puede ver el mismo resultado. No hay cambios. usar este valor de esta manera o de esa manera. Está totalmente en ti. A continuación, veamos cómo funciona el valor de celda de posición. Como saben, es trabajo indivisualmente. En nuestro ítem dos, voy a usar esta propiedad. Colocar auto. Primero, necesitamos pasar el valor de celda alineado y luego tenemos que pasar el valor de celda justificado. Quiero brindar centro. Nuestro valor celular justificado también es el centro. Si configuro este archivo, puedes ver el resultado. Es centrar nuestro contenido horizontal y verticalmente. Entonces espero que ahora te quede claro cómo son trabajo colocar self y place items. Entonces gracias por ver este video. Estén atentos para nuestro próximo Tutorial. 105. Tutorial de alineación de pistas de cuadrícula de CSS: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre la alineación de pistas de cuadrícula CSS. Para alinear nuestra pista, tenemos que tres propiedades, alinear el contenido, justificar el contenido y colocar el contenido, y además la propiedad de contenido es una versión abreviada de align content y justify content property. Tratemos de entender qué es el seguimiento de elementos de cuadrícula. Aquí puedes ver, lado a lado, abro mi ordador Visual Studio y mi navegador usando la extensión de servidor if Ya creo un documento TML llamado index dot TML. Aquí voy a usar la misma estructura de cuadrícula que utilizo en mi tutorial anterior. Aquí puedes ver un total de diez elementos de la cuadrícula. Como puede ver, pasamos nuestra quinta fila de elementos de cuadrícula sabiamente, también gastamos nuestro artículo de diez cuadrícula, columna sabia. Al principio, voy a reducir el ancho de columna. Déjame mostrarte. Voy a reducir un valor efer y voy a escribir 150 píxeles Si configuro este archivo, se puede ver la alineación. Como voy a aumentar la altura del contenedor. Entonces voy a usar la propiedad de altura. Altura, 750 píxeles. Si configuro este archivo, puedes ver este espacio. Ahora te voy a mostrar cómo podemos usar align content y justificar contenido. Pero primero, necesitamos entender qué es el contenido justificado. Utilizamos el contenido de justificación para la alineación horizontal, y tenemos un total de siete valores relacionados con justificar contenido, inicio, fin, centro, estiramiento, espacio alrededor del espacio entre y espacio de manera uniforme. Nuestros tres últimos valores se utilizan para la propiedad de contenido. Déjame mostrarte cómo ha funcionado. Así que una vez más, vuelvo a mi editor de código Wiser Studio. Al principio, voy a encender mis líneas de cuadrícula, así que voy a alabar a Eptel luego hago clic en Cuadrículas aquí puedes ver las líneas de la cuadrícula Ahora voy a usar el valor de contenido ificado. Al principio, voy a usar el valor central. Si configuro este archivo, puedes ver el resultado. Aquí puedes ver que todos los elementos de la cuadrícula juntos se mueven al centro de este contenedor. Usando la propiedad de justify item, podemos centrar nuestro contenido dentro de estos artículos. Usando la propiedad de contenido justificado, podemos alinear nuestros elementos de cuadrícula dentro del contenedor. Usando contenido justificado, podemos mover toda la pista. De igual manera, tenemos otro valor, que es el fin. Si dije este archivo, se puede ver el resultado. Horizontalmente, mueve nuestros elementos de cuadrícula al final de este contenedor, y el inicio es nuestro valor predeterminado. Déjame mostrarte. Si configuro este archivo, puedes ver el resultado. Ahora voy a hablar de nuestros tres nuevos valores. Nuestro primer valor es el espacio entre. Voy a escribir espacio entre aquí. Si configuro este archivo, puedes ver el resultado. Si usamos espacio entre Valor, entonces vas a proporcionar el espacio restante entre nuestros elementos de cuadrícula. Como puede ver, dividió nuestros elementos de cuadrícula de extremo a extremo. Pero si tienes tres columnas, déjame mostrarte. Entonces voy a pasar tres aquí. Y luego establece este archivo, aquí podrás ver el resultado. Como puedes ver, puso nuestra segunda columna en el centro, y dividió nuestro espacio en blanco de dos partes. Y por ahora, voy a usar dos columnas. Nuestro siguiente valor es el espacio alrededor. Déjame mostrarte. Si configuro este archivo, aquí puedes ver el resultado. Si usamos este valor, como puede ver, primero, proporciona un espacio, luego nuestro artículo de grado, y luego puede ver el tamaño similar del espacio al tiempo. Entonces una vez más, nuestra columna y un espacio ciego. Se puede ver el espacio igual izquierda y derecha. Como se puede ver la misma cantidad de espacio después de la primera columna. De igual manera, se puede ver este espacio antes de la segunda columna. Se puede ver el más espacio en el centro, y nuestro siguiente valor es el espacio de manera uniforme, suma a t espacio de manera uniforme. Si configuro este archivo, aquí puedes ver que es bastante similar al espacio alrededor del valor, pero hay una diferencia básica. La principal diferencia es que puedes ver la misma cantidad de espacio entre nuestros grandes artículos. Si este tamaño de espacio es un esfuerzo, se puede ver la misma cantidad de espacio antes y después de la columna. Entonces esta es nuestra propiedad de contenido justificado. Básicamente lo usamos para la alineación horizontal, y esta propiedad funciona con trucos de cuadrícula. Hablemos del valor del contenido alineado. Utilizamos la propiedad de contenido alineado para la alineación vertical. Y como puede ver, hay siete valor para esta propiedad. Comience, termine, centre, estire, espacio alrededor del espacio entre y espacie uniformemente. Ya sabemos de este valor de cuatro. Pero en este tutorial, vamos a aprender espacio alrededor del espacio entre y el espacio de manera uniforme. Volvamos a lo práctico. Aquí puedes ver nuestra altura de contenedor de rejilla es de 750 píxeles. Entonces voy a escribir este nombre de propiedad, que es Alinear contenido. Y nuestro primer valor es el centro. Si configuro este archivo, aquí puedes ver el resultado. Si subo mi modo desarrollador, ahora lo puedes ver claramente. Como se puede ver centrado verticalmente nuestro contenido. Del mismo modo, si utilizo el valor final y luego configuro el archivo, ahora puedes verlo poner nuestra estructura de cuadrícula final de este contenido. Como saben, el inicio es nuestro valor predeterminado. Pero ahora voy a usar un espacio de nombre de valor entre, así que para escribir espacio entre. Si configuro este archivo, aquí puedes ver el resultado. Aquí puedes verlo poner nuestro artículo de primer grado y nuestro último elemento de cuadrícula en fin aquí puedes ver los espacios entre todos los elementos de la cuadrícula. Este es el caso de uso del espacio entre valor. Vamos a saltar al siguiente valor, que es el espacio alrededor. Así que para escribir el espacio alrededor. Si configuro este archivo, ahora puedes ver el resultado. Este valor va a proporcionar el espacio, parte superior del contenido y la parte inferior del contenido. Supongamos que proporciona diez píxeles pasan la parte superior de este elemento de la cuadrícula, y también va a proporcionar diez píxeles pasan la parte inferior de este elemento, y de ahí vienen área de brecha de lectura Una vez más, la parte superior de este tercer artículo , proporciona diez píxeles de pase. De esa manera, está por encima de nuestro último valor es el espacio de manera uniforme. Así que para escribir el espacio de manera uniforme. Entonces si configuro este archivo, aquí se puede ver que proporciona la misma cantidad de espacio, superior e inferior de este ítem. Este es el caso de uso de estos valores. Déjame mostrarte una cosa. Aquí puedes ver, abarcamos nuestra columna 102 tiempo. Voy a quitar la propiedad de columna de saludo del ítem diez. Y ahora voy a gastar los artículos. Entonces voy a prestarlo aquí. Si configuro este archivo, aquí se puede ver una brecha. Aquí puedes ver un espacio sin llenar. Si está trabajando con una estructura de cuadrícula compleja, a veces estos problemas son incómodos. Si quieres resolver este problema, tenemos otra propiedad, que es el flujo automático de rejilla. Déjame mostrarte. Entonces tipo, rejilla, flujo automático. Como saben, tenemos que girar dos tipos de flujo, fila Voz y columna Vise Voy a usar row vie. Si configuro este archivo, aquí puedes ver que no hay cambios. Pero si uso otro valor con esto, déjame mostrarte. Voy a usar un nuevo valor el cual es denso. Si configuro este archivo, aquí puedes verlo poner nuestro elemento de la cuadrícula ocho en el espacio en blanco. Si utilizo este valor, entonces no va a desllenar el espacio en blanco Espero que ahora te quede claro qué es el rastreo de grilla. Estén atentos para nuestro próximo tutorial. Gracias por ver este video. 106. Tutorial de relleno automático de cuadrícula de CSS y ajuste automático: Hola chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender campo automático y propiedades de autoajuste. Usando estas propiedades, podemos controlar el ancho de la cuadrícula. Empecemos la práctica y veamos cómo funciona. Aquí puedes ver lado a lado, abro mi coordinador de visual studio y mi navegador usando extensión de servidor web, y ya creé un documento TML Aquí se puede ver un contenedor y dentro del contenedor, tenemos un total de cuatro artículos de rejilla. Como puede ver, nuestro contenedor con es 700 píxeles y utilizamos la propiedad de cuadrícula distal. Y ahora lo voy a decir con la altura a estos artículos. Por ahora, quiero usar dos columnas con un valor eher. Así que voy a usar la propiedad de columna de plantilla de cuadrícula, y voy a usar el valor de repetición, repetir dos con un valor eer. Si configuro este archivo, puedes ver el resultado. Y también, voy a darle altura a nuestra fila. Voy a usar la propiedad de fila de columnas de plantilla de cuadrícula. Y una vez más, voy a usar el valor de repetición. Dos filas con 150 píxeles de altura. Si configuro este archivo, puedes ver el resultado. Supongamos que no quiero usar valor de fracción. Voy a escribir 100 píxeles. Si configuro este archivo, ahora puedes ver el resultado. Ahora nuestra columna con 100 píxeles. Con eso, quiero mostrar tres columnas en nuestra fila. Si configuro este archivo, puedes ver el resultado. Ahora quiero ajustar nuestro cuarto elemento de la cuadrícula en este lugar. Para estos, necesitamos usar dos valores, autofil y autofit Déjame mostrarte. En este lugar, voy a escribir autocompletar Si configuro este archivo, puedes ver el resultado. Automáticamente configura nuestro cuarto artículo de concierto hasta el tercer artículo de concierto Del mismo modo, si utilizo el valor de autoajuste, déjame mostrarte y establecer este archivo Aquí puedes ver que no hay cambios. Pero hay una diferencia básica. Si utilizo el valor de autofil, va a crear pista extra Déjame mostrarte. Entonces voy a escribir auto fill una vez más. Y si enciendo mi barra de herramientas de Desarrollador y hago clic en este ícono de cuadrícula, aquí puedes ver que hay un espacio para tres elementos de cuadrícula porque nuestro contenedor con este 700 píxeles y configuramos nuestro elemento de cuadrícula con 100 píxeles. Por eso tenemos un espacio para tres elementos de cuadrícula. Pero si uso Autofit Value, déjame mostrarte y luego establecer este archivo, y luego ejecutarlo en mis líneas de cuadrícula, aquí puedes ver que no crea líneas de pista adicionales Crea la pista de acuerdo con los elementos de la cuadrícula. Supongamos que quiero cambiar nuestro cuarto extremo de columna de este contenedor, así que voy a usar el valor final de columna de cuadrícula. Cuadrícula, columna N, y voy a establecer posición menos uno. Si configuro este archivo, aquí puedes ver que no hay cambios porque la propiedad autofit no crea trig extra, pero si uso la propiedad autofil, déjame mostrarte luego establece Ahora puedes ver el resultado. Si corro sobre las líneas de la cuadrícula, ahora se puede ver con claridad. Debido a que la propiedad autofil crea columna adicional, es por eso que podemos mover nuestro cuarto elemento de cuadrícula al final de este contenedor Esta es la principal diferencia entre el valor de autofil y autofit. Ahora voy a usar la función Min Mx para nuestra columna. Voy a quitar este y establecer este archivo. Primero, voy a atar autofit y después voy a usar la función Min Max. Quiero establecer contenedor mínimo con 150 píxeles y máximo hasta un valor de esfuerzo. Si configuro este archivo, puedes ver el resultado. Pero qué pasó si reduzco el ancho del contenedor, así que voy a escribir 70% ancho de contenedor. Si configuro este archivo, aquí puede ver nuestro artículo de cuarto grado reducir. Si te muestro mi sección calculada, aquí puedes ver ahora el ancho de nuestro contenedor es de 546 píxeles y establecemos nuestro ítem mínimo con 150 píxeles y si multiplicamos 150 píxeles con cuatro, va a devolver 600 píxeles. Como ya sabe nuestro ancho de contenedor por debajo de los 600 píxeles, es por eso que reduce nuestro artículo de cuarto grado. Si aumento el ancho del contenedor déjame mostrarte. Ahora puedes verlo establecer nuestro cuarto artículo de grado en nuestra primera fila. Si te muestro mi ancho continuo, aquí puedes ver que está por encima de los 600 píxeles Por eso encaja en esta fila. Y de manera similar, si te muestro mi ancho de elemento de cuadrícula, aquí puedes ver, nuestro ancho de elemento de cuadrícula es de 167 píxeles. No podemos reducir nuestro elemento de cuadrícula por debajo de 150 píxeles. Si tratamos de reducir nuestro elemento de cuadrícula con fuerza, déjame mostrarte aquí puedes verlo encoger nuestro elemento de cuadrícula en la segunda fila Y si tratamos de reducir más, aquí puedes ver que también encoge nuestro tercer elemento de cuadrícula en la segunda fila porque no podemos reducir el ancho del elemento de cuadrícula por debajo entonces de 150 píxeles. Sin usar media query, solo usando el valor de autofit, creamos perfectamente nuestro contenedor responsive Del mismo modo, si aumento el ancho del navegador, aquí se puede ver todo el elemento de la cuadrícula en una sola fila. Si notas puedes ver que también aumenta el ancho del artículo. Ahora el ancho del artículo es de 245 píxeles. Si desea mostrar todos los elementos de la cuadrícula en una sola fila, entonces debe tener un ancho mínimo de contenedor de 600 píxeles. Si reduzco demasiado el ancho del navegador, y aumento el continuado con porcentaje, algo 85% es, y además voy a aumentar el ancho mínimo, así que voy a aumentarlo hasta 300 píxeles Si configuro este archivo, ahora se puede ver el total de cuatro filas. Ahora parece que responde total. Como puede ver, establecemos la altura para dos filas, 150 píxeles de altura. Espero que ahora el concepto sea claro para ti, qué es el valor autofil y el valor autofd Entonces gracias por ver este video. Estén atentos para nuestro próximo tutorial. 107. Tutorial de contenido de ajuste de cuadrícula de CSS: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender una nueva propiedad relacionada CSS Grid, que es fit content. Entonces veamos cómo podemos usarlo prácticamente. Aquí puedes ver, lado a lado, abro mi codador de Visual Studio y mi navegador usando la extensión Lifesaver, y ya creo un documento TML llamado index dot TML Aquí puedes ver, dentro del contenedor padre, tenemos un total de seis artículos de cuadrícula. Básicamente, encajar propiedad de contenido trabajando como mezcla con propiedad. Entonces usemos esta propiedad. Entonces voy a quitar la anterior. Y voy a escribir Supongamos que quiero mostrar dos columnas usando fit content. Entonces, para escribir contenido de ajuste. Y dentro del paréntesis, y voy a decir 200 píxeles ancho máximo para nuestra primera columna Y de manera similar, para nuestra segunda columna, voy a usar fit content property. Y para nuestra segunda columna, voy a usar 400 píxeles maxwde Si guardo este archivo, aquí puedes ver el resultado Aquí puedes ver para la primera columna, tomamos 200 píxeles de ancho, y para la segunda columna, tomamos 400 píxeles de ancho. Pero si notas puedes ver nuestro artículo con el tamaño de acuerdo al contenido. Tomemos otra columna con un valor Eer. Entonces, para escribir una ER. Si configuro este archivo, puedes ver el resultado. Si dijimos ajuste valor de contenido, no podemos extender nuestra columna más de 200 píxeles. Del mismo modo, no podemos extender nuestra segunda columna más de 400 píxeles. Tengamos algo de contenido en nuestro primer ítem. Dentro del primer ítem, voy a escribir dum. 30. Si configuro este archivo, aquí puedes ver el resultado. Si enciendo mis líneas de cuadrícula y te muestro mi ancho de celda, aquí puedes ver que nuestro primer elemento de cuadrícula se extiende hasta 200 píxeles. Si usamos la propiedad fit content, no podemos extender con más de 200 píxeles. Del mismo modo, si agrego más contenido en nuestro segundo elemento de la cuadrícula, déjame mostrarte y luego establecer el archivo, aquí puedes ver el resultado. Si te muestro mi tamaño de celda, aquí puedes ver que se extiende hasta 400 píxeles, no más de 400 píxeles. Porque dije ancho máximo de esta celda de cuadrícula usando la propiedad fit content. Para nuestra tercera columna, utilizamos valor de fracción, por lo que puede cambiar su tamaño según el contenido. Básicamente, esta técnica es muy útil para la galería de imágenes. Además, puedes notar que no podemos ver todo el contenido de este ítem. Para ello, podemos usar MnMXFunction en nuestras filas. Déjame mostrarte. Entonces voy a quitar esta, y voy a decir Man max. Dentro del paréntesis, aquí podemos establecer la altura mínima para nuestro elemento de cuadrícula Quiero decir 200 píxeles de altura mínima. Entonces si quieres extender la altura de la parrilla de acuerdo con el contenido, para eso, puedes usar la función principal Content. Déjame mostrarte el contenido de Amin. Si configuro este archivo, aquí puedes ver el resultado. Ahora se ve perfecto. Aprendimos sobre la propiedad de contenido principal en nuestros tutoriales anteriores. Espero que ahora entiendas cuál es el caso de uso de la propiedad fit content. Gracias por ver este video, Estén atentos a nuestro próximo tutorial. 108. Tutorial de propiedades de orden de cuadrícula de CSS: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender una nueva propiedad de posicionamiento de elemento de cuadrícula, que es propiedad de agua. Entonces veamos cómo podemos usar esta propiedad. Como pueden ver, lado a lado, abro mi creador de Visual Studio y mi navegador usando la extensión del servidor Lip, y ya creé un documento TML llamado index dot TML Aquí se puede ver dentro de mi contenedor de patente, tenemos un total de seis artículos de rejilla. Entonces, usando la propiedad del agua, podemos cambiar la posición de la celda de la rejilla. Supongamos que desea mover la primera celda de rejilla en la sexta posición. Para ello, se puede utilizar la propiedad de Agua. En nuestros tutoriales anteriores, aprendemos sobre el posicionamiento. Pero en este tutorial, vamos a posicionarnos usando la propiedad del agua. Supongamos que quiero mover el ítem uno en seis posiciones. Para ello, voy a saltar al ítem o selector, y voy a usar la propiedad Water. Orden. Aquí voy a pasar un valor. Si configuro este archivo, aquí puedes verlo mover automáticamente nuestro contenido en la posición de lujuria. El riego comienza en dirección opuesta. Por eso ha llegado al lugar de la lujuria. Y de manera similar, si utilizo valor cero y luego configuro el archivo, aquí se puede ver, no hay cambios en el orden. Cero es el valor predeterminado de esta propiedad. Pero si paso orden dos y luego pongo el archivo, aquí se puede ver, también ha llegado al primer lugar porque no hay orden uno. Supongamos ahora quiero mover nuestro segundo artículo en primer orden. Para eso, voy a saltar al ítem a selector, y voy a teclear orden propiedad. Ordene uno. Si configuro este archivo, aquí puedes ver el resultado. Ahora bien, esta es nuestra orden una posición. Ahora supongamos que quiero mover el cuarto ítem en tercera posición. Vamos a saltar al cuarto selector, y voy a teclear orden tres. Si configuro este archivo, ahora puedes ver el resultado. Esta es nuestra posición de agua una, y esta es nuestra posición de dos, y esta es nuestra posición de tres. Primero, regamos nuestro artículo uno en segunda posición. Ha llegado a la segunda posición, y luego regamos nuestro ítem dos en primera posición. Se llega a la primera posición, y luego regamos nuestro cuarto ítem en tercera posición y se puede ver el resultado. Ha llegado a la tercera posición. Como puede ver, no trabajamos con tercer ítem, quinto ítem, y sexto ítem, ha salido adelante. Supongamos que ahora quieres mover el tercer elemento detrás del cuarto artículo. Así que voy a usar una vez más la propiedad del agua, agua, y voy a pasar cuatro valor Si dije este archivo, se puede ver el resultado. Ahora puedes ver que nuestro tercer ítem llegó a través la sexta posición porque usamos cuatro valores, por lo que nuestra posición de primer orden es esta. Y esta es nuestra posición de segundo orden. Y esta es nuestra posición de tercer orden, y esta es nuestra posición de cuarto orden. Entonces ahora te queda claro cómo es el trabajo. Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 109. Tutorial de cuadrículas anidadas: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre las cuadrículas anidadas Entonces intentemos entender qué es la cuadrícula anidada. Aquí, se puede ver un contenedor de cuadrícula, y dentro de este contenedor de cuadrícula, tenemos que a estas celdas de cuadrícula. Ahora decide agregar más celdas de cuadrícula dentro de esta celda de cuadrícula. Entonces necesitas convertir esta celda de cuadrícula en un contenedor de cuadrícula, y luego puedes agregar más celdas de cuadrícula dentro de este contenedor, algo así. Llamamos a todo este sistema cuadrículas anidadas. Usando la cuadrícula anidada, podemos convertir una celda de cuadrícula padre en un contenedor de cuadrícula Empecemos la práctica y veamos cómo podemos crearla. Como pueden ver lado a lado, abro mi coordinador de visual studio y mi navegador usando la extensión light server, y ya creo un documento TML llamado index dot TML Como pueden ver en mi contenedor padre, tengo cuatro leer vender y ahora quiero agregar más leer vender dentro de la cuarta celda de la cuadrícula. Para estos, necesitamos usar propiedad de cuadrícula de visualización para el elemento cuatro, dentro del selector de cuarto elemento, voy a usar la propiedad de visualización, cuadrícula de visualización. Ahora convierte nuestra celda en un contenedor GET. Ahora podemos agregar más celdas de rejilla dentro de este contenedor. Déjame mostrarte. Voy a quitar este texto y dentro de este div, voy a crear cuatro más Dev Dev dot SUB b one, y voy a duplicar esta línea tres veces. Y también voy a numerar en su nombre de clase sub dos, sub tres, y sub cuatro. Dentro de estas celdas de cuadrícula, voy a escribir A, B, C y D. Si configuro este archivo, puedes ver el resultado. Como pueden ver, creamos cuatro celdas de lectura dentro del cuarto contenedor, y ahora voy a asignar ancho a nuestras celdas. Para ello, voy a usar la propiedad de columna de plantilla de cuadrícula. Columnas de plantilla de codicia, y quiero asignar dos columnas con un valor F, una FR, una FR Si configuro este archivo, puedes ver el resultado. Vamos a establecer un color de fondo a esta profundidad. De lo contrario, no va a ser visible. Entonces voy a seleccionar el ítem cuatro. Dentro del ítem cuatro, voy a seleccionar todos los deeps Después dentro del fondo cariverss, Leer. Si guardo este archivo, se puede ver el resultado. Como pueden ver, no hay hueco entre estas celdas, así que voy a usar la propiedad grid gap. Lectura, brecha, diez píxeles. Si configuro este archivo, ahora se pueden ver las celdas con claridad. Como puede ver, dentro de un contenedor ParatentGrid, tenemos un total de cuatro celdas, y luego convertimos nuestra cuarta celda de cuadrícula en un contenedor de cuadrícula Dentro de este contenedor, también tenemos cuatro celdas de rejilla. A este proceso lo llamamos cuadrícula anidada. Usando el interior de un elemento de cuadrícula, podemos insertar más elementos de cuadrícula, y también puede insertar más elementos de cuadrícula dentro de estos elementos de cuadrícula secundaria. Supongamos que desea insertar cuatro elementos de cuadrícula más dentro de esta celda A. Entonces, una vez más, es necesario seguir el procedimiento similar. Primero, necesita usar la cuadrícula de propiedades de visualización para esta venta, y luego puede agregar más artículo de cuadrícula dentro de esta venta. Si te muestro mi barra de herramientas de desarrollador, aquí puedes ver dentro de esta cuadrícula, tenemos otra estructura de cuadrícula, y puedes ver las líneas de cuadrícula de esta estructura de cuadrícula. Si te muestro mi sección de diseño, aquí puedes ver en superposiciones de cuadrícula, tenemos un sistema de cuadrícula total de dos, nuestro sistema de cuadrícula principal de contenedores, y a continuación nuestro sistema de elementos de cuadrícula de superposición, y puedes apagar y encender tus líneas de cuadrícula de acuerdo a tu elección Gracias por ver este video. Espero que ahora te quede claro lo que es la grilla anidada. Estén atentos para nuestro próximo tutorial. 110. Tutorial de elementos de cuadrícula superpuestos: Me alegro de verlos de vuelta, chicos. Este es nuestro último tutorial relacionado con CSS Grid. En este tutorial, vamos a aprender qué se superponen los elementos de la cuadrícula. Así que avanzando y tratemos de entender qué es eso. Aquí, se puede ver un contenedor de rejilla. Y dentro de este contenedor de rejilla, tenemos un total de tres artículos de cuadrícula. Y como puede ver, los artículos se superponen entre sí. Y lo llamamos elementos de cuadrícula superpuestos. Y ahora quieres verde primero un juego, algo así. Entonces veamos cómo podemos crear los elementos de codicia superpuestos Con eso, vamos a aprender cómo podemos cambiar el orden de pila de estos artículos de codicia Orden de pila significa índice Z. Entonces comencemos la práctica y tratemos de entender cómo ha funcionado. Aquí puedes ver lado a lado, abro mi codtor de Visual Studio y mi navegador usando extensión de servidor if y ya creo un documento TML llamado index Como pueden ver, ya creo una estructura de cuadrícula. Hay tres elementos de cuadrícula en esta estructura de cuadrícula. Como puedes ver, nuestro contenedor con es 400 píxeles y nuestra columna con es de 200 píxeles y además nuestra altura de fila es de 200 píxeles. Intentemos superponer los elementos de la cuadrícula. Al principio, quiero abarcar nuestro elemento de cuadrícula roja. Quiero abarcarlo hasta dos columnas. Para estos, voy a usar la propiedad de columna de cuadrícula. Uno de la columna uno, dos, abarca dos. Si configuro este archivo, puedes ver el resultado. Abarcamos nuestro artículo dos columnas. Como voy a abarcar esta fila de artículos sabia con dos columnas. Déjame mostrarte. Voy a usar grado PupityRadow de la fila uno, abarcan hasta la fila dos abarcan hasta Si configuro este archivo, puedes ver el resultado. Así que ahora nuestro primer elemento abarca hasta dos columnas y dos filas, nuestro segundo elemento y tercer elemento son nuestros elementos implícitos de la cuadrícula Ahora voy a asignar un ancho máximo, todos estos elementos de la cuadrícula. Como sabes, utilizamos este artículo más todos estos elementos de cuadrícula. Entonces voy a usar la propiedad max Width, voy a escribir max width 200 pixel. Si configuro este archivo, puedes ver el resultado. Y ahora voy a alinear nuestra primera celda verticalmente. Voy a escribir, alinearme señor si configuro este archivo, se puede ver el resultado. Si te muestro mis líneas de cuadrícula, aquí puedes ver que toma área completa. Debido a que usamos la propiedad de celda alineada, es por eso que parece más pequeña. Si comento esta propiedad y configuro este archivo, puedes ver el resultado. Pero para crear una cuadrícula superpuesta los elementos que lo necesiten, así que voy a deshacer el comentario y establecer este archivo. Ahora quiero mover nuestro segundo ítem al centro de esta página. Para estos, voy a usar las mismas propiedades para el ítem dos. Si paso el código y configuro el archivo, aquí se puede ver que se superpone a nuestro primer ítem de grad, pero quiero colocarlo en medio. Voy a usar alineado el propiedad, Alinear centro. Si configuro este archivo, puedes ver el resultado. Alineamos verticalmente nuestro artículo, centro de este contenedor. Ahora voy a centrar horizontalmente este elemento de la cuadrícula. Para ello, voy a usar y justificar autopropiedad, Justificar auto centro. Si configuro este archivo, puedes ver el resultado. Para nuestro tercer elemento de la cuadrícula, voy a usar se property. Pero quiero alinear nuestro extremo de este contenedor. Voy a usar align self end. Y también justifican el autofin. Si configuro este archivo, puedes ver el resultado. No necesito este color de fondo naranja, así que lo voy a quitar. Ahora, todos los artículos de la codicia se llevan la misma cantidad de área. Simplemente alineamos los elementos, inicio, centro y final, pero su tamaño y posición de columna son los mismos. Ahora voy a agregar algo de texto en todos los ítems. Yo punto uno, voy a escribir Lum 15. Se va a añadir carácter de 15 vatios. Se puede agregar 15 wat párrafo en nuestro ítem, y voy a copiar el párrafo y lo voy a pegar en nuestro segundo ítem. También en nuestro tercer ítem, si configuro este archivo, puedes ver el resultado. Oye, necesitamos agregar más carácter para superponer este ítem. Voy a pegar de nuevo este personaje. Si configuro este archivo, ahora puedes ver que se superpone entre sí. Ahora les voy a mostrar cómo podemos cambiar el orden de pila de este artículo. Para cambiar el orden de la pila, necesitamos usar nuestra propiedad antigua, que es el índice Z. Ahora quiero llevar el primer ítem a la vanguardia. Para ello, voy a usar la propiedad índice Z. Voy a escribir Z índice uno. Si configuro este archivo, puedes ver el resultado. Se puede ver que llegó en la parte superior y ahora quiero traer el artículo naranja arriba de la. Para estos, necesitamos usar el índice Z dos valores. Entonces para escribir Z índice dos. Si configuro este archivo, puedes ver el resultado. Ahora te queda claro cómo podemos controlar las áreas de superposición. Ahora veamos si quito toda la alineación de este contenedor. Y luego establecer el archivo. Aquí, puedes ver el resultado. Ahora todos los elementos de la cuadrícula siguen existiendo en el mismo lugar. Ahora quiero mostrar nuestro artículo de cuadrícula verde. Para ello, necesitamos volver a usar el valor del índice Z. Z índice tres, si configuro este archivo, se puede ver el resultado. Espero que ahora quede clara su duda sobre la superposición. Gracias por ver este video, estén atentos para nuestro próximo estudio. 111. Qué es Flexbox: Hola, chicos. Me alegro de verte de vuelta. Este es el video de introducción de CSS Flexbox. Tratemos de entender qué es Flexbox. Básicamente, Flexbox es un nuevo módulo en CSS tres. Es hacer que la alineación sea muy fácil en diferentes direcciones y diferentes órdenes. Le da al contenedor la capacidad de expandir y encoger elementos para aprovechar mejor todo el espacio disponible. Esta es la mejor manera de utilizar todo el espacio disponible. Nuestro siguiente punto es CSS Flexbox layout replace float layout Similar al diseño de la cuadrícula, también puede reemplazar el diseño de flotación. Nos facilitó mucho nuestro trabajo. Usando Flexbox, puedes crear un diseño unidimensional muy fácilmente. La cuadrícula CSS no es unidimensional. Es bidimensional, pero CSS Flexbox es unidimensional No puede manejar la altura de fila y el ancho de columna juntos. A la vez solo puedes manejar una dimensión. Fila, de lo contrario columna. Supongamos que este es nuestro contenedor principal dentro de este contenedor padre, tenemos cuatro subdps Nosotros llamamos contenedor flexible contenedor contenedor, y si quieres crearlo flexbox, entonces necesitas usar display propriety Flexión de pantalla. En nuestro contenedor padre, necesitamos usar esta propiedad, y luego convertirla en un contenedor flexible. Todos los artículos dentro del contenedor flex, ahora son artículos flex. Como te dije antes, flexbks funcionan de manera unidimensional Fila sabia, de lo contrario columna sabia. Si hablamos de filas significa manera horizontal. Para eso, llamamos al eje eje principal. De lo contrario, se le puede llamar fila. Si hablo de dimensión vertical, entonces lo llamamos eje transversal. De lo contrario, se le puede llamar columnas. Veamos una pequeña demostración cómo podemos usar un flexbox. Aquí se puede ver lado a lado, abro mi visual studio Creator y mi navegador usando la extensión if server, y ya creo un documento TML llamado index dot HTML Como puede ver, hay una profundidad padre, que clases contenedor dentro de este contenedor padre, tenemos un total de cuatro artículos. Como puedes ver, usamos diferentes clases para todo este ítem uno, ítem dos, ítem tres, y ítem cuatro, ya establecí un color de fondo para todos los subdeps Como puede ver, nuestro contenedor padre con es 600. A medida que establecí un color de fondo, margen y borde a este contenedor padre. Ahora bien, si quiero que sea contenedor flexible para estos, necesitamos usar la propiedad display, display y voy a usar flex value. Como puede ver, hemos puesto las cuatro filas en nuestro contenedor padre. Si configuro este archivo, como puede ver, automáticamente guarda todos los elementos en una fila. Ahora está poco claro para usted cuando convertimos nuestro contenedor padre en una caja flexible, sea cual sea el artículo de nuestro contenedor, viene en una fila. En nuestro próximo tutorial, vamos a aprender algunas propiedades nuevas. Veamos las propiedades. Son un total de 12 propiedades que puedes usar con flex box. Flex direction, flexap, flex blow, flex grow, flex syn, flex basics, flex, justificar contenido, contenido alineado, align item, align self, al fin agua Para la alineación, usamos esta propiedad y ya la aprendemos en nuestro capítulo de cuadrícula En nuestro próximo video, voy a cubrir todas las propiedades. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 112. Tutorial de dirección de Flexbox de CSS: Me alegro de verles chicos. En este tutorial, vamos a aprender qué es la propiedad flex direction. Veamos los valores de esta propiedad. Como puede ver, tenemos un total cuatro valores relacionados CSS flex direction, row reverse, colum y clumRvers Y fila es nuestro valor predeterminado en esta propiedad. Entonces comencemos la práctica y veamos cómo funciona. Aquí puedes ver lado a lado, abro mi coordinador visual sto y mi navegador usando la extensión if server, y ya creo un documento TML, llamado index dot TML, como puedes ver en mi documento, hay un contenedor, y dentro de este contenedor, tenemos total cuatro flix item Y como puedes ver, ya convertimos nuestro contenedor Flexbox. Y ya sabes que si usamos la propiedad flex, entonces pone nuestros artículos en una sola fila. Y en este tutorial, vamos a hablar de la propiedad flex direction. Esta propiedad está relacionada con contenedor, no con los artículos. Voy a usarlo después de la propiedad de visualización, y voy a escribir escamas dirección, nuestro primer valor es fila. Si configuro este archivo, aquí puedes ver que no hay cambios. Como ya les dije, fila es el valor por defecto. Si lo usas, no va a afectar tu estructura por defecto, fila sigue la dirección de izquierda a derecha. Pero si uso el valor inverso de fila, déjame mostrarte y luego establecer el archivo, ahora puedes ver el resultado. Aquí puedes ver que es invertir el orden de nuestro artículo. Ahora la dirección es de derecha a izquierda. Este es un caso de uso del valor inverso de fila y nuestro siguiente valor es la columna, déjame mostrarte. Voy a escribir columna. Este valor funciona verticalmente. Si configuro este archivo, puedes ver el resultado. Básicamente, sigue el orden de arriba a abajo. Como puedes ver, primero, segundo, tercero, cuarto, si quieres organizarlo de abajo hacia arriba, entonces necesitas usar otro valor, que es la columna inversa. Si configuro este archivo, puedes ver el resultado. Aquí puedes ver nuestro primer artículo llegó al fondo. Después vienen segundo y luego tercero, y nuestro último ítem llegó a la primera posición. Básicamente se trata de cambiar la dirección de abajo hacia arriba. Si utilizo solo el valor de la columna, entonces la dirección será de arriba a abajo. Esta es la propiedad de dirección flexible. Como te dije antes, es un trabajo de manera unidimensional. A la vez, es trabajo con fila sabia, lo contrario columna sabia, y no se puede manejar fila y columna juntas. Espero que ahora la propiedad flex direction sea clara para ti, gracias por ver este video, mantente atento a nuestro siguiente tutorial. 113. Tutorial de CSS Flex Wrap y Flex Flow: bueno verlos una y otra vez con un nuevo tutorial relacionado con flexbox Y en este tutorial, vamos a aprender qué es FlexAP y flex flow Estas dos nuevas propiedades son muy importantes en nuestro flexbox. Entonces, sin más discusión, comencemos lo práctico. Como pueden ver, lado a lado, abro mi coeator de visual studio y mi navegador usando la extensión lip server, y ya creo un documento TML llamado index Aquí puedes ver en nuestro contenedor, tenemos un total de cuatro artículos flex y nuestro tamaño de contenedor es más grande que los artículos flexibles. Si aumento el artículo flex en esta caja, de lo contrario, si reduzco el ancho del contenedor, en ese caso, los artículos son sobrevolados a este Déjame mostrarte. Ya creo otros seis elementos flex, y voy a uncommens dip tags, y voy a configurar este archivo Ahora puedes ver que tenemos un total diez artículos flex en nuestro contenedor, y ahora voy a reducir el ancho del contenedor. Uso de la propiedad width. Entonces voy a escribir con 400 píxeles. Si configuro este archivo, aquí puedes ver el resultado. Aquí puedes ver que los artículos flex son sobrevolados a este contenedor Del mismo modo, si utilizo propiedad height y aumento la altura 200 pixel y configuro este archivo, se puede ver este resultado. Pero si cambio la dirección del flex, déjame mostrarte flex. Dirección, columna y luego establecer el archivo. Ahora puedes ver, una vez más, los artículos flex son sobrevolados a este contenedor Para resolver este problema, tenemos otra propiedad flex, que es Flex RAP. Básicamente, flex Rap tiene tres valores, NoaPrap y RF reverse NoAP es nuestro valor predeterminado. Si usas o no, va a desbordar tus datos. Veamos cómo funciona. Para esto, voy a usar flex direction row y además voy a establecer un ancho de este contenedor. Con 400 píxeles. Si configuro este archivo, puedes ver el resultado. Y ahora voy a usar la propiedad flex Rp, FlexAp. Al principio, voy a usar el valor nob. Si configuro este archivo, aquí puedes ver que no hay cambios porque este es el valor predeterminado de esta probabilidad, por lo que no va a afectar a los elementos flex. Si quieres envolverlo, necesitas usar Rav Value. Et yo te muestro. Si configuro este archivo, ahora puedes ver el resultado. Ahora puedes ver nuestro contenedor con este acero de 400 píxeles, pero envuelve perfectamente nuestro artículo flex dentro de este contenedor. Como se puede ver automáticamente llegar a la siguiente línea. Tengamos cierto margen entre este ex ítem. Voy a escribir margen de cinco píxeles. Si configuro este archivo, puedes ver el resultado. Ahora está claro para usted cuando los datos se desbordan desde la primera línea, luego automáticamente llegó a la siguiente línea. Entonces automáticamente viene a la siguiente línea. Pero si cambio el colum dirección flex también quiero usar la propiedad height, height 200 pixel, y voy a comentar la propiedad wide Si configuro este archivo, ahora puedes ver el resultado. Se puede ver que está puesta en orden vertical, primero, segundo, tercero, cuarto, quinto, seis, séptimo, ocho, 19. Espero que ahora te quede claro cómo se establecen los artículos en orden vertical. Ahora voy a usar el siguiente valor de esta probabilidad, que es rap reverse. Voy a escribir rap reverse. Si configuro este archivo, ahora se puede ver que es simplemente invertir el orden de los artículos ahora va a comenzar desde el lado derecho y el lado del labio terminado. Si cambio la dirección del flex, filas y configuro con hasta este contenedor. Y conmutar la altura y establecer este archivo. Como puedes ver, nuestros artículos parten de la segunda línea de este contenedor. Primero, segundo, tercero, cuarto, quinto, sexto, siete, ocho, 19. Básicamente, usamos la propiedad p para controlar los datos de desbordamiento. Espero que tengas el punto, y nuestra próxima propiedad es flex flow. ¿Qué es el flujo flexible? Es una propiedad acortada de flex arrive y flex direction. Usando una propiedad, puede controlar ambas propiedades y podemos usarla en una línea. Voy a usar flex flow propriety, flex flow. Aquí, primero, necesitamos proporcionar valor de dirección flexible y luego necesitamos proporcionar valor flex rep. Primero, nuestro valor de dirección de flexión es colum, nuestro valor de p flexible es raro Voy a comentar esta propiedad dos y también necesito comentar con propiedad porque usamos valor de colum y voy a descommen la Si configuro este archivo, aquí podemos ver es que funciona perfectamente. Si no uso un valor aquí, y establecer este archivo. Ahora puedes ver que nuestros artículos flex están sobrevolados a este contenedor Básicamente, Flexplo es un liner de las dos propiedades, flex direction y y FlixAP Espero que ahora los conceptos sean claros para ti lo que es FlexAP y Flixlo Así que gracias por ver este video, Estén atentos a nuestro próximo tutorial. 114. Tutorial de contenido de CSS Flexbox Justify: Oye, de nuevo, estoy de vuelta con un nuevo tutorial relacionado con flexbox y en este tutorial, vamos a aprender a justificar la propiedad del centro Volvamos a la transmisión de la computadora. Básicamente, utilizamos la propiedad justify content para la alineación horizontal. Esta propiedad viene con un total de seis valor. Déjame mostrarte. Nuestro primer valor es flex start. También es un valor por defecto. Luego viene flix centro final, espacio alrededor, espacio entre el espacio de manera uniforme. Es muy similar a nuestra propiedad grid, justifica el contenido, y ya lo aprendemos en nuestra sección de grid. Empecemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi coorreator de Visual Studio y mi navegador usando extensión de servidor web Dentro del contenedor de patente, tenemos un total de cuatro artículos flexibles. Ahora voy a alinearlo usando justify content property. Tipo de sonido, justificar contenido. Al principio, voy a usar el valor central. Si configuro este archivo, puedes ver el resultado. Como puedes ver, mueve todo el centro flex de este contenedor. Y a continuación, voy a usar flex end value. Extremo flexible. Si configuro este archivo, como puede ver, afeitará todo el elemento flex esquina derecha de este contenedor, y flex tart es un valor predeterminado de esta propiedad Si utilizo esta propiedad, permítame mostrarle y establecer este archivo. Como puedes ver, es un valor predeterminado. Si utilizo algún valor flex o no, va a devolver este resultado. Nuestro siguiente valor es el espacio entre. Espacio de tipo de sonido entre. Si configuro este archivo, como pueden ver, mueve nuestro primer ítem y último ítem de fin a fin de este contenedor. Si le quito el margen, ahora es más claro para usted. Como voy a quitar el acolchado uno. Ahora puedes ver el resultado y voy a sumar todo el espacio entre estos ítems. Dividió por igual este espacio entre elementos flex. Nuestro siguiente valor es el espacio alrededor. Déjame mostrarte. Si configuro este archivo, ahora puedes ver que proporciona igual espacio primero y último de este ítem. Y entre estos elementos , proporciona doble espacio. Como puede ver, proporciona igual espacio antes del primer ítem y uptur el primer ítem De igual manera, proporciona igual espacio antes del segundo ítem y uptur el segundo ítem Es por eso que la brecha entre los ítems se desarrolla esta primera brecha, y nuestro último valor es el espacio de manera uniforme. Si uso esta v y configuro este archivo, como puede ver, proporciona una cantidad similar de espacio entre los elementos flexibles. Espero que ahora te quede claro cómo podemos alinear horizontalmente nuestros artículos flex. Gracias por ver este video, estad atentos para nuestro próximo tutorial. 115. Tutorial de alineación de elementos de Flexbox de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, vengo con un nuevo tutorial relacionado CSS flex box. En este tutorial, vamos a aprender align item property. Utilizamos la propiedad align item para la alineación vertical, y tenemos un total de cinco propiedades de alineación relacionadas con el valor , centro FlextrtFLX, tensión Si usamos valor flexart, y luego va a poner mi artículo flex en la parte superior de este contenedor Si usamos el valor flex N, entonces va a poner mi artículo flex en el fondo de este contenedor. Si quieres alinear el centro verticalmente, en ese caso, puedes usar el valor central, y estirar es nuestro valor predeterminado, pero el valor de línea base es uno diferente. Empecemos la práctica y veamos cómo se desparasita. Como pueden ver, lado a lado, abro mi coorretor de visual studio y mi navegador usando Como puedes ver, ya creamos un continuer y dentro de este contenedor, tenemos un total de cuatro artículos flex Como puede ver, utilizamos la propiedad display flex. Usando esta propiedad, podemos convertir nuestro contenedor como un contenedor flexible. Voy a usar esta propiedad, que es align item, align items. Nuestro primer valor es el estiramiento. Si configuro este archivo, aquí puedes ver que no hay cambios porque es un valor predeterminado. Estamos trabajando con alineación vertical, por lo que necesitamos aumentar la altura del contenedor, la altura, 500 píxeles. Si configuro este archivo, puedes ver el resultado. Por defecto, alinear el artículo usa el valor de estiramiento. Ahora voy a usar el primer valor, que es flex start. Si configuro este archivo, como pueden ver, ahora la alineación vertical de este ítem es la parte superior del contenedor. Del mismo modo, si utilizo flex end value y configuro este archivo, como puede ver, todos los elementos están alineados en la parte inferior de este contenedor. Si quieres alinear este ítem, centro de este contenedor, puedes usar el valor central Alinear centro del artículo, puedes ver el resultado. Alinea todos los elementos flex en el centro de este contenedor. Agreguemos poca altura en nuestro tercer artículo. Voy a usar la propiedad height en nuestro tercer ítem, altura 50 pixel. Si configuro este archivo, como pueden ver, ahora la altura de nuestro tercer elemento es de 50 píxeles, y ahora voy a hablar del concepto de línea base. Si utilizo flex end value, flex end y configuro este archivo, como puede ver, como puede ver, los ítems son finales en la línea base. Pero si uso el valor inicial y configuro este archivo, ahora la línea base termina en. Y ahora voy a hablar nuestro último valor, que es la línea base. Pero al principio, voy a aumentar el tamaño de fuente del tercer elemento. Tamaño de fuente. Quiero usar la propiedad de tamaño de fuente. Tamaño de fuente 34 píxeles. Ahora también voy a reducir el tamaño de fuente del segundo elemento. Voy a usar el valor del tamaño de fuente una vez más y voy a usar diez píxeles para eso. Si configuro este archivo, puedes ver el resultado. Ahora puedes ver que la alineación de la línea base del texto es diferente y ahora quiero alinear este texto en la misma línea base. Para eso, necesitamos usar la propiedad de línea base. Déjame mostrarte alinear elementos, voy a usar el valor de línea base. Línea base. Si configuro este archivo, puedes ver el resultado. Ahora todos los textos vienen en la misma línea de base. Si quieres usar alineación horizontal, sí, puedes usar con eso. Solo necesitas usar la propiedad de justify content. Vamos a usarlo. Justificar centro de contenido. Si configuro este archivo, puedes ver el resultado. Como se puede cambiar la dirección de flexión. Como sabes, por defecto, nuestra dirección flex es incorrecta. Cambiemos la dirección del flex. Dirección de flexión. Voy a usar el valor de columna. Si configuro este archivo, como pueden ver, ahora nuestra propiedad Ant trabaja en horizontal, no en la vertical. Si utilizo la propiedad flex N, y configuro este archivo, como puedes ver, está alineado horizontalmente porque cambiamos dirección XX y la dirección YxS usando la propiedad flex direction Ahora sigamos el eje transversal opuesto. Entonces esto es para este tutorial. Espero que ahora el concepto sea claro para usted lo que es align item property. Así que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 116. Tutorial de alineación de contenido de CSS Flexbox: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender CSS align content property. En nuestro tutorial anterior, aprenderemos sobre align item property. Esta propiedad también se utiliza para la alineación vertical. Como puede ver, tenemos una gran cantidad de diferentes valores relacionados con la probabilidad de alinear contenido. Flex de inicio, flex N, centro, estiramiento, línea base, espacio alrededor del espacio entre y espacio de manera uniforme. En nuestro tutorial anterior, aprenderemos sobre alinear elementos. Ambas properidades se utilizan para el mismo propósito, pero hay una diferencia entre dos esta probabilidad Alinear el elemento utilizado para la alineación de una sola fila, pero alinear el contenido utilizado para la alineación de varias filas. Supongamos que estás contento no cubierto en una sola fila, se envuelve y llega a la siguiente fila. Entonces necesitamos usar la propiedad Align content. Empecemos la práctica y veamos cómo funciona. Como pueden ver lado a lado, abro mi estudio visual Atener y mi navegador usando la extensión del servidor lip. Como pueden ver, ya creé documento TML llamado index dot HTML Aquí puedes ver en mi contenedor padre, tenemos un total de diez artículos flex. Al principio, voy a asignar a este contenedor. Después de la altura, voy a teclear nosotros con igual a 450 pixel. Como puede ver, nuestros datos son sobrevolados a este contenedor. En este caso, necesitamos usar la propiedad FlexRP, alguien para escribir flex rap Voy a usar el valor de Rab. Si configuro este archivo, puedes ver el resultado. En nuestros tutoriales anteriores, aprenderemos sobre la propiedad del rap flex. Ahora puedes ver que los artículos de desbordamientos llegaron al siguiente y como puedes ver, nuestros artículos ya están estirados Usemos nuestra propiedad align contenida. Entonces escriba, alinee contenido. Nuestro primer valor es el estiramiento. Si configuro este archivo, como puede ver, no hay cambios porque stretch es nuestro valor predeterminado. Pero si utilizo flex dot value, y configuro este archivo, ahora puedes ver que es mover verticalmente arriba. Del mismo modo, si utilizo flux y value y configuro este archivo, ahora los elementos se mueven verticalmente hacia adentro. Del mismo modo, si utilizo el valor central, entonces configura el archivo. Ahora todos los artículos son el centro de este contenedor. Nuestra siguiente propiedad es espacio entre, Somlote espacio entre Si configuro este archivo, puedes ver el resultado. Este valor va a llenar todo el espacio entre dos filas. Si utilizo espacio alrededor del valor, déjame mostrarte y luego establecer este archivo. Aquí se puede ver cualquier espacio que tengamos arriba de la fila, va a doblarlo entre esta fila y luego venir la misma cantidad de espacio, parte inferior de la última fila. Entonces viene nuestro siguiente valor, que es el espacio de manera uniforme, algún tipo de espacio de manera uniforme. Si configuro este archivo, ahora puedes verlo una misma cantidad de espacio entre filas. Esta propiedad sólo funciona cuando tenemos varias filas. Si elimino algún elemento flex de este contenedor, déjame mostrarte y luego configuro este archivo, puedes ver, todos los artículos están más centrados verticalmente. Ahora bien esta propiedad no va a funcionar correctamente. Si utilizo diferente valor, algo espacio entre, y luego establecer este archivo, se puede ver que no es trabajo. Esta propiedad funciona exactamente cuando tenemos varias filas. De lo contrario, no va a funcionar. Si tenemos una sola fila en ese caso, necesitamos usar la propiedad Align item. Espero que ahora te quede claro qué es Align content property. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 117. Tutorial de alineación de CSS Flexbox: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender CSS ex box aligned cell property. Esta propiedad también se utiliza para la alineación vertical, similar a la propiedad align item. Como puede ver, para esta propiedad, tenemos algunos valores similares. Apenas tenemos un nuevo valor para esta propiedad, que es auto. De ahí vienen flex start, flex end, centro, stretch y baseline Ahora la pregunta es, ¿cuál es la diferencia entre align item property y align cell property? Propiedad celular alineada utilizada vesicamente para artículos individuales Supongamos que desea alinear verticalmente el elemento flexible individual. En ese caso, es necesario utilizar esta propiedad. Como puedes ver en esta imagen, quedando un elemento flex, todos los elementos flex que llegaron a la parte superior del contenedor porque para esta celda en particular, usamos la propiedad align cell. Debido a esto, hemos podido diferenciar. Entonces comencemos la práctica y veamos cómo funciona. Aquí se puede ver lado a lado, abro mi visual studio coretor y mi navegador usando la extensión del servidor p Voy a usar mi archivo SML anterior para este ejemplo. Como puede ver en nuestro contenedor fijo, tenemos un total de cinco artículos flexibles. Y como puedes ver, por defecto, los artículos se estiran. Primero, quiero alinear todos los artículos en la parte superior del contenedor. Voy a usar align item property. Alinear elemento Flextrt. Si configuro este archivo, puedes ver el resultado. Ahora voy a usar la propiedad de celda alineada porque ahora quiero alinear una celda individual. Supongamos que quiero mover el extremo de celda número tres de este contenedor. Entonces tenemos que saltar al selector de ítem tres, y necesitamos usar esta venta alineada. Voy a usar flex end value flex end. Si configuro este archivo, puedes ver el resultado. Trasladamos exitosamente un extremo de celda individual de este contenedor. Recuerde, esta propiedad se utiliza para la alineación vertical. Vamos a mover la celda número dos al centro de este contenedor. Para estos, una vez más, estoy saltando al selector número dos, y voy a escribir AlignellPperty Centro AlignL. Si configuro este archivo, puedes ver el resultado. Hablemos de nuestra nueva propiedad que es auto. Si utilizo valor automático en nuestro ítem dos y luego configuro este archivo, aquí puedes ver que ha vuelto al grupo. Ahora, este valor está relacionado con el valor de alineación del contenedor padre. Cambiemos la alineación del contenedor padre. Alinee los artículos al centro. Si configuro este archivo, como puede ver, nuestro valor automático seguirá automáticamente esta alineación. Si usamos align self auto, entonces es relativamente trabajo con align items value. Si utilizamos el valor central también es actuar como un valor central. Si usamos flex endvalue también actuamos como un valor final flex Solo debes recordar, la propiedad de Alan SEL solo trabaja con las ventas Flexbox, no con el contenedor Flexbox Espero que ahora te quede claro qué es propiedad de Alan Cell, y cuál es el Ukage de esta propiedad Gracias por ver este video, estén atentos para nuestros próximos dos tudio 118. Tutorial de pedido de CSS Flexbox: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender sobre la propiedad del agua. Esta propiedad funciona de la misma manera que lo hicimos en la grilla. Empecemos la práctica y veamos cómo funciona. Aquí puedes ver lado a lado, abro mi coator de Visual Studio y mi navegador usando la extensión Lifesaver, y ya creo documento TML llamado Como puede ver, en cambio el contenedor flex, tenemos un total de seis artículos flex. Si recuerdas haber usado la propiedad WR, podemos cambiar las posiciones de ventas Supongamos que desea mover cuarta celda en la posición número dos. En ese caso, necesitamos usar la propiedad de War. Entonces voy a saltar al rubro cinco sector y voy a teclear agua. Al principio, voy a pasar valor cero. Este es el valor predeterminado. Si configuro este archivo, aquí pueden ver, no hay cambios en su orden. Pero si paso menos uno, déjame mostrarte y establecer este archivo. Ahora puedes ver, ahora puedes ver nuestro quinto artículo mover el primer lugar en este orden. Por defecto, todos los valores de propiedad del agua de las celdas son cero. El agua comienza desde el valor menos. Para el ítem cinco, usamos valor menos. Por eso vino primero. Esto es menos uno. Además, voy a escribir menos uno en quinto esto. Menos uno. De igual manera, para nuestro tercer ítem, quiero pasar menos dos, agua menos dos. Si configuro este archivo, ahora se puede ver que llegó el primer lugar en nuestras aguas porque menos dos es menos que cero y menos uno. Por eso vino primero. Como te dije antes, el valor más bajo vino primero. Quiero escribir menos dos en tercer lugar, menos dos. Primero menos dos, luego viene menos uno, luego cero, cero, cero y cero. Pero si paso un valor en el ítem número uno, déjame mostrarte agua uno y luego establecer este archivo, puedes ver que ha llegado al lado derecho porque uno es mayor que valor menos y valor cero. Por eso llegó a cero. Voy a pasar más uno aquí. Es mover de menor a mayor valor. Ahora bien, si paso orden dos en nuestro cuarto artículo, déjame mostrarte orden dos, y si configuro este archivo, como puedes ver, ahora es skin al último lugar porque más dos es mayor que cero y uno. Si configuro este archivo, ahora está claro para usted. Ahora se puede entender claramente cómo son las órdenes la palabra. No establecemos ningún pedido en el artículo número dos y el artículo número seis. Entonces para la caída, el agua de estos artículos son cero. Espero que ahora entiendas el riego. Ahora la pregunta es, ¿por qué usamos la propiedad de agua? Cuando quieres que tu sitio web sea receptivo, entonces el agua es la propiedad más importante. En vista dexter, quieres seguir esta agua. Pero en la vista móvil, quieres mover el elemento cuatro en primer lugar. En ese caso, las propiedades de agua son muy útiles. Espero que hayas entendido el punto. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 119. Tutorial de cultivo de CSS Flexbox Flex: Hola, chicos. Me alegro de verte de vuelta. Una vez más, vengo con un nuevo tutorial. Y en este tutorial, vamos a aprender una nueva propiedad, que es Flix Row. Entonces comencemos la práctica y veamos cómo funciona. Como pueden ver, lado a lado, abro mi Visual Studio Ceator y mi navegador usando la extensión Lifesaver, y ya creé un documento TML llamado index dot TML Y como puede ver en nuestro contenedor padre, tenemos un total de seis artículos flexibles. Así que usemos nuestra nueva propiedad. Básicamente, la propiedad de ranura flexible no funciona con contenedor. Trabajo con artículos flex. Como puede ver, hay un nombre de clase común para todos los elementos flexibles. Voy a saltar al selector de ítems. Voy a usar nuestra nueva propiedad, que es flex grow flex grow. Aquí tenemos que pasar valor numérico, si paso cero y luego establecer este archivo, como se puede ver, y no hay cambios. Si paso un valor aquí, voy a escribir uno y luego establecer este archivo, aquí se puede ver que todos los espacios están divididos por igual para flex item. Espero que ahora te quede claro cómo funcionan las propiedades del grupo flex. Si paso dos aquí y luego configuro este archivo, como pueden ver, no hay cambios. Porque dividí por igual el espacio, todos los elementos lex. Por eso no va a funcionar. Vuelvo a mi antiguo puesto uno, y voy a establecer este archivo. Ahora quiero aumentar ítem a ancho. Sí, podemos hacerlo. Al principio, necesitamos seleccionar el ítem individualmente y luego necesitamos usar esta probidad, escamas, crecer Aquí voy a pasar dos. Si configuro este archivo, puedes ver el resultado. Se puede ver aquí, ahora es el doble comparado con otras células. Del mismo modo, si paso tres y luego configuro este archivo, ahora su tamaño es triple comparado con todos de manera similar, voy a usar la misma propiedad en nuestro ítem cuatro. Voy a escribir, los copos crecen, y quiero ampliar el ancho hasta cuatro veces, así que quiero pasar cuatro aquí. Si configuro este archivo, puedes ver la diferencia. Si elimino el margen entre celdas, ahora te queda más claro. Sin el ítem dos y cuatro, todas las celdas son una. Para el elemento dos, el valor de la propiedad de grupo Flex es tres, y para el elemento cuatro, la propiedad de grupo Flex es cuatro. Esta propiedad solo funciona para artículo flex Ancho. Básicamente, utilizamos esta propiedad cuando necesitamos proporcionar igual con todas las ventas. Espero que ahora te quede claro lo que es la propiedad del grupo Flex. Así que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 120. Tutorial básico de CSS Flexbox Flex: Oye, una vez más, estoy de vuelta con una nueva propiedad relacionada CSS Flexbox En este tutorial, vamos a aprender ¿qué es la base flex? Esta propiedad es bastante similar a max Con propiedad. Básicamente, maneja el ancho del artículo flex. Veamos cómo podemos usarlo prácticamente. Como pueden ver lado a lado, abro mi codador de visual studio y mi navegador usando la extensión if server, y ya creo un documento HTML llamado index dot HTML Como puedes ver, dentro del contenedor flex, tenemos un total de 66 artículos. Como puede ver, usamos la propiedad display, flex, y también usamos flex wrap. Usamos probidad flex Rap porque si el artículo sobrevolaba entonces bajaba Por eso usamos flex Rap y para cada artículo flex establecemos un ancho común. Como puedes ver, flex crecer uno. Aprendemos sobre esta propiedad en nuestro tutorial de precaso. Es por eso que todos los artículos que ocupan la misma cantidad de espacio. Usemos la base flex de propiedad. Yo artículo uno seleccionado, voy a escribir flex base. Y aquí voy a pasar 250 pixel. Si configuro este archivo, como pueden ver, ahora nuestro primer ancho de elemento flex es de 250 píxeles. Ahora es trabajo como ancho máximo. Vamos a trn en la barra de herramientas del desarrollador. Si guardo esta inmersión, como pueden ver, nuestro primer artículo con es de 250 píxeles. Pero sin nuestro primer artículo, todas las inmerencias que ocupan la misma cantidad de espacio Pero si trato de reducir el tamaño del navegador, déjame mostrarte. Como puedes ver, no va a afectar el ancho de este ítem uno. Si reducimos el ancho del navegador, como puedes ver, ahora se encoge hacia abajo. Porque esta propiedad funcionaba como un ancho máximo. Podemos reducir el ancho de este artículo por debajo de los 250 píxeles, pero no podemos estirar el ancho de este elemento más de 250 píxeles. Ahora voy a usar la propiedad de base flex todo este ítem. Voy a comentar esta línea y voy a escribir flex basis 100 pixel. Si configuro este archivo, al principio, voy a aumentar el ancho del panel de mi navegador ahora puedes ver aún nuestro primer ancho de elemento es de 250 píxeles. Pero sin nuestro primer artículo, los anchos de cada artículo son de 100 píxeles Si trato de aumentar poco el tamaño del navegador con, déjame mostrarte, como puedes ver, ítem cinco trapeador a la esquina derecha. Porque sin primer elemento, todos los elementos intentan mantener 100 píxeles de ancho y también están tratando de llenar el espacio de este navegador. Ahora intentemos reducir el ancho del navegador y veamos qué pasó. Si trato de reducir el ancho del navegador, como puede ver, mayoría de los artículos se envían a la segunda fila porque usamos propiedad flexer De lo contrario, van a desbordarse en este contenedor. Pero si lo reduzco, poco más, como pueden ver, como pueden ver, no hay espacio para dos elementos en una sola fila. Por eso están encogidos. Pero como puedes ver, reducimos el ítem un ancho. Pero siendo el elemento uno, todavía todos los anchos del artículo son de 100 píxeles porque tienen espacio para extenderse hasta su ancho completo Pero si lo reduzco cada vez más, como pueden ver, todos los artículos están reduciendo su ancho. Entonces espero ahora te quede claro que esta propiedad funcione como un ancho máximo. No sólo eso, esta propiedad también funciona como un ancho mínimo también. Déjame mostrarte. Si comento esta línea, y si usamos la propiedad de grupo flex para todo este ítem y establecemos este archivo, como puede ver, todos los ítems se llegaron a la fila única. Usamos la propiedad Flexbsis solo para el artículo uno, y para la restante, usamos la propiedad de grupo flexible, y nuestro valor de crecimiento flexible es uno y nuestro valor de crecimiento flexible es Como te dije, es trabajo como una propiedad de ancho mínimo también. Déjame mostrarte. Si trato de reducir el ancho del contenedor, como pueden ver, va a afectar todo el ancho de este ítem sin el ítem uno. Si trato de reducirlo más, como pueden ver, no va a afectar el ítem uno. Sin el ítem uno, todos los artículos están reduciendo su ancho. Si tratamos de reducirlo más, como puedes ver, nuestro último artículo enviado a la segunda fila. Pero nuestro artículo uno aún mantiene el mismo ancho de 250 píxeles. Si usamos la propiedad flex Basis con fila flex, hay un ancho mínimo. Pero si utilizamos la propiedad de base flexible solamente, entonces va a actuar como un máximo con. No sólo eso, aquí podemos usar valor porcentual también. Supongamos que quiero usar 50%, 50%. Si configuro este archivo, como pueden ver, sigue funcionando correctamente. Aumentemos el valor porcentual, 90%. Si configuro este archivo, ahora te queda claro cómo es el trabajo. Ahora cada vez que nuestro primer artículo va a tomar 90% de ancho de este navegador. Entonces esto depende de ti qué tipo de valor vas a usar. Espero que ahora te quede claro cuál es la propiedad más baja de Flex Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 121. Tutorial de CSS Flexbox Flex Shrink: Bienvenidos de nuevo chicos. En este tutorial, vamos a aprender qué es flex stream. Entonces saltemos a la pantalla de la computadora y veamos qué es eso. Aquí puedes ver lado a lado, abrí mi Visual Studio Coreator usando la extensión Lifesaver, y ya creé un documento TML llamado index dot TML Y aquí se puede ver el para diferentes elementos fijos uno, dos, tres, cuatro, y este es nuestro contenedor fijo. Si te muestro aquí puedes ver, usamos fix distal. Y en nuestra clase común, utilizo fix zero property, fix 01. Es por eso que los anchos de los artículos se dividen por igual. Pero en este tutorial, vamos a aprender una nueva propiedad, que es flex syn. Entonces empecemos. Entonces primero, voy a quitar fix roo property, y voy a establecer W W 200 pixel. Si configuro este archivo y cambio el tamaño mi navegador con, puedes ver el resultado Aquí puedes ver nuestro contenedor con es mayor que el ancho de los artículos. Como puedes ver, todos los artículos con son de 200 píxeles. Ahora quiero usar esta propiedad flexing en nuestro ítem uno. Pero al principio, quiero decirles cuál es el significado de flexionar. Básicamente, utilizamos la propiedad flexing para crear nuestro elemento flexible sensible Si desea que sus artículos sean contraíbles, entonces necesita usar esta propiedad Aquí puedes ver que encoge el artículo Ancho. Permítanme aclarar el concepto. En nuestro ítem uno, voy a usar esta propiedad, flex shrink. Uno es el valor predeterminado. Si configuro este archivo, aquí puedes ver que no hay cambios. Pero si uso valor cero y luego configuro este archivo, ahora se puede ver, Hey, hice algún sinamista Necesitamos usar esta propiedad dentro del ítem uno, no todos los artículos. Quiero trasladar esta propiedad en nuestro ítem uno. Si configuro este archivo, aquí se puede ver el ítem uno no cambió su forma. Ahora nuestro artículo uno no es encogible. Ahora mantenía el ancho fijo de 200 píxeles. Si aumento el ancho del navegador, puedes ver el resultado. Y si reduzco al límite otro artículo flix, déjame mostrarte aquí puedes ver nuestro otro artículo flix sobrevolado de este contenedor Como puede ver, nuestro primer artículo no se encogió porque usamos el valor de flexión cero Ahora está claro para ti. Para el encogimiento, podemos usar cero y un valor. Si usamos un valor y luego establecemos este archivo, ahora puedes ver el resultado. Aquí puedes ver ahora encoge nuestro artículo. Si quieres subir el encogimiento, entonces necesitas usar el valor cero. Ahora voy a mostrarte otra cosa. Ya sabes si uso valor cero, podemos subir al encogimiento. Pero si uso un valor, entonces podemos encoger nuestros artículos flex. Ahora, sin cero ni uno, podemos usar diferentes valores. Déjame mostrarte. Si utilizo dos cabellos, configuro este archivo, se puede ver el resultado. Reduce nuestro primer artículo en comparación con otros artículos. Del mismo modo, si utilizo tres valores y luego configuro este archivo, se puede ver, de nuevo, reducir nuestro ítem uno. Si no usamos valor cero, entonces nuestro artículo siempre es encogible ahora te voy a mostrar el segundo método ¿Cómo podemos usar esta propiedad de cadena de una manera diferente? Para eso, al principio, voy a quitar el ancho del artículo. Entonces configuro este archivo y también voy a usar string value one. Y ahora voy a usar la propiedad flex Basis. Base Flex. Base Flex 200 píxeles. Base flexible significa hierba dinámica. Ahora puedes ver que no podemos aplicar ningún mojado a todo el artículo. Aplicamos con en nuestro artículo uno usando flex BesisPpity. Ahora bien, si configuro este archivo y trato de reducir el ancho del navegador, como puedes ver, cuando termine el espacio de mezcla, y si intento reducirlo, puedes ver que nuestro ítem uno también se reduce. Ahora la pregunta es ¿por qué encogerse? Porque usamos un valor. Pero si utilizo valor cero, y configuro este archivo, ahora puedes ver que nuestros artículos están sobrevolados de este contenedor Pero si paso a valor y luego configuro este archivo, como pueden ver, no va a funcionar. Si utilizo el valor uno, y configuro este archivo, se puede ver que no hay cambios. En este método, nuestros otros valores no van a funcionar. Si quieres cubrir el espacio restante, en ese caso, puedes usar flex grow value. Déjame mostrarte. En nuestro ítem cuatro, voy a usar flex grow value. Los copos crecen. Uno, si configuro este archivo, como pueden ver, nuestro artículo cuatro cubrió toda la pieza en blanco. Si reduzco el navegador con, puedes ver que nuestro artículo cuatro se encoge automáticamente y cuando se encoge, ahora afecta al elemento uno. Espero que en ese momento te quede claro. Ahora me voy a poner con a este contenedor. Como pueden ver, no utilizamos ningún ancho a este contenedor, y ahora voy a poner contenedor con. Aquí voy a escribir con ANCHO con 600 píxeles. Si configuro este archivo y aumento el ancho de mi navegador, ahora puedes ver que el tamaño de nuestro contenedor es fijo, y ahora voy a reducir el ancho del contenedor. Voy a usar 300 píxeles. Si configuro este archivo, puedes ver que encoge todos los elementos. También el ítem uno. Y si encojo el contenedor poco con algo a 50 píxeles, y luego configuro este archivo, aquí se puede ver que también es trabajo porque usamos un valor aquí, flexionando uno, pero si uso valor cero y luego configuro este archivo, se puede ver un resultado diferente Aquí puedes ver que otros artículos están sobrevolados de este contenedor Espero que ahora te quede claro lo que es flexionar la propiedad. Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 122. Tutorial de CSS Flexbox con automático de márgenes: Hoy en este tutorial, vamos a aprender qué es auto maargin en Saltemos a la pantalla de la computadora y veamos cómo funciona. Aquí puedes ver lado a lado, abro mi coordinador de visual studio y mi navegador usando la extensión Lifesaver, y ya creo un documento TML llamado index Como pueden ver en mi navegador, hay un contenedor paren, y dentro de este contenedor paren, tenemos un Este es nuestro contenedor flix, y este es nuestro artículo fijo. Ahora les voy a mostrar cómo podemos obtener diferentes resultados usando Margin autowl Entonces en nuestro ítem, voy a escribir Margin. Margen. Y voy a usar Atovil Si configuro este archivo, se puede ver el resultado Aquí puedes verlo horizontal y verticalmente alineado al centro. Pero el tiin es ¿por qué? Porque hay mucho espacio libre dentro de este contenedor. Por eso está alineado en el centro. Ahora voy a usar margin lip auto, margin lab. Si configuro este archivo, como pueden ver, aquí lo pueden ver automáticamente enviado al lado derecho de este contenedor. Nuestro artículo deja el espacio en el lado izquierdo y se envía al lado derecho. Si utilizo margin top auto top, entonces configuro este archivo, ahora puedes ver que está bajando de arriba porque tiene espacio libre en la parte superior. Con eso, voy a usar margin let property. Margen let y una vez más, voy a usar auto Valu. Si configuro este archivo, ahora puedes ver nuestro artículo flex enviado a la esquina inferior derecha de este contenedor. Espero que ahora puedan entender cómo podemos conseguir alineación diferente solo usando auto Vu. Déjame mostrarte otro ejemplo. Supongamos que tenemos un contenedor, y dentro de este contenedor, tenemos que decirle a cuatro artículos flex. Aquí puedes ver los artículos, el ítem uno, el ítem dos, el ítem tres y el ítem cuatro. Digo diferente color de fondo a estos artículos. Y ahora voy a usar nuestro margin auto Velu lo voy a usar dentro de nuestro ítem dos Margen, derecho, auto Si configuro este archivo, puedes ver el resultado. Aquí puedes ver que nuestro artículo dos ocupa todo el espacio disponible dentro del contenedor, y se proporciona margen de uso y artículo conformado tres y artículo cuatro, lado derecho de este contenedor. Del mismo modo, si utilizo la propiedad margin lift, déjame mostrarte margin, lap y luego establecer este archivo. Ahora se puede ver que proporciona todo el espacio, lado izquierdo de este ítem dos. Y si utilizo la misma propiedad del ítem uno, entonces voy a cortar esta propiedad y pegarla aquí. Si configuro este archivo, ahora puedes ver que proporciona todo el espacio antes del ítem uno, y se mueve todo el artículo del lado derecho de este contenedor. Entonces, cuando trabajas con el lado responsivo, puedes usar este árbol para alinear tu artículo flexible. Entonces espero que ahora esté claro para ti, usando Auto Value, cómo podemos crear diferentes diseños en caja flexible. Así que gracias por ver este tutorial mantente atento para nuestro próximo tutorial. 123. Tutorial de CSS Flexbox Nested Flex: Oye, este es el último tutorial relacionado con la propiedad flexbox, y en nuestro tutorial acoing, vamos a cubrir algunos proyectos reales como En este tutorial, vamos a aprender qué es el flix anidado Saltemos a la pantalla de la computadora y veamos cómo funciona. Como pueden ver, hay un contenedor y dentro de este contenedor, hemos puesto tres artículo D. Si convertimos nuestro contenedor padre en contenedor flexible, entonces llamamos a este artículo De flex. Pero si usamos la propiedad display flex en un ítem en particular, en ese caso, sería un contenedor flex anidado, y estos también son elemento flex dentro de este contenedor Entonces comencemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión de servidor light, y ya creo un documento TM llamado index dot HTML. Y aquí se puede ver un elemento div padre, contenedor de clase. Y dentro de este contenedor, tenemos que t para el artículo Flexbox Como puedes ver, en nuestra clase contenedor, utilizamos display property flix. Primero, voy a cambiar la dirección de los seis ítems. Entonces aquí, voy a usar la propiedad flex direction. Dirección de flexión. Voy a usar Clumvi. Si configuro este archivo, puedes ver el resultado. Ya establecemos una altura de 100 píxeles para nuestros artículos. Ahora voy a agregar tres DV más dentro de nuestro segundo ítem. Aquí, voy a sumar un total de tres DV más. Al principio, voy a crear una D con subítem de clase de subítem. Además, voy a usar otro nombre de clase sub ítem uno para nuestra primera D. Entonces voy a duplicar esta línea total dos t. Así que voy a alabar ovejas recortadas flecha abajo, sub ítem dos, y sub ítem tres. Aquí puedes ver, establecí un nombre de clase común sabem también establecemos un nombre de clase diferente para cada ítem Entonces dentro de esta diviem voy a escribir A, B y C. Si configuro este archivo, como pueden ver, devolverá nuestros artículos en fila sabia, y ahora voy a convertir nuestro segundo elemento flexbox en un contenedor flexbox Aquí voy a usar una pantalla de nombre D propiamente dicha. Mostrar flix. Si configuro este vil, como pueden ver, por defecto, arregla nuestro artículo en una sola fila Ahora vamos a establecer un color de fondo a nuestros artículos. Para eso, ítem dos, mayor que signo punto nuestro nombre de clase, que es sub ítem. Después después dentro de la clase, voy a establecer el color de fondo. Antecedentes. Por qué. Además, voy a establecer un color de texto. Color Negro. Si configuro este archivo, puedes ver el resultado. Ahora quiero dividir por igual nuestro artículo flex anidado dentro de este contenedor Para eso, voy a usar una propiedad llamada flex Grove. Flex Grove flex grow vino. Si configuro este archivo, puedes ver el resultado. Déjenme darle un margen a nuestros artículos que puedan alquitarte. Margen de un píxel. Si configuro este archivo, puedes ver el resultado. Como puede ver, tenemos un contenedor parent fix dentro de este continuer flex parent, tenemos P four flex IN, y convertimos nuestro segundo flex IN en un contenedor flexible anidado, y dentro del continuer fix NSTP, tenemos Protal three flex item, A, B y C. Espero que ahora esté claro para usted cómo podemos No es muy difícil. Es un proceso muy sencillo. Así que gracias por ver este video, Di por nuestro próximo Tutorial. 124. Tutorial de espesor de decoración de texto CSS3: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender un nuevo texto relacionado con la propiedad, que es el grosor de la decoración del texto. En nuestros tutoriales anteriores, ya aprendemos sobre las propiedades de decoración de texto. Toma línea de decoración, toma color de decoración, toma estilo de decoración. Usando estas propiedades, podemos poner subrayado en cualquier texto. Además, podemos cambiar el color del subrayado y subrayar el estilo de decoración. No sólo que podemos usar la línea O también, sino que el problema es que no podemos controlar el grosor. Para resolver este problema, CSS introduce otra propiedad, que es el grosor de la decoración del texto. Entonces comencemos lo práctico y veamos cómo podemos usar esta propiedad. Entonces como pueden ver lado a lado, abro mis usuarios Studio codeeditor y mi navegador usando la extensión del servidor Light, y ya creo un documento ML llamado index dot HTML Entonces como puedes ver, tenemos H una etiqueta, y aquí usamos esta propiedad, centro de línea de texto. Y ahora voy a usar otra propiedad llamada Línea de Decoración de Texto. Entonces aquí voy a escribir decoración de texto, línea. Y esta propiedad viene con un total de tres valores subrayados sobre línea y línea a través Entonces voy a usar subrayado. Y voy a poner este archivo. Después de configurar este archivo, aquí se puede ver el subrayado debajo del texto Y ahora voy a cambiar el color del subrayado. Para cambiar el color, necesitamos usar propiedad llamada decoración fiscal color texto decoración, color, y voy a usar color rojo. Entonces voy a perseguir el estilo de decoración. Entonces aquí, voy a usar otro inmueble llamado decoración fiscal estilo de decoración de texto, y voy a usar dst. Si configuro este archivo, puedes ver el resultado. Y ahora quiero controlar el grosor de este subrayado Por lo que necesitamos usar el nuevo inmueble llamado Espesor de Decoración Fiscal. Decoración SunDuttt. Espesor de decoración de texto. Y aquí, voy a mencionar este tamaño, y voy a tomar pixel dolor. Si configuro este archivo, aquí puedes ver el resultado. Entonces, como puede ver, aumenta el grosor de este texto. Y si lo hago sólido, ahora es más puro volumen. Sólido. Después de configurar este archivo, se puede ver el resultado. Y si quieres agregar más grosor, solo aumenta el valor. Supongamos que voy a pasar 20 píxeles y se puede ver el resultado. También, podemos aplicarlo en nuestro overline. Supongamos que si paso con subrayado, quiero deslizarme sobre la línea Si configuro este archivo, puedes ver el resultado. Ahora usamos subrayado y overline juntos. Entonces esto es para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 125. Tutorial de offset de subrayado de texto CSS3: Hola chicos, me alegro de verles de vuelta. Fue de nuevo estoy de vuelta con un nuevo tutorial relacionado CSS. Y en este tutorial, vamos a aprender CSS subrayado de texto opuesto En nuestros tutoriales anteriores, ya aprendemos sobre estas propiedades. Toma línea de decoración, toma color de decoración, toma estilo de decoración. Usando estas propiedades, podemos definir color, grosor, estilo, etcétera Pero si quiero proporcionar brecha entre el texto y el subrayado, entonces no tenemos ninguna propiedad Pero CSS introduce una nueva propiedad, texto subrayado opuesto Usando esta propiedad, puede proporcionar la brecha entre el texto y el subrayado Entonces comencemos lo práctico y veamos cómo podemos aplicar esta propiedad. 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 if, y ya creo un índice de nombre de documento TML dotsTM Y como puedes ver en nuestra etiqueta corporal, tenemos H una etiqueta. Entonces al principio, voy a usar una propiedad llamada línea Tix Decoration Decoración de texto tipo hijo. Toma línea de decoración. Toma línea de decoración, voy a usar subrayado A continuación, voy a usar otra propiedad Tikes decoración color Toma color de decoración. Toma color de decoración, voy a usar color rojo. Siguiente propiedad que voy a usar lleva estilo de decoración. Estilo de decoración de texto. Toma estilo de decoración, sólido. Y voy a poner este archivo. Después de establecer este archivo, aquí puedes ver el resultado. Además, si desea controlar el grosor, solo el uso de la unidad toma propiedad de espesor de decoración. Así atar la decoración del texto, el grosor de la decoración del texto. Y voy a usar diez píxeles. Y quiero establecer este archivo. Después de configurar este archivo, se puede ver el subrayado, pero hay un problema No tenemos ningún hueco entre el texto y lo subrayado. Quiero aportar brecha entre texto y lo subrayado. Para ello, CSS introdujo otra propiedad, que es el subrayado de texto opuesto Entonces para escribir texto subrayado, opuesto. Y quiero proporcionar 20 pixel gap. Después de sub este archivo, se puede ver el resultado. Ahora proporciona un hueco de 20 píxeles entre el texto y el subrayado Entonces esto es para este tutorial. Espero que ahora te quede claro. 126. Tutorial de CSS CurrentColor: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS. Y en este tutorial, vamos a aprender algo nuevo, que es el color actual. En nuestros tutoriales inversos, ya lo aprendemos. Tenemos un total de seis modos de color diferentes. Nombre del color hexadecimal, RGB, RGBA, HSL, HSLA. Ahora CSS agrega otro modo de color, que es el color actual. Ahora intentemos entender qué es el color actual y qué tan fácil de hacer. Aquí puedes ver un elemento profundo. Y en este elemento deve, tenemos un encabezado una línea divisoria, un párrafo, un bloque profundo y un botón. Leer más. Entonces en este elemento padre, agrego una propiedad llamada color, y lo digo color azul. Después de usar esta propiedad de color, azul, va a cambiar el color del texto negro a azul. Pero quiero aplicar el mismo color en esta etiqueta de gato y este elemento profundo. Para aplicar este color azul a este elemento DB y a este botón, necesitamos usar una propiedad. Necesitamos usar la propiedad de color de fondo, y aquí tenemos que pasar este valor, color actual. Cuando uso este valor, color actual, va a comprobar qué color usamos nuestro valor de color. Como puede ver, utilizamos el color azul. Entonces va a aplicar el color azul a este elemento profundo y a este botón. Y podemos usar el color actual en cualquier lugar. Podemos aplicarlo color de fondo, color de borde, en cualquier lugar. Entonces 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 IPServereTension, y ya creé un documento estable llamado index Si notas puedes ver en nuestra etiqueta corporal, tenemos encabezado una etiqueta, entonces tenemos etiqueta profunda. E inserte esta etiqueta dip, tenemos encabezado dos etiqueta y algún párrafo y un párrafo y etiqueta de corte para botón Y aquí establecemos una identificación a este gusto de debilment. Y también, decimos con borde de margen de relleno a este debilment Y ahora voy a aplicar propiedad de color en este elemento gustativo. Entonces aquí, voy a usar una propiedad llamada color. Color, y voy a usar color rojo. Rojo. Y voy a poner este archivo. Después de establecer este archivo, como puedes ver, cambió los colores de la fuente. Ahora se convierte en negro rojo, y ahora quiero establecer un borde debajo del subtítulo Para ello, necesitamos seleccionar el subtítulo. Entonces Hemoti tiene etiqueta, el elemento padre, que es Gusto, entonces quiero seleccionar H dos elementos. H dos, luego los cols, quiero establecer la propiedad border bottom. Boton fronterizo. Y voy a pasar dos píxeles, dos píxeles, borde sólido, y para el color, voy a usar el color actual. Voy a usar el lugar de color actual. Y voy a poner este archivo. Después de configurar este archivo, como puede ver, si nota nuestro color de borde es rojo. Esto es posible porque en nuestro elemento parente, su uso propiedad de color, y decimos color rojo Y ahora si quieres cambiar el color, el color del texto, también el color del borde, necesitas cambiar una vez. Supongamos que quiero aplicar color verde. Verde. Perturbar este archivo, como puede ver, como puede ver, cambió el color de la fuente. También cambió el color del borde. la misma manera, si quieres aplicar borde de elemento paréntivo de color verde, también puedes usar este color actual Vu Entonces voy a copiar este Valu y reemplazar el negro por el color actual. Y voy a poner este archivo. Urasep este archivo, se puede ver el resultado. Y si quieres aplicar el color actual a esta etiqueta de gato, sí, puedes. Déjame mostrarte. Entonces Hemo select tiene etiqueta, gusto, entonces quiero seleccionar esta clase leer estado de ánimo Así que copio el nombre de la clase y el dobladillo tipo punto leer humor. Entonces dentro de la Caris se encuentra Hemo para usar una propiedad llamada fondo Y quiero pasar el color actual. Después de establecer este archivo, como puedes ver, nuestro color de fondo tipo ancla se vuelve morado porque por defecto, viene con color morado. Si comento esta línea y vuelvo a configurar este archivo, como pueden ver, aquí pueden notar nuestro color de texto es morado. Por eso decía color de fondo púrpura. Ahora, hay un problema con el color actual. Si trato de cambiar el color de la fuente, déjame mostrarte. Entonces voy a usar propiedad de color, color, y voy a aplicar rojo. Y luego voy a poner este archivo. Después de configurar este archivo, se puede ver el resultado. Ahora te das cuenta con el color de fuente, se ha cambiado el color de fondo. Ahora, tanto el color de fuente como el color de fondo se vuelven rojos. Por eso nuestra fuente no es visible en esa sección. ¿Pero qué? Si hago lo contrario, si dije color, color actual, y así quiero cambiar el rojo con el color actual. Y voy a cambiar el color de fondo con color rojo. Después establece el archivo. Como puedes septeto el archivo, ahora nuestro texto es visible Ahora puedes ver nuestro color de fuente es verde porque su elemento padre, color de fuente es verde y el color de fondo es rojo. Por lo que hay que recordar que no es una buena práctica usar el color actual con propiedad de fondo. Se puede usar solo con propiedad de color. De lo contrario, se puede utilizar con bordes, etcétera. Entonces esto es para este tutorial. 127. Tutorial de pseudo elemento 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. 128. ¡CSS! Tutorial importante de hacks: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial reel date CSS. Y en este tutorial, vamos a aprender sobre un hack, que se conoce como hack importante. Si quieres entender la hag importante entonces antes debes tener conocimiento de la etiqueta de prioridad CSS, y para entender la etiqueta de prioridad de CS, primero, necesitas saber cómo podemos implementar CSS en nuestra página TML Podemos usar tag Name para hacer selector CSS. Podemos usar pauptag, etiqueta de encabezado, etiqueta corporal, lo Entonces de esa manera, podemos crear el selector y estilizar el elemento. También podemos tomar el nombre de la clase y podemos darle estilo al elemento. Entonces podemos usar el nombre de ID, y también podemos apuntar al elemento. Y el último método es el estilo interior. Quiero decir que podemos usar atributo de estilo en nuestras etiquetas de estimación, y luego podemos darle estilo al elemento, y todo el método viene con etiqueta de prioridad diferente. CSS siempre proporcionan el método de estilo interior de primera prioridad. A continuación, proporciona ID de prioridad, luego nombre de clase y, por fin, proporciona nombre de etiqueta de prioridad. Supongamos que en un elemento de estimación, utilizamos todos los métodos de targeting. Como puede ver, aquí usan la misma propiedad, pero el valor es diferente En ese caso, CS va a dar prioridad al método de estilismo interior. Por eso va a dar color de fuente color naranja. Permítanme aclarar el concepto con más detalle. Como puedes ver en este ejemplo, tenemos una etiqueta de párrafo, y a ella le asignamos un nombre de clase primero, y aquí asignamos ID segundo. En este párrafo, esto es sólo un texto aleatorio. Esto es solo pruebas. En nuestra página CSS, si selecciono este párrafo usando su nombre de etiqueta, P y configuro el color rojo, entonces este párrafo se vuelve de color rojo. Pero si selecciono este mismo elemento usando primero su nombre de clase, entonces lo hago azul, en ese caso, este párrafo se vuelve de color azul. la misma manera, si usas el nombre de identificación y lo haces verde, entonces se vuelve de color verde. Pero si usas el método de estilo inline , atributo style, y luego lo coloreas tan, al mismo tiempo, va a hacer que el color del texto sea tan. Entonces CS va a dar prioridad al método de estilo en línea. Entonces así es como funciona la etiqueta prioritaria de CS. Pero ahora quiero romper esta etiqueta prioritaria. Como puedes ver, a la vez, aquí utilizamos diferentes métodos de selección para seleccionar este párrafo. Pero da prioridad al método de estilo en línea. Al mismo tiempo, utilizamos total cuatro método diferente, pero esta vez, quiero darle prioridad al color azul, este nombre de clase. Para eso, podemos usar esta braga. Podemos usar Importante Hag, signo de exclamación, entonces queremos escribir Si rompo la etiqueta de prioridad y hago que esta sea importante, en ese caso, va a aplicar el color azul a este texto. Ahora va a dar la primera prioridad a este método de selección. Esto no es un hack. Es una técnica que podemos hackear cualquier propiedad CSS. Entonces comencemos la práctica y veamos cómo podemos usarla prácticamente. Como pueden ver lado a lado, abro el editor de código de estudio de mi usuario y mi navegador usando la extensión Live Server, y ya creé un documento ML llamado index dot HTML. Entonces como puedes ver en nuestra etiqueta corporal, tenemos una etiqueta de encabezado uno, y en esta etiqueta, escribimos hola mundo. Y aquí se puede ver en esta etiqueta, asignamos nombre de clase. Primero, también asignamos un ID, segundo. Además, seleccionamos esta etiqueta H one en nuestra sección de estilo usando el nombre de la etiqueta H one. Y ahora voy a cambiar el color de la fuente. Entonces aquí voy a usar propiedad de color. Rayos de color, y voy a configurar este archivo. Después de establecer este archivo, se puede ver el resultado. Y ahora voy a seleccionar el elemento usando su nombre de clase. Entonces aquí, voy a escribir punto primero, ahí en los colores, voy a usar propiedad de color. Color, y esta vez, voy a usar de color azul. Azul. Si configuro este archivo, puedes ver el resultado. Ahora nuestro texto se convierte en color azul. Como puede ver, ambos selectores seleccionan el H un elemento Primero, para usar el nombre de la etiqueta, ahora usan el nombre de la clase, pero proporciona prioridad al nombre de la clase. A continuación, voy a usar ID. Entonces HemotyphTag, segundo. Segundo, es que los Carles, voy a usar propiedad de color. Color. Y esta vez, voy a usar el color verde. Verde. Si configuro este archivo, ahora se puede ver que esta vez le da prioridad al selector de ID. No importa qué, si cambio el er, así que voy a copiar esta sección. Lo siento, voy a cortar esta sección y pegarla antes del nombre de la clase y establecer este archivo. Además, devuelve color verde. Como te dije, esta vez da prioridad a nuestro selector de ID. Y ahora voy a usar el método de estilismo Inland. Entonces aquí, voy a usar style attribute style y voy a usar propiedad color, color. Y aquí, voy a usar el color naranja. Naranja. Y voy a sub este expediente. Después de sub este archivo, ahora se puede ver que da prioridad al método de estilismo Inland. Pero ahora, ¿cómo podemos usar el importante hack? Supongamos que quiero darle prioridad al color azul. Quiero decir el selector de clus. Para que sea importante, solo ella en el tipo espacio signo de exclusión importante. Si configuro este archivo, ahora puedes ver ahora esta vez va a ser importante el selector de ID. la misma manera, si quieres darle prioridad al color rojo, quiero decir el selector de elementos, para escribir la palabra clave importante arriba de la vil. Si configuro este archivo, puedes ver el resultado. Y recuerda, esto no es obligatorio que puedas usar este hack solo con la propiedad color. Puedes usar este importante hack con cualquier propiedad. Se puede utilizar con tamaño de fuente, relleno, margen, lo que sea. Entonces esto es para este tutorial. Espero que ahora te quede claro cómo podemos usar este hack. Hackeo importante. Así que gracias por ver este video. Estén atentos para el siguiente tutorial. 129. Tutorial de CSS3 @support: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender un nuevo selector, que es en la fecha soporte. Ahora la pregunta es, ¿qué hace básicamente? Básicamente, utilizamos este selector para la detección de funciones en el navegador. Quiero decir nueva propiedad CSS lo contrario valor soportado por navegador. Supongamos que tenemos una propiedad CSS llamada GED, display grid. Esta característica CSS es compatible con Chrome, Firefox, Sapai, ge, etcétera. Pero para saber qué navegador va a soportar esta propiedad y valor, necesitamos usar el selector de soporte. Usando eso, podemos escribir diferentes CSS para diferentes navegadores. Así que básicamente, lo usamos para CSS basado en condicionales. Por eso a veces lo llamamos regla condicional. Ahora veamos cómo podemos usarlo en nuestro CSS. Al principio, necesitas escribir Adiate support. Después dentro de la resis redonda, puedes poner tu condición. Supongamos que podemos verificar el estado de la rejilla de visualización. Entonces ahora la pregunta es ¿qué va a hacer? Siempre que un usuario abra la página web en su navegador, entonces este soporte va a verificar esta condición. ¿Ese navegador admite la propiedad de cuadrícula de visualización o no? Si soporta la condición, entonces va a ejecutar el CSS. Supongamos que escribimos Add support, y en nuestra condición pasamos display grid Si el navegador admite el valor de la cuadrícula, entonces podemos asignar la cuadrícula de visualización de ID principal. Pero si el navegador no es compatible con esta cuadrícula de propiedades, entonces podemos escribir diferentes CSS para este elemento. No sólo eso, también podemos establecer condiciones opuestas usando soporte, algo así. Agregar soporte, no disp grid. Es principal si el navegador no es soporte propiedad en desacuerdo, en ese caso, podemos asignar el bloque de visualización CSS No sólo eso, podemos usar el selector con múltiples condiciones. Déjame mostrarte eso. Como puedes ver con el selector de soporte, aquí solíamos dos estados, display flakes o display webkit flakes Este es el prefijo del navegador Chrome. Se trata de dos condiciones diferentes. Si una de las condiciones es verdadera, otra es falsa, entonces va a ejecutar el CSS. Y si tanto la condición es verdadera, también se va a ejecutar el CSS para verificar la condición múltiple, cómo usamos u operador, pero tenemos otro operador, que es operador. Entonces como se puede ver entre la condición múltiple que usamos y el operador, yo tanto la condición no es cierta, entonces no va a ejecutar el CSS. Pero si usamos Okword si una de las condiciones es verdadera, entonces va a ejecutar el CSS Entonces, si la cuadrícula de soporte del navegador y la cuadrícula en línea, entonces va a ejecutar este CSS. En este ejemplo, como puedes ver, solía las dos condiciones, pero puedes usar una condición múltiple a la vez. Solo para usar o palabra clave, lo contrario, y palabra clave entre ellos. Entonces comencemos lo práctico y veamos cómo podemos usar este selector, un soporte directo. Entonces como pueden ver, lado a lado, abro mi editor de código visual studio y mi navegador usando Lifesaver Extension, y ya creé un documento ML llamado index dot HTML Entonces al principio, voy a teclear Style tech. Estilo. Y dentro de esta etiqueta de estilo, voy a usar el selector de soporte. A la velocidad soportes flexibles. Entonces dentro de la ress redonda voy a establecer la condición. Voy a decir display, y voy a usar flix display flix. Después dentro del Cariss vamos a seleccionar nuestra etiqueta corporal Vamos a seleccionar la etiqueta corporal. Cuerpo son los calibracs. Voy a usar propiedad de fondo. Fondo, y quiero aplicar fondo color naranja. Naranja. Si esta condición es verdadera y este navegador admite la propiedad flex, entonces va a cambiar el color de fondo. Si configuro este archivo, como pueden ver, ahora, nuestro fondo de color de cuerpo es naranja. Ahora, déjame usar una propiedad, que no es compatible con el navegador Chrome Entonces por ahora, voy a quitar deshojuelas y ella para escribir caja de decoración de ladrillo, caja de decoración de ladrillo, y voy a usar propiedad de rebanada. Rebanada. Además, necesitamos eliminar este punto y coma No necesitamos este punto y coma en nuestra condición. Si configuro este archivo, como pueden ver, ahora no aplican el color de fondo naranja porque esta propiedad y valor no es compatible con el navegador Chrome. Para usarlo, necesitamos usar necesitamos usar el prefijo webkit. Por lo que esta propiedad no es compatible con Google. Pero si utilizo soportes no curados no aplico entonces el color naranja. Si los navegadores no soportan esta propiedad, entonces va a aplicar. Entonces después de establecer este archivo, se puede ver el resultado. Ahora puedes verlo aplicar color de fondo naranja al cuerpo. Ahora, usemos condición múltiple. Para eso, voy a usar operador. Entonces por ahora, voy a quitar esta no curada y tipo hemo O en el brress redondo voy a escribir display flex. Voy a quitarle este colon. Voy a establecer este archivo. Después de configurar este archivo, se puede ver todavía el color de fondo devolver naranja porque esta vez una de las condiciones es verdadera. Por eso devuelve naranja. Si tanto la condición se vuelve falla, entonces no va a aplicar el color de fondo. Déjame mostrarte. Entonces para que esta condición falle, voy a aplicar la misma propiedad. Copo esta propiedad y sustituyo las faltas por eso. Entonces voy a cambiar el valor de esta propiedad. Ahora voy a aplicar valor de clon. Clonar. Si configuro este archivo, como pueden ver, ahora ambas condiciones fallan, por eso no aplicamos el color de fondo naranja a este cuerpo. Entonces así es como trabaja el operador. Ahora, déjeme mostrarle a usted y al operador. Esta vez, voy a sustituir A y y voy a sub este archivo. Después de sub este archivo, aún así, se puede ver que no aplican color de fondo naranja. Y ahora voy a hacer que tanto la condición sea cierta. Si ambas condiciones fallan, entonces no va a aplicar el color de fondo. Pero si hago que tanto la condición cierta, Sootide muestra escamas También, voy a cambiar esta condición, que es la posición absoluta. Y tenemos que eliminar este punto y coma. No necesitamos poner este punto y coma en nuestra condición. Si configuro este archivo, ahora puedes ver que cambió el color de fondo porque si usamos el operador, entonces necesitas asegurarte si tanto la condición es verdadera, luego vas a aplicar el color de fondo. Pero si alguna de las condiciones falla, entonces no va a aplicar este color de fondo. Entonces si hago que una de las condiciones falle, la decoración de la caja se rompe rebanada y comprima este archivo. Como puedes ver, nuevamente, no aplica el CSS. Pero si uso u operador aquí y luego comprimo este archivo, ahora va a aplicar el color naranja porque ahora una de las condiciones es verdadera. Entonces así es como funcionan los apoyos. Espero que ahora te quede claro cómo podemos usarlo. 130. Tutorial de pseudo clase de marcador de posición de CSS: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo CSS relacionado con Tutorial. Y en este tutorial, vamos a aprender una nueva clase posto, que se muestra eslder Sé que ya estás familiarizado con el marcador de posición. Usamos marcador de posición en nuestras etiquetas de entrada. Solo queremos usar este marcador de posición de atributo, entonces podemos escribir cualquier texto Y este texto funcionó como etiqueta. Y cada vez que intentamos escribir algo en este campo de entrada, se oculta este texto de etiqueta. Y si quieres darle estilo al marcador de posición relacionado, entonces CSS introduce una nueva clase posto, que se muestra como marcador Y es trabajo solo con Total de dos etiquetas, etiqueta de entrada y etiqueta de área de texto. Entonces comencemos la práctica y veamos cómo podemos usarla. Como pueden ver, lado a lado, abro mi editor de código visual studio, y mi navegador usando la extensión Live Server, y ya creo un documento TML llamado index dot TML Como puedes ver en nuestra etiqueta corporal, tenemos una etiqueta from, y en su lugar esta de etiqueta, tenemos un total de cuatro campos de entrada. Tenemos dos campos de entrada de texto, un campo de entrada de número y un campo de entrada de correo electrónico. Primero, necesitamos proporcionar el nombre, luego proporcionar la dirección, luego necesitamos proporcionar el número, y por fin, tenemos que proporcionar el correo electrónico. Ya estilizo este campo de entrada de acuerdo a mis necesidades. Y cada vez que intento escribir algo en este campo de entrada, supongamos que agregue uno como puede ver, oculta el texto de la etiqueta. Y ahora quiero mostrar borde a este campo de entrada hasta que escriba texto en este campo de entrada. Quiero decir hasta que quites el texto de la etiqueta. Para eso, necesitamos usar marcador de posición mostrado poseido selector de vidrio Entonces aquí, voy a escribir input. Entonces voy a usar gafas poseido. Y aquí voy a escribir marcador de posición mostrado. Entonces dije la clase, aquí, voy a asignar frontera. Borde, quiero borde sólido de píxeles C. Con eso, nuestro color de borde es rojo. Después de establecer este archivo, como puedes ver, aplica color de borde rojo en nuestros campos de entrada. Y cada vez que intento escribir algo en este campo de entrada, quitaba el color del borde. Se quitó el borde. Déjame mostrarte. Supongamos que si escribo hola, como pueden ver, se quitó el color del borde rojo. la misma manera, si escribo en la segunda palabra campo también puedes notar que se quitó el color rojo del borde. Si nuestro marcador de posición está activo, sólo ahí podremos aplicar estas propiedades porque aquí usamos esta clase Posido, se muestra marcador Y si elimino el contenido de este campo de entrada, entonces de nuevo, se aplica el marcador de posición que se muestra propiedades. Así que ese es el uso principal del marcador de posición mostrado clase Posido Y recuerde, el marcador de posición no funciona en todos los campos de entrada Si duplico esta sección y cambio el tipo de entrada tipo de entrada fecha. Ellos establecen este archivo, y a continuación, voy a cambiar el texto marcador de posición fecha completa Y luego establecer este archivo después de establecer este archivo, aquí se puede ver el campo de fecha. Pero puedes notar que no aplica el marcador de posición D propiedades mostradas porque este selector de poseudoclas no funciona en fecha, hora, mes, semana, etcétera, y debes Y si quieres apuntar a algún campo de entrada en particular, sí, puedes. Supongamos que desea apuntar solo toma el campo de entrada de tipo. Para eso, aquí necesitas usar sis cuadrada. Entonces estableces la resis cuadrada aquí necesitas para proporcionar tipo. Escriba igual a dentro de los códigos dobles, de lo contrario, códigos individuales, es necesario proporcionar el tipo de campo de entrada, que es texto. Si configuro este archivo, aquí puedes ver el resultado. Esta vez, este selector de positoglass solo funciona en campos de entrada de texto Entonces así es como se acabó. Espero que ahora te quede claro. Gracias por ver este video. Estén atentos para el siguiente tutorial. 131. Tutorial de cadena de estilo de lista de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. En nuestros tutoriales anteriores, aprenderemos sobre el estilo, y ya estamos familiarizados con es propiedad de tipo mosaico. Y esta propiedad introduce un nuevo valor, string. Ahora, tratemos de entender qué es eso. Si hablamos de lista desordenada, como te dije, tenemos un valor total de tres, disco, cuadrado y círculo, y así se ve así Si usamos el valor de excavaciones, entonces va a devolver un punto sólido Y si usamos cuadrado, entonces va a devolver un cuadrado sólido. Y si usas círculo, entonces va a devolver un círculo sin llenar Ahora, sin este valor de tres, podemos pasar el valor de cadena. Como puedes ver en este ejemplo, aquí usamos una forma. No es una imagen. Es un símbolo ML. la misma manera, podemos usar diferentes símbolos, algo así. Además, podemos pasar cadena como un tipo de estilo. En nuestro caso, Guau. Ahora, comencemos la práctica y veamos cómo podemos usarla. 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 estable, llamado index dot stem. En nuestra etiqueta corporal, aquí puedes ver la lista nodal, y tenemos un total de cinco ítems en esta lista Y ahora quiero quedarme esta lista nodal. Para eso, voy a seleccionar la etiqueta UL. UL dentro de la Cariress voy a usar la propiedad es lazo de azulejo Tipo de estilo, y aquí, voy a usar valor de cadena. Para usar este valor de cadena, solo podemos pasar este valor de cadena dentro de la cita. Entonces dentro de las comillas dobles, voy a pasar demo. Después de configurar este archivo, se puede ver en mi navegador, reemplaza todas las viñetas con esta demostración de cadena. Entonces así es como podemos pasar cualquier cadena aquí. Supongamos que si proporciono espacio, guión, y el conjunto de este archivo, ahora se ve más amargo Además, necesitamos cambiar la posición. Por defecto, es opuesto. Entonces aquí voy a usar una propiedad es posición de estilo, estilo, posición dentro. Si guardo este archivo, se puede ver el resultado. Ahora, déjame mostrarte cómo podemos usar los símbolos aquí. Para usar los símbolos de tabla, necesitamos buscarlo Google. Entonces solo busca símbolos STL. Mucho sitio web proporciona un símbolo SML como tres Escuela, Toptal, etcétera. Entonces abro uno de este sitio web. Primero, voy a abrir Top tell. Entonces, como puedes ver, hay múltiples símbolos SML. Estos símbolos no están disponibles en nuestro teclado. Si te desplazas hacia abajo en esta página, puedes encontrar muchos símbolos. Y ahora voy a usar uno de los símbolos. Supongamos que voy a usar quiero usar este símbolo de nube. Para utilizar este símbolo, solo tiene que seleccionar el símbolo y luego presionar Control C para copiar este símbolo. Y ahora tenemos que volver a nuestro documento. Y aquí, voy a rasgar esta demo con este símbolo, Control V, esta Nube, y voy a configurar este archivo. Después de configurar este archivo, si abro mi navegador, aquí puedes ver el resultado. Ahora, tipo de lista reemplazar con el símbolo. Desde aquí, puedes usar cualquier símbolo. Supongamos que si quieres usar este símbolo de teléfono, solo necesitas copiar este símbolo y debes pegarlo aquí. Voy a reemplazar Cloud con este símbolo y luego solo proporcionar un espacio y establecer este archivo. Después de configurar este archivo, si te muestro mi navegador, ahora puedes ver el resint Sustituye a Cloud con este símbolo de teléfono. Desde este sitio web, puedes encontrar todos los símbolos tipo up. Supongamos que si desea utilizar el símbolo de moneda, entonces simplemente haga clic para la moneda. Y si quieres usar símbolos MT, luego haz clic para ver el número de símbolos matemáticos, lo que quieras usar. la misma manera, otros sitios web proporcionan el mismo tipo de símbolos. Entonces así es como podemos usarlo. Aquí podemos pasar picadura también, podemos pasar cualquier símbolo. Entonces espero que ahora te quede claro cómo podemos usar esta nueva transmisión de Video. Así que gracias por ver este video. Estén atentos para el siguiente tutorial. 132. Tutorial de comportamiento de desplazamiento de CSS: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vas a aprender un nuevo CSS relacionado con propiedades, que es el comportamiento de desplazamiento. Al principio, déjame mostrarte un ejemplo, ¿qué podemos hacer usando el comportamiento de desplazamiento? Como pueden ver, aquí abro una página web, y teníamos netbar y en nuestra netbar tenemos un polo tres enlace, uno, dos, y Y aquí, en este ejemplo, utilizo método de vinculación interna. Entonces, si hago clic en uno, entonces va a redirigir a la Sección uno. Si hago clic en tres, entonces me va a redirigir Sección tres. Pero si te das cuenta, puedes ver si hago clic en alguno de los ítems, nuestra palabra de desplazamiento se desplaza a la posición. Si hago clic en la Sección dos, pueden notar que nuestra palabra de desplazamiento va hacia abajo. Podemos crear esta transición scrollbt usando la propiedad de comportamiento de desplazamiento Pero, ¿qué? Si no usamos la propiedad de transición de palabras de desplazamiento. Si comento esta propiedad, desplácese por el comportamiento de la palabra y vuelva a mi página web y vuelva a mi navegador. Si hago clic en la Sección uno, como pueden ver, ahora, no se puede sentir ninguna transición. Al instante salta a esta sección. Si hago clic en la Sección tres, ahora pueden notar ahora nuestra barra de desplazamiento no se mueven No se puede sentir ninguna transición. Por eso es importante el comportamiento del desplazador. Entonces estudiemos práctico y tratemos de entenderlo. Como sabes, en SDML tenemos la etiqueta Anca, y usando la etiqueta Anca, podemos crear tres tipos de enlaces enlace externo, enlace interno, y otro es enlace de correo electrónico Sin esto, hay muchos enlaces que podemos crear usando la etiqueta nCAT, como enlace de descarga, enlace telefónico, así que no voy a hablar de eso Nuestro tema principal es el comportamiento de desplazamiento. Si quieres usar el comportamiento de desplazamiento, necesitas usar tinta de página interna, y podemos usar el enlace de página interna en nuestro documento. De lo contrario, podemos usarlo en un elemento db. Aquí podemos usar desbordamiento oculto, de lo contrario, podemos usar la propiedad scroll para crear esta barra de desplazamiento. Podemos usar el comportamiento de desplazamiento cuando tenemos datos de ana para desplazarnos en nuestra página. Si quieres usar esta propiedad en tu documento, en ese caso, necesitas usarla dentro de la etiqueta TML Y si quieres usarlo en una etiqueta profunda, entonces necesitas seleccionar esta etiqueta dip, y puedes asignar propiedad de comportamiento de desplazamiento. Y en esta propiedad, podemos pasar valor total dos, Auto y suave Auto es el valor predeterminado de esta propiedad. No va a cambiar nada. Pero si usas un valor suave, entonces va a cambiar tu comportamiento de desplazamiento 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 visual studio y mi navegador usando la extensión del servidor Lip, y ya creo un documento ETML llamado index dot html Así que aquí se puede ver un diseño básico. Si te muestro mi estructura de estimación, aquí puedes ver, tenemos una barra de neb Esta es nuestra zona n bar, y tenemos que empollar tres neb item link Por ahora, no proporcionamos ningún enlace en nuestra etiqueta de anclaje. Entonces tenemos secciones. Esta es la Sección Uno. Esta es la Sección Dos. Y esta sección hecha con etiqueta de sección, y en esta etiqueta de sección, tenemos etiqueta H dos, encabezando dos. Y como puedes ver en cada sección, asignamos una TI. Esto es para la Sección uno, ID uno, ID dos, ID tres. Ahora, como puedes ver, tenemos suficiente área de desplazamiento en nuestra página. Ahora voy a usar enlaces internos. Si me desplazo un poco hacia abajo en esta página, como pueden ver, nuestra barra Nb se pega al espacio. Aquí puedes ver aquí usamos N barra de posición, top zero. Por eso se apega a su propio lugar. Ahora voy a usar enlaces internos de páginas. Al principio, voy a vincular la Sección uno con la etiqueta ancha número uno. Para vincular esto, voy a usar su nombre de identificación uno. Entonces para vincular este ID, HTG uno. Este es el método interno de entintado de página. Entonces voy a vincular la Sección dos, hashtag, dos. Por fin, voy a enlazar tiene etiqueta tres. Y voy a poner este archivo. Después de establecer este archivo, si me tlck en el Enlace número dos, como pueden ver, redireccionará a la Sección dos la misma manera, si hago clic en el Enlace número tres, redirecciona a la Sección tres. Pero el problema es, si notas este comportamiento de desplazamiento, si hago clic en el número uno, instantáneamente es saltar a sección número uno, pero no lo quiero. Quiero una transición suave en ella. Entonces para resolver el problema, podemos usar la propiedad de comportamiento de desplazamiento. Entonces aquí, voy a crear un selector en nuestra sección de estilo. Antes de la etiqueta body, voy a seleccionar la etiqueta TML, todo el SML Después dentro de la cali resis, voy a usar la propiedad, comportamiento scroll. Y voy a usar el valor suave. Después de establecer este archivo, y si hago clic en el número tres, ahora se puede ver un efecto de suavizado. la misma manera, si hago clic en el número uno, puedes notar que redirecciona al número uno, pero se desplaza a la página. Entonces esto es lo que podemos crear usando el efecto scroll. Si quieres asignarlo en tu página de rol, en ese caso, debes seleccionar la etiqueta TML De lo contrario, puedes usarlo en un elemento profundo. Entonces esto es para este tutorial. Gracias por ver este video Estado incluso para el siguiente tutorial. 133. Tutorial de Pseudo Elemento de Button: Hola, chicos, es bueno volver a verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vas a aprender un nuevo elemento posto, que se conoce como cinco botones selectores Aquí puedes ver la lista de todos los elementos posto, y ya cubrimos este elemento posito en nuestros tutoriales anteriores En esta ventaja, tenía un nuevo elemento positivo, que es el botón selector de cinco. Ahora intentemos entender qué podemos hacer con el botón selector de archivos. En HTML, tenemos una etiqueta conocida como in y esta etiqueta de entrada viene con diferentes tipos de vados como texto, correo electrónico, submit, etcétera De la misma manera, tiene un valor. Cuyo tipo es archivo tipo de entrada archivo. Después de usar el tipo de archivo en nuestra etiqueta de entrada, podemos ver este tipo de botón en nuestro navegador. Elija Archivo. Después de hacer clic en este botón, podemos elegir cualquier tipo de archivo. Sé que ya estás familiarizado con eso. Pero si te das cuenta puedes ver, siempre viene con color gris. Por otro lado, podemos darle estilo a los botones, podemos darle estilo a cualquier otro elemento. Pero hasta ahora, no podemos cambiar el color de este tinte de archivo. No podemos asignar ningún color a este botón. Y si queremos hacerlo, entonces necesitamos tomar la pantalla Hellbog Java, y es un proceso muy len Quiero cambiar el color de este botón de entrada, algo así. Y esto sólo es posible a través del botón selector de archivos Posidoglass Empecemos la práctica y veamos cómo podemos usarla. Como pueden ver lado a lado, abro mi editor de código de estudio de resultados y mi navegador usando extensión de servidor en vivo, y ya creo un documento tML, llamado index dot HTML Al principio, voy a crear la estructura TML. Entonces voy a usar la etiqueta frontal. Y dentro de la etiqueta frontal, primero, voy a crear una etiqueta, etiqueta, y aquí voy a escribir un texto. Para este ejemplo, no necesito estos cuatro atributos. Voy a quitarlo, y dentro de esta etiqueta, voy a escribir subir cinco. Después de eso, voy a usar la etiqueta de entrada. Entrada. Entrada, Ti Voy a establecer TIF. Además, voy a asignar un ID a esta etiqueta de entrada. ID igual a upluot. Entonces voy a configurar este archivo. Después de configurar este archivo, puedes ver el resultado en mi navegador. Así que hice sobre parte estimable. Ahora le damos estilo a la etiqueta de entrada, esta. Entonces dentro de la etiqueta de la cabeza, voy a escribir etiqueta de estilo. Estilo. Podemos dirigirlo usando nuestro nombre de identificación. Además, podemos apuntarlo usando su tipo. Expediente. Entonces voy a seleccionarlo usando su corbata. Entonces aquí, voy a escribir. Primero, voy a escribir la entrada del nombre de la etiqueta. Después dentro del cuadrado ss, voy a proporcionar el empate, que tipo de entrada voy a seleccionar. Entonces aquí, escriba igual a archivo. Y ahora quiero cambiar el color de fondo de este archivo de tipo entrada. Pero no puedo hacerlo directamente. Necesitamos usar el selector de archivos PosidoGlass al principio, necesitamos atarlo a semicolor Entonces tenemos que pasar el nombre del selector posito Archivo, selector de guión, botón de guión Así es como podemos usar este selector. Entonces al principio, voy a cambiar el color de fondo. Entonces escribe color de fondo, y lo voy a poner en rojo. Con eso, voy a cambiar el color del borde. Bordeada. Quiero dos píxeles borde sólido, y el color del borde es verde. Ahora vamos a configurar el archivo y ver si funciona correctamente o no. Después de configurar este archivo, como puede ver funcionó correctamente. Ahora agrega un poco de acolchado de almohadilla. Diez Bigel de cada una de las direcciones. Además, voy a cambiar el color del texto. Color. ¿Por qué? Apres en este archivo, se puede ver el resultado Ahora podrías tener tiin. ¿Qué? Si mando a distancia este selector, si mando a distancia el Postoglass, déjame mostrarte Entonces si elimino el PositoGlass y solo selecciono el archivo de tipo de entrada y esto en este archivo, puedes ver el resultado No ha funcionado correctamente. Ahora agrega color de diagrama a toda la sección. Por eso necesitamos usar este Positroselector, botón selector de archivos Si lo vuelvo a guardar, se puede ver el resultado. Ahora, si hago clic en este botón, podemos elegir cualquier tipo de archivo. Supongamos que selecciono esta imagen de aterrizaje. Se puede ver el nombre de esta imagen, landing dot JPG. No sólo eso, también puedes usar Hobart PosidoClass Entonces voy a duplicar esta sección, y esta vez, voy a usar el selector Hobart. Colón Hobart Esta vez, sólo voy a cambiar el color de fondo. Voy a usar la versión más oscura de este color rojo, algo así. Y voy a poner este archivo. Después de configurar este archivo, si calco mis tarjetas hacia abajo en este botón, se puede ver el resultado Es cambiar su color de fondo. Entonces esto es todo para este tutorial. Espero que ahora te quede claro, cómo podemos darle estilo a nuestros botones de selección de archivos. Así que gracias por ver este video, mantente atento para el siguiente tutorial. 134. Tutorial de filtro de fondo de CSS: Hola, chicos, me alegro de verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. Y en este tutorial, vamos a aprender un filtro conocido como filtro de fondo. Supongamos que sten imagen de fondo en nuestra etiqueta corporal TML. De lo contrario, podemos suponer que sten imagen de fondo a una etiqueta profunda. Ahora, en este elemento profundo, tenemos otro elemento profundo. Además, esta profundidad viene con color de fondo, borde, etcétera Ahora, psicamente no quiero darle ningún color de fondo a esta profunda leen Algo así. Es un transparente. De lo contrario, puedo encajarlo con baja opacidad. Pero ahora quiero asignar un filtro al interior dip ignit y para hacerlo posible, CSS introdujo el filtro, CSS introdujo el filtro, que se conoce como filtro Brop Usando este filtro, podemos asignar cualquier efecto a la sección interior del elemento profundo. Pero no agregamos ningún efecto a nuestra imagen de fondo de elemento profundo principal. No te preocupes por ello, vamos a hacerlo práctico. Además, esta propiedad filtrada de telón viene con un peso predefinido. Déjame mostrarte. Entonces estos son do que podemos usar con bagrap filtrado. Estos son todos los efectos, desenfoque, brillo, contraste, sombra paralela, escala de grises, rotación de tonalidad, invertir, opacidad, spa, saturar, y ninguno Ahora comencemos la práctica y apliquemos todo el filtro uno por uno. Entonces como pueden ver, lado a lado, abro mi editor de código de estudio de resultados y mi navegador usando la extensión Live Server, y ya creé un documento de estimación llamado tabla de puntos índice. Entonces como puedes ver en nuestro documento de estimación, está en la etiqueta del cuerpo, tenemos un contenedor Da De ID, y en nuestra sección de estilo, estilizo este profundo Em. Aquí estoy con 600 pixel, altura, 800 pixel. También, dijiste frontera, 500 píxeles, borde sólido. Después agregamos imagen de fondo a este continente, fondo URL nature dot JPG. Ahora dentro de este elemento continuo profundo, voy a crear otra deuda, algún tipo deep y voy a asignar un ID a este desarrollo, ID igual a Ian. Entonces voy a darle estilo a este desarrollo en nuestra sección de estilo. Al principio, voy a seleccionar esta debilmin usando su nombre ID, inner Después los cálices, primero, voy a poner hierba. Weed, aquí voy a decir 400 píxeles. Siguiente propiedad, voy a usar height, height, voy a establecer 250 pixel. También, voy a decir que es color de fondo. Fondo, y quiero fondo de color blanco. Entonces voy a usar Hix HH. Siguiente propiedad, voy a usar radio de borde, radio borde, y voy a establecer el radio de borde de cinco píxeles. Además, necesitamos asignar borde con borde bordeado con, quiero borde sólido de dos píxeles, sólido Y quiero decir borde color blanco. Hashtag KSH. Y voy a poner este archivo. Después de establecer este archivo, esto es lo que crea. Ahora, quiero quitar el color de fondo de esta placa inundada Entonces voy a comentar esta línea, y voy a establecer este archivo. Después de establecer este archivo. Uy. Él necesitamos usar solo propiedad fronteriza, no con propiedad. Frontera, solo frontera. Si configuro este archivo, esto es lo que crea. Ahora puedes ver que tenemos un elemento profundo transparente con borde de sólido a píxel blanco. Y ahora necesitamos mover este elemento profundo interior vertical y horizontalmente al centro. Y para alinearlo, voy a usar un flex de display de propiedades. Entonces en nuestro contenedor padre, voy a escribir voy a atar el nombre de la propiedad display flake. Y alinearlo alinear elementos centro, centro y justificar contener también centro. Después de establecer este archivo, se puede ver el resultado. Aumentemos el borde t interior nosotros para que sea más thar Así que para pasar, cinco píxeles. Hasta configurar este archivo, ahora es más visible. Y ahora voy a aplicar filtro de telón de fondo en nuestro elemento profundo interior. Así podemos ver el efecto de filtro de imagen a través de este elemento profundo. Ahora es el momento de usar el filtro de fondo de propiedad, tipo de suma, telón de fondo, filtro de fondo Y primero, y el primer video, voy a usar borroso Es el favorito de pin ve. Aquí me dicen desenfoque a píxel. Después de establecer este archivo, ahora se puede ver el efecto de sangre a través del elemento profundo interior. Ahora se puede ver el efecto de la sangre a través del elemento dip interno. Y si quieres aumentar la versión de sangre, solo aumenta el valor. Si lo hago desenfoque de seis píxeles y luego configuro este archivo, ahora se nota que hace que esta porción sea más borrosa. No solo eso a la vez, puedes agregar, puedes agregar color de fondo a este elemento profundo interior. Déjame mostrarte. Supongamos que voy a usar esta propiedad color de fondo, y aquí voy a usar el valor RGV Vamos a utilizar el valor Alpha para la transparencia. Entonces escribe RG, BA, dentro de la ress redonda voy a escribir 255 color blanco, 255 y 255 Y para Alpha Val, voy a tomar 0.2. Si configuro este archivo, puedes ver el resultado. Y si aumento el valor de la transparencia, si lo hago 0.5 semitransparente y luego pongo el sple ahora se puede ver más blancura en este efecto de sangre Y recuerda, no establecemos ningún efecto en la imagen de fondo. Aquí utilizamos efecto en nuestra sección interior de elementos profundos. Y si utilizo algún contenido en este elemento inatp, no va a afectar el contenido. Déjame mostrarte. Entonces dentro de este elemento innatp, voy a agregar un encabezado a tat 'motie hola. ¿Por qué? Y voy a decir alineación centro de alineación de texto, centro de alineación de texto. Y voy a poner este archivo. Después de establecer este archivo, verá el resultado. Ahora se puede ver que no va a cuantificar efectivamente lo que está dentro del elimato inactivo Ahora, hablemos del próximo wow. Entonces al principio, voy a comentar esta propiedad de color de fondo. Y luego voy a cavar en esta línea y comentar la línea anterior, y voy a reemplazar el desenfoque con brillo. Dentro de las carreras largas, necesitará pasar valor en porcentaje. Supongamos que si uso 60% y esto en este archivo, ahora se puede ver que reduce el brillo de esta sección interior. Y si lo hago 10% y esto en este archivo, ahora se puede notar más caída de brillo en esta porción. Y si paso el 100%, este es el valor diferido Ahora es exacto. Pero si quiero aumentar el brillo, podemos pasar más del 100% de valor. Supongamos que si paso uno 50% y esto arriba este archivo, ahora se puede ver que aumenta el brillo de esta sección interior. Si lo hago 200, ahora es más claro para ti. Entonces así es como podemos usar este alimentador de brillo. Ahora vamos a saltar al siguiente filtro, que es el contraste. Entonces voy a br esta línea y comentar nuestra línea anterior y rasgar este brillo con contraste. Entonces dijiste que el más redondeado dice, voy a pasar el 40% Entonces si me satisface, se puede ver el resultado. En esto también hay que pasar por ciento d unidad. Ahora se puede ver el efecto de cocimiento en esta porción. Y si lo hago al 100%, como como brillo, se puede ver la imagen exacta. Ahora bien, si quiero aumentar el contraste, supongamos algo un 50% y el conjunto de este archivo, se puede ver el resultado. Básicamente, el contraste va a afectar a los colores. Puede reducir la cantidad de color. También puede aumentar la cantidad de color. Si lo hago 200%, 200% y el conjunto de este archivo, se puede ver más contraste en la Ahora puedes notar en esa porción, las sombras son mucho más visibles. Además, se resalta el color verde. Ahora, hablemos del siguiente filtro, que es u rotar. Voy a duplicar esta sección y comentar la línea anterior. Y voy a atar de nuevo al filtro H rotar. Entonces puse la ronda pra está aquí unidad pasar aquí unidad pasar unidad grado unidad. Entonces aquí, voy a aprobar 120 dg grado. Y si configuro este archivo, se puede ver el resultado. Si trabajas en Photoshop, entonces esta opción te resulta bastante familiar. Si cambias el valor del grado, va a cambiar el color de la imagen. Supongamos que si lo hago 150 grados y el conjunto de este archivo, se puede ver diferente color en duerme. Y si lo hago solo 90 grados, se puede ver resultado diferente. Y podemos incrementar el valor hasta 360 grados. Si paso 360 grados y el conjunto de este archivo, esto es lo que w. ahora se ve exactamente igual. Y si lo hago un grado un grado y vamos a establecer el archivo, ahora se puede ver que no hay diferente. Pero si aumento un poco el valor, algo 40 grados y esto en este archivo, ahora puedes notar los cambios. Ahora, hablemos del filtro. Entonces voy a duplicar esta sección y comentar la anterior. Y esta vez, voy a usar invertir Vale tie invert. Este valor te proporciona exactamente como efecto negativo limpio. Entonces aquí, se necesita usar por ciento esta unidad. Entonces si lo hago 60% y luego configuro este archivo, esto es lo que es. Ahora se veía como flam negativo. Y si lo hago al 100% y luego configuro este archivo, ahora está completamente parecido a la llama negativa. Ahora, hablemos del siguiente filtro que es SIPEA Así que para duplicar esta línea y comentar de línea anterior y reemplazar invertir con SIPEA Y también toma por ciento esta unidad. Entonces por ahora, voy a pasar 50%, y voy a poner este archivo. Después de configurar este archivo, se puede ver el resultado. Básicamente, puede proporcionarte un poco de efecto vintage. Si lo hago al 100% y configuro este archivo, se puede ver el resultado. Algunas películas y videos populares utilizan este filtro. Ahora hablemos del siguiente filtro, que es saturar. Entonces duplico esta línea y comento la anterior y sustituyo la RCP por saturar Saturar al 100%. Si configuro este lado, se puede ver la imagen por defecto. Si se reduce el valor y se obtiene el 10%, se va a quitar el color. Ahora va a parecer blanco y negro, algo así. Y si quieres hacerlo completo en blanco y negro, solo pasa una persona, de lo contrario 0%. Va a hacer que toda la imagen sea en blanco y negro. Puedes experimentar con él para obtener diferentes resultados. No sólo eso, se puede utilizar alimentador múltiple a la vez, se le muestra. Entonces voy a duplicar esta línea y comentar esa anterior. Esta vez, con eso, quiero usar invertir. Entonces primero, voy a usar valor de desenfoque, desenfoque y voy a usar dos pixel die. Y luego, entonces voy a usar invertir B. Invertir. Invertir valor, voy a usar el 100%. Si configuro este archivo, puedes ver el resultado. Ahora puedes notar con el dire también puedes ver el filtro invertido Así que puedes usar múltiples filtros a la vez tanto como quieras. Ahora, para que este efecto sea más impactante, voy a usar el efecto Hover Entonces al principio, voy a seleccionar la etiqueta dip interna, tiene tag, inner. Entonces Colón, voy a usar Positoselector Hober luego insertar la Caira dice, voy a usar este Copia esta sección y voy a pegarla aquí. Y también, comento esta opción, y voy a configurar este archivo. Entonces, si yo sobre mi cursor en esta sección, se puede ver el efecto. Además, agreguemos algo de transición para hacerlo más animado. Entonces aquí, voy a usar la propiedad llamada transición. Transición. Y quiero agregar efecto de transición particular filtro de fondo. Así que estoy atado atrás, deja caer el filtro. Y para el tiempo de transición, voy a usar 0.3 segundos. Y voy a poner este archivo. Y si sobre mi cursor sobre esta imagen, se puede ver el resultado. Y si aumento el tiempo de transición, Sabin y pongo este archivo y sobre mi cursor sobre este elemento, se puede ver el efecto Ahora puedes ver el hermoso efecto de transición. Entonces esto es todo para este tutorial. Espero que ahora te quede claro cómo podemos usar el filtro de telón de fondo. Así que gracias por ver este video, Stuned para el siguiente tutorial 135. CSS3 es() Pseudo clase mejorado: 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. 136. Tutorial de orientación de texto CSS: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con otros tutoriales relacionados con CSS. Y en este tutorial, vamos a aprender la orientación del texto CSS. La orientación del texto de la llamada a propiedad depende de otra propiedad, y ya cubrimos esta propiedad en nuestro tutorial anterior, que es el modo de escritura. Hasta que use la propiedad de modo de escritura, no puede usar, no puede usar la propiedad de orientación de texto. Supongamos que tenemos un elemento profundo y en cambio este elemento profundo, tenemos un texto. Ahora quiero rotar este elemento a 90 grados, algo así. En la propiedad de modo escritura, tenemos que t dos valores, RL vertical y Ea vertical. Si usamos esto para valorar, entonces podemos rotar cualquier texto. Usando la propiedad de modo de escritura, podemos rotar este texto así, pero no quiero este tipo de texto. Quiero este resultado. En este ejemplo, como puedes ver, escribimos el texto vertical. Y si quieres este tipo de texto hábilo para eso, CSS introduce orientación de texto Además, esta propiedad viene con algún valor predefinido. A ver. Es covetotal cuatro valores, mixto vertical, lateral, lateral derecho, y el mixto es el valor predeterminado Entonces comencemos la práctica y veamos cómo podemos usarla. Por último, 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é un documento est llamado index dot TML En la etiqueta corporal, tenemos un ding llamado sabor. Y también dentro de esta etiqueta corporal, etiqueta corporal, tenemos encabezado y un párrafo. Entonces estilo esta etiqueta dip usando su sabor. Primero, asignamos con 550 píxeles. Después asignamos un borde, un borde de color negro sólido. También decimos por. Fuente aérea de 70 píxeles, y ahí está relleno de diez píxeles. Ahora voy a rotar toda esta sección profunda 90 grados. Para eso, voy a usar una propiedad llamada escritura mover aquí voy a usar una vari llamada RL vertical, esta, RL significa derecha a izquierda Ahora bien, si configuro este archivo, como pueden ver, rotará nuestro texto. Si cambia la orientación, entonces simplemente intercambiar el valor AR dos RL, RL dos AI. Si paso R y el satisfecho, se puede ver el resultado. Ahora la orientación comienza de izquierda a derecha. Pero para este ejemplo, me gustaría ir con RL. Y ahora voy a usar otra propiedad llamada texto, orientación de texto. Al principio, voy a usar este valor vertical. Después de satisfecho, se puede ver el resultado. Ahora puedes ver nuestro texto convertido en encabezado vertigal, párrafo, o texto escribir en vertigal Si utilizo otro video llamado mixto y este este archivo, ahora se puede ver que está de vuelta a la predeterminada wont Si no quieres ningún cambio, entonces la orientación del texto tiene onda mixta. La mayoría de las veces usamos este efecto donde necesitamos escribir vertigalmente De lo contrario, si tienes sitio web donde necesitas poner reparado en otro modo cualquier idioma chino, entonces necesitas estos efectos Chino de lo contrario mandarín siempre escriba de arriba a abajo. Es por eso que necesitamos vertical, vertical, y los otros dos restantes valor, lado y de lado derecho no es compatible con ningún navegador No es compatible con Mozilla, no es compatible con Google, Opera, ningún navegador. Esto es para este tutorial. Espero fuerte sea claro para ti. ¿Cómo se puede usar la orientación del texto? 137. Tutorial de pseudocase de CSS: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vamos a aprender una nueva clase de posero, que es enfocar con ella Ahora, déjame mostrarte cómo podemos usar esta nueva clase. Como puedes ver en este ejemplo, tenemos un elemento deep, y dentro de este elemento deep, tenemos que t cuatro campos, name, edge, Zender y un botón Y ahora quiero cambiar el color de fondo de este elemento profundo cuando me concentro en cualquiera de los campos de entrada. Si me enfoco en el nombre, lo contrario, Zener o un botón, va a cambiar el color de fondo de este elemento profundo. Algo así. Básicamente, enfocamos el elemento hijo y le damos estilo al elemento padre. No es posible antes, pero ahora es posible porque ahora tenemos el nuevo foco de vidrio dentro, y necesitamos usar esta clase de Posido en nuestro elemento profundo padre Podría ser parentp de lo contrario cualquier elemento padre. Si enfocamos alguno de los campos de entrada que está dentro de este elemento parente, entonces va a efectuar el elemento parende Ahora comencemos la práctica y veamos cómo podemos usar el enfoque dentro de nuestros proyectos. Como pueden ver lado a lado, abro mi editor de código de Visual Studio y mi navegador usando la extensión Live Server, y ya creo un documento ML llamado index dot t Como puedes ver en esta página TL, ya creamos un formulario de inicio de sesión. En este formulario de inicio de sesión tenemos un total de cuatro campos de entrada, como nombre de usuario ingresado, contraseña ingresada, botón de inicio de sesión y Cancelar a tope. Entonces como te dije, vamos a usar vamos a usar foco dentro de vidrio posterior. Por ahora, se puede ver cómo es desde el color de fondo blanco. Cuando me enfoco en cualquier campo de entrada, como se puede ver no cambian el color de fondo. Ahora quiero cambiar el color de fondo emate padre, enfoque superior el elemento Después de enfocar cualquiera de los campos de entrada está en este formulario. Para eso, necesitamos usar un PositoGlass. Entonces aquí, voy a escribir desde dos puntos y nuestro nombre de PositoGlass es focus weening focus Después dentro del Carrass, voy a usar Bagnoroperty Antecedentes. Y aquí, voy a mandar fondo color amarillo. Voy a establecer este archivo. Después de establecer este le, si hago clic en cualquiera de los campos de entrada, como puede ver, se cambia el color de fondo de este formulario. Porque como te dije, usando este selector PosidoGas, podemos seleccionar el elemento dB de fondo Podemos seleccionar el elemento profundo padre, y si hago clic fuera de este formulario, nuevo, vuelve al color blanco. Así es como funciona este PositRogls. Puede seleccionar el elemento profundo padre usando el elemento secundario De. Si hace clic en alguno de los botones o en cualquiera de los campos de entrada, aún así cambió el color. Espero que ahora te quede claro, ¿ qué podemos hacer con este selector de Pozioglas Gracias por ver este video, estén atentos para los próximos dos tio. 138. Tutorial de tabla de visualización de CSS parte 1: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con CSS. Y en este tutorial, vamos a aprender esta la propiedad table. Ya nos enteramos de esto la propiedad en nuestro tutorial de prefacio Aprendemos el flex, la grilla, este el bloque inline, etcétera Pero vienen con otra d que es mesa. En nuestros tutoriales anteriores, ya aprendemos sobre propiedades de visualización como bloque en línea, bloque interior, últimas películas activas, grano, flick interior, arena interior, Pero en este tutorial, solo trato de cubrir éste. Venderán, remarán, etcétera. Ahora, vamos a tratar de entender qué es la tabla y cómo van a funcionar con la propiedad display. A veces necesitamos crear tabla en nuestras páginas web, algo así. Como puede ver en esta tabla, tenemos que dibujar tres filas y dos columnas. Podemos usar esta tabla de múltiples maneras. Podemos mostrar resultados stuben, detalles de cuenta, etcétera. Para eso, STML proporciona una etiqueta especial. Se le conoce como etiqueta de mesa, algo así. Dentro de la etiqueta de tabla, para crear fila de tabla, necesitamos escribir TN y para proporcionar la columna, necesitamos usar TD. De acuerdo con este ejemplo, creamos un total de tres filas de tabla. Y también, tenemos un total de dos dos puntos en cada fila. Pero ahora el problema es que no quiero usar ninguna etiqueta de mesa para una mesa. Yo solo quiero usar solo las etiquetas profundas, algo así. Quiero usar la etiqueta Di para crear la tabla de ventas, fila de TV y estructura de tabulación. Como puedes ver en este ejemplo, Herald no usa ninguna etiqueta de tabla, solo para usar deep tag para crear la misma estructura Nuestra primera etiqueta, que es de color negro, va a funcionar como etiqueta de mesa. Entonces que está en le coloreado, va a funcionar como fila de tabla y el verde funciona como columna de tabla. Pero no es muy fácil crear mesa así. Para resolver el problema, CSS introduce una propiedad especial, que es la tabla de visualización. Y necesitamos usar esta propiedad display table en el div externo, que es el elemento div paren Y para las filas, también, necesitamos usar una propiedad especial llamada display table row para las celdas de tabla, para nuestras columnas, podemos usar esta propiedad table cells. Así es como va a crear la misma estructura estable usando la propiedad de visualización. Entonces comencemos con lo práctico y veamos cómo podemos crear el TME usando este tres para la propiedad Entonces como pueden ver lado a lado, abro mi editor de código is Studio y mi navegador usando LiveServeTension, y ya creo un documento ML llamado Entonces, como saben, vamos a crear TV usando deep tag. Entonces dentro de la etiqueta del cuerpo, primero, voy a tomar una etiqueta profunda con ID name tib Entonces aquí voy a escribir tiene tabla de etiquetas, y voy a darle a Enter. Y dentro de esta etiqueta de mesa, voy a tomar tres columnas. Por ahora, voy a tomar tres columnas. No voy a tomar ninguna fila. Entonces voy a escribir punto, y voy a asignar nombre de clase a nuestras columnas. Entonces el nombre de nuestra clase es call. Y voy a darle a Enter. En nuestra primera clase, voy a teclear A. Entonces voy a duplicar esta línea dos veces. Esto es BN. Esta es B, y esta es C. Ahora tenemos una tabla de ancho de tres columnas. Y ahora voy a darle estilo a esta mesa. Entonces al principio, voy a seleccionar la tabla ID Hastag. Entonces dentro del carro resis, voy a usar una propiedad llamada mesa de exhibición. A continuación, voy a seleccionar todas las columnas. Soy tipo punto COL. Dentro de la Carli resis, voy a agregar borde. Voy a añadir frontera. Borde, quiero un borde sólido de píxel y nuestro color de borde es negro. Aztag 000. Y voy a poner este archivo. Arriba para configurar este archivo, ustedes ven este resultado. Además, voy a agregar hierba a esta mesa. Para eso, hern hierba apretada, 800 psil. Además, entonces voy a agregar aburrido, bordeado un píxel, borde sólido, y el color del borde es negro Quiero establecer este archivo. Perturbe este archivo, esto es lo que crea. Creo que el ancho de 500 píxeles es un up, así que voy a hacer que sea 500. Hasta configurar este archivo, como pueden ver en mi tabla, tenemos un total de tres filas. Pero ahora quiero hacerles llamar. Hasta A, quiero imprimir B, después quiero imprimir tres. Quiero imprimirlos todos en una sola fila. Para eso, voy a volver a usar esta propiedad. Así que dentro de la clase call, tienen display tipo. Y voy a usar display table cell, tamil cell, y quiero establecer este archivo. Perturbe este archivo, se puede ver el resultado. Ahora en nuestro solo tenemos una fila y tres carbón. Además, quiero hacer esta tabla centro de esta página, así que voy a usar la propiedad margin en nuestra tabla. Margen, cero y auto. Ups hasta este archivo, se puede ver el resultado. De abajo hacia arriba, agregaría margen cero y de izquierda a derecha, agregaría. Ahora, aquí puedes notar que todas las celdas de la tabla están divididas por igual porque no tenemos suficiente contenido para expandir ninguna celda. Si agrego algo en esta celda B, supongamos llanta baja quiero agregar cinco palabras. Entonces satisfacer, se puede ver el resultado. Ahora se puede ver que expande la columna B y reduce el tamaño de la columna A y C. Ahora podemos proporcionar ancho fijo a esta columna media. Supongamos que desea asignar 200 píxeles de ancho a esta columna central. Para eso, puedes usar el método de estilismo Inland. Así estilo de tipo héroe igual a con 200 píxeles. Si configuro este archivo, puedes ver este resultado. Ahora no podemos extender el tamaño de celda de la tabla más de 200. Ahora voy a añadir dos collares más. Voy a duplicar esta línea a tiempo y la voy a nombrar B y esta es E. Si configuro este archivo, como pueden ver, excepto la columna D, todas las columnas están igualmente divididas. Entonces en este ejemplo, Él crea un televisor con una sola fila y tenemos múltiples columnas en esta fila. Pero si quieres crear varias filas para eso, necesitamos crear D padre para todos los deeps de columna Es bastante similar a Tata. Sabemos que en TV la etiqueta Tia representan Taviow y la etiqueta TD representan la columna Tavil Así que vamos a crear una fila. Al principio, voy a seleccionar toda esta sección y voy a cortar esta sección y luego dentro la etiqueta DV, voy a crear una fila. Voy a atar dot Row. Dentro de esta fila, voy a pegar todos los golpes de estado. Esta vez, no necesito estas columnas innecesarias, así que voy a quitar D y E. Como voy a colocarla dentro del nivel de sangría que se puede entender fila y columna muy Con eso, quiero crear otra fila. Entonces aquí voy a atar fila de puntos. Y dentro de esta fila, voy a crear múltiples columnas. Entonces primero, voy a crear algún tipo D punto C. Y voy a poner un nombre que es D. Luego duplico esta línea, y voy a hacer esta E. Y quiero establecer este archivo. Entonces en nuestra primera fila, tenemos que le tres columnas, y en nuestra segunda fila, tenemos que hacer dos columnas. Y luego voy a quitar los datos extra y hacer de éste B. Con eso, no necesito este estilo, así que voy a quitarlo. Y creo que por ahora, me llega a ir con tres columnas para entenderlo mejor. Entonces duplico esta diapositiva otra vez y voy a atarla y guardarla otra vez. Entonces tenemos que hacer dos do y tres columnas en cada fila. Ahora el problema es después de establecer este estilo, ahora puedes notar que no tenemos ningún peso para nuestros elfos Esto se debe a que no le damos estilo a la clase de fila, así que necesitamos darle estilo a la fila. Entonces voy a seleccionar esta clase, así voy a escribir fila de puntos dentro de la resistencia rizada. Voy a usar la propiedad. Mostrar fila de mesa, esta. Si digo este archivo, se puede ver el resultado. Ahora voy a agregar datos reales de estudiantes en estos codones. Para eso, primero voy a aprobar la regla número uno, después voy a pasar el nombre del alumno, agregar uno, y por último, pasaría Marks totales, que es 250. Entonces otra vez, en nuestra segunda fila, voy a pasar Roluba dos, y el nombre es Rahul o scoop sea capital y el número total Entonces duplico esta sección, esta fila. Ahora tenemos total tres, y esto es Roluba tres nombre es Ravi marca total es Ahora vamos a configurar el archivo y ver si funciona correctamente o no. Hasta configurar este archivo, se puede ver el resultado. En nuestra primera columna imprime todo el número de rollo, luego vuelve a leer todos los nombres y por fin imprimimos los números totales Ahora, vamos a agregarlo padding a las ventas. Para eso, necesitamos seleccionar columna y agregar relleno. Relleno, toda la dirección quiero agregar banda de cinco píxeles, y voy a establecer este archivo. Hasta configurar este archivo, esto es lo que parece. Ahora nuestra mesa está lista, pero no tenemos ningún rumbo en esta tabla. Entonces en la siguiente parte de este tutorial, vamos a aprender cómo podemos agregar encabezado usando estas perties. Entonces esto es todo para este tutorial. Gracias por ver este video, mantente atento para el siguiente tutorial. 139. Tutorial de tabla de visualización de CSS parte 2: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otra propiedad de tabla de visualización relacionada con el tutorial. En este tutorial, vamos a crear header y footr usando la propiedad display Para crear este tipo de encabezado en una tabla, ST tendrá etiqueta especial, que es la cabecera de tabla de etiquetas TH. Pero vamos a crear esta sección de encabezado usando deep tag para crear este tipo de encabezado usando deep tag, primero, necesitamos tomar DV luego insertar esta etiqueta profunda, necesitamos tomar esta tres columnas. Como necesitamos usar una propiedad CSS especial llamada display table header group, necesitamos usar esta propiedad en el desfile Develen Usándolo, podemos crear encabezado de una mesa y de la misma manera, podemos crear pie de página de tabla, algo así. Como puede ver, es una mesa de empleados y tenemos número de empleado, siesta y apio Aquí puedes ver esta es nuestra sección de pie de página, y por fin imprimimos apio total Para crear este tipo de pie de página, también, necesitamos tomar una etiqueta profunda y dentro de esta etiqueta profunda, necesitamos crear las columnas y en la etiqueta profunda padre, queremos usar esta propiedad ss, mostrar grupo de pie de página de tabla. Así es como podemos crear un pie de página de una tabla. Empecemos lo práctico y tratemos de despejar el coset. Como pueden ver, lado a lado, abro mi editor de código Visal studio y mi navegador usando extensión de servidor en vivo Aquí abro mi anterior documento estabil. Y como saben, en nuestro tutorial anterior, estaban usando etiquetas profundas. Pero en este tutorial, vamos a crear encabezado de tabla y pie de página de tabla. Entonces primero, voy a crear la sección de encabezado. Dentro de esta tabla blob, voy a tomar una etiqueta profunda, y voy a establecer la tabla de etiquetas IDHs, encabezado de subrayado Entonces dentro de este bloque de aquí, voy a crear 23 co entonces. Copio esta sección y la pego aquí. En nuestra primera columna, voy a escribir fila y en nuestra segunda columna, voy a escribir nombre. Y en nuestra tercera columna, voy a escribir marcas y voy a configurar este archivo. Después de establecer este archivo, esto es lo que parece. Como puedes ver, no se ve como un encabezado de mesa. Ahora necesitamos darle estilo a este elemento profundo, cabecera de mesa. Voy a copiar su nombre de identificación, encabezado de tabla, y aquí, voy a escribir, hashtag, encabezado de tabla. Después inserte los versos de Gali. Aquí voy a usar una exhibición de propiedades. Expositor, cabecera de mesa, vaya. Esta propiedad. También, voy a tomar un color de fondo para resaltar este papel. Tipos de héroes, fondo, y quiero algo de color azul claro, azul claro. Vamos a configurar el archivo y ver si funciona correctamente o no. Después de configurar este archivo como puedes ver, está funcionando correctamente. Así es como podemos crear encabezado de esta tabla. Solo necesitamos usar esta propiedad. Esta jugada van a encabezar. la misma manera, podemos crear pie de página de tabla. Déjame mostrarte. Para crear el pie de página, voy a copiar esta sección y pegarla dentro de esta sección, voy a cambiar el encabezado de la tabla de nombre de ID a pie de página. En nuestra primera columna, no quiero enviar ningún valor, y en nuestra segunda columna, voy a escribir marcas totales. Así que no marcas nerds. En nuestra última columna, voy a imprimir marcas totales. Que es 300 más 350 más 250. Ahora se ha convertido en 900 y voy a configurar este archivo. Después de establecer este archivo, se veía así porque no usamos la propiedad display. Entonces primero, voy a copiar el nombre de identificación para este pie de página y después voy a seleccionar este. Entonces en la primera propiedad de Cal voy a usar display. Display y aquí, voy a usar TV footer roof quiero configurar este archivo. Después de establecer este archivo, como se puede ver con crear el pie de página. Además, voy a asignar un color de fondo, algún tipo, fondo verde claro . Quiero establecer este archivo. Después de establecer el color de fondo, creo que hay un problema en mi código ver, este es el problema. Tenemos que quitarlo. Vamos a configurar el archivo de nuevo. Ahora puedes ver el resultado. Como puede ver, cree con éxito la porción de pie de página. Y si quieres hacer el centro de texto, sí, puedes necesitar alinear el texto, alinear. Necesitas usar propiedad del centro. Voy a usar la propiedad sen en pie de página y voy a establecer este archivo. Con eso, si quieres aumentar la fuente a ella solo necesitas escribir fuente a ocho. Fuente, peso, y voy a usar bond. Voy a usar la misma propiedad en la sección de pie de página, y voy a volver a guardarla. Ahora parece una cola completa. Así es como podemos crear una sección tavilhaded y footer usando Solo quiero usar esta propiedad con. Pero si quieres hacer lo mismo usando la estructura, la estructura apropiada de Tim, para eso, necesitamos usar la etiqueta TH, pero podemos hacer lo mismo fácilmente con la propiedad display. Ahora les voy a mostrar cómo podemos agrupar filas de tablas. Aprendemos cómo podemos agrupar encabezado de tabla y tablefooter. Además, podemos agrupar la fila de la tabla y podemos proporcionar color de fondo. Déjame mostrarte. Para eso, voy a mover todas las filas dentro de otra profunda. Al principio, voy a cortar esa porción. Selecciono esta porción y la corté. El, aquí estoy tecleando otro tipo profundo Bev voy a asignar un ID e idName es grupo de filas Grupo de filas. Entonces dentro de esta fila ID de grupo, voy a pegar todas las filas. Entonces voy a usar este ID como selector y saltar a la selección de estilo. Primero, voy a seleccionar este ID, luego dentro de la pantalla alivss, y voy a usar grupo de filas en fila de tabla, ve a este También voy a establecer color de fondo, fondo, y quiero fondo amarillo. Voy a establecer este archivo. Después de configurar este archivo, se puede ver el resultado. Entonces esto es para este tutorial. En el siguiente tutorial, vamos a aprender grupo de carbón. Aquí vamos a aprender cómo podemos agrupar cualquier columna. Supongamos que quiero agrupar esta columna, quiero cambiar el color de fondo de esta habitación. Quiero seleccionar todas las columnas. Entonces vamos a aprenderlo en el siguiente tutorial. Gracias por ver esta estatua para nuestro próximo tutorial. 140. Tutorial de tabla de visualización de CSS parte 3: Hola, chicos. Me alegro de verte de vuelta. Esta es la nueva propiedad de tabla disp relacionada con el tutorial. Y en este tutorial, vamos a aprender tabla llamada groove. Como puedes ver en este ejemplo, tenemos el número de fila nombre y edad. Estos son tres colum y ahora quiero decir color de fondo a la columna del nombre, algo así Ya hicimos lo mismo por una fila, pero esta vez lo vamos a hacer por un colum Para establecer el color de fondo así, CSS introduce otra propiedad, display llamado groove. Ahora veamos cómo podemos usarlo. Al principio, en tu tabla, necesitas crear un elemento DV, y como puedes ver en este Delmate una clase llamada grupo tabla C. Básicamente, tratamos de crear un grupo de columnas de tabla. Entonces puedes mencionar las columnas, cuántas columnas quieres seleccionar y también puedes ascender clase a estas columnas En nuestro caso, columna de tabla. En este ejemplo, HetyTtal de dos columnas. Si quieres más, entonces puedes aumentar el tamaño de la columna. También necesitamos usar una propiedad CSS especial para esta clase, grupo de llamadas a la tabla, y necesitamos usar esta propiedad. Este grupo de columnas de mesa de juego, y para la columna, necesitamos usar esta propiedad. Esta columna de mesa de juego. Esto va a crear un grupo de colores y puedes cambiar el color de fondo con él. Empecemos la práctica y veamos cómo podemos aplicarla. Como pueden ver, lado a lado, abrí mi editor de código de Visual Studio y mi navegador usando la extensión Live Server y ya abrí mi anterior nombre de documento Atable index dot t Aquí ya creamos una tabla. Aquí creamos encabezado de mesa, pie de página de tabla, tenemos que muñeca de tres columnas, también tenemos que hacer tres filas. Ahora necesitamos crear grupo usando columnas. Entonces dentro de la etiqueta de tabla, aquí voy a tomar otra etiqueta dip y voy a asignar ID call tbcll group Grupo de llamadas de mesa. Entonces dentro de este grupo de llamadas de tabla, vamos a crear un total de tres columnas porque tu mesa tendrá un total de tres colores Aquí voy a escribir Dev punto y voy a asignar nombre de clase llamado color de tabla voy a duplicarlo varias veces. Si pasamos algún valor en esta columna, supongamos que si escribo esto es COL llame a uno, esta es la columna uno y copio este valor y psi aquí y reemplace uno por dos y reemplace este valor uno por tres, y esto en este archivo uppifle como ve, por ahora, se ve Pero ahora voy a aplicar estas propiedades. Al principio, necesitamos asignar la propiedad CSS a este grupo de llamadas a la tabla. Copio este valor y HemoTyehTag tabla call group. Entonces puse los calibss y aquí quiero usar una propiedad llamada esta obra de teatro este grupo tb Columna Llamarán a un grupo, y también para seleccionar a este niño. Ellos van a C. Ups, hay un error de mecanografía en el nombre de mi clase Debería ser E, no R. Lo corrijo. Y luego voy a copiar el nombre de la clase y crear un selector usando este nombre de clase, Tabla C. En cambio el cis, aquí, voy a aplicar la esta labilidad Mostrar mesa coll Este, y quiero establecer este archivo Hasta configurar este archivo, como puedes ver, oculta todos los datos de los cols. Aquí no se pueden ver los datos que pasamos dentro del dip Eins, como Col uno, llamar a dos, llamar a tres Ahora necesitamos agregar diferente plusname a toda esta columna Aquí escribe, esto es l11. Entonces copia el nombre de la clase y este es L dos. Esta es la columna dos, esta es L tres, la columna tres. Básicamente, Hey agrupa tres marcas de nombre de rollo de columna diferentes. Supongamos que ahora quiero agregar color de fondo al color del nombre. Para ello, necesitamos seleccionar esta columna, llamar a dos. Pero antes de aplicar el color de fondo de la columna, quiero quitar el color del libro pícaro Para eso, como pueden ver, necesitamos quitar este color amarillo, así que comento esta línea. Después voy a seleccionar este grupo de columnas llamado dos y crear un selector. Y dentro de los hígados está, necesitamos aplicar el color de fondo, algún tipo de fondo, y quiero decirlo rosa Quiero establecer este archivo. Después de configurar este archivo, se puede ver el resultado. Agrupamos con éxito este color de nombre y establecemos un color de fondo a este color de nombre. la misma manera, si quieres agregar diferente color al rollo, sí, puedes. Sólo para duplicar este e shot y seleccionar. Esta vez, necesitamos seleccionar dos puntos uno, llamar a uno, y aquí voy a asignar color rojo. Quiero establecer este pi. Se puede ver el resultado. Recuerda, solo puedes aplicar a la propiedad. Puede cambiar el color de fondo de este grupo de columnas. Además, puede aumentar el ancho del grupo de columnas. De lo contrario, no se pueden aplicar otras propiedades CSS. Déjame previsualizar eso. Supongamos que en la columna dos, quiero aplicar la propiedad de línea de texto, alinear el texto, y quiero que sea el centro. Quiero hacer todo el puesto de centro de nombre. Entonces si establece este archivo, como puedes ver, no es trabajo. Pero si aplicamos con entonces entonces voy a configurarlo 150 pixel y luego en este archivo, se puede ver el resultado. Ahora aplica el podemos cambiar el color de fondo. También podemos aplicar con. De lo contrario, no podemos aplicar propiedades de tesis, como textine, tamaño de fuente, etcétera. Voy a comentar fuera de la línea. No lo necesito. Esto es sólo por ejemplo, y hay que recordarlo. Ahora hablemos de la última propiedad de BSB, que es la caché de tablas Podemos establecer rumbo usando este sentido de labio. Para eso, dentro de esta etiqueta de tabla aquí, voy a tomar una etiqueta profunda, DP y aquí, voy a establecer una identificación llamada caption. Entonces dentro de esta leyenda, voy a pasar tres etiquetas. Se puede llevar cualquier etiqueta auditiva. Por ahora, voy a tomar tres y tipos hoy información. Información del estudiante para establecer esta leyenda, necesitamos seleccionar el nombre de la clase. En nuestra sección de estilo, algún tipo dot caption dentro del auto versos, voy a pasar la propiedad. Muestra y aquí necesitamos usar donde llamas subtítulo de tabla. Pie de tabla este. Voy a establecer este archivo. Después de establecer este archivo, se puede ver el resultado. También quiero hacer este centro de captura aquí estoy tecleando texto línea, texto alinear centro. Entonces quiero ponerla en mayúscula, así que voy a escribir texto, transformar, y quiero aplicar mayúsculas Entonces voy a cambiar el color de la fuente y quiero decir color de fuente, color, y quiero color verde. Voy a fijar esta. Aquí puedes ver que creamos con éxito la leyenda de la tabla. Creamos el encabezado de la tabla, el pie de página de la tabla, podemos agrupar las filas. Como podemos agrupar columnas. Podemos hacer todo usando esta propiedad de tabla. Aquí, no necesitamos crear ninguna estructura de tabla adecuada usando TA tech, DD tag, podemos hacer lo mismo usando la etiqueta Dip. Espero que les guste este tutorial. Gracias por ver este video Sadiun para el próximo 141. Tutorial de color de acento de CSS: Hola, chicos. Me alegro de verte. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vamos a aprender una nueva propiedad llamada color de ascenso Como saben, en una etiqueta estable de Frork, tenemos que contar dos etiquetas especiales Una es la casilla de verificación y la otra es radio. Ambos son etiquetas de entrada. Si queremos obtener múltiples valores de múltiples opciones, entonces usamos checkbox y usamos botón de radio cuando necesitamos obtener solo un valor de la opción múltiple Y donde quiera que marquemos esta casilla, lo contrario, haga clic en este botón. Por defecto, devuelve color azul. Pero si se quiere asignar diferentes colores, algo así, rojo, verde, morado, amarillo, en ese caso, CSS introdujo una nueva propiedad, y a esta propiedad le llamamos color de ascenso Antes de la propiedad de color de ascenso, no tenemos ninguna propiedad que pueda cambiar chapebx de lo contrario los colores de los botones de radio No podemos cambiar el color predeterminado antes. Para cambiar este color, CSS introdujo esta propiedad color de ascenso Entonces comencemos lo práctico y veamos cómo podemos aplicar esta propiedad. Como pueden ver lado a lado, abro mi editor de código is studio y mi navegador usando la extensión de servidor light, y ya creo un documento TML llamado index dot HTML Entonces en nuestra etiqueta corporal, solo tenemos una etiqueta de encabezado, y dentro de la etiqueta corporal, aquí vemos para área familiar y para tamaño 16 píxeles. Ahora dentro de la etiqueta del cuerpo, al principio, voy a tomar de la etiqueta de. Después dentro de la etiqueta fro. Primero, voy a tomar un nivel. Voy a decir nivel Hobbs. A continuación, aquí estoy take input tag, input, y nuestro tipo de entrada es Jack Wox Y también en toct un nombre para este tipo de entrada nombre hobby. Como aficiones, primero, voy a escribir deportes. Entonces ubico esta línea varias veces y nuestro siguiente hobby es la música, y nuestro último ho son los libros Como sabes, si usas casilla de verificación, entonces el usuario puede seleccionar múltiples opciones Entonces para radiowtans voy a tomar otro nivel. Voy a tomar otro labio. Para etiqueta, voy a escribir jengibre. Género y aquí, voy a escribir tipo de entrada. Este es el radio. Con eso, tenemos que pasar nombre Zina. Después para pasar, Valu macho, y también tenemos que pasar el let Min. Entonces duplico esta línea. Esta vez acabo de cambiar el nombre del valor, femenino. FE, no R, hembra, hasta que puse este archivo. Después de establecer este archivo, se puede ver el resultado. Estos están en mi opción de casilla de verificación y estos dos se leen debido a la opción de botón Ahora, si hago clic en alguna opción, de lo contrario, opción múltiple, y si tomo botones de radio, como se puede ver devuelven color azul. Es el color por defecto. Ahora voy a darle estilo a estas etiquetas de entrada. Dentro de esta etiqueta de estilo, voy a seleccionar la etiqueta de entrada en luego configuras los versos cali. Al principio, voy a asignar weed, nosotros, 15 pixel. Además, voy a tomar altura 15 pixel. Voy a establecer este archivo. Yo configuro este archivo, como pueden ver, aumenta el tamaño de la casilla de verificación y los botones de radio. Ahora quiero cambiar el color por defecto. Como te dije, podríamos cambiar el color, necesitamos usar una propiedad llamada ascend c Ascend cur y puedes poner nombre, cualquier nombre de color, de lo contrario, cualquier código xa, RG Value, Voy a escribir red cn, red, y quiero satisfacer. Después de satisfecho, si hago clic en alguna casilla de verificación, como pueden ver ahora se sienta en rojo courn También botones de radio Wi. Se puede utilizar cualquier tipo de color do. Puedes usar HiXa RGB, RGB, etcétera. Sólo una cosa que debes recordar. Podemos aplicar esta propiedad solo con estas dos etiquetas de entrada, casilla de verificación y radio. No podemos usarlo con textia, texto, número, etcétera. Solo podemos aplicarlo con casilla de verificación y hacer. Esto es para este tutorial. Gracias por ver este video, estén atentos para el siguiente tutorial. 142. CSS prefiere el esquema de colores: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS. En este tutorial, vamos a aprender sobre una nueva propiedad, que es el color preferido grito Ahora bien, ¿qué es el grito de color? Si eres usuario de Windows, de lo contrario se reunió usuario, entonces su interfaz de usuario viene con el modo total de dos colores, el modo de color Lightp y el modo de color Darkap En el tema Light aap mode, nuestro navegador y nuestro diseño de navegador vienen con color claro, y el modo I Darkap, nuestro navegador y nuestro diseño Browser Outer vienen con color más oscuro Según la elección del usuario, usuario puede seleccionar cualquiera de los modos de luz. Básicamente, antes de esta regla de medios, creamos sitio web de acuerdo con el modo Light App, algo así. Aquí utilizamos fondo de color blanco, y texto de color negro. Pero, ¿y si los usuarios seleccionan el modo de aplicación oscura? En ese caso, tenemos que comprometernos con la visibilidad. Algo así. Como puedes ver el texto a su vez rayos visibles comparar con luz un modo porque esta vez viene con color de fondo oscuro. Nuestro texto y el fondo están ambos en color oscuro. Pero ahora cuando aplicamos el modo app oscuro, automáticamente cambio el color del texto, algo así. No solo el color del texto, podemos cambiar el color fino de este sitio web. También podemos cambiar cualquier propiedad CSS. Es posible porque sólo para nuestra nueva regla mediática, que se conoce como esquema de color preferido. Para utilizar esta regla mediática, en un principio, es necesario escribir en los medios de comunicación comieron. Entonces dentro del receso redondo, necesitas pasar esquema de color preferido, y necesitas pasar un id se viene con un total de dos ondas predefinidas, claro y oscuro. Si eliges luz, entonces cualquier CSS que escribas dentro del clss se va a aplicar solo en light move si eliges dark, entonces solo va a aplicar en dark move Ahora, vamos a aplicar esta nueva regla mediática. Pero antes de aplicar esta nueva regla mediática, quiero mostrarles algo. Como puedes ver, abre mi navegador y podrás notar que todos están en color claro. Ahora voy a cambiar el modo de color de mi sistema y para cambiar el modo de color, solo necesitas buscar oscuro. Después ve a la sesión SSW y aquí, necesitas buscar dark y desde aquí, debes seleccionar esta opción Enciende el modo oscuro. Después de abrir esta configuración, desde aquí, puede elegir cualquier modo. Entonces, como puedes ver, Hart proporcionó el desplegable y por defecto, ya seleccionamos el modo de color claro Si selecciono el modo de color oscuro, entonces puedes ver, automáticamente, es cambiar nuestro color de navegador predeterminado. Ahora nuestro navegador se vuelve oscuro. Disposición interior diseño exterior se vuelve oscuro. la misma manera, si vuelvo al modo de color blanco, déjame mostrarte. Voy a seleccionar luz de nuevo. Ahora puedes notar que nuestro navegador vuelve a venir con colores claros. Ahora, de acuerdo con este modo de color, podemos definir diferentes CSS para nuestro sitio web. Empecemos la práctica y veamos cómo podemos aplicarla. Como pueden ver lado a lado, abro mi editor de código de estudio de usuario y mi navegador usando extensión if server y ya creo un documento EstiML llamado index dot HTML Ahora, como puedes ver en nuestra etiqueta corporal, tenemos una etiqueta de rumbo dos y una Panagra Ahora, al principio, voy a asignar un color de fondo predeterminado a este cuerpo. Entonces dentro de esta etiqueta de estilo, voy a atar cuerpo al principio, voy a seleccionar el cuerpo ahí dentro los calses voy a asignar propiedad de fondo, esa ronda y quiero asignar color naranja, y voy a establecer este archivo Para usar la regla mediática, como te dije, primero, tenemos que escribir a la velocidad media. Entonces dentro de los versos redondos aquí, necesitamos escribir prefiero color. Esquema aquí voy a aplicar color claro. Entonces dentro del carro resis, quiero cambiar la propiedad bedron Voy a copiar el tipo de cuerpo con la propiedad de recámara luego dentro del css, lo voy a pegar aquí y esta vez, quiero aplicar color rosa rosa. Voy a establecer este archivo. Después de establecer este archivo, se puede ver el resultado. Ahora aplica color rosa porque si busco en nuestra tabla de colores, ahora puedes ver nuestra línea de cuerpos de color. Por eso aplica el color rosa. Ahora de la misma manera, quiero crear seleccionados para el modo oscuro. Para eso, aquí, voy a dbgate esta sección y esta vez, voy a seleccionar dark, esta También quiero cambiar el nombre del color, rosa a verde claro. Éste, y voy a poner este archivo. Después de configurar este archivo, como puede ver, no hay cambios en mi navegador. Pero, ¿qué? Si cambio el estado de ánimo del color, déjame mostrarte. Voy a abrir esta configuración y ahora voy a cambiar el modo de color claro a oscuro. Después de aplicar la oscuridad, se puede ver el resultado. Ahora automáticamente, se puede ver que aplica el color verde claro como color de cuerpo predeterminado. Y de la misma manera, nuevamente, seleccionamos el modo de luz, déjame mostrarte. Entonces como se puede ver, de nuevo de nuevo al color de cuerpo rosa. Como te dije, puedes aplicar cualquier CSS aquí. Supongamos que quiero cambiar el color de fuente cuando aplicamos el modo de color oscuro, color tipo Sumo, y quiero gris claro. Gris claro. Además, voy a cambiar el color de fondo, y quiero aplicar el color gris oscuro. Entonces aquí desde la palabra color, quiero aplicar este tipo de color oscuro, este, este código de color. Voy a poner esto bien. Después de configurar este archivo, si cambio el mod de color, déjame mostrarte claro a oscuro, puedes ver el resultado. Ahora puedes ver mi navegador. Ahora es claramente visible. Aquí solíamos opsitar el color. Para fondo, usamos color oscuro y para el texto, usamos color gris claro. Es así como podemos usar esta regla mediática. Espero que ahora te quede claro cómo podemos usarlo. Gracias por ver este video estatua para nuestro próximo tutorio 143. Tutorial de relación de aspecto: Hola, chicos, es bueno volver a verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS avanzado. Y en este tutorial, vamos a aprender una nueva propiedad llamada relación de aspecto. Ahora, tratemos de entender qué es la relación de aspecto. Supongamos que quiero crear un cuadrado perfecto. Para crear el cuadrado perfecto, necesitamos la misma altura y la misma anchura. Supongamos que tomamos 200 píxeles de ancho y 200 píxeles de alto. Así es como podemos crear un cuadrado. Ahora tenemos una nueva forma de crear este cuadrado ahora para crear este tipo de cuadrados, primero en tomar el matrimonio. Supongamos que en nuestro caso, 200 pixel, pero para la altura, no voy a tomar ninguna propiedad de altura. Aquí vamos a utilizar nuestra nueva propiedad Relación aspec, algo así, proporción Apec uno por uno No vamos a usar la propiedad height para crear esta caja cuadrada. En propiedad de relación de aspecto, pasamos una relación en la cual ratio, quiero tomar la altura y u. como se puede ver, usamos una relación, lo que es uno. Nuestro primero significa mié y el segundo significa altura. Es decir, de acuerdo al ancho, vamos a usar la misma cantidad de altura. Aquí puedes pasar cualquier ratio de acuerdo a tus necesidades. Déjame mostrarte otro ejemplo. Supongamos, en ese caso, aquí voy a crear otro elemento profundo. Esta vez, voy a tomar 200 píxeles y aquí voy a tomar altura dos veces luego con leadth a este tipo de estructura usando relación de aspecto, en ese caso, necesitamos tomar relación de aspecto uno por dos, uno es dos, dos Es mezquino, básicamente vamos a tomar doble arriba con valor para la altura. Si quieres tomar altura, habop con longitud, en ese caso, solo uri para revertir el ancho, luego escribe dos y uno Ahora podrías tener quien por qué uso esta propiedad? Podemos hacer lo mismo usando la propiedad height. Básicamente, utilizamos esta propiedad para sitios web receptivos. Déjame mostrarte un ejemplo. Este DV es un elemento dv cuadrado. Pero cuando hablamos de sitio web receptivo, entonces la mayor parte del tiempo necesitamos seguir la resolución móvil de lo contrario resolución de laptop. Como ya sabéis, nuestro smartphone viene con diferente resolución. Su ancho es diferente. Pero la mayor parte de la resolución del teléfono inteligente es de 322400-80 píxeles. Así que cuando diseñamos para móviles, mayoría de las fundas nos fijamos con 100%. Entonces el ancho se vuelve receptivo, pero ¿cómo puede crear un cuadrado perfecto usándolo? Porque nuestra altura sigue siendo de 200 píxeles. Ahora, el ancho es del 100%, pero la altura es fija. Así que aquí podemos usar nuestra nueva propiedad como ratio falso. Ahora, automáticamente aumenta o disminuye la altura según el ancho largo, y crea un cuadrado perfecto. Sea cual sea la resolución que tengamos aquí bilis, no tenemos que preocuparnos. Va a crear un cuadrado perfecto. Utilizamos principalmente esta propiedad para que nuestras imágenes sean receptivas. Sin descansar tu tiempo, comencemos práctico y veamos cómo podemos aplicar esta propiedad Entonces como pueden ver, lado a lado, abro mi editor de código visual studio y mi navegador usando la extensión del servidor de vida, y ya creé un nombre de documento estimado índice punto DM. Ahora dentro de la etiqueta corporal, voy a tomar un desvío. Su a tipo. Y además, voy a asignar ID al desviamiento tipo S, hTag y nuestro nombre de identificación es gusto Dentro de este Dvariate aquí, voy a tomar un párrafo, tipo Sue, EM, y quiero diez palabras Además, voy a darle estilo a este elemento usando su nombre de ID. Copio el nombre de identificación y parte superior del cuerpo, voy a seleccionar este nombre de identificación y es el cals es la primera propiedad que voy a usar W W 200 pixel. Entonces lo voy a decir fondo uber fondo, y quiero u Ballard también quiero decirlo frontera. Frontera. Quiero borde sólido de dos píxeles. Sólido, y nuestro color de borde es negro, Hatag 000. Voy a establecer este archivo. Después de configurar este archivo, se puede ver el resultado en navegador nocturno. Y ahora quiero transformar este elemento en cuadrado perfecto. Para ello, no voy a usar propiedad de altura. Sin usar la propiedad de altura, voy a usar propiedad llamada relación Astete Relación de aspecto uno por uno, y voy a establecer este. Después de configurar este archivo, podrás ver el resultado en tu navegador. Aquí, el primer valor uno representa V y el segundo valor uno representa alto. Y ahora decido aumentar la altura de este rectángulo. Para eso, ahora quiero dos tiempos de altura según el ancho largo. Aquí voy a cambiar la relación uno por dos y establecer este archivo. Después de establecer este archivo, se puede ver el resultado. Si lo hago triple, entonces solo pasa tres aquí y establece este archivo. Ahora puedes notar ahora, altura es tres veces mayor que la anchura. También, podemos hacer lo contrario. Sí. Si quieres asignar 50 píxeles de altura para eso, solo en el tipo 21. Si configura este archivo, puede ver el resultado. Ahora, lo siento, el Wi es de 200 píxeles y la altura se convierten en cien píxeles porque aquí se establece con 200 píxeles. Déjame decirte una cosa. Supongamos que quieres crear un cuadrado, un cuadrado perfecto. En ese caso, solo se puede llevar una victoria. Supongamos que voy a tomar sólo una. Después de establecer este archivo, aún se puede ver esta plaza. Si ambos el valor es el mismo, en ese caso, se puede tomar valor numérico sólo por una vez. Ahora déjame mostrarte otra cosa. Ahora puedes ver así tienes texto limitado en este elemento DB, y voy a aumentar el tamaño del texto. Así que voy a duplicar esta sección varias veces, y voy a configurar este archivo. Después de establecer este archivo, va a aumentar la altura de este elemento. Déjame mostrarte. Como se puede ver, ahora, seguimos siendo 200 píxeles y la altura se convierten en más de 200 píxeles debido a que su uso relación de aspecto uno. Si usamos relación de aspecto uno, entonces nuestro contenido no va a desbordarse de este contenedor. Se va a incrementar la altura de este contenedor. Entonces, en nuestro caso, la relación de aspecto funcionará como una propiedad de altura mínima. Siempre va a asignar 200 píxeles de altura mínima y el contenido es y si el contenido es mayor que su área, entonces va a aumentar la altura. Pero, ¿qué? Si no quieres aumentar la altura, en ese caso, puedes usar la propiedad overflow. Justo en tipo desbordamiento, desbordamiento automático. Si lo configuras auto, entonces podrás ver el susto ba en tu Delem Ahora de nuevo, altura vamos a 100 píxeles debido a la relación de aspecto. No sólo eso, esta probabilidad de relación de aspecto también funciona con la altura, déjenme mostrar. En ese caso, voy a asignar estatura peso. Comento este peso de línea y su altura tipo, 300 píxeles. Además, voy a comprometer la propiedad de desbordamiento. Aquí voy a tomar uno por uno, uno es dos, uno. Si tomo esta relación, si configuro este archivo, de nuevo, va a crear un cuadrado perfecto. Porque esta propiedad funcionará con ratio. Si proporciona uno de los valores acuerdo a esta relación de valor, va a crear el otro valor de propiedad. Si quieres disminuir el ancho, solo tipo par, solo tienes que intercambiar la relación dos. Si configura este archivo, verá el resultado. Ahora asignó 100 píxeles de ancho a este elemento. Pero esta vez puedes notar que nuestros datos se desbordan de este contenedor porque aquí asignamos altura fija a este contenedor. Y si quieres resolver este problema, solo necesitas usar el mismo desbordamiento de propiedad en él fueron para resolver el problema. En lugar de disminuir el ancho de este elemento, si quieres aumentarlo, entonces necesitas tomar mayor valor 40 con ratio. Supongamos que quiero un ancho tres veces mayor en comparación con la altura. Aquí pasa tres a uno y establece este archivo y podrás ver este resultado. Ahora, el ancho del continuador se convierte en 900 píxeles. Debido a que tres tiempos de 300 es 901 de lo más importante que debes recordar, no puedes usar la propiedad de altura y ancho juntos Entonces esta propiedad Spec ratio no va a funcionar. Déjame mostrarte. Voy a aplicar tanto la propiedad. Si lo guardo, como pueden ver, ahora el ancho se convierte en 200 píxeles y la altura se convierte en 300 píxeles. Ahora, nuestra relación Espe no va a funcionar. Si trato de hacerlo cuadrado perfecto, aún así, no va a funcionar. Pero, ¿qué? Si no aplicamos tanto la propiedad, déjame mostrarte. No voy a aplicar tanto la propiedad como comentarla, así que la comento y configuro este archivo, ahora puedes ver el resultado. Ahora puedes ver que crea un cuadrado perfecto Ag Ahora por defecto, relación de aspecto decir a wid valor Otto y según el valor wid, aumenta la altura Por eso una necesidad de crear una caja cuadrada perfecta. Ahora, dependemos del tamaño del contenido de este párrafo. Si arrastro y aumento el tamaño de la ventana, como se puede ver, acuerdo al tamaño del contenido, aumenta la altura y anchura de este contenedor. Ahora veamos cómo podemos responder a nuestras imágenes. Al principio, voy a eliminar este elemento profundo. Entonces también, voy a comentar estas líneas. Después de eso, dentro de la etiqueta body aquí, voy a tomar una imagen tag.yimageimage, y como fuente, como puedes ver en mi directorio de trabajo actual, hay una imagen llamada Voy a pasar la imagen fuente path nature nature dot JPG. Si configuro este vil, puedes ver la imagen en mi navegador. Y como puedes ver en aquí puedes notar, imagen Wi es mayor que la altura de la imagen. Ahora quiero hacer de esta imagen un cuadrado perfecto. Dentro de esta etiqueta de corbata y donde crear seleccionados usando su etiqueta Nombre imagen. Él ata Imagen. Es los carnavales es, la primera propiedad con la que voy a usar, y voy a establecer con 400 pio Voy a establecer este archivo. configurar este archivo, se puede ver el resultado. Según la imagen con, cambió la altura de la imagen. Pero quiero que sea un cuadrado perfecto. Para eso, voy a usar una propiedad llamada aspecto relación de aspecto. Voy a tomar ratio uno por uno y voy a sub este archivo. Después de establecer este archivo, aquí se puede notar que hizo un cuadrado, pero el problema es que estiró la imagen. Ahora, alto DO es igual, pero destruyó la imagen. Ahora bien, ¿cómo podemos resolver este problema? Para resolver el problema, tenemos otra propiedad, que se conoce como ajuste a objetos. Y aquí voy a escribir cover object feed cover. Si configuro este archivo, ahora puedes ver el resultado. Ahora puedes ver que tenemos la imagen cuadrada y además distorsionará la imagen Si reduzco la imagen con algo de 200 píxeles, también se puede ver que distorsiona la imagen Aún tenemos caja cuadrada. También, podemos cambiar la relación. Supongamos que quiero crear un rectángulo, aquí voy a pasar una por dos proporción y establecer este archivo. Ahora puedes ver el resultado. Sin distorsionar la imagen, se ajusta en cualquier rectángulo o caja cuadrada Ahora voy a convertir esta imagen en imagen responsiva. Por ahora, voy a usar esta corbata uno por uno, y para las pruebas móviles, voy a usar un medio qui Hemotipo a la velocidad, media skin, y dentro las rondas voy a establecer la condición Yelmo tipo max con y voy a pasar 500 pixel. Es media en el Wi es menor de 500 píxeles, entonces podemos aplicar diferentes CSS a este elemento. Es que el calibrass voy a ascender a esto, voy a ascender diferente mojado a Primero voy a seleccionar la imagen ING, luego dentro del tipo de héroe calibrs con el 100% Siempre que la pantalla llegue a ser inferior a 500 píxeles, entonces va a establecer el 100% a esta imagen. Como puede ver utilizamos la proporción de espera uno es a uno. Así que vamos a establecer el archivo. Después de configurar el archivo, ahora puedes ver que nuestra imagen está al cuadrado. Si reduzco el ancho del navegador, déjame mostrarte así que aquí desde la inspección, voy a cambiar la dimensión de este navegador. Voy a reducir el ancho del navegador. Entonces como puedes notar, siempre que este vio signifique con debajo de los 500 píxeles, va a decir ancho de imagen, 100%, algo así. Como puedes ver aquí usamos relación de aspecto, por eso creó un cuadrado perfecto. Es así como podemos responder nuestra imagen de acuerdo a la pantalla del móvil. Y si aumento el ancho de la ventana del navegador, nuevamente, se convierte en una pequeña imagen cuadrada. Entonces espero que ahora te quede claro, cómo podemos usar la propiedad de relación de aspecto para hacer que nuestras imágenes y sitio web sean receptivos Gracias por ver este horario de video para nuestros próximos dos io. 144. Modo de visualización de CSS @regla de media: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial vamos a aprender CSS dis learning. Es una nueva regla mediática. Ahora tratemos de entender cuál es el significado de la misma. ¿Qué es este emo? Cuando necesitamos abrir un sitio web, necesitamos usar un software especial llamado browser y actualmente tenemos múltiples opciones de navegador en el mercado como Chrome, age, Safari, Firefox, Opera. Estos son todos los navegadores populares en el mercado. Sin eso, hay más navegador. Pero si te das cuenta, puedes ver en cada navegador, tenemos un control común, esta barra de control. Cada navegador viene con esta barra de URL. Aquí podemos proporcionar la URL y acceder al sitio web. Además, viene con botón de navegación y algunas opciones. También en el lado derecho, proporciona la opción de netap abierto, la opción marcador y la opción de menú Ahora, CSS nos proporciona el control para manipular el diseño del navegador. Si quieres ocultar todos estos, puedes conocerlos como estos y podemos cambiar el modo de navegador de tres formas diferentes. El primer valor es navegador. Es el valor por defecto. Si usamos navegador, entonces proporciona todos los controles. Proporciona navegación en la barra de URL, marcador, Nutap, etcétera. Este es el modo predeterminado y se conoce como modo de visualización del navegador. Entonces tenemos otra opción llamada UI mínima. Si usamos este modo, entonces va a eliminar la barra de navegación, barra URL, opción de marcador. Va a mostrar que hay más control en nuestro navegador. Por fin tenemos otro modo de visualización, que es el modo de pantalla completa. Cuando abres un sitio web en nuestro navegador y alabamos la tecla F 11, entonces entonces va a cambiar la ventana de nuestro navegador al modo de pantalla completa después de activar el modo de pantalla completa, oculta todos los controles. Ahora, de acuerdo con el modo de visualización de su sitio web, puede cambiar el diseño de la interfaz de usuario de su sitio web. Quiero decir que puedes cambiar el estilo CSS de tu sitio web. Es por eso que CSS introdujo una nueva consulta de medios conocida como modo de visualización. Ahora veamos cómo podemos usar este modo. Al principio, necesitamos escribir a la velocidad media. Luego dentro del proceso redondo, necesitamos usar una propiedad llamada modo de visualización. Aquí puedes usar cualquiera de este valor. Supongamos que puede usar la interfaz de usuario mínima de pantalla completa y el navegador. De acuerdo con este valor, se puede cambiar la propiedad CSS. Define diferentes colores degraund en modo de pantalla completa. Entonces, cuando el usuario haga clic en la tecla F 11, entonces va a transformar su navegador en modo de pantalla completa. Además, va a cambiar el color de fondo de tu sitio web. Ahora, comencemos con lo práctico y veamos cómo podemos usar estos tres modos diferentes. Entonces como pueden ver, lado a lado, abro mi editor de código visual studio y mi navegador usando extensión de servidor en vivo y ya creo un documento TML nombre índice punto DML Como puedes ver en nuestra etiqueta corporal, tenemos etiqueta de encabezado dentro de la etiqueta de estilo, su estilo la sección de cuerpo. Le asignó un área de fuentes fab. Ahora voy a establecer un modo de visualización dentro de nuestra etiqueta de estilo. Él escribe a la velocidad media y dentro de los rounders, aquí voy a escribir modo de visualización, modo de visualización, y voy a asignar pantalla completa Éste. Entonces dentro de la fricia podemos estilizar de acuerdo a nuestras necesidades A continuación, voy a sacar esta diapositiva. Este paso, voy a configurar navegador, por defecto. Y ella soy tipo navegador. Entonces voy a duplicar de nuevo esta línea y esta vez voy a establecer modo, UI mínima. Después dentro del modo de pantalla completa, quiero cambiar el color de la fuente. Aquí estoy tipo, primero quiero seleccionar el encabezado una etiqueta, H uno, luego dentro de la Calibra dice, aquí voy a usar una propiedad llamada color, color y voy a ponerla verde Después copio esta selección y la pego dentro de otro modo de visualización. Aquí voy a poner de color rojo. Y por fin, lo voy a configurar para una interfaz de usuario mínima, voy a poner en azul, y voy a configurar este archivo. Después de configurar este archivo, ahora puedes verlo activar nuestro modo predeterminado, navegador Mins. Por eso nuestro color de fuente se convirtió en color rojo. Como ya les dije, este es el modo por defecto. Aquí puedes ver todos los controles en mi navegador. Aquí puedes ver los botones de navegación, opción de recarga, barra de URL. Y otras opciones. Ahora voy a alabar después de seleccionar el navegador F 11. Si alabo F 11, ahora puedes ver que nuestro navegador se convierte en modo de visualización completa, y además podrás notar que sigue siendo el color de la fuente. Ahora nuestros colores de fuente se convierten en color verde. Como puedes notar no hay barra de URL y otras opciones, y ocupa toda la pantalla para el navegador. Si quieres volver al modo predeterminado normal, entonces otra vez, necesitas alabar el botón F 11. Espero que ahora te quede claro ¿cuál es la diferencia entre el modo de pantalla completa y el modo navegador? Por último, tenemos otra opción llamada UI mínima. Es trabajo cuando conviertes nuestro sitio web en un WAP. De lo contrario, podemos crear un atajo, icono en Textop. Necesitamos un servidor real para aplicar una interfaz de usuario mínima. De lo contrario, no podemos crear el atajo y abrirlo como una interfaz de usuario mínima. Pero te puedo dar una pequeña demostración de cómo se ve una interfaz de usuario mínima. Vamos al editor de código is Studio. Entonces como puedes ver, cómo creamos un nombre de botón abierto mínimo Ventana y en este botón, enlace con esta función, abrimos Ventana personalizada. Y aquí usamos un código Java Script. Creamos una función. W va a abrir una ventana customo Al principio, creamos una ventana en blanco y configuré con 500 píxeles y altura 300 píxeles y la nombramos mi ventana mínima. Entonces en esta ventana, escribimos un contacto. Aquí escribimos un stimaltag H one, e ins estimate tag con type, este es mi HTML personalizado Voy a establecer este archivo. Después de configurar este archivo, si trato de hacer clic en abrir ventana mínima como puedes ver, así es como se ve una ventana mínima. Esta ventana es diferente de la ventana de cuatro pantallas. No tenemos ninguna barra de navegación en él. Como no tenemos la opción de menú de la barra de URL, pero tenemos la opción de minimizar, opción de maximizar y cerrar la barra y el botón de cerrar. Pero el problema es que es abierto por un servidor en vivo. Por eso no puedo aplicarle esta regla mediana. Aquí solo trato de mostrarte cómo se verá una ventana mínima. Esto es para este tutorial. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 145. Tutorial de pseudoclase de CSS a pantalla completa: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CSS, y en este tutorial, vamos a aprender una nueva clase de Posido, que es a pantalla completa Esta es la lista de Posidoclass que está disponible en CSS, y ya cubrí muchas clases de Posidó en nuestros Y en esta lista, CSS agrega una nueva Posidoclass, que se conoce como pantalla completa Ahora veamos, ¿qué es el mini oct? ¿Qué podemos hacer con positoglass de pantalla completa? Supongamos que tenemos un navegador y dentro de este navegador, tenemos un elemento DV. En este Deelement tal vez esté lleno de texto de otra manera imágenes Como puedes notar un botón debajo de él. Ahora, si hago clic en este botón, quiero pantalla completa este elemento profundo Algo así, y para hacerlo a pantalla completa, necesitamos usar poco JavaScript. Ahora, después de hacerlo a pantalla completa, quiero cambiar CSS diminuto. Supongamos que quiero cambiar el color de fondo, de lo contrario, quiero cambiar el color del texto y para hacerlo posible, CSS introduce este Posidoglass a pantalla completa Después de convertir esta inmersión en para pantalla, va a activar esta Posidoclass acuerdo con esta vinculación de Posidocls, va a aplicar estos estilos Empecemos la práctica y veamos cómo podemos aplicar esta posidoCass Como pueden ver lado a lado, abro mi editor de código isal studio y mi navegador usando la extensión if server, y ya creo un documento tM llamado index dot TM Y como puedes ver en nuestra etiqueta corporal, aquí creamos una caja profunda. También dentro de esta profundidad, tenemos un párrafo. Ahí creamos un botón, vamos a pantalla completa, y ya estilo este elemento profundo y nuestra sección de cuerpo en nuestra sección de estilo. Ahora el problema es que nuestro botón no está funcionando. Necesitamos usar JavaScript para eso para que funcione. Si no tienes conocimiento de JavaScript, entonces haz justo lo que estoy haciendo. Quiero hacer esta pantalla completa profunda cuando haga clic en este botón. Voy a usar un evento de evento de JavaScript, algún tipo en tick este. Es malo cada vez que hago clic en este botón. Entonces tenemos que apuntar a esta casilla usando su nombre de ID. Para ello, necesitamos usar document dot get element by ID. Dentro de los versos redondos, dentro de los códigos individuales, voy a escribir el cuadro de nombre de identificación. Después de apuntar a este cuadro, quiero aplicar un nuevo método de Java Screen, que se conoce como pantalla completa. Sumo tipo punto es un método Sum type request full screen, éste. También, necesitamos usar prensas redondas porque es un método y punto y coma para en esta línea Al principio, nos dirigimos a este elemento, el elemento box deep usando su nombre ID. Escribo documento punto obtener elemento por ID. Ahora voy a configurar este archivo. Después de configurar este archivo, si hago clic en este botón, va a convertir este elemento profundo en modo de pantalla completa, algo así. Si quieres salir de esta pantalla completa, entonces simplemente haz clic en la tecla Scape. Ahora somos capaces de aplicar este vidrio posito para pantalla. Quiero cambiar el color de fondo de este elemento profundo. ¿Por qué lo hacemos para girar? Ahora, hagamos este selector. Voy a t primero voy a t box dive tiene tag, box, colon, y necesitamos usar la clase posito para spin Entonces dentro de los carlivorss podemos aplicar las propiedades. Ahora quiero cambiar el color de fondo. Entonces escribe fondo, y quiero que sea verde claro, este color. Además, quiero cambiar el tamaño de la fuente. Tamaño de fuente, quiero que sea 22 pixel. Ahora, fijemos el archivo. Después de configurar este archivo, voy a hacer clic de nuevo en este botón, a pantalla completa. Como puedes ver, ahora, su color de fondo se convierte en color verde, color verde claro. Además, aumenta el tamaño de la fuente. S es clase posito de pantalla completa. Si quieres cotizar esta pantalla completa, solo alaba la clave de Scape. Y a continuación, quiero agregar una etiqueta de encabezado uno en esta caja. Déjame mostrarte algún tipo H uno y dentro de esta etiqueta H one, voy a escribir hola mundo. Voy a volver a guardarlo. decido cuando lo hago para pantalla, quiero cambiar solo el color del párrafo párrafo color del texto. Para eso, necesitamos crear un selector diferente. Déjame mostrarte. Para eso, duplico el primero duplico esta sección, después voy a apuntar solo a este párrafo. Entonces dentro de este cuadro de pantalla completa de Posidoglass, quiero apuntar al párrafo, así que escribo P y luego quiero cambiar el color de la fuente Voy a escribir color y quiero que sea rojo. Voy a establecer este archivo. Después de configurar este archivo, si lo vuelvo a hacer a pantalla completa, ahora puedes ver que cambió solo el color de fuente del párrafo. Yo lo hago rojo. Así es como podemos usar esta Positoclase. Además, puedes usar la misma positoclase con no positopls . Déjame mostrarte. Supongamos que voy a hacer nosotros sección y aquí, voy a usar otra positoclase, no PositoGlas Si box en nada, entonces dentro de las rotondas, voy a mover esta positoclas a Entonces apunto esta etiqueta P incento esta etiqueta de caja, y quiero hacerla. Quiero cambiar el color. Quiero que sea de color verde. Entonces si configuro este archivo, ahora puedes ver, ahora puedes ver el párrafo, tiene el color de la fuente. Lo hace verde porque no activamos el modo de pantalla completa en él, y si lo hago a pantalla completa, va a volverse de color rojo. Si vuelvo a la vieja etapa, nuevo, se vuelve de color verde. Así es como podemos usar esta posidoClass. Podemos usar esta PositoClass con cualquier otra propiedad CSS Espero que ahora te quede claro. Gracias por ver este video. Quédate uno para nuestro próximo tutorial. 146. Tutorial de introducción de Sass: Hola, chicos. Bienvenido de nuevo. En este tutorial, te voy a presentar ¿qué es SAS? ¿Por qué necesitamos usar SAS? ¿Y cómo podemos usar CAS? Nuestra primera pregunta es, ¿qué es SAS? SAS significa hojas de estilo sintácticamente impresionantes. Se trata básicamente de una extensión CSS. Haremos el mismo trabajo en el archivo CAS. Como hacemos en el archivo CSS. De lo contrario, podemos llamarlo preprocesador CSS. Hoy en día, es muy necesario que tengas conocimiento de cualquier preprocesador CSS Hay dos famosos preprocesadores CSS, SAS y menos. Como comparar s, SAS es más popular porque los SS vienen con una característica más avanzada que menos. Si completas este curso, quiero decir si aprendes CS entonces automáticamente, puedes entender menos. Solo necesitas enfrentar poca diferencia de sintaxis, nada más. Ahora la pregunta es, como te dije antes, se trabaja como CSS. Entonces, ¿por qué CS es más popular que CSS? Porque hay algunas razones. Déjame mostrarte. En primer lugar, es muy fácil de manejar. Cuando trabajamos con CSS, crea archivos muy largos. A veces es muy difícil manejar archivos largos. Pero si hablamos de SAS, es muy fácil de administrar. La siguiente razón que lo hizo más popular, aumenta nuestra velocidad de codificación en comparación con CSS normal. Pero es efectivo con cuando se trabaja con proyectos grandes, no con los proyectos pequeños. No es muy útil con proyectos pequeños. Supongamos que desea crear un sitio web de cinco páginas. En ese caso, no es muy útil. Pero si trabajas con un sitio web complejo y de varias páginas, entonces es muy útil. Lo último que lo hizo más popular, que es la compatibilidad entre navegadores. Cuando usas CSS, algunas características no son compatibles con el navegador antiguo. A veces crea algún gran problema, pero no hay problema con SAS por su característica incorporada, es trabajo con cualquier navegador antiguo Supongamos que si trabajas con Internet Explorer siete, de lo contrario, si trabajas con letras versión del navegador Chrome, entonces no puedes ver ninguna diferencia en la salida. Es trabajo de la misma manera que funciona en la versión letras. Ahora veamos cómo podemos usar el archivo CS en nuestro archivo STL. Lo extraño es que no podemos usar el archivo CS en un sml. Sí, es verdad. No podemos usar el archivo CS directamente en Atmel. Incluso el navegador no puede entender el código SAS. El navegador solo puede entender los archivos CSS, no el archivo CS. Entonces por qué necesitamos crear un archivo CS, necesitamos un compilador compilador SAS Compila el archivo CS y lo convierte en archivo CSS. Por lo tanto, necesita indect el archivo CSS en su documento ETL, no en el Pero necesitas escribir tu código en el archivo CAS, no en el archivo CSS. Después compilas el código SAS y lo conviertes en archivo CSS. Ahora la pregunta es, ¿qué es el compilador SAS? En el siguiente video, sabremos qué es el compilador de Cs. Ahora, hablemos de características OSS, y vamos a cubrir estas características en nuestros próximos tutoriales. Nuestra primera característica son las variables. Podemos almacenar valor en variables como lenguaje de programación. Nuestra segunda característica es el anidamiento. Usando el anidamiento, podemos asignar una clase a otra clase. De lo contrario, podemos usar una clase en otro ID. Este es un caso de uso de anidación. Nuestra siguiente característica es parcial y entradas. Podemos crear un archivo cs pequeño y podemos importarlo como módulos. Nuestra cuarta característica son las vixens. Usando mixins, puedes reutilizar tu código varias veces. Nuestra quinta característica es extiende. Supongamos que escribe algún código en una clase, pero quiere reutilizar estos códigos en otra clase. En ese caso, se puede utilizar extiende. Nuestra siguiente característica son los operadores. Operador significa operadores aritméticos. Si necesitas ejecutar algún cálculo, en ese caso, puedes usar estas características como suma, multiplicación, división, etcétera Nuestra siguiente característica son las funciones. Nuestro SAS viene con algunas funciones veladas, y usted puede usar estas funciones Como puedes crear tus propias funciones como lenguaje de programación. Entonces nuestra segunda última característica son las directivas condicionales. Si quieres ejecutar algún trabajo condicional como Is condition, entonces puedes usar esta función, y nuestra última característica es loops. Sé que ya estás familiarizado con JavaScript y otros lenguajes de programación. Entonces no necesito explicar qué son bucles y cuál es el uso de los bucles. Puedes usar cualquier tipo de bucle como four loop, Di loop, while loop, etcétera Todos estos están disponibles en SAS. Ahora hablemos de sintaxis SAS. Básicamente, CSR vino con dos tipos de sintaxis, sintaxis SCSS y sintaxis SASS Estas son básicamente extensiones. SCS SAS. Básicamente, están dentro, pero hay una diferencia menor. Supongamos que tenemos una sintaxis CSS. Y como puede ver, tomamos total tres tipos diferentes de selectores NeBuL Nb AI y Neb Como puedes ver, primero, necesitamos escribir los valores CSS de neBuL. Entonces necesitamos escribir Nb AI valor CSS. Por fin, es necesario escribir los valores CSS de anclaje de Neb. Pero si necesitamos usar el mismo código en la sintaxis SCSS en ese caso, necesitamos escribir así Necesitamos seleccionar el elemento Nab de un tipo. Entonces dentro del alivss necesitamos escribir toda la sintaxis, UL, LI y A. Básicamente, llamamos a este sistema Vamos a conocer más sobre ello en nuestros próximos tutoriales. Pero si escribe la sintaxis de la celda en el código SAS, entonces necesita escribir así. No es necesario usar ningún calivrass ni ningún punto y coma. No es necesario usar ningún punto y coma después de una propiedad. Es bastante similar con el lenguaje de programación Python. Pero para este tutorial, voy a usar la sintaxis SCSS, esta De lo contrario, puede confundirte. Ahora, hablemos de qué tipo de conocimiento necesitas para iniciar su. Para CAS, debes tener conocimientos básicos de STML y debes tener buenos conocimientos de CSS Como te dije antes, en última instancia, archivo CS compilado en un archivo CSS. Por lo que debes tener conocimiento de la sintaxis CSS adecuada. Y si hablo de codditor, puedes usar Para este tutorial, voy a usar código VS. Puedes usar cualquier editor de bacalao. Entonces esto es para este tutorial. En el siguiente tutorial, voy a hablar sobre qué es compilador CAS y qué compilador vamos a utilizar para este Así que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 147. Descarga e instala la compilación de sass: Hola, chicos. Me alegro de verte de vuelta. En este tutorial, vamos a aprender qué es compilador SAS y cómo podemos descargar el compilador SAS, que puede ayudar a compilar nuestro archivo CS en un archivo CSS Como pueden ver en mi navegador, abro el sitio web oficial de SAS, guión SAS lang.com Como puede ver, proporciona alguna introducción básica de SAS. Si tienes tiempo, entonces puedes leerlo. A continuación, aquí puedes ver un nombre de opción Instalar. Simplemente haga clic en. Entonces se redirige a esta página. Si te desplazas un poco hacia abajo, aquí puedes ver a otro método. Aquí puedes ver una lista de compiladores, y aquí puedes ver otro método que puedes instalar tu SAS usando NPM Para este tutorial, no voy a usar ningún paquete de nodos. Me gustaría ir con compilador, y voy a usar un compilador diferente, no este, y nuestro nombre de compilador Como puedes ver, estos son la mayoría de compiladores pagados. Por eso voy a usar un compilador gratuito, que es Koala Solo necesitas buscar el compilador Koala SS en tu navegador, y luego debes dar click sobre este enlace, Este es el sitio web oficial de este compilador. Como puedes ver, Koala es una aplicación GUI para como SAS Compass y CoffeeScript Lo usamos con fines de compilación para estos lenguajes, y sabes que todos estos son lenguajes de preprocesador Básicamente, usando esta aplicación, podemos compilar todos estos lenguajes. Al principio, necesitamos descargar esta aplicación. Para descargar, es necesario hacer clic en este botón verde, Descargar. Como puedes ver, ya empieza nuestra descarga. Y a continuación, necesitas abrir tu carpeta de descargas, y aquí puedes ver la configuración de esta aplicación, configuración de Koala Ahora voy a instalar esta aplicación en mi computadora. El proceso de instalación es muy sencillo, necesario hacer doble clic sobre él. Después de eso, debes hacer clic en siguiente, y luego puedes elegir tu directorio donde quieres instalarlo. Esta es la ubicación predeterminada, simplemente haga clic en siguiente. Como puedes ver, ya instalé esta aplicación, así que no quiero volver a instalarla, pero necesitas completar tu proceso de instalación. Puede tardar dos o tres minutos completar el proceso de instalación, y después de completar el proceso de instalación, se abre automáticamente. Por ahora, voy a cancelarlo. Entonces, después de completar el proceso de instalación, debe hacer clic en el icono de Koala para abrirlo. Sólo en doble clic sobre él. Como puedes ver, la primera vez está totalmente vacía. Y a partir de este punto, puede agregar cualquier archivo SAS o un archivo is. Al principio, voy a saltar a mi editor y crear un archivo CS. Como puedes ver, hay una carpeta Nam Demo, y dentro de esta carpeta Devo, hay otra carpeta Nam CSS Y dentro de esta carpeta CSS, voy a crear un archivo CS. Vamos a crear un nuevo archivo dentro de esta carpeta. Estilo punto SCSS. De lo contrario, también se puede utilizar la sintaxis de SASS. Pero como te dije antes, para este tutorial, voy a usar sintaxis SSS También puedes ver el ícono de SAS en este lugar. Ahora, agreguemos algo de código SAS en este documento. Ya copio algún código SAS y lo voy a pegar aquí. Este código es para fines de demostración, por lo que no es necesario entenderlo. Del siguiente video, voy a hablar de ello. Como puede ver, creamos nuestro archivo CS con éxito. Ahora, necesitamos crear un archivo CSS en la misma carpeta con el mismo nombre. Voy a crear un archivo CSS en esta carpeta, estilo punto CSS. Eso es. Y tenemos que mantener este archivo vacío. No necesitamos escribir ningún código CSS en este archivo. Tenemos que dejarlo en blanco, y ahora necesitamos abrir nuestro KoalaOptare Voy a abrir nuestro KoalaOptare. Entonces como pueden ver, lado a lado, abro mi Qarafopter y mi Y aquí se pueden ver dos archivos diferentes como archivo y un archivo CSS. Y ahora necesitamos mover esta carpeta CSS en esta aplicación. Simplemente voy a arrastrar esta carpeta y colocarla aquí. Esto es. Aquí se puede ver automáticamente pico todo el archivo CSS y los archivos CS. Ahora voy a volver a nuestro editor de código y voy a hacer algunos cambios en nuestro archivo CS. Aquí puedes ver en mi editor, abro mi archivo CS. Con eso, también abro mi archivo CSS. Si te muestro mi archivo CSS, como puedes ver, ahora está totalmente vacío. Ahora voy a volver al archivo CS y voy a configurar este archivo, control. Entonces si configuro este archivo y te muestro mi archivo CSS, aquí puedes ver el código CSS adecuado. Así que esta aplicación Kana compila el código SAS y lo convierte en un código CSS Aquí puedes ver con la etiqueta Nap, selecciona UltaGo pero en nuestro archivo CS, dentro de la etiqueta Nap, usamos etiqueta UL Como puedes ver en nuestro archivo CS, usamos Napkword una vez Pero si te muestro archivo CSS, aquí puedes verlo usó etiqueta Nap tres veces con etiqueta UL con etiqueta LI con etiqueta ANCA. Ahora hagamos algunos cambios en nuestro archivo CS y veamos qué pasó. Entonces aquí quiero aumentar UL paddy 20 pixel, tipo verano, 20 pixel Si configuro este archivo y te muestro mi archivo CSS, aquí puedes ver que nuestros cambios se reflejan correctamente en el archivo CSS. Solo necesitas recordar que no necesitas cambiar nada en tu archivo CSS. La mejor opción es cerrar su archivo CSS y luego simplemente trabajar con el archivo CS. Espero que ahora te quede claro cómo funcionan los compiladores CS. Así que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 148. Tutorial de variables de Sass: Hola, chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender variables SAS. Pero al principio, intentemos entender qué son las variables y por qué deberíamos usar variables. Aquí puedes ver que creamos un selector de body tag. Dentro de este selector, establecemos el color de fondo, rojo y la familia de fuentes aéreas. Con eso, voy a tomar otros dos selectores H un selector y Spenselector Ahora bien, si te das cuenta, puedes ver que hay algo común. Son colores, color rojo. Para el cuerpo, uso el color de fondo rojo, y para cada etiqueta, uso el color de fuente rojo, y también uso el mismo color para la etiqueta span. Como puedes ver, el rojo es el color común. Supongamos que hemos usado el mismo color en diez lugares. Y ahora necesitamos cambiar el color. Entonces tenemos que ir diez lugares para cambiar el color, y lleva mucho tiempo. Para ello, sus introducen variables. En las variables, tomamos nombre por un valor. En nuestro caso, color rojo, y nuestro nombre de variable es el color primario del guión. Y debes recordar o el nombre de la variable, necesitas usar signo de dólar. Al principio, necesitamos tomar un nombre de variable, luego necesitamos almacenar valor en esta variable. A continuación, necesitamos deprimir el nombre del color con este nombre de variable El principal beneficio al usar la variable es cuando necesitamos cambiar el color primario. Supongamos que quiero cambiar el color primario rojo a azul. Entonces solo necesitamos hacer cambios en las variables, no en todos los selectores No necesitamos escribir nombre de color azul en los lugares. Solo necesitas hacer cambios en la variable. Esta característica también se introduce en CSS, pero los navegadores antiguos no admiten la función CSS. Pero SAS podría. Sin perder el tiempo, comencemos la práctica y veamos cómo funcionan las variables en SAS. Aquí puedes ver lado a lado, abro mi Visual Studio Ceaor y mi navegador y ya puedes ver, creo un layout básico de página web Aquí puedes ver el encabezado, un estiércol, una barra lateral, y también puedes ver la parte de contenido y un pie de página. Si notas puedes ver, hay un color común en esta página web encabezado y pie de página. Si pongo el cursor sobre estos enlaces, se puede ver el mismo color, fondo de esta etiqueta de anclaje Además si pongo el cursor sobre mis artículos de sideware, se puede ver el mismo color color marrón No solo eso, si selecciono todo el contenido, puedes ver el mismo color de fondo detrás del contenido. Ahora les voy a mostrar cómo podemos usar variables. Entonces como puedes ver, nuestro color primario es el marrón, por lo que necesitamos encontrar el color marrón. Aquí puedes ver el nombre del color marrón. Usamos este color en Anchor hover, encabezado, sección de pie de página, mucho de esto Ahora quiero reemplazar este valor de color con la extremidad variable. Para eso, necesitamos crear una variable. Entonces aquí, voy a crear una variable. Al principio, necesitamos usar signo de dólar, dólar y nuestra extremidad variable es el color principal. Color mínimo. Voy a usar el color marrón. Ahora voy a sustituir los nombres de color por el nombre de la variable, color principal. Entonces primero, voy a sustituir la barra superior Anchor Hover selector, color o nombre de variable También lo voy a sustituir en selector de cabecera, color principal. Después en nuestro elemento de lista de menú. A continuación, quiero reemplazarlo en nuestra sección de contenido. Y también voy a reemplazarlo en nuestra barra lateral. A continuación, voy a reemplazarlo en nuestra sección de pie de página. Entonces ya está hecho. Si configuro este archivo y vuelvo a cargar mi navegador, y se puede ver que no hay cambios Se puede ver el mismo color de encabezado, mismo color de pie de página, y si ober mi más lindo en mis enlaces de menú, se puede ver el color y si ober mi más lindo en mis enlaces de menú, de fondo . También es marrón. Reemplacé con éxito nuestro valor de color con una variable. Ahora, quiero cambiar el color principal de este sitio web, marrón a azul. Cuando Hbar mi cursor en los elementos del menú, quiero azul brdrown Básicamente, quiero decir que quiero cambiar el color principal, del marrón al azul. Voy a escribir pelo azul. Si configuro este archivo y vuelvo a cargar mi navegador, puedes ver el resultado Puedes ver el color azul en la sección de encabezado, sección pie de página, sección de menú y sección de barra lateral también. Ahora no necesitamos cambiar el color varias veces porque ahora usamos variable. Ahora puedes poner cualquier color por una vez, y va a reflejarlo todas las páginas. Este es el beneficio de usar variables. Solo necesitas usar el nombre de la variable como valor. Ahora si te muestro mi archivo CSS, aquí puedes ver que no hay variables. Apenas se pueden ver los nombres de los colores, fondo azul. No es sólo trabajar con colores. Se puede poner cualquier tipo de valor en variable. Supongamos que quiero cambiar el estilo de fuente en toda la página web. En ese caso, podemos usar variable. Voy a crear otra variable, y nuestro nombre de variable es fuente principal, Dollar, fuente principal. Colón. Por ahora, voy a usar aerial y ahora voy a reemplazar todo el valor de la fuente con esta variable. Voy a reemplazar la fuente Aerial con esta variable, fuente principal. Y también necesitamos reemplazar en selector de cabecera, fuente principal. Por fin, voy a reemplazarlo en nuestro encabezado de contenido. Fuente Min. Si configuro este archivo y vuelvo a cargar mi navegador, como puede ver, no hay cambios. Funcionó perfectamente. Se puede ver que imprime una fuente real en toda la página web. Ahora bien, si necesitamos cambiar la familia de fuentes, entonces tenemos que cambiarla varias veces. Ahora, cambiemos la familia de fuentes por toda la página web, y voy a usar qué que una fuente. Si configuro este archivo y vuelvo a cargar mi navegador, puedes ver el estilo de fuente Como puedes ver, reemplaza la fuente Areal con VardanaFont. Ahora está claro para ti, ¿cuál es el uskase de variable en sas No sólo nos ahorra tiempo, también mejora nuestra productividad. Podemos cambiar miles de lugares cambiando un solo lugar. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 149. Tutorial de nido de Sass: Hola, chicos. Bienvenido de nuevo. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS y en este tutorial, vamos a aprender SAS nesting Aquí puedes ver tres selectores diferentes. Como pueden ver en nuestro primer selector, utilizo etiqueta Nap con etiqueta UL, y en nuestro segundo selector, uso naptag con etiqueta Ali, y en nuestro último selector, usamos etiqueta Nap con etiqueta ancla ¿Qué es lo común entre estos tres? Que es la etiqueta Nap. Como puede ver, si usamos la sintaxis SS, entonces necesitamos usar la etiqueta Nap tres veces. Pero si escribimos el mismo código en SAS, entonces necesitamos escribir así y llamamos a este método nesting Aquí puedes ver, al principio, iniciamos la etiqueta Nap, luego dentro del Caliss diseñamos todos estos selectores Seleccionará nuestro selector Ali selector de anclaje. Si usamos anidamiento, entonces no necesitamos escribir la palabra clave dep tres veces y dentro de los Liverss necesitamos seleccionar todos los demás selectores Que se relaciona con naptag. Pero cuando configuro el archivo CS, va a devolver este tipo de código CSS. Va a reducir algún código de alineación, pero va a devolver el mismo resultado Por último, sin perder el tiempo, estudiemos lo práctico y veamos cómo funciona. Entonces aquí se puede ver lado a lado, abro mi creador de tornillos visuales y mi navegador y ya creo un layout web básico. Y en mi visual studio Cdiator puedes ver IOPent 35, nuestro documento de estimación nuestro archivo CS y nuestro archivo CSS Sabes, utilizo este layout en nuestro tutorial anterior, puedes ver las variables que creo en nuestro tutorial anterior. Pero en este trato de estudio, vamos a aprender cómo podemos usar el anidamiento Pero al principio, necesitamos encontrar la posición donde podamos usar el anidamiento Voy a desplazarme un poco hacia abajo. Aquí puedes ver el selector de Br superior. Como puede ver, después del selector superior de Br, utilizamos la barra superior con UL, UL Li, etiqueta de anclaje y Hover Esta es la rectitud para usar el método de anidación. Al principio, voy a copiar el CSS UL. Copia, y luego lo voy a pegar dentro del selector Tobar porque tobr es la etiqueta común para Ahora bien, este selector no es necesario, así que lo voy a quitar. A continuación, se puede ver dentro de la etiqueta UL, hay etiqueta LI. Como pueden ver, ya uso la etiqueta UL dentro de la sección de la barra superior. Ahora voy a copiar solo el selector de IA de esta posición a esta posición. Copia. Voy a pegarlo dentro de la etiqueta UL. Al principio, nuestro selector tobr y dentro del selector tobr, pongo selector UL, y luego dentro del selector UL, pongo selector AI Ahora no necesito este selector de tesis, así que voy a quitar. Y ahora puedes ver dentro del selector Tobar, tenemos etiqueta de anclaje Ahora voy a copiar solo el selector de etiquetas de anclaje, y lo voy a pegar fuera de la etiqueta UL. Voy a quitar este código. Ya no necesito esto. Ahora puedes ver un selector de Hobart Es un selector Hober de anclaje, no el selector TBarhber no el selector TBarhber Voy a copiar este selector de Hobart, y lo voy a usar dentro la etiqueta nga en esa posición. Voy a quitar esta. Y ahora quiero decirte algo nuevo. Como puedes ver, dentro de la etiqueta ancla, creamos la etiqueta Anchor Hobert Por lo que no es necesario volver a usar la etiqueta de anclaje para que podamos quitar la etiqueta Anca. Aquí podemos usar signo de persona, algo así. Es decir que usamos este efecto Her con la etiqueta padre. Se va a crear la etiqueta Her de la etiqueta de su padre. Si configuro este archivo y refresco mi navegador, aquí puedes ver que no hay cambios. Es el trabajo tal como es. A este método lo llamamos anidación. De igual manera, vamos a seguir el mismo proceso para la sección de encabezado. Voy a copiar la etiqueta H one y la voy a pegar dentro de la etiqueta encabezada. Voy a quitar esta. Como voy a seguir el mismo proceso para la sección de menú. Al principio, voy a copiar la parte UL de este menú y pegarla dentro de la sección de menú, voy a quitar la vieja. Y luego voy a copiar la parte AI de este menú y la voy a pegar dentro de la sección de menú. Y luego voy a quitar esta. Nuestro siguiente seleccionado es el selector de anclaje, que está dentro del selector LI. Entonces voy a copiar la etiqueta ancla, y la voy a pegar dentro de la etiqueta LI. Y luego voy a quitar esta. Y nuestro siguiente seleccionado es la etiqueta Anchor Hobart. Entonces voy a copiar este selector. Entonces como pueden ver, es la etiqueta ancla Hobart, así que tenemos que pegarla dentro de la etiqueta de anclaje Y luego tenemos que quitar la etiqueta de aire, y podemos usar persona aquí. Por ahora, esta es inútil, así que quiero quitarla. Así que básicamente, es crear nuestro código CSS muy manejable. Si configuro este archivo y vuelvo a cargar mi navegador, como puede ver, no hay cambios Y ahora no necesitamos usar este selector de menú varias veces. Y a continuación, voy a seguir el proceso de anidación para nuestra sección de contenido Entonces al principio, voy a copiar el selector s dos. Entonces lo voy a pegar dentro de la sección de contenido, voy a quitar esta. A continuación, se puede ver un pseudoselector llamado selección. Puedes ver que usamos esta selección toda la sección de contenido, voy a copiar solo el pseudo selector Voy a pegarlo dentro de la sección de contenido, no en la sección ST. Y luego lo voy a quitar. Como saben, para pseudo selector, necesitamos usar signo de persona, así que voy a escribir persona aquí Si guardo este archivo y vuelvo a cargar mi navegador, puedes ver que no hay cambios Espero que ahora te quede claro qué es anidación y cómo podemos usar la anidación Gracias por ver este video. Estén atentos para nuestro próximo estudio. 150. Tutorial de parciales e importaciones de Sass: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS, y en este tutorial, vamos a aprender qué es parcial e importaciones. Entonces, al principio, centrémonos en lo parcial. Parcial significa partes. Quiero decir partes de SS bien. Supongamos que tenemos un archivo CS y nuestro archivo es el archivo CS de punto principal, y este es nuestro archivo principal. Y como sabes, si creamos un sitio web, nuestro sitio web dividido por encabezado, contenido, sideware y footer, a veces necesitamos crear diferentes diseños para diferentes páginas Pero el problema es, ¿cuando escribimos todo el código en un solo archivo? Crea nuestro archivo muy pesado y desordenado. Necesitamos desplazarnos hacia arriba y hacia abajo en nuestra página varias veces. Entonces, para resolver este problema, separamos nuestro diseño. Para encabezado, creamos archivo de encabezado para contenido, creamos un archivo diferente para barra lateral y para pie de página. Si trabajamos con variables, también creamos otro archivo para variables. Básicamente, es organizar nuestro código y reducir la torpeza Supongamos que completamos el estilo de sección de encabezado, entonces necesitamos abrirlo de nuevo. Podemos abrir la parte especificada. ¿Por qué necesitamos cambiar? Este es el concepto de parcial. Ahora hablemos de importaciones. Después de crear las diferentes partes, necesitamos ingresar estas partes en nuestro archivo principal. Para eso, necesitamos usar una palabra clave especial, input. En la entrada de tasa, necesitamos escribir el encabezado del nombre del archivo. Una cosa importante que debes recordar. Es necesario crear este mismo archivo de extensión. Quiero decir archivo CS, no archivo CSS. No se puede introducir el archivo CSS en el archivo principal. Obviamente, es necesario crear el archivo CS. Y otra cosa que debes recordar cuando creas tu archivo separado, necesitas usar undersco antes Quiero decir underscohader punto SCSS. Nuestro signo de subrayado reconoce que este no es el archivo principal, por lo que nuestro compilador CS identifica con éxito este es un archivo parcial y necesitamos incluirlo en nuestro archivo principal Por eso no necesitamos un archivo CSS separado para archivos parciales. Si usa la sintaxis SASS, entonces para su archivo parcial, también, necesita usar la sintaxis SASS Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usar parciales y entradas. Como pueden ver, ya abro mi aplicación KOA, y abro nuestra carpeta CSS en esta aplicación. Con eso, también abro el editor de código de Visual Studio. Como puedes ver, este es nuestro Min CSF, style dot Sss. Y ahora voy a dividir este archivo con pas. Al principio, voy a comenzar con estas variables. Quiero crear un archivo CS separado para nuestras variables. Al principio, voy a crear un nuevo archivo en nuestra carpeta CSS. Y nuestro nombre de archivo son variables. Como te dije antes, para crear un archivo parcial, necesitamos usar variables underscosge undersco Punto, nuestra extensión es C es es, entonces voy a presionar Enter. Como pueden ver, soló nuestro archivo, y luego voy a cortar mis variables de este archivo, y lo voy a pegar dentro del archivo de variables Y lo voy a quitar de nuestro archivo principal. Entonces primero, voy a guardar este archivo. Entonces necesitamos incluir este archivo en nuestro archivo de estilo. Para eso, primero, necesitamos escribir en el letrero rojo, y luego tenemos que escribir Importar. Importar dentro de los códigos dobles. Necesitamos escribir el nombre del archivo, pero no necesitamos usar UnderscoSign, necesitamos escribir variables No es necesario mencionar la extensión de archivo. Nuestro compilador es lo suficientemente inteligente como para entender la extensión del archivo, y luego necesitas usar punto y coma para finalizar esta línea A continuación, voy a crear un nuevo archivo para nuestra sección de encabezado. Entonces voy a escribir undersco header. Ss entonces voy a presionar Enter. Como pueden ver, creó un nuevo archivo, y ahora quiero separar nuestra sección de encabezado. Para eso, voy a seleccionar de la barra superior. Desde la sección superior de la barra, quiero copiar nuestro encabezado, también el menú. Voy a cortar, y voy a pegarlo dentro del archivo de cabecera. Eso es. Para nuestra parte de encabezado, seleccionamos la sección de encabezado Tobb, también la sección de menú Y luego necesitamos importar el archivo en nuestro archivo principal, que es style dot Sss Voy a escribir en el rojo, Importar luego dentro del doble curso, necesitamos escribir el nombre del archivo, que es encabezado, luego semiconm dos en esta línea Ahora, para nuestra sección de contenido, voy a crear otro archivo. Dentro de la carpeta CSS, voy a crear undersco content SCS, y después voy a presionar Enter Como puedes ver, crea un nuevo archivo. Después vuelvo a mi archivo SSS de estilo, y voy a cortar esta parte de contenido Y lo voy a pegar dentro del archivo content dot SCSS Voy a configurar este archivo también. De manera similar, necesitamos ingresar este archivo en nuestro archivo principal. Entonces voy a duplicar esta línea y aquí voy a escribir contener. Y a continuación, necesitamos crear un archivo para nuestra sección de guerras secundarias. Voy a crear un nuevo archivo en nuestra carpeta CSS. Underscoe barra lateral Sss. Como puedes ver, creamos un nuevo archivo para nuestra barra lateral y luego necesitamos cortar la sección sidewar del archivo CSS de estilo Voy a cortar esta sección de lados de este archivo. Y voy a pegarlo dentro de este archivo Sidewd. Y luego voy a poner este archivo. Ahora necesitamos ingresar este archivo en nuestro archivo de estilo. Voy a comenzar esta línea, y aquí voy a escribir por fin tarjeta lateral, voy a crear un nuevo archivo para nuestra sección de pie Entonces dentro de esta carpeta ***, una vez más, voy a crear un nuevo archivo, UnderScoefter, En este archivo, quiero darle estilo a nuestra parte de pie de página. Voy a cortar esta parte la pego dentro de la sección de pie de página. Entonces voy a configurar este archivo. Como voy a volver a nuestro archivo principal, archivo CS estilo. Ahora necesito ingresar la sección de pie de página en nuestro archivo principal. Así que duplica esta línea y aquí voy a escribir footer. Voy a establecer este archivo. Por fin, se puede ver la sección de consulta de medios. Lo usamos con fines responsivos. Si quieres separar esta parte, sí, puedes. Vamos a crear otro archivo para la sección media queries. Dentro de esta carpeta ***, voy a crear otra carpeta. Voy a crear un archivo undersco media. Dot SCs entonces voy a presionar Enter. Entonces voy a cortar la sección media query y voy a pegarla dentro de este archivo multimedia. Voy a fijar esta . Como saben, necesitamos ingresar este archivo en nuestro archivo principal. Voy a duplicar esta línea aquí voy a escribir nuestra línea fina, que es media. Y voy a presionar Control S para configurar este archivo. Usando técnica parcial, separamos con éxito nuestro diseño web. Separamos nuestra sección de encabezado, sección contenido, sección de barra lateral, sección de pie de página, también las consultas de medios y las variables. Es la torpeza de radios de nuestro sitio web. Si abro mi archivo SML, déjame mostrarte. Como puede ver, este es nuestro diseño TML. Vamos a recargar el archivo. Como puede ver, no hay cambios. Es L como es. Ahora suponga que desea cambiar el color de fondo de encabezado y pie de página. En ese caso, es necesario abrir el archivo de variables. Y a partir de aquí, puedes cambiar tu color principal. Quiero un poco de color verde, algo así. Si me siento esta pila y luego vuelvo al navegador y vuelvo a cargar mi navegador, aquí puedes ver el resultado Cambió nuestro color principal. Si te muestro mi archivo CSS, déjame mostrarte estilo punto CSS. Aquí puedes verlo seguir la secuencia de nuestros archivos de entrada. Al principio Tpbard, luego viene encabezado, luego viene contenido, y luego viene barra lateral Atlas pie de página, y luego nuestra consulta de medios Después de la consulta de medios, como puedes ver, nuestro cuerpo seleccionado y nuestro rapero seleccionado. Si te muestro el archivo SAS de estilo, puedes seguir la secuencia. Primero, nuestras variables, encabezado contiene barra lateral pie de página media query, y como puedes ver, nuestra sección de cuerpo y nuestra sección de rapero. Espero ahora quede claro para ustedes lo que es parcial y las importaciones. Así que gracias por ver este video. Estén atentos para nuestro próximo tutorial. 151. Tutorial de Sass Mixins: Hola chicos, me alegro de verles de vuelta. En este tutorial, vamos a aprender una nueva característica de Vlated SAS En este tutorial, vamos a aprender vixens es una característica muy útil Supongamos que tenemos dos clases diferentes, clase uno y la clase dos. Como pueden ver, utilizo propiedad de radio botter, ambas clases Para la clase uno, uso radio de boder de cinco píxeles, y para la clase dos, uso radio de borde de diez píxeles Para que puedan ver, utilizo propiedad similar tanto las clases. Su propiedad es la misma, pero su valor es diferente. Para nuestro viejo rowser Chrome utilizamos radio Ber con webkit, y para nuestros viejos brrowsers Mozilla usamos Entonces es un método CSS simple. Pero el problema es si necesitamos usar las propiedades similares diez veces, ¿entonces qué? Entonces necesitamos escribir 30 líneas de código. Para resolver este problema, sus introducen mezclas. Las mezclas básicamente funcionan como funciones. Si tenías conocimiento de JavaScript, entonces ya estás familiarizado con las funciones. Permítanme aclarar este concepto. Te voy a mostrar un ejemplo. Si quieres crear mezclas en SAS, al principio, necesitas escribir add mixins, y luego necesitas tomar mix en nombre Puedes tomar cualquier nombre. En nuestro caso, radio BD. Solo debes recordar, no proporciones ningún espacio en este nombre, y luego necesitas tomar carreras redondas y es completamente opcional. Si quieres tomar algún parámetro, entonces necesitas pasar el nombre de la variable. Como puede ver, en nuestro caso, valor, entonces necesitamos usar esta propiedad tres dentro de esta mezcla. También se puede pasar el parámetro con esta propiedad. De esta manera, podemos crear nuestra función de mezcla. Ahora la pregunta es ¿cómo podemos usar esta función de mezcla en nuestro código CSS? Déjame mostrarte. Para eso, voy a usar la clase uno. Si quiero usar esta mezcla, necesitamos escribir a la tasa incluir, entonces nuestro nombre de mezcla radio de borde. Dentro del paréntesis, necesitamos pasar el valor del radio del borde como función similar Cuando llamo a esta función de mezcla, entonces necesitamos pasar un valor como parámetro, y luego podemos usar este parámetro como un valor, valor para tres propiedades diferentes. Sin perder el tiempo, comencemos la práctica y tratemos de entender cómo podemos usar los mixins Como pueden ver, lado a lado, abro mi estudio visual Corretor y mi navegador y ya creo un nuevo documento DML Y aquí puedes ver en mi navegador, ya creamos tres div diferentes para este ejemplo, y además establecemos tres ID diferentes para este tres Div. Para nuestro primer dif nos fijamos primero. Para nuestro segundo, establecemos segundo, y para nuestro último si establecemos tercero, y también vinculo nuestro archivo CSS con este documento. Así que saltemos al archivo CS e intentemos explorar cómo funciona la mezcla. Al principio, quiero establecer ideas de frontera todos estos tres D. Para eso, voy a usar el método de mezcla. Vamos a crear una mezcla. Añadir la velocidad de mezcla. Entonces después de mezclar Qard, necesitamos tomar el nombre de mezcla y nuestro nombre de mezcla es BD radius Y entonces necesitamos usar paréntesis para nuestros parámetros. Es bastante similar con la función JavaScript. Entonces dentro del Kaliss voy a establecer nuestra primera propiedad y nuestro primer nombre de propiedad es dash web keith Ber radio Por ahora, voy a establecer Radio de barra por píxel, y voy a duplicar esta línea para escribir. Al principio, uso prefijo para nuestro antiguo navegador Crone y después voy a usar prefijo para el navegador Mozilla, así que voy a escribir Msare Y por fin, voy a usar el radio exacto del borde de la propiedad. Ahora nuestra mezcla está lista para usar. Recuerda, no usamos ningún parámetro en esta función de mezcla porque por ahora, no quiero pasar ningún valor como parámetro. Al principio, voy a usar esta función de mezcla en nuestro primer tap. Para eso, primero, necesitamos escribir Incluir palabra clave a la tasa, incluir. Después de la palabra clave Include, necesitamos escribir el nombre de mezcla, y nuestro nombre de mezcla es el radio VD. Después paréntesis y subagin para terminar esta línea. Recuerda, si quieres llamar a esta función mix in, siempre, necesitas usar add the red include keyword. Ahora bien, si configuro este archivo y vuelvo a cargar mi navegador, puedes ver el resultado Se puede ver el radio fronterizo en nuestro primer salto. Y ahora voy a llamar a la misma función de mezcla en nuestra segunda y tercera profundidad. Si configuro este archivo y reescribí mi navegador, se puede ver el mismo resultado, todos estos tres deeps Ahora quiero tres radios fronterizas diferentes para estas tres profundas y ahora quiero tres radios boder diferentes para estas tres deeps Supongamos que para nuestro primer af, quiero un radio de borde de cinco píxeles. Para nuestro segundo sordo, quiero un radio de bóer de diez píxeles, y para nuestro tercero, quiero un radio de borde de 15 píxeles En ese caso, necesitamos usar parámetro en nuestra función de mezcla. Necesitamos establecer un nombre de variable como parámetro. Para eso, necesitamos usar signo de dólar, dólar y nuestro nombre de variable es valor. Entonces voy a copiar este valor, y lo voy a usar como valor de propiedad. Algo así. Ahora necesitamos pasar el valor cuando llamamos a la función de mezcla. Para nuestro primero, voy a decir cinco píxeles. De igual manera, para nuestro segundo DV, quiero usar diez píxeles de radio boer, diez píxeles Y para nuestro último DV, quiero usar radio de boder de 15 Pixel. Si configuro este archivo y vuelvo a cargar mi navegador, puedes ver el resultado Entonces, como puede ver, configuramos con éxito tres radios fronterizas diferentes para estas tres escrituras. Este es el caso de uso de la función de mezcla en SAS. Espero que ahora te quede claro. Así que gracias por ver este video, estad atentos para nuestro próximo estudio. 152. Tutorial de Sass Extend: Hola, chicos. Me alegro de verte de vuelta. Este es otro tutorial relacionado con SAS. Y en este tutorial, vas a aprender una característica muy útil, que es la extensión. Supongamos que tenemos una clase llamada clase uno, y como puede ver, usamos cuatro propiedades en esta clase, color, tamaño de fuente, relleno y altura de línea. Con eso, tenemos otra clase, y el nombre de nuestra clase es la clase dos. Como puedes ver, en nuestra clase uno, usamos el color rojo, y en nuestra clase dos, usamos el color naranja. Aquí se puede ver sin propiedad de color, cada propiedad y su valor son iguales. Su tamaño de fuente, su relleno y su pelusa. Todo es igual. Ahora supongamos que tenemos otra clase, la clase tres. De igual manera, sin color, todas las propiedades son iguales, su tamaño de fuente, su relleno y su altura de línea. Entonces repetimos su proberidad y su valor al tiempo. Quiero decir, tenemos que teclear seis líneas extra para eso. Entonces, para manejar este tipo de situaciones, CS introdujo un nuevo método, que existe. ¿Por qué necesitamos trabajar con el archivo CS al principio, necesitamos crear más uno tal como es. Pero cuando creamos nuestra clase dos, al principio, necesitamos anular la propiedad de color porque no quiero repetir este color rojo para este DV. Por eso manifiesto este color. A continuación, necesitas usar la palabra clave extend, en la extensión roja, y quiero extender esta clase con la propiedad class one. Por eso tecleo la clase uno. Puedes extender con ID de clase, lo que quieras. Del mismo modo, para nuestra tercera clase, solo necesitamos anular el color, color verde, y luego tenemos que seguir el proceso similar. Agrega la extensión roja o la clase uno. Es decir, quiero usar una propiedad de clase uno en la clase tres. Entonces, sin perder el tiempo, comencemos la práctica y tratemos de entender cómo podemos usar el método extend. Como pueden ver, lado a lado, abro mi coeator visual studio y mi navegador usando la extensión if server, y también abro nuestra aplicación Koala Como puedes ver, tenemos que contar tres profundidades diferentes con su diferente color de fondo y su diferente tamaño. Para este tres Deep utilizamos tres ID diferentes, primero segundo y tercero. Este es nuestro archivo CSS, estilo punto CSS. Si te muestro mi archivo CSS, aquí puedes ver para nuestro primer dip, nuestro color de fondo es gris y con este 300 pixel. De igual manera, para nuestra segunda inmersión, utilizamos fondo de color naranja y con 400 píxeles. Y para nuestra tercera inmersión utilizamos color de fondo rojo y con 600 píxeles. Sin estas dos propiedades, cada propiedad y su variar es la misma. Se puede notar relleno 15 píxeles radio de borde diez píxeles, familia de fuentes aérea, tamaño de fuente 20 píxeles. Si seguimos este método regular, entonces necesitamos escribir ocho líneas extra. Entonces, para resolver este tipo de problemas, SAS introduce extend. Volvamos al archivo CS. No vamos a cambiar nada en nuestro primer si, pero en nuestro segundo Dave, voy a usar el método extend. Déjame mostrarte. Al principio, voy a eliminar esta línea de cuatro, relleno de radio boder y familia de fuentes y lados de fuente Entonces voy a usar la palabra clave, en el at extend. Y ahora quiero extender este segundo ID con el primer ID. Aquí, tenemos que escribir tiene etiqueta primero. Después semiconm para terminar esta línea. Si configuro este archivo, aquí puedes ver que no hay cambios. Funcionó a la perfección. A continuación, voy a seguir este proceso similar para nuestro tercer profundo. Voy a quitar las propiedades, y voy a extender en el rojo, extender y quiero extender nuestra tercera e con nuestra primera D tiene etiqueta primero. Después semicron para terminar esta línea. Si configuro este archivo, puedes ver no hay cambios en nuestro navegador. Por lo que extendemos con éxito nuestro primer ID. Pero si te muestro mi archivo CSS, déjame mostrarte cómo puedes verlo crea una combinación de selector de ID, primero, segundo y tercero, también puedes ver dos IDs diferentes segundo y tercero. Solo se usa para sobrescribir color de fondo y profundo con 400 píxeles, 600 píxeles, fondo rojo y fondo naranja Como puedes ver, es muy útil. Si notas, puedes ver que es bastante similar con las mezclas, pero hay una diferencia entre mezclas y extend. ¿Cuál es la diferencia? La primera diferencia es que podemos pasar un valor como parámetro en mixins, pero no podemos pasar el valor como parámetro en extension La segunda diferencia es que podemos usar selector combinado en extend. Pero dentro de los mixins, no podemos usar selector combinado, y ahora voy a mostrarte otro método, cómo podemos usar extend Entonces ya conoces el proceso, cómo podemos usar el extender. Al principio, necesitamos crear una clase, y luego usando esta clase, podemos extender esta clase con otra clase y ya conoces el proceso. Supongamos que ahora decide que no quiere mostrar la clase uno en su archivo CSS, pero quiere usar su propiedad en la clase dos y la clase tres. En ese caso, es necesario usar signo de porcentaje antes del nombre de la clase. Ahora la clase uno es reutilizable, similar a mix ins. A esto lo llamamos Hoolder de BathodPlace. Ahora el marcador de posición, no va a reflejar en su archivo CSS, si desea extender su propiedad con este marcador de posición, entonces necesita usar en la ayuda extender, signo de porcentaje y el nombre de la clase Solo necesitas recordar el marcador y extender el trabajo juntos. Entonces déjame mostrarte la demostración real. Una vez más, vuelvo a mi coordinador de estudio visual. Entonces primero, voy a crear un marcador de posición, así que voy a quitar este hastag luego voy a usar Ahora transformamos nuestro primer ID en un marcador de posición, y voy a usar este marcador de posición en nuestro segundo dip Y si quieres usar marcador de posición con extend, entonces necesitas usar percentisine Ahora nuestro segundo div se extiende con este marcador de posición. Además, quiero extender nuestro tercer dip con este marcador Voy a usar percentisg aquí . No configuro este archivo. Si configuro este archivo, primero, va a destruir estas propiedades profundas porque transformamos nuestro primer ID en un marcador Como te dije antes, nuestro marcador no va a reflejarse en nuestro archivo CSS Si configuro este archivo, puedes ver el resultado. Primero, destruye nuestra primera profundidad, pero mantuvo la propiedad anterior para segunda inmersión y tercera inmersión. Si te muestro mi archivo CSS, aquí puedes ver el resultado. Aquí puedes ver que hay aquellos seleccionados nombre IDF. Solo se pueden ver dos selectores, ID segundo y ID tercero. Primero, crea una combinación usando segundo ID y tercer ID, y luego crea un segundo selector de ID y un tercer selector de ID para sobrescribir el color de fondo y el ancho Usando placeholder, podemos crear un código reutilizable, y podemos usarlo varias veces Espero que ahora te quede claro qué es la extensión y el marcador En el siguiente tutorial, vamos a aprender operadores SAS. Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 153. Tutorial de operadores de Sass: Hola, chicos. Me alegro de verte de vuelta. Este es otro tutorial relacionado con CS, y en este tutorial, vamos a aprender operadores CS. Aquí puedes ver, tenemos un total de cinco operadores diferentes. Nuestro primer nombre de operador es operador de igualdad. Luego vienen operador relacional, operador numérico, operador de cadena y operador wllian Y en este tutorial, vamos a aprender operador de igualdad, operador relacional y operador wollan Pero al principio, tratemos de entender qué son los operadores de meningum Al principio, voy a hablar de operador de igualdad y operador relacional Como puede ver en nuestro operador de igualdad, tenemos dos tipos de operador, doble igual a operador y no igual a operador. En igual a operador, necesitamos usar igual seno dos veces. Pero en no igual a operador, primero, necesitamos usar la explicación seno, luego necesitamos usar seno igual. Es decir, no igual. Usando igual a operador, podemos comparar valores. Supongamos que nuestro primer valor es cinco, cinco igual a cinco, entonces va a devolver verdadero porque ambos el valor son iguales. De igual manera, si uso no igual a seno, también va a devolver valor verdadero o falso según la comparación. Este es el uso del operador de igualdad. Vamos a conocer más al respecto en nuestras prácticas. Por otro lado, contamos con operadores relacionales. Y viene con cuatro operadores diferentes. Menor que operador, mayor que operador, menor que igual a operador, mayor que igual a operador. Todo esto operador de igualdad y operador relacional uso con condición IP en SAS lo llamamos función I En nuestros próximos tutoriales, vamos a conocerlo. En este tutorial, vamos a aprender, ¿cómo podemos usar condiciones con eso? Sin perder el tiempo, comencemos la práctica. Aquí puedes ver, ya puse mi carpeta CSS en este compilador SS Quala, y también puedes ver, abro nuestro archivo CS y nuestro archivo CSS lado a lado, y aquí puedes ver un selector de clases, clase Ahora voy a iniciar esta práctica con operador de igualdad. Déjame mostrarte. Al principio, voy a tomar una propiedad CSS, que es padding. Relleno, diez píxeles iguales a diez píxeles. Aquí voy a comparar dos valores. Si configuro este archivo, aquí puedes ver en nuestro archivo CSS, está escrito padding, true. Aquí coincidimos diez píxeles iguales con diez píxeles, cuando configuro este archivo, está escrito true. Sí. La condición es verdadera, pero no usamos este operador así. Si estás familiarizado con JavaScript, entonces lo sabes. Si conoces JavaScript, entonces ya estás familiarizado con la condición p, y vamos a aprender sobre ello en nuestros próximos tutoriales. Aquí solo te digo cómo podemos usar operadores de comparación. Aquí puedes ver comparamos diez píxeles con diez píxeles, pero si cambio el valor diez píxeles a diez EM si configuro este archivo, ahora puedes ver que está escrito relleno fols porque diez píxeles valor y 10:00 A.M El valor no es seguro. De igual manera, si comparo con diez píxeles con 15 píxeles, déjame mostrarte que configuraré este archivo, también se escribe falso porque 15 píxeles es mayor que diez píxeles. Pero si uso no igual a operador, déjame mostrarte y luego establecer este archivo. En ese caso, está escrito verdadero porque nuestra condición es verdadera. Diez píxeles no es igual a 15 píxeles. Como puede ver, aquí comparamos nuestro valor con valor numérico, pero también podemos usar valor de cadena. Déjame mostrarte. Aquí voy a escribir nombre de fuente AL voy a comparar así que voy a usar igual a seno con aérea. Si configuro este archivo, aquí puedes ver que está escrito true porque ambas fuentes están a la venta. Pero si uso la fuente Roboto, déjame mostrarte que configuré este archivo, ahora está escrito falso No solo el valor de cadena, también podemos comparar el valor complejo. Déjame mostrarte. Dentro de las rotondas, voy a escribir cuatro píxeles, seis píxeles y dos píxeles, y voy a copiar esta diapositiva, y la voy a pegar aquí Si configuro este archivo, como pueden ver, está escrito true porque tanto el valor es verdadero. Pero si cambio un valor, siete píxeles, y luego configuro este archivo, ahora puedes ver que está escrito falso. Pero si uso no es igual a seno, y luego configuro este archivo. Ahora está escrito dos porque ambas la condición no son similares. Por eso está escrito dos. Se trata de nuestros operadores de igualdad, y ahora voy a mostrarles lo que son los operadores relacionales Básicamente, el operador relacional trabaja con valores numéricos. No podemos usarlo con valor de cadena. Para eso, déjame mostrarte un ejemplo. Voy a quitar este y aquí voy a escribir 50 mayor que cuatro. Quiero decir es el número 50 mayor que el cuatro? Si configuro este archivo, como pueden ver, está escrito dos. Pero si paso 60 y luego configuro este archivo. Como pueden ver, está escrito fw Porque en nuestra condición anterior, 50 es mayor que cuatro, pero en esta condición, 50 no es mayor que 60 Por eso nuestra condición formas escritas. No sólo eso, podemos usar este valor con unidad. Déjame mostrarte 50 píxeles y 60 píxeles. Si configuro este archivo, puedes ver que está escrito fg. Pero si paso 40 semanasaquí y luego pongo este archivo, ahora se puede ver que está escrito true No sólo eso, se puede comparar con diferentes unidades. Déjame mostrarte. Supongamos que quiero comparar con 1,000 milisegundos mayor que igual a 1 segundo Si configuro este archivo, aquí puedes ver que está escrito true. Como puedes ver, su unidad es diferente, s y, pero su valor es el mismo. Por eso está escrito verdadero, aquí uso mayor que igual al operador relacional Usando este operador, podemos comparar si 1,000 s es mayor que uno es, en ese caso, va a devolver true, de lo contrario, si 1,000 s igual con uno es, en ese caso, va a devolver true. Pero si paso dos segundos aquí y luego configuro este archivo, como pueden ver, es formulario de devolución. Porque 1002do no es mayor a dos segundos. Aquí puede ver podemos comparar dos valores unitarios diferentes con la misma categoría. Podemos comparar el segundo con nuestro minuto, microsegundo, etcétera. Pero si trato de comparar s con pixel, déjame mostrarte 1,000 ms mayor que dos pixel. Entonces si configuro este archivo, ahora puedes verlo escrito error porque su categoría es diferente, no podemos comparar el tiempo con el área. Por eso necesitamos usar la misma categoría. Ahora hablemos de los operadores de Bullion y cómo podemos usarlo. En SAS, tenemos que decirle a tres tipos de operador Bollier y o no, y siempre se escribe resultado verdadero o falso Podemos usar todo el operador booleano con múltiples condiciones Quiero decir, si quieres verificar más de una condición, puedes usar estos operadores. Usamos y operador si tanto la condición es verdadera, luego escrita verdadera, de lo contrario está escrita falsa. No sólo dos condiciones, se puede agregar más condición con este operador. Déjame mostrarte el ejemplo. Supongamos que esta es la condición uno y yo uso y operador, y esta es la condición dos. En nuestra condición uno, cinco píxeles igual a cinco píxeles. Quiero decir, la condición es verdadera y en nuestra segunda condición, fuente aérea igual a forma de área. Aquí comparamos con el valor numérico y aquí comparamos con el valor de cadena. Como puede ver, ambas condiciones son ciertas. En ese caso, va a volver a resultado. Y si alguna condición no devuelve verdadera, en ese caso, va a devolver falsa. A continuación, hablemos de o operador de lingotes. Si una de las condiciones es verdadera, entonces está escrita verdadera. De lo contrario, está escrito falso. Supongamos que tenemos que condicionar la condición uno y la condición dos. En nuestra condición uno, comparo cinco píxeles con 15 píxeles y en nuestra condición dos, comparamos la fuente de área con el área cuatro. En ese caso, sabes que una de las condiciones es verdadera, fuente aérea igual a fuente aérea. Porque una de las condiciones es cierta, por eso está escrita verdadera. Y si tanto la condición escrita falla, en ese caso, va a volver falla, y nuestro último operador no es operador. Siempre se escribe valor opuesto. Si la respuesta es verdadera, va a devolver respuesta falsa, y si la respuesta fue falsa, va a devolver respuesta verdadera. Básicamente, se escribe respuesta opuesta. Entonces, sin perder el tiempo, estudiemos prácticas y veamos cómo funciona. Entonces como puedes ver, una vez más, vuelvo a mi editor de código de Visual Studio. Y ahora voy a usar una condición con operador Boulan Al principio, voy a usar esta condición 1,000 milisecad mejor que igual a 1 Ismein va a devolver verdadero resultado, como se puede ver, es retorno Con eso, voy a usar operador final y cinco píxeles, igual a cinco píxeles. Si configuro este archivo, como pueden ver, está escrito true porque tanto la condición es verdadera. Pero si falseé una condición, entonces quiero cambiar cinco píxeles iguales a seis píxeles y luego establecer este archivo. Ahora cae Seton. Ahora bien, tanto la condición no es cierta, nuestra primera condición es cierta, pero nuestra segunda condición falla. Por eso está escrito falla porque usamos operador. Pero si usaba u operador, ¿entonces qué? Ahora voy a usar u operador. O si configuro este archivo, va a devolver dos porque como saben, si una de las condiciones es verdadera, entonces va a devolver dos. Y si tanto la condición falla, déjame mostrarte. Voy a cambiar dos segundos y luego establecer este archivo como se puede ver, está escrito falla. Y si tanto la condición es verdadera, en todo operador, en ese caso, una vez más, y luchar pixel y luego establecer este archivo, como se puede ver, está escrito true. Entonces en nuestro operador, tanto la condición o una de las condiciones es verdadera, en ese caso, va a volver verdadera. Y ahora les voy a mostrar el último operador lean que no es operable y cómo podemos usarlo. Entonces al principio, voy a duplicar esta diapositiva, y voy a comentar nuestra anterior. Entonces aquí voy a usar no operador. Quiero quitar esta condición y primero, voy a escribir no. Como ustedes saben, no operador siempre escrito resultado opuesto. Entonces cinco píxeles iguales a igual a cinco píxeles. Como saben, la condición es cierta. Si configuro este archivo, aquí puedes ver que son formularios escritos porque está escrito siempre resultado opuesto. Pero si la condición es falla y si uso no igual a operador, cinco píxeles no igual a cinco píxeles y configuro este archivo, ahora se escribe true. Debido a que la condición falla, por eso también se devuelve. Siempre se devuelve el resultado opuesto. Espero que ahora te quede claro lo que son los operadores de Bollan. Así que gracias por ver este video, estad atentos a nuestros próximos tutoriales. 154. Tutorial de operadores de Sass II: Hola, chicos. Me alegro de verte de vuelta. Este es otro tutorial, operador CS relacionado. Y en este tutorial, vamos a aprender operador numérico CS y operador de cadena SS. Como te dije, en mi tutorial anterior, tenemos a cinco operadores diferentes en operador de igualdad SAS, operador relacional, operador numérico, operador de cadena, y operador Wulian Ya cubrimos operador de igualdad, operador relacional y operador en nuestro tutorial anterior En este tutorial, vamos a cubrir operador numérico y operador de cadena . Empecemos. Al principio, voy a hablar de operador de cadena. Operador de cadena significa operador de concatenación y definimos este operador usando seno más Usamos este operador para agregar una cadena con otra cadena. Usando este operador, podemos unirnos a diferentes stree. No sólo eso, podemos unir valor numérico con cadena el. No sólo eso, usando este operador, podemos unir valor numérico con cadena viel Si estás familiarizado con JavaScript, ya lo sabes. Déjame mostrarte un ejemplo. Aquí puedes ver 50 más px. Aquí queremos unir una cadena hel con una onda numérica. Como resultado, devolvió 50 píxeles. Por otro lado, tenemos operadores numéricos, suma, substrucción, multiplicación, división, módulo, de lo contrario, lo llamamos recordatorio Utilizamos este operador para cálculos aritméticos. Empecemos la práctica y tratemos de entender cómo podemos usarla. Como pueden ver, ya abro mi software compilador CS Koala también se puede ver en mi coretor de Visual Studio lado a lado, abro mi archivo CS y mi archivo CSS Entonces, al principio, te voy a mostrar cómo podemos usar operadores de cadena. Para eso, voy a crear dos variables. Dólar, colon, y voy a tomar 50 como en. Entonces voy a dugar esta línea, y esto es lo que dos. Aquí me voy a llevar cinco. Esta es la variable uno, y esta es la variable dos. Ahora voy a darle estilo clase punto clase uno. Entonces en los hígados, voy a tomar una propiedad de NCSS Supongamos margen para Valor, voy a usar la variable uno, uno. Uno. A continuación, voy a usar seno de concatenación. Después de concatenación seno, voy a pasar px. Aquí puedes ver nuestro valor numérico escrito V uno, y quiero concatenar Var uno con valor de cadena px Yo configuro este archivo, como pueden ver, está escrito Margen 50 pixel. Así que aquí nos unimos dos tipos diferentes de valor usando operador de cadena y llamamos a este método de concatenación Con eso, te voy a mostrar cómo podemos usar operadores numéricos. Entonces con er quiero agregar $2.02. Hasta dos, una vez más, voy a usar concatenar seno. Ahora bien, el signo 1-2, no es un signo de concatenación. Esto es seno de suma, pero este signo va a actuar como un signo de concatenación. Entonces si configuro este archivo, aquí puedes ver que nuestro margen es de 55 píxeles. Entonces como saben, usando operador de suma, podemos agregar dos valores, pero ahora voy a usar operador de subestricción. Menos. Yo configuro este archivo, ahora se puede ver nuestro nuevo margen es de 45 pixel. Es un radio de cinco píxeles a partir de 50 píxeles. Por eso está escrito 45 píxeles. Este es el caso de uso del operador de substrucción, y de esa manera, podemos usarlo De igual manera, podemos usar el lado de multiplicación. Si configuro este archivo, se puede ver el resultado, 250 píxeles. Si uso el seno de división y luego configuro este archivo, ahora se puede ver que la respuesta es de diez píxeles y ahora voy a usar nuestro operador lujuria, que es el módulo. Déjame mostrarte cómo. Si usamos el signo de módulo, entonces te dará el recordatorio hasta la división. Si configuro este archivo, como pueden ver, no hay ningún recordatorio, por eso devuelve cero píxeles. Pero si cambio el valor Var one, 54 y luego configuro este archivo, ahora se puede ver que el recordatorio es cuatro. Entonces este es el caso de uso del operador de módulo. Entonces básicamente, no usamos este operador numérico de esa manera. Lo usamos cuando creamos diseños complejos. Déjame mostrarte. Entonces para este ejemplo, voy a tomar una nueva propiedad, que es el tamaño de fuente. Tamaño de fuente, y voy a usar Var one. Congetinar con pixel. Si configuro este archivo, puedes ver el resultado. El tamaño de fuente de clase uno es de 54 píxeles. Pero para nuestra etiqueta de encabezado uno, quiero el tamaño de fuente dos veces, luego la clase uno. Déjame mostrarte el tamaño de la fuente. Dólar uno, multiplicar por dos concatenar píxel concatenar Si configuro este estilo, puedes ver el resultado. Ahora nuestro encabezado un tamaño de fuente es de 108 píxeles porque quiero mostrar dos veces el tamaño de fuente luego la clase uno, luego la clase uno. Por eso utilizo operador de multiplicación. En nuestra clase uno, está escrito 54 píxeles y en nuestro encabezado uno, está escrito 108 píxeles. De esa manera, usamos variables y operador numérico juntos, mayoría de las veces lo usamos con condición p de lo contrario bucles, y vamos a aprender sobre ello en nuestro próximo tutorio así que esto es todo para este tutorial En el siguiente tutorial, vamos a aprender un nuevo concepto relacionado con el stream, que es la interpolación Estén atentos para nuestro próximo tutorial. Gracias por ver este video. 155. Tutorial de interpolación de Sass: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS, y en este tutorial, vamos a aprender interpolación, interpolación SAS En nuestro tutorial anterior, aprendemos operadores de cadena. Con eso, aprendemos operadores de concatenación de cadenas. Usando la concatenación de cadenas, podemos agregar valor de cadena con valor numérico como puede ver el resultado. Aquí lo puedes ver. Como puedes ver aquí, 50 concatan con pixel y como resultado, devolvió 50 Pero el problema es que no podemos usar concatate sine en las propiedades CSS Solo podemos usarlo en valores CSS. Además, no podemos usar seno de concatenación en el selector CSS. Déjame mostrarte un ejemplo. Aquí puedes ver, tomo un nombre de propiedad margin, margin hyphen concatenation sine, y llamo a una variable Puedes poner cualquier valor aquí, lab, arriba, derecha, quiero decir supongamos margen top 20 pixel, pero no podemos usar seno de concatenación en ese lugar Déjame mostrarte otro ejemplo con selector. Supongamos que hay una clase llamada image dot image hyphen concatenate con imaging, pero no podemos usar concatenación sine en Podemos usar concatenación solo en nuestras válvulas. Pero para este tipo de congtación SAS introduce Si quieres congtnate con propiedades, de lo contrario clases, en ese caso, necesitamos usar el método de interpolación y necesitamos usar este signo, hashtag Dentro del calrass necesitamos poner la línea variable, y luego podemos congatenar Déjame mostrarte el ejemplo. Si quieres congatenar estas propiedades y la clase, en ese caso, entonces necesitamos escribir Fusionando el guión hastag dentro del calirass, necesitamos pasar la posición variable de la extremidad Esto es para propiedad. Del mismo modo, para una clase, necesitamos seguir el mismo método. Después del hashtag, necesitamos usar Calirasis y luego dentro de la calirasis necesitamos pasar el nombre de la variable Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos usarla. Como pueden ver, ya abro mi aplicación Kuala, y en mi editor de código visual studio, lado a lado, abro archivo CS y nuestro archivo CSS Empecemos lo práctico y veamos cómo podemos usar la interpolación. Al principio, voy a declarar una mezcla. A la d mezcla. Y nuestro nombre de mezcla es margin. Y dentro de este paréntesis, quiero pasar dos parámetros o la primera variable m es posición, y nuestra segunda variable m es unidad También voy a llamar a la mezcla en nuestra clase. Déjame mostrarte. Voy a seleccionar una clase punto clase uno. Dentro de los alias, voy a incluir la mezcla. Añadir el rojo, incluir, y nuestro nombre de mezcla es margin. Al principio, voy a pasar el valor de posición. Nuestra posición queda. Después de la posición, tenemos que pasar la unidad aquí voy a pasar 20 y luego semicolum para terminar esta línea Ahora dentro de esta mezcla, voy a tomar nuestra propiedad CSS que es margin. Margen, guión, aquí voy a usar el método de interpolión Hastag Cariss. Ahora quiero concatear margen con otra variable, y aquí voy a pasar variable de posición, posición Como puede ver, en nuestra variable de posición, pasamos valor a la izquierda y luego después de columna por valor, voy a usar variable unitaria. Unidad de dólar. Quiero congatenarme con pixel Después semicon para terminar esta línea. Si configuro este archivo, como se puede ver en mi archivo CSS, se imprime margen labio 20 pixel. Ahora podemos cambiar la posición simplemente escribiendo el nombre. Supongamos que voy a pasar arriba y aquí voy a pasar 40. Si configuro este archivo, ahora puedes ver el margen superior de 40 píxeles. Aquí puedes ver, usamos una mezcla llamada margin y dentro de esta mezcla, usamos el método de interpolación Y pasamos valor de esta mezcla y congtnate con la propiedad CSS, y también congtnate Esta es la USKsot es la interpolación uskaso. En este ejemplo, usamos interpolion con propiedad CSS, y ahora voy a usar interpolion Para eso, voy a crear otra mezcla. En la mezcla roja en, y nuestro nombre de mezcla se establece imagen, SET IMG Entonces dentro del caliass y dentro de este paréntesis, quiero pasar un parámetro, y nuestro nombre de parámetro es dollar mail Ahora dentro de los alias, quiero congatenar nuestro selector, punto, imagen, guión, tiene etiqueta Dentro de la liss, voy a llamar el nombre de la imagen. Entonces aquí usamos la interpolición para congtnar nuestro selector. Entonces dentro de los hídos, voy a usar una propiedad CSS, que es imagen de fondo Fondo, imagen, y voy a usar URL Vu para la imagen de fondo. URL dentro del paréntesis, dentro de los códigos dobles, nosotros para pasar la ubicación del archivo, y nuestra ubicación de archivo es imagen, barra nuestra Además, aquí podemos usar método Interpoliion para tomar el nombre de la imagen. Déjame mostrarte. Hashtag dentro de los alias, voy a pasar la variable, que es nombre Después del nombre de la imagen, necesitamos pasar la extensión de la imagen, y nuestra extensión es JPG. Ahora tenemos que llamar a esta mezcla y tenemos que pasar el nombre de la imagen. Para llamar a la mezcla a escribir a la tarifa incluir. Entonces tenemos que pasar el nombre de mezcla, establecer imagen, establecer imagen. También tenemos que pasar el nombre de la imagen. Supongamos que el nombre de nuestra imagen es Cloud. Y luego punto y coma dos en esta línea. Si configuro este archivo, como pueden ver, primero, crea un selector CSS, imagen Cloud, y luego crea el nombre de la imagen nube punto JPG. Usando interpolación, podemos concatenar el selector CSS, y también podemos usarlo como nombre de imagen porque no podemos usar signo más para concatenar el selector CSS y las propiedades CSS Es por eso que CS introdujo la interpolación CSS. Espero que ahora te quede claro. Gracias por ver este video. Estén atentos para nuestro próximo tutorial. 156. Tutorial de funciones de Sass: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS. En este tutorial, vamos a aprender las funciones SAS. Si ya estás familiarizado con JavaScript, entonces sabes lo que es la función. Entonces déjame mostrarte cómo podemos crear funciones en SAS. Para crear una función en SAS, primero, necesita tomar una palabra clave y dilatar la función, luego el nombre de su función Recuerde, no proporcione ningún espacio entre el nombre. Se puede utilizar de otra manera bajo sco sine, pero no proporcionar ningún espacio. Después dentro del paréntesis, se puede tomar un parámetro, parámetro múltiple, de lo contrario ningún parámetro Depende de usted. Para este ejemplo, tomé un parámetro, significa una variable, y nuestro nombre de variable es value. Y luego necesitas usar calibraciones. Si recuerdas, la función y la mezcla son bastante similares, pero hay una diferencia. Básicamente, la función puede devolver un Val. Puede devolver cálculos aritméticos, pero mezclar no. Pero las mezclas siempre imprimen lo que ya estaba escrito en la mezcla, pero funciones valores escritos, y podemos usar este valor en nuestros próximos códigos Supongamos que creo un nombre de clase un tercio y dentro de este selector, como pueden ver, utilizo una propiedad nombrada con y llamamos a nuestra función y pasamos un valor 1,200. Entonces nuestra función va a dividir este valor con tres y devolver 400 y luego concatenar el numero con pixel en nuestro CSS pasa con 400 Déjame mostrarte un escenario que puede despejar tus dudas. Supongamos que tenemos un contenedor padre y su ancho es de 1,200 píxeles, y ahora quiero dividir este ancho en tres partes. En ese caso, cada celda toma 400 píxeles. Para ello, podemos crear una función, que puede dividir nuestro contenedor en tres por. Si cambiamos el ancho de este continuador, automáticamente divide nuestro continuador en tres De igual manera, si queremos dividir este continuador en dos partes, en ese caso, necesitamos crear una función, que pueda dividir nuestro valor en dos partes Supongamos que en el futuro, se quiere cambiar el exterior hizo. Algo 1,500 píxeles. En ese caso, nuestra función va a desviar el continu con igual tamaño, 500 píxeles, 500 píxeles y 500 Este es el caso de uso de la función, por lo que no necesitamos escribir el ancho de las celdas manualmente. Vamos a calcularlo usando la ayuda de la función. Entonces comencemos la práctica y veamos cómo podemos usarla. Una vez más, vuelvo a mi coordinador de estudio visual. Al lado del otro, abro estilo punto archivo Ss y estilo archivo CSS. Al principio, voy a establecer un ancho de contenedor. Para eso, voy a tomar una variable. Y nuestra variable nm es ancho CN, dos puntos y para nuestro ancho continuo, voy a tomar 1,000 Por ahora, voy a tomar cualquier unidad como pixel, M, etcétera Ahora voy a crear una función, que va a dividir mi continuari en tres partes Entonces para crear una función, voy a escribir aderdFunction, y nuestro nombre de función es un tercio, un tercio Después dentro del paréntesis, el usuario va a pasar un parámetro Para este parámetro, voy a tomar una maleza variable dólar. Después dentro de los alias, sea cual sea el usuario que vaya a pasar, quiero dividirlo en tres partes Entonces para eso, voy a usar la palabra clave return. A la vuelta roja. Entonces ancho dólar dividido por tres, porque quiero dividir por igual el ancho continuo en tres partes, y luego voy a usar concatenar s más y luego voy a usar concatenar s Esto es para unidad porque como resultado, quiero devolver unidad de píxeles. Así que creamos con éxito nuestra función y nuestro nombre de función es un tercio, y ahora quiero llamar a esta función. Para llamar a la función, necesitamos darle estilo a una clase, y nuestro nombre de clase es un tercio de hierba. Entonces dentro del auto resiste, lo voy a llamar propiedad y nombre de nuestra propiedad es qué. Qué. Ahora voy a llamar a nuestra función, y nuestro nombre de función es un tercio, un tercio. Entonces dentro de este paréntesis, voy a pasar esta variable Antes de configurar este archivo, permítanme cambiar el ancho del contenedor. Voy a sustituir mil mil por mil 200. Si configuro este archivo, como pueden ver, nuestro ancho de contenedor de un tercio es de 400 píxeles. Entonces en el futuro, si cambio el ancho del contenedor, 1,200 píxeles a 500 píxeles y luego configuro este archivo, aquí se puede ver, siempre está escrito el tercio de este ancho de contenedor, que es de 500 píxeles. Este es el caso de uso de la función. Del mismo modo, si quieres dividir el ancho de tu contenedor en dos partes, en ese caso, necesitas crear otra función. Algunos para duplicar esta función, y voy a cambiar el nombre de la función, y nuestro nombre de función es. Pero esta vez, necesitamos dividir el ancho del continuador en dos partes Entonces voy a dividir con dos. Como voy a crear y también voy a crear un selector para eso. Déjame mostrarte. Nuestro nombre más seleccionado es el ancho del buje, el ancho del buje. Instidir las aliras voy a llamar el ancho a la despedida Como valor, voy a llamar a nuestra nueva función y nuestro nuevo nombre de función es hub. Y dentro del paréntesis, aquí voy a pasar nuestro contenedor width variable container width Y también, voy a cambiar el ancho del contenedor, 1,500 píxeles a 1,200 píxeles. Si configuro este archivo, puedes ver el resultado. Aquí puede ver nuestra función hub dividir nuestro contenedor en dos partes y devolver 600 píxeles por una parte, y nuestra tercera función divide nuestro contenedor en tres partes, y cada una divide nuestro contenedor en tres partes, de las partes a 400 píxeles. Ahora te queda claro cómo podemos usar funciones para cálculos aritméticos Entonces en el siguiente tutorial, vamos a aprender las funciones de velo SAS. Así que gracias por ver este video, estad atentos para nuestra próxima tribew 157. Tutorial de funciones de números de Sass: Hola, chicos. Me alegro de verte de vuelta. Este es otro tutorial relacionado con CS, y en este tutorial, vamos a aprender las funciones del número SAS Aquí puedes ver que Cs vienen con seis totales en función val, función de números, función de cadena, función de color, última función, función de selector, y la última es la intropeción En este tutorial, vamos a aprender solo funciones numéricas. Veamos cuántas funciones numéricas tenemos en CS. Como puede ver, tenemos función de número total 11 en CS, y vamos a cubrir todos estos en este tutorial. Comencemos la práctica con la función Avis. Físicamente, función Avis escrito voluntad absoluta. Empecemos la práctica. Como pueden ver, ya abro mi editor de cod de estudio de usuario y lado a lado, abro pila estiloide SS y archivo CSS estilo Al principio, voy a crear una clase punto clase uno. Después dentro de los calices, al principio, voy a tomar acssPerty y voy a Acolchado. Nuestra primera función es Avis significa función absoluta. Fila simulada tipo abs. Esta función siempre escrito valor absoluto. Si paso un valor negativo, déjame mostrarte -14 píxeles Si configuro este archivo, como pueden ver, está escrito absoluto, 14 píxeles. Se elimina el valor negativo y se escribe 14 píxeles. Si elimino el signo menos y luego configuro este archivo, como puedes ver, siempre se escribe valor absoluto. Ahora, hablemos de nuestra siguiente función, que es L. Pero antes, voy a duplicar esta línea y comentar la anterior. Aquí voy a usar la función celular C CEL. Entonces dentro de los versos ao, voy a pasar un valor flotante. Déjame mostrarte. 5.3. Y si configuro este archivo, déjame mostrarte. Si configuro este archivo, como pueden ver, está escrito rellenando seis. Si utilizo la función de celda cada vez que devuelva por encima del valor. Si utilizo 5.9 y configuro este archivo, también devuelvo seis. Pero si uso 5.1 y configuro este archivo, también devuelve seis. Siempre está escrito por encima del valor. Pero si paso 5.0 y luego configuro este archivo, ahora está escrito sólo cinco. Si paso el valor flotante en la función de celda, siempre está escrito por encima del valor. Del mismo modo, tenemos función opuesta. Para eso, voy a duplicar esta línea y comentar la anterior. Y aquí voy a teclear piso función FL W R. Luego dentro de la rotonda voy a pasar cuatro y siete Esta función siempre escrita por debajo del valor. Si configuro este archivo, como pueden ver, está escrito sólo cuatro. Sin cero, cualquiera que sea el valor que usemos después del punto va a devolver sólo cuatro. Si paso nueve aquí, también está escrito cuatro. Vamos a saltar a nuestra siguiente función, que es la función round para suplicar esta línea y comentar la anterior. Y aquí voy a teclear función redonda. Fila si configuro este archivo, como pueden ver, está escrito cinco. Esta función es una combinación de función de sello y función de flotación. Después de Dhimil, si el valor es mayor que cuatro, entonces siempre se escribe el valor a a Pero un Djimil, si el valor es inferior a cinco, entonces va a devolver un valor wow Déjame mostrarte si paso, 4.4 aquí, y luego configuro este archivo, como puedes ver, ahora está escrito sólo cuatro. Pero si paso 415 y luego pongo este archivo, ahora se puede ver que está escrito cinco. Este es el caso de uso de la función redonda. Espero que ahora te quede claro cómo funcionan las funciones de venta piso y ejecución. Nuestra siguiente función es la función máxima. Quiero que comiences esta línea y acuestes la anterior. Y aquí voy a llamar a la función max. Esta función siempre devuelve el valor máximo. Supongamos que si tenemos tres valores, déjame mostrarte un píxel, tres píxeles y cinco píxeles. Si dije este archivo, como pueden ver, está escrito de cinco píxeles. Siempre se escribe el valor máximo del menor. la misma manera, tenemos la función opuesta, que es la función min. Suena esta línea y comenta la anterior, y aquí voy a llamar a nuestra función Min. Si configuro este archivo, como pueden ver, está escrito el valor más bajo de esta lista. Siempre se escribe el valor más bajo. Básicamente, no usamos esta función así. Cuando necesitamos trabajar con cálculos aritméticos complejos, entonces usamos esta función Ahora, hablemos de nuestra siguiente función, que es percentis Así que para comenzar esta línea y comentar la anterior Y aquí voy a teclear percentis. Esta función siempre devuelve el valor porcentual. Si paso 0.3, configuro este archivo, como pueden ver, está escrito 30%. Además, si trabajo con cálculo aritmético, déjame mostrarte 200 píxeles divididos por 50 píxeles Si configuro este archivo, como pueden ver, está escrito 400%. Esta función siempre devuelve porcentaje. Nuestra siguiente función es comparable. Para eso, voy a duplicar esta línea y comentar la anterior. Aquí voy a escribir comparable. Usando esta función, podemos comparar dos unidades. Si las unidades son coincidentes, están escritas, verdaderas, lo contrario, son formas escritas. Déjame mostrarte la demostración. Entonces aquí voy a pasar dos píxeles y nuestro siguiente valor es de cuatro píxeles. Si configuro este archivo, como pueden ver, está escrito true porque sus unidades son iguales, pixel y pixel. Pero si paso unidad EM y luego configuro este archivo, EM y configuro este archivo, como pueden ver, ahora está escrito fobs Porque su unidad es diferente. Por eso no pudimos compararlo. Pero si paso el valor de centímetro aquí, CM, y si paso MM unidad, y luego configuro este archivo, como pueden ver, ahora está escrito a través porque podemos comparar centímetro con milímetro Por eso está escrito a través. Hablemos de nuestra siguiente función, que es aleatoria. Voy a duplicar esta línea y comentar la anterior. Entonces voy a escribir al azar. Esta función siempre escribió un valor aleatorio. Si pongo esta pila, como pueden ver, está escrito un valor aleatorio. Si configuro este archivo una vez más, puedes ver que está escrito un valor aleatorio diferente. Por defecto, la función aleatoria escribe el valor 0-1. Por eso se escribe valor flotante. Pero si paso un número, algo 12 y luego pongo este archivo, ahora está escrito un número 0-12 Podría ser cualquier número 0-12, y en nuestro caso, está escrito diez Si configuro este archivo una vez más, ahora puedes ver que está escrito uno. Hablemos de nuestra siguiente función, que es la unidad. Para eso, voy a embotar esta línea y comentar la anterior Y aquí voy a mecanografiar unidad. Para este ejemplo, voy a pasar un número, que es 22. Si configuro este archivo, como pueden ver, está escrito solo los códigos dobles, no el número porque no pasamos ninguna unidad, sino si paso pixel PH y luego configuro este archivo, como pueden ver, se escribe solo el píxel de la unidad. Función de unidad siempre escrita la unidad. De igual manera, si paso centímetro, CM, y luego pongo este archivo, aquí se puede ver que está escrito centímetro. Ahora, hablemos de nuestra última función, que es unidad menos. Para eso, voy a duplicar esta línea y comentar la anterior. Y aquí voy a teclear unitless. Básicamente, esta función va a volver al valor, ya sea true, ya sea false. Básicamente, esta función va a verificar, ¿proporcionamos unidad con este valor o no? Si configuro este archivo, como pueden ver, está escrito falso. Porque brindamos unidad, por eso está escrito fals. Pero si no proporciono la unidad, configuro este archivo, como pueden ver, ahora está escrito true. Podemos usar esta función con condiciones IP. En el siguiente tutorial, vamos a aprender funciones relacionadas con cadenas. Así que gracias por ver este video, estad atentos para nuestro próximo tutorial. 158. Tutorial de funciones de cadenas de Sass Parte1: Hola chicos, me alegro de verte B. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con CAS. Y en este tutorial, vamos a aprender la función de cadena CS. Aquí puedes ver la lista de función inval de SAS. En nuestros tutoriales anteriores, aprenderemos sobre la función numérica. Y en este tutorial, vamos a aprender funciones de cadena. Entonces veamos las funciones de cadena. Como puede ver, tenemos una función total de nueve cadenas en SAS. Función Cote a función mayúscula, función índice STR, a función minúscula, función inserción de estrella, función ID única, función Star len, función uncoat y función Star slice y Sin perder el tiempo, comencemos la práctica. Como pueden ver, estoy en mi coordinador de visual studio, y lado a lado, abro Stylar CS y archivo CSS estilo Entonces primero, voy a crear una clase, y el nombre de nuestra clase es la clase uno. Entonces dentro de lo surge, voy a usar la propiedad CSS, y nuestro nombre de propiedad es familia de fuentes. Familia de fuentes. Pero aquí no voy a usar el apellido de la fuente directamente. Para eso, voy a usar una función de cadena y nuestro nombre de función de cadena es co Quote. Entonces en cambio el paréntesis, voy a llamar al apellido de la fuente y nuestro apellido de fuente es Ariel Básicamente la función de código va a envolver esta cadena con códigos dobles. Si configuro este archivo, aquí puedes ver el resultado. Familia tipográfica dentro de los códigos dobles al. De la manera opuesta, tenemos otra función, que es uncode Si utilizo uncode y envuelvo este nombre de fuente dentro los códigos dobles y luego configuro este archivo, como puedes ver elimina la cita de la cadena Este es el caso de uso de la función uncode. Vamos a saltar a la siguiente función, que es dos mayúsculas Aquí voy a atar dos mayúsculas. Caso. Básicamente, esta función va a convertir esta cadena en mayúsculas Si configuro este archivo, como puede ver, todas las letras están en mayúsculas la misma manera, tenemos función opuesta, que es dos minúsculas Si escribo dos inferiores, y luego configuro este archivo, como puede ver, convierte nuestra letra mayúscula A en una minúscula. Básicamente, convierte el carácter mayúscula en minúscula. Vamos a saltar a la siguiente función, que es la longitud de la cadena. Aquí quiero escribir nuestra siguiente función, que es St longitud. Longitud de str. Cualquiera que sea el valor de cadena que pasemos dentro de esta función de cadena, va a contar el carácter de la cadena y devolver la longitud en número. Como puedes ver en el mundo aéreo, tenemos un total de cinco caracteres. Si configuro este archivo, vaya, hay un error. La ortografía de la lente no es correcta, LONGITUD. Si configuro este archivo, puedes ver el resultado. Son tres y cinco. Este es el caso de uso de la función de longitud STR. Hablemos de nuestra siguiente función, que es el índice de cadena. Voy a llamar a esta función string index. Luego dentro del paréntesis, en esta función como primer parámetro, necesitamos pasar esta cadena Ya copio una cadena y la voy a pegar aquí. Es un maniquí de La Mpsum. Pero al principio, comencemos con la palabra wrap. Usando esta función, podemos buscar caracteres o palabras de esta cadena y se escribe el número de índice. Como puedes ver, como primer parámetro, pasamos esta cadena. Entonces en nuestro segundo parámetro, quiero buscar la palabra ficticio Dentro de los acordes dobles, voy a pasar a Dummi. Si configuro este archivo, como pueden ver, está escrito 23. Está escrito el número índice del texto dammi. Si cuentas los personajes, D sería 23, déjame mostrarte otro ejemplo. Ahora quiero buscar palabra Lorem de la corriente. Entonces voy a escribir Loren. Si configuro este archivo, como pueden ver, está escrito uno porque palabra Lem empieza desde el primer índice. Por eso está escrito uno. Recuerda, también es contar el espacio entre las palabras. Esto es para este tutorial. En nuestro próximo tutorial, voy a cubrir la función de inserción de cadena, la función QQ ID y la función de rebanada de cadena Gracias por ver este video, estad atentos para nuestro próximo tutorial. 159. Tutorial de funciones de cadena de Sass Parte2: Hola chicos es bueno verte de vuelta. Esta es la segunda parte de SAStringFunctions. Y en este tutorial, vamos a aprender la función de inserción de cadena, la función ID única y la función de rebanada de cadena. Entonces, sin perder el tiempo, estudiemos lo práctico. Como pueden ver, dentro la visera estofado coeor abro nuestros Estiliza tu archivo CS y estiliza tu archivo de tesis. Supongamos que quiero insertar una palabra dentro de esta cadena. Para eso, necesitamos usar la función de inserción de cadena. Así que aquí, voy a escribir string insert. Quiero agregar hola palabra. Entonces aquí, voy a escribir hola. Quiero agregar hola palabra inicio de esta cadena. Para eso, necesitamos pasar otro parámetro. Entonces aquí voy a escribir coma, y aquí voy a pasar el número de índice Uno, también, voy a proporcionar un espacio en ese lugar. Y también, voy a proporcionar espacio después de O. Así que si configuro este archivo, se puede ver el resultado. Usando la función Insertar, podemos insertar palabra o un carácter dentro de esta corriente, y necesitamos pasar el número de índice. Eso es. Déjame mostrarte una vez más. Supongamos que esta vez quiero agregar palabra Ipsum en esta corriente Copo esta palabra y la quito, y aquí voy a pasar la palabra Ipsum Y ahora quiero insertar palabra Ipsum hasta uen. Para eso voy a contar índice exacto número uno, dos, tres, cuatro, cinco, seis. Entonces aquí, voy a pasar Sebin porque también quiero proporcionar un espacio arriba uen Entonces si configuro este archivo, se puede ver el resultado Lorem Ipsum Entonces este es el caso de uso de la función insert. Hablemos de nuestra próxima función. Nuestra siguiente función es string slice. Así que aquí voy a escribir STR slice. Supongamos que quiero reducir la palabra Lorem de esta cadena. En ese caso, tenemos que pasar al parámetro dos. Déjeme mostrar. En nuestro primer parámetro, necesitamos pasar nuestra cadena, y en nuestro segundo parámetro, necesitamos pasar el número de índice. Como puedes ver, la palabra Lorem termina en quinto índice. Entonces aquí, voy a pasar seis. Si configuro este archivo, ahora lo puedes ver quitar Lem palabra e imprimir es simplemente dammitexto Pero en nuestro siguiente ejemplo, quiero devolver una palabra. En ese caso, necesitamos pasar el parámetro total de tres, nuestro número de índice inicial y nuestro número de índice final, que es nueve. Si configuro este archivo, como puedes ver lo devuelvo es. Entonces, usando esta función, podemos rebanar cualquier sección de nuestra cadena. Hablemos de nuestra última función, que es el ID único. Al principio, voy a eliminar todos estos, y aquí voy a escribir Unique ID. DNI. Entonces nuestro paréntesis y semicon dos en esta línea Si configuro este archivo, como pueden ver, está escrito un ID único. Devuelve algunos caracteres aleatorios. Si configuro este archivo de nuevo, cada vez que se escribe un nuevo ID, y Bt fold siempre esta función escribió nueve caracteres de identificación única. Básicamente, utilizamos esta función con condiciones IP. Cubro todas estas funciones de cadena. Gracias por ver este video, estad atentos para nuestro próximo tutorial. 160. Tutorial de funciones de color de Sass: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial emocionante relacionado con CS. Y en este tutorial, vamos a aprender las funciones de color CS. Como te dije antes, CS vino con algunas funciones inval. Función de número, función de cadena, función de colores, funciones de lista, función de elector y función de introspección Completamos la función de número y la función de cadena en nuestro tutorial anterior. En este tutorial, vamos a aprender la función del color. Sin perder el tiempo, veamos cuántas funciones de color tenemos en nuestro CAS. En este tutorial, vamos a cubrir las funciones básicas pero importantes de CS, Aclarar, oscurecer, ajustar, saturar, desaturar, mezclar Sé que tenemos más de siete funciones relacionadas con el color en SAS, pero estas son las más importantes. Por eso voy a cubrir estas siete funciones. Entonces comencemos la práctica y veamos cómo funciona. Aquí puedes ver lado a lado, abro mi Visual Studio Coreator y mi navegador usando la extensión de servidor if Ya creé un documento HTML llamado index dot HTML. Con eso, ya creo Style Door CS y el archivo CSS con estilo Como puedes ver en mi navegador, tenemos que hacer dos D, clase uno y clase dos. La clase uno se llenó de color de fondo rosa, y la clase dos vino con el color de fondo vacío. Vamos a saltar al archivo CS y ver qué hemos hecho. Como puedes ver, al principio, creamos un color base variable de las extremidades, y nuestro color base es el rosa. Y luego diseñamos nuestros dips y establecemos un borde. Entonces en nuestra clase uno, establecemos el color de fondo, que es nuestro color base rosa, y no establecemos ningún color de fondo en nuestra clase dos. Ahora voy a modificar este color y quiero llenar este div con la forma oscura de este color rosa. Para eso, voy a usar una función llamada darken. Entonces primero, voy a usar la propiedad CSS, que es fondo. Antecedentes, y voy a llamar a nuestra función. Aquí voy a escribir oscurecer. Luego dentro del paréntesis, necesitamos proporcionar un color Para el color, voy a usar el mismo color, que es el color base. Voy a copiar la variable y pegarla aquí. Y luego en nuestro segundo parámetro, necesitamos aportar el valor 0-100% Entonces aquí quiero pasar el 30%. Entonces si configuro este archivo, aquí puedes ver nuestro contenedor lleno 30% más de corte oscuro que el anterior. Y si te muestro mi estilo o archivo CSS, como puedes ver, crea un nuevo color. Entonces una vez más, voy a volver a mi archivo de estilo o CS. Entonces como puedes ver, si aplico 30% de color oscurecido a este color base, devuelvo este tipo de De igual manera, si aplico 70% y luego configuro este archivo, se puede ver la diferencia. Ahora son diez colores más oscurecidos. Te muestro dos deeps porque este es el color original y esta es la parte oscurecida de Este es el caso de uso de dark in function. Nuestra siguiente función es la función de aligerar . Déjame mostrarte. Entonces primero, voy a duplicar esta línea y comentar la anterior. Y aquí voy a atar a Alighten. Y voy a pasar el 30% de valor aquí. Si configuro este archivo, como pueden ver, es 30% aligerar el color de nuestro color base Si te muestro mi archivo CSS, como puedes ver, está escrito en blanco puro porque nuestro color rosa ya es un color aclarado Si uso el color azul, déjame mostrarte el color base azul. Esto en este archivo, ahora se puede ver la parte de iluminación de este color azul. Y si te muestro el archivo CSS, puedes ver el código coloreado. Podemos usar esas funciones con Hova Effects. Hablemos de nuestra siguiente función, que es ajustar Hue. Primero, voy a duplicar esta línea y comentar la anterior, y aquí voy a escribir ajustar Hue. Tonalidad. Si configuro este archivo, como pueden ver, cambió el color. Básicamente usando esta función, sea cual sea el color que pasemos en nuestro primer parámetro, puede devolver parte oscurecida o aclarar parte de este color según este Y en nuestro segundo parámetro, necesitamos pasar valor con grado. Si paso 20 aquí, y luego configuro este archivo, se puede ver la diferencia. Es regreso no va a oscurecer la anterior. Si apruebo 70 grados, veamos qué pasó. Si configuro este archivo, vuelve a aclarar parte de este color. Usando la función H, podemos rotar colores. Entonces como se puede ver cómo podemos usar la función Hu. Hablemos de nuestra siguiente función, que es saturar. Al principio, voy a duplicar esta línea y comentar la anterior. Aquí voy a escribir saturar. Básicamente, esta función aumenta el brillo de este color. Si configuro este archivo, puedes ver el resultado. Como puedes ver, sigue devolviendo el mismo color. Cambiemos el color. Aquí voy a usar un color marrón. Voy a proporcionar un valor hexadecal tiene AD 4038. Si configuro este archivo, ahora puedes ver la diferencia de color. Este es el color base y este es 70% saturado el color base. Aumenta el brillo de este color marrón y devuelve el color rojo. De igual manera, tenemos función opuesta, que es desaturada. Déjame mostrarte. Voy a duplicar esta línea y comentar la anterior aquí voy a escribir desaturate También voy a cambiar el color base, que es el azul. Si configuro este archivo, como pueden ver, esta función reduce el brillo de este color y devuelve este color. función saturada siempre aumenta el brillo de este color y la función de desaturación siempre disminuye el brillo de este Si reducimos el valor 20% y luego establecemos este archivo, ahora es tratar de coincidir con el color base. Pero si aumentas el valor 90% y estableces este archivo, ahora puedes ver la diferencia. Redujo el brillo de este color. Pero si paso valor cero, y configuro este archivo. Ahora se puede ver está escrito el color original, el color base, el color azul. Pero si utilizo valor completo, 100% y configuro este archivo, ahora solo puedes ver el color gris de Itrton Ahora hablemos de nuestra próxima función, que es mix. Quiero oblar esta línea y comentar la anterior. Entonces aquí, voy a teclear mix. Usando esta función, podemos mezclar diferentes colores. En esta función, básicamente, necesitamos pasar el parámetro total de tres. Entonces con color base, quiero agregar, como pueden ver, nuestro color base es el azul. Quiero agregar color rojo. Entonces aquí voy a escribir rojo, coma, y luego tenemos que pasar el valor porcentual Entonces aquí voy a pasar el 50%. Significa cuánto color azul quiero agregar con el color rojo. Si configuro este archivo, como pueden ver, está escrito de color púrpura. Si mezclamos color rojo y azul, en ese caso, reten color púrpura I Disminuyo el valor porcentual, 20% y luego configuro este archivo, ahora se puede ver que devuelve color rosa rojizo Se aplicó 20% de color oeste a este color rojo. Si aumento el valor, 90% y luego configuro este archivo, ahora puedes ver el resultado diferente. Ahora puedes ver que nuestro nuevo color es mucho más fuerte que el rojo y está escrito casi de color azul. Esta es la forma en que se puede utilizar la función mixta. Ahora hablemos de nuestra función de lujuria, que es transparente muere. Voy a duplicar esta línea, y voy a comentar la anterior. Aquí voy a escribir lazos transparentes de fondo. Básicamente, usando esta función, podemos transparentar nuestro color. Si ya estás familiarizado con CSS, conoces el valor de GVA, y A significa Alpha Val, y podemos transparentar nuestro color usando el valor Alpha De igual manera, tenemos función en SAS, que es transparente sí. Aquí, tenemos que pasar por los dos parámetros, color y valor. Para el color, voy a usar nuestro color base, y aquí tenemos que pasar el valor 0-1 Entonces Hemo tipo punto cero, cuatro, quiero decir, es 40% transparente Vamos a configurar el archivo y ver si funcionó correctamente o no. Como puedes ver, es 40% transparente nuestro color de fondo. Y si te muestro mi archivo CSS, aquí puedes verlo usa valor Rgvia aquí puedes ver que está escrito Valor Alpha 0.6 Y si quiero que sea completamente transparente, en ese caso, necesitamos pasar el valor uno. Si configuro este archivo, ahora puedes ver que es completamente transparente. Pero si te muestro mi archivo CSS y comparo con el valor Alpha, aquí puedes ver que está escrito cero. En CSS para completa transparente, necesitamos usar cero, pero en SAS para completa transparente, necesitamos usar uno. Obviamente, es trabajo sólo para esta función. Esto es para este tutorial. Espero que ahora te quede claro qué son las funciones de color CS. Gracias por ver este video. En nuestro próximo tutorial, vamos a cubrir las funciones de CS List. Así que estad atentos para nuestro próximo video. 161. Tutorial de funciones de la lista de Sass Parte1: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial emocionante relacionado con las funciones SAS. Y en este tutorial, vamos a aprender las funciones SSList Como te dije antes, tenemos que seis funciones en SAS, función número, función cadena, función color, función lista, función selector, y función de introspección En este tutorial, vamos a aprender la función de lista. Estas son todas en funciones wll. Pero antes necesitamos entender lo que es la lista. Si está familiarizado con JavaScript, entonces ya está familiarizado con las matrices. Array significa en una sola variable, podemos almacenar múltiples valores. Y si quieres hacer lo mismo en SAS, entonces tenemos Lista. Aquí puedes ver, primero tomamos una variable luego lista, y dentro de esta variable, nos fijamos para decir tres valores, cinco píxeles, diez píxeles y 15 píxeles. Este es el primer método que puedes crear último en SAS. Déjame mostrarte este segundo método. Aquí puedes usar separador entre los valores. Puedes usar coma Para que puedas usar valores sin coma. De lo contrario, puede usar valor con coma. Y hay otra manera de que puedas crear lista en CAS. Déjame mostrarte. Además, puedes usar direcciones cuadradas para crear una lista en CS. Y ahora te voy a mostrar la lista de funciones. Usando la función de lista, puede manipular su lista. Puedes agregar nuevo valor en tu lista. De lo contrario, puede eliminar un valor de esta lista. Puedes hacer muchas cosas usando esas funciones. Nuestra primera función es la función de longitud. De ahí viene la enésima función. A continuación, la función Seth N, función unión, AppNFunction, función, función de índice, menos función de separador, y nuestra última función es es la función entre corchetes Así que tenemos línea total menos función en CS y voy a cubrir todos estos en este tutorial. Sin perder el tiempo, es comenzar la práctica ver cómo se balancea. Por último, estoy en un codtor de estudio visual. Al lado del otro, abro archivo cs del estilete y el archivo css del punto del estilo Al principio, voy a crear una lista de nombres variable Dollar ist. Entonces dos puntos aquí, voy a establecer algunos valores. Cinco píxeles, espacio, diez píxeles, espacio, 15 píxeles. Después semicolum dos en esta línea. Ahora voy a crear una clase punto clase uno, luego dentro de la alirass entonces voy a llamar a una propiedad CSS, que es padding aquí voy a usar toda la función list una por una Llamemos a nuestra primera función de lista, que es la longitud. Entonces aquí voy a escribir longitud. Usando la función length, podemos contar número total de valor en nuestra lista. Si paso la variable am lista de dólares, y configuro este archivo, como pueden ver, está escrito rellenando tres porque tenemos que decir tres valores en nuestra lista. Si aumento el valor 20 píxeles y luego configuro este archivo, como pueden ver, está escrito cuatro. Como puedes ver, cuenta múltiples valores. Además si elimino el pixel de la unidad, déjame mostrarte y luego configurar este archivo. Como puedes ver escribió cuatro porque esta función es lo suficientemente inteligente como para identificar los valores. Por eso sin unidad, puede contar nuestros valores. Y si utilizo coma entre ellos y luego configuro este archivo, como pueden ver, ahora también está escrito cuatro porque podemos crear nuestra lista usando el espacio de lo contrario usando coma Volvamos a la posición anterior. Voy a presionar Control Z. no sólo eso, podemos pasar propiedad y valores en función de longitud Déjame mostrarte. Primero, voy a usar tirantes redondos Dentro de las llaves redondas, primero, voy a usar con propiedad con diez píxeles Además, voy a usar propiedad de altura. Altura, cinco píxeles. Si configuro este archivo, como pueden ver, es volver a sintonizar dos porque pasamos valor total dos en esta función, width y height Esta función es bastante asquerosa para identificar estos valores. Esta es nuestra función de longitud que puede contar nuestros valores de lista. Ahora hablemos de nuestra próxima función, que es NIT. Pero primero, voy a duplicar esta línea y comentar anterior voy a escribir NI. Básicamente, pasamos a dos parámetros en la función N. En nuestro primer parámetro, necesitamos pasar el valor de lista y en nuestro segundo parámetro, necesitamos pasar el índice. Déjame mostrarte. En nuestro primer parámetro, voy a pasar lista Lista de dólares. Y en nuestro segundo parámetro, voy a pasar el número de índice, así que voy a pasar dos. Si configuro este archivo, como pueden ver, está escrito diez píxeles. Ahora el cociente es la razón por la que está escrito diez píxeles. Porque como puedes ver en mi lista en el índice dos, tenemos un valor de diez píxeles. Por eso está escrito diez píxeles. Tenemos que decir cuatro valores en mi lista. Es mezquino que tenemos que decir cuatro índices en esta lista. En nuestro segundo parámetro, si paso el número de índice, acuerdo con el número de índice, devolverá el valor. De igual manera, si cambio el número de índice, cuatro y luego configuro este archivo, ahora se puede ver que devuelve 20. No sólo eso, podemos pasar valor negativo también. Si paso menos uno y luego configuro este archivo, ahora puedes verlo devolver 20 una vez más. Pero la pregunta es ¿por qué? Porque desde el lado izquierdo, contamos valores positivos. En el sentido contrario, contamos el valor negativo desde el lado derecho. Entonces este es nuestro menos uno, esto es menos dos, esto es menos tres, y esto es menos cuatro. Si paso menos tres, y pongo este archivo, se puede ver que está escrito diez. Para que podamos imprimir valor de esta manera, de lo contrario de esta manera. Ahora, hablemos de nuestra siguiente función, que es establecerla. Quiero comenzar esta línea y comentar la anterior. Si quieres agregar un nuevo valor a nuestra lista existente, en ese caso, puedes usar la función Seth Neh Aquí, voy a escribir Seth Ne set nth. Dentro de las prensas hacia abajo, tenemos que pasar tres parámetros. Primero, nuestra lista, después el número de índice, ¿dónde quieres establecer? Quiero ponerla en el índice dos. Por eso paso dos. En nuestro tercer parámetro, necesitamos pasar el nuevo valor, y nuestro nuevo valor es 30 EM. Aquí quiero sustituir diez píxeles por 30 am. Si configuro este archivo, puedes ver el resultado. Cinco píxeles, 30 am, 15 píxeles, 20 píxeles. Usando esta función, puede reemplazar un valor a su lista existente. Como puedes pasar valor menos aquí. Si paso menos uno y luego configuro este archivo, ahora se puede ver que reemplazó 20 píxeles con 30 am. Hablemos de nuestra cuarta función, que es Joan. Voy a duplicar esta línea y comentar la anterior. Aquí voy a llamar a Joan función. Usando la función conjunta, podemos unir múltiples listas y podemos crear una sola lista. Para eso, voy a crear otra variable, que es dos. Además, voy a cambiar esos varios de 50 píxeles, 100 píxeles, 150 píxeles y 200 píxeles. Aquí, tenemos que pasar dólar dos parámetro, Lista uno y Lista dos, Dólar, ist, coma, y nuestro segundo parámetro, tenemos que pasar nuestra segunda lista es dos, dólar, es dos Entonces, si configuro este archivo, puedes ver que está escrito una nueva lista, y tenemos un valor total de ocho en esta lista. Cinco píxeles, diez píxeles, 15 píxeles, 20 píxeles, 50 píxeles, 100 píxeles, 150 píxeles y 200 píxeles. Se puede ver que no hay coma entre estos valores. Básicamente, esta función se combinó para enumerar y escribió una nueva lista. Pero, ¿qué? Si usamos coma, en nuestra primera lista, déjeme mostrarle y en nuestra segunda lista, solo uso el espacio para separar valores Si configuro este archivo, como puedes ver en nuestra nueva lista, usó coma en toda nuestra lista para separar valores Además, podemos pasar otro parámetro en nuestra función conjunta, que está separada. Supongamos que no quiero una coma entre estos valores. En ese caso, en nuestro tercer parámetro, necesitamos pasar el espacio. Si configuro este archivo, como pueden ver en nuestra nueva lista, separa nuestro valor usando el espacio, no la coma Como puedes usar el valor automático, es el valor predeterminado. Entonces aquí estoy para escribir auto. Si configuro este archivo, ahora puedes verlo probado coma entre valores Pero si no utilizo coma en nuestra primera lista y luego configuro este archivo, por defecto, como pueden ver, es espacio escrito Separa nuestro valor usando el espacio. Pero ahora quiero separar este valor usando coma. En ese caso, tenemos que pasar coma aquí. Si configuro este archivo, ahora puedes ver que proporciona coma entre valores Entonces nuestro tercer parámetro significa separador. Esto es para este tutorial. En nuestro próximo tutorial, vamos a cubrir una función pluma, función zip, función índice, es función separadora, y e función entre corchetes Así que gracias por ver este video, mantente atento a nuestros próximos tutoriales. 162. Tutorial de funciones de la lista de Sass parte 2: Hola, chicos. Una vez más, estoy de vuelta en mi coordinador de visual studio, y como pueden ver, lado a lado, abro el archivo CSS de estilo SSPle y Stylo En nuestro tutorial anterior, aprenderemos sobre la función Length, función N, la función set N y la función join Pero en este tutorial, vamos a cubrir los restantes función APN, función Z, función índice, es función separadora, y su función de corchete Entonces, sin perder el tiempo, estudiemos prácticos. Al principio, voy a comenzar con la función APN. Entonces voy a configurar esta línea y comentar la anterior. Y aquí voy a escribir Append. Entonces nuestro latón redondo. Supongamos que si desea agregar un nuevo valor en la lista existente, en ese caso, puede usar la función AVN Supongamos que en nuestra primera lista, quiero agregar 30 píxeles hasta 20 píxeles. En ese caso, podemos usar esta función. Déjame mostrarte cómo. Esta función agrega un solo valor. En nuestro primer parámetro, necesitamos pasar la lista, que es la lista de dólares. Entonces coma y luego necesitamos pasar el nuevo valor, que es de 30 píxeles Si configuro este archivo, como puedes ver en el archivo CSS, está escrito de 30 hasta 20 píxeles. Está agregando nuevo valor en nuestra lista. Podemos agregar nuevo valor usando esta función. Además, tenemos un tercer parámetro que podemos usar como separados. Déjame mostrarte. Como pueden ver, nuestros valores están divididos por el espacio, así que aquí voy a usar nuestro tercer parámetro, que es la coma Si configuro este archivo, puedes ver el resultado. Ahora puedes ver que nuestros valores están separados por. Puedes usar cualquier valor aquí, auto, espacio, Hablemos de nuestra siguiente función, que es la función Z. Voy a esta línea y comento la anterior. Primero, voy a inve este y voy a escribir Z. Básicamente esta función va a unir dos valores Quiero decir que tenía cinco píxeles con 50 píxeles, diez píxeles con 100 píxeles, 15 píxeles con 150 píxeles y 20 píxeles con 200 píxeles. Aquí, voy a pasar dos parámetros. Nuestro primer parámetro es la lista de dólares, y nuestro segundo parámetro es dólar es dos. Si configuro este archivo, puedes ver el resultado. Como puedes ver, combinó cinco píxeles con 50 píxeles, diez píxeles con 100 píxeles, 15 píxeles con 150 píxeles, 20 píxeles con 200 píxeles. Déjame mostrarte un buen ejemplo para esto. Aquí voy a tomar algún nombre de color. Dentro de las prensas redondas, voy a tomar rojo, verde y azul. Además, voy a tomar otra lista. Es que los rounders es para rojo, me voy a llevar 120 Para verde, voy a usar 255, y para azul, voy a usar 70. Si configuro este archivo, ahora puedes ver que el valor del color rojo es 120, valor del color verde es 255 y el valor del color azul es 70. Este es el buen caso de uso de la función zip. Si no usas coma para fines de separación, déjame mostrarte así que voy a revocar esta coma y voy a En ese caso, puedes quitar las llaves redondas. Si configuré este archivo, como pueden ver, también funcionó perfectamente. Entonces es totalmente en ti, estás cómodo con separador o no. Puedes usar Comma o espacio web. Hablemos de nuestra séptima función, que es el índice. Voy a suplicar esta línea y comentar la anterior. Y aquí voy a escribir index. Supongamos que desea buscar algo en su lista. En ese caso, puede utilizar la función index. Entonces como parámetro, al principio, necesitamos proporcionar el nombre de la lista, y nuestro nombre de lista es lista de dólares. En nuestro segundo parámetro, necesitamos pasar la Palabra clave, que quiero encontrar. Quiero encontrar 15 píxeles. Si configuro este archivo, como pueden ver, está escrito el número de índice. Encontré nuestra palabra clave en el índice tres. Si quito la unidad y luego busco el archivo, como pueden ver, también está escrito tres. Pero si trato de encontrar un resultado que no existe en esta lista, déjame mostrarte 40 y luego establecer este archivo. Como pueden ver, no está escrito nada. Si existe, entonces está escrito, lo contrario, no está escrito nada. Ahora, hablemos de nuestra octava función, que es ist separador. Entonces voy a duplicar esta línea y comentar la anterior, y aquí voy a escribir Separador de listas. Separador de listas. Separador de lista básicamente devuelve el nombre del separador. Aquí tenemos que pasar el nombre de la lista y luego va a devolver qué separador usamos en esta lista. Voy a pasar lista de dólares. Si configuro este archivo, como pueden ver, es espacio escrito. Entonces aquí puedes ver en nuestra lista uno, utilizamos el espacio para separar nuestros valores. Pero si uso coma en nuestra lista dos, y aquí pasamos la lista dos, y luego configuramos este archivo. Ahora puedes ver es título porque aquí usamos coma para separar nuestros valores Tenemos que decir dos tipos de separador, de lo contrario, el espacio. Y ahora voy a hablar de nuestra última función, que está entre corchetes Entonces voy a duplicar esta línea y comentar la anterior. Y aquí, voy a escribir está entre corchetes está entre corchetes. Básicamente, esta función vuelve al valor. Cierto, ya sea falso. Básicamente se va a comprobar ¿ usamos *** al cuadrado en nuestra lista o no Aquí voy a pasar nuestro nombre de lista, lista de dólares. Si configuro este archivo, ahora puedes ver que está escrito resultado falso. Pero si utilizo cuadrado *** en nuestra lista también, déjame mostrarte y luego pasar, y si paso es dos en esta función y luego configuro este archivo, como puedes ver, está escrito true. Básicamente, se nos utiliza esta función con la condición, y vamos a aprender sobre ella en nuestros próximos tutoriales. Esto es para este tutorial. En nuestro siguiente tutorial, vamos a aprender funciones seleccionadas. Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 163. Tutorial de funciones de selector de Sass parte 1: Hola chicos, me alegro de verles. Una vez más, estamos de vuelta con un nuevo tutorial relacionado SAS. Y en este tutorial, vamos a aprender las funciones del selector SAS. Pero antes necesitamos entender lo que se selecciona. Aquí puedes ver dentro de la clase uno, tenemos ncatag dijimos hola y nosotros a nuestra etiqueta Anca, que está dentro de esta clase Nuestra etiqueta Anca es nuestro selector. Pero SAS proporciona alguna función inculta que puede manipular a nuestros Déjame mostrarte la función. Entonces como puedes ver, tenemos que siete funciones de selector en CS, selector siguiente, selector append, selector replace es super seleccionado, selectores simples, selectores unificar Avanzando e iniciando nuestra práctica. Aquí puedes ver que ya abro mi aplicación Kuala, y lado a lado, abro archivo CS estilo y archivo CSS estilo Al principio, borremos una variable en nuestro archivo CS. Dollar y se selecciona nuestro nombre de variable. Después colon. Al principio, te voy a mostrar cuál es el uso de la función selector nido. Aquí voy a teclear selector Lista. Básicamente, dentro de esta función de nido selector, pasamos total de dos parámetros, y ambos parámetros deben ser selector. Para nuestro primer parámetro, voy a tomar códigos dobles para nuestro primer parámetro, voy a usar L y para nuestro segundo parámetro, voy a usar I y luego Semgoron dos en esta línea Básicamente, esta función selectora va a crear nuestro primer parámetro parentag y hacer nuestro segundo parámetro child tag de nuestro primer parámetro Quiero decir que va a crear etiqueta UL, parentag y etiqueta LI tag child tag Se va a combinar tanto la etiqueta como crear una selección. Para aplicarlo, necesitamos crear una clase. Para eso, voy a usar el método de interpolación. Entonces primero, voy a escribir tiene etiqueta y dentro de los alias, voy a usar nuestra variable, que es selector, selector de dólar Entonces, sea cual sea el valor que tengamos en nuestra variable seleccionada, la va a pegar aquí. Dentro de esta función selectiva, voy a usar una propiedad. Puedes usar cualquier propiedad. Por ahora, voy a usar la altura. Pixel de tinte de altura. Vamos a configurar el archivo y ver qué obtenemos en nuestro archivo CSS. Si configuro este archivo, aquí se puede ver en el archivo CSS, crea UltagParnTag, y Litag child tag Combinó tanto el selector como el selector combinado Made. Básicamente, este es el uso de la función nido selector. Déjame mostrarte otro ejemplo de esta función. Voy a quitar este y establecer este doble código. Voy a tomar clase totter dos. Nuestra primera clase es XYZ y nuestra segunda clase es punto ABC. Y ahora voy a tomar nuestro segundo parámetro. Quiero usar coma y dentro del código de la torre. Nuestro segundo parámetro es la etiqueta P. Si configuro este archivo, aquí puedes ver en mi styler archivo CSS, aquí puedes verlo crear dos grupos diferentes de clases Primero, selecciona nuestra etiqueta de párrafo, que está dentro de nuestra clase XYZ, y luego, es seleccionar otra etiqueta de párrafo, que está dentro de la clase ABC. Si quieres usar la clase sudo, sí, puedes. Déjame mostrarte. Primero, voy a eliminar esta clase, y voy a usar solo la clase XYZ. Y luego en nuestra segunda sección de parámetros, voy a escribir N persona, colon, nuestro Psotoelector, Si configuro esta línea, aquí puedes verla usa el selector Ober con clase XYZ Aquí puedes ver si quieres agregar dos parámetros, para eso, necesitas usar N persona sine. Permítanme aclarar una vez más esta sección. Supongamos con XYZ, quiero agregar underscoe ABC. Déjame mostrarte entonces absoluta N persona underscoe ABC. Si configuro este archivo, aquí se puede ver, se crea una nueva clase XYZ subrayado ADC Esta fue nuestra primera función que es SelectNST. Hablemos de otra función que es selector apene Aquí voy a quitar SelectonNST y voy a escribir Del mismo modo, en esta función, necesitamos pasar al parámetro dos. Y esta función appen va a combinar ambos de este parámetro Déjame mostrarte. En nuestro primer parámetro, voy a usar la etiqueta de párrafo. En nuestro segundo parámetro, voy a usar una clase. Aquí voy a escribir punto ABC. La función de nido selector básicamente proporciona espacio entre dos parámetros. Pero en la función append, va a combinar tanto el parámetro Si configuro este archivo, puedes ver el resultado. Como puede ver, no hay espacio entre la etiqueta P y la clase ABC. Quiero decir que crea una sola selección. Su significa toda la etiqueta de párrafo con clase ABC, altura debe ser de 20 píxeles. Déjame mostrarte otro ejemplo. Supongamos que voy a usar la clase punto XY Z. En nuestro segundo parámetro, voy a usar guion bajo Copy Si configuro este archivo, como pueden ver, crea una nueva clase, XYZ undersco copy En nuestra función anterior, necesitamos usar N persona sine para unir estos dos parámetros. Pero en esta función, no necesitamos usar person sine. Ahora, permítanme modificar este selector y saltar un paso más allá. Super coopy voy a usar Coma, y aquí voy a escribir underscoimage Como puedes ver, en nuestro segundo parámetro, utilizamos dos nombres diferentes, copy undisco copy y underscoimage Puedes tomar cualquier nombre como desees. Yo configuro este archivo, como pueden ver, crea un total de dos selectores diferentes, XYZ underscoe copy, y XYZ underscoeimage Básicamente, combina nuestro primer parámetro con copy, y nuevamente, combina nuestro primer parámetro con image y crea dos selectores diferentes. Esto es para este tutorial. En nuestro siguiente tutorial, vamos a aprender sobre nuestros selectores restantes Gracias por ver este video, estén atentos para nuestro próximo tutorial. 164. Tutorial de funciones de selector de Sass parte 2: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estamos en mi editor de código de estudio de video, y como pueden ver, lado a lado, abro el archivo style dot cs, y el archivo CSS del estilete En este tutorial, continuaremos con la función selectora. Voy a iniciar este tutorial con selector RiplesFunction. Déjame mostrarte. Para eso, voy a escribir selector guión lugar. Es comprensible desde el propio nombre, reemplazará algo. En esta función, básicamente pasamos el parámetro total de tres. Supongamos que en nuestro primer parámetro, voy a pasar C punto XYZ. Este es el nombre de nuestra clase. En el segundo parámetro, tenemos que pasar el cual tenemos que reemplazar. Supongamos que quiero reemplazar la clase punto XYZ. Aquí voy a atar punto XYZ. Ahora en nuestro tercer parámetro, necesitamos pasar el nuevo valor, y aquí necesitas pasar el valor, quieres reemplazarlo por. Quiero sustituir punto yate por punto ABC. Si configuro este archivo, aquí puedes ver el resultado. Como puede ver, no hay nombre de clase c punto XYZ. Sustituye dot yate por punto ABC. Por eso pasó c punto ABC. Déjame mostrarte otro ejemplo. Si no hay una clase H, H una en nuestro primer parámetro, en ese caso, si configuro este archivo, como pueden ver, no reemplaza el punto XYZ con ABC. Es simplemente imprimir C punto XYZ porque esta función reples no puede encontrar H uno en nuestro primer parámetro Por eso imprime ADTs. Este es el uso de la función selector repres. Hablemos de nuestra siguiente función selectora, que es E superselector Aquí voy a empatar es superelector de guión. Básicamente, usamos el selector para fines de prueba, no el propósito de modificación, y está escrito solo uno con a través de cualquiera de las caídas, y para entenderlo, necesitamos pasar por los dos parámetros. En nuestro primer parámetro, necesitamos pasar un selector, pero llamamos a nuestro primer selector superselector Supongamos que nuestro súper selector es A, y llamaremos a nuestro segundo subselector de parámetros. Y en nuestro subselector, voy a pasar un punto, y además voy a establecer una clase X Y Z. Si configuro este archivo, va a devolver true Pero el cociente es ¿por qué? Porque esta función va a buscar nuestro super selector en nuestro subselector. Si existe superselector en nuestro subselector, en ese caso, está escrito true Vamos a establecer este archivo. Como puedes ver, está escrito a través del aire. Básicamente, utilizamos esta función con condición IP. Pero si sustituyo su posición, att XYZ. Si elimino XY de nuestro subselector, y el conjunto de este archivo, como puedes ver, está escrito cae porque este súper selector no existe en este subselector. Por eso está escrito cae. Este es el uso de super selector. Hablemos de nuestro siguiente selector, que es simple selector. Voy a quitar este y voy a escribir sencillo selector de guiones Usando esta función selectora, podemos dividir nuestros selectores Si pasamos selector combinado aquí, va a dividir los selectores. Déjame mostrarte. Supongamos que voy a pasar por aquí en ABC. Si configuro este archivo, aquí se puede ver que divide nuestros selectores Crea un selector A y otro selector de punto ABC. Este es el uso de selector simple. Esto es para este tutorial. En nuestro próximo Tutorial, voy a cubrir las funciones restantes del selector, selector unificar y selector extender Gracias por ver este video, Stu por nuestro próximo tutorial 165. Tutorial de funciones de selector de Sass parte 3: Hola, chicos. Me alegro de verte de vuelta. Este es nuestro tercer tutorial, relacionado con la función selectora de Sas. En este tutorial, vamos a aprender la función Unificar seleccionada y la función de extensión del selector Vamos a saltar al editor de código de Visual Studio y ver cómo podemos usar esta función. Al principio, voy a llamar a la función seleccionada de Unifi, selector Unify En esta función, tenemos que pasar total de dos parámetros. Supongamos que en nuestro primer parámetro, utilizo en la etiqueta anchor, y en nuestro segundo parámetro, voy a usar dot info. Básicamente, esta función intenta crear una coincidencia entre los dos parámetros. Si configuro este archivo, como puedes ver, crea una coincidencia y crea un nuevo selector, en info. Déjame mostrarte más ejemplo relacionado con esta función. Supongamos que en nuestro primer parámetro, voy a escribir ad active. Y en nuestro segundo parámetro, voy a pasar en info. Si configuro este archivo, como puedes ver, crea un nuevo selector, adt active dot info Lo que significa que va a seleccionar en la etiqueta de anclaje con active plus, de lo contrario clase info. Entonces se va a aplicar el CSS. Pero si paso a selector diferente, déjame mostrarte la etiqueta de anclaje en nuestro primer parámetro y H una etiqueta en nuestro segundo parámetro. Si configuro este archivo, como pueden ver, está escrito flecha porque no creó ninguna combinación entre dos parámetros. Este es el uso de la función Unificar. Hablemos de nuestra última función selectora, que es selector extend. Voy a quitar el selector Unify y ella voy a escribir extender Esta función también funciona como función unificada seleccionada. Básicamente, esta función intenta extender una clase e intentar crear un nuevo selector. Y en esta función, podemos usar el parámetro total de tres. Supongamos que nuestro primer parámetro es anchor dot info, y en nuestro segundo parámetro, voy a pasar la etiqueta Anger. A, y en nuestro tercer parámetro, voy a pasar un link de punto de clase. Entonces esta función, tratando de hacer coincidir el segundo parámetro con nuestro primer parámetro. Si encontraron una coincidencia, entonces imprime IA, y luego trató de crear combinación con punto de clase de enlace. Si configuro este archivo, como pueden ver, primero, se crea una combinación en info. Lo que significa que imprime tal cual porque encontró la etiqueta de ira en nuestro primer parámetro. Por eso imprime Asit es, entonces crea una combinación punto info punto L. Este es otro selector Esta función siempre crea una extraña combinación. Déjame mostrarte otro ejemplo. Ahora, en nuestro segundo parámetro, voy a pasar H una etiqueta, y en nuestro tercer parámetro, voy a pasar H etiqueta dos. Si configuro este archivo, como pueden ver, imprime nuestro primer parámetro tal como es, y no intenta extender nuestro selector. Porque no encontró ninguna coincidencia en nuestro segundo parámetro. Por eso no puede extender nuestro selector. Básicamente, no usamos esta compleja función selectora en nuestro proyecto, y la mayoría de las veces usamos la función selecto next, selector ApenFunction y la función selector repress en nuestro Esto es para este tutorial. En nuestro próximo Tutorial, vamos a iniciar funciones de mapa. Gracias por ver este video, quédate une para nuestro próximo tutorial. 166. Tutorial de funciones de mapas de Sass: Hola, chicos. Me alegro de verte. Una vez más, estoy de vuelta con un nuevo tutorial relacionado dice, y en este tutorial, vamos a aprender la función de mapa. Al principio, tratemos de entender qué es el mapa. En nuestro tutorial anterior, aprenderemos sobre la función de lista. Este es el ejemplo de la función list. Como puede ver, en una variable, decimos total tres el, diez, 20 y 30 píxeles. Como saben, podemos almacenar múltiples valores en función de lista. Del mismo modo, en nuestra función de mapa, podemos almacenar múltiples val. Pero el proceso es diferente. Déjame mostrarte. Como puedes ver, este es el ejemplo de la función map y decimos total dos valor aquí, 405 cien. Pero hay otro valor dentro de los códigos invertidos. Uno es regular y otro medio. Estas son las claves. Estas son claves de mapa y estos son valores. Su valor medio regular es 400 y el valor medio es 500. Como saben, en nuestra lista, tenemos índice. Ejemplo, nuestro índice de diez valores es uno, índice de 20 valores es dos, índice de 30 valores es tres. Usando index, podemos especificar la posición de este v. Usando su posición, puede obtener los valores. Si quieres extraer el tercer valor de índice, entonces es devolver 30 píxeles. Pero en los mapas, no utilizamos índices. Aquí utilizamos claves. Aquí podemos establecer un nombre diferente para nuestras claves. Este es otro ejemplo. Aquí puedes ver que usamos un nombre de color verde y para verde, usamos x valor disial. Del mismo modo, para el azul, use el valor decimal hexadecimal. También una función en nuestro mapa, similar a la lista. Y tiene alguna función inval también. Aquí puedes ver, tenemos a seis funciones de mapa diferentes, puerta de mapa, combinación de mapas, mapa eliminar claves de mapa, valores de mapa, y el último es mapa tiene. Vamos a cubrir todo esto uno por uno. Sin perder el tiempo, comencemos la práctica. Como pueden ver, ya abro mi aplicación Kuala. Ahora se puede ver lado a lado, abro archivo CS estilo y archivo CSS estilo. Al principio, voy a crear una variable y nuestro nombre de variable es fuente a ella, dólar, fuente espera. Después colon. Después de colon dentro de las prensas redondas , al principio, voy a crear nuestra llave y nuestra primera clave es regular. Con eso, voy a pasar nuestro primer valor y nuestro primer valor es 400. Entonces voy a crear nuestra segunda clave, que es mediana. Además, nuestro valor es 500 y nuestra última clave es audaz. Y el valor es de 700. Después Semgram a esta línea. Este es nuestro mapa, y ahora voy a usar este mapa. Para eso, voy a crear un sabor de punto de clase. Entonces dentro de la liss voy a usar un cuerpo CSS que es fuente Fuente wt. Ahora voy a llamar a nuestra primera función de mapa, que es map gate. Luego dentro de los vestidos redondos, tenemos que pasar nuestro nombre de mapa y el nombre clave. Como puedes ver, nuestro nombre de mapa es el peso de la fuente. Aquí voy a pasar el peso de la fuente. En nuestro segundo parámetro, necesitamos pasar la clave y para key, voy a pasar bool Dentro del doble curso, voy a pasar negrita. Si configuro este archivo, como pueden ver, nuestra fuente a él es 700. En la función de puerta Mp, necesitamos pasar a los dos parámetros, el nombre del mapa FonTuo y la clave Esta función siempre escrito valor de esta clave, como ustedes saben, nuestro valor clave mundial es 700. Pero qué pasó si paso diferente clave que no existe en esta función de mapa. Aquí voy a pasar huesos. Si configuro este archivo, como pueden ver, está escrito nada porque no hay huesos de nombre clave. Si la clave es existir, entonces la función de puerta de mapa escribió la b. Ahora, hablemos de nuestra siguiente función, que es clave de mapa. Aquí voy a teclear clave de mapa. En la función Mp keys, necesitamos pasar al parámetro one, solo el nombre del mapa. Si configuro este archivo, como pueden ver, está escrito toda la clave de este mapa. Nuestra primera clave es regular, o la segunda clave es media, y nuestra tercera clave es negrita. Este es el uso de la función Mapey. Está escrito el nombre de todas las llaves. Hablemos de nuestra siguiente función, que es map ils. Entonces aquí, voy a pasar ls. También es palabra como función de tecla de mapa. Si configuro este archivo, como pueden ver, su retorno todos los valores. Y aquí necesitamos pasar solo un parámetro como claves. Esto es para este tutorial. En nuestro próximo Tutorial, voy a cubrir las funciones restantes, combinación de mapas, eliminación de mapas y clave hash de mapa. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 167. Tutorial de funciones de mapas de Sass Part2: Me alegro de verles chicos. En este tutorial, vamos a cubrir las funciones de mapa restantes, Fusionar mapa, eliminar mapa y mapa haski Volvamos a la visera Editor de código de Studio. Por último, estamos en Visu Studio Code Editor, y vamos a comenzar con la función de combinación de mapas Esta función va a fusionarse para diferir un mapa y devolver un mapa. Entonces necesitamos crear otro mapa. Para eso, voy a tomar una variable, y nuestro nombre de variable es ligero. Peso. Después del punto y coma, dijiste los vestidos redondos, nuestro primer kinome es más ligero, y nuestro valor es 100 y nuestro segundo kinome es li y el valor es 300 y punto y coma a la Ahora voy a usar la función de combinación de mapas. Aquí voy a escribir map merge. Y si paso otro parámetro, como ustedes saben, en esta función, necesitamos pasar al parámetro dos. Aquí, voy a pasar otro parámetro, que es otro mapa, es decir, al peso. Copo el nombre de la variable y lo voy a pegar aquí. Pero no hay problema. Si configuro este archivo, va a devolver flecha. Déjame mostrarte. Si configuro este archivo, como pueden ver, está escrito flecha porque función de combinación de mapas devuelve un nuevo hombre, no un valor. Por eso no podemos imprimirlo directamente como valor. Necesitamos crear una nueva variable para almacenar este nuevo mapa. Déjame mostrarte. Voy a crear una combinación de nombres de variables. Y ahora voy a llamar a esta función. Voy a cortar esta función de este lugar, y la voy a pegar aquí. Básicamente, esta función se fusionó a mapas y escribió un nuevo mapa, y ahora voy a llamar a MapKisFunction Aquí voy a escribir claves de mapa. Y aquí tenemos que pasar nuestra nueva variable Mug. Aquí voy a pasar Mug. Si configuro este archivo, como pueden ver, es devolver todas las claves de nuestro nuevo mapa. Como puede ver, primero imprime regular mediano en negrita desde el frente hasta el mapa húmedo, y luego imprime el mapa más ligero y ligero de Ligero a húmedo Este es el uso de la función Merch del mapa. Hablemos de nuestra siguiente función, que es map remove. No podemos llamar directamente a la función Map remove. Del mismo modo, necesitamos crear variables, así que voy a duplicar esta línea, y voy a cambiar el nombre de la variable. Themve. Y aquí voy a llamar a map remove function, map, remove. En esta función, necesitamos pasar el parámetro total de dos. En nuestro primer parámetro, necesitamos pasar el nombre del mapa. En nuestro caso, font a él, pero en nuestro segundo parámetro, necesitamos pasar el nombre de la clave. ¿Qué llave quiero quitar? Supongamos que quiero quitar la tecla negrita. Entonces aquí voy a atar atrevido. Y si llamo a nuestra nueva variable remove en nuestro selector de prueba, y luego configuro este archivo, como puede ver, sentarse en clave regular y media solamente. Elimino la tecla negrita. Entonces este es el uso de la función remove. Básicamente, pasamos el nombre de la clave que queremos eliminar. Ahora, hablemos de nuestra última función, que es la clave hash de mapa. Entonces aquí, voy a escribir Map hash key. Básicamente, esta función de retorno al tipo de valor cae ya sea true. En esta función, necesitamos pasar al parámetro dos. Entonces como primer parámetro, voy a pasar pesos de fuente, y como nuestro segundo parámetro, necesitamos pasar el kiname voy a pasar tecla negrita Si la clave bol en existe en nuestro mapa fontt, entonces está escrito true Así que vamos a establecer el archivo. Como puedes ver, está escrito cierto. Pero si paso mal nombre de clave, más audaz y luego configuro este archivo, como pueden ver, está escrito falso Entonces este es el uso de la función de clave hash de mapa. Entonces esto es para este tutorial. En nuestro próximo tutorial, vamos a aprender dice función de introspección Así que gracias por ver este video, estén atentos para nuestro próximo tutorial. 168. Tutorial de funciones de introspección de Sass: Hola chicos me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS, y en este tutorial, vamos a aprender la función de introspección SAS Ya aprendemos sobre la función numérica, la función de cadena, la función color, la función de lista, la función de selector, la función de mapa. En este tutorial, vamos a cubrir la función de introspección Veamos cuántas funciones tenemos en la función de introspección Como puede ver, tenemos seis funciones totales en la introspección Básicamente, la función está utilizando condiciones. Y siempre se escribe valor booleano a través de otras fallas Empecemos lo práctico y tratemos de entender cómo podemos usar estas funciones. Aquí puedes ver que estamos en visual studio editor de código y lado a lado, abro style dot cs file y style dot css file. Como puedes ver en nuestro archivo CS de punto de estilo, ya creamos alguna variable num variable, variable char, list variable, map variable. Con eso, creamos una mezcla en el radio del borde del nombre. También crea una suma de nombre de función. Como puedes ver en nuestra variable num, guardamos 15 píxeles y en nuestra variable char, guardamos un stream, roboto En nuestra variable de lista, creamos una lista usando múltiples valores, 15 píxeles, 25 píxeles, 30 píxeles, y en nuestra variable de mapa, creamos un mapa. Al principio, voy a crear una clase donde voy a comprobar nuestra función de introstección punto sabor Dentro de la cali resis, voy a usar una propiedad CSS, que es padding. En primer lugar, voy a comenzar con la función de existir variable. Aquí voy a escribir variable existir, y aquí tenemos que pasar el nombre de la variable. Básicamente, usamos esta función con condiciones p y está retten true o false Esta función va a verificar si el nombre de la variable existe en este archivo, entonces va a devolver true. De lo contrario, va a devolver falso. Comprobemos la variable. Aquí voy a pasar dólar o variable nombre es mapa. Si configuro este archivo, se puede ver, vaya, tenemos que quitar el signo de dólar y luego establecer este archivo Ahora puedes ver que está escrito verdadero. Si paso un valor que no existe en nuestro archivo, en ese caso, déjame mostrarte mapas y luego establecer este archivo, como puedes ver, está escrito falso. Déjame mostrarte una cosa. Como puede ver, revisamos nuestra variable de mapa. Pero si corté esta variable de mapa de este lugar y la pego dentro de este selector, y luego configuro este archivo, como puedes ver, también es devolver true porque si las variables existen en cualquier parte de nuestro archivo, en ese caso, va a devolver true. Estas son nuestra variable global, pero ahora el mapa es nuestra variable local. Vamos a saltar a otra función que es variable global existir. Déjame mostrarte. Aquí voy a escribir la variable global existo. Si configuro este archivo, va a devolver false. Déjame mostrarte. Como puedes ver, está escrito falso, pero puedes ver nuestra variable de mapa existe en nuestro archivo. Entonces, ¿cuál es el problema? Porque nuestra variable de mapa ya no es una variable global. Ahora es variable local. Ahora nuestras variables globales son la variable num, variable char y la variable list. Si paso num aquí y luego pongo este archivo, como pueden ver, ahora está escrito true. Ahora, vamos a saltar a otra función que es mix in exist. Aquí voy a escribir mix in exist. En esta función, necesitamos pasar un nombre de mezcla. Aquí voy a copiar el nombre de mezcla del radio del borde, y lo voy a pegar aquí. Si configuro este archivo, como pueden ver, está escrito verdadero. Pero si elimino radio y luego configuro este archivo, como pueden ver, está escrito cae. Del mismo modo, tenemos otra función que es la función existir. Si la función existe en nuestro archivo, en ese caso, va a devolver true. Función Si paso el nombre de la función y nuestro nombre de función es sum y luego configuro este archivo, como puede ver, está escrito true. Vamos a saltar a nuestra quinta función, que es type off. Aquí voy a escribir tip off. En esta función, básicamente pasamos una extremidad variable. Aquí tenemos que pasar la cal variable. Por error, configuré este archivo, por eso está escrito en este error y nuestra variable lima es lista de dólares. Si paso esta variable y configuro este archivo, como pueden ver, está escrito nuestro tipo de variable, que es lista. De igual manera, si paso char variable de miembro y luego establecer este archivo, aquí se puede ver escrito cadena. Nuestro tipo de variable char es cadena. Esta función siempre escribe tipo variable. Ahora, vamos a saltar a nuestra última variable que está en escupimiento. Aquí voy a escribir en escupiro. No encuentro ningún uso adecuado de esta función porque es impresa como es Vail Si configuro este archivo, aquí lo pueden ver sentarse en Roboto. Solo lo usamos para fines de inspección. Si paso el último aquí y luego configuro este archivo, como se puede ver imprima nuestro menos como es. Creo que no es una función muy importante. Esto es para este tutorial. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 169. Tutorial de directiva de Sass @content: Hola chicos es bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con SAS, en este tutorial, vamos a aprender directivas de contenido SAS. Ya aprendemos sobre la mezcla SAS en nuestros tutoriales anteriores. Usando la mezcla, podemos crear un cono reutilizable. Podemos usarlo como funciones. Como puedes ver, creamos una mezcla llamada radio BDI, y en su lugar la mezcla, como puedes ver, utilizamos diferentes propiedades para diferentes navegadores Aquí usamos prefijo. Para Chrome, utilizamos web ket. Para Mozilla, usamos mose luego uso el radio de borde de propiedad real Como puedes ver, también establecemos el valor. Siempre que necesitemos llamar a la mezcla en nuestro selector, entonces necesitamos pasar el valor como parámetro. Como resultado en nuestro archivo CSS, está escrito así. Radio de borde de cinco píxeles. A partir de aquí, podemos pasar múltiples valores. Pero a partir de aquí, no podemos pasar ninguna propiedad CSS. Supongamos que quiero establecer el estilo de borde usando esta mezcla, pero no es posible a través esto y para resolver este problema, SAS introduce los viajes directos de contenido. Básicamente, lo usamos para enviar datos extra sin mezclar valor. Quiero decir con este valor, podemos enviar datos extra. Déjame mostrarte el ejemplo. Como puedes ver, usamos nuestra misma mezcla, pero aquí usamos directivas de contenido. Para eso, necesitamos escribir en el contenido rojo. Lo que sea que lo pasemos va a incrustar con estas VLTs es la forma de enviar datos a esta directiva Como puede ver, llamamos a nuestro radio de borde de mezcla y establecemos un valor de cinco píxeles. Después de eso, usamos tiss dentro del caliss que necesitamos para pasar los valores de directiva Estilo de borde, guión Estos son nuestros datos de directivas de contenido. Si configuro este archivo, va a devolver este código CSS. Después del radio de borde, se establece el estilo de borde das. Como puede ver, pasa nuestros datos adicionales después del radio fronterizo. Empecemos la práctica y veamos cómo podemos usarla. Como puedes ver, estamos en el editor de bacalao Leo de mi usuario, y lado a lado, abro Stylod CS y el archivo Styload CSS Ya creo una mezcla llamada border radius, BD radius. Y también, a esto lo llamo mezcla en nuestro selector. Y aquí puedes ver el resultado en nuestro archivo CSS. Y ahora quiero mandar datos extra con esta mezcla para eso necesitamos usar Cali Races. Y aquí voy a pasar el estilo de borde, así que tipo, borde, estilo de borde, dst. Como puedes ver, enviamos datos extra a través de esta mezcla. Pero si quieres imprimir los datos extra en la mezcla, para eso, necesitas usar directivas de contenido. Para eso, necesitamos escribir en el contenido rojo. Si configuro este archivo, como pueden ver, ahora es print boda style dans, enviamos los datos extra a través de las directivas de contenido Ahora podemos enviar múltiples propiedades a través de esta mezcla. Déjame mostrarte otro ejemplo. Esta vez, voy a enviar selector completo a través de estas directivas de contenido. Para eso, voy a comentar todas las líneas. Aquí voy a crear una nueva mezcla a la velocidad mezclando nuestro nombre de mezcla es sabor. Dentro del calicis, voy a usar solo directivas de contenido, agregar la tarifa contenida Para usar esta mezcla, voy a escribir incluir, agregar la tarifa, incluir nuestro nombre de mezcla es sabor. Después dentro del calicis, al principio, voy a tomar un selector y nuestro nombre seleccionado es la clase uno Clase uno, luego dentro de la resistencia Cali, voy a usar un color de propiedad Color y así aquí puedes ver usando esta mezcla, vamos a pasar el selector completo con propiedades. Si configuro este valor, como puedes ver, crea una clase punto clase uno y dentro de esta clase uno, estableces un color de propiedad. Y para ejecutar este contenido extra, utilizamos directivas de contenido. Déjame mostrarte otro ejemplo cómo podemos usar directivas de contenido. Supongamos que nuestro selector de clase uno está dentro del ID uno, para enviar este contenido dentro del ID, podemos usarlo de esta manera. Déjame mostrarte. Quiero establecer un IDH DAG y nuestro nombre de identificación es hombres. Entonces dentro de la cali resis, voy a pasar este contener. Voy a cortar este contenido y lo voy a pegar aquí. Si configuro este archivo, como pueden ver, se puso el contenido de directiva dentro del ID del Menú. Por eso imprime Menú primero. Podemos usar directivas de contenido de esta manera también. Ahora el menú se convierte en selector padre y la Clase uno se convierte en selector secundario. Déjame mostrarte otro ejemplo uso de directivas de contenido. Voy a comentar estas líneas. Al principio, voy a crear un botón selector de botón de punto. Después dentro de la alyss primero, voy a usar la propiedad border Borde un píxel. Voy a usar borde sólido, hijo y quiero color de borde. Al mismo tiempo, quiero crear un selector de Hober para este botón Aquí voy a llamar a una mezcla, que no la creo. En el rojo incluir. Incluya y nuestro nombre de mezcla es Hober. Son los alias, voy a establecer border con border con border con border con dos pixel Ahora voy a crear el nombre de mezcla Her. Aquí voy a escribir en la mezcla roja. Mezcla de hover. Después dentro de los calibrados, voy a crear un selector Posito para nuestra clase Para eso, necesitamos usar signo persona en persona columna Hoger Después dentro de los cálices, voy a pasar el contenido a la tarifa contenido Usamos este signo de persona porque necesitamos crear el selector Her usando el botón. Si configuro este archivo, como pueden ver, primero, crea selector de botones, y luego crea botón Su selector, y Boden con es nuestros datos de contenido extra Esto es para este tutorial. En nuestro próximo tutorial, vamos a aprender más sobre ello . Gracias por ver este video, estad atentos para nuestro próximo tutorial. 170. Tutorial de directiva de Sass @content 2: Hola, chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con las directivas de contenido. Como puedes ver, ya estamos en mi editor de código de Visual Studio, lado a lado, abro Style lot, archivo cs y archivo Styllod CSS La mayoría de las veces usamos directivas de contenido con media query. Déjame mostrarte un ejemplo con media query. Para eso, voy a comentar todos los códigos anteriores, y aquí me voy a llevar una etiqueta corporal. Después dentro del alyss, quiero establecer un color de fondo Antecedentes. Fondo gris. Y ahora voy a crear tres media query diferentes. En la pantalla media roja, y dentro de los versos redondos, voy a usar MaxWppty max W quiero establecer max Después dentro de los alias, voy a pasar un selector y nuestro nombre de selector es body Voy a usar el mismo selector y la misma propiedad. Por eso voy a copiar esta sección y pegar dentro los alias aquí voy a establecer el color de fondo rojo Entonces, cuando nuestra resolución de pantalla coincide con esta consulta de medios, entonces establece nuestro color de fondo rojo, y ahora voy a crear otros dos media query para diferente resolución. Entonces voy a duplicar esta sección, y aquí voy a establecer 1,000 píxeles. Quiero decir color de fondo azul. Azul. Así que a 1.000 píxeles corona de Brasil fijó nuestro color de fondo azul De nuevo, voy a establecer otra consulta de medios. Entonces voy a duplicar esta porción, y aquí voy a decir 800. A 800 píxeles, quiero decir color de fondo verde. Aquí voy a escribir verde. Este es un método CSS normal. Si configuro este archivo, aquí puedes ver el resultado. Como puedes ver en nuestro archivo CSS, se imprime tal como está, pero ahora voy a usar directivas de contenido para quading de medios Para usar directivas de contenido, necesitamos crear una mezcla. Al principio, voy a crear una mezcla a la velocidad mezclar en. Quiero usar esta mezcla en para la pantalla de medios. Por eso voy a establecer la mezcla de nombres de medios. Entonces dentro de los vestidos redondos, voy a pasar un parámetro, y nuestra variable de parámetro es llorar Dentro de los alorss voy a pasar este código, pantalla de medios Copia este código y voy a pegarlo aquí. Aquí voy a pasar por encima con variable. Dólar. Entonces dentro de los calibrss voy a usar directivas de contenido, a la tasa contenida Después punto y coma dos en esta línea. Si quieres usar esta mezcla, necesitas incluirla. Pero primero, voy a comentar líneas, las consultas mediáticas. Ya no necesito esto. Ahora voy a incluir esta mezcla con Incluir QR, a la tarifa incluyen. Y nuestro nombre de mezcla es media. Luego dentro del paréntesis, necesitamos pasar el valor Como puede ver, nuestro primer máximo es de 1,300 píxeles. Aquí voy a pasar 1,300 px. Después dentro de las calibraciones, aquí voy a pasar nuestro contenido adicional para directivas de contenido Nuestro primer seleccionado es el cuerpo. Dentro del Calibrass quiero decir fondo. Antecedentes. Tarifa. Como puede ver, utilizamos resolución total de tres pantallas multimedia, 1,300 píxeles, 1,000 píxeles y 800 píxeles Quiero duplicar esta sección dos veces. Aquí quiero pasar 1,000 pixel. A 1,000 pixel, quiero decirlo color de fondo azul. Azul. En nuestra última plusvalía de meteorito, quiero pasar 800 Valor Max con 800 y aquí quiero establecer el color de fondo verde. Si configuro este archivo, como pueden ver, se asienta sobre el mismo resultado. Imprimo tal como es. Pero esta vez no necesitamos usar media query word varias veces. Pasamos nuestro contenido a través de directivas de contenido, y ya creamos una mezcla para consultas de medios. Desde la sección include, puede cambiar el tamaño de la pantalla. Supongamos que voy a pasar 700 píxeles. Si configuro este archivo, como pueden verlo configuro nuestra media query 700 pixel. No solo eso no solo eso, puedes pasar múltiples propiedades. Déjame mostrarte. Con antecedentes, quiero decir frontera. Borde de dos píxeles. Sólido. Y nuestro color de borde es el blanco. Voy a configurar este archivo, y aquí se puede ver el resultado. Ahora en 700 píxeles, fijó nuestro color de fondo verde. También establece un borde sólido con color blanco. Este es el mejor uso de las directivas de contenido. Espero que ahora te quede claro. Así que gracias por ver este video. Estén atentos para nuestro próximo Tutorial. 171. Tutorial de directivas de Sass @media: Hola chicos, me alegro de verles de vuelta. Una vez más, estoy de vuelta con el nuevo tutorial relacionado SAS. En este tutorial, vamos a aprender directivas de medios SAS y a verdaderas directivas. Tratemos de entender qué son las directivas mediáticas. Aquí puedes ver una clase llamada container, y decimos container con 1,100 píxeles y centramos nuestro contenedor usando margin Si creamos mediaquery usando CSS, en ese caso, necesitamos usar mediaquery Puedes ver, establecemos un punto de interrupción en 1,150 píxeles y dentro de esta media query, establecemos un ancho de contenedor 900 Cuando el ancho del navegador alcanzó 1,150 píxeles, necesitan reducir el ancho de nuestro contenedor de 1,100 píxeles a 900 píxeles Como sabe, para fines de respuesta, necesitamos crear múltiples puntos de interrupción para diferentes tamaños de pantalla Necesitas crear mucha media query. Además, necesitamos escribir el ancho del contenedor cada vez. Innecesariamente, necesitamos establecer el ancho del contenedor varias veces Para resolver este tipo de problemas dice introducir directivas de medios. Para usar la directiva mediática, podemos manejar esta situación. Entonces veamos cómo podemos usarlo y reducir nuestras líneas innecesarias. Entonces como puedes ver, finalmente, estamos en mi editor de código de Visual Studio, y lado a lado, abro estilo Dot CS archivo y estilo punto archivo CSS. Ya abro mi directorio CSS en nuestra aplicación Koala. Entonces primero, voy a crear una clase, y nuestro nombre de clase es contenedor. Después dentro de la cali resis, voy a establecer contenedor semana 1,100 pixel También, voy a establecer Margen. Margen, quiero centrar el contenedor, así que voy a usar cero pixel. Además, voy a usar Auto vil y ahora quiero establecer diferentes media query para diferentes puntos de interrupción, pero vamos a escribir menos código en cese Dentro de los alias, voy a crear la moneda mediática al ritmo media Pantalla de medios, y dentro del proceso redondo, voy a establecer el punto de interrupción Voy a escribir guión máximo con 1,150 píxeles. Entonces este es nuestro primer punto de quiebre. Entonces a 1,150 píxeles de ancho, quiero reducir el ancho del contenedor Para eso, no necesitamos volver a escribir contenedor, necesitamos escribir con propiedad. Ancho 900 píxeles. Como puedes ver, su uso anidando metanfetamina De igual manera, voy a crear otros dos puntos de quiebre. Entonces voy a conseguir esta sección dos veces. Aquí, voy a establecer max con 950 píxeles. A 950 píxeles de ancho del navegador, quiero establecer el ancho del contenedor 700 píxeles. Como puede ver, no necesitamos usar el selector de contenedores todo el tiempo. Del mismo modo, a 700 píxeles de ancho, quiero establecer contenedor con 500 píxeles. Básicamente, se puede ver en mi archivo CS, trabajamos con un solo selector. Pero si configuro este archivo, como pueden ver, es crear un total de cuatro selectores diferentes. Como puede ver, nuestro primer selector es nuestro contenedor, y otros tres selectores son nuestros puntos de interrupción En SAS, si usamos en medios dentro de la sección de contenedores, lo llamamos nombres directos de medios. Aquí puedes ver la diferencia. En nuestro archivo CSS, cada vez dentro de la pantalla de medios, crea selector de contenedor. Después dentro del selector de continuer, ajusta el contenedor que Pero en nuestro archivo cs, si usamos directivas de medios, no necesitamos usar selector continuo una y otra vez. Este es el uso de directivas de medios. Tratemos de entender nuestras próximas directivas, que está en la raíz directiva. En nuestros tutoriales anteriores, aprenderemos sobre el anidamiento SAS Y aquí se puede ver el ejemplo de anidación. Como puedes ver, hay una clase padre dentro del vaso padre, tenemos una clase infantil, y también tenemos una clase secundaria secundaria y etiqueta cortada. Como puede ver en nuestra etiqueta padre, configuramos con 1,100 píxeles, y en nuestra etiqueta hijo, establecemos el color rojo, y en nuestra etiqueta subsecundaria, establecemos el color rosa Si compila este archivo, va a devolver este código CSS. Como puede ver, crea un total de tres selectores diferentes selector parent selector parent y child selector, también crea parent child y subchild selector Como puedes ver, es innecesariamente crear una etiqueta padre en nuestro archivo CSS Pero no quiero que los padres sean seleccionados cada vez. Podemos eliminarlo usando SAS. Para resolver este problema, SAS introdujo en equipos directos de raíz. En el siguiente tutorial, vamos a aprender cómo podemos usarlo prácticamente. Gracias por ver este video, estén atentos para nuestro próximo tutorial. 172. Tutorial de directivas de Sass @at root: Me alegro de verles chicos. En este tutorial, vamos a aprender en las directivas raíz. Como se puede ver, lado a lado, abrí estilo punto archivo CS y estilo punto archivo CSS. Al principio, voy a crear un grupo de anidación. Al principio, voy a tomar un punto de clase para padres y nuestro nombre de clase padre es IM. Entonces dentro de los versos cali, voy a usar la propiedad CSS y nuestro nombre de propiedad CSS es de color, de color verde. Entonces dentro de esta clase padre, voy a crear otra clase. Quiero crear una subclase y nuestro nombre de subclase es item per item rapper Entonces dentro del caliss voy a usar la propiedad CSS y nuestra propiedad CSS es color Color rojo. Entonces voy a tomar otro selector en nuestro envoltorio de artículos, que es imagen. Imagen dentro de los carbones voy a tomar con propiedad, nosotros, nosotros, Entonces fuera de este envoltorio de artículos, voy a tomar otra clase. Quiero crear otra subclase de este ítem, y nuestro nombre selector es dot item child Entonces dentro del calss voy a usar un fondo de propiedad CSS Fondo rosa. Si configuro este archivo, como puede ver, se crea automáticamente al cuarto selector. Nuestro primer selector es para nuestro artículo, y nuestro segundo selector es para envoltorio de artículos y nuestro tercer selector es para imagen, que está dentro del envoltorio de artículos. Nuestro último selector es item child select. Ahora, si notas puedes ver, es repetir el artículo de vidrio cada vez. Ahora decides que no quieres clase de artículo para esta porción, para el rapero de artículos y para nuestra imagen. Para resolver este problema, SRS introduce directivas en la raíz Es necesario escribir aquí en directivas raíz. Aquí voy a escribir al rojo en tropa. Entonces empiezo Calibass necesitamos cerrar esta clase después de etiqueta de imagen Aquí voy a cerrar el cis y después voy a poner este archivo. Como puedes ver en mi archivo CSS, elimina elemento de nuestro selector. Aquí puedes ver que no hay ningún elemento de nombre de clase. Es artículo de impresión, imagen de rapero de artículo, pero en nuestro selector de nosotros, puedes volver a ver la clase de artículo. Este es el uso de directivas en la raíz. Básicamente, se trata de nombres de selector innecesarios. Espero que hayas comprendido el punto. Déjame mostrarte otro ejemplo de directivas at root. Para eso, voy a comentar esta sección, voy a configurar este archivo. Al principio, voy a tomar un medio en los medios publicitarios, nuestro nombre de medios es impreso. Entonces dentro del Caliss voy a tomar una clase punto item Lepper Después dentro del caliss, voy a tomar otro selector, y nuestro nombre de selección es item Entonces dentro de los cálices, voy a usar la propiedad CSS y nuestra propiedad CSS es color, color leído Si configuro este archivo, puedes verlo imprimir nuestros medios. Y dentro de esta impresión seleccionas artículo por artículo. Después dentro del caliss imprime color rojo. Pero si te das cuenta, puedes ver que no hay ninguna propiedad CSS en nuestra clase envolvedora de artículos. Esta propiedad es de clase de elemento, pero también es seleccionar este selector, envoltorio de elementos. Pero no quiero este selector de envoltorio de artículos. Si queremos eliminar esta clase envolvedora de elementos, entonces necesitamos usar en directivas raíz. Et yo te muestro. Después del envoltorio del artículo, necesitamos escribir en las directivas rojas en la raíz. Entonces necesitamos iniciar nuestro Calibase también tenemos que terminar con este Calibase después Si configuro este archivo, como pueden ver, se quita el elemento rapero y ahora es seleccionar solo la clase de elemento. Como puede ver, seleccione directamente el selector de artículos. Ignora el selector de envoltorio de elementos, lo cual es completamente innecesario porque no hay propiedad CSS dentro de la clase contenedora de elementos. Espero que ahora le quede claro. Una cosa que hay que recordar en las verdaderas directivas vienen con predefinidas y lo llamamos sin. Déjame mostrarte el ejemplo de cómo funciona. Al principio, voy a quitar estas líneas, envoltorio de artículos. Entonces dentro de la prensa impresa, aquí voy a tomar una clase y nuestro nombre de clase es contenedor. Y dentro de la Cliivess aquí voy a tomar 22 propiedades Nuestra primera propiedad es con 130 píxeles. Además, voy a tomar otra propiedad que es de color, color leído. Creamos esta tesis con fines de impresión. Si alguien intentó imprimir la página, entonces va a imprimir nuestro contenedor con 130 píxeles y color leído. Pero en nuestro sitio web real, no quiero este color y nosotros. Para esto, aquí voy a usar nuestras directivas at root. En la lectura en la raíz. Dentro de los cálices aquí voy a usar las mismas propiedades Pero aquí, voy a cambiar los valores. Para nosotros, voy a usar 100 pixel y para el color, voy a usar el verde. Es malo si alguien intentó imprimir nuestra página web, necesita devolver 130 píxeles con y color rojo. Pero en nuestra página web, a través de 100 píxeles y color verde. Ahora voy a usar el valor predefinido de las directivas at root. Dentro de los vestidos redondos, voy a pasar sin, sin y aquí tenemos que pasar un valor llamado media. Es mezquino, también forma parte de la clase contenedor, pero sin medios. Después de establecer este archivo, se puede ver el resultado. Como pueden ver, nuestros medios impresos trabajan este punto hasta este punto y después de eso, imprimen sin medios. Este es nuestro sitio web CSS y este es nuestro CSS impreso. Espero que ahora te quede claro en el siguiente tutorial, vamos a aprender directivas de control. Gracias por ver este video, estén atentos para nuestro próximo tutorial.