Clase magistral de desarrollo web en HTML y CSS: crea tu primer sitio web

1. Avance: Doy la bienvenida a los kers HTML y CSS. Somos la vida real en el mundo. Desarrollo Off Web Mi nombre es Wish College. Soy desarrollador e instructor Web, y esa será nuestra guía en las próximas horas. Clase Indus Aprenderás lenguaje HTML Ése son los elementos estructurales básicos utilizados para crear páginas Web y CSS para darle estilo al contenido de pH, llevándote a una perfección fuera y diseño. Aprenderás el grado HTML y CSS oro de una manera sencilla, eficiente y divertida. Discursivo se divide en modelos donde se aprende en el primero. También se presentan todos los elementos básicos utilizados en un arma. El avance. Una vez que eso te permita llevar su sitio web a otro nivel en el segundo módulo, te enseñaré la sintaxis y propiedades del lenguaje CSS, que mejoran el diseño de tu sitio web. Al final de discutir, serás un experto en HTML y CSS pudiendo construir tus propios sitios web sin complicaciones en montaña rural y disfrutar 2. Introducción: el mundo de Internet y su crecimiento. Tráenos una serie de nuevos retos y posibilidades como crear su negocio online, genera contenidos multimedia, uso fuera de aplicaciones de redes sociales y otro tipo de servicios para crear contenidos online. Utilizamos el sitio web por su lenguaje HTML, que se define S a protege lenguaje de marcado utilizado para estático donde los contenidos de la página se utiliza este lenguaje para describir la estructura fuera de las páginas web utilizando el marcado. HTML es el lenguaje que permite representar muchos contenidos diferentes. El lenguaje como elementos representados por los tecnicos que se utilizan para crear contenidos como las tablas, imágenes,enlaces en papel de Vera Griff imágenes, y así uno. En los próximos videos, aprenderás a crear algunos de estos contenidos en tu página web. 3. Editor de código: L O alumnos después de que aprendas en primera clase utilidad fuera lengua veg Daniel. Presento ahora el software usado para escribir cabra para varios idiomas, incluyendo HTML. El programa utilizó sus corchetes y de código abierto inteligente y moderno, donde podrás escribir tu frío más rápido al reconocer automáticamente diferentes elementos de culto y usar el ámbito de vida a en la derecha y columna, que te permiten abrir con un ratón. Haga clic en el navegador utilizando este Aiken en el panel derecho fuera de la aplicación. El izquierdo y la columna enumera los archivos de trabajo, y debajo hay una vista de carpeta. En este último fuller. Se puede ver un archivo con un solo clic sin abrirlo realmente. Con un doble clic se abre el archivo para su edición, agregándolo a la lista de archivos de trabajo Para instalar. Tienes que ir a este sitio web briquetas punto io y hacer clic en descargar brackets. Para empezar a descargar en archivo stel, es necesario seguir instrucciones que son muy fáciles. En unos dos minutos, tú F corchetes en sigilo. El último paso es ir a sus programas y seleccionar corchetes para iniciar la aplicación. Ahora puedes empezar a escribir código HTML. Nos vemos a continuación. Alumnos de video 4. Estructura de HTML: El objetivo principal de esta clase es aprender la estructura básica, a menudo. Documento HTML. Antes de empezar, voy a crear un nuevo archivo de correo electrónico asalariado para usar para la forma en que las muertes de página que quiero crear . Voy a los hombres un archivo, selecciono nuevo y seguro en archivos de carpeta con nombre, casa y extensión HTML. Como dije antes un archivo HTML como diferentes tipos de contenidos razona por qué usamos X para distinguir entre ellos. La estructura principal. Horno documentos html como un Siris de impuesto que son comunes a todos los documentos lo haré ahora mismo en el Creado archivaron las cubiertas que hacen partes de esa estructura. En primer lugar, HTML debe comenzar con el tipo de documento declaración tipo pato HTML. Esta declaración define la muerte. Este documento está cumpliendo con la versión cinco off html. Los documentos HTML comienzan ahora con HTML de cubierta, y nosotros cortaríamos html en la parte inferior del documento que es el elemento raíz, a menudo página html. Siguiente. El elemento es el primer elemento que aparece después de la etiqueta HTML de apertura. En el documento en colocamos cosas como el título de la página Usando title tech, agregamos JavaScript a nuestro parche con script, tech, enlace final a hojas de estilo externas y otro recurso es finalmente la parte visible fuera de la documentos. Dónde escribimos gran parte de nuestro abrigo. Esta parte fuera del documento HTML está entre la etiqueta de cuerpo de inicio y final Tenemos ahora. Hacer mi instructor fuera. Nuestro documento definido Ya está listo para crear los contenidos en su página web. 5. Elementos de HTML principal: bienvenido de nuevo a este nuevo video. Ahora se define esa estructura de documentos. A ver, ¿cuáles son los elementos de un archivo HTML? Como dije en la introducción HTML como elementos representados por etiquetas un elementos HTML usualmente consiste fuera startek y un Antec con el contenido insertado entre ellos. Detectar el nombre especificado. Cierto tipo de contenido que puede ser un ingreso de imagen, tablas ref menos cesan y otro tipo de contenidos. Cuando usas el software y escribes la señal menos que que puedes ver, eso es aparecer mucho texto que puedes usar cuando escribes una deuda, automáticamente crea la baraja final como ves cuando creo la estructura de documentos . En esta situación de ejemplo. Escribí una etiqueta de párrafo iniciando y terminando tech, y ahora escribo tabla de tecnología que se utiliza para crear tablas en HTML. Ahora que ya sabes usar texto para crear diferentes contenidos, pasemos al siguiente nivel. No te pierdas el siguiente video, donde aprenderás qué son elementos, atributos y su importancia 6. Atributos HTML: los elementos HTML. Como usted vio antes yo representé por Tex. Cada elemento puede tener un brazo son atributos una raíz neta proporcionan información adicional sobre un elemento. Siempre se especifican en el startek y suelen venir con un nombre tributo y valor corresponsal. Ya voy a abrir. Detectar que se utiliza para las imágenes. E m g tec. Si recuerdas, dije en el video de HTML Elements que usualmente startek como una tecnología final correspondiente. El tecnológico de imagen es uno de los textos que no siguen esta regla. Apenas tener un dick inicial regresando ahora a la tecnología de imagen en los atributos menos off voy a mostrar a primero Do with Death recibe un número que especifica el con off la imagen, y el otro es el que tengo que recibe el I 've fuera de la imagen insertada con estos dos atributos. Siempre puedes cambiar el tamaño de la imagen en tu página web. Esto son sólo dos atributos. Muerte. Un elemento de imagen puede f cuando añadimos imágenes en los futuros videos, puedes ver más atributos para este elemento 7. Crear título y encabezado de página: Hola otra vez y felicitaciones por llegar a. A pesar de la maldición, aprenderás en las mejores lecciones la diferencia convencer y texto que puedes usar en HTML. Ahora es el momento de construir un sitio web. El objetivo principal de las próximas lecciones es crear texto e imágenes, contenidos en páginas, enlaces fuera de sitio web y F papel para navegar entre ellas. El equipo que voy a desarrollar es un viaje de agencia donde voy a describir y siempre un destino. El primer cambio que voy a hacer en la página es el título de la deuda aparece en la parte superior, cambiando el contenido fuera de title tech para viajar con nosotros. Ahora voy a escribir mi tema usando la tecnología de adición. Html. Eddings proporcionan información valiosa al resaltar temas importantes y comprender la estructura de los documentos. Otra gran ventaja es el uso de los motores de búsqueda de la muerte, agregando como indicador de qué texto es más importante en una página. Si tienes que comer unas páginas integrales, la que use Eddings debería aparecer por encima de esa. La muerte no tiene en los resultados de búsqueda. HTML usa seis niveles fuera agregando mazos edad 12 h seis, donde la edad uno define lo más importante y un seis. El menos importante tener. Entonces voy a escribir mi cualquier cosa usando el código HTML, empezando por la tech it one e insertando los mazos que se utilizan. Tema de la página S hizo como te dije antes de un ponche que habla de destino de viaje disfrazado. Voy a hablar de India y describir alguna información sobre este país para estos tipos. Pongo el texto bienvenido a él. No obstante, entre agregar Tex, voy a hacer otra copia y cambiar la adición de tecnología a los dos años de edad y ver las diferencias entre ellos. Ahora que hago los cambios, se pueden ver las diferencias en hermano usando la revisión de vida para empezar en la parte superior con tener uno y abajo con cualquier cosa para en la parte superior. Se puede ver el título viajar con nosotros que cambio en el titulo tech. Tengo ahora mi tema principal en Where, Pledge Using the terminings. Siguiente video, hablaré de párrafos 8. Inserta tus primeros párrafos: Bienvenidos de nuevo, estudiantes. En este punto fuera de la clase, cambiamos el título de la página y escribimos el tema principal usando la tecnología de adición. Es hora de escribir algún texto sobre el tema de la página. Voy a entrar en esto ahora. los párrafos. Ellos son uno de los más utilizados. Html TEX El párrafo Tech se utiliza en pares, la cubierta de apertura usando P yendo antes de los textos de ref oso y la carne de tecnología de cierre estar yendo tras el texto. Debes usar los párrafos a bloques de texto dentro de tu página web. El navegador en automáticamente salta la línea antes y después de tus párrafos para darle a la página un aspecto consistente. En mi carpeta hecha, tengo un archivo llamado Text India, donde tengo los mazos que quiero para la página. Basta con abrir, copiar y ahora insertar entre la etiqueta de párrafo. Ahora que pego el texto, vamos a guardar el archivo y ver cómo se ve en el navegador. Ya puedes ver el texto en nuestra propia página con el agregado anterior. Si bien en mi archivo HTML, el texto de copia aparece con muchas líneas y espacios manu entre palabras. El navegador no refleja estas diferentes líneas en especias, apareciendo todas las cubiertas caen con esto. Las líneas en espacios son ignoradas por el navegador. Si hago ahora una copia fuera del contenido del párrafo, se puede ver que la página como otro oso ref extremo para usar fuera de los padres. Como dije anteriormente, en la línea se rompe en el principio. Indios fuera de la nueva barrera Si si quieres tener más saltos de línea entre párrafos o 80 y sobre texto, imagen u otro contenido, puedes usar la tecnología de salto de línea que está representada por B R. Este mazo como solo apertura dick Utilizo ahora mi archivo html para poner saltos de línea dentro. Mi primer ref de repuesto mordió las palabras Océano e India y otro entre los dos párrafos con el texto principal que puedes ver en el navegador. X esperaba que tuvieras un salto de línea después del trabajo oceánico y si más una ruptura de línea entre los riffs do bear, Los saltos de línea son muy útiles, y no podemos simplemente dejarlos caer en nuestro HTML donde queramos cambiar el espaciado entre ciertos elementos. Después de estos dos textos, aprenderás en la siguiente lección algún texto para formar un texto. Nos vemos pronto 9. Formateo de texto: hola otra vez después de hablar de párrafos y etiquetas de salto de línea, presentemos los nuevos tecnicos, empezando por negrita y cursiva cuando quiero definir un texto bowl. Solía ser tecnología que se puede usar en una sola o múltiples palabras hacia adelante y se puede definir dentro de otra carpa como un párrafo o un enlace leaper o fuera, simplemente usando la tecnología negrita esto para gravar. utilizó un negrita y cursiva en versiones anteriores fuera de HTML. Son declarativos como depreciados, pero los navegadores deben seguir apoyando textos depreciados, pero con el tiempo es probable que las gradas se vuelvan obsoletas. En el futuro. No obstante, esto ha sido sustituido por la tecnología de énfasis representada por E. M y la tecnología de trazo por defecto. Esto se exhibe en cursiva y negrita, respectivamente, por lo que podemos usarlos como sustitutos de director. Además, estos nuevos textos se cumplen con los nuevos estándares HTML más recientes, el énfasis ed stroke html Tex. Utilicé de la misma manera que otros textos. Colocamos la etiqueta de apertura antes del texto y luego la tecnología de cierre después del texto que queremos escribir. Ahora voy a usar nuestra página HTML para estos dos textos en situaciones primero para formarlo con fuerte valía tecnológica, India En mi párrafo Solo hay que poner la palabra dentro. El fuerte inicia una tecnología final para la otra situación. Quiero crear fuera del oso ref. Tendríamos fuertes formatos de énfasis. El texto. Este es un texto. Nos haríamos etiqueta fuerte mirando a la página después de guardar se ve el resultado esperado con el mundo con fuerte énfasis formato dentro oso, ref y el siguiente exterior. Hagamos ahora el mismo procedimiento con E m. Tech. Yo usé las mismas palabras para hacer este cambio. En primer lugar, la palabra India dentro del texto y después el texto donde voy a cambiar las mazos de fuerte. Esperan enfatizar Destaca que permite que el texto con tamaño tele espere en el navegador sea visible. los cambios usando la tecnología GM el Martek es el siguiente en hablar. Se utiliza esta etiqueta. Si quieres resaltar partes de tu texto, veamos ahora cómo se ve en el navegador. Vuelvo a usar la palabra India para poner entre esta nueva tecnología abriendo el navegador. Se puede ver distrito de deudas. A mí me gusta hacer palabras como dije antes, después del Martek. Es hora de pequeña etiqueta que, como dice el nombre, define un texto más pequeño usando Ahora esta baraja para fuera. Texto fuera de mi ref desnuda y ver los resultados. Con la adición fuera de esta nueva etiqueta en el navegador, ve que parte off oso texto izquierdo es ahora más pequeño, los dos lastex nuestra vista y en su lugar el primero definido aparte de texto que se borra en un documento y el segundo una palabra nuestros techs que se inserta en un documento. En el siguiente ejemplo, se usarán juntos. Quiero eliminar la palabra India y poner Tailandia el trabajo que quiero poner en tamaño texto trato es India y en su lugar vale Tailandia. Para la palabra eliminada, el navegador huelga una línea a bajo valor eliminado, y el trabajo insertado ahora está subrayando después en la tecnología de inserción. Ya está hasta ahora, estudiantes, nos vemos próxima lección 10. Insertar imágenes: bienvenida de nuevo a los alumnos después de haber tenido texto Informa. Ahora vamos a usar imagen en nuestra página web. Para agregar imágenes hay que usar la imagen. Toma yo soy G que solo tienen una tecnología de inicio. Voy a escribir mi Ted usando para atributos importantes que proporcionan información adicional sobre este elemento HTML. El primero y el más importante después produjo la fuente que especifica las mascotas fuera del archivo. Voy a tener mi fuente escribiendo CRC y el tramo final que está en mi directorio principal. Y si el nombre de India que J. Peg, se puede ver que software reconocido automáticamente defile deuda de imagen está en mi directorio principal , lo cual es muy útil. Los otros tres atributos importantes son el ult que especifica un texto alternativo para una imagen. Si la imagen no se puede mostrar. Por último, las TIC y con fuera de la imagen para poner la imagen con el tamaño que quieras, lo haré si ahora la Alltech y escribe texto India imagen después de dis tag I derecho, tengo con valor por cientos de píxeles y quiero hacer con el valor off 300 pixels Ahora guardé el documento y puedo ver la imagen en mi navegador. Si cambias una fuera del tamaño en rutas, por ejemplo, tengo 200 puedes ver que la imagen aparece con diferente tamaño. Como era de esperar, Menos acción que quiero hacer es cambiar el nombre de la imagen, para no ser reconocido por el navegador y se puede ver el texto que definimos en la baraja, todo cambiando en mi abrigo a India. Uno. Eso lo veo en el navegador. Ahora no se reconoce la imagen y aparece el texto en la imagen. El siguiente paso fuera de esta página web es enlazar a páginas fuera del sitio web utilizando un per links. 11. Listas de HTML: Para este nuevo video, aprenderás a crear listas. HTML ofrece dos formas de especificar menos información que debe contener cuando nuestro mercado menos elementos usando tech you l creas un A Norbert menos marcado con balas y con tech O l y ordenarlo menos lo que proporciona un número de menos para este ejemplo y usando ph propio punto html Quiero crear un en orden al menos después de la muerte de la imagen me m en la página antes de empezar mi menos solo voy a crear un párrafo con texto, conocer ciudades top de la India. Y después de este texto, pondré mi lista en orden con tres nombres de ciudad, empezando por mi tech Tú l defino que i f y en orden lista y entre la u l iniciando y terminando tech, pongo cada elemento en mi lista dentro el tech l primer elemento off menos es texto Balmain. El segundo será Deli City y último Elements brazalete son ahora tengo en mi página listada tres ciudades usando una lista ordenada como puedes ver en el navegador si cambias de ti l 20 l ves que en lugar de fuera de las balas te F números en cada elemento fuera de la se liberan. Como puedes ver, es muy fácil crear arrendamiento con HTML. Por ejemplo. Puedes usar estas listas fuera de las ciudades para crear individuo callejero por apenas muerto. Describa cada ciudad usando April ings dos filas entre las páginas. Es sólo una sugerencia para utilizar esta lista. Gracias y nos vemos próxima lección. 12. Crear hiperenlaces: Hola hacer esta nueva clase. Quiero crear cualquier por enlace entre dos páginas diferentes y usar enlaces internos para saltar con parte especificada fuera de la página actual, empezando por April Inc. Primero, voy a copiar mi propia página y crear otra deuda. Doy el nombre sobre dot html ahora acaba de abrir el nuevo archivo HTML y elite los textos más antiguos y reemplazado nueva deuda de contenido. Quiero que mi segunda página esté segura de que el segundo tono sea diferente. El nuevo texto está en mi archivo de texto que utilicé para mi primera página. Voy a copiar ahora el texto y hacer el cambio en el nuevo tono. Después de cambiar el texto, utilizo otra imagen usando este mismo abrigo. Solo necesito seleccionar en mi directorio principal la imagen que pensamos viajar dot Jay Pek en lugar India dot jay pek. Ahora tengo mis dos páginas con todos los contenidos que quiero, y es momento de crear los Sperling's. El tecnológico que se define para los enlaces de abril es el ATEC. Una de las respuestas más importantes arranca de este elemento es un borrador de atributos, que indica el destino del enlace que puede ser un enlace externo a y donde Patch son simplemente un nuevo dedo del pie de votación. Otra página que tengo en mi directorio. Voy a abrir mi a tech y mi atributo. Un borrador recibe mi segunda página sobre dot html ahora solo F dos justo entre el inicio y y etiquetar el texto que como el April Inc escribo para dext disfrazado sobre nosotros y cierro finalmente, Atec viendo ahora las tuberías en el navegador. Puedo ver que el por link en los mazos y si hago clic abrí la página sobre puntos html s que queríamos ahora solo hay que crear un enlace desde la página sobre punto html hasta la página home. Placas sobre punto html i f. utilizar lo mismo importó para conectarse a su propio tono con un borrador de página receptora en punto html y justo en página, creando un Abril vinculado a la página inicial que terminamos. Ahora la parte más profunda del enlace puedes navegar ahora entre estas dos páginas. Otra opción es enlazar a una parte específica de su documento en lugar de otra página. Si deseas enlazar a una parte específica, puedes usar atributos de idea que te permitan identificar una parte de tu pitch y gema a la sección usando cualquier página por enlace enlaza nuestros derechos cuatro veces cuando tienes mucha información en una Web y quieren darle al usuario una forma de saltar a una sección en particular. En el siguiente ejemplo, utilicé este método solo para ir de abajo a la mordida, paré encima usando cualquier perlado y creando un I D. En el encabezado fuera de la página Para esta situación, pongo mi tecnología de adición y me d con nombre back top, y ahora se reconoce esta parte off documento. Con esto, d ahora solo necesito crear un enlace en la parte inferior de la página para saltar a la parte superior, usando en mi tecnología el atributo, un borrador con la etiqueta de ceniza y la idea que doy en la parte superior. Tener el último paso es escribir texto borde superior a F cualquier texto perlado para saltar a la parte superior de la página. Yo sólo voy a hacer algunas copias de la imagen para poner más contenido en la página y ver mejor el efecto de los nacientes. El eslabón inferior ahora salta al principio como te puedes ver. Entonces por ahora, nos vemos próxima lección 13. Tablas: Hola. Es hora de crear establos en tu página web. Las tablas HTML son adecuadas para cuando se desea presentar información en una clara y estructura, siendo más fácil disponer eso, como texto, imágenes y enlaces. Echemos un vistazo al HTML utilizado para crear una tabla. Existen cuatro textos principales utilizados para crear tablas. Se define una tabla HTML con tecnología de tabla que define la tabla de inicio y se han correspondido, terminando tecnología hasta el final. Fuera de la mesa, es fila de tabla se define con tecnología TR. El otro se define con th tech, que por la tabla de visualización falla Eddings con tanto lejos Matt como Central dando más énfasis a nuestra columna de mesa. Methinks un dato de tabla se define con Tedy y se utiliza para escribir diferentes tipos de datos en celda. Todo este lejano textos como una tecnología de inicio y final para definir el principio y el final cada elemento. Para el siguiente ejemplo, quiero hacer una tabla con dos columnas y dos filas, que se apagó la rosa es el final de la tabla. Como dije anteriormente, la tabla comienza con el tech de mesa, y después de éstos quiero mi papel de liderazgo usando el TR Tech. Y ahora defino los datos dentro de la fila como agregando, usando el th dos veces porque tengo dos celdas para poner datos de encabezado dentro del th tex escribo agregando una y encabezando a y mi fila está ahora termina para crear la segunda fila. Yo ahora mismo mi tr tech y entre el inicio y el final en Tech, creo dos textos TD para poner a mi hija en las dos celdas, escribiendo datos uno y fechados hasta ahora. Es hora de guardar mis cambios y ver los resultados en el navegador. Como era de esperar, obtenemos una tabla que subir en dos columnas con la adición en la primera columna y que en la otra fila, como se puede ver, es muy fácil crear tablas usando HTML. Nos vemos siguiente lección. 14. Insertar comentarios: para esta lección, hablaré de fuera para hacer comentarios en sus abrigos. El stick de comentarios se utiliza para insertar comentarios que no se mostrarán en su navegador y no afectan a su abrigo HTML y corresponsal. Donde el pH espera La principal ventaja de usar comentarios es la explicación fuera de la derecha y abrigo teniendo especial relevancia cuando el usuario está dando los primeros pasos en HTML, o incluso para usuarios con más experiencia cuando usan abrigo muy extenso y trabajan en muchos proyectos y a veces son muy meses sin trabajar en alguno de ese proyecto. Como puedes ver en esta página, ya puse los comentarios fuera de Siri para insertarlos. Yo usé la tecnología común, y entre la tecnología inicial y final, inserto los comentarios que explicarán cada parte del abrigo, cada uno elementos diferentes que m. En mi expediente. Alguna vez comenta, simplemente diciendo qué tipo de contenido llamar pondrá como párrafo, establos, listas y demás. Si lo desea, puede agregar comentarios más extensos para explicar en detalle lo que hace cada parte del abrigo. En este ejemplo, escribo un comentario diciendo que he ordenado lista usando el ol Tech para explicar lo que el apilado esto Es todo por ahora. Nos vemos siguiente lección 15. Estilos de HTML: como antes. Dije, el HTML se utiliza con la propuesta de crear contenidos para las páginas de Internet. Pero cuando hablamos de la aparición de sus elementos, HTML es muy limitado. ¿ Qué? No es bueno. Si estás tratando de darle a un sitio web un diseño o identidad personal, su propuesta de este video es solo para dar una ligera introducción a los estilos fuera del contenido HTML para resaltar parte del potencial fuera del lenguaje de las hojas de estilo en cascada, también conocido como CSS, volviendo a la apariencia fuera de los elementos. El CSS es lo que permite realizar los cambios fuera de color, posición y otras propiedades fuera de los elementos, utilizando un atributo con estilo de nombre que recibe una propiedad CSS y valor corresponsal que habilita el cambio fuera del estilo en el Elemento HTML. Entonces la regla principal es el uso de un estilo asociado con ataque, y para este ejemplo que utilicé en el ataque, P creó un estilo Edward para cambiar el color de la propiedad del texto con valor azul. El inmueble y el valor definirán qué cambiar en los elementos HTML para el párrafo de este tipo modificará el texto que llama a azul. Como se puede ver en el navegador. Existen otras propiedades utilizadas en párrafos que podemos utilizar. Estilo de malas hierbas Atributo como texto la línea para la alineación del texto, tamaño del teléfono y la familia de la diversión. Para los fondos de texto, puedes aplicar Martin una regla en tu tecnología. Tan solo hay que separar cada gobernado por semi colon. Yo quiero postularme ahora. Otra norma a este párrafo. Cambiar el tamaño del texto Utilizando la propiedad de tamaño divertido con valor 14 píxeles en el navegador es visible. El cambio con este nuevo valor Otro gran cambio que podemos hacer es el color de fondo fuera la página que por defecto es blanco. Estos cambios se deben aplicar dentro del body startek si quieres aplicar el color a toda la página usando la propiedad de color de fondo dentro de la etiqueta body, definí color de fondo con valor luz justo después de guardar el archivo, podemos ver que el proceso ahora refleja estos cambios con el nuevo color de fondo gris claro. Es todo por ahora. Gracias 16. Formularios de HTML I: Bienvenido de nuevo a este nuevo video. En los próximos minutos se dedican a crear formularios. Los formularios HTML son uno de los principales puntos de interacción entre el usuario y un sitio web. Permiten a los usuarios enviar diferentes tipos de datos desde sitio web fechados que la mayoría de las veces es Cento, un servidor Web que tiene la función de recibir y administrar datos. puede hacer un formulario HTML a partir de campos de texto, botones, botones, selección, casillas de verificación o botones de radio. La principal diferencia entre el formulario HTML y el simple documento HTML es que la mayor parte del tiempo los datos recopilados por el formulario se envían a un servidor Web. Como dije anteriormente en la unidad de ese tipo configuró servidor Web para recibir y procesar los datos . El propuesto fuera de este video no es configurar un servidor Web. Es aprender a crear diferentes tipos de granjas utilizando campos de texto, enviar botones y botones de radio, empezando por el abrigo que te ayuda a entender mejor para crear la granja. El formulario HTML siempre comienza con Fordham Tech que representa una sección de documentos que contiene controles interactivos para enviar información a un servidor Web dentro de forma de inicio y cierre Tech es donde insertamos los diferentes elementos. El elemento más popular es el elemento de entrada HTML que se utiliza para crear controles interactivos para formularios basados en Web con el fin de aceptar datos del usuario, Existen diferentes tipos fuera de elementos de entrada como campos de texto, botones de radio, casillas de verificación y otros. El primer ejemplo a mostrar utiliza dos tipos fuera de los campos de texto de elementos para recibir información y un botón de envío. Empieza a escribir mi abrigo. Creo la sección de inicio y final usando la forma tecnológica. El siguiente paso es agregar los elementos fuera de la granja, insertando tecnología de entrada que hay un atributo llamado Tipo que recibe el tipo off elementos disfrazados. Quiero un campo de texto a derechos, por lo que este elemento recibe un texto de valor. El siguiente después es el nombre del atributo que utilicé para recibir el nombre por el cual se reconocerá el valor en cierto en el campo de texto para disfraz. Doy el atributo nombre, valora mi nombre. La última acción es el nombre correcto antes de la tecnología de entrada para aparecer los pasos antes del campo de inserción de texto haciendo una visión general. Primero i f un elemento de entrada que es de tipo texto y vamos a recibir un valor que será reconocido como mi nombre en el navegador es visible. Esto en Patel Mint, donde podemos escribir textos ahora es el momento de crear otro elemento similar que reciba la edad en lugar de nombre. Apenas me ganaron el abrigo anterior y ahora la edad correcta antes de entrada Tech y cambiaron el atributo de nombre a mi edad para ser reconocido. Ahora con este nuevo nombre, menos cambio a Mike se cambia el tipo para él al lado de número porque ahora en este campo, quiero recibir una edad que está representada por un número a presentar Ahora esta granja nos sentimos que tengo para poner cualquier botón de poner. Tengo que cambiar el tipo de texto a enviar porque ahora tengo que enviar la información requerida Este elemento de entrada como un valor después de ruta que recibe deudas, muestra el botón de envío de muerte. Yo solo quiero que aparezca texto enviar en botón. El show del navegador era ahora este árbol elementos de entrada primero recibe texto, otros números y para el último para confirmar los datos insertados, se puede ver que el segundo campo que recibe números como flechas para aumentar y disminuir el número que pones en el campo. Esta situación sólo es posible porque el campo se definió como número y no texto. El detalle final es la dirección que se puede ver en la parte superior fuera de la página, donde se ve negando atributo que definí como mi nombre y mi edad que ahora están recibiendo la información que escribo en los dos campos. Mi nombre recibió información deseo y mi edad. El número 35. Se trata de una inteligente esperada en pelea información que se ha presentado en la finca. 17. Formularios de HTML II: después de la primera forma, es hora de crear una granja que reciba contraseñas. Quiero ahora una nueva forma con el registro que recibe tipo de texto y cada valor mi registro en el nombre de las actitudes. En el segundo elemento de entrada, quiero recibir la mejor palabra. Por lo que la mía puso elemento como contraseña de tipo al texto, no ser visible. Defino ahora ahí a través de la noche para el arreglo con valor lo mejor de mí. El último elemento es el botón de enviar como creamos en el ejercicio anterior. Puedo ver ahora en el navegador esta nueva forma que es muy utilizada en situaciones sobre indicación en sitios web. Ahora que alguna vez me forma con lugging Best y submit button, voy a tener un botón de radio a la última forma creada para definir el género fuera de la persona. Para usar este tipo off elemento de entrada, tengo que cambiar el tipo a radio y atributos definidos. Nueve con valor mi género a mis dos elementos de entrada. Cuando se tiene una lista de botones de radio desarrollados dados a nombre después, debe ser el mismo para cada opción en lo menos para asegurar que Onley una entrada de radio en el grupo pueda seleccionarse cuando se envíe la granja, incluirá la content off value attribute que definí a cada botón de radio seleccionado para el primer elemento de entrada desarrollado. Defiant es masculino y la segunda hembra. Tengo ahora mi nueva granja con el botón de radio y ella en el navegador Arnel visible los cambios con este nuevo tipo de campo. El último cambio es la adición de un botón que hace que el reset apague la información que pones en la granja. Eso podría ser útil cuando estamos llenando el formulario y hay un error por escrito. Solo necesito otro elemento de entrada donde defino mis restablecimientos de tipo, y quiero que aparezca el botón con el botón de reinicio de texto abriendo el navegador. Ves que al seleccionar este botón, la información en los diferentes campos de texto brillará como se esperaba 18. Introducción a el contenido de multimedios: multimedia como sonidos, música y archivos de video pueden agregar algunos contenidos interactivos para atraer y toda la atención fuera de los espectadores. sitios con estos contenidos son frecuentemente preferidos por los departamentos de marketing porque fuera su capacidad para presentar completamente la marca usando abrigo que ha estado disponible desde hace años. Ahora puedes vaciar cualquier número de diferentes tipos de archivos multimedia, creando contenidos increíbles en un sitio web. En los próximos videos, te mostraré un texto fuera de HTML de Siri que te permitirá añadir elementos multimedia con propuesto fuera llegar al contenido de una página web. 19. Insert videos en un sitio web: Hola. Esta es la primera lección donde uso un video de elemento multimedia que se utiliza para especificar video en documentos HTML. Para introducir este tipo de contenido, utilicé video de ataque que tiene la función Toe end video union document. En la autointroducción de la tripulación al HTML, aprendes que los elementos pueden tener atributos. Deuda proporciona información adicional sobre el elemento específico para este tipo de elemento. Hay dos atributos importantes con los que he terminado, como el uso en las imágenes, porque si yo y con no se establece la prenda, carga mi video de parpadeo salvajemente. Para este ejemplo, utilizo elemento de video con el con apagado para 100 pixeles, y he apagado 300 pixeles. Por último, los atributos de los controles se utilizan para ofrecer controles que permiten al usuario controlar la reproducción de video , incluyendo búsqueda de volumen y zumbido reanudación Blais Vic. Dentro del video, utilicé esta pila AR que recibe archivos de video alternativos, que el navegador puede elegir. El Browder simplemente usará los primeros formatos reconocidos que utilicé para que estos chicos atribuyan en este elemento. CRC dos especifica la fuente de video y el tipo de atributo para decirnos el tipo de medio de Internet fuera del recurso de medios para este ejemplo. El archivo es película que y antes, y el tipo es video em antes uso un nombre antes de archivo, pero el archivo html soporta otros dos formatos de video diferentes. Donde ellos y abrazar. Por último, el texto entre el video Tex sólo se muestra en navegador muerte no soportan los elementos de video disfrazados. Pongo el mensaje inválido, hermano. Después de terminar el frío, veamos cómo se ve en el brother de video. Como se esperaba como un apagado serio. Qué roles te ayudan a administrar el contenido de video. Ahora bien, si quieres eso, el video comienza automáticamente en tu página. Tan solo f para cambiar los controles de atributos cuando creo y se ve en el navegador después de guardar los cambios. Death Review Inicio real por sí mismo. Es todo por ahora, Estudiantes. Nos vemos siguiente lección. 20. Insertar audio - HTML5: hola Después de David te. Hablemos de la de ustedes. Ese es otro elemento multimedia importante cuando quiero insertar sonidos. Usé value tech y, al igual que el video usa los controles atributo para mostrar de tus controles como Bligh bows n volume . Por lo que empecé mis elementos de audio que a la muerte a través de él controla a continuación el elemento fuente que permite especificar alternativa. Todos los archivos que el hermano pueda elegir del navegador utilizarán el primer formato reconocido , como en el video. Para estos elementos utilizo contra atributo CRC para recibir el archivo fuente. Y para este ejemplo, quiero soplar un archivo cargando el atributo tipo de onda dock, especifica el tipo de archivo para estos chicos y ahora el archivo y recibe el valor Al do wife. Además de la forma lejana menta valor elemento soporta a otros archivos tipo off y entre y ogg . Por último, el texto entre los inicios de valor y la tecnología de cierre se mostrará en el navegador que no admitan estos elementos. Al igual que ejemplo individual, yo ahora mismo el mensaje hermano inválido. Para estos elementos en el navegador, ahora tienes el video de la lección anterior e insertado audiófilo. Basta con usar el botón de reproducción para iniciar estos archivos it Así que por ahora, nos vemos próxima lección 21. Etiqueta de objetos: hola. Es hora de introducir un nuevo elemento. El elemento objeto objeto de correo electrónico desechado representa un recurso externo que puede ser tratado como una imagen o simplemente un recurso a ser y dirigido por un plug in. Puedes usar este elemento para vaciar multimedia en tus páginas web. Like ¿Cómo ves archivos flash o simplemente otra página web en tus documentos HTML? Para este primer ejemplo, defino un objeto con el con off 300 pixels, y he apagado 200 pixels y lo recibe que atribuye el nombre fuera del recurso para este caso. Archivo video dot m Antes, después de guardar, se puede ver este archivo cargando en el hermano. El siguiente bloque F abrigo I presentándole a Steph un archivo de video. Un archivo HTML que me m. en otra carpeta Llamar a Tim situación y usando la falta. Negamos que soy índice que HTML con el trigo apagado 800 píxeles, y pensé 600 píxeles. El resultado en el navegador es otro archivo HTML que puedes ver en la página y aparece después del más ligero en cierto video. Es todo por ahora. Alumnos nos nos vemos pronto 22. Insertar contenido interactiva utilizando la etiqueta de etiqueta de empde - HTML5: hola y bienvenido de nuevo. El siguiente paso para mostrarte es ellos tech did HTML in element se utiliza para terminar una aplicación externa o contenido interactivo. lo que llamamos un plug in para este siguiente ejemplo simplemente voy a terminar otro video como las dolencias de objeto que definí mi con y tengo para este ejemplo con un con off 600 pixels y pensé que 400 pixels y el archivo fuente ahora está dado por CRC Attribute que recibe la película de archivo un punto mp para estos palo no ha sido una parte fuera de html cuatro y su nuevo en versión cinco. Una diferencia entre objeto y elemento luego vacío es que los primeros s de arranque y tecnología y ellos sólo f apertura de tecnología. Como se puede ver, se puede ver en el navegador el objeto y video que definimos en la propiedad source. Es así por ahora. Nos vemos siguiente lección 23. Insertar videos de Youtube: Bienvenido de nuevo. La forma más fácil de reproducir videos con HTML es usarte para La diferencia entre los ejemplos anteriores es que utilicé videos que se guardaron en mi directorio principal, pero para disfrazarse, mi fuente serán las mascotas de video en Internet para reproducir un video en tu página web utilizándote para usar la tecnología I frame que especifica en tu marco de línea. Empieza a escribir mi resfriado. Abrí marco y especificé trigo apagado 400 pixels, y pensé 300 pixels Para cambiar eso. Mencioné fuera del reproductor los atributos SRC Dame quiénes son l video que quiero jugar y por disfraz. Copio uno Warrell que tengo en mi archivo de texto y lo mejor a mi editor de abrigos. ¿ Cómo obtengo este enlace? Simplemente tienes que ir a YouTube y luego, después de seleccionar un video, haces clic en compartir y selecciona Opción y y aparece en S. R. C. Atributa el enlace que necesitas para ganar el video link que es diferente del enlace original fuera del video. Ahora es visible. ¿ Haces video en el navegador después de este paso? Si quiero reproducir automáticamente el video cuando un usuario visita la página, solo necesito tener un puntera perimetral simple. Tu YouTube, que son yo también juego con realmente uno. Haremos que se reproduzca automáticamente. El valor predeterminado está fuera de juego con valor cero que hace video. No juegues. Se puede ver en el navegador que con esta reproducción automática activar el video se inicia cuando abro la página. Otra opción es reproducir el video en bucle sin detenerse para hacer ese cambio. Yo aún el bucle perimetral y le doy uno al Valle, y ahora el video va a bucle como queramos. Bucle con valor. Zero es el valor por defecto fuera de este perímetro. Corro ahora la película otra vez y pongo el video al final para ver que el video volverá a empezar automáticamente. El último tipo en mostrar es el display off. El jugador controla eso, por defecto es muy uno. Lo que hace mostrar los controles. Si deseas quitar los controles, solo necesitas cambiar los controles Perimeter a valor cero y los controles se desactivarán como puedes ver ahora en la página. Cosas 24. Crea una lista de reproducción de youtube: Hola y bienvenidos de nuevo, Ya sabes, ahora, fuera a terminar videos de YouTube en tu página web, cambia algunas propiedades para los videos como habilitar y deshabilitar los controles, looping video y cambiando los lados fuera del video para este nuevo ejercicio, quiero agregar un video, pero usando una lista de reproducción de YouTube en lugar de un solo video como lo hiciste en la lección anterior . Si aún recuerdas a Wims un video de YouTube, utilizo la tecnología de marco de ojos terminando los atributos SRC. Yo les puse los vestidos para conseguir esta dirección. Selecciono el video que quiero luego dando clic en compartir y seleccionar opción final y aparece en SRC ellos el vestido que necesitas copiar a tu editor de abrigos ahora empezando. Habíamos llamado por mi playlist. Voy a crear el I frame tech Y primero definí el tamaño fuera del jugador con un trigo apagado 500 pixels y enseñé 400 pixels. Siguiente s son ver dónde voy a recibir la dirección de la lista de reproducción para recibir la lista de reproducción. Siempre puedes usar este abrigo estándar que tengo en común. El truco es la idea que aparece al final fuera de la dirección después del símbolo del vehículo para tener esto d. voy a ti a donde he seleccionado cada do siguiente. Seleccioné nombre del canal para mostrar todas las listas de reproducción fuera del canal. Y después de eso, selecciono la segunda lista de reproducción que F 138 videos. El playlist ya está abierto y tengo que seleccionar en la parte superior el vestido I d Eso está al lado del símbolo igual. Esta es la idea que tengo que añadir a mi dirección S r. C haciendo ahora la copia. Abrí el navegador y se puede ver que al menos s 130 18 años como esperaban a lo mejor a los siguientes videos fuera de la lista de reproducción. Basta con ir a los controles Botones para cambiar al siguiente video de la lista de reproducción. Eso es todo por ahora. Gracias 25. Introducción a CSS: Hola. En este punto, ha aprendido lenguaje HTML que se utiliza para crear contenido de página que por defecto sigue el flujo normal de una página web. Pero este lenguaje no toma en cuenta la creación off estilos como el tipo off front. jóvenes que llaman posicionan fuera de diferentes elementos, cambian el tamaño de la imagen y otros detalles. Está aquí. Deuda, lugar CSS. Descendiendo un papel importante. ¿ Por qué? Para estilizar texto plano Web con fondos académicos, enlaces de abril Proporcionar un poderoso control sobre la presentación a menudo. Documento HTML CSS. También conocidos s hojas de estilo en cascada se pueden separar fácilmente del HTML. Lo que resulta muy fácil modificar todo el look fuera de la página web. Hay otras grandes ventajas de que CSS sea fácil de aprender y entender el aumento de bajas velocidades en una página web como un fácil mantenimiento, y se puede reutilizar el mismo estilo shit en múltiples páginas Web. En las próximas lecciones, verás cómo crear estilos para páginas de desgaste con el fin de pensar en ventaja de todos estos beneficios de las hojas de estilo en cascada. Gracias 26. Sintasa de CSS: Como dije anteriormente. CSS se utiliza para cambiar el estilo de los elementos creados inv envejecido ml frío. El primer paso importante es crear un estilo para crear estilos que me perdí F Una deuda de regla consiste en un selector y un bloque de declaración que se encuentra en una estructura delimitada por una brace sin ping y la de cierre, donde un selector está en HTML tech como una red o mejor etiqueta ref en la que se aplicará un estilo. El bloque de declaración como una sola propiedad o el grupo de propiedades como color con deuda TIC son las propiedades seleccionadas que quiero cambiar el estilo, utilizando los valores que es la parte que asigna un valor particular al inmueble que nosotros están cambiando en currículum. Quiero cambiar una tecnología HTML que se da por un selector que es, una propiedad que quiero firmar con un valor respectivo. Para ser más claro en el ejemplo de abajo, quiero cambiar el color a verde y los fondos de texto a verdana fuera de mi párrafo. Deuda está definida en mi abrigo. Como se puede ver en la imagen ser tag es mi selector, color y familia de fuentes son las propiedades que quiero cambiar y verde n verdana nuestros desarrolladores que quiero asignar a las propiedades. Si quieres cambiar más de una propiedad por una tecnología específica como en este ejemplo, tienes que usar una semi columna entre cada par off property y value. Otra situación diferente es donde se quiere afectar a más de una etiqueta HTML con el mismo estilo. Para esa situación, se utiliza una columna para separar cada una del selector para cambiar. Ahora lo haré con sin fin antes arancel y aplicé a la adición la misma regla que solicito el párrafo. Por lo que solo necesito usar este nuevo selector para compartir la regla de párrafo con tener tecnología. Eso es lo que hice ahora donde aplico la regla creada a mi elemento de tener como ves en el navegador. Tener texto ahora se ve afectado con el mismo estilo creado para el párrafo. Gracias 27. Selectores de clase e idde: Hola otra vez. Ya vimos los selectores HTML que se utilizan para representar textos como párrafos, y todo es como lo veías anteriormente. Pero también puedes definir tus propios selectores usando clases y yo d selectores. El beneficio de usar clases y yo DS es que puedes tener el mismo elemento HTML pero presentarlo de manera diferente dependiendo de su clase o yo D. Así que puedo tener más de un párrafo en una página que puede tener diferentes estilos porque usan diferentes clases o ID en el CSS. Un selector de clases es el nombre precedido por un punto y un selector I. D es un nombre precedido por un personaje Nash, ahora más en detalle y comenzando con gafas como dije se pueden usar cuando quieras diferentes estilos de un elemento en particular. Para este ejemplo, tengo dos párrafos y luego agregando, y quiero darle estilo a dos párrafos usando diferentes tamaños de texto, color y fuente. Primer párrafo con tamaño frontal 20 pixels y color azul y segundo par riff pedos pixeles y color marrón. Dentro de nuestro HTML frío. Asignamos una clase en particular mediante el uso de los atributos de clase dentro de nuestra tecnología para la situación. Necesito clases diferentes porque quiero diferentes estilos. Definir primer párrafo con nombre primero y segundo con nombre. Segundo cuando definí estas dos clases en CSS, empezando siempre con esa bicicleta seguida Apellido utilizo para clase primero, tamaño frontal con valor 20 pixels y color azul y para mi clase segundos las mismas propiedades tamaño frontal, pero ahora con valor 14 píxeles y color con valor marrón, puedes distinguir ahora estos diferentes estilos en el navegador. Como se puede ver. Otra cosa que puedo hacer que sea un poco diferente es afectar todos los elementos que quiero con el mismo estilo. Para este ejemplo, solo quiero tener el mismo estilo usado para primer párrafo en mi elemento tener, uniendo la adición con clase primero usando coma para separar los dos textos. Y ahora el estilo es similar a ambos elementos. Entonces la gran ventaja de usar clases es que puedo reutilizar los mismos estilos en múltiples elementos. siguiente paso es I D selectores Deuda en CSS te permiten apuntar elementos por sus valores I D. El gran diferencia cuando se compara con las clases, es que yo los selectores, son únicos. Por lo que puedes aplicar en Lee al contenido fuera de un elemento. Si recuerdas en HTML, yo d se puede usar para crear una herramienta de anclaje a una parte específica fuera de la página. Y si incluyes a Martin cuando yo d. el navegador no sabrá a dónde ir cuando hagas referencia al i D. Porque que yo d se utiliza en diferentes partes fuera del documento HTML. Eso es lo que ves en el archivo propio dot html que creo previamente, donde tengo un ancla definido que hace que ese enlace de paro salte al elemento que como el i d back top que es mi agregar un elemento. Si tienes más de un elemento con estos me d. nombra el navegador, no sabes a dónde ir. Este es un ejemplo sencillo para entender por qué yo d solo se usa una vez que nos igual valor. Entonces usando el ejemplo anterior usado en gafas, cambio ahora clase a I D. Y donde definí los estilos en lugar de usar un punto antes de morir. El nombre que usé la tecnología hash para esta primera situación. No cambio el estilo para mi elemento de adición. Como se esperaba, la final. Pondré un similar como cuando usé gafas aplicando diferentes estilos a los párrafos. Si ahora quiero cambiar el estilo para que el final sea similar con primer párrafo, no puedes usar I d selector porque, como dije, no puedes usar un poderoso en diferentes elementos en tus documentos. Entonces la mejor manera es usar una clase para efecto párrafo y agregar, Nos gustaría mismo estilo como las ideas antes de gracias. 28. Cómo añadir estilos de CSS: para llevarlo. Estilos CSS En un sitio web, puedes usar tres formas diferentes para insertar CSS cold, el primer estilo interno shit segundo, estilo externo shit y el último uso en estilo Leiden. La ventaja de usar cada uno depende de lo que estés haciendo con estilo. Veamos ahora fuera usar cada uno de ellos y cuál es la ventaja y estas ventajas. En primer lugar, el estilo interno caga donde escribes Este año ha llamado a que las armas en sección muerta de un archivo en particular se inserten dentro del estilo de apertura y cierre de tecnología. Esos fueron los métodos que utilicé en los capítulos anteriores, donde cambio el estilo de un oso ref. Y luego tener esto hace que sea fácil aplicar estilos con el fin de reutilizar Deco's Do this ventaja off usando un estilo interno shit es que cambia al estilo interno shit on Lee Effect la página donde se insertan las causas. Entonces si quieres aplicar estilos en otras páginas, necesitas declarar todos tus estilos en cada una de las páginas de tu sitio web dentro de la sección F. Para el siguiente ejemplo, quiero especificar algunas propiedades nuevas, adición extranjera y el párrafo que he definido en el potro HTML usando algún texto. Como dije, el oro está escrito en esa sección y dentro etiqueta de estilo que definí ahora con regla CSS para mi tener uno con color azul y tamaño 24 pixels. Para el párrafo, quiero el tamaño del fondo con valor 20 pixels, color de fondo amarillo y para definir la familia divertida utilizo valor podría aquí. Ahora que defino agregar en párrafos reglas, ven los cambios en el navegador la segunda forma de usarlo vender hojas a tus armas es usar una porquería de estilo externo que es simple. Un individuo CSS presentado que vincula a su sitio web. La enorme ventaja de usar este método es que lo que hayas cambiado en el cago CSS afectará a cada página de tu sitio web que esté conectada al archivo CSS. Por lo que dis evita que tengas que hacer cambios médicos en cada página. Los archivos CSS se pueden crear utilizando cualquier editor de texto como cuando se crea un archivo HTML. La única diferencia es que debes guardar el archivo con la extensión CSS para incluir una hoja de estilo externa en una fuera de tus páginas web. Necesitas tener una tecnología de enlace dentro de la tierra. Despegue su página donde utilice atributos. Deuda REHL especifica la relación entre el documento actual y los documentos vinculados y tipo atributo para decirle a los medios. Escriba los documentos de longitud. ¿ Simplemente dijo un borrador? ¿ Está la ubicación fuera del archivo CSS? Ya puedes ver todos estos atributos define en nuestro documento usando hojas de estilo llamadas style dot CSS. Por lo que quiero ver alguna vez evaluar el tipo de archivo con el estilo de nombres. Y eso es lo que sí sé crear en mi directorio principal. El archivo con nombre, estilo dot CSS que serán mis hojas de estilo externas. En el primer ejemplo de mierdas de estilo interno, creo el estilo para agregar en párrafos elementos, pero ahora quiero hacer lo mismo. Pero con el archivo CSS externo, solo necesito mover la regla creada a mi archivo CSS después de guardar defile es deuda visible. Mi página web sigue f los estilos aplicados previamente con texto color azul y tamaño 24 pixels y las celdas definidas para el párrafo con tamaño frontal, 20 pixels, color de fondo amarillo y familia de fondos Podría ea si yo simple cambio, ref de repuesto color de fondo en CSS. Se ve que los documentos HTML que está conectado al archivo CSS externo cambiarán el color de fondo fuera del párrafo. Como era de esperar, Reanudar hojas de estilo externas te permite poner toda tu información de estilo en un archivo CSS completamente separado. A continuación, simplemente puede hacer referencia al archivo CSS desde dentro. A continuación, cada página web y el contenido de la página se peinará de acuerdo con el archivo. El obvio enorme ventaja de este método es que solo necesitas cambiar el estilo en tu archivo de hoja de estilo, y los cambios se harán en cascada a través del resto de tu sitio web siendo los mejores métodos para usar , dando un gran flexibilidad y fácil mantenimiento. Ahora, finalmente, estilo de Dean Line que es específico de la propia etiqueta utiliza los atributos de estilo HTML para cambiar el estilo de elementos. No se recomienda este método porque cada cambio que podrías en el CSS frío como para hacerse en cada etiqueta que quieras aplicar el estilo. Entonces si tienes tres párrafos en una página, tienes que aplicar los estilos tres veces dentro de cada mazo. Este es un buen asunto para solicitar cambios CSS individuales que no se van a utilizar repetidamente en un sitio web para este ejemplo, tengo que igualar párrafos donde cambié el primero, el llamante a azul y el tamaño de fuente a 30 píxeles. Este cambio nuestro único aplicado al párrafo específico que ves en el navegador. Esa situación donde el segundo párrafo no tiene cambios. Este asunto está lejos de ser ideal. Como dije, porque si quieres cambiar las propiedades de estilo, tendrías que tenerlo todas y cada una de las instancias fuera del estilo en cada una de las páginas de tu web, Gracias. 29. Modelo de caja con la que borde, margen y de de colores: Yo Aprendamos ¿cuál es el modelo de caja CSS? El modelo de caja CSS es la base fuera del control de diseño para las páginas web. Es muy fácil de entender y usar. Permitiéndonos posicionar y espacio son elementos HTML exactamente como queremos. En el modelo de caja hay cuatro elementos importantes. El primero es nuestro contenido. Eso puede ser simplemente una imagen son algunos textos y que se representa en estos imagen en el centro. segundo elemento que está alrededor del contenido es apostar muerte, desafiando al espacio entre nuestro contenido y el borde del elemento. A continuación, tenemos el elemento fronterizo, que podemos utilizar para dibujar una línea alrededor de nuestro contenido y para terminar. Tenemos margen, que define el espacio entre el borde fuera del elemento y cualquier otro elemento fuera de la página . Entonces veamos las propiedades de calle insertadas en este modelo y veamos algunas de ellas empezando por borde CSS. Esa es la propiedad que le permite especificar el estilo con y la persona que llama. A menudo elementos bordean, y él es un corto y propiedad para las siguientes propiedades de frontera individuales, la propiedad de trigo de frontera que especifica hacer es fuera de las cuatro fronteras hacen propiedad de estilo de frontera que especifica qué tipo de frontera a y el color del borde que se utiliza para establecer el color fuera de los cuatro bordes. Si utilizas Onley, barred su propiedad, que real efecto todos los cuatro lados menudo elemento como este ejemplo donde alguna vez estilo para mi borde bereft para efecto todos los lados con un borde trigo off 10 pixels bar su estilo. Vimos su valor y azul como mi llamador fronterizo. Entonces, ¿qué pasa? Ves estos valores aplicados en el párrafo como se puede ver en el navegador en las propiedades de CSS menos off Ves que U F propiedades individuales para cada lado izquierdo, derecho, stop e inferior que se pueden usar para cambiar Onley un lado apagado la frontera si quieres. Entonces si en lugar de border uso border top en Lee, el lado superior fuera del párrafo se ve afectado con esta propiedad. Eso es lo que voy a hacer ahora Aplicar sobre Lee esta propiedad a frontera agachado. Habríamos dicho valores Onley cambiando el estilo de trueque a disgustado. Entonces ves que este estilo sólo se aplica a la parte superior de nuestro párrafo. Ahora veamos la propiedad de margen CSS que se utiliza para agregar espacio alrededor de los elementos. En primer lugar, sustituí los valores fronterizos a Evel para las fronteras. Tendríamos el mismo estilo. Ahora me m margen propiedad a nuestra regla de párrafo. Y si simplemente creo un margen con 100 píxeles, esto dará 100 píxeles a todos los márgenes del párrafo. Tenía ahora otro par si para ver mejor los márgenes entre estos dos elementos si simplemente cambiaba a un valor de margen más bajo. La distancia entre los dos elementos disminuye como se esperaba, propiedad Margin es sólo una propiedad simple, acortada para las propiedades del margen individual marcan la parte superior derecha abajo y dejó una situación similar que sucede con el borde propiedad. Ahora, si solo quiero cambiar, detén margen fuera segundo par si tengo que desperdiciar para hacerlo antes de escribir C Evaluar Y como quiero aplicar cambios todos en segunda tarifa, puedo crear una clase para mi segundo párrafo que yo dar texto de nombre ahora en código CSS, hago la regla para esta clase con la propiedad de margen superior. Valoraríamos uno nunca píxeles y borraríamos la regla anterior insertada para los elementos de párrafo. En este momento, solo tengo un margen superior aplicado en el segundo párrafo usando el nombre de clase corresponsal . Otra forma que puedo usar es con la propiedad de margen dando el Valle para los cuatro lados 100 píxeles para el cero superior para los derechos pero, um, y izquierda usando la propiedad de margen con valor 100 000 El primer valor representa margen. Segundo valor superior con margen cero, derecha cierto margen inferior y último margen izquierdo que es, en la práctica, el mismo que margen de uso. Arriba con valor 100 pixels Ahora para terminar los márgenes si lo desea. Simplemente marque a la izquierda y a la derecha con 50 píxeles y los demás con cero, solo necesitas escribir cero 50 píxeles cero y 50 píxeles para terminar los elementos del modelo de caja. El padding propiedad que se utiliza para generar especia entre contenido y margen y utiliza muy similar con la propiedad margin. Existen propiedades CSS para configurar la ropa de cama para cada lado. A menudo elemento top rights los compraron y se fueron. Pero al igual que el margen, se puede utilizar el relleno de propiedades acortado que se utilizó para propiedades individuales para cada una fuera de los lados lejanos. Cambié ahora mi estilo de segundo párrafo, y hay un acariciamiento de 20 píxeles y ves que la especia entre texto y margen segundo párrafo aumenta. Si solo quieres cambiar justo valor inferior, simplemente puedes usar gasto de fondo con 10 píxeles es que Usas la propiedad de la cama con cero cero, luego píxeles y cero siendo desierta. Corresponsal del valle a acariciando propiedad de fondo. Es así por ahora, las cosas. 30. Propiedades de fuentes de CSS: I. Nosotros hemos visto arriba, también, a pesar de enviar excusa para crear CSS gold así algunos de los conceptos de los niños asociados a hojas de estilo en cascada. Ahora que ya exploraste algunas de las principales propiedades, es hora de ver otras propiedades. Asociar ID con fondo de texto. Las propiedades del fondo CSS son adecuadas para cambiar los ajustes básicos del frente como la familia frontal , tamaño diferente y la onda frontal. Con algunas propiedades, se puede definir la audacia, tamaño y el estilo fuera del texto, empezando por la propiedad de familia frontal que define el frente que se aplica al elemento seleccionado en CSS. Existen dos tipos principales de familia off fund, el apellido, donde se define una familia de fondos específica como tiempos New Roman Ariel o verdana que se conoce algunas aplicaciones de Microsoft como Power Point. El otro tipo es la familia genérica que puedes usar para definir un grupo fuera de las familias divertidas con un look similar como Saref San serif o mono especia. En la práctica, toda familia genérica como asociativa fuera de los nombres de familia de Siri. Pero si quieres ser más específico en el tipo de teléfono que quieres usar, siempre será mejor usar apellidos Para especificar el frente, puedes configurar a la familia divertida de un texto con la propiedad familiar de fondo usando estos dos tipos, esta propiedad debe todos varios nombres frontales como sistemas de reserva. Si el navegador no soporta el primer fondo, intenta el siguiente fondo y así uno. En este siguiente ejemplo de código, definí para mi primer párrafo el fondo Propiedad familiar Primero con valor. Verdana esa es mi primera opción. Segundo valor posible Ariel y menos opción. Usé el espacio mono familiar genérico. Esa es mi prioridad más baja. Entonces si en tu computadora, no nunca que ella o aérea la página usaría los fondos de especias mono que pudiera encontrar. Para el segundo párrafo, utilizo otra combinación telefónica, empezando por tiempos de valor New Roman para primera prioridad y para segunda opción y diversión final Familia podría aquí. Para este ejemplo, no usé ninguna familia genérica. Ahora la segunda propiedad utilizada para los textos. El estilo de teléfono que se utiliza en su mayoría para especificar texto en cursiva. Esta propiedad tiene tres valores normales, es decir valor predeterminado donde el texto se muestra normalmente como ves ahora donde aplico este valor en código CSS cambiando para cursiva. Se ve que el texto se muestra en cursiva como cuando se utiliza este estilo en aplicaciones de texto como Microsoft words y finalmente, oblicua que es similar a cursiva pero último soporte. El siguiente inmueble es de tamaño divertido que utilicé en algunos ejemplos anteriores y especifica el tamaño fuera del frente que aplicé. En este punto, siempre usé esta propiedad con unidades de píxel, pero en otros videos verás que hay otras en unidades que puedes usar con más ventajas. La sintaxis utilizada para esta propiedad es el tamaño de la diversión y el valor correspondiente. Para el primer párrafo, aplico ahora tamaño de teléfono apagado 14 pixels, y en el segundo párrafo, me m un valor de 20 pixels. Por último diferente blanco. Dicho esto, mostraría carro salado en caracteres en texto. Esta propiedad acepta ya sea valor curado o pred si ng valor numérico. Las palabras clave de disponibles son normales que se utiliza para definir caracteres normales, y estos el valor por defecto toro que, como ves, definen caracteres stick más audaces y más ligeros están relacionados con el blanco frontal computado fuera del elementos padre que es un concepto más inventa que está relacionado con el Eric E. Off baj elementos que voy a hablar otras lecciones. En este punto, sólo hay que saber que en la mayoría de las situaciones fuera valor Boulder es similar con perno de valor y más ligero con valor Normal. Otra opción para esta propiedad es usar valores numéricos, donde los mapas normales de valor de palabra Q hicieron en America Valley 4/100 y el valor bolt mapea a siete cientos que utilicé ahora en segundo párrafo y esto similar con válido que f en primera tarifa esta propiedad puede y valores desde cuando cientos a nueve cientos, donde los pasos son más múltiplos cuando cientos, eso es todo por ahora. 31. Propiedades de texto: Veamos ahora algunas propiedades de texto que se pueden usar junto con la propiedad de fondo acechado previamente primer texto. El renglón sí nos permitió alinear texto dentro de un elemento que puede elegir de izquierda, derecha, centro o justificar nota que este texto de alianza de propiedades dentro de sus elementos contendientes, no en toda la página. Para el siguiente ejemplo, tengo un texto más largo para los dos párrafos donde el segundo no tiene ningún valor fuera de texto alineado mientras que el primer párrafo lo dije con valor a la izquierda. Ves que después de asumir el valor que queda, la alineación no cambió siendo igual al segundo párrafo porque left es el valor de alineación predeterminado que asume el segundo párrafo o cualquier párrafo si la propiedad no está definida. Después cambié el valor del primer párrafo a la derecha. Y aquí vemos diferencias en la alineación fuera de los dos textos, uno una línea a la derecha y otro a la izquierda. El siguiente valor es centro, centrando el texto, y finalmente tenemos el valor. Justificar ahora, la deuda de la propiedad de Caller de CSS rebatió el color de primer plano fuera del contenido del texto , elemento extranjero, , elemento extranjero, recibiendo el nombre del color o cava un código decimal correspondiente al color que utilicé al principio. Algunos ejemplos para esta propiedad. Y ahora voy a llevar esta propiedad a los párrafos, dando color gris a los textos de primer párrafo. Si sencillo quiero huevos una llamada decimal para el mismo color, solo necesito usar un poco de pastel. Apenas deuda todos los días los valores decimales de salida para diferentes colores. Vigilando el color gris. Veo que la salida decimal llamada para gris es 808080 Este es un resfriado que necesito poner en CSS y se ve que no hay cambios en el color del texto del párrafo como se esperaba, porque en dos párrafos, defino el mismo color. Siguiente propiedad es letra especiado. muerte controla la cantidad fuera de especias entre cada letra en un elemento dado. Veli normal es el valor por defecto y puedes usar un valor de tierra usando diferentes unidades como usas en tamaño deformado. Defino en este ejemplo para mi segundo párrafo un espaciado entre letras con valor dos píxeles y ahora cambiando a cuatro píxeles. Ves que la especia aumenta cambiando a la normalidad. El especia toma la especia predeterminada entre letras Situación similar al primer párrafo donde no uso esta propiedad. Asumiendo la especia predeterminada para terminar las propiedades del texto, tengo la línea. Yo haría CSS propiedad que establece la cantidad de especia utilizada para líneas como en elementos de nivel de desbloquear texto . Especifica el mínimo que me gustaría fuera de las cajas de línea dentro del descarrilamiento en no reemplazados en elementos de línea . Especifica el I que se utiliza para calcular caja de línea. Veamos en la siguiente lección hacer conceptos fuera de bloque y en línea elementos. Ahora uso esta propiedad en primer párrafo y le doy un valor a los píxeles tirando pedos y se ve que alguna vez diferente especia entre líneas como se esperaba, aumentando el espacio de valor crecerá y disminuyendo la especia a reducir, eso es todo por ahora, gracias. 32. Elementos de bloque y en línea (elementos de Div y espan): ahora, tiempo de entender bloque y en línea elementos con los que hablé en video anterior. En un documento HTML, podemos tener estos dos tipos fuera de bloque de elementos y en línea. Es muy importante entender el concepto en las diferencias entre estos dos tipos de elementos que están ampliamente utilizando donde las páginas para crear diferentes secciones, comenzando con elementos de bloque un elemento de bloque por defecto siempre comienzan en una nueva línea y ocupar todo el con, como algunos elementos que ya conoces, como tarifas. Las tablas son formas y elementos de bloque apilan una encima de la otra. Ahora creo un ejemplo con los párrafos existentes donde defino para el primero un nuevo nombre de propiedad,color de fondo, color de fondo erudito desafiante a la muerte a fondo de elementos. Para este ejemplo, aplico un color de fondo con valor azul que nos ayude a ver la especia ocupada por el párrafo. Se ve que después de usar la propiedad, el párrafo ocupa la totalidad con fuera de la página. Como dije, eso sucede con los elementos de bloque. Si simplemente dejo el párrafo con unas palabras, ve que párrafo sigue ocupando el pleno con. Si defino el color de fondo al segundo párrafo se ve, el segundo párrafo está por debajo primero, ocupando de nuevo, todo el con introduje ahora un nuevo elemento importante bloque lo hizo. Si está representado por DIF Tech Network como un contenedor que tiene una tecnología de inicio y final y es uno los más utilizados para crear diferentes secciones en una página web, permitiendo poner y separar los contenidos de la página, el asentamiento funciona como aranceles y otros elementos de bloque que ocupan todos los hidratados. Ahora defino una sección en mi código, usando def que contiene los dos párrafos que m en la página y le doy glass name container a este nuevo elemento en mi abrigo CSS Definí para esta clase un collar verde fondos y el relleno off 10 píxeles. Después de estos cambios, se puede ver que nuestros párrafos están dentro de estos elementos que ocupa toda la corona de página . Ahora es el momento de que los elementos en línea y en el elemento de línea no se inicia en la nueva línea y sólo ocupa tanto con como sea necesario. Lo que no sucede con los elementos de bloque. Ejemplos como imágenes son los elementos April Inc representan en elementos de línea. Ahora estoy creando mi abrigo un texto con April ing para ver que a esta dolencia no le gusta un por el trigo lleno. Para estos, utilizo una tecnología para tinta de abril y algunos textos en CSS frío. Me puse ahora para los asentamientos, un fondo de color rojo y mirando a la página. Se ve que este elemento ocupa sólo la especia fuera de su contenido. ¿ Qué no pasa con los párrafos? Después de haber usado un nuevo elemento de bloque, Deve, utilizo ahora un nuevo elemento en línea, el lapso de elementos que se representa usando esta deuda Pantech como inicio una tecnología de fin. Ahora uso la primera tarifa y pone texto involucrado dentro de este nuevo elemento. Si dije este elemento a un fondo de color gris, ve que sólo el contenido que está dentro de la pila se ve afectado por el color de fondo funciona como un elemento en línea. De acuerdo, en currículum, podemos tener dos tipos de elementos bloquean tía en fila. El bloque elementos ocupan todo con off the page como deuda profunda que creamos con color de fondo verde y los párrafos con color de fondo azul elementos de fecha límite no toman un ser de trigo lamentable. El ejemplo utilizado en el discurso y el enlace de Nipper con el color de fondo rev y los nuevos elementos span con fondo color gris Gracias 33. Propiedades de anchura y altura: Yo hemos comprobado previamente la muerte por defecto. Los elementos de bloque ocupan todo con fuera de página. Existen, sin embargo, varias propiedades que permiten cambiar el con off los asentamientos para que el espacio ocupado se adapte al tamaño con el que queremos definir el con. Contamos con la propiedad con que se puede aplicar a un elemento esta propiedad fuera del elemento no incluye ropa de cama, bordes o márgenes. En este siguiente ejemplo, tengo que hacer da uno con color verde y otro azul que ocupan todo con fuera la página ya que disminuí navegador. El tamaño de la prenda disminuye el contenido, y el DIV se ajustará con al tamaño de la pantalla y aumentará que tengo si es necesario. Si ahora uso la propiedad de trigo con 900 pixeles para la primera víspera, ¿qué pasa? ¿ Ocuparía Onley noche 100 pizzas en vez fuera del lleno con? El problema es que al disminuir el tamaño de la página, la diva recuerda el mismo tamaño, no ajustando el dif al tamaño fuera de la ventana. Es aquí donde presentamos la suite Property Mac que hace los 900 pixeles y valor mínimo y no un valor fijo Así que tengo más bajo con valores si la ventana se recita a valores debajo de 900 pixeles, como podemos ver ahora en el hermano. Otro escenario posible es el uso hasta las dos propiedades al mismo tiempo en el primer vivo. Si utilizas Max con valor de 800 píxeles, lo que sucede hizo asumirá este nuevo valor, pero como un valor fijo, no ajustándose al contenido a valores inferiores a 800 píxeles. Ahora, agregando la mente con propiedad en el segundo Div. Vamos a crear un valor mínimo para el con off 600 píxeles. Lo que pasa en esta situación es que seguirán el máximo con off the window pero Onley hasta el valor fuera mío con para valores bajados, luego 600 pixels a D recuerda con lo dulce dejando el dedo del pie contenido una situación de desbordamiento. Ya me voy. Hablar de la propiedad ID que define el elemento I have a menudo. Si configuro en el primero desafiado 300 píxeles, el comportamiento será similar a la propiedad blanca donde los desarrolladores fuera de blanco y yo estoy fijo y no hay cambios en el Deve con el cambio de tamaño fuera de la ventana de la misma forma que creé valor mínimo y máximo para el con puedo crear para tengo para el primer día si doy valores mínimos off con off 200 pixels y he apagado 150 pixels. Lo que pasa en esta situación es que a medida que disminuya el navegador con el trigo apagado, el y el contenido se adaptará al tamaño. Sí, para el que tengo vemos que como tenemos un mínimo off 150 pixels, tenemos alguna especia libre sin contenido. Y a medida que encojo la ventana, la TIC de la hoja verde está ajustando su lado a los contenidos. Ahora para la última situación al entrar a 50 pixeles para el máximo que tengo para disfraz, no tenemos definido mínimo. Tengo valor Así que el primer lado del presidente de la justicia hace el contenido. Si disminuyo el tamaño fuera de la ventana, obtengo una situación en la que el verde profundo alcanza los 150 pixeles de vida y cuanto más tiempo aumenta el IIF, provocando una situación sobreplena. Como se puede ver ahora, 34. Propiedad de posición: la propiedad de posición especifica nuestra dolencia es posicionarla en un documento usando el botón superior derecho e izquierdo propiedades para desplazar el elemento a la ubicación final. Esta propiedad puede asumir cinco valores diferentes estáticos es decir, el valor por defecto relacionado absoluto fijo y pegajoso, comenzando con posición relacionada que nos permiten cambiar nuestros elementos en relación a donde habrían bendecido frijol por defecto. Usando la posición relacionada, es necesario especificar la cantidad que desea desplazar. El dolencia usando cuatro propiedades arriba abajo izquierdo y derechos seguido de un valor muerto corresponde a la distancia a desplazar para el siguiente ejemplo. Yo quiero aplicar esas situaciones a los dos profundos que he definido en HTML para el 1er 1 Defino una semana de descanso 300 pixels. ICT off 100 pixels terminó nuestro gran color de fondo en el segundo día, si alguna vez. Con desactivados 400 pixeles, he apagado 100 pixeles y verde como el color de fondo en el hermano. Vemos la posición esperada fuera de las profundidades siendo una en parada del otro. Si ahora nos fijamos en la primera posición relacionada, dando un valor de 20 píxeles a la propiedad superior y 40 píxeles a la izquierda. Resulta que el primer dif cambia de posición 20 píxeles desde la parte superior y 40 píxeles desde el lado izquierdo cambiando su posición final y el segundo dif sin cambios. Si aplicé al segundo día de los mismos valores que creé para el 1er 1 se espera en él se puede ver muerto. Segundo, Dief se encuentra en la misma posición relacionada con la segunda si, como sucedió, inicialmente ya que se aplicaron los mismos valores de offset a los dos jefes, ahora voy a dar un ejemplo final para la posición relacionada en disfraz. Si quieres poner la segunda víspera del lado derecho del 1er 1 para la situación, tendré que mover la segunda si hasta 100 pixels, lo que corresponde a un valor off menos 100 pixels al extremo superior de la propiedad a la derecha, correspondiente a un desplazamiento lateral izquierdo que tiene que ser igual que ver con valor fuera del primer def disfrazado, 300 pixels que ahora podemos ver los ladrones están uno al lado del otro como se esperaba. Ahora la posición absoluta que permite al lugar cualquier elemento de parche exactamente donde quieras usar de nuevo propiedades arriba a la izquierda, abajo y derecha para establecer la ubicación. Un detalle importante es que la posición fuera del elemento se basa en su posición de evaluador de posición más cercana para la situación Cuerpo es el antepasado más cercano. Lo que hace ese turno que doy a la defensa se basa en toda mi página. Primero cambié primero dif con a 400 píxeles y segundo a 300 pueblos. Y si dijera la primera y segunda derrota a la posición absoluta y y las propiedades izquierda y superior con valor cero que hace que dos ladrones se coloquen en la parte superior izquierda del lote, tendríamos segundo dif arriba primero. Ahora si cambio a la izquierda hasta valores fuera segunda Eva a 100 pixels, ve que este div se mueve a otras partes del parche correspondientes al turno Eso es lo aplico ahora para terminar la posición del pie. Presento otra situación diferente, creando asertiva dentro de la segunda. Con esta estructura off da el segundo Dief es el antepasado fuera de la búsqueda. Entonces si creo para 30 si con posición absoluta y valor a la izquierda apagado 50 pixels, este dif se moverá de izquierda a derecha, 50 pixeles relacionados con la posición fuera del segundo si y no en relación desde la parte superior izquierda la página. También existe un segundo tipo de posicionamiento CSS absoluto llamado posicionamiento fijo, que se puede utilizar para localizar un elemento HTML en un lugar exacto en las relaciones con la pantalla del usuario en step off brother. Sabemos que la diferencia a absoluta aquí es que la dolencia permanecerá exactamente en la misma posición, incluso si el usuario se desplaza por la página es lo que ves ahora donde dije el primer div con el valor fijo para la propiedad de posición y coloqué el segundo, más abajo la página y nosotros las TIC desconectamos 1000 pixeles para poder desplazar el distintivo y ver el efecto respectivo. Tal como es, estamos cinco ahora en la página. El primer def se queda en el mismo lugar incluso cuando estás paseando por la página. Por último, este valor pegajoso donde los elementos se posicionan en función de la posición de desplazamiento del usuario. Un elemento enfermizo cambia entre relacionado y fijo, siendo tratado como posición relacionada al principio hasta que cruza un umbral específico en cuyo punto, se trata como una posición fija. Veamos un ejemplo para entender mejor valor de disposición. Tengo ahora en el lote set un párrafo y dos jefes, el primer dif que puse con valor pegajoso. Y por el segundo añado la propiedad superior fusionando con Valley off 200 pixels. A pesar de los dos dif y yo off 2000 pixels. Para poder utilizar el pergamino para ver el efecto, ahora es necesario definir la primera bodega Deve di Tresh que dirá en qué momento hizo Eva se fija. En este ejemplo, definí la propiedad superior con el valor de 10 píxeles, lo que provocará que cuando el Deve esté a esta distancia definida, recordará fija una situación que puedes ver ahora en el navegador. Si desea cambiar la posición en la que se fija hacia arriba o hacia abajo, acaba de cambiar el valor de la propiedad superior. Ahora he cambiado cero y se ven diferencias cuando se compara con el ejemplo anterior, tendemos píxeles por valor superior, piensa 35. Propiedades de flotar y limpiar: Doy la bienvenida a otro video que hablé previamente de Steve que funcionan como un visionario contenedor muerte desafiando las diferentes secciones de nuestra página web Los regalos se utilizan para agrupar contenido, por lo que puede ser fácil de peinar usando la clase o I D. Atributos que has aprendido. No olvides que estos son elementos de bloque que podría comprar 100% de descuento en la página lee, Tener comportamiento predeterminado off, ser apilado uno encima del otro. Veamos ahora una propiedad muy importante usada para definir tus diseños. El inmueble del pie que se encarga de posicionar y controlar lee out en páginas web. Esta propiedad le permite poner elementos de bloque uno al lado del otro en lugar de encima, dando control sobre la posición horizontal a menudo elementos HTML para entender mejor todas estas palabras de propiedad. Hagamos un ejemplo usando tres D EFS, otros elementos Neff y mineros que creo en mi abrigo. En primer lugar, simplemente definí estilo para mi primer Deve, usando valor de 100 píxeles para derecha y el color de fondo verde claro para mi Never Deve con 200 píxeles de I y fondo Kohler Koro. Y por último, para mi dif principal. Defino las TIC con el valor apagado 500 píxeles y color de fondo. ¿ Verdad? Se ve en el navegador que los ladrones se muestran todos en vertical en la parte superior uno del otro y ocupan todo el parche con, como se esperaba ahora empezando a cambiar el abrigo si yo simple usé la propiedad flotante con valor que queda para el otro. Y si sé con off 33% cambié la posición fuera ese dif a la izquierda, diciéndole a la diva Nev que puede fluir alrededor de nuestro en lugar fuera comenzando por debajo. Si tuviera ahora algún texto a estos segundo dif, ve que el texto está flotando alrededor del otro. Si el texto no alimenta al estudiante ive, sucede situación de desbordamiento donde una parte de las muertes está fuera del dif. Otro escenario posible es cuando quiero defender estar lado a lado sin tener ningún elemento envolviendo alrededor del otro. Para este caso, tengo que añadir la propiedad float a mi segundo dif otra vez con valor que queda por disfraz. Vemos que el DIF se mantiene por debajo del otro porque este Steve es un elemento de bloque que ocupa al 100% de la maleza por el pliegue. Puedo Onley posicion en el lado derecho de juntos si defino un con que es igual o menor que el espacio que queda en el lado derecho fuera del primer dif como ves ahora en la imagen donde defino un con el valor off 33% otro detalle visible es que el grado ive ahora está flotando alrededor de los otros dos. Deudas de Deif. Cada propiedad flota con valor a la izquierda. Si quiero posicionar el segundo div en el lado derecho, solo necesito cambiar el valor flotante de izquierda a derecha y ciertamente aún has flotado alrededor de los dos primeros. Esto lo que quiero ahora es que menos diff no fluyan alrededor del 1er 2 tiffs quedándose abajo. Ese es el escenario donde usé la propiedad clear. Cuando esta propiedad recibe el Barco Value, no hay elementos flotantes permitidos ni en el lado izquierdo ni en el derecho. Por lo que este dif se movió hacia abajo por debajo del elemento flotante. El claro propiedad aún puede tener valores de izquierda y derecha en los que, si no quisiéramos que los elementos flotaran en el lado izquierdo. Aplicamos el valor a la izquierda, y por si no queremos que eso flote en el lado derecho. Utilizamos los derechos de valor. Esa es la siguiente situación. Reloj del dedo del pie I f en este momento una diva en el lado izquierdo y otra en el lado derecho. Si aplico el valor claro izquierdo en mi Sergeev, reviso que Dejar de flotar alrededor primero si Onley se mueve alrededor de la segunda situación dif pasa si cambio valor de izquierda a derecha para ver la d flotando alrededor de carne izquierda . Sólo necesito cambiar las TIC de primer dif dedo del pie un valor más grande que la segunda víspera. De acuerdo, ya ves ahora los tres flotando por primera vez en vivo y para terminar quiero tres d se muestra en la misma línea, siendo muy fácil de aplicar. Solo necesito usar el flotador hasta mi último def con apenas izquierda y dar un con off 33% a todos ellos estando dispuestos uno al lado del otro. Eso es todo por ahora. Gracias. 36. Unidades relativas y absolutos: hojas de estilo en cascada utilizaban diferentes unidades para expresar la longitud. Muchas propiedades CSS, como con margen de cama y tamaño divertido, toman valores de tierra. Donde cuaresma es un número seguido unidad de violencia, como unidad de píxeles. Al igual que utilicé en muchos ejemplos anteriores, podemos usar dos tipos de unidades de longitud en CSS relacionadas y absolutas empezando por las unidades de longitudes relacionadas , especifican. Una pelusa relacionada con otro Linz. Una gran ventaja en las hojas de estilo que usan unidades relacionadas es que puedes escalar fácilmente de una pondrá el entorno a otra, como de un vestido hasta un smartphone, creando contenido responsive. Veamos ahora las unidades relacionadas más importantes, empezando por la unidad E M en CSS y la unidad final, es igual al tamaño frontal computado para el elemento al que se aplica la M. Cuando estoy, las unidades se declaran en elementos hijos que no tienen un tamaño divertido definir. Heredarán su tamaño de teléfono de sus padres o de otros elementos ancestros posiblemente yendo todo el camino de regreso al elemento raíz bajo documentos. Veamos el siguiente ejemplo para entender mejor I f. dos párrafos primero y segundos insertados dentro de un Deve con contenido de nombre de cristal. Ahora pongo primero mi clase. Nosotros el tamaño de la fuente fuera de 15 píxeles. Y como dije, una unidad AM es igual al valor de tamaño de fuente creado para el elemento. Entonces si crea la línea, me propiedad en la misma dolencia con el Valle. Una e m. Corresponde a un valor apagado 15 píxeles a la línea de propiedad. Tengo Si doy un valor de dos PM línea de remolque, recibe el valor apagado dos veces 15 píxeles que corresponde a 30 píxeles. Ahora configuro un valor de 12 píxeles al tamaño de fuente fuera del contenido de la clase. Como ves el texto, es heredar el valor establecido en su padre, situación que ocurre sólo en segunda clase porque esta clase no tiene un tamaño de diversión definido. Si ahora defino un tamaño de teléfono apagado 14 píxeles en segundos de clase, se comprueba que El segundo párrafo asume diferente tamaño creado en segundos de clase. Y cuando tuve la línea con valor off 1 a.m. Esta vez para clase Segunda, esta propiedad calcula el valle para la luz TIC relacionadas con los píxeles pedos que defino dentro del propio cristal. Cualquier cambio que haga en diferente tamaño. Fuera del contenido de la clase no afectará las propiedades creadas en los párrafos porque ellos mismos tienen definida la propiedad de tamaño de fuente. Si entiendes bien, toda la unidad M funciona, entonces es fácil entender la nueva unidad R E M. Esta unidad está relacionada dos diferente tamaño fuera de ruta elemento HTML que mi valor predeterminado es de 16 píxeles , pero este valor puede ser cambiado por el usuario. Yo lo sé. Hacer un ejemplo sencillo para distinguir las dos unidades en mi elemento HTML raíz. Desactivé en tamaño apagado 14 píxeles, mientras que el contenido def de India define el tamaño del teléfono con valor a R E M. Para los párrafos, tengo los valores uno R E M para el primero y uno PM para los segundos. ¿ Qué pasa ahora? El primer párrafo que como diarrea, Munitz calculará el valor relacionado con los píxeles pedos define en el elemento raíz. Bueno, entonces siempre divertido tamaño fuera de 14 píxeles, mientras que el segundo elemento hará que el cálculo relacionado con el contenido principal ya que el contenido principal es dos veces mayor que el valor definido en tamaño de ruta, el tamaño en contenido es de 28 píxeles, que también será el valor para el segundo párrafo si cambio el tamaño del teléfono HTML. Efecto real, como se esperaba, Los dos párrafos. Por último, cambié de tamaño para contenido def, con valor 12 pixels cambiando dedo del pie Una unidad absoluta para esta situación. Si cambio el tamaño de fuente HTML, sólo se ven cambios en primer párrafo porque ahora segundo párrafo en tamaño está relacionado con los 12 píxeles que defino en contenido de clase. Ahora la vista parte porcentaje lance relacionado con el tamaño fuera de la ventana hermano. Cuando cambian las TIC o con off los sujetadores Aries, se escalan en consecuencia. El uso de estas unidades relacionadas con la parte de vista son importantes porque adaptan el tamaño fuera del contenido al tamaño fuera de los dispositivos que alguna vez podamos para posibles diferentes unidades relacionadas con la parte de vista. El 1er 2 son la Edad de unidad que está relacionada con 1% de descuento en las TIC. Fuera de la vista parte inicial que contiene bloque que es nuestro hermano Ventana y la Visa Lou que está relacionada con 1% de descuento el ingenio fuera de la parte de vista. En este ejemplo, vemos dos creadores de regalos, el primero siendo identificado por la otra clase y el segundo por la clase de contenido. Ahora creo estilos para estas dos clases definiendo el 1er 1 con un color de fondo verde claro y el segundo con color azul claro. Si quiero que el primer regalo ocupe fuera del con y solo necesito establecer hacer con a un valor off 50 V W y los ID a 50 V h Podemos ver que a medida que redimensione la ventana, siempre va a ocupar fuera del con, y yo 'd espacio Ahora lo hizo lejos, si contenido, quiero que este elemento ocupe 1/4 del tamaño fuera de la ventana. Para conseguir este comportamiento. Solo necesito establecer el valor para desarrollar 25 terminar la edad al mismo valor. En este ejemplo, de Dave ocupan 75% del puerto de vista. Tengo si quiero que ocupen todos sus ojos, solo necesito darle a cada uno de ellos un valor de 50 u otra combinación de valores en la que lo mismo fuera de los dos Oriente 1/100. Las últimas dos unidades que te usan parte RV hombres y unidades V Max sí te permitieron acceder al tamaño fuera del tamaño más pequeño o más grande fuera del puerto de vista si usaba a los hombres. Calcula un terreno que está relacionado con 1% de descuento en el puerto de vista. Dimensión más pequeña y el uso de remix está relacionado con 1% de descuento en el puerto de vista. Dimensión más grande. Ahora verás un ejemplo donde tengo que bloquear elementos definidos por la otra clase en la parte superior y la clase de contenido debajo de la otra, dije. Ahora las TIC le quitan a estos dos ladrones para el otro. Defino una escritura fuera de 20 media y para el vidrio contento derecho de 250 píxeles. Como cabría esperar para clase de descontento el no cambia porque estamos usando un valor absoluto para el otro. ¿ Verdad? Utilicé la unidad TV Men con Valor 20 lo que hace que ocupe 20% de relacionado con el tamaño más pequeño fuera de la parte de vista en el navegador, puede ver el comportamiento esperado usando esta unidad. En este punto, tengo el puerto de vista donde el menor tamaño es la TIC. Por lo que el ID para el otro está relacionado con las TIC off the view parte que como el tamaño pequeño como yo redimensiono la ventana, el otro no cambio porque la vista parte derecha no aumenta nuestros decretos. Cuando llego a un punto donde el puerto con fuera de la vista se vuelve más pequeño que el ojo, empiezo a tener cambios en el ID del otro como está sucediendo ahora, porque el tamaño más pequeño de la parte de la vista ahora está cambiando. Si vuelvo a la situación donde el ID de la vista parte el tamaño más pequeño, si cambio el ojo del puerto de vista, sospechaba que alguna vez cambiara en los ojos fuera del otro otra. Por último, si utilizas para este ejemplo el V Max, tengo un cambio en el comer fuera de la otra esta vez relacionado con el tamaño más grande fuera de la vista . Partes en este momento lo hacen con off the view part como el tamaño más grande, por lo que cambiar hacer con yo siempre cambiando el hielo fuera del elemento otro. Veamos ahora las unidades en porcentaje. Este tipo de unidad es muy similar a las unidades relacionadas con el tamaño de la parte de vista, pero en lugar de usar la parte de vista como referencia, utiliza la dolencia los padres en este siguiente ejemplo serán claros. Este comportamiento donde f otro elemento que contendrá dentro de los contenidos. Dif y yo definiremos este mismo contenido dif fuera del otro para uno apagado. El caso es el elemento parent off content es el dif siempre y para el otro contenido dif fuera. El otro elemento cuerpo son los padres. Ahora voy a dar un con off 800 pixeles a los otros elementos y el Eid off 300 pixels. En la clase de contenido, defino un con con el porcentaje de descuento 50%. Lo que sucederá es que para el caso fuera del contenido def dentro del otro do. Será 50% de descuento el con off el otro que es un valor fijo. Entonces lo hacen serán 400 píxeles para el contenido de clase definido debajo del otro. El ancho se definirá en relación al cuerpo que cause la muerte. Rece izando la ventana hacer con off la dolencia no se fijará para terminar las unidades cuaresmas absolutas que son fijas y muy fáciles de entender. Siempre tienen el mismo tamaño independientemente de cualquier otra configuración bajada. Ellos son altamente dependientes de la salida razón por la cual no se recomiendan para su uso en pantalla porque la pantalla tamiza mucho. Uno de los más utilizados son los píxeles que utilicé en muchos ejemplos, siendo una unidad que está relacionada con el dispositivo de visualización. Otras unidades absolutas que están disponibles como pulgadas, centímetros o milímetros. En capítulos anteriores, usé píxeles como unidades, por lo que ahora cambiaré esta unidad dos centímetros en el hermano. Seguimos a F elementos con tamaños fijos, ya que estoy usando una unidad absoluta. 37. Proyecto #1: crea una galería de web con HTML y CSS: Ahora hagamos una primera página web, una galería Web muy sencilla donde puedas aplicar lo que aprendas sobre diferentes elementos y estilos de página usando CSS. El diseño final fuera de las páginas ahora se muestra donde alguna vez compras bebidas, seis imágenes diferentes y niveles respectivos abriendo un baj individual para la imagen en la que haces clic. Entonces vamos a crear esta estructura de página con HTML y aplicar estilos a los diferentes elementos. Paso a paso. Como se ve en el parche, este grupo de imágenes es central horizontalmente. Este es el primer truco importante para aplicar. Crear el primer elemento de bloque que si contenedor que voy a centrar usando CSS Cove y donde se insertarán las seis imágenes fuera de la galería. Ahora que tengo el contenedor, yo sí, yo sí, el segundo día con galería de nombre de clase que recibe cada una de las seis imágenes. Por lo que repito seis veces este dif en mi carpeta, donde tengo documento HTML I F seis archivos de imagen perra, Paisaje de la ciudad, silueta nocturna y bajo el agua que voy a la final más adelante en el atributo fuente dentro imagen tech. Pero antes de agregar estas imágenes, empiezo a crear el estilo para algunos elementos de página. En primer lugar, el color de fondo para cambiar esta propiedad en el parche. El procedimiento es muy sencillo. Solo necesito asignar a este valor de propiedad que defino como gris pizarra oscura. Pero claro, puedes seleccionar otra persona que llama que te guste. El siguiente paso se define mi contenedor, que será muy útil para centrar el contenido de la página disfrazado. Las imágenes que definí ahora con off 60% para este contenedor con fondo Boesch color el ojo con auto valor para que t ajuste el contenido y para centrar el Steve utilicé la propiedad marching con valor cero auto y para terminar tener algo de espacio entre la parte superior de la página y el contenedor. Utilizo el margen de propiedad superior con valor 60 pixels. En este momento, no puedo parecer la insignia, mi contenedor, ya que dije que tendría propiedad con auto valor, sé establecer un valor fijo fuera de 500 pixels para esta propiedad solo para ver que existe el descontento y Oriente centristas en la página. Ahora voy a crear el estilo para hizo Eve Gallery, donde en cada línea quiero insertar a estos recibiendo las imágenes. Entonces hazlo con off cada día de debe ser menos del 50% de descuento en el contenedor, ya que aún quiero crear márgenes para conseguir algo de especia entre ladrones. Entonces configuro el valor fuera 47% y para I valor fijo 250 píxeles para poner la imagen uno al lado del otro. Utilizo ahora la propiedad float con valor izquierdo para especiar entre las imágenes. Creé margen con un valor de descuento 1% y para un especiado vertical más grande, inserto un margen inferior con 30 píxeles para terminar. Asigné la propiedad de borde a la Galería Deve con el valor fuera de un píxel, línea sólida y mejor color. Tengo ahora mis seis bloques principales que recibieron las seis imágenes. Entonces vamos a los archivos de imagen dentro de Jill Reid Eaves usando palo de imagen donde definí el nombre de la imagen usando salsa. El atributo. Copié los calaveras a los otros cinco da, y entonces yo todavía los nombres de archivo, empezando por la perra de imagen para la segunda tecnología de imagen. Tengo el paisaje de imagen servido Ciudad para imagen viene del sello de archivo con, y los dos últimos tengo las imágenes, estilos de imagen nocturna y submarina es ahora mi siguiente paso, donde uso do con propiedades con valor 100% a la imagen a ocupan toda la Galería Deve y las TIC apagado a 150 píxeles. Respondiendo al ojo fuera del Deve mis sesenta son ahora. Será mejor que cuidemos después de aplicar los estilos correctos. Y ahora que tengo mi contenedor principal e imágenes, agrego un nuevo televisor dentro de la Div Gallery, a la que doy la descripción del nombre de clase que usé para crear una difamación por cada off los Peters este día se agrega después de cada una de las imágenes ocupando meta con abajo. Ya que es un casco de bloque, ahora Coop, es dif a las otras cinco imágenes y textos encuestados derecha Perra Paisaje, Ciudad silueta noche y finalmente, y el agua. Ahora creo estilo para la descripción. Def. Usando el inmueble, texto la línea con valor central para aterrizar textos al centro y para darle un formato diferente a mi texto. Usé tres propiedades diferentes, la familia telefónica, donde defino el texto con el fondo carrera peso frontal con el valioso y finalmente aplico el llamador blanco al texto, usando la propiedad color para dar más contrasta entre el color de fondo y el texto. El paso final en esta galería Web es crear un enlace en cada una de las fotos para abrir una nueva página individual que contenga la imagen corresponsal. Para crear este April Inc. tengo que poner el contenido clicable en cualquier perlado dentro del ATEC que contendrá la imagen estática y la descripción Deve S atributos fuera de la tecnología. Usé el objetivo con el valor en blanco que abre el documento de longitud en la nueva ventana o pestaña y los Atributos, un borrador que especifica la u. R L fuera del baj. Ese enlace va a estar disfrazado, un archivo de imagen que quiero abrir y no un documento HTML. Ahora copiaré estos mismos códigos a las imágenes restantes, siempre cambiando a limas de archivo de las imágenes para abrir los archivos correctos. Cuando hago clic en el enlace. Ahora que tengo la página completa, acabo de airear el título en la parte superior, creando una road ive con título de nombre de clase que está fuera del contenedor donde escribo el texto Texto de galería web que aparece en el lado izquierdo de la página, y ahora creo el estilo para esta clase censurando el texto con la propiedad, texto, texto, alinear, familia divertida, verdana y color definido por los resfriados decimales de salida que ahora mismo para el tamaño de teléfono uso un valor de descuento de 20 personas y para tener algo de especia entre el texto y la parte superior fuera de la página. Usé la propiedad del dedo del margen con valor 40 píxeles. Ahora algunos pensamientos finales sobre el código CSS que se utilizó en esta página Web. En primer lugar, la propiedad de margen definida con valor cero para establecer los márgenes superior e inferior con valor cero y Value Auto Details browser Para calcular automáticamente los márgenes izquierdo y derecho en sí, lo que hace por fijándolos por igual. ¿ Qué hace que el contenedor se mantenga central o resentido? Otro detalle importante es la propiedad use off float con valor a la izquierda, que permite que las fotos estén al lado de los lados, y finalmente, el uso off units en porcentajes. Eso da una gran flexibilidad para administrar el tamaño fuera de los diferentes elementos fuera de la página. Para el caso del contenedor, inicialmente fijé un valor de 60% por lo que este elemento ocupa 60% de descuento de la maleza relacionada con su padre, el cuerpo. Si cambio el valle al 80%. Vemos que el trigo fuera del contenedor se incrementará, también aumentando la semana libre las escrituras que reciben cada una fuera de las imágenes, ya que estas bien ocupan 47% del trigo definido para el contenedor. Este tipo de unidades también permite gestionar el número de imágenes que aparece en cada línea se define en este momento a porque estoy usando un valor del 47%, lo que provoca deuda. Dos imágenes, junto con los bordes y márgenes definidos, ocupan alrededor del 100% del trigo contenedor, provocando que esa imagen aseverada. Ir a la segunda línea. Si quiero tres imágenes por línea, tendré que poner la semana fuera del dedo del pie de Div Gallery, un valor ligeramente inferior al 33% por cada uno de descuento. Las imágenes a ocupar se enfría a un cert fuera del contenedor. Entonces daré un valor de descuento 31% ya que no podemos ignorar margen y fronteras y vemos que cada línea lo hará entonces después de tres fotos, eso es todo. Por ahora. Gracias por ver 38. Proyecto #2: formulario de página web: I La propuesta Esta arma se crea formulario de registro de usuario similar al presentado ahora que contiene campos de entrada, a saber, el nombre, E mile, género y finalmente, nombre de usuario y contraseña. Siendo esta información presentada por un botón de registro en la parte inferior de la página, comenzaré con la creación fuera de los diferentes elementos de la página utilizando el código HTML, todos los elementos de la granja se colocarán dentro del Deve con contenedor de nombre de clase con el fin de permitir centrar dif y todos los elementos de forma en la página. Entonces antes de crear el contenedor de forma I m diff que en la parte superior contenía el registro de texto insertado dentro de una etiqueta de adición. A continuación, tengo una tecnología H R que en cierta línea horizontal solía separar los diferentes tipos de contenido, a saber, mi titularidad y forma con elementos respectivos. Ahora empiezo mi formulario usando la tecnología de formulario que define la granja utilizada para obtener la entrada del usuario. Este elemento recibe atributos de acción que nos dicen a dónde enviar los datos del formulario cuando se envían los datos de esta página. Este atributo no es muy importante porque los ejercicios pretendían en Lee crear un formal out y no out para recibir los datos provenientes del formulario. Entonces pondré solo un nombre de archivo Demi en la acción en Root. Ahora se agrega el primer campo puesto para colocar el nombre. Así que utilicé la etiqueta de nivel para que el primer elemento de entrada coincida con el I D. Fuera de la entrada que están etiquetando usando para disfrazar Nombre valor en cuatro en raíz y nombre de texto entre open y close tech con formato negrita para aparecer junto con campo de entrada que el nombre. El siguiente paso es definir el elemento de entrada utilizando textos de tipo. Deuda recibe el lugar. Atributos más antiguos. Valoraríamos el texto de nombre que aparece dentro del campo de entrada, trabajando como un tinte shar que describe el valor esperado. Y por último, los atributos I d. Con valor de nombre siendo igual al valor utilizado en cuatro atributos fuera de la etiqueta. Tech dos etiqueta relacionada con el elemento de entrada respectivo. Como dije anteriormente, así se espera que cuando haga clic en mi etiqueta, salte al campo de entrada respectivo. Como se puede ver ahora individual. Para terminar este primer elemento de entrada que solía requerir en ruta que se utiliza, decidir ese elemento Best Byfield fuera antes de enviar la granja para este tipo. Aparece un mensaje de advertencia si el elemento no es campo ahora, el segundo elemento de entrada que recibe información del correo teniendo un frío muy similar al creado anteriormente, no copié este mismo cambio de culto en el nivel tack el valor de los atributos fort para correo electrónico también. Los textos respectivos en la entrada de elemento que ahora recibo en el tipo, atribuyen el valor masculino para asegurar ese valor de entrada como formato de dirección de correo electrónico en su lugar. Mayor, escribo correo electrónico, dirección, texto y finalmente muero de correo electrónico y el atributo requerido, como en el campo anterior. Al hacer clic en el nivel, hará que el campo femenino esté activo y entrando texto sin el símbolo at en el campo de correo. Se sospecha que recibe una advertencia diciéndole a la muerte dirección de correo electrónico necesita este sencillo, pero veremos la situación al final. Antes de pasar al siguiente paso, tuve que hacer etiquetas de salto de línea para dar especia entre los diferentes elementos de la granja. Para los siguientes campos de entrada, definí el género de usuario con valor masculino o femenino, usando el tipo radio para este campo de entrada que define un botón de opción para seleccionar uno de las dos opciones. En primer lugar, creé mi etiqueta con los textos de género para identificar el tipo de información que quiero del usuario. Ahora, para la primera opción, utilicé el tipo de radio con nombre Género I D. Masculino y finalmente hago atributos requeridos como en las entradas anteriores para el nivel tech para en Your Roots, con el mismo nombre dado al I. D. Herramientas estos dos elementos etiqueta y botón de radio para cuando hago clic en nivel, el botón de opción se activa para el segundo botón de radio. Lo dije de nuevo con nombre de género, dejando los dos botones de radio con el mismo nombre para que podamos combinar los dos botones de radio juntos y obtener el valor elegido. Pero esta es una parte fuera de la programación del lado del servidor. Por último, tenemos la hembra I D. Y para la etiqueta creamos antes atributo con el valor igual al I D. Así que estableciendo estos valores haciendo click. Uno de los niveles sentirá que la milla de elección respectiva son femeninas. En los últimos campos de entrada de calle, recibí la definición de nombre de usuario y contraseña que tiene que ser confirmada en el campo izquierdo . No hice una copia del frío que ya usaba tener que cambiar a los primeros chicos. El atributo. Lejos de la tecnología de difamación al usuario de valor y escritura de texto. Nombre de usuario a utilizar s nivel. Indio puso bistec. Tengo el texto de tipo con los textos de nombre de usuario en el lugar antiguo i d. valoraríamos usuario y finalmente, el atributo requerido para hacer necesario este campo. Ahora las mejores palabras para el primer campo de entrada donde se establecerá la contraseña. Yo uso el mejor valor demasiado lejos atributos y texto mejores palabras para aparecer como etiqueta en granja en la etiqueta de entrada. Utilizo type password para que los caracteres no sean visibles. El lugar más viejo en raíces esta vez f el enter password text value, mientras que el I D como el mejor valor similar a para un homenaje para terminar la mejor palabra. Repite los campos que como el valor se repite mejor en la ruta más allá y los textos de etiqueta repiten las mejores palabras. Do type Attitude recuerda contraseñas, mientras que el lugar antiguo contiene el texto repetir contraseña para enrollar el I D como el valor mejor repetir ahora para terminar forma en la parte inferior, establecí un botón de envío usando etiqueta de botón con tipo, enviar erupciones de clase final que usaban para definir estilo para este elemento. Sé si todos los elementos de forma y es en Lee necesario definir el estilo para cada uno. Empezando por cuerpo, eso es lo que defino con familia de fondos Ariel y aplico un color de fondo burly ahora contenedor que tiene elementos de forma dentro. Definí ingenio con el valor off 50% relacionado con el ancho fuera del cuerpo y Centre de Steve , usando la propiedad marching con valores cero y externo dando valores iguales al margen izquierdo y derecho. Dos F algún espacio entre los elementos y cada lado del contenedor. Usé la propiedad de caricias con valor apagado 20 píxeles y finalmente definí el blanco como los contenedores. fondos de color de fondo ponen elementos, es decir, con tipo, texto, mejor palabra y correo electrónico. Yo creo los formatos específicos que no se aplicarán a los botones de radio, razón por la cual tengo que declarar el tipo fuera de los elementos de entrada que se cambiarán. Para esta situación, defino entrada con entradas de tipo dext, contraseñas de tipo y correo electrónico de tipo de entrada en mi selector CSS, separados por comas siendo un gran método a elegir. Ali atributos específicos valores. Ahora puedo definir el estilo para estos elementos con el trigo off 95% ropa de cama 15% y stop y margen inferior con 15 pixels y 25 pixels s color de fondo para el elemento de entrada. Usé el color gris claro y para la propiedad trueque uso sobre su trigo fuera de un píxel. Tendríamos línea sólida y llamadora representada por el número decimal de salida BBB para terminar. Utilizo las radios de trueque propiedad que permite hacer unas esquinas redondeadas. Indian poner elemento usando un valor fuera de tres píxeles, el Eiger Devalue Doumar, un campo de entrada redondeado será el siguiente. Definí estilo para el botón de clase con el fin de cambiar el diseño fuera del botón de enviar, dando un ingenio de 20% gran color redondo color verde blanco a las deudas termina encabezando 15 píxeles para terminar elemento de regla horizontal que se utiliza para separar el título y forma que definí con el margen inferior con 20 pixels para agregar alguna especia entre esta línea y el primer elemento de granja, sé que tenemos los diseños finales siendo solo necesario hacer algunas pruebas para recordar algunos detalles que yo platicó previamente, empezando por hacer clic en los niveles de cada campo de entrada, dando al usuario acceso al campo de texto correspondiente, Onley teniendo que escribir el texto respectivo en caso de que fuera de los datos para ser campo. Vemos el mensaje de advertencia que nos dice que los campos son militares. Una deuda de mensaje sólo fue posible porque usamos el atributo requerido. Otro detalle que ya he mencionado es el uso fuera del tipo masculino en el segundo campo de entrada que le será muy útil en los textos de fuego con los formatos de correo, saber, a saber, tener que contener la situación en carácter visible. Ahora donde escribo una dirección de correo electrónico sin que ese personaje reciba una advertencia de error para enrollar la contraseña. Información que no se debe al uso fuera de las contraseñas de tipo que se utiliza en el elemento de entrada . Gracias por ver. 39. Introducción a CSS Flexbox: Nosotros la evolución tecnológica, que se ha dado en las últimas décadas, han surgido nuevos tipos de dispositivos móviles junto con las necesidades y demandas de los usuarios. Hoy en día, incluso al tener computadoras, la gente prefiere consumir y crear contenido a través del teléfono inteligente y la tableta. Que en combinación con las estrategias de crecimiento por parte de las empresas, traen muslo nivel de demanda donde solo quienes se adaptan a los cambios pueden, cuando es aquí donde surge el concepto, nuestro sitio web responsive que permite ajustar los contenidos web de acuerdo a los dispositivos que se están utilizando para visualizarlos. Hace ajustar el diseño al dispositivo. Cuando se proporciona un acceso intuitivo y fácil a los sitios de los navegadores de consumo con más satisfacción, la calidad de interacción que los clientes tienen con el sitio web de la compañía es muy importante porque refleja que la empresa está preocupada por poder brindar buenos servicios. ¿Se levanta su imagen frente a los competidores? Una mala experiencia de usuario puede ser suficiente para una empresa disminuya sus ventas y falle la estrategia de semillas. El desarrollo de sitios web juega un papel fundamental en la creación de páginas funcionales adaptables a todo tipo de dispositivos. Y aquí es donde se aplica el concepto de Flexbox. Antes de Flexbox, diseños de sitios web comunes que usan HTML y CSS, a menudo somos difíciles de lograr debido a las limitaciones de los modelos de diseño. Los diseños de sitios web a menudo se lograron usando una combinación de elementos flotados y posicionarlos. Factores que me trajeron complejidad en la creación de las páginas. Este diseño de caja flexible CSS fue desarrollado por el Grupo de Trabajo CSS para proporcionar el modelo de caja que pudiera superar esos problemas. Flexbox es un modelo de maquetación. Estos Eigen para ayudar a los autores web a crear diseños avanzados de sitios web que son difíciles de lograr utilizando otros modelos de diseño. Proporcionando una manera más eficiente de diseñar, alinear y distribuir el espacio entre los artículos del contenedor incluso cuando se desconocen sus tamaños. usa la razón por la que estamos flexionados. Es ideal para pantallas móviles y contenido receptivo, para diseños dinámicos y aplicaciones web. Este curso cubrirá las propiedades fundamentales del modelo CSS Flexbox, y algunos recursos útiles para profundizar en el tema. 40. Modelo de diseño de Flexbox: Hola y bienvenidos de nuevo. En este nuevo video, voy a tomar un enfoque inicial sobre el modelo de layout flexbox. La idea principal detrás este nuevo modelo solía darle a un contenedor la capacidad de cambiar sus artículos dentro de los valores de altura a Westfield el espacio disponible y adaptarse a todo tipo de dispositivos de visualización y tamaños de pantalla. Un contenedor flexible gaste los artículos o los encoge para evitar el desbordamiento. Otra gran característica es cambiar el orden de los diferentes elementos flex de la página. Haciendo fácil cambiar la posición de los contenidos de la página, lo que no sucedió al usar flotadores donde se trataba de algunos tipos de grandes problemas cambiando el layout y la profundidad a todo tipo de dispositivos utilizando este nuevo modelo de layout los llamó más legibles y que es mucho más fácil de mantener. En currículum Flexbox, usas propiedades que pueden cambiar completamente la dinámica de nuestro diseño del sitio. Y esta es la gran ventaja cuando se compara con los modelos más antiguos con CSS. Dado que Flexbox es todo el modelo y no una sola propiedad, implica muchas cosas, incluyendo su único conjunto de propiedades poderosas, como dije anteriormente. Algunos de ellos están destinados a ser colocados en el contenedor. Nuestros elementos padre conocidos como contenedor flexible, mientras que los demás están destinados a ser establecidos en los hijos que llamamos elementos flexibles. Si la salida regular se basa tanto en las direcciones de flujo en bloque como en línea. El diseño de desvía se basa en las direcciones de flujo flexibles. En esta imagen, se ve la idea principal detrás del layout flex, donde se puede distinguir el contenedor flex y los elementos flex que se insertan dentro de él. Aprendamos ahora alguna terminología utilizada para describir el contenedor flexible y el de sus hijos. Cada contenedor flexible contiene dos x. El eje de dominio es el eje principal a lo largo del cual se disponen los elementos flexibles. Y el eje transversal es perpendicular al eje principal. Su dirección depende de los actos de dominio como su acción. El inicio y el final principales y los lados cruzados y cruzados de arena del contenedor flexible describen el origen y N del flujo de artículos flexibles. Siguen los ejes principales y cruzan x es del contenedor flexible. Desvía artículos, equivalentes agnósticos de TI y con nuestro tamaño principal y tamaño transversal, que respectivamente sigue los ejes principales y el eje transversal del contenedor flexible. Ahora tenemos nuestras construcciones de modelos. Nos vemos la siguiente lección. 41. Propiedades de Flexbox: Hola, es hora de aprender las propiedades de flexbox. Los modelos Flexbox constan de algunas propiedades de flexión así como un montón de propiedades de alineación de lana. Como verás en los próximos videos. La alineación es una gran parte de Flexbox. Básicamente, las propiedades flexbox definidas. Nuestros artículos flexibles tienen el tamaño todo el rap y en qué dirección van. En las propiedades de alineación se definen ahora los elementos flexibles se alinean tanto horizontal como verticalmente dentro de su contenedor. Estas propiedades se pueden dividir en grupos. Propiedades para padres que utilizan valores para controlar los elementos internos. Y si los niños propiedades para encontrar sintonizar el diseño. Puedes ver en el listado todas las propiedades que aprenderás en los siguientes videos. Siete propiedades para los padres. La propiedad de visualización, dirección de flexión, envoltura flexible, flujo flexible, justificación de contenido, alinear elementos y contenido alineado. Y seis propiedades para los artículos flex. A nuestra otra propiedad. Flexione, crezca, flexione, base, flexione, encoja, flexione y alinee uno mismo. Los siguientes videos del curso estarán dedicados a estas propiedades. Gracias. 42. Mostrar propiedad: Hola y bienvenidos de nuevo a un nuevo video. Empecemos ahora con las propiedades usando Flexbox para nuestros padres. El contenedor flexible, la primera propiedad padre y la más importante es la pantalla. Porque sin esta propiedad, puede aplicar el modelo de caja flexible. Esta propiedad padre define un bloque contenedor flexible o inline, dependiendo del valor dado a la propiedad y habilita los contextos flex a los hijos directos conocidos como elementos flexibles. Un contenedor flexible se declara estableciendo la propiedad de visualización de un elemento en flex, para mostrar como un elemento Flex Lock o planos en línea para mostrarlos como elementos flexibles en línea. Para este primer ejemplo, quiero que mi página, un div con el contenedor id. Ese será mi contenedor flex. Y dentro del contenedor tengo mi div principal que recibe textos que funcionan como elemento flex. Este es el único código que necesito dentro mi etiqueta corporal para crear un contenedor y un artículo flexible. Ahora escribo mi código CSS dentro la etiqueta de estilo para editar el diseño de la página. El contenedor div será mi contenedor flex y el div principal desvía elemento, como dije anteriormente, si quiero agregar más elementos flex, solo necesito agregar nuevos divs dentro del contenedor, como hice con el div principal dentro de la etiqueta de estilo que creo. Ahora, la regla de estilo para mi contenedor flex donde pongo la propiedad display con value flex para mostrar contenedor como elemento de bloque y darle valor púrpura al color de fondo. Por último, defino la altura del contenedor con un valor de 200 píxeles. Domain div es el direct children y es nuestro elemento flex donde defino el color de fondo, apenas maderas. Y finalmente, un valor de relleno y margen con 20 píxeles y el ancho del borde, un píxel de ancho, estilo, sólidos. Y color naranja oscuro. Como era de esperar. El contenedor se muestra como un elemento de bloque con fondo morado. Y ves que el div principal ajusta el tamaño al contenido que está dentro. Ese es uno de los comportamientos predeterminados importantes para los elementos flexibles. Usando el flexbox. Para cambiar el contenedor a un elemento inline, solo necesito cambiar el valor de flex a inline flux N. Ahora en nuestra página, el contenedor no se muestra como un bloque y ajustar su tamaño al div principal. Así que no olvides estos dos valores importantes para la propiedad display. Flex para crear un elemento de bloque y flex interior para mostrar elementos flexibles en línea. Gracias por seguir este importante video. Nos vemos la siguiente lección. 43. Comportamiento de Flexbox: Bien, Hemos visto en el video anterior la importancia de la propiedad de visualización. Antes de comenzar con otras propiedades, dedicaré los próximos minutos a anotar el comportamiento predeterminado del contenedor y el elemento flex. Para que cuando nos encontremos con algunas situaciones, entendamos que es un comportamiento esperado en el layout del modelo Flexbox. A partir de ahora con nuestro código, solo quiero por ahora un contenedor y un elemento flex definidos con color de fondo, algunos valores de margen, relleno y borde para que sea fácil distinguir estos dos elementos. Ahora, la primera situación a analizar, no hay ancho y definí y quieren que los contenedores sean elementos de bloque para ocupar todo el ancho. Entonces para quedarme como elemento de bloque primero, defino de nuevo display con valor flex. Se ve que el elemento flex ajusta su ancho al contenido del texto como vimos en la propiedad de visualización. Si escribes más textos, hazlo con el artículo flex aumentará. Este es uno de los comportamientos predeterminados cuando se usa flexbox. En la segunda situación, acabo de definir cuchillo al elemento flex con el valor de 300 pixeles. Con este valor definido, se ve que el contenedor seguirá el crecimiento del artículo flexible. El contenedor ite es ligeramente mayor que los elementos flexibles debido a que se define un valor de margen. Ahora, voy a hacer lo contrario. Yo defino f de 300 pixeles a mi contenedor. Y es factible que el artículo flexible se estire hasta alimentar los ojos del contenedor flexible. Hay dos comportamientos muy importantes de los elementos flexibles. La noche estirándose y encogiéndose, ajustándose al contenido del artículo flexible. El siguiente ejemplo definí para el ancho de elemento flex de 200 píxeles y agregué otros cinco elementos flex en mi código HTML. La suma del ancho total, Seis elementos flexibles es mayor que el ancho o el contenedor flexible que ocupa el ancho de la vista. Entonces a todos los elementos flex aparecen dentro del contenedor. La única solución es que el encogimiento se ajuste. Ese es otro comportamiento predeterminado o los elementos flexibles. Finalmente, en lugar de definer con uso propiedad mine width con el mismo valor para el comportamiento ahora es diferente porque estoy forzando los elementos flex a tener al menos valor de 200 píxeles. Para esta condición, no se encogerán si es necesario. ¿Qué hace con seis artículos flexibles? Algunos de ellos se quedan fuera del contenedor flexible. Estas son algunas situaciones típicas que encontrarás algunas veces al usar contenedores y artículos flexibles. Después de este video sin duda será más fácil de entender e identificar este tipo de comportamientos en el modelo Flexbox. Nos vemos el siguiente video. 44. Dirección de Flexbox: Hola otra vez. Es hora de aprender otra propiedad matriz. En este punto, definimos nuestro contenedor flex y elemento flex usando div container y el main en el código HTML. En CSS, definí la propiedad de visualización que recibe el valor flex para mostrar el contenedor como un elemento de bloque. Y flex en línea que muestran el contenedor como un elemento flex inline. Al establecer esta propiedad con uno de estos dos valores transforman los elementos infantiles directos en elementos flexibles. Voy a mantener esta propiedad con flex de valor en el código porque quiero mi contenedor como elementos de bloque. Ahora es el momento de flexionar esa propiedad de acción. Entonces, ¿qué hace que esta propiedad desvíe esa propiedad CSS adicional especifica? I'll flex items se colocan en el contenedor flex, definiendo el acceso al dominio y la dirección que puede ser normal o invertida. Esta propiedad puede crear cuatro situaciones diferentes. Los elementos flexibles se muestran en orden de izquierda a derecha y derecha a izquierda, y verticales de arriba a abajo y de abajo a arriba. Antes de agregar mi nueva propiedad, agrego dos nuevos divs dentro del contenedor para ver mejor el efecto de esta propiedad. Cambié el texto para estos tres divs se numeraran 1-3. Y entender lo que va a cambiar en la dirección y posición de los elementos flex usando la dirección flex. El nuevo divs F DID main como el primero. Por lo que no necesitamos agregar un nuevo selector de ID. En CSS, defino unos ojos diferentes para el contenedor con 400 píxeles. Y quiero mis artículos flex con el ancho y alto de 40 pixeles. Ahora desvía esa acción que se aplica a nuestro contenedor flexible. Esta propiedad puede tener cuatro valores diferentes. El valor predeterminado es fila, donde los elementos flexibles se muestran en horizontal como una fila de izquierda a derecha. Como se puede ver en este ejemplo que escribo en el código y ahora está presente los resultados en el navegador. Este segundo valor posible es fila inversa, que es similar al valor anterior, pero los elementos flex son con orden inverso, mostrados de derecha a izquierda. Y lo principal, los puntos principales ahora se cambian cuando se comparan con los valores de fila. El tercer valor es la columna que coloca los elementos flexibles mostrados en vertical desde la parte superior hasta la parte inferior del contenedor. Y lejos este eje de dominio de valores está ahora en vertical de arriba a abajo y cruza el eje de izquierda a derecha. Y el valor final es columna inversa. Eso muestra de nuevo los elementos flexibles en columna, pero en orden inverso. En esta situación, el dominio X se inicia en la parte inferior del contenedor flexible y termina en la parte superior. La cruz x es un crecimiento de izquierda a derecha. Se puede ver que con esta propiedad ahora es muy fácil. Cambiar la dirección y el orden inverso de los elementos flexibles. ¿Qué no pasó con los modelos CSS más antiguos? Y no olvides un detalle importante. cambio de dirección de los elementos flexibles afecta a las X principales y la x cruzada es en sí misma por ahora. Nos vemos pronto. 45. Envoltura con flex: Bien, veamos, propiedad flex wrap. En este punto, creamos nuestro contenedor flexible y tres elementos flexibles que se pueden mostrar en diferente dirección usando la propiedad flex direction, uno de los comportamientos predeterminados de los elementos flex se intenta encajar en una sola línea. Ahora hago otro cambio en el código HTML, agregando dos divs más como los tres anteriores. Mi artículo flex 4.5. En el código CSS, quiero definir un ancho de 90 píxeles y alto de 70 píxeles para mantener el tamaño del diff principal. Si recuerdas, usar solo ancho no resolvió la contracción de los artículos flexibles amasando antes de la propiedad de ancho de mina. Pero no hay problema. Quiero ahora que mis artículos flexibles repan, cuando cambio el tamaño de la ventana, en lugar de encogerse, se envolverán automáticamente cuando tamaño de la ventana sea igual al ancho total ocupado por los elementos flexibles. Y usando de esta manera, puedo mantener la propiedad width. Este método es muy utilizado para diseños responsivos. Y para hacer este cambio, utilizo propiedad flex wrap. Esta propiedad especifica si los elementos flexibles deben envolverse o no. Tener tres valores posibles. Primero, sin envoltorio. Ese es el valor por defecto RelU, wrap y wrap reverse. Comenzando por el primer valor que definí dentro de mi contenedor, el flex wrap con valor no rep, que no cambió nada en mi layout. Si cambio el tamaño de la ventana del navegador, los artículos permanecen en la misma línea, como puede ver ahora, y se encogerán para caber en el contenedor. El segundo valor es rep, que hace que los elementos flexibles se envuelvan en múltiples líneas de arriba a abajo. Después de cambiar la propiedad a valor rep, tamaño de mi ventana y ves que algunos artículos flexibles envolveremos y pasaremos a la siguiente línea. Esta propiedad es muy útil cuando queremos ajustar el contenido a otro tipo de dispositivos como tablets y smartphones. El último valor es wrap reverse, que se utiliza para flexionar elementos envolventes en múltiples líneas de abajo hacia arriba. El primer elemento flex que comienza en la parte superior cuando tengo el valor rep, usa ahora el primer ítem que comienza desde la parte inferior izquierda del contenedor flex. Si cambio el tamaño de la ventana, algunos elementos, vamos a envolver como se esperaba. Es el final de esta lección. Nos vemos el siguiente video. 46. Flujo de flexibilidad: Bienvenida. flujo flexible es la siguiente propiedad para aprender. Esta propiedad es una taquigrafía de las dos propiedades anteriores. Flexiona esa acción y el flex wrap. Los valores predeterminados para esta propiedad son rho para el valor de dirección de flexión y no rep para la propiedad flex wrap. Ahora voy a agregar esta propiedad y unir los valores de dirección flexor y el flex wrap para flex flow. Defino flujo de flujo con valores fila y envoltura para mostrar los elementos flexibles en roles. Y envolver artículos flex cuando encojo la ventana como viste en otra lección. Ahora hago otro cambio. En lugar de mostrar en fila, quiero en fila inversa mostrar elementos flexibles de derecha a izquierda. Entonces defino flujo flex con valores de fila inversa. Y el segundo valor de la propiedad cambia a no wrap. Con estos valores, el contenido se encogerá cuando cambie el tamaño de la ventana como se esperaba. En el ejemplo final, cambio la dirección a columna y quiero envolver los elementos flex usando el valor rep para la propiedad flex wrap. Para estos tipos. En su lugar, los elementos flexibles se envuelven en múltiples roles. Envolverán en múltiples columnas como nos muestra la imagen. Está resuelto por ahora. Te veo el siguiente video para presentarte otra propiedad. 47. Justificar contenido: Hola otra vez. Aprendamos a alinear elementos usando tres propiedades diferentes utilizadas en contenedor flexible. A partir de este video, justificamos el contenido. Esta es la propiedad que se alinea con los elementos flexibles del contenedor cuando estos no utilizan todo el espacio disponible en la dirección horizontal. Como ven en este ejemplo, donde tengo los cinco elementos flex alineados a la izquierda. No olvides que los artículos flex no están totalmente juntos porque hemos definido un margen para ellos. Esta propiedad, LPS para compartir este espacio extra libre sobrante cuando ya sea todos los elementos flexibles en una línea de arte inflexible o flexible pero cada uno alcanza su tamaño máximo. Primero, cambié con una IP de elementos flex a 50 píxeles para tener algo de espacio libre en ejes principales y ejes transversales. El otro cambio es la idea de los datos de contenedor definidos ahora con 700 píxeles. Ahora los valores posibles, esta propiedad como valores phi, donde el valor por defecto son los dardos flexionados. Eso pone la posición del artículo en el inicio del contenedor. Pongo ahora la propiedad con este valor y es factible que no haya cambios porque este es el valor predeterminado. Ahora, cambiando el contenido de justify a flex y hacer que los artículos se coloquen al final del contenedor, como ve ahora en la ventana del navegador, flex start coloca los elementos a la izquierda del contenedor. Y con flex y los artículos se mueven hacia la derecha. El siguiente paso es posicionar los artículos empaquetados entre sí hacia el centro del contenedor de alineación a lo largo del eje principal. Para obtener esta alineación, necesito darle el valor de centro a la propiedad justificar el contenido. Y después de eso, estos cambios en el layout son visibles en mi navegador. Muestra entre es otro valor posible para esta propiedad. Y los artículos se distribuyen uniformemente en la línea. El primer artículo está en la línea de inicio y el último elemento en la línea final. El último espacio de valor alrededor es una situación muy similar al espacio entre ellos. Pero ahora la especia antes del primero y después del último elemento es igual a alfa del espacio entre cada par de elementos adyacentes. El navegador muestra ahora son los elementos flexibles que están dentro del contenedor usando este valor. Ahora que vimos todas las cinco situaciones diferentes, creo una disposición diferente, mostrando los ítems en columnas usando la propiedad flex direction con value column para este eje de dominio quinasa cambia de autosómico a vertical. Entonces si doy valor flex comienzo a justificar propiedad de contenido. Y los elementos flexibles se alinean a lo largo de la vertical. Flex start, haz los artículos horneados en la parte superior del contenedor. Y si cambio a flex y los artículos picotearon en el fondo del contenedor. Eso resuelve por ahora. Nos vemos en la siguiente lección con la propiedad align items. 48. Alinear elementos: Bien, es hora de alinear los artículos de propiedad. La propiedad align items define todo el navegador distribuye el espacio entre y alrededor de los elementos flexibles a lo largo de las x de hierba. Esto significa que funciona como justificar el contenido. Pero en la dirección vertical. Si los elementos flexibles se muestran en horizontal. Esta propiedad S Phi valora donde se estira el valor por defecto. Eso provoca que los elementos se estiren respetando el ancho y el valor de altura, si se definen para el div. Para ver la diferencia entre un div con altura y ancho configurados y otro sin estas propiedades, le doy ID main one a mi primer div y elimino el width y height para el código CSS para esta sola hoja. Vemos ahora como se esperaba que el primer div se estira sin usar ninguna propiedad align. Ahora que tengo este cambio, entonces voy a poner la propiedad alinear los elementos con el valor estirado. El primer ítem flex sin valor de TIC aún se estiró. Y el valor de ancho se ajusta al tamaño del contenido de def. Eso se espera si no se definen estos dos valores. Por último, si elimino el valor de altura en mi div principal, ¿qué sucede? Todos los niños dentro del contenedor se estirarán como esperables. Ahora vuelvo de nuevo para ocultar valores y encendió el ID principal. Para la siguiente situación, pruebo los otros cuatro valores de la propiedad align items. Utilizaré un enfoque diferente usando el selector y niño que nos permita asignar diferentes valores de propiedad, seleccionando solo la muerte de los niños. Quiero quiero para este caso darle a los niños una entrada con ID ítem principal de 20 pixeles y alinear ite con 40 pixeles. Para crear este efecto, quiero una regla para mi elemento con ID main, simplemente seleccionando child one usando n child con valor one y child tree usando nuevamente n child con valor tres. Ahora sé que los datos fríos a la derecha, sólo va a cambiar de estilo para los niños. Una entrada, definí a 20 píxeles, altura de línea de 40 píxeles. Volviendo a alinear los elementos después los elementos flex se estiren porque la altura no está definida, te muestro otro valor posible. Doy valor de inicio flex a los artículos de alineación de propiedad. Y los artículos flex ahora lo posicionan al inicio del contenedor. Ancho que definí. Si usa el valor de inicio stretch o flex, el diseño será el mismo para ambos casos. Cambiando ahora propiedad a flex y vemos una situación diferente con value flex y obtenemos lo contrario con la posición del ítem al final del contenedor. El siguiente valor para insertar este centro con el Centro de Valores, los elementos flexibles se centran dentro de la línea en el eje transversal. Y el último valor es como línea donde los elementos flexibles se alinean a lo largo de su contenido. Línea de base. He creado previamente una línea de pedido diferente. Y con el valor de línea base, ve que los elementos flexibles ahora están alineados por la línea base del contenido del texto. Es resolver por ahora. Nos vemos la siguiente lección. 49. Alinear el contenido: Hola y bienvenidos. Usted vio en video anterior la propiedad alinear elementos que distribuyen espacio entre y alrededor de los elementos flexibles a lo largo del eje transversal de su contenedor. Y ahora firmaríamos para alinear el contenido. Esta nueva propiedad alinea las líneas de un contenedor flexible dentro cuando hay espacio adicional en el eje transversal. Similar a nuestro contenido de justificación alinea elementos individuales dentro del eje principal. Antes de empezar a mostrar los diferentes valores, solo hago algunos cambios en el código, poniendo más cuatro divs dentro del contenedor. Esta def, adición se hace para tener más de una fila y solo mostrar. Podemos ver el efecto de esta propiedad en los ítems flex. Ahora hago cambios en el código CSS, dando 60 píxeles para flexionar elementos con. A continuación, defino la propiedad Flex wrap con value rap para entender cómo funciona esta propiedad cuando los elementos flex se envuelven en múltiples columnas. Ahora que he hecho el cambio, voy a comenzar con valores de align content property. El primer valor posible de esta propiedad es el valor predeterminado estirado. Eso hace que las líneas se estiren para ocupar el espacio restante como es visible ahora en el navegador. Este comportamiento, solo es posible porque no definí el valor TIC a los ítems flexibles. Cambiando ahora a arranques flexibles. Este valor hace que las líneas vuelvan al inicio del contenedor como se ve ahora, ajustando los elementos flex ite al contenido de los elementos flex. El siguiente valor es flex, y eso es similar con flex starts. Pero ahora las líneas son picoteadas al final del contenedor, como es visible en la ventana derecha. Ahora hay levantando tres valores para esta propiedad. Primero, el Centro de Valores, que hace que la línea spect en el centro del contenedor. El siguiente es el espacio entre valor donde las líneas se distribuyen uniformemente. Y la primera línea está al inicio del contenedor, mientras que la última es que el final del contenedor. Y finalmente, el último valor es espacio alrededor donde las líneas se distribuyen uniformemente con igual espacio alrededor de cada línea. Ahora ve en la imagen son los elementos flexibles que se alinean usando este valor al contenedor de línea de propiedad. Es el fin de la propiedad de los padres. En los próximos videos, te mostraré las propiedades para los niños. Gracias. 50. Pedido: Aprendamos la primera propiedad que se puede aplicar directamente a elementos flexibles individuales. La propiedad orden. La propiedad se utiliza para controlar fácilmente el orden que aparecen los elementos flex dentro del contenedor flexible. Todo lo que sucede en versiones anteriores de CSS cuando se usa otro tipo de propiedades como position y float para cambiar la ubicación de algunos elementos. Regresar a artículos flexibles y/o a su propiedad. Por defecto, se ordenan como se agregan inicialmente en el contenedor flex cuando se escribe el código HTML. La gran ventaja de esta propiedad es que los artículos flexibles se pueden reordenar. Cambiar el valor de la propiedad dado por un número sin cambiar el código HTML. Ahora cambio mi código a F, apenas tres divs, S flex items, ese f con un IQ de 70 pixeles. Estos tres divs recibirán la propiedad de orden para cambiar el orden de los artículos flexibles. Para crear un valor de orden en cada div principal, utilizo el selector Empty Child para seleccionar los tres elementos divs y dar individualmente evaluar a ordenar propiedad. Así que definí ahora en CSS, mi primer hijo con ID principal Usando el hijo final con valor uno. Y repito el proceso a los otros divs usando valor para entrar el uno para el otro. Y ahora es posible escribir el valor del pedido para cada hijo. Defino están ahí para el primer hijo con valor 34, segundo hijo valor dos. Y finalmente el último hijo, valoramos uno. ¿Qué va a pasar? Segundo artículo flexible, mantenga la posición y primero luego los elementos flexibles cambiados. Ahora haciendo otro cambio, quiero que me quede mi segundo desviador. Entonces asigno orden con valor uno, el primer div original que quiero en el medio. Entonces el valor de orden es dos y el tercer div se queda a la derecha, como al principio. Razón por la que doy valor tres a la orden. Si quieres agregar más divs, es muy fácil. Solo hay que agregar en código HTML. Y en CSS, solo haz una copia del Niño Vacío frío y dale el valor de orden para posicionar el div dentro del contenedor. No lo olvides, y teniendo cuenta que usar esta propiedad es la forma más fácil y rápida cambiar el orden de los divs. Gracias. Nos vemos el siguiente video. 51. Cultivar flex: La siguiente propiedad es flex grow. Esta propiedad especifica el factor de crecimiento flexible de cada elemento flexible, que define cuánto crecerá el elemento flexible en relación con el resto de los elementos flexibles que están dentro del contenedor flexible. Cuando se distribuye espacio libre. El uso del mismo valor de crecimiento flexible en cada artículo flexible puede llamar a los artículos que han crecido del mismo tamaño en el contenedor. Para esta nueva propiedad, te muestro dos situaciones distintas. En el primero, no tengo el ancho definido para divs creados en árbol. Entonces tengo todos los artículos flex con las mismas condiciones. El comportamiento predeterminado de los elementos flex es ajustar el div con el contenido del ítem. Entonces, como era de esperar, el div se encogerá como se puede ver ahora en la imagen. Ahora creando la propiedad flex para los tres divs. Usando el selector End Child, le doy el valor uno a child 12.3. Ves que los artículos flex aumentarán su tamaño por igual hasta que llenen todo el espacio. En esta situación, siempre que usemos un valor inicial igual para todos los elementos flexibles, el ancho será el mismo para cada elemento correspondiente a un tercio del espacio libre para cada elemento flexible. Hay un detalle que es importante entender en un caso que el ancho inicial es el mismo usando fila flex con el mismo valor. ¿El ancho crece en la misma proporción para los tres divs? Entonces, como era de esperar, el ancho final sigue siendo el mismo. Y si defino un ancho inicial diferente, vamos a darle un ancho de 200 píxeles al primer hijo y 50 píxeles a los demás. Usando el mismo número de fila flexible, la distribución del espacio de elevación es igual a todos los divs. Entonces estamos en el div final, uno sigue siendo el mayor rígido. Esta es una situación diferente a la situación anterior donde el ancho final es igual. Hagamos ahora un escenario donde el ancho inicial sea el mismo para los tres divs. Quiero darle a uno de los niños un valor de dos para flexionar, crecer y a los demás uno. ¿Qué hace que el niño se sienta el doble del espacio libre en relación con los demás? Para hacer el cálculo del espacio libre que cada profanar solo hay que sumar todos los valores individuales de crecimiento flexible. Y luego solo hay que hacer individualmente la relación entre cada fila flex individual y el Sam que encuentres primero. Entonces para los tres divs con flex crecen a 1.1, obtienes para el primer div dos cuartas partes del espacio libre para llenar. Eso corresponde a Alfa del espacio libre. El segundo y tercer div ocuparán una parte del espacio libre. Imagina una situación en la que tenemos primer elemento, ancho 100 píxeles y los otros que anchos 50 píxeles. Si F flexiona los valores de fila a 11 Y por ejemplo el ancho libre es de 800 pixeles. El ancho final del elemento flex uno es 100 píxeles agregados con Alpha de los píxeles de Android. Eso como resultado final de 500 píxeles. Y el otro para flexionar el ancho de los artículos es 50 píxeles agregados con un cuarto de ocho píxeles de Android. Eso es en los 250 píxeles finales. El último ejemplo, le doy valor tres, el primer div y a los segundos. Por último la tercera estancia con valor uno. El primer artículo flex se sentirá tres sextos. Eso corresponde a Alfa del espacio libre. El segundo desfilan dos sextos del espacio libre, y el último div llenan una sexta parte del espacio libre. Espero que ahora quede claro que esta propiedad funciona. Gracias. 52. Reducimiento de flex: Bienvenido de nuevo, es hora de flexionar la propiedad de encogimiento. Esta propiedad recibe el valor que especifica el factor de contracción flexible, que define cuánto se encogerá el elemento flexible en relación con el resto de los elementos flexibles. Por defecto, todos los artículos flexibles se pueden encoger. Pero si lo ponemos a cero, mantendrán el tamaño original. Para este primer ejemplo, defino un contenedor ancho 500 píxeles y mis tres elementos flex con un ancho de 300 píxeles. Y quiero el valor de cero a mi propiedad flex shrink. Eso hace que los valores originales de ancho de los elementos flexibles no cambien. Como es de esperar con este valor. Los elementos flexibles están desbordando el contenedor porque la suma de los tres elementos flexibles es mayor que el ancho del contenedor. El siguiente paso es cambiar el valor flex shrink a uno, ese es el valor predeterminado. Y solicito los tres artículos flex. ¿Qué hace que se encojan de la misma manera para que se ajusten al contenedor? Debido a que tenemos el mismo valor de encogimiento son mucho mayores, es el valor de contracción asignado al elemento flexible. Cuanto más pequeño sea el artículo flexible. Ese es el ejemplo que quiero hacer ahora donde definí mis elementos flex con valores 32.1 para la propiedad flex shrink en el navegador es visible que el flex shrink con valor tres hará que ese elemento flex corresponsal sea el más pequeño. Y flex shrink con valor uno hará que ese artículo flexible corresponsal B, el más grande. Uf en el plan de estudios del curso. Un recurso suplementario que le muestra cómo calcular los valores de ancho de los elementos flexibles de acuerdo con el valor de flex grow y flex shrink. No olvides ver ese documento para entender que se hace nuestro cálculo. Nos vemos el siguiente video. Gracias. 53. Base de flex: La siguiente propiedad a mostrar es base flexible. Esta propiedad toma los mismos valores que las propiedades width y height y especifica el tamaño de dominio inicial del elemento flex antes distribuir el espacio libre de acuerdo con los factores flex. Esta propiedad puede recibir un número que especifique el terreno del ítem flex que utilizo para el siguiente ejemplo. Doy a base flex del primer elemento flex un valor de 100 pixeles, el segundo elemento flex, 70 pixeles, y el tercero 50 pixeles. Y en el navegador vemos estos cambios en los diferentes divs. Una nota importante es que si cambio la dirección de la fila dos columnas usando la propiedad flex direction en el contenedor. Esta propiedad afectará al ite en lugar del ancho, como podemos ver ahora en la imagen. El otro valor que recibe la propiedad de deuda es el valor Alto. Ese es el valor predeterminado. Con valor automático, el ancho es igual al ancho definido para el elemento. Si el artículo no tiene ancho definido, el ancho será de acuerdo a su contenido. Cambiando ahora el valor dos de cuatro, las tres propiedades de base flex, vemos que el ancho del elemento flex es de 70 pixeles. Ese es el valor definido en mi selector de id main. Por último, si elimino este valor y mantengo el valor Alto en flex shrink, los elementos flex se encogerán y ajustarán a su contenido porque no hay ancho definido. Eso es todo por ahora. Nos vemos la siguiente lección. 54. Flex: Bien. La propiedad flex es la taquigrafía para las propiedades flex grow flex shrink y flex basis. El segundo y tercer parámetros, flex shrink y flex basis son opcionales. Yo introduciendo los siguientes minutos cuatro posibles valores para esta propiedad. Uno de los valores más comunes para esta propiedad, o flujo igual a cero. Eso es lo mismo que Flex ancho valor inicial el gráfico. Y para el valor por defecto flex, cero a flex grow, one to flex shrink y alto a flex base. Eso dimensiona el elemento en función las propiedades de ancho o el contenido del elemento flexible. Si no se establecen estos valores. Si defino para este caso para Android, píxeles de ancho para los tres elementos flex, la suma supera el contenedor de ancho. Pero con el valor inicial de la propiedad flex, los artículos se encogerán para que se ajusten al contenedor como puedes ver ahora. Por último, si cambio el ancho del artículo flex a 100 píxeles, se ve que los artículos flex no crecen y respetan. Definimos porque flex real property tiene valor cero. Otro valor posible es establecer flex 211 Alto. Eso es lo mismo que establecer la propiedad Flex width value. Fuera de esta combinación de valores tamaños, los ítems basados en su ancho, ya sea propiedades, pero lo hace totalmente flexible, vieron que observan cualquier espacio extra a lo largo del eje principal. Para los últimos ejemplos, cambié con 100 píxeles. Voy a conseguir otro resultado. Y ahora el artículo flex llenará el resto del ancho del contenedor. Con estos valores, los elementos flexibles se contraen si se desbordan. Y si solo definí flex con salida de valor, el primer hijo y los demás con valor inicial. Para este escenario, el niño a la entrada mantendrá el tamaño de ancho, y el primer niño ocupará el resto del espacio libre del contenedor. Ahora flex con valor NAN, eso equivale a flex 00 auto. Se dimensiona el artículo de acuerdo a sus propiedades de ancho y alto, pero lo hace total y flexible. Esto es similar a flex con valor inicial, excepto que no está permitido encogerse incluso en una situación de desbordamiento. Mostrando de nuevo dos situaciones. Primero, con un ancho de 300 píxeles, es visible que los elementos flexibles no se encogen. Con la sobrecarga de artículos flex, cambiando 300-75 píxeles. Los artículos flexibles no crecen para llenar todo el ancho del contenedor. Es visible. Ahora bien, este escenario en la página, el último valor es cuando la propiedad flex asigna un valor positivo. Es similar tener ese número positivo S valor de fila flex, flex shrink con valor uno y flex base con valor cero. Esta situación hace que el elemento flexible sea flexible y establece la base en cero, lo que resulta en un artículo que recibe la proporción especificada del espacio restante. Si todos los artículos del contenedor flexible utilizan este patrón, sus tamaños serán proporcionales al factor de flexión especificado. Yo uso ahora el valor uno para los tres elementos flex. Y como era de esperar, los artículos flex aumentarán su tamaño por igual hasta que llenen todo el espacio. Porque el valor de la propiedad flex es igual a los tres elementos. Situación similar cuando aplicamos la propiedad flex grow. Gracias y nos vemos en el siguiente video. 55. Alinear uno mismo: Ahora la propiedad de elemento flexible final, alinee uno mismo. La propiedad Self especifica la alineación para el elemento seleccionado dentro del contenedor flexible. Esta propiedad permite anular los elementos de alineación que vio en otro video. Esa es una propiedad aplicada a flex container y no flex items y define Aldo browser distribuye espacio entre y alrededor de elementos flex a lo largo del exceso cruzado de su contenedor usando los mismos valores que vamos a usar con el self align. En el siguiente ejemplo que muestro ahora, tengo mi contenedor donde defino elemento de alineación de propiedades con flex start eso, pongo el ítem en la parte superior del contenedor, como viste en otro capítulo. Dije anteriormente que el auto align invalida la propiedad align items. Entonces, si defino esta propiedad con flicks de valor y para mi ítem flex uno, cambio este ítem flex al final del contenedor, aceptando este valor que invalida el valor del ítem ligero en el contenedor. Los otros artículos flex permanecen en el mismo lugar como se esperaba. Se utilizan más propiedades. Flex de inicio, centro, línea base y estirado. Ese es el valor predeterminado. Voy a cambiar a Centro de Valores. Y en el navegador el ítem va a estar centrado como muestra la imagen. Ahora, voy a empujar los artículos para flexionar y usar align items. Y ves que el artículo flex que está en el centro no cambia como se esperaba. Esta es solo la propiedad que en lugar de crear alineación a todos los elementos aplicados para cambiar a un elemento específico. Eso puede ser en ciertos casos que vendiste dependiendo del diseño que quieras en tu página. Esta fue la última propiedad de artículo flexible. En los siguientes videos, aprendamos a crear diseños reales y su contenido. 56. Layout de Santo Grial: Hola y bienvenidos de nuevo. Para esta nueva sección. Y después de aprender las propiedades de flexbox, quiero crear el primer layout usando el modelo flexbox. Primero, el llamado trazado del Santo Grial, utilizando dos métodos diferentes. Esa es una buena experiencia para entender las grandes dinámicas y diferentes formas que tiene este modelo, como para los diseños de construcción. Después de usar los dos métodos, voy a crear el contenido de la página con el fin de hacer la creación de una página web que pueda ser utilizada para el mundo real. Después de crear todo el diseño del Grial, voy a mostrar una técnica avanzada que permite una gran versatilidad de diseño. Nos vemos la siguiente lección. 57. Placa de Santo Grial - primera versión: Entonces comencemos con el diseño del Santo Grial. El diseño del Santo Grial es una página con el otro pie de página y tres columnas con igual ya sea, donde la columna central contiene el contenido principal y las columnas izquierda y derecha contienen otro tipo de contenido como gatos o menús de navegación. Para crear el diseño del Santo Grial, utilizo dos métodos. Primero usando el otro extremo, más lejos como para bloquear elementos independientes del contenido restante que se crearán usando el modelo flexbox. Se ve en esta imagen esa situación con dos elementos de bloque, ya sea en la parte superior y pie de página en la parte inferior. Un contenedor flexible se utiliza para agrupar los tres elementos centrales que ahora son visibles. Elementos que serán mis artículos flexibles de árbol. Comenzando con el código HTML para el primer método, inserto mi otro usando la otra etiqueta, y ya puedo poner mi pie de página. Con la etiqueta de pie de página. Tenemos estos dos elementos. Uno que se quedará en la parte superior y el otro en la parte inferior. Entre estos dos elementos, quiero crear tres nuevas secciones. El primero con los enlaces de navegación donde utilicé la etiqueta nav, una sección con el contenido principal de la página donde uso el artículo Tech. Y a la derecha podría tomar un lado. Estas tres partes estarán dispuestas en una sola fila que pongo dentro de un div que creo, que llamo contenedor, y que trabajo como mi contenedor flex. Dentro de mi contenedor, tengo mis tres artículos flex que ya creé en el código, artículo de navegación y un sitio. Ahora el código CSS. Comenzaré definiendo el estilo para mi otro, dando un color de fondo azul recogido. Y yo ocuparía el 15% de mi viewport. Ya vemos en el navegador este elemento, la muerte ocupa todo el ancho. Ahora el elemento footer que es similar al otro, solo le doy un color de fondo diferente para poder distinguir entre ellos. El valor I es igual al valor que le di al otro extremo. Ahora, podemos distinguir los dos elementos, como se puede ver. Para terminar, y ahora que tengo los dos elementos creados, optimizo el código creando una regla única para otros y pie de página usando el mismo color de fondo. El siguiente paso es crear estilo contenedores. Para esta situación, creo mi contenedor selector de clase que solo recibe la propiedad de visualización con el valor flex, que permite que los hijos directos actúen como elementos flexibles. Por defecto, ¿los elementos flexibles están dispuestos en filas? Esa es la dirección que quiero usar. Así que no necesitamos usar la propiedad flex direction. Ahora construyamos los artículos flexibles de árbol. A la izquierda y a la derecha, tenemos los enlaces de navegación y el tamaño del elemento. Como el otro filtro extremo ocupan cada uno de ellos. 15% de la parte vista. El nav y el lateral ocuparán el resto hasta el 100%. Como color de fondo, defino gris oscuro. Y uso propiedad flex con valor uno para establecer la proporción de ancho que ocupan estos dos elementos. Ahora que hemos hecho todos los elementos de la parte inferior, necesitamos crear el artículo que también ocupará el 70% de la ventana gráfica, para lo cual voy a darle un color de fondo azul Alice. Finalmente, definir la proporción del ancho ocupado. Y como quiero que este elemento ocupe cuatro veces más espacio que los dos anteriores nav y el tamaño, voy a asignar el valor cuatro a flex property. Ya hemos completado el primer método para crear este layout. Gracias. 58. Layout de Santo Grial: Entonces comencemos ahora con el segundo método. La diferencia con el anterior es que utilizo un contenedor flex que contendrá tres elementos, entre ellos el encabezado y el pie de página que ahora es visible en la imagen. El frío creado anteriormente se utilizará para estos nuevos métodos siendo solo necesarios para crear algún código nuevo. Para este caso, agrego a mi código HTML un div con nombre de clase. Principal. La deuda div incluirá todos los elementos en tamaño. En el CSS. Defino el estilo para la clase principal, donde esta vez quiero que el contenedor flex ocupe el 90% del ancho. En lo que va de esta situación, no quiero que el trigo ocupe todo el espacio y más lejos contenedor para estar centrado. Defino la propiedad margin con los valores cero y auto. Para terminar. Y como de costumbre, configuré la propiedad de display en flex. Y ahora mis elementos flex serán el aether, mi div con nombre de clase, contenedor, y mi pie de página, donde todos estos elementos están dispuestos en una columna. Razón por la que establecí la dirección de flexión de la propiedad con el valor de la columna. El oro restante será el mismo porque sigo teniendo un contenedor flex que ya existía previamente usando el primer método contenedor que tiene tres elementos en una sola fila, nav article y los elementos laterales. El segundo método ya está terminado, y lo usarán para crear contenido de maquetación. Gracias. 59. Layout de Santo Grial: Vamos ahora la mejor parte, el contenido de nuestra página. Empezando por el otro. En primer lugar, les muestro una imagen general del diseño final. Quiero diseñar una página de deuda presentar alguna información de una empresa que brinda servicio Cloud para los usuarios. Hablemos ahora en detalle sobre cada parte de la página. Empezando por otros. Quiero que el asentamiento alguna vez logo de página colocado en el lado izquierdo del otro y en el lado derecho del símbolo de Facebook con el texto nos siga, donde podamos crear un hipervínculo a la página de Facebook. Para realizar estos cambios. Creo dentro de la otra etiqueta un nuevo div con nombre de clase, logo para mi logo. Y otro div con nombre de clase face que incluye un div con imagen de cara nombrada. Y otro que habíamos nombrado textos faciales. Uno para el logotipo de Facebook, y otro para el texto. Se ve ahora en el navegador, estos elementos colocados dentro del aether e identificados por los textos que escribí dentro de los divs. El primer cambio a realizar en CSS es definir en el otro, la propiedad display con el flex de valor. Porque este elemento contendrá elementos flexibles que reciben imagen y texto. Como quiero agregar el logo en la página del lado izquierdo, y la imagen y textos relacionados con Facebook en el lado derecho, utilizo justify content con el espacio de valor entre poner los elementos a la izquierda y derecha del contenedor flex. Voy a empezar a desarrollar el código para mis artículos flex que están dentro del otro. El logo div Wilson contiene el logo de la página para la que establecí un ancho de 200 píxeles y la altura de 90 píxeles. Después creo el código para mi cara selectora de clase. Ese será el otro elemento flex dentro del otro. Primero, contiene la propiedad display a la que le daré el valor flex. Desde este artículo flex, también trabajaremos como contenedor flexible porque F2 artículos flexibles dentro de él. Uno para la imagen de Facebook y otro más textos. Colocar estos elementos con algo de espacio en el margen derecho. Defino margen derecho con el valor de 50 píxeles y uso la propiedad, alineo elementos con valor central para que para flexionar los elementos definidos estén centrados y las líneas. Ahora voy a crear el estilo para que los elementos flexionen, uno para recibir imagen y otro texto. Para la clase de imagen facial, establecí la propiedad flex con el valor uno. Para los textos de cara de clase, vuelvo a usar la propiedad flex, esta vez con valor tres. Hacer con ocupado por el elemento flexible que recibe texto será tres veces mayor que el elemento flexible que recibe la imagen. El siguiente paso es definir en mi código las imágenes y textos para poner en el otro de la página. Primero en el div definido con el logotipo de la clase, ingresé la imagen del logotipo usando la etiqueta EMG. Dentro del div con la imagen de la cara de clase. Coloco una nueva imagen esta vez con el nombre Imagen de Facebook que al igual que la anterior, se guarda en el directorio principal. Por último, pongo el texto, síguenos dentro de los textos faciales. La última acción se define el ancho y el alto para las dos imágenes Colocado. Primero, defino el estilo para la imagen que está dentro del logo div con un ancho de 150 píxeles y la altura de 90 píxeles. Después creo los valores para mi imagen que está dentro la imagen de cara div con un ancho de 40 píxeles. Finalmente, f o bien estamos compuestos por los diferentes elementos. Nos vemos la siguiente lección. 60. Layout de Santo Grial: Después de crear nuestro otro, desarrollaré enlaces de navegación que se colocan en el lado izquierdo de la página donde usamos la etiqueta nav para esta situación. Yo creo dentro de este elemento y nuevo div con el link class nav, donde creo mi lista de enlaces usando una lista desordenada con tres elementos que corresponden a mis enlaces de navegación. El primero con el nombre en este segundo que llamo proyectos. Y por último, el ítem del enlace de contacto. Ahora desarrollando el estilo para mi elemento nav, voy a darle el valor flex a la propiedad display porque el nav actuará como contenedor flex. Y por último, usa la propiedad justify content para centrar mi dv que se inserta dentro del elemento nav. Ahora creando el estilo para el elemento UL. Primero, quiero darle un color de fondo solo para ver la posición de este elemento en la página, dando el valor verde claro. Para eliminar las viñetas, le doy el valor NAN a la propiedad list-style-type. Y por último, doy una cama de cinco pixeles para tener un espacio similar alrededor de los tres elementos de la lista. Colocación de los artículos en el Centro. Para los elementos de la lista, solo definiré un relleno de diez píxeles para crear una mayor distancia entre los elementos de la lista. Y ahora tenemos hecha nuestra lista de navegación. Ahora elimino el color de fondo que ya no se necesita. Si quieres crear. Hipervínculos, solo hay que ir al código HTML y usar la etiqueta de hipervínculo para crear enlaces individuales a otras páginas. 61. Disposición de Santo Grial: Hola. Ahora vamos a crear el contenido principal de la página definida en la sección del artículo. Quiero insertar dos contenidos, una imagen y algo de texto, como se puede ver ahora. Para insertar la imagen, creo un nuevo div con nombre de clase, imagen principal. Ese será uno de los dos elementos flex creados. Siendo el otro, el div con nombre de clase, textos principales que recibe los textos que quiero poner en la página. Pasando ahora al contenido, dentro del primer div, inserto la imagen con el nombre Cloud jpeg. Y en los textos principales div, primero inserto el título del texto con tech add, seguido de un párrafo con el texto principal, texto que copié del archivo que tengo en la carpeta principal. Antes de crear el código CSS para estos nuevos elementos, tengo que definir el elemento artículo S flex container para que los divs que están dentro de workers flexionen elementos. Entonces agrego la propiedad display con valor flex a mi código. Yo creo. Ahora el objetivo para mi selector de clase de imagen principal. Esta clase tiene la propiedad Flex con valor uno. Y doy un margen de 40 pixeles para dar algo de espacio entre la parte superior y el lado izquierdo del contenedor flex. Ahora para darle el estilo a la imagen, defino el elemento image que se encuentra dentro de main image div, con un ancho de 300 pixeles y el alto de 240 pixeles. El último paso es darle un ancho de borde un píxel y color negro. Después de la imagen, el selector de clase, texto principal que definí con valor flex uno, como la imagen para que los elementos flexionen ocupan el mismo espacio. Finalmente, definí la propiedad de margen con valor 50 píxeles al margen derecho y 20 píxeles al otro árbol. Ahora vemos en el navegador el contenido creado en la sección de artículos. Gracias. 62. Placa de Santo Grial: Ahora el elemento aparte que utilizo para ser parte de la página para noticias relacionadas con empresas, sitios web. Para crear contenido dentro del elemento de tamaño, agrego un div con un nombre de clase, lados texto donde pongo el título, últimas noticias, defino ancho, agregando. Seguido del hipervínculo que puedes crear que lleva al detalle de la noticia. Y escribo los textos de ejemplo. nuevos servidores en la nube deciden que x div funcione como un elemento flexible dentro del elemento del sitio. Entonces tengo que definir este contenedor lateral S flex usando propiedad display con value flex. Ahora para centrar el ítem flex, utilizo el contenido de justify con valor Center. Y el detalle final está centrado sumando. Creo un estilo para agregar con text-align propiedad con centro de valor, colocando el otro texto en el centro del elemento flex. Esta es solo una de las posibles soluciones para esta sección de la página. Siempre puedes crear otro tipo de contenido si quieres. Gracias. 63. Layout de Santo Grial: Por último mi pie de página, donde al igual que el otro, creo dos hojas que se colocarán al lado izquierdo y derecho son el pie de página y funcionan como elementos flex. Hacer contenido. En el lado izquierdo del pie de página. Pongo en el pie de página izquierda def, donde quiero tener un párrafo con textos de copyright y otros textos identificando todos mis decide a la derecha. El pie de página a la derecha. Div donde pongo el párrafo con textos sitemap que puede recibir un hipervínculo a si página. En el código CSS. Definí mi pie de página con la propiedad display con flex de valor, y para posicionar los elementos flex a izquierda y derecha. Yo uso la propiedad justificar contenido con espacio de valor entre. Para alinearlos para flexionar elementos en el eje transversal, utilizo la propiedad align items con el valor central. Y ahora para terminar el pie de página, doy cierto margen para que los artículos flex no estén al principio y al final de los ejes principales del contenedor. Definir margen izquierdo con valor 60 píxeles para el elemento flex de la izquierda. Margen, derecho, con el mismo valor para los ítems flex, coloque que los derechos. Ya hemos terminado el contenido de la página web. Espero que lo hayan disfrutado. Gracias. 64. Diseño avanzado - versión 1: Después de crear el diseño del Santo Grial, utilizo una técnica diferente para aplicar el modelo de caja flexible para crear un diseño. La idea principal detrás de esta técnica es crear un contenedor principal que agrupe los elementos llamados flex para ser utilizados en el layout. Definir en CSS reglas individuales a algunas de ellas con el fin de dar forma al diseño de la página. Veamos algunos ejemplos para entender esto importa. Para el primer diseño, creo mi contenedor diff donde inserto dentro seis elementos flex usando el elemento flex de nombre de clase. En este punto, nada nuevo en relación a lo que aprendemos. Ahora en el CSS. Pongo mi contenedor con un ancho del 70 por ciento, con un color de fondo Apenas lo haría una altura de 600 pixeles. Y finalmente, para centrar el contenedor, definí mi margen con valores cero y exterior. Finalmente, mi propiedad display con el valor flex, permitiendo los contextos flex para todos los hijos directos. Para los elementos flex, defino todos con el mismo tamaño, dando el valor uno a la propiedad flex de 120 píxeles, margen de diez píxeles, y un color de fondo con valor chocolate. Podemos comprobar que el layout S flex elementos insertados en una sola línea como se esperaba, todos con el mismo ancho. La estrategia que utilizo para cambiar el diseño es usar propiedad flex wrap que permite organizar los elementos flex en diferentes líneas. Junto con el flex wrap. También utilicé un selector Child que me permite elegir elementos flexibles individualmente para cambiar siempre algunas propiedades de los elementos flexibles elegidos. Esta combinación de flex wrap y end child permitirá una gran dinámica creando diseños. Voy a usar ahora una combinación de flex wrap y n child donde dije flex wrap propiedad con el valor rep que permite crear múltiples roles. Y mi propiedad align content con flex start value para que los elementos flex estén dispuestos desde la parte superior. En este punto, no se ven diferencias en el diseño solo porque no hay contenido en los elementos flexibles que haga que se encojan sin pasar a la siguiente diapositiva. Si agregas contenido, ves que los devs rapean cuando encoges la ventana y algunos de los ítems, pasaremos a la siguiente línea. ¿Qué voy a hacer a continuación? Quiero que mi primer y cuarto artículo flex ocupe todo el ancho. Y cada vez más pequeños. Yo, para esto, utilizo el selector End Child donde tengo que elegir a mi hijo 1.4 y definir mi propiedad flex con valor del 100 por ciento para ocupar todo el ancho. N conjuntos de 50 píxeles. Lo que veremos en el navegador, la primera y tercera línea, el primer y cuarto hijo que ocupaba ancho completo. Y segunda y cuarta línea, F para flexionar elementos en cada línea que ocupan espacios iguales. Porque definimos propiedad flex con valor uno. En los siguientes videos, voy a crear el diseño del Santo Grial usando estos nuevos métodos. Gracias. 65. Diseño avanzado - versión 2: Para este nuevo ejemplo, quiero volver a crear el diseño del Santo Grial, pero esta vez usando la técnica que presenté en el último video. Esta disposición, como hemos visto anteriormente, como cinco secciones diferentes. Razón por la que necesito definir cinco elementos flex dentro de mi contenedor, llamado que definí ahora dentro de la etiqueta body, creo el código de mi contenedor. Esta vez con color de fondo, negro, y un ancho con un valor del 70 por ciento. Para centrar contenedor utilizo de nuevo hacer margen con valor cero y auto. Propiedad de envoltura flexible con valor rep. Y los elementos alineados en la parte superior usando el contenido de la línea de propiedad con valor flex start. Ahora tenemos nuestro contenedor definir. Ahora vamos a crear el estilo para nuestros artículos flex. ¿Dónde quiero definirlos inicialmente todos con el mismo ancho? Entonces utilizo la propiedad flex con valor uno del 70% de la viewport. Después defina el color de fondo con el valor de chocolate. Y por último, un margen de un píxel para ser visible el espacio entre los elementos flex. Ahora es el momento de aplicar los estilos a solo unos pocos artículos flexibles. Por lo que no tienen que estilismo dicho anteriormente. Empiezo con el 1.5 infantil, que representan el otro extremo de los diseños. Yo uso el selector de fin hijo para estos niños. Y aplico el valor flex con 100% para ocupar todo el ancho del contenedor del 15% de la vista. Y por último, un color de fondo con el valor azul aciano. Ahora tenemos otros y los alimentos están terminados. Para terminar, necesito crear el estilo para los tres elementos flex que tienen el mismo tamaño debido a tener la propiedad flex con valor uno para cambiar el valor del árbol hijo para que ocupe más espacio. Yo creo una regla en la que este obtener el valor tres asignado a la propiedad flex y dar un color de fondo diferente. Con valor gris claro. Ahora es visible que este niño ocupa ahora más espacio que el niño 2.4. Y hemos terminado nuestro layout. Gracias. 66. Consultas de medios: Con la gran diversidad de dispositivos de Internet disponibles en la actualidad, es vital la creación de sitios web responsivos, lo que permite que un sitio web se adapte a cualquier tipo de resolución de dispositivo, donde el contenido, el diseño y el rendimiento son necesarios para garantizar la satisfacción del cliente. Una de las mayores ventajas son los sitios web receptivos es que ofrecen menores costos de mantenimiento en comparación con ejecutar diferentes versiones de un sitio web para adaptarse a diferentes dispositivos. Porque solo necesitas hacer los cambios a una versión única, aplicando media queries que sean útiles para aplicar estilos CSS dependiendo del dispositivo que utilices. Para el siguiente ejemplo, donde voy a aplicar una media query. Voy a crear un diseño que contenga otro y un contenedor que S para flexionar elementos. Yo creo en HTML, tag. Y un div que funciona como contenedor. Con dos divs dentro de su corbata, dar el nombre de la clase flex item, donde inserto dentro y agregando con texto título uno. Y hago lo mismo con su ítem flex, pero esta vez con el texto titulo dos. Si en este momento el HTML casi se termina. Ahora, sólo para terminar, copio a los textos, un texto más grande para el primer elemento flex que inserte en un párrafo, y uno más pequeño, el segundo elemento flex que pongo dentro de otro párrafo. Para el CSS, inicialmente creo mi otro y lo configuro con un color de fondo codificado en azul, y la altura del 15% de la ventana gráfica. Ahora bien, el contenedor donde tengo la propiedad display con valor flex, color de fondo, luz CAN de 85% de la ventana gráfica a ocupar. El restante. Para terminar, defino el estilo de mis artículos flex donde quiero que ocupen el mismo espacio, dando el valor uno a la propiedad flex. Un color de fondo de madera corpulenta. Y por último, IL-1, define cualquiera de los 200 píxeles. Para distinguir los dos elementos flex, creo una regla para cambiar el color de mi segundo elemento flex usando el selector final child para child two con color de fondo azul, violeta. Ahora podemos distinguir los dos elementos flex que contienen texto. Ahora es el momento de la consulta mediática. Si trato de encoger mi ventana, se ve que hay un momento que detecta comenzar a desbordar ve que hay un momento que el elemento flex. Y en ese punto, tengo que cambiar el layout debido a la resolución de la ventana que llevó al desbordamiento de contenido, el elemento flex. Entonces creo una media query en el CSS con esa condición que pruebo. Y se trata de cuando mil 200 pixeles donde ocurre la situación y funcionan como mis puntos gatillo. Entonces defino la propiedad de ancho máximo con valor cuando 10,200 píxeles. Eso hace que esa regla se aplique a la situación 0-1200. Tengo que definir mi elemento flex para que esté arreglando la columna en fila de celdas para que el texto quepa dentro del elemento flex. Entonces defino una regla a contenedor donde uso flex direction con la columna de valor para esta situación. Ahora estoy haciendo otro cambio. Mi primer artículo flex es más textos que el segundo. Así que defino que el primer árbol de valores flex hijo ocupe tres veces más espacio libre que el segundo. El segundo ítem flex que definí con valor uno. Para la propiedad flex. Para estas dos situaciones, utilizo el selector de fin de hijos para identificar la deuda infantil. Quiero cambiar. Ya tenemos nuestros cambios realizados. Y verás que cuando encoja la ventana, el elemento flex presiona desde la fila dos columnas en la que el primer elemento flex es mayor que el segundo. La última situación es si quiero cambiar el orden de los elementos flex para hacer esta situación, solo hay que definir son la propiedad para segundo hijo con valor uno y primer-hijo definido con valor dos. Ahora tenemos nuestros artículos flex con diferente orden. Cuando cambiamos el tamaño de la ventana. 67. Consultas de medios - versión 1: Después de usar media queries, quiero hacer ahora un ejemplo de contenido receptivo que excluya las media queries usando la propiedad flex wrap que te ayude a transformar tu layout en un diseño responsive. Voy a usar este ejemplo de las media queries en las que tengo otra y para flexionar elementos dentro del contenedor. Para este caso, defino que para resoluciones 0-1200 pixeles, aplico la regla que pone los ítems en una columna, dando diferentes tamaños y otros a través de los ítems flex. Para este nuevo ejemplo, también quiero poner los artículos en columnas cuando el impuesto se esté desbordando. Pero esta vez usando la propiedad flex wrap, excluyendo las media queries. Para esta situación, entonces eliminaré el código que se refiere a las consultas de medios. Y después de quitarlo, ya no puedo tener el ítem en columnas cuando cambié la resolución. Ahora agrego la propiedad flex wrap a mi código con valor rap que permite que los artículos se envuelven dentro del contenedor. El truco que utilizo es crear un valor de ancho para los elementos flex para que cuando alcancen estos valores, uno de los ítems se vea obligado a ir a otra fila. Para ello, creo una propiedad de base flex con valor 600 píxeles. Se puede ver ahora que encogiendo la ventana, el elemento flex ya pasa a la otra fila. Ese es un comportamiento similar que agregamos cuando usamos media queries. Sólo voy a hacer algunos cambios en el código. Primero, agrega un relleno con valor de diez píxeles para dar algo de espacio entre el texto de los dos elementos flex, un margen de un píxel. Y para terminar, coloco la propiedad flex con un valor de 11600 pixeles para ponerlo todo en una propiedad. El primero en el flex grow, uno para flex shrink para que los artículos flex puedan encogerse si es necesario. Y 600 píxeles para la propiedad de base flex. Gracias. 68. Consultas de medios - versión 2: En videos anteriores, ya hemos creado la maquetación de una página web y los respectivos contenidos. Se ve en la página creada que tenemos cinco secciones diferentes donde algunos de los contenidos se están desbordando. A medida que reducimos el tamaño del navegador. Para tener un diseño responsive, tengo que introducir soluciones que permitan que el contenido sea claramente visible. Para obtener este resultado, utilizo media queries como ya se usó para el ejemplo de la lección anterior. Para este caso en particular, quiero hacer un cambio en los elementos del árbol, nav, artículo y el tamaño. Y en lugar de estar dispuestos en fila, quiero ponerlos en una sola columna para dar más espacio para que podamos ver el contenido dentro los elementos flex cuando tengamos una resolución menor. Pongo ahora una media query en la que selecciono 1,200 pixeles como mi punto de transición. Ese será mi ancho máximo. Entonces de cero a este valor, tengo los tres ítems en una columna. Por esta condición, cambio mi propiedad de ancho de contenedor. Flexiona esa acción con columna de valor. Revisando de nuevo la ventana, vemos que desde cierto punto el contenido está dispuesto en una sola columna. Ahora ajusto el valor para que transición se haga con un valor menor porque la ventana se puede redimensionar un poco más sin desbordar el contenido. Doy el valor 950 píxeles y haciendo la prueba, vemos que es un valor que está más cerca del ideal. Ahora que tengo el valor definido y ya tengo el elemento en columna, configuro el nuevo ICT para mi nav y los lados, dando un valor del 15% de la ventana gráfica. Y quiero que la lista que tengo dentro mis elementos de navegación esté centrada en micro sexos. Razón por la que le doy el centro de valor a mi propiedad, alinear artículos. Ahora solo parte y cambio. Quiero mis enlaces de navegación en horizontal. Entonces creo una regla para los elementos de la lista Maya dando el valor iluminado a mi propiedad de visualización. Ahora que tenemos los enlaces cambian, solo optimizo el espacio que los elementos flex que como texto permanecen con más espacio que los elementos flex que quedan con la imagen. Para ello, defino una regla para la imagen principal de clase con valor uno para la propiedad flex. Y mi clase de textos principales. Doy el valor dos para la propiedad flex. Y finalmente, cambié el margen izquierdo y derecho a cero para que el texto quede dentro del elemento flex para tamaños de ventana más pequeños. Si desea cambiar el orden de los elementos, solo necesita usar la propiedad order. Hago ahora un cambio donde quiero que los pares videntes primero en segundo y tercer artículo. Entonces defino son los que hay que asignar. ¿Hay 22 nav y hay 32 artículo? Ya hemos terminado nuestra consulta de medios. Y puedes ver que nuestro sitio es completamente adaptable a cualquier tipo de resolución. Gracias. 69. Contenido de Flexbox: Bien, comencemos con una nueva sección. Una vez que hayas aprendido las propiedades de flexbox y cómo aplicarlas para crear un layout real. Es hora de ampliar las capacidades de este modelo y crear diferentes tipos de contenido web. En los siguientes videos de esta nueva sección, verás contenidos increíbles que el modelo Flexbox puede hacer en tu sitio web para crear un compromiso de visitante en tus futuros proyectos. Entonces comencemos con cosas nuevas. Gracias. 70. Galería web: Bien, hagamos un ejercicio simple pero muy útil donde aplique propiedades flexbox, creando una galería web final y excelente receptiva. Viajamos imágenes. El objetivo es construir dos grupos de imágenes donde utilices propiedades para poner los dos bloques en diferentes posiciones con título corresponsal, como ves ahora en el Bij que muestra la apariencia final de este proyecto. Como ve, puedo dividir la página en secciones, cada una con un grupo de seis imágenes. Para crear una galería web, utilizo el mismo método aprendido en videos anteriores. Estamos dentro del contenedor flex. Si todos mis elementos flexibles crean entonces estilos individuales para un elemento flexible específico con el fin cambiar el diseño al diseño previsto en la imagen, ahora tiene el diseño planeado para mi galería de imágenes, donde he definido un contenedor que se representa con la línea verde. Decidió SI 14 artículos flex que estarán dispuestos dentro de la página, siendo dos de ellos que te bloquearán comprar un ancho mayor correspondiente a los artículos flex que recibe los títulos. Pasemos ahora por la creación de la página web. Primero, el código HTML, donde creo un contenedor que incluirá mis 14 artículos flex. Para ello, defino mi contenedor div. Y dentro de él, agrego 14 divs con nombre de clase main. Hemos definido nuestro código HTML donde solo realizo cambios después. Ahora el código CSS, creo un color de fondo para mi cuerpo con valor gris para que podamos distinguir el cuerpo y los elementos restantes. Para mi contenedor, creo un estilo donde tengo la propiedad display con valor flex y valor CAN light para el color de fondo. El siguiente paso es donde la propiedad de flujo flexible con valor rho para organizar los elementos en roles y el valor rep para que los elementos se puedan organizar en varias filas. Por último, doy un margen de 70 pixeles a los lados izquierdo y derecho del contenedor. Por el momento, todavía no tengo nada especial en nuestro diseño. Entonces definamos nuestro selector de clases main, en el que establecí un ancho de 175 píxeles para los elementos flex. Y una altura de 140 pixeles, dando un color de fondo, coral. Y por último, doy un margen de diez pixeles y el lecho de cinco pixeles. Bien. Ahora ya puedo ver nuestros artículos flex en el diseño de página. Ahora solo necesito agregar un poco de relleno a nuestro contenedor que nuestros artículos flex se limiten a un espacio más corto. Agrego relleno superior e inferior con valor de 50 pixeles. Y para tener espaciado izquierdo y derecho, establecí un valor de 250 píxeles en ambos lados. Ahora tengo el layout más cerca de lo que queremos, solo necesitando en mi contenedor un detalle final de alineación. En mi Nexus. Yo uso el contenido de justificación de propiedad con espacio de valor entre inorder a los elementos que se distribuyen uniformemente en la línea. 71. Galería web: El siguiente paso es cambiar el ancho del primero. Y un ítem flex, que como puedes ver por la imagen, debería ocupar toda la especia en la fila. Recibiendo los títulos de la galería estos para flexionar elementos. Para hacer este cambio, utilicé el selector End Child para mi hijo uno y el niño comió con el valor 100 por ciento para mi propiedad flex y le di un coeficiente intelectual de 60 píxeles. Si quiero un espacio más grande entre las dos secciones de la galería, solo necesito agregar el margen superior al elemento flex número ocho. Y eso es lo que voy a hacer ahora. Elegir a mi hijo número ocho, y definir margen superior con valor de 50 píxeles. Ahora podemos ver en el navegador los cambios siendo visibles, el espaciado Datadog. Mi siguiente acción es definir en HTML las fuentes, los archivos de imagen que quiero insertar en la galería. Para las primeras seis imágenes, tengo los archivos con nombres Safari numerados 1-6. Como puedes ver en mi carpeta, creo la etiqueta EMG donde la fuente recibe el archivo Safari uno. Ahora hago cinco nuevas copias del código y borro demasiado viejo. Solo necesito cambiar los números de imagen a 2345. Y por último, seis. Ahora repito el mismo proceso, las seis fotos restantes, pero ahora con el nombre desierto numeradas, nuevamente 1-6. Entré a la fuente para la primera con el nombre desert one y hago las copias para las siguientes. Cambié ahora los números 22345 y finalmente seis. Tengo mis fotos insertadas en este momento, pero el tamaño no es el que quiero. Para cambiar esta situación. Creo una regla para el estilo de las imágenes, donde defino un ancho de 175 píxeles y el alto de 140 píxeles. El apareamiento de la página se verá mucho mejor. Para terminar, defino solo un borde para la imagen con línea sólida con un píxel y color carmesí. Para que las esquinas de la imagen sean ligeramente redondeadas, establecí la propiedad border-radius con el valor de 2%. Ahora para los títulos que se insertarán en flex item 1.8, creo un agregado con diferentes títulos siendo el primero, mi galería safari. Dentro de la adición. Y para la segunda adición, escribo un texto. Mi galería del desierto. Para estos dos encabezados, creo una regla en CSS que le da color carmesí al contenido agregado. Para terminar dos cambios. Primero, quiero los títulos con un fondo sólido de dos píxeles y cremas de color y que definí dentro la regla que creé para mi ítem flex 1.8. Y finalmente, defino una regla usando el selector over para cuando paso por encima, la imagen aumenta de tamaño. Para ello, utilizo la propiedad transform en la que utilizo la función scale que recibe los valores que definen la escala de crecimiento de la imagen. Para el caso de las imágenes, quiero que sean 1.5 veces más grandes. Cuando paso el ratón sobre la imagen. Finalmente aplico una sombra a la imagen usando la propiedad box shadow. Aplicando reglas para nuestro ejemplo y desplazamiento vertical de dos píxeles. El mismo valor para el desenfoque, dando un color definido por un valor decimal extra. Ahora puedes ver en el navegador el efecto cuando paso por encima de la imagen, aumentando el tamaño y creando una sombra. Si cambias el tamaño a una resolución baja, es razonable que la imagen no se desborde. Adaptar el contenido de la página a dispositivos con otras resoluciones. Se resuelve por ahora. Gracias. 72. Galería web: En esta nueva versión para mi galería web, utilizo imágenes flexibles con el codo de propiedades CSS que implementan el modelo Flexbox que recibe dentro del contenedor principal seis imágenes diferentes. Pero usando la propiedad de imagen de fondo. La gran diferencia en relación con el uso de etiqueta de imagen para insertar las imágenes es que la imagen ahora está en el código CSS y puede gestionar y cambiar las imágenes para ser presentadas por diferentes anchos de dispositivo. Eso no sucedió en HTML donde el carbón hacia fijo. Ahora la galería. Como veo, hay dos tipos diferentes de i'th para las imágenes. Razón por la que cuando creo los divs dentro del contenedor que recibe las imágenes, IF2 diferentes clases que doy el nombre. Art diff, el primero, tercero y quinto div que corresponde a las imágenes con el mayor. Para imágenes 24.6. Doy el nombre incluso div. Comenzando ahora con el estilo para el contenedor, establecí un ancho del 100% del ancho de la ventana gráfica para que este div ocupe todo el ancho del navegador y el ancho del 50% de la ventana gráfica. Para que F seis elementos dentro del contenedor se consideren artículos S flex, utilizo la propiedad display con el valor flex como color de fondo del contenedor. Yo uso el color gris claro. Y para alinear los elementos flexibles verticalmente. Utilizo el valor central para los elementos de alineación de propiedad. Y finalmente para mover el alelo contenedor poco hacia abajo, utilizo diez por ciento para la propiedad de margen superior. La siguiente acción es establecer la propiedad a los divs que recibieron las imágenes, comenzando por la clase, nuestro div al que le doy un ancho del 25 por ciento en relación al ancho del contenedor. Y ocupando el total. Razón por la que le doy un valor del 100% al ojo. Finalmente le doy un color azul al div para que pueda identificar el div en la página. Y ahora relacionado con dar par, el ancho tendrá el mismo valor, 25 por ciento del 80 por ciento del ancho del contenedor. Al tener un ojo pequeño en este div, como lo hice en el otro div, también le doy un color azul a la propiedad de color de fondo. Ahora aprendamos a poner las imágenes. Quiero agregar imágenes de fondo a cuál de los divs, usando seis archivos diferentes. Para elegir cada uno, utilizo el selector End Child que selecciona el primer XIV impar dentro del contenedor. Razón por la que uso el número uno, seleccionando al primer niño dentro del contenedor. Ahora, solo necesito usar la propiedad de imagen de fondo que recibe en el IRL. El primer archivo de imagen que quiero, en este caso, imagen uno. Para que la imagen ocupe todo el div, utilizo la propiedad background size con el valor 100 por ciento para width n, i. Ahora voy a replicar el código a las otras cinco imágenes, donde solo tengo que cambiar el número para identificar a los hijos. Eso va a seis, así como el nombre de clase infantil 24.6 de impar a par. El paso final es cambiar el nombre de los archivos. Imagen 2,345.6. Ahora tengo esta parte terminada con imágenes en cada ítem flex. Antes de ingresar consultas intermedias, pongo el color de fondo del documento igual al color de fondo del contenedor para que siempre solo color de fondo en toda la página. Para esta segunda parte, quiero que de un ancho específico, las imágenes se coloquen dos en cada línea, como se puede ver ahora en la página. Para crear este efecto, necesito usar una media query data aplica este tipo de cambios a valores de ancho de pantalla menores a 700 píxeles. Razón por la que uso propiedad max-width con este valor. Cuando ocurre esta condición, hago algunos cambios que serán iguales en las dos clases. Entonces puedo hacer, en este caso una sola regla. Quiero ahora a imágenes por fila. Entonces cambio el ancho al 49% del ancho de la ventana gráfica para que solo dos imágenes se ajusten a la totalidad de la ventana gráfica. Y doy un margen de un píxel para tener un espacio mínimo entre las imágenes. Y por último, el ite se establece con el valor de cuando Android por ciento. Como podemos ver, todavía no tengo el layout final porque las imágenes están todas en la misma fila. Y para resolver esta pregunta, utilizo la propiedad flex wrap que obligará a los elementos a ocupar el 49% definido de la ventana gráfica. Pasando las otras imágenes a la siguiente fila como ves sucediendo en la página. Ahora, este cambio en el diseño siempre se puede ajustar. Y sólo es necesario cambiar el punto de ruptura, que en este caso como el valor de 700 píxeles. Si cambias a 500 píxeles, los cambios volverán a ocurrir. Pero en este caso por un inferior con. Pero siempre se puede querer tener un layout con tamaño fijo para las imágenes correspondientes a un escenario donde necesito cambiar a un layout no flexible en el que las imágenes sean de ancho fijo. En este nuevo diseño, solo necesito darle al ancho del contenedor un valor con unidades de píxeles para que el contenedor no sea flexible. Voy a dar un valor de 1,700 píxeles que permitió que las imágenes, digamos con un valor fijo. Ya que tengo divs que recibieron las imágenes con el ancho usando unidades porcentuales, esta propiedad se calcula en relación con el contenedor que como valor fijo. Por lo que también se fijará el ancho. Para el caso de que tengamos un ancho de ventana menor. En este caso para 700 pixeles. Quiero arreglar las imágenes todas en una línea, pero esta vez con el mismo ítem para el que doy el 100% al ojo de las dos clases pares e impares. Y utilizo diferentes anchuras, dando 30% de valor para el div impar y 40 por ciento al otro extremo. Ahora sin la propiedad flex wrap, ya podemos ver que la galería ahora ocupa un valor fijo siendo necesario usar la barra de desplazamiento. Y cuando disminuya el ancho, llegaré a un punto donde las imágenes estén lado a lado con la misma altura pero con diferentes anchuras. Gracias por mirar. 73. Forma receptiva: Después de crear una galería de imágenes, quiero construir un formulario responsive usando flexbox. Para crear mi granja. Utilizo el método común con el elemento form para representar una sección que contiene controles interactivos. Enviar información para los usuarios al servidor web. Dentro del foro es donde creo todo el contenido. Entonces mi granja funcionará como mi contenedor flex. Y dentro tengo mis elementos flex que contienen campos de entrada para recibir datos. En esta imagen, se ve esa situación donde tengo un contenedor representado con la línea roja y para flexionar artículos en su interior con línea azul. Uno a la izquierda que recibe información de nombre y correo electrónico y otro a derecha donde el usuario, derecho Su mensaje. Este segundo artículo flex actuará como contenedor porque quiero F2 flex elementos dentro de él, representados con color de línea negra que quiero que se muestren en una sola columna. Este borrador es el punto de partida que utilicé para la creación de este proyecto. Ahora el código, el primer paso en código HTML es abrir la forma de etiqueta. Que le doy el nombre de la clase forma principal. Y dentro de ella creo dos divs que funcionan tiene elementos flex. Uno para recibir el nombre y correo electrónico del usuario, y la otra deuda recibe el mensaje del usuario. Mi primer elemento flex, defino con nombre de clase, contacto que contiene dos campos de entrada para recibir texto y etiquetas correspondientes. Para el caso del nombre de usuario, creo mi difamación con cuatro atributos que permiten al valor dado. Haga clic en la etiqueta. Y se tratará como elemento de entrada no disociado con fugas. Entonces defino el atributo for a con el nombre del valor. Ese será el valor que definí para el ID en mi etiqueta de entrada. Y como se permita asociar la etiqueta con el campo de entrada. Solo necesito definir finalmente en mi etiqueta de entrada el atributo type que recibe valor de texto. Ya que quiero insertar en este campo textos y el id con nombre de valor, como dije anteriormente. Después de crear este campo, creo otro. Esta vez con el atributo for, con el nombre correo electrónico. Luego mi etiqueta de entrada con el ID de correo electrónico, y el atributo type con valor de correo electrónico. Para que este campo reciba y valide el formato de dirección de correo. Para terminar el contenido del primer elemento flex, creo un botón de enviar usando el botón de etiqueta y le doy al atributo type el valor submit. Entre los inicios y luego la etiqueta, escribo textos enviar que aparecerán en el botón. Ahora, el segundo elemento flex donde quiero que el campo reciba el mensaje a enviar. Primero, defino el nombre de clase para el div. Para ello, creo un div con el mensaje de texto del nombre de la clase. Div, la deuda recibe texto donde defino la etiqueta etiqueta con atributo para, con nombre, MSG. Y para escribir el contenido del mensaje, utilizo el área de texto tecnológico. Donde hice id como el mismo nombre, muerte le doy a mi etiqueta. Para que esa etiqueta y campo de texto estén asociados. Ya he terminado con el código HTML y ahora tengo que definir el estilo para los diferentes creadores de elementos. La segunda parte es para el código CSS. El primer paso es definir el estilo para el foro principal de la clase. Como dije, el foro actúa como contenedor flex. Entonces utilizo la propiedad display con flex de valor y le doy un color de fondo, verde claro para identificar la finca en la página. Hacer con defino con valor 70% y vivo con 300 pixeles. Para centrar el contenedor, utilizo margen. Con valor cero y auto. Para terminar, doy un valor de relleno de 20 píxeles para tener algún espacio entre el borde del formulario y el contenido que hay dentro. Ya vemos en el navegador, el foro con un mejor aspecto. Solo necesita agregar algunas propiedades para los elementos flexibles y cambiar la posición y el tamaño de los elementos. Primero, cambio de estilo a clase de contacto. Defino esta clase con valor uno para flexionar la propiedad. Y el valor de escritura de margen de 60 píxeles para tener algún espacio entre las dos diferentes secciones de la granja. El elemento flex de contacto como dentro de dos grupos de campos de entrada para insertar datos y etiquetas correspondientes, terminando con un botón de envío. Quiero que mis campos de entrada ocupen una fila completa o el elemento flex. Entonces para esto, defino ancho con un valor del 100%. Y para optimizar el espacio entre elementos y posición, doy un relleno de diez píxeles y un botón de margen de 30 píxeles. Para terminar los elementos dentro del primer elemento flex, cambié el estilo de mi botón con el color de fondo, gris oscuro, color, blanco para el texto del botón, y el relleno de 15 píxeles. Ahora, el selector de clase de mensaje de texto para cambiar el estilo de contenedor flexible que recibe el campo que el usuario escribe el mensaje a enviar. Defino esta clase con flex de valor para la propiedad de visualización porque funcionará como contenedor flex. Quiero que los elementos flex su interior estén dispuestos en una columna. Entonces utilizo la propiedad flex direction con columna de valor. A continuación, le doy valor a, a flex propiedad a este elemento flex ocupar dos veces más espacio en comparación con el elemento flex que definí con valor uno anteriormente. Por último, quiero un botón de margen de 50 pixeles para este ítem flex. Para terminar el área de texto que quiero ocupar un espacio de arriba a abajo. Para hacer este cambio, le doy valor uno a flex property. Eso hace que el campo para insertar texto ahora vaya a la parte inferior del elemento flex. Como puedes ver ahora en la imagen. Ahora tengo mi respuesta **** terminada, como puedes ver en el navegador. Gracias. 74. Forma receptiva: Después de crear un formulario responsivo, solo haré un ligero cambio el objetivo de usar una propiedad flexbox. Para que puedas ver el potencial que tienen las propiedades de este modelo. Cuando creé el formulario, verificó que los dos elementos flex dentro del contenedor estaban dispuestos en fila de izquierda a derecha, respetando el orden en que se insertaron en el código HTML. Este es el comportamiento esperado de este modelo. Eso siempre sucede si no aplicas ninguna propiedad para cambiar este comportamiento. Lo que solo quiero cambiar ahora es la posición de los artículos flex. Al colocar el contacto flex item a la derecha y mensaje de texto a la izquierda. Para esta situación, solo uso la propiedad order, dando el valor dos para mis contextos de clase. Para la clase de mensaje de texto, le doy el valor uno a la misma propiedad. Se puede ver que después de esto cambia, los elementos flex cambian posición usando solo una propiedad simple. Para este caso. Los inmuebles están ahí. Necesito ahora cambiar en el contacto de clase. El margen de propiedad, derecho, margen, izquierdo, dando el valor de 40 píxeles para tener algún espacio entre los dos elementos flex. Se puede ver que después de este cambio, los campos de entrada están fuera del contenedor. Si le doy un color de fondo al contacto del ítem flex, verá que estos campos también están excediendo los límites del ítem flex como es de esperar. Porque contenedor también era corteza. situación ocurre porque el cálculo de ancho se ve afectado por los valores de margen y relleno. Para sortear esta situación, utilizo la propiedad de dimensionamiento de caja con el valor de la caja de borde, lo que permite hacer con cálculo de la propiedad no verse afectado por el relleno y el margen. Ahora bien, es factible que al agregar esta propiedad y cambiar los valores de margin-left, los campos de entrada siempre ocupen el 100% del ancho del segundo elemento flex. Nunca pasando y situación de desbordamiento. Así que no olvides nuestro sibilante y útil es usar la propiedad del pedido. Eso es todo por ahora. Gracias. 75. Introducción de jquery: Después de crear, organizar elementos de página y crear diferentes modelos de maquetación con flexbox, utilizaremos en los siguientes videos código jQuery para crear algunos efectos de interacción en nuestras páginas. Con el uso de poderosos widgets, métodos y eventos. Creemos juntos contenidos fantásticos para nuestros sitios web personales y profesionales. 76. Jquery - crear una página de faqs: Hola. En este nuevo video, Hagamos una página fija. Esa es una página en un sitio web donde vestiría inquietudes o preguntas comunes que los clientes. F. En esta página de ejemplo, quiero tener cuatro grupos con preguntas y respuestas corresponsales. Como si fuera visible en este modelo final que he construido. Entonces voy a hacer que funcione. El texto de las respuestas aparece después de un evento click. Y para esta interacción de eventos de mouse, utilizo jQuery en nuestro código. Esa será la parte final del proyecto. Así puedo dividir el código del proyecto en tres bloques. El contenido que se crea con HTML, el estilo es definido por CSS y la interactividad proporcionada por jQuery. Comenzando con HTML, usaré el modelo Flexbox para estructurar la página usando un contenedor. Los respectivos ítems flexibles, uno por cada grupo de preguntas y respuestas. Cada uno de los cuatro elementos flex consiste en un hipervínculo que nos permite ampliar el contenido que se encuentra dentro de un párrafo. Vamos al código y empiezo ahora a crear mi contenedor de clase. Como puede ver ahora, dos f, cuatro bloques con preguntas y respuestas. Yo creo dentro de mi contenedor para artículos flex definidos con nombre de clase main. Antes de que tengamos más contenido en este flex items, solo pongo un final en la parte superior de la página con las deudas preguntas frecuentes. Para dividir la página. Sabemos que en la página Efectos, alguna vez cuestionamos y respondemos. Y es esta parte la que voy a hacer ahora. Dentro del primer div principal, creo el div con nombre de clase expand, donde escribo la primera pregunta. Para que a todas las obras como un hipervínculo. Colocaré el div dentro de la etiqueta de hipervínculo, sin establecer un valor para los atributos age ref,. Ahora tenemos los conjuntos de piezas de preguntas. Se ve en el navegador que funciona como hipervínculo. Cuando paso el mouse sobre el div. Para las partes de respuesta, defino un párrafo a gi de trigo, doy textos al nombre de la clase donde agregaré un texto ficticio datos que copio de otro archivo. Ahora he establecido la pregunta y respuesta para mi primer div principal. El siguiente paso será usar estos contenidos a los otros árboles principales divs. Simplemente cambiando el texto para las preguntas. Con pregunta 23.4. Ya hemos terminado el contenido principal de nuestra página. Luego agregamos fin para preguntas y respuestas. Ahora vamos a crear un estilo para las diferentes secciones de nuestra página. Primero, nuestro contenedor. Como era de esperar, esta tendrá la propiedad display con valor flex. Ya que queremos aplicar el modelo Flexbox. Podemos ver que después de agregar esta propiedad, los elementos flex se colocan en horizontal. Entonces establecemos la propiedad flex direction con el valor de la columna para que el contenido se arregle de arriba a abajo. Siguiente paso, creo el estilo para los elementos flex, dando un margen inferior de diez pixeles a f, algo de espacio entre los elementos flex. Y finalmente, un ancho del 70% de la ventana gráfica. Ahora amplían clase donde solo cambio algunas propiedades relacionadas con los textos. A saber, una familia de fuentes, verdana, con un tamaño de fuente de 14 píxeles. Un peso de fuente con perno de valor. Y por último, el color para el texto que será gris pizarra oscuro. Para los párrafos, sólo defino la familia de fuentes verdana como lo hice antes para las bandas de clase seis. Y el tamaño de fuente de 12 píxeles. Para eliminar el subrayado de un hipervínculo, agregaré a mis elementos de hipervínculo la declaración del impuesto predial con el valor ninguno. Y a mi título inicial, Definiendo la etiqueta de encabezado, le puse con el color marrón. Ahora para finalizar mi código CSS, quiero establecer el color de fondo en mi Expand div. Cuando lo pase por encima. Para ello, voy a usar sobre selector, en el que defino un color gris claro a los fondos. Y el radio del borde de tres píxeles. Para poner a los jardineros def ligeramente redondeados. Ahora es el momento de código jQuery. El primer paso es copiar la dirección. Para cargar la biblioteca jQuery. Para ello, tendremos que agregar esta dirección a nuestro código, colocándose entre script open y ending tag, usándose el atributo SRC para recibir esta dirección. Ahora que tengo acceso a biblioteca en el código, agrego un documento listo eventos para evitar que cualquier código jQuery se ejecute antes de que el documento termine de cargarse. Y entonces porque quiero por defecto deuda, las respuestas, nuestros ojos. Voy a llamar a mi texto de clase donde uso los métodos ides para cualquiera de los párrafos que contiene las respuestas. Para este momento, tengo el ítem de texto, como se puede ver en el navegador. Entonces quiero mostrar el contenido del párrafo al dar un evento click en mi Expand div que contiene las preguntas. Para este i1. Haga clic en eventos en mi clase Expandir para seleccionar el párrafo. Cuando ocurre este evento click, utilizo el selector, esto para seleccionar mi objeto actual, ese es mi div Expandir. Entonces usa los métodos parent que selecciona los padres del elemento div, esa es mi etiqueta a. Finalmente, usando métodos, next devuelve el siguiente hermano de los elementos seleccionados. Devolviendo mi párrafo con el nombre de la clase texto. Como ahora tengo párrafos seleccionados, utilizo los métodos slide toggle para mostrar a nuestros ojos los elementos Match ID con un movimiento deslizante con el tiempo de transición de 600 milisegundos. Estos métodos se aplicarán para mostrar y ocultar los elementos de párrafo que ves ahora en el navegador con esta página, completa. Eso resuelve por ahora. Gracias. 77. Jquery - crear página con pestañas: En este nuevo video, aprendamos a crear los típicos pasos de página con el fin de tener múltiples secciones que permitan ya sea contenido que ayude a los usuarios a organizar una página. Para implementar un grupo de pestañas, usaremos el widget jQuery tabs, que te permiten usar la funcionalidad de una manera muy sencilla. Cualquier nota importante está ahí para usar este widget UF siempre dos siguiendo un conjunto particular de estructura de marcas que deben ser utilizadas para que funcione correctamente. Es decir, profundidades definidas dentro de lista ordenada o desordenada, donde cada elemento de la lista contiene paso, título y luego incurrir en deuda como en la edad ref atribuye el ID para identificar el div que como el contenido para una pestaña específica. Entonces, si tenemos dos pestañas, tendremos en la lista de herramientas elementos, dos anclajes a diferentes ubicaciones en la página. Eso puede ser elementos de bloque simples como divs, width, text. Antes de comenzar con el código. Se puede ver en este sencillo ejemplo, lo que expliqué antes, donde he definido en mi lista desordenada, dos elementos de lista en los que tengo mi edad ref, atributo que desafía a los dos divs a continuación. Siendo el primer paso asociado al contenido del div con ID ancla uno. Y la segunda pestaña asociada al contenido de div anchor también. Por lo que se sospecha que cuando hago clic en el primer paso aparece, el texto insertado en el primer div. Y en la segunda pestaña activa aparecerá el texto contenido en el segundo div. Este es el modelo que quiero construir. Ahora usando el paso del widget. Al final, quiero agregar algo similar a la página que mostré con tres pestañas disponibles. El primero tiene una imagen, mientras que el segundo y el tercero muestran algunos textos. Empezando ahora con código. Primero creo mi contenedor principal, que funciona como contenedor flexible. Y que contienen los elementos flex en su interior. Dentro de este div, como viste anteriormente, necesito una lista ordenada o desordenada, que le doy el nombre de clase, list, que contiene tres elementos de lista. Ya que quiero F tres pestañas diferentes, cada una de ellas recibiendo en la edad ref atributos. La etiqueta S con una identificación utilizada para identificar las ofertas donde tengo los diferentes contenidos de las pestañas. Para mi primer paso, asignaré el valor deb cuando envejecer ref, y escribiré texto. Sección uno. En este primer ítem de la lista. La segunda pestaña recibe la pestaña de referencia y el texto de la sección dos. Y para terminar el último paso, age ref recibe el paso tres y el texto de la sección tres para el último elemento de la lista. Ahora tengo que crear tres elementos de bloque y respectivos contenidos para cada una de las pestañas. Para ello, creo tres divs donde los ID serán iguales al valor que recibe el atributo age ref en cada ítem de la lista. Con este paso, ahora se asocian todas las pestañas y contenidos respectivos. Así que creo primero div con el id tab uno, otro div con el id tab dos. Y por último, el último div. Con la pestaña Id tres. Ahora creo el contenido respectivo comenzando por el primer div, donde tengo una adición con la sección de texto uno. Termina una imagen usando el archivo desert dot JPEG. Para el segundo div, utilizo la nueva boda con una sección de texto al párrafo con algún texto. Para terminar en el tercer div, como el anterior, alguna vez lo supe, agregando un nuevo párrafo. Puedes ver que ya tenemos nuestras pestañas de codos en la parte superior también, estando disponibles los respectivos contenidos desde la parte superior hasta la parte inferior del documento sin tener todavía código CSS que nos indicará los elementos de la página deben mostrarse. Este es nuestro siguiente paso. Crea nuestros estilos. Ahora el código CSS, ¿ dónde defino para mi contenedor? La propiedad de visualización con el valor de flexión para el hijo directo actúa como un elemento flexible. Después de definir esta propiedad con este valor, los ítems se organizarán en horizontal. Para mostrar los elementos de arriba a abajo. Establecí el valor de la columna de ancho de propiedad de dirección de flexión. Y ahora ves que el cambio en la dirección de nuestros artículos flex. Por último, definiré un ancho que ocupe el 70% de la ventana gráfica. Y yo con un valor del 100% de la ventana gráfica. Y como quiero que mis contenedores se centren, defino el margen de propiedad con valor cero. Y auto. Para mi elemento UL, establecí la propiedad de visualización con flex de valor. Eso colocará los elementos de la lista son por defecto. Voy a darle el color de fondo blanco. Y luego la propiedad justify content con el valor start value flex start value, para alinear los elementos de la izquierda. El siguiente paso es establecer el relleno dejado con cero para eliminar el espacio a la izquierda de nuestro elemento de lista. Y para terminar, defino el fondo del borde con un píxel, línea, sólido y color gris claro. Para el ítem de la lista. Primero, quito las balas existentes. Entonces le doy el valor de ninguno a mi propiedad tipo lista. Después defino mis elementos de lista con el color de fondo, gris claro, y otras pestañas a espaciar. Doy el valor diez pixeles a mi margen, ¿verdad? Y cinco píxeles al margen superior. Ahora aplico algún relleno a mis artículos usando un valor de tres píxeles. Y para terminar, quiero aplicar un borde de un píxel. Una línea continua y color negro. uso de la propiedad border aplicará un borde al otro lado. Y no quiero que me apliquen al borde inferior. Entonces agrego la propiedad de borde inferior con valor cero. Ahora, quiero que el texto enlazado que está en la lista no tenga el subrayado. Entonces solo necesito darle el valor ninguno a la decoración del texto de la propiedad. Ahora redimensiono la imagen que puse en el primer elemento flex, dando un ancho y alto de 200 pixeles. Y pongo la imagen con un borde de un píxel, una línea continua, y color negro. Y ahora para terminar, defino fuente para mi adición de elementos de párrafo e hipervínculo con valor de fuente Verdana y un tamaño de fuente de ciertos píxeles. Para terminar los códigos jQuery que permiten mostrar contenido individual para cada pestaña. Para iniciar y tener acceso al widget de pestañas, necesitamos agregar entre la etiqueta de script de inicio y finalización los siguientes enlaces. Empezando ahora con el código. Primero. Los eventos listos para documentos que se utilizan para evitar que ese código jQuery se ejecute antes de que el documento termine de cargarse. En el código HTML, tenemos definida una lista desordenada, y solo necesitamos seleccionar el elemento block que contiene esta lista. Que lejos este caso es nuestro contenedor. El siguiente paso es muy sencillo. Solo necesitamos llamar a nuestros métodos pasos. Y nuestros códigos ahora están hechos. Como ves, es muy sencillo usar este método, sin olvidar que solo es posible aplicarlo ya que tenemos una estructura específica creada en el código HTML usando una creada en el código HTML usando lista desordenada con sus elementos de lista que son envueltos por anclajes, usando la etiqueta a con un atributo href, haciendo referencia a los elementos de bloque que contienen contenido de tabulaciones. Gracias. 78. Felicitaciones: Hola otra vez. Y felicitaciones. Usted promedio hasta el final de discutir. Y ahora eres capaz de utilizar HTML para escribir algunos de los contenidos más importantes utilizados en una página web que te hará Gento de mayor nivel. Espero que lo disfruten. Ver? Fue a la siguiente clase.