Aprende CSS para crear sitios web modernos con respuesta

1. 0 Introducción rápida en CSS: Hey ahi, bienvenido a la guía QuickStart para aplicar CSS. Diseñar tus páginas web para principiantes. Mi nombre es Lawrence. Voy a ser tu instructor para este curso. Vengo con muchos años de experiencia en desarrollo web. Realmente disfruté trabajar con CSS porque realmente te da la oportunidad diseñar y dar vida a tus páginas web. Vamos a estar cubriendo toda la sintaxis común de CSS. Cómo agregar CSS y crear una hoja de estilos en tu página HTML, seleccionando elementos de página y luego aplicando diferentes propiedades de estilo a esos elementos de página. Establecer fondos de colores, imágenes de fondo, cuál es el modelo de cuadro, configurar los diferentes márgenes, relleno, bordes para los elementos de página que hayas seleccionado, cómo puedes actualizar el texto y estilos combatidos, incluyendo diferentes familias fuentes usando Google Fonts e importar fuentes desde sitios externos utilizando la propiedad display y cómo se pueden mostrar los elementos de la página, elementos página posicionados, flotando los elementos de la página, trabajo pseudo-clases y pseudo elementos, y cómo puedes aplicar aquellos dentro de tu diseño. También vamos a estar cubriendo cómo puedes crear plantillas básicas de sitios web usando floats CSS, CSS Flexbox así como cuadrícula CSS. Entonces todas las técnicas modernas que necesitas conocer para crear sitios web desde cero. Eso es todo lo que viene en las próximas lecciones. También hay una guía de recursos descargables que va a incluir el código fuente así como Handy Links, consejos y recursos para ayudarlo a lo largo de las lecciones del curso. Una de las mejores maneras de aprender es probar el código por ti mismo. No tengas miedo de darle una oportunidad. Pruébalo dentro de tu propio editor y ve qué pasa. Sé que estás emocionado de empezar. Empecemos con CSS en la siguiente lección. 2. 1 añadir CSS a la página: Es estar cubriendo cómo agregar estilo CSS a tu página HTML. También cómo se pueden seleccionar elementos y aplicar algunos valores de propiedades simples a esos elementos con el fin de tenerlos renderizados dentro de la página web. Css no es un lenguaje de programación como JavaScript y tampoco es un lenguaje de marcado como HTML. Css es un lenguaje de hoja de estilo y el propósito de CSS es tomar una página estructurada HTML simple, seleccionar los elementos de la página y aplicar estilo a los elementos. Tengo una página HTML básica y vamos a estar agregando algo de estilo a los elementos de la página. Hay varias formas diferentes en que puedes agregar estilo a la página, por lo que puedes agregarlo directamente dentro de las etiquetas de estilo. Seleccione el elemento con una etiqueta de encabezado. Precisaría primero el elemento. Entonces esta es la selección del elemento al que queríamos aplicar el estilo. Entonces aplica las propiedades de estilo que queríamos establecer el color del texto dentro del elemento header, especificaríamos color a rojo. Entonces satisfacemos un valor, que va a ser un valor de rojo. Entonces lo que eso hizo es que texto transformado dentro del encabezado lo hizo rojo. estilo también se puede aplicar directamente dentro del elemento, dentro del atributo style, especificando el atributo style. Y aquí vamos a poner un fondo. Color. Las propiedades de estilo van a ser las mismas y luego solo le asignamos un valor. Entonces voy a asignar un valor de negro a las propiedades de estilo. Entonces estamos configurando para este elemento la propiedad style de color de fondo negro. Lo que hace es que transforma el color de fondo en negro. Cuáles son las principales desventajas de colocarlo dentro de tu HTML es que es difícil de encontrar, difícil de actualizar, y necesitas pasar por los elementos. Y lo que sucede es cuando lo establezcas como un atributo de estilo, entonces esto en realidad va a ser anulando las otras propiedades de estilo porque esto va a estar llegando a la parte más cercana de el elemento ya que está directamente dentro del atributo. Entonces si tuviéramos que actualizar esto a negro, lo que pasa es que en realidad va a estar anulando el encabezado de estilo cada vez que cambiemos esto a, no importa porque estamos agregando otra propiedad de estilo a él. Para poder agregarlo directamente dentro de los elementos de la página, debes evitar agregarlo como atributo de estilo directamente dentro del elemento de página y hacer una selección con él, ya sea usando dentro de las etiquetas de estilo o dentro de la hoja de estilos, que son las mejores prácticas como cuando la está agregando con la hoja de estilos. Hay muchas ventajas de hacer que sea realmente fácil de actualizar, compartir el mismo estilo a través múltiples páginas HTML y qué hoja de estilo, un archivo separado que va a contener el estilo para la página HTML. Y este es un archivo al que se enlaza desde dentro del texto HTML. Hemos configurado una etiqueta de enlace y luego usando la HRF, vinculándola a donde se encuentra la hoja de estilo. Y luego usar el atributo REL con el fin de ayudar va a ser una hoja de estilo. Vamos a seguir adelante y vamos a crear un archivo completamente nuevo. Voy a guardarlo dentro del mismo directorio. Y ahí es donde vamos a estar aplicando las hojas de estilo y las propiedades de estilo a los elementos de página del archivo HTML. Lo he guardado como CSS estilo. Y luego vamos a vincular a este CSS el mismo encabezado. Y luego vamos a aplicar un color a ese encabezado. Así que actualicemos eso y pongamos el color al texto que se va a leer. Entonces ahora que hemos seleccionado el elemento aplicado usando la hoja de estilos, actualizando el elemento page con una etiqueta de encabezado. Y eso lo está cambiando a ser rojo porque vamos a estar trabajando fuera de la hoja de estilo. Y este va a ser el archivo separado que va a contener todo el CSS. Si tuviéramos que crear un segundo archivo HTML, podemos enlazar a la misma hoja de estilo. Si creamos una segunda que se llama índice dos, y pasamos a la segunda página. Voy a hacer una actualización a ella para que uno diga dos y el original aún dirá uno. Ahora si queremos seleccionar y actualizar el encabezado en ambas páginas, todo lo que tenemos que hacer es hacer una actualización a la hoja de estilo a la que ambos van a estar vinculados. Y ahora eso va a estar aplicando el color azul a ambos encabezados a través de ambas páginas porque ambos están enlazando a la misma hoja de estilo. Ese es el beneficio de usar una hoja de estilo separada con el fin de hacer actualizaciones al estilo que realmente se puede vincular fácilmente a ella y hacer actualizaciones a ella, que va a ir a través de todos los archivos que todos los archivos HTML que están enlazando a ese archivo CSS en particular. El CSS comienza configurando un selector. Por lo que este va a ser el elemento y el elemento al que se desea aplicar esa regla en particular establecida. Esto también puede aplicarse a múltiples elementos para que lo mismo. Entonces si estamos seleccionando todos los elementos que son elementos de lista, esto lo aplicará a todos los elementos de la lista. Cuando seleccionamos el elemento de la lista, vemos que los viñetas ahora son todos azules en todos los elementos de la lista. También puedes aplicarlo a todas las etiquetas de anclaje. Y ahora eso es actualizar el texto en ambos archivos para que sean azules para las etiquetas de anclaje. Y ese es el selector. El proceso de selección lo que se conoce como el selector. Y luego una vez que realizó la selección, la siguiente es seleccionar la propiedad que desea utilizar. En este caso, estamos utilizando la propiedad del color y estamos estableciendo que el valor de la propiedad sea azul. Por lo que cambiar el valor de la propiedad aplicará un valor diferente a esa propiedad de color. Y ambos juntos van a ser lo que se conoce como la Declaración. Estamos declarando que la propiedad color se establecería como roja dentro de las etiquetas de anclaje seleccionadas del archivo HTML de la página web, puede agregar múltiples valores de propiedad al conjunto de reglas dentro de la selección, dentro de los corchetes rizados. Apenas agregando en una segunda línea, voy a establecer el color de fondo y actualizaré el color de fondo de estos para que sea negro. Se va a aplicar a todos los elementos coincidentes que están emparejando esa selección, donde estamos utilizando los puntos y punto y punto para hacer una separación de esas diferentes declaraciones. Aunque no tuviéramos que tener líneas separadas, esto seguirá funcionando siempre tengamos el punto y coma que está separando esos valores de propiedad para separarlo. Por lo que es más legible dentro del archivo CSS donde lo estamos configurando en una nueva línea, la propiedad CSS, nombre y valor separados por los dos puntos. Así que adelante y crea un archivo HTML. Se puede añadir en una serie de elementos HTML. Aplica el estilo, crea un nuevo archivo CSS, selecciona algunos elementos en la página y aplica algún estilo a esos elementos y te preparas para pasar a la siguiente lección. 3. Selección de 2 elementos CSS: Sería explorar cómo podemos hacer la selección. Entonces la selección es clave para escoger el elemento de página al que quieres aplicar el estilo. Puedes usar cualquiera de las etiquetas, las clases de ID. También puedes hacer una combinación donde tienes los elementos extremos especificando el selector de clase. También hay un comodín, por lo que esto se aplica a todos los elementos de la página. También puede agrupar el proceso de selección seleccionando varios elementos de página, varios selectores y coma separando los selectores. Para aplicar el estilo, es necesario hacer una selección de los elementos. Tenemos una serie de elementos de página diferentes en la página, y vamos a estar haciendo selecciones de esos elementos. Entonces, en primer lugar, puedes seleccionarlo usando la etiqueta. Entonces, ya sea el div, el encabezado, el nav, la lista desordenada o el elemento de lista. Podemos seleccionarlo usando la etiqueta, y esto seleccionará todos los elementos de la página que coincidan con esa selección. Entonces por ejemplo, si queremos seleccionar el nav, sigamos adelante y trabajemos para hacer una selección y luego aplicar las propiedades a eso. Voy a actualizar la propiedad color de fondo de, de los elementos de página que tienen un nav. Y vamos a poner el fondo para que sea amarillo. Dentro del área visual de la página web, página HTML, podemos ver que el fondo va amarillo al nav. Seleccionemos los elementos de la lista y también aplicaremos un color de fondo a los elementos de la lista. Lo seleccionaré y lo configuraré en un fondo azul. Lo que podemos ver sucedió aquí es que la perilla que es el padre de la lista desordenada y así como los ítems de la lista obtiene un fondo de amarillo. Pero porque hemos aplicado el fondo específicamente a los elementos de la lista que están anidados dentro del padre. Vemos que obtenemos un fondo azul siendo aplicado a esos elementos. También puede seleccionar elementos utilizando sus identificaciones. Así que sigamos adelante y vamos a sumar un ID. Tenemos varios divs en la página. Y esta es otra forma en la que podemos distinguir bloque de código que queremos aplicar estilo para querer un ID de uno. Por lo que podemos seleccionar ese elemento usando el hash y especificando el nombre ID. Y voy a aplicar un color de fondo a éste también. Y vamos a poner éste en rojo. Vemos que este div particular ahora tiene la propiedad de background-color siendo leído, siendo aplicado a él. Si fuéramos a seleccionar todos los divs y aplicar un color de fondo de Bij a todos los divs. El que tiene la selección del elemento con el ID de uno todavía es rojo. Si movemos esta propiedad abajo, vemos que sigue siendo roja porque somos más específicos en el IED y aplicando el color de fondo del rojo. Y si fuéramos a quitar este div también está obteniendo un color de fondo de beige que se le aplica. Otra forma de hacer una selección es usar la clase. Tenemos un div con una clase de wrapper. Si queremos seleccionar ese elemento con una clase de wrapper y establecer un color de fondo a ese elemento. Y esto va a ser el padre de todos los elementos. Selecciona esto y configúrelo para que sea morado. Por lo que ahora todos los elementos van a conseguir un color de fondo de púrpura. Los que están anidados dentro de la envoltura van a tener diferente estilo de color de fondo se les está aplicando. Y eso va a resultar en este tipo de efectos donde tenemos al padre obteniendo el color original, los hijos dentro, también estableciendo diferentes colores para ellos. Y eso está afectando cómo está siendo salida. Solo debes tener un elemento con un ID particular. Entonces esta es una forma única de hacer una selección del elemento de página. Cuando lo estás seleccionando con clases o las etiquetas, existe la posibilidad de que haya más de un elemento que se va a representar. Si quieres ser realmente específico con el elemento de página, puedes seleccionarlo usando sus propiedades. Y tenemos una lista desordenada con los elementos de la lista, y todos tienen etiquetas de anclaje dentro. Entonces si queremos enfocarnos y enumerar elemento, le daré una clase de resaltado, y también le daré al segundo una clase de punto culminante. Queremos seleccionar todos los elementos de la lista agregando la clase de resaltado nos permite realizar la selección de aquellos elementos que podemos hacer cuando estemos seleccionando los elementos de la lista, únete a ella junto con una clase de destaque. Establezca el color de fondo para estos, establezca el color de fondo para que sea verde. Ahora hemos seleccionado estos elementos de página y aplicamos a un color de fondo de verde a ellos. Por lo que estos son los elementos de lista con la clase de destacar este estilo nos a 0 en esos elementos y aplicarle el estilo. También podemos seleccionar usando el comodín. Y esto va a ser algo que se pueda aplicar a todos los elementos de la página. Si queremos establecer un color de rosa al texto, el comodín selecciona todos los elementos de la página. Además, podemos agrupar selecciones juntas por comas separando. Así que sigamos adelante y vamos a volver a entrar y añadir varios identificadores diferentes, y agregaremos un elemento más con un ID de tres. Y si queremos seleccionar todos estos elementos coincidentes en la página, podemos por comas separadas. Entonces seleccionando el elemento con un ID de uno, ID de dos, ID de tres. Y luego también seleccionemos el elemento con una clase de resaltado. Todos los elementos coincidentes van a conseguir que esta propiedad se le aplique. Es así como se puede agrupar la selección, elementos seleccionados con un ID de 123, y también los elementos con una clase de resaltado y aplicar un color de rojo a esos elementos. Alma de los coincidentes ahora tienen un color de rojo. El resto son de color rosa. Y en realidad voy a actualizar esto para ser blanco porque tenemos colores de fondo para todos ellos. Y así es como se puede agrupar el proceso de selección, seleccionar varios elementos de página y aplicar las propiedades a todos ellos. Así que adelante y trata de crear tu HTML y hacer una selección usando las etiquetas, los ID, y las clases. Y puedes estar listo para pasar a la siguiente lección. 4. 3 colores y fondos con CSS: Esta lección se trata de colores y las diferentes unidades de colores que podemos añadir al fondo. Y ese es el fondo del elemento de página que hemos seleccionado, así como el color que va a estar afectando el color del texto del elemento de página que se ha seleccionado. Y luego cómo se pueden agregar imágenes al fondo, la taquigrafía para las imágenes, y luego los diferentes tipos de valores de color que podemos utilizar, como el RGB, el valor hexadecimal, el RGBA, o simplemente los valores nombrados para los colores. Eso viene todo en esta lección. Vamos a seguir adelante y hacer una selección de algunos de los elementos de la página. Entonces seleccionaremos el elemento con etiqueta del artículo dentro de la selección y luego aplicaremos algunas propiedades a ese elemento. Entonces seleccionando ese elemento que vamos a estar aplicando un color de fondo con el fin de establecer un color de fondo, utilizamos el color de fondo de la propiedad. Después a partir de ahí podemos seleccionar los diversos colores. Los colores se pueden agregar usando los nombres de color y la mayoría de los nombres de color típicos. Por lo que sólo se encuentra en la lista dentro del editor. Y estos son los nombres de color comúnmente utilizados y se puede especificar el fondo usando el nombre del color. Seleccionemos otra página, elementos y seleccionaremos el elemento con el ID de tres. Y hay muchas opciones diferentes para establecer los valores de color. Puedes usar los valores RGB, por lo que esos son los valores rojo, verde, azul. Esto se hace indicando el RGB. Entonces los paréntesis, estableciendo un valor de 0 a 2550 siendo el lado 0 estaría representando la cantidad del color que queremos aplicar. Entonces 0 es el más bajo. Si queremos aplicar lo más posible al RGB rojo, lo estableceríamos en 255, que es el máximo. Vamos a poner 0 verde y 0 azul al elemento con el fondo, con el ID de tres. Eso da como resultado un color rojo como el elemento con un ID de uno. Y haz un color de fondo, usa un valor de color hexadecimal. Entonces los valores hexagonales son seis valores de carácter dentro de un formato hexadecimal, indicados con el hash en un orden para indicar el valor hexadecimal que vamos a estar usando. Similar a lo que vimos con RGB. Los dos primeros personajes del carajo van a representar la cantidad de rojo. Entonces a partir de un valor de 0 es 0, que sería el más bajo. Y terminando en un valor de ff, que sería el valor más alto para el hex. Vamos a hacer lo mismo que estamos respondiendo 0 verde y 0 azul al color de fondo, lo que también tiene va a resultar en el color de fondo rojo. También hay una opción para un RGBA. Rgba nos permite establecer un color transparente. He creado otro elemento con el ID de cuatro. Y lo seleccionaremos, aplicaremos color de fondo al elemento con el ID de cuatro. Y esta vez en lugar del RGB, usará el RGBA. Y eso se va a indicar con RGBA. Y el último valor dentro de los paréntesis del RGBA va a indicar la cantidad de transparencia que le vamos a estar aplicando. Entonces 0 estaría aplicando 0 de ese color, el elemento. Vemos que este es el elemento con el ID de cuatro. Entonces no hay color que veamos visiblemente que se le está aplicando. Podemos ir todo el camino de 0 a uno. Si hacemos un 0.5, eso es el 50% del contenido que se aplica al alfa del bloque de color. Y ahí es donde obtenemos este tono más claro de rojo. Y esto en realidad va a ser transparente en un 50%. Entonces si tuviéramos un elemento o contenido debajo, obtendríamos que ese valor se mostrara. Si fuéramos a establecer un color de fondo para el cuerpo, y pondré el color de fondo para que sea azul. Los resultados para el RGBA van a estar resultando en un color púrpura porque está sombreando el 50% del color usando el fondo, que es azul, y usando 50% del color RGB, que es rojo. Y eso va a estar resultando en un tono púrpura. Si actualizas el RGB a21, eso no va a ser transparencia, y ese va a ser el valor a todo color. Y ahí es donde estamos obteniendo un valor de rojo que se le aplica. Así que cuando estés usando el RGBA, lo que hay debajo y los colores debajo van a ser, va a importar en cuanto a cuáles son los colores que se están utilizando. También es donde podemos establecer el color de la fuente. Así que seleccionemos el color de la fuente usando la propiedad color. Para ello, también podemos aplicarle un valor de color. Esto puede ser o bien los valores de color con nombre, RGB, RGBA, una adición a los valores hexagonales para los colores. También hay una propiedad que puedes usar para agregar opacidad al elemento de página. Al igual que lo que vimos con RGBA, donde todo esto está dentro de la única declaración y establecer un valor para eso. Y si establecemos el valor de opacidad para el elemento, lo que pasó es que sí obtuvimos la opacidad, pero eso se aplicó tanto a la fuente como al color de fondo. Entonces ahí es donde va a estar la fuente. Ligeramente azul porque la fuente también está obteniendo esa opacidad 0.5 aplicada a ella ya que el fondo tiene el 0.5 OPC aplicado a ella. Eso va a coincidir ahora con lo que tenemos con RGBA. Para que puedas usar la opacidad para aplicar opacidad al fondo. Para fondos, también puedes agregar y usar imágenes. Y luego necesitamos especificar la URL de la imagen dentro los paréntesis sí tienen una imagen ubicada directamente dentro de la misma carpeta. Y esa imagen se va a llamar local un punto JPEG. Y cuando aplicamos la imagen de fondo, vemos que lo que pasó es que ahora el fondo del cuerpo tiene la imagen contenida dentro de él. Eso porque la imagen va a ser más pequeña, entonces lo que tenemos que cubrir todo el fondo. Ahí es donde obtenemos este efecto, donde tenemos la repetición en la vertical así como la horizontal. Si estableces una imagen que va a ser transparente. Entonces esta es una versión transparente de la imagen. Vemos que ahora tenemos el fondo se está mostrando porque la imagen está colocando en la parte superior y todavía tenemos el color de fondo del azul que se muestra debajo de ella. Entonces si tuviéramos que hacer alguna actualización al color de fondo , fijarlo a un color grisáceo que va a resultar en el fondo sigue mostrando. Pero porque estamos usando un archivo PNG, eso va a ser transparente y podemos ver a través de la imagen al fondo. También puedes controlar el fondo para la repetición de la imagen de fondo que arriba si no quieres una repetición o una sensación que quieres repetir en la horizontal o la vertical. Vamos a reducir nuestro punto de vista a 100. Y de esta manera podemos ver la repetición dentro del área de visualización. Utilizando la repetición de fondo, tenemos la oportunidad de establecer cómo queremos que se repita. Entonces podemos configurarlo para que repita x. Y lo que eso va a hacer es que lo va a repetir en el eje x. Si lo pusimos a repetir ¿por qué? Eso lo va a repetir sólo en el eje y. Así que sólo tú solo tienes la imagen única y eso se está repitiendo todo el camino hacia abajo dentro del elemento de la página. Hay una serie de otras opciones para la repetición, por lo que como repetir y eso va a ser lo que es el valor predeterminado, donde lo estamos configurando y se está repitiendo como cruzar toda la página. No, repite. Entonces eso no va a repetirlo tanto en el vertical ni en el eje x, en el horizontal ni en la x Por lo que sólo mostrará la única imagen. Entonces digamos que puedes controlar cómo se repite la imagen dentro del fondo. Si solo estás usando solo la, también puedes establecer una posición de fondo. Y la posición de fondo es una propiedad que se utiliza para especificar la posición de donde se establecerá la imagen de fondo. Por lo que podemos posicionar eso desde la izquierda. También podemos hacer izquierda, abajo. También hay derecha y arriba. Eso se va a colocar en el fondo izquierdo. Esto lo va a mover hacia la parte inferior derecha y luego está la parte superior derecha. Y porque no tenemos mucho contenido ahí y la parte superior va a ser la misma si lo hacemos más grande. Y si movemos esto hacia abajo al fondo, que vamos a ser capaces de ver el posicionamiento real del fondo. Por lo que ahora está posicionado en la parte inferior de la página. Por lo que establece la posición inicial de donde estamos configurando esa imagen. También hay un valor de apego. Entonces si lo configuramos en la parte superior de la página, el archivo adjunto de fondo y lo esto hará es esto va a establecer la propiedad que va a especificar si la imagen debe desplazarse o ser fijo. Entonces ese es el apego y hay una posición fija o una de desplazamiento. Entonces en la voluntad fija se va a arreglar en su lugar. Así que incluso si nos estamos desplazando, va a mantener la imagen de fondo en el mismo lugar. Por lo que no va a estar desplazando donde nos estamos desplazando con el contenido de la página. Si lo configuramos para que sea Scroll, que es la otra opción. Ahora a medida que nos desplazamos, la imagen se moverá hacia arriba ya que tenemos menos espacio en la página. Y si fuera a hacerlo aún más pequeño, vería que a medida que nos desplazamos hacia abajo, esa imagen se mueve con la barra de desplazamiento. También hay un formato de taquigrafía para todo esto que fuera cuando podemos establecer todos estos individualmente, pero también podemos establecer esto como un grupo. Y lo que voy a hacer es que voy a comentar las propiedades aquí, quitándolo. Y puedes hacer comentarios dentro hojas de estilo usando las huelgas de SO de barra delantera. Y luego cuando hayas completado el comentario, solo haces los asteriscos y la barra inclinada hacia adelante y eso volverá a entrar y salir del comentario. Así que volvamos a los antecedentes. Y vamos a configurar todo esto dentro del formato de taquigrafía, configurando el color, la imagen, la repetición, el apego, y la posición. Todo esto se hace dentro de la propiedad de un fondo. También puedes usar solo el fondo y establecer un color de fondo. Esto también funcionará. No es necesario agregar todos los demás valores de propiedad. Si quieres solo un color de fondo, puedes usar la taquigrafía en lugar de escribir el color de fondo. A partir de aquí, se pueden añadir valores adicionales a esa propiedad. Puedes establecer la URL tal como lo hicimos con la imagen de fondo. Ahí está la imagen que se está poniendo. La siguiente opción es la repetición. Entonces si no queremos que se repita, podemos especificar que no se repita. Igual que estas tres líneas de código. También podemos establecer la posición superior derecha, podemos establecer el scroll, y por defecto va a ser Scroll. Así que vamos a fijar eso para ser arreglado. Entonces lo estamos arreglando en la parte superior derecha donde desplázate hacia abajo, esa imagen ahora se fija a la posición superior derecha de la página, no moviéndose con el scroll, que es la acción predeterminada. Y este es solo un método de taquigrafía que puedes usar para establecer todas estas propiedades y valores dentro de una línea. Entonces adelante y pruébalo. Actualice los colores de la fuente, así como los colores de fondo de los elementos de la página. Prueba en el RGB, el hex, así como el RGBA, y luego establece una imagen al fondo y estarás listo para pasar a la siguiente lección. 5. Acompañar con 4 patrones de bordes: Así que vamos a estar cubriendo los modelos de caja como partes diferentes, siendo el borde, el relleno, el margen, y el ancho y la altura de los elementos. Por lo que las dimensiones del elemento para el contenido, y como podemos ver en el lado derecho dentro del navegador, sí tienen una representación computada del modelo de caja así como del visual dentro de la página web en la parte superior, vamos a estar haciendo ajustes en el relleno, el borde, el margen y las dimensiones del contenido. Entonces digamos que nos vamos a centrar en el modelo de caja. Entonces el modelo de caja es un término que se usa cuando estamos hablando del diseño y el diseño de los elementos de la página. Por lo que cada elemento de la página, tendrá una representación del contenido. Entonces la altura y el ancho del contenido, el relleno de ese contenido, Hay un borde que va a envolver alrededor de él. Y entonces el margen va a estar afuera. Y eso va a representar todos esos elementos, diferentes partes que van a continuar dentro del modelo de caja. Si está utilizando un navegador Chrome, puede seleccionar un elemento, hacer una inspección. Y luego dentro del Inspeccionar, si desplázate hacia abajo hasta donde tenemos los estilos y los estilos computados, te dará una representación del modelo de caja de ese elemento en particular. Entonces tenemos el margen, el borde del relleno, y el ancho predeterminado y la altura. Por lo que hay márgenes adicionales que se agregan debido al contenido del bloque. Echemos un vistazo y haremos algunos ajustes. En primer lugar, estamos seleccionando el elemento de página que queremos aplicar el estilo también. Y ese va a ser el elemento con una identificación de dos. Y vamos a establecer un borde para que podamos ver los límites con el contenido interno. El borde se puede configurar utilizando el ancho del borde. También hay un color de borde que necesitamos ordenar. Y luego la propiedad de estilo fronterizo. Esto también se puede hacer como una taquigrafía para esto después que nos permita aplicar el borde alrededor del elemento de página. Ahora dentro del modelo de caja, tenemos un borde de uno. Voy a hacer esto un poco más pequeño, así que sí lo tenemos zoomed en bastante grande. Así que lo haré más pequeño para que sea más fácil verlo dentro de la pantalla. Y entonces de esa manera también podemos ver el modelo de caja que está asociado a él. Hay una manera de escribir esto como taquigrafía. Voy a permitirme slash y comentar esto y solo puedes hacerlo como frontera. Por lo que más comúnmente lo verás escrito como frontera porque sin todos estos, no vas a ver nada para la frontera. Establece el ancho del borde y establece el estilo del borde y el color del borde. Nos va a permitir aplicar eso. Podemos actualizar estos valores. Entonces si hacemos un cinco picos para la frontera, eso también se va a actualizar dentro del modelo de caja. Y notamos que dentro del elemento mismo, dentro de la frontera, el relleno está ahí contenido. Así que agreguemos algún relleno a ese elemento de página. Se puede fijar el relleno tal como vimos antes, donde podemos hacer una tapa de relleno y establecer una serie de unidades que queremos hacer el trazado. También puedes hacer relleno inferior, y eso es aplicarle los diferentes paddings. También está el relleno a la izquierda y a la derecha. Ponga el relleno a la izquierda en 15 púas y establece el relleno. Genial. Por lo que eso se suministra el relleno. El relleno está en el interior de la frontera y fuera del área de contenido para el contenido en sí. Vamos a establecer un ancho de 200 PECS, y vamos a establecer una altura de 200 picks que cambiarán las dimensiones del contenedor principal. Y en realidad voy a establecer que esto sea 100 para que todavía podamos verlo visiblemente en la página. Ahora que se ha actualizado. Considerando que cuando era solo el estilo predeterminado para el elemento que estaba tomando las propiedades del div. Entonces a medida que redimensionamos, estaba tomando todo el ancho a través del ancho disponible de cruz. Ahora tenemos una altura y anchura establecidos. Del mismo modo que vimos con la frontera. Podemos establecer las propiedades de relleno de borde dentro del formato de taquigrafía. Eso se va a hacer todo dentro de la línea única. Cuando estamos configurando el relleno, el primer conjunto de relleno. Si ponemos un relleno de cinco pix, eso va a aplicar cinco picks por todo el camino alrededor. Vemos que se aplica a la parte superior, la parte inferior, a la derecha y a la izquierda. Si podemos establecer un otro valor ahí, esto va a estar fijando la parte superior y la parte inferior se va a quedar a las cinco. Y la izquierda y la derecha van a estar consiguiendo diez fotos. Entonces, si tienes dos valores dentro de la taquigrafía para el relleno, lo va a aplicar primero a arriba e inferior y luego a la derecha e izquierda siguiente. Si agrega en tres valores dentro del relleno, se va a utilizar un formato de tipo en sentido horario donde se aplica el primer valor a la parte superior. El segundo valor se va a aplicar a la derecha. El tercer valor se aplica al fondo. Y debido a que aún no hay cuarto valor, entonces va a estar aplicando la posición izquierda y la derecha. Entonces eso va a ser aplicando el relleno izquierdo y derecho igual. Así que va a ser diez relleno para ambos. Entonces, por último, podemos sumar allí un cuarto valor. Y eso nos va a permitir aplicar relleno a la parte superior, a la derecha, a la izquierda, parte inferior, y luego al lado izquierdo. Y se puede ver que estar representado aquí y renderizado dentro del modelo de caja. Veamos también lo que podemos hacer con el margen. Así que tal como vimos con el margen, el margen, valor inferior superior, se iba a añadir ella al modelo de caja. El se lleva a cabo dentro de la página. Y también tenemos el método de taquigrafía que podemos usar en esos. Vamos a establecer un color de fondo para los elementos. Entonces estableciendo un color de fondo, lo pondré como leído. De esta manera podemos ver dónde están los límites del elemento de página. Observe que el color rojo va a estar contenido dentro del relleno también y todo hasta el borde. Pero luego fuera de la frontera por usar el margen, eso no se va a sumar al elemento. Ese color rojo no se va a sumar a ese elemento. Estableciendo el margen. Y así como vimos con el relleno, y comenzaremos con las 20 púas. Eso va a agregar un margen para la parte superior, inferior, y todo el camino alrededor. Si hacemos diez picks como el siguiente valor que va a ser para los valores izquierdo y derecho. Entonces como vimos con relleno, los márgenes van a funcionar de la misma manera. Entonces agregaré en las otras dos opciones. Y ahora tenemos relleno separado y márgenes separados para todos los lados del elemento de página. Normalmente sí usamos los métodos de taquigrafía para el relleno, para el borde y para el margen. Para aplicar el estilo a los elementos de esta página, siga adelante y trate de hacer una selección de un elemento de página y aplicar la actualización de los valores de propiedad del modelo de cuadro a ese elemento. Y puedes estar listo para pasar a la siguiente lección. 6. 5 texto y fuentes CSS: Vamos a estar cubriendo las diversas formas que puedes actualizar la fuente. Por lo que eso incluye actualizar la capitalización utilizando la transformación, actualizar la decoración, por lo que subrayar y eliminar lo subyacente, agregar una sangría de sombra, espaciado de líneas, altura de línea, actualizando el tamaño de fuente utilizando el método abreviado para el tamaño de fuente y la familia de fuentes. También cómo puedes seleccionar de Google Fonts y traer esas familias de fuentes tu página web usando la line-height para centrar el contenido verticalmente, así como usar el texto alinear y alinear ya sea a la izquierda, a la derecha o al centro. Y todas las propiedades de fuente de uso común que encontrarías con CSS están apareciendo en esta lección. Vamos a entrar en nuestro HTML. Vamos a seleccionar el elemento con una ID de dos, y luego vamos a agregar un borde a su alrededor y aplicar algunas actualizaciones a las propiedades y al estilo de eso. Establezca la frontera. Y voy a poner un pick, un pick border y hacer un borde rojo a su alrededor para que podamos ver la página, el contenido de la página, acercar para que sea un poco más grande. Hagamos algunas actualizaciones al texto. En saber con el texto, podemos establecer un color. El color se establece utilizando el valor de color, y eso puede actualizar el color del texto. También hay otras propiedades para los textos, como el alineamiento del texto. Y eso nos permite ya sea centrar, justificar a la izquierda, a la derecha. Por lo que hay una serie de opciones diferentes. Si lo ponemos a la derecha, lo que sucede con el texto es que se alinea a la derecha. Y por defecto se está alineando a la izquierda. También puedes centrar alinear el texto y eso centrará alinear ese contenido de texto dentro de ahí. También voy a estar sumando en algunos márgenes. Entonces no es exactamente directamente justo en la frontera. Y lo haré un poco más grande. Así que haz un relleno del elemento de página. También podemos sumar en algunos márgenes si es necesario, eso lo puede resaltar un poco mejor donde estamos viendo dónde se está alineando. Observe que la alineación se está llevando a cabo hasta el final de donde se encuentra el relleno. Si tuviéramos que montarlo como izquierda, aún tenemos el relleno en el lado izquierdo. Tráelo de vuelta al centro y guarde eso. También hay una justificación. Lo que están justificando que va a hacer es que se va a extender eso de manera más igualitaria. Por lo que parecerá que el contenido del texto se extiende por igual de izquierda a derecha. En este caso, debido a que termina la segunda parte de la oración, no es capaz de ajustar texto por el igual ancho para la izquierda y la derecha y los márgenes. Pero si tuviéramos que añadir texto adicional en él, sólo voy a duplicar el contenido de texto que justifica ahora está tratando de difundir igualmente el contenido entre la decoración del texto izquierdo y el lado derecho. Y hay una serie de opciones para esto. Entonces hay un subyacente, hay una superposición, un sólido ninguno es el predeterminado dice que no hay decoración en el texto. Aunque si estás usando una etiqueta de anclaje por defecto que haya decoraciones en esas. Hagamos lo subrayado para el contenido del texto. Después seleccionaremos el texto de anclaje y haremos la decoración del texto. Si desea eliminar la decoración de texto por defecto del ancla. Y podrías poner esos a ninguno. Y eso va a eliminar esas decoraciones de texto predeterminadas a través de la línea que puedes hacer esto. Haremos la línea a través del texto seleccionado. Hay una opción de superposición que colocará el, si el subyacente lo superará. Entonces coloca la línea sobre la parte superior del texto, puede transformar el texto utilizando la opción de transformación de texto. Si quieres capitalizar los textos que probablemente ya esté en mayúscula, puedes convertirlo todo en minúsculas. También puedes convertirlo todo a mayúsculas. Selecciona las etiquetas de anclaje, y actualiza todas estas para que sean texto en mayúsculas que lo mayúsculas todo. Voy a seleccionar el contenido del encabezado. Y vamos a capitalizar el elemento header, seleccionando la transformación de texto, y luego capitalizaremos y actualizaremos eso para que sea minúscula. Y entonces la pantalla lo va a estar mostrando como textos en mayúsculas. Como puedes hacer una sombra de texto y eso proporciona un efecto de sombra. Necesidad de especificar dónde está posicionando la sombra. Entonces configurándolo como cuatro fotos para Pix y luego cuatro picos hacia abajo. Entonces eso nos da el efecto de sombra. Y luego el verde es el color de sombra y la sangría de texto. Y luego especificando cuánto quieres sangrar el texto, que sangrará el texto. Empezando lo que es el primer personaje. Dentro del espaciado de letras de selección se puede utilizar para identificar el espacio entre las letras. Entonces esa es la propiedad de espaciado entre letras. Y esto está esperando un valor unitario. Configurar el espaciado entre letras de diez picks espaciará las letras utilizando los valores allí para los diez picos entre las letras. Y también selecciona la altura de la línea. Y la altura de línea establece la altura de esa línea particular de contenido. Golpeó. Por defecto, se establece en cualquiera que sean los tamaños de fuente. que puedas configurarlo a una altura de línea diferente que espaciará aún más el espaciado. Puede establecer un tamaño de fuente y el tamaño de fuente puede ser o bien un incremento o se puede establecer como un valor, ya sea las selecciones, puntos, EMs. Entonces cualquiera de las unidades que puedas usar, solo voy a usar las fotos y configurar esto en 20 picks, lo que hará que el tamaño de la fuente sea más grande. Y si no tienes la altura de línea, la altura de línea predeterminada se establecerá en las 20 selecciones. También usa la line-height para centrar verticalmente. Entonces si solo tienes la frase dentro del wrapper, tenemos el encabezado, el div. Entonces hagamos una selección de elementos. Entonces header div, configura una altura para este elemento y eso se va a establecer en 100 selecciones centrar horizontalmente el texto mucho en un borde. Y si establecemos la altura de línea en 100 picks, ahora eso ahora centrará verticalmente el texto dentro del elemento. También puede establecer la fuente a utilizar. Para que eso se pueda configurar usando la familia de fuentes y eso actualizará la fuente. Estas son las fuentes predeterminadas que se muestran dentro del editor. Para que puedas seleccionar de esas, y esas son fuentes predeterminadas. También puedes obtener fuentes de fuentes externas. Normalmente utilizaré fuentes de Google para seleccionar una fuente. Y este es un sitio web al que puedes ir a seleccionar fuentes y traerlas a tu proyecto. Bajando y hay más de 1400 fuentes en este momento en el que puedes seleccionar. Por lo que pasarías por aquí y seleccionarías la fuente que querías usar. Y seleccionaré éste, haré una selección de la fuente. Te va a dar un ejemplo de la forma en que va a verse. Seleccione la vista de fuentes seleccionadas. Y ahora puedes chupar, consigue el código para llevarlo a la fuente. Ahí está el CSS para la fuente. Podemos ir y aplicar eso a nuestra configuración de contenido web, la familia de fuentes. También necesitan traer la fuente adentro. Y te muestra cómo puedes hacer eso, donde puedes vincular a la hoja de estilo. La mejor manera de hacerlo si quieres hacerlo directamente dentro de tu archivo CSS, es que puedes hacer la importación. Importar te permitirá traerlo a tu archivo CSS. Cualquiera de tu HTML que esté enlazando al archivo CSS tendrá acceso para poder usar fuente de punto. Ahora cuando miramos el nombre de la empresa, se establece dentro de esta fuente que hemos seleccionado de las fuentes de Google. Actualicemos el tamaño de la fuente. Lo haré realmente grande, 23 EM. También tendrás una opción para establecer los diferentes estilos, diferentes estilos de fuente. Voy a seguir adelante y seleccionar los estilos de fuente dentro del texto de anclaje. Y hay opciones por defecto, vas a estar usando lo normal. Puedes configurarlo en cursiva, que va a inclinarlo ligeramente hacia el lado derecho. También puedes establecer un font-weight y hay una serie de incrementos ahí. Puedes configurarlo en negrita, negrita Tierra, y eso simplemente arboló el contenido de la fuente que se ha seleccionado. También puedes hacer esto como una taquigrafía de fuente. Voy a seguir adelante y seleccionar otro elemento de página donde tengamos el ID de uno. Entonces selecciona ese elemento de página y luego aplicaremos algunas propiedades diferentes a esas. Configura eso y agregaré en un borde para que podamos ver dónde está la ubicación de este elemento de página. Entonces ese es el que hemos seleccionado ahí abajo. Vamos a agregarle un poco de relleno. También actualiza el tamaño de la fuente. Ahí es una fuente realmente grande. La taquigrafía de la fuente. Podemos aplicarle algunas propiedades de dimensionamiento diferentes. Entonces, en lugar de usar el tamaño de la fuente, puede traer eso justo debajo de la fuente. Porque sí necesitas tener dos propiedades, que es el tamaño de fuente y la familia de fuentes. Entonces si queríamos actualizar esto e incluir la familia de fuentes que trajimos desde Google. Podría hacerlo dentro de este tipo de formato. Y ahora eso se va a aplicar y lo hemos hecho dentro de un formato de taquigrafía. Es necesario tener el tamaño y también la familia de fuentes. Y puedes agregar otros adicionales, como la cursiva. Para que eso se italicizará la fuente. Los adoptantes proporciona una forma más sencilla que puedes escribir ese contenido de fuente. Estas son algunas de las propiedades de fuente comúnmente utilizadas dentro del estilo. Así que adelante y trata de hacer alguna selección de los elementos de la página y aplicar las diversas propiedades de estilo a los elementos. Y podrías estar listo para pasar a la siguiente lección. 7. 6 Mostrar los elementos CSS: Esta lección va a cubrir qué hace la propiedad de mostrar y los diferentes valores tan comúnmente utilizados o bloquear en línea y bloque en línea, así como mostrar none. Entonces cómo van a afectar los elementos de la página y luego la diferencia entre visibilidad oculta y mostrar ninguno, y cómo van a aparecer en la página web. La propiedad display es una de las propiedades CSS más importantes que puedes usar para controlar el diseño. Entonces, por defecto, algunos de los elementos de la página, como divs, ya tienen una propiedad para ella. Y esa es la propiedad display, ya sea que va a ser un bloque o en línea, cuando estés creando en elementos de página. Y voy a crear una pareja aquí donde tenemos un div. Y luego dentro del div, agregaré en algunos tramos. Spans, lo que hacen es que están en línea y eso significa que el no va a tomar una nueva línea de código. Entonces por defecto los tramos van a estar línea y los divs son los que van a estar tomando el bloque completo de código. Si tuviera que actualizar y envolver esa primera palabra, mía con la nueva línea con el div, va a moverla y configurarla a una nueva línea, mientras que los tramos van a estar en línea. Hagamos una selección de esos elementos y haremos algunas actualizaciones de esos elementos de página. Seleccionando el encabezado que tiene el div que está inmediatamente debajo de él que puedes usar usando el signo mayor que. Voy a seleccionar un borde. Entonces ADA, un pick sólido borde negro a esa selección del div y luego los contenidos que están contenidos dentro de ese div. Voy a actualizar los tramos, seleccionando los tramos que están contenidos dentro del div. Y esto se va a aplicar a todos los tramos que están contenidos dentro este elemento padre y establecer la propiedad display para ser bloqueada. Lo que pasó es que los tramos ahora tienen la misma propiedad de display que el div, donde van a tomar una nueva línea, agregar en un borde. Ahora van a ir en una nueva línea, estableciendo la propiedad display para que esté en línea. Y porque no tenemos otro elemento que esté en línea a él, es por eso que no lo está configurando uno al lado del otro. Así que vamos a seguir adelante y vamos a actualizar el HTML. Y ahí tendremos los dos valores. Y estos dos van a ser divs. Y ahora estos son divs que van a estar en línea. También voy a añadir un borde a su alrededor para que podamos distinguirlos en el área visual de la página. Así que póngalos como azules. Por lo que ahora que los divs están en línea, los tramos están bloqueados. Podemos ver la diferencia entre los dos elementos a nivel de bloque comienzan con una nueva línea y ellos tomarán el ancho completo disponible del contenedor. Si tuviéramos que actualizar el ancho que está disponible dentro del encabezado, que es el contenedor padre. Y fijamos un ancho de eso. Y voy a poner eso a 200 picks. Los contenedores bloqueados, que los elementos de visualización de bloques van a tomar todo el ancho de eso. También hay una pantalla, ninguna. Por lo que voy a seleccionar el elemento nav y actualizar esa propiedad display. Así que esos van a ser los hipervínculos que tenemos en la página. Y pondré eso para que no muestre ninguno. Entonces lo que pasó es que eso realmente desapareció de la página y todavía está dentro del código fuente, pero la pantalla, ninguno simplemente lo oculta de la vista. Esto en realidad va a ser diferente a la visibilidad ninguno. Así que déjame traer ese de vuelta y voy a seleccionar el elemento con el que esconda ese. Y luego seleccionaremos el elemento con un ID de dos y usaremos visibilidad y estableceremos la visibilidad a oculta. Y la diferencia entre la pantalla none y la visibilidad oculta es que lo oculto todavía va a ocupar el espacio en la página, mientras que la pantalla ninguno eliminó por completo que elemento de página del área de visualización, el color de fondo de la misma. Por lo que es más visible. Entonces lo ocultaremos una vez más usando la pantalla none. Entonces cuando actualice esto para decir mostrar none, va a desaparecer ese bloque amarillo del área visible de la página. Vamos a seguir adelante y vamos a seleccionar los elementos de lista en la página actualizarán algunas de las propiedades de los elementos de la lista en la página. Así lista desordenada, lista de elementos. Y lo que queremos hacer aplicar a la lista los elementos van a actualizar la pantalla y voy a configurar la pantalla para que sea bloque en línea. Cuando hacemos eso, lo que pasó es que aún conserva las propiedades de la lista desordenada. Hay algunas propiedades predeterminadas. Por eso está sangrada. Pero con la pantalla ninguno, mostrar bloque en línea, esos nos permitieron alinear los horizontalmente. Y así es como normalmente se crean los menús de navegación, donde tenemos una lista desordenada y borramos los elementos de la lista desordenada, las propiedades predeterminadas como el margen y el relleno. Entonces quitando eso traerá eso directamente en línea. También pondré el borde para que podamos ver toda la lista desordenada y establecer el borde un pixel verde sólido. Eso es ocupar el espacio de bloque completo. Pero hemos eliminado el margen y el relleno que permitió que elementos de la lista se alinearan con el bloque en línea izquierdo va a ser ligeramente diferente a lo que tenemos con color en línea para ellos para que podemos ver dónde están los límites de esos elementos. Así que ese va a ser el bloque en línea. Y si lo cambio a inline, mira que hay un poco de relleno extra que va a estar por ahí con los bloques. Así que un poco de espaciado extra entre el inline, inline-block. Entonces hay una ligera diferencia entre los dos, y va a haber una diferencia mayor si tomamos el relleno y si agregamos relleno a los elementos. Una vez agregamos el relleno a eso, que a solo en línea. Los elementos en línea no van a llevar el dimensionamiento padre. Por lo que ves que cuando solo estamos usando el inline, aunque somos capaces de aplicar el mismo relleno mirando al padre de la lista desordenada. Ahora eso va a ser más pequeño que lo que tenemos para el dimensionamiento. Por lo que sí necesitamos conseguir esas propiedades de bloque usando el bloque en línea. Entonces es una combinación de entre el inline y el bloque. Y nos permite tomar la altura completa del padre-hijo, la pantalla, ninguno bloque en línea, valor de propiedad de visualización de bloque en línea. Puedes estar listo para pasar a la siguiente lección. 8. Posición de 7 elementos en CSS: Posiciones especifica el tipo de posicionamiento para el elemento. Así que vamos a estar mirando los comúnmente utilizados como el relativo, el fijo, el pegajoso absoluto, y cómo puedes usarlos para posicionar el contenido de la página. Y luego a medida que los desplazamientos de contenido de la página ven una diferencia en el comportamiento entre los diversos elementos que tienen las diferentes propiedades de posicionamiento aplicadas a ellos. Con esa posición propiedad fueron capaces de seleccionar un elemento y establecer su posición en la página. Así que sigamos adelante y vamos a hacer una selección de algunos de los elementos de la página. Se seleccionará la barra de navegación. Para la barra de navegación permitió un color de fondo para que podamos distinguir dónde comienza y dónde termina. Así que va a ser su barra de navegación. Y dentro del nav, también tenemos algunas listas desordenadas y un montón de elementos de lista, y luego algunas etiquetas de anclaje que están contenidas dentro de ahí. Vamos a seguir adelante y vamos a actualizar la posición de este elemento. Establece la posición, y pondré la posición en estática. ¿ Qué estática está posicionada estática? No es que esté posicionado de una manera especial. Se ****** personas que según el flujo normal de la página. Entonces configurándolo a una posición estática. Y haré que el texto sea un poco más grande para que podamos consolarlo. También actualizaré parte del contenido. Entonces el elemento artículo y voy a actualizar la altura en no que seamos capaces de tener algún desplazamiento para el contenido de la página con la posición estática, esa va a ser la posición predeterminada. Por lo que no hay un posicionamiento especial para ese elemento. Podemos utilizar la posición relativa. Y la posición relativa nos permite actualizar la posición desde su posición normal. Cuando lo establezcas como solo posición relativa, todavía va a estar en línea con el flujo normal de la página. Pero el uso de la posición relativa nos permite actualizar la posición izquierda y la de arriba. Entonces si quería mover todo el elemento hacia la derecha por 36, entonces esto se puede hacer usando la posición relativa con la posición estática. Va a ignorar esa segunda propiedad. Por lo que no te permite hacer la izquierda ni la parte superior. Por lo que es necesario establecer la posición relativa, lo que le permite establecer las otras propiedades y posicionar ese elemento haciendo ajustes a donde está sentado en la página. También hay una posición de fondo para eso. Si lo configuras a fondo 40 fotos. Por lo que está saliendo de un fondo de 40, y eso está saliendo de la parte inferior del elemento padre fuera de donde fuera la posición original de ese elemento contenedor. Voy a sumar a la clase de envoltura. Y pondré una altura de esto para que sean 400 selecciones. Y luego también haremos una frontera a su alrededor. Entonces una púa, bloque sólido. Ahí está nuestra envoltura para que podamos ver la parte superior y la parte inferior para el envoltorio. Si seleccionamos un elemento y si usamos la posición fija, esto va a fijar el elemento en el mismo lugar aunque la página esté desplazada. Vamos a seguir adelante y seleccionaremos el elemento header y establecemos su posición como fija. Y también agregaré un color de fondo para el asentamiento. Simplemente configurarlo como una cuadra. Así que esa va a ser la posición fija del elemento. Y en general cuando se está utilizando el diverso posicionamiento, también actualiza el color para que sea blanco. Con la posición fija, típicamente establecería un ancho, así que dale un ancho y haz un 50% de ancho. Una vez guardamos eso, vemos que tenemos un 50% de ancho. También hay una izquierda que puedes establecer. Del mismo modo que vimos con el pariente. El fijo nos permite posicionarlo en una parte particular de la página. Esto va a ser relativo a donde se encuentra la pantalla. Si tenemos una pantalla de tamaño más grande, entonces eso todavía va a estar sentado dentro del veinticinco por ciento. Veinticinco por ciento de descuento en la parte superior del tamaño de página. Entonces a medida que lo movemos hacia arriba, ese elemento también se moverá hacia arriba. Tengo que actualizar esto para ser RGBA para que en realidad podamos ver el contenido que está debajo configurando en como una versión Alpha. Y le daré 50% de transparencia. Por lo que podemos ver el contenido que está debajo del elemento de posición fija. También volviendo a donde ponemos el fondo. Si configuramos que sea 0, esto podría ser en realidad lo mismo. Por lo que la parte inferior a cero y 0 arriba va a estar dondequiera que estuviera la posición predeterminada. Entonces como era estático, aún estaría sentado dentro de esa posición predeterminada. A pesar de que no lo estamos moviendo por encima de la izquierda por 30, pero la posición superior habría sido todavía la misma. Si lo volvemos a relativo y lo actualizamos, eso va a ser actualizando donde originalmente se suponía que debía ubicarse, y eso va a ser actualizar ese valor de posición. También hay una posición absoluta. Esta es la posición absoluta y su relativa a la posición del antepasado. Entonces no es relativo al punto de vista. Entonces como fijo como relativo al punto de vista. El absoluto va a ser relativo al padre. Vamos a seguir adelante y vamos a seleccionar elementos de página y seleccionaremos el que tenga el ID de dos. En realidad selecciona el que tenga el ID de uno y actualice eso. Tenemos todo un bloque de texto ahí. Voy a establecer un color de fondo para que podamos verlo en la página. A amarillear. Por lo que va a establecer ese bloque de texto para ser amarillo y establecer su posición. Establezca la posición para que sea absoluta. Y usaré los mismos valores de posicionamiento que teníamos ahí. Ahora se está poniendo como absoluto. Pero la diferencia es que como estoy desplazando, esas posiciones fijas siguen siendo las mismas, pero el absoluto solo comienza a estar en el mismo lugar. Actualizaré la pantalla para que no sea ninguna de las NEF. Y así cuando nosotros por defecto y empezamos que esto se va a posicionar en relativo a donde está el padre. Si fuéramos a actualizar el envoltorio y si estuviéramos al margen, a la parte superior del envoltorio de 40 picks, eso también lo moverá hacia abajo y actualizaremos donde estamos fijos posicionándolo. A medida que lo desplazamos, todavía va a estar en relación con donde se encontraba el contenido de la página principal. También actualizamos esto para que se imparta y lo pondremos en 100 picks. Y además para la parte superior de la cabecera, sería un 100 selecciones. Y yo uso un RGBA para éste también. Y así podemos ver cómo ese se está moviendo de manera diferente a lo que tenemos para la posición fija. Porque una vez más está posicionado. Y si el elemento posicionado no tiene antepasados posicionados que utilice todo el cuerpo del documento. Entonces vamos a añadir en algún posicionamiento a esto. Entonces si establecemos una posición de relativa a la envoltura, a partir de aquí hacemos diez selecciones. Esto ahora está afectando donde se está fijando la posición absoluta. Porque el Absoluto sí se establece en relación. Si uno de los antepasados sí tiene una posición fija, entonces la establecerá a donde se encuentra dentro del antepasado. También hay una posición pegajosa. Así que selecciona el elemento con un ID de dos y establece esto para que sea posición pegajosa. También establece un color de fondo para este elemento. Y establecerá este color de fondo para que sea verde. Establece las 0 mejores selecciones. Y ese elemento va a ser pegajoso. Y el pegajoso cambiaremos entre relativo y fijo dependiendo de dónde esté la posición de desplazamiento. Vamos a reducir el tamaño del artículo y aumentaré el tamaño. Así que mientras estoy desplazando, vemos que el pegajoso va a estar cambiando. Entonces para dependiendo de donde esté el scroll, se establece la posición, Se va a actualizar en el área de vista. Entonces como me estoy desplazando hacia abajo, se mantiene pegajoso ahí. Y luego a medida que sigo desplazando, entonces sube a usar el cambio de posición relativa entre el pegajoso, usando tanto fijo como el relativo. Seguro que sí tienes suficiente contenido para que puedas desplazarte. Por lo que se pueden ver las diferencias entre el posicionamiento y las propiedades de posicionamiento. Valores. 9. 8 con elementos de CSS: El float te permite posicionar contenido en la página para que puedas construir diferentes columnas en tu página. Qué puedes hacer con eso, donde puedes colocarlo a la derecha o a la izquierda despejar el flotador para los siguientes elementos de página usando el claro cómo funciona el desbordamiento con el float y los elementos flotados, alinearlos dentro del resto del contenido de la página. Y cómo el flotador afecta a los siguientes elementos que son hermanos de los elementos que tienen el flotador aplicado a ellos. Así que todo eso se acerca en esta lección. Float se utiliza para posicionar y formatear contenido, particularmente para imágenes, así como anteriormente utilizado más para crear el diseño y la estructura de la página. Ahora tenemos la cuadrícula CSS así como Flex, que vamos a estar cubriendo un poco más adelante. Ahora queremos seleccionar la imagen en, dentro del elemento con el ID de uno. Así que pasa y haz una selección y selecciona el elemento con la etiqueta de imagen. Vamos a seguir adelante y vamos a aplicar algunas propiedades a eso. Voy a establecer un ancho de 100 picks y en realidad voy a usar el max-width. Entonces si el tamaño de la página se hace más pequeño, y la forma en que va a funcionar max-width es que el ancho máximo que vamos a ver para esta imagen va a ser de 400 picks, incluso si el tamaño de página asigna y como permitido para más, y vamos a estar pegando con el ancho máximo. Voy a reducir esto a un 100 picks para que podamos ver mejor la forma en que las carrozas van a funcionar si uno a flote esto en línea. Entonces en este momento vemos que la imagen va a estar en línea directamente con el contenido. Pero estamos posicionando el contenido. No estamos posicionando el contenido directamente alrededor de la imagen. Puedes usar flotadores para arreglar esto. Entonces configurando un flotador si queremos flotar la imagen hacia la derecha, Eso va a envolver el texto alrededor de la imagen. Vamos a añadir en un borde para la imagen. Así sucesivamente recoger sólido y permitido en un borde rojo para que podamos ver fácilmente dónde está el borde de la imagen. Eso nos permite sumar y la mitad del texto envolviendo alrededor de la imagen. También lo podemos flotar hacia el lado izquierdo. Eso hará el mismo efecto, pero posicionarlo en el lado izquierdo. También puede seleccionar los elementos de la lista dentro de la perilla. Y apliquemos un flotador a esos. Configuración, un flotador de izquierda para los elementos de la lista. Y lo que pasó ahora es que tenemos los elementos de la lista, están flotando justo al lado del otro. Y con los flotadores, sí es necesario aplicar un claro, lo contrario la propiedad float aún se aplicará al siguiente elemento. Y ahí es donde tenemos este tipo de efectos, donde no estamos borrando los ítems de la lista y donde deberíamos estar despejando y teniendo un claro para evitar que pase al siguiente elemento, podemos configurar un lapso. Y dentro del lapso, vamos a darle una clase. Simplemente lo llamaré flotador claro. Y de esa manera podemos seleccionar el flotador claro para la lista desordenada. Agregaré un borde alrededor la lista desordenada para que podamos identificar fácilmente dónde termina la lista desordenada en paradas y dónde están flotando. Notamos que dentro de la lista desordenada, no estamos obteniendo la altura de la lista desordenada. El fondo. Si fuéramos a aplicar un color de fondo a la lista desordenada, y solo le aplicaré un color de fondo de negro. Simplemente se cruza como una línea por el flotador que lo estaban flotando hacia la izquierda. Si fuera a quitar el flotador, dot cubriría todos los elementos. Pero en cuanto lo flotemos hacia la izquierda, eso va a ser tomar esos valores de propiedad y aplicar el flotador. Quiero sumar en el flotador claro. Lo que esto va a hacer es que nos va a permitir despejar las carrozas. Podemos despejar el flotador a la izquierda, podemos despejar el flotador ¿verdad? Y entonces podemos despejar flotador y ambos. Por lo general, típicamente vas a usar el Clear para flotar el declarado los ambos los flotadores. También voy a seleccionar el artículo y aplicar un borde alrededor del artículo. Y también vamos a aplicar la clase de solución clara al sitio a. Como se puede ver que lo que está sucediendo aquí es como lo estamos flotando hacia la izquierda, este elemento sigue recuperando ese estilo para flotarlo hacia la izquierda. Entonces es si hacemos el flotador claro que luego moverá la siguiente línea dentro del sitio de nuevo a su posición por defecto sobre al lado izquierdo. Si actualizamos el desbordamiento de la lista desordenada. Entonces si configuramos el desbordamiento para que sea auto, Eso va a entonces establecer la altura y las dimensiones del padre como lo estamos flotando. Entonces es ahí donde obtuvimos la cobertura completa para la parte negra que se nos permite seleccionar ese elemento. Y ahora está tomando las propiedades del flotador y evitar que el elemento se desborde está fuera del contenedor. Por lo que también podemos establecer eso al elemento con el ID de uno y hacer lo mismo donde podemos establecer el desbordamiento. De esa manera proporcionará suficiente espaciado para el elemento ya que estamos flotando el contenido sobre y aún así nos permitirá movernos a la siguiente parte de la de la página los elementos pueden usar los flotadores en orden para crear columnas dentro del contenido de su página web. Así que vamos a seguir adelante y vamos a crear un área de columna principal y configurar unos divs diferentes. Simplemente les daré una clase de col para columna y luego les daré diferentes valores contenidos dentro del contenido para que podamos distinguirlos. Así que estas van a ser tres columnas que vamos a configurar. Todos van a tener la clase de CO L. Y vamos a usar flotadores para crear una columna libre buen diseño. Pasando a la hoja de estilos, seleccione el elemento con la clase CLL y agregue en un borde. Para que así podamos distinguir entre ellos. Entonces aplica un flotador. Vamos a voltear hacia el lado izquierdo. Y fíjate que no tenemos la solución clara. Por eso ese contenido sigue siendo, Todavía se está flotando el siguiente contenido. Tenemos que aplicar el claro del siguiente elemento. Así que eso va a ser para el que va a realinear que a medida que estamos despejando las carrozas para los elementos. Vamos a establecer el ancho para estos, y lo pondré en 33.3%. El motivo por el que no somos capaces de hacer el 100% completo es porque la frontera, si fuéramos a quitar la frontera de lo que se abastecerían justo al lado del otro. También hay otra forma de arreglar eso donde podemos aplicar el dimensionamiento de la caja. Y lo que la propiedad de tamaño de caja nos permite hacer es incluir el relleno y el borde en la anchura total de las cajas. Así que vamos a aplicar la propiedad box-size a todos los elementos de la página y establecer el tamaño de la caja en conteo de border-box para el relleno completo también, el borde para los elementos. Y esto nos está dando la capacidad de alinearlos. Tengo que añadir en algún relleno para estos elementos y también vamos a fijar una altura para los elementos. Entonces eso nos da un poco más espaciado alrededor de los elementos. Y así es como se puede crear una tres columnas usando el flotador. Y mientras estés despejando el flotador del siguiente elemento hermano. Y también si tienes contenido que está desbordando los elementos flotados. Si tenemos las imágenes contenidas dentro de cada una de estas, habrá un desbordamiento. Para que puedas establecer el desbordamiento a oculto. Eso ocultará cualquier desbordamiento del contenido. O si lo configuras a auto, eso reajustará automáticamente la altura y nos permitirá desplazarse para ver el contenido completo del elemento ha sido flotado. Por lo que hay dos opciones que puedes hacer con el desbordamiento para encajar correctamente el contenido de la página. Así que adelante y pruébalo en tu página y familiarízate con lo que puedes hacer con la propiedad float y los diferentes valores que se asocian a ella. 10. 9 clases de Pseudo en CSS: Va a ser una lección divertida donde nos vamos a centrar en las pseudo-clases. Y lo que hacen las pseudo-clases es que nos permiten hacer selecciones así como definir el estado de un elemento. Por lo que típicamente se usa en etiquetas de anclaje donde tienen el enlace, el visitado, el flotar y activo. Puedes actualizar esas propiedades de estilo. No se limita sólo a esos elementos, las etiquetas de anclaje, puedes colocarlo en cualquier elemento donde tengamos el hover. Entonces en caso de que pasemos por encima, estamos consiguiendo un borde rojo para las imágenes. Los otros elementos que se pasaban por encima se están volviendo de color azul claro. También hay una puede hacer una selección. Así que primero y niño perdido, se puede hacer el enésimo niño, lo que le permite hacer parejo o impar. Se puede hacer un estilo alterno para los hermanos. También especificando la casilla de verificación, marcando para ver si está marcada y aplicando estilo cuando se marca. Y también está la pseudo-clase de enfoque, que actualiza las propiedades de estilo cuando se aplica el enfoque a los elementos. Pseudo-clases, se puede definir el estado del elemento. Entonces si el elemento, y esto se hace típicamente cuando estamos usando hipervínculos. Hagamos una selección de las etiquetas de anclaje y vamos a actualizar algunas de las propiedades de pseudo-clase para eso. Por lo que típicamente sí tenemos un valor para el enlace en sí. Y estos cambiarán dependiendo de si ya se ha hecho clic. Entonces esta es una propiedad predeterminada de los hipervínculos. Y si quieres cambiarlos, por lo que todos estos enlaces que tenemos actualmente, si los configuramos como un enlace completamente nuevo. Entonces eso significa que el Enlace no ha sido visitado. Podemos establecer la propiedad para el enlace y vamos a actualizar el color. Eso va a significar que si tenemos un hipervínculo que no se ha visitado, eso se pondrá rojo. Y actualizaré esto para tener un valor diferente. Por lo que ahora vemos que los que no han sido visitados van a leer. También tenemos enlaces que se han visitado. Entonces vamos a establecer un valor completamente nuevo por defecto para el estado visitado del enlace y actualizar eso y los que han sido visitados. Vamos a establecer que eso sea verde. Eso va para todos los otros enlaces que tenemos. También puede establecer un efecto de desplazamiento estacionario cada vez que pase el cursor sobre el enlace. Por lo que en este momento por defecto no hay efecto de hover a ella. Entonces a veces van a hacer eso. Tienes la decoración de texto y eso se pone a ninguno. Para que al pasar el cursor sobre él, el subyacente desaparece. También puedes actualizar el color de fondo de los elementos. Entonces mientras pasamos sobre ellos, vamos a ponerlos a leer. Y vamos a establecer el color del texto para que sea blanco. Para que eso te dé este tipo de efecto que comúnmente ves dentro de los menús de navegación. También hay un estado activo. Entonces seleccionemos los elementos y actualicemos su estado activo. Y activo. Vamos a establecer esto como este tipo de color para el activo. Lo activo significa que cada vez que se hace clic hacia abajo mientras estoy flotando sobre él, si lo presiono, entonces eso se va a poner verde. Entonces eso nos va a dar el activo. También actualicemos el tamaño de la fuente para que sea un poco más visible ya que lo estoy presionando. Cuando se hace clic, se pone grande. Y luego cuando lo suelto, se remonta al dimensionamiento predeterminado. Entonces ese es el estado activo. Y esas son pseudo-clases típicas que podrías tener, que tienes para las etiquetas de anclaje. Por lo que no tiene que ser solo en las etiquetas de anclaje. Puedes configurarlo en otros elementos de página. Entonces por ejemplo, llegué a seleccionar las imágenes, van a establecer el ancho de las imágenes en 100 picks. Y establecerá la altura de las imágenes en 100 selecciones. Eso los hará mucho más pequeños. Apliquemos una pseudo-clase a ellos. Siempre que pasemos por encima de las imágenes, voy a seleccionar el borde. Y estableceremos una frontera de tres picoletas. Y se irá a leer cuando pasemos el cursor sobre él. Por defecto, agreguemos en un borde para que las imágenes sean bloqueadas. De lo contrario las imágenes cambiarán en su posición. Cada vez que me pongo sobre ellos. Ahora están obteniendo el fondo rojo. También es extraño para el div y un sudo para el div. Así que cada vez que se vuelca sobre, vamos a actualizar el color de fondo y establecer esto como el color de fondo. En realidad, no vamos a establecer eso al div principal, pero lo configuraremos a los elementos que están contenidos dentro de la principal. Seleccionando el elemento con la clase de envoltorio. Entonces va a ser el elemento principal y aplicarlo a todos los elementos que hay dentro de ahí. Entonces todos los elementos child dentro de wrapper que inmediatamente dentro de wrapper. Ahora vamos a tener ese efecto de hover que se les aplica. Entonces esas son todas las secciones principales que teníamos dentro de la página web. También puedes usar el pseudo con el fin de especificar uno de los hijos. Entonces, si querías conseguir el primer hijo de wrapper, puedes especificar el primer elemento hijo. Entonces esta es otra forma en la que puedes afinar el proceso de selección. Actualicemos el color de fondo para el primer niño y lo pongamos en rojo. Va a ser el primer hijo del envoltorio. En realidad voy a bajar a donde tengo los divs. Y le daré a esto una clase de fila, seleccionaré al primer hijo que está dentro de la fila. Va a ser un poco mejor de usar. Dentro de la fila, queremos seleccionar la primera columna. Entonces podemos hacerlo seleccionando la clase y luego seleccionando el primer hijo del elemento. Por lo que va a devolver el primer hijo coincidente dentro la lista que todos van a estar en el mismo nivel. Entonces todas las columnas están en el mismo nivel. Ahí es donde podemos seleccionar al primer hijo. También puedes hacer el último hijo también. Así que al seleccionar dentro de la fila se actualizará y establecerá la última propiedad hijo. Podemos poner eso en azul. También puede ser específico, por lo que usar el enésimo niño. Entonces ese será el número de niños. Entonces si quieres configurarlo para cada segundo elemento, y luego especificamos el número que queremos omitir también. Entonces esto lo va a estar aplicando a cada otro elemento por cada segundo elemento. Y actualizaré el color de la fuente a leer. En este momento sólo va dentro del elemento. Y vamos a copiar estos y los vamos a duplicar. De esa manera podemos establecer en múltiples elementos que son los elementos child cuando estamos especificando usando su valor de índice. Así que eso se va a relacionar con el segundo. Vamos a actualizar y establecer un color de fondo y establecer el color de fondo en verde. Así que de nuevo, va a ser el segundo. Podemos actualizar esto para seleccionar todos los coincidentes que sean impares. También podemos actualizar esto para seleccionar todos los coincidentes que sean parejos, que lo estaremos aplicando a todos los elementos alternos. Vamos a seguir adelante y añadir en una casilla de verificación dentro de nuestra página. Sirve nuestra casilla de verificación con un cheque me. Dale una clase de Checker, y haremos algunas de estas. Así que tenemos el cheque me uno, Check Me tambien, compruébame tres y me comprueban. Por lo que eso nos da algunas casillas de verificación en la página. Y ahora vamos a seleccionar los elementos que son la entrada. Con el tipo de casilla de verificación. Podemos ser más específicos con los tipos de entrada mediante el uso de los corchetes y luego especificando el tipo. Entonces este va a ser uno de los atributos del elemento. Queremos aplicarle la opción comprobada. Entonces comprobando para ver si está comprobado y luego aplicarle algún estilo. Lo que queremos hacer, vamos a establecer una altura de 50 pixeles y un ancho de 50 pix a este elemento comprobado. Cuando sean revisados, se van a poner muy grandes. También hay un pseudo-selector de enfoque para que se pueda aplicar si nos estamos enfocando en una entrada. Y vamos a actualizar el color de fondo de la misma. Entonces pon eso a amarillo. Y en realidad voy a actualizar y agregar algunas entradas adicionales solo regulares. Ahora estas entradas, siempre que se seleccionan y el foco está en ellas, obtienen el selector de amarillo y las casillas de verificación. Todavía van a estar actualizando como están revisados, igual que lo hicimos con la casilla de verificación, seleccionando la entrada y luego también seleccionando el tipo como texto. Eso aplicará esa propiedad. Y algunas de las propiedades que no van a estar disponibles para todos los elementos de la página son esas sólo se están configurando como los colores de fondo por defecto para ellos. Pruébalo y mira qué puedes hacer con las pseudo-clases. Pruebe las diferentes pseudo-clases en diversos elementos de página. Puede estar listo para pasar a la siguiente lección. 11. 10 elementos Destacados CSS: Esta lección vamos a estar actualizando la parte de la selección, elemento seleccionado. Entonces actualizando la primera línea, primera letra, agregando contenido después y antes de la selección de elementos. Y todo esto se va a hacer con pseudo elementos, donde estamos usando los dos puntos para indicar el pseudo elemento y aplicar estilos a parte del elemento que se ha seleccionado. Los pseudo elementos nos permiten crear y seleccionar partes específicas de un elemento. Vamos a seguir adelante y vamos a hacer una selección del contenido de la página. Tenemos una serie de elementos de página que ya tenemos. Voy a seleccionar el que tenga una identificación de uno. Y luego vamos a aplicar un pseudo elemento a eso, seleccionando el elemento con el ID de uno. Y actualizaré el tamaño de fuente del elemento, hacer que el tamaño de fuente sea relativamente grande. También podemos actualizar el tamaño de la imagen como imágenes bastante grandes. Entonces vamos a actualizar el ancho de la imagen, 200 PECS. Entonces es mucho más pequeño. Entonces ahora vamos a aplicar un pseudo elemento. Entonces si queríamos aplicarlo a la primera línea, podemos especificar eso dentro de una. Y esto es usando los dos Colin's que nos permite indicar el pseudo, seleccionando la primera línea. Y vamos a actualizar la primera línea y añadir en un color rojo a la primera línea. Eso va a ser a la primera línea del contenido. A medida que la línea se encoge, todavía sólo se está aplicando a la primera línea. Esta es una forma interesante en la que puedes aplicar diferentes efectos a partes del elemento. Vamos a actualizar el color de fondo y vamos a establecer el color de fondo para que sea negro. El color de la fuente establecerá que todo sea blanco. Y lo pondré como playa. Vamos a actualizar. Y hará una selección de la primera letra. Dentro de ese elemento. Seleccionando la primera letra. Y actualizaré el tamaño de fuente de la primera letra, lo haré para EM. Es la forma en que puede actualizar la primera letra, hacerla realmente grande. También puede establecer contenido después de la selección del elemento. Para que puedas seleccionar el elemento y usar After te permite agregar contenido después del elemento que has seleccionado. Podemos especificar el contenido. Sumando en el contenido de HelloWorld. Ahí está el contenido que se agrega. Sé que es un poco difícil de ver. Así que vamos a actualizar el color para que sea azul para el fondo. Entonces está el contenido que se puso después dentro del uno. Y si vas a inspeccionar el contenido de la página del elemento, ahí está el después. Y no vemos que el mundo hola esté escrito como eso se está haciendo con el estilo. Entonces lo que sea que haya en esa policía va a ser lo que el contenido es el que se agregó. También puedes hacer un antes también. Eso colocará el contenido antes. Eso realmente lo sumó a la primera línea y actualizó el contenido. Por lo que aplicar incluso la primera letra a esa primera parte del contenido de la página como pseudo elementos permite seleccionar parte del elemento y hacer actualizaciones al mismo. Se limitan a las diferentes propiedades que se pueden aplicar. Así que adelante y trata de familiarizarse más con lo que se puede hacer como pseudo elementos. 12. 11 Disposición flotante CSS: Vamos a estar configurando un sitio web básico con flotadores. Entonces tenemos la típica navegación de cabecera, el menú, y el pie de página. Y vamos a estar usando las carrozas. Por lo que flota tanto para el diseño de tres columnas como para los enlaces de la Barra de Navegación aplicando las diferentes pseudo-clases y los pseudo elementos con el fin de despejar las carrozas. Y luego aplicando diversas propiedades de estilo con el fin de que parezca un sitio web. Vamos a actualizar esta típica página web LEO para tocar un diseño de tres columnas. Entonces tenemos una navegación de encabezado, el área de contenido principal, y un área de pie de página. Está haciendo una selección de estos. Y luego vamos a estar agregando estos usando un flotador. Así que en primer lugar, vamos adelante y vamos a abrir el estilo y despejar un estilo que teníamos allí previamente y aplicar la caja fronteriza porque vamos a estar usando los flotadores. Entonces eso se va a hacer a todos los elementos de la página. Seleccionar todos los elementos de la página, y establecer el tamaño de la caja para que esos elementos de página sean border-box. Entonces de esa manera cuando configuramos las columnas, que es la siguiente que vamos a estar seleccionando. Podemos establecer un ancho para que los sean 33%. Y de esa manera podemos hacerlos encajar correctamente en la página. Voy a ponerlos en 33%. También añadir en un borde para ellos para que podamos ver claramente todas las diferentes columnas. Para que pueda ser de un píxel, borde negro sólido. Ahí están nuestras columnas. Vamos a establecer una altura por defecto para ellos. Y la altura puede ser de 200 picos. Después usando el flotador, podemos flotarlas a la izquierda. Entonces póngalos como flotador. Y los voy a flotar a la izquierda. Eso establece el básico para las tres columnas. También haré un alineamiento de texto para alinear el centro el texto que tenemos. Establezca eso como centro alineado para el texto. Tenemos las tres columnas ahí. Queremos poner el pie de página. He agregado en clases para el pie de página y para el encabezado. Entonces seleccionando el pie de página y el encabezado. Entonces los pondré a ambos solo por comas separadas ambas selecciones. Estableceré el texto alinear, centrar alinear el texto. Estableceremos los antecedentes de ambos. Ambos podrían estar emparejando. Y así había un fondo negro. El color de la fuente puede ser blanco. Entonces ahí están nuestros pies de página. En realidad se está aplicando a las columnas porque no nos despejamos después. Por lo que queremos aclarar después la selección del contenido principal. Se, le daré a éste una clase de media para que podamos seleccionarla dentro del estilo. Queremos aplicar la solución clara para ese elemento principal, seleccionándolo, y luego usando el pseudo, configurarlo. Después, vamos a establecer algún contenido ahí. Y esto nos permitirá hacer la solución clara en ambos. Y el contenido solo puede ser algún contenido en blanco. Establezca la pantalla como una pantalla de tabla, y luego use un claro para borrar ambos. Así que libro limpiando todas las carrozas y haz un claro de ambos. Eso nos permitirá una vez más tener separados el encabezado y el pie de página. Y debido a que estas columnas, por el flotador, estaban flotando en la parte superior del encabezado y pie de página. Vamos a fijar una altura para esto. Esto puede ser 120, recoge la line-height para ellos para que podamos centrar alinear, alinear verticalmente el texto. Y por supuesto, si estás agregando más texto, entonces necesitarías actualizar cuál es la altura de línea. En este momento no voy a estar agregando ningún texto adicional, así que solo lo estoy configurando como la altura de línea también para la barra de navegación. Así que va a ser el navbar. Voy a darle una clase de nav en caso de que queramos reutilizar las etiquetas, diferentes partes de la página. Voy a seleccionarlo como clase de nav. Para la barra de negación suficiente. Podemos alinear el texto al centro alineado. Hagamos un color de fondo para el contenido y configurarlo como rojo. Vamos también adelante y vamos a sumar en algunos divs ahí. Entonces usaremos estos divs y los vamos a alinear usando también los flotadores. Seleccionando dentro del nav, los divs. También podemos hacer los divs que están inmediatamente dentro del NADPH. Ponga eso para que flote. A la izquierda. Agrega algún relleno para los devs, diez fotos. También queremos hacer la solución clara para después, por comas separadas. Y ahí es también donde tenemos las carrozas. Y esto también debe fijarse a después. Voy a poner este también bien, después. Estamos configurando ese div para que se borre después. Para los devs, establece un ancho de 25 pix. Establece un ancho de 25 pix. También centrar alinear el texto porque sí tenemos los cuatro ítems ahí dentro de la lista. Establecerá un color de fondo para cada uno de ellos. Establezca el color de fondo para que sea rojo, y el color de la fuente puede ser blanco. Para esos, ahí están nuestros enlaces. Siempre que pasamos sobre ellos. Aún no son enlaces, pero tendríamos que añadir enlaces. Vamos a actualizar el color de fondo cada vez que se vuelvan. Y pondré el color de fondo para que sea negro. El color puede ir al rojo. Así es como puedes configurar un sitio web básico con flotadores. 13. 12 Disposición Flex CSS: Vamos a estar creando una plantilla CSS usando Flexbox y configurando diciendo nuestra típica plantilla HTML. Tenemos el encabezado, el nav, el principal y el pie de página, pero página web de tres columnas, Flexbox nos proporciona una forma de crear un layout web. Esto también va a ser receptivo para que a medida que lo redimensionamos y lo hagamos más grande, esas columnas van a seguir creando elementos receptivos dentro de un contenedor que son realmente fáciles de alcanzar usando flex, esta lección que vamos a estar haciendo y usando flex box con el fin de hacer un diseño de página web de tres columnas. Por lo que estaremos seleccionando los elementos de la página y actualizándolos. Así que sigamos adelante y vamos a seleccionar todos los elementos que son columnas. Aquí es donde tenemos el diseño de tres columnas. También voy a aplicar a todos los elementos a través y añadir en el tamaño de la caja. Para que así podamos establecer el dimensionamiento por defecto de cada una de las celdas. Y eso también incluirá el relleno y cualquiera de los bordes. El tamaño de la caja nos permitirá incluir los bordes y el relleno para el ancho de las celdas del elemento. Entonces estamos seleccionando todas las columnas. Voy a sumar en un borde a las columnas. Entonces una escoja sólida, y voy a hacer un borde azul para las columnas. Ahí están nuestras tres columnas que queremos aplicar. También voy a estar agregando en algún relleno a las columnas. Entonces configura el relleno y le haré solo diez pixeles de relleno. Y estableceré una altura predeterminada para que sea de 200 selecciones. Entonces ahí están nuestras tres columnas. Hacer un alinear texto para que podamos alinear el texto para centrar para ellos. Y ahora queremos abastecerlas usando el flex. Vamos a establecer el ancho flex y eso podemos establecer usando la propiedad flex de uno. Así que va a ser el ancho de cada uno de esos contenedores. Necesitamos seleccionar el padre y aplicar la propiedad flex al padre. Entonces eso es que las columnas están contenidas dentro del elemento medio, dentro del elemento principal. Actualice y establezca la propiedad display para que sea flex. Eso permitirá que los hijos del contenedor principal obtengan esa propiedad de exhibición. Y ahí es donde obtenemos el diseño de tres columnas. También podemos actualizar eso y configurar la navegación. Tenemos un elemento con una clase de nav, solo coma separarlos y queremos aplicar la propiedad flex a ambos de inmediato eso va a abastecerlos. Por lo que queremos aplicar diferentes propiedades a los elementos de navegación. Estos son los que son los divs dentro de la clase nav. Entonces seleccionando la clase nav y luego los divs que están contenidos dentro de ellos. Vamos a seguir adelante y establecer una frontera para esos. Les pondré un borde verde. Para que así consigamos algunas fronteras a su alrededor, agregando algún relleno para esos. Y vamos a ordenar unos cinco píxeles de relleno para ellos. Después usando flex, vamos a establecer el valor flex para uno y también hacer un alinear texto para alinear el texto para alinear el texto para alinear el centro el texto nos da los elementos de enlace. Configurando un fondo. Voy a configurar un color de fondo para los elementos de la página, y los configuraré como bloque. Y entonces el color puede ser azul, en realidad van a establecer el color para que sea blanco. Y añadiendo en el efecto de hover a esos elementos cada vez que los elementos están flotando. Para darles el campo que van a ser enlaces. Podemos aplicar el enlace después, ya sea con JavaScript o podemos hacerlo dentro del HTML como etiquetas ancla. Cada vez que pasamos sobre una actualización, el color de fondo. Vamos a poner eso para que sea azul. A medida que pasamos por encima. Nos da un nuevo color de fondo para esos elementos. Ahora vamos a seleccionar el encabezado y el pie de página. Elementos con una clase de encabezado y el elemento con una clase de pie de página, aplican algunas propiedades a eso. Una vez más, color de fondo para esos, color de fondo para esos. Voy a establecer el desbordamiento para que sea auto. Para que eso ocupará todo el espacio disponible. Texto alinear, centrar, alinear el texto. Y vamos a configurar una altura mínima para que sea de 100 PECS. Eso nos da el encabezado y el pie de página y también hacemos la line-height para estos. En realidad para el pie de página, lo seleccionaremos el elemento por separado. Tenemos el div dentro de ese elemento. Seleccionando el div donde tenemos el contenido para el pie de página para este fin de semana, establece un margen, luego también algún relleno a su alrededor. De esta manera podemos sumar líneas adicionales de contenido. Así es como puedes usar flex para configurar una plantilla de sitio web predeterminada con tres columnas. 14. 13 CSS Cuadrícula en CSS: Vamos a estar aplicando la rejilla de visualización. Entonces la cuadrícula CSS, fin de crear una plantilla básica de diseño de tres columnas con una barra de navegación, esto podría ser totalmente receptivo. El uso de la cuadrícula CSS le da la capacidad de crear elementos de página receptivos. Te voy a mostrar cómo puedes crear una plantilla básica de inicio que puedes usar para que tus sitios web las desarrollen más a medida que agregas contenido adicional sobre elementos en ellos. Comenzando con un diseño básico, muy básico, vamos a tener un encabezado, nav área principal, y un pie de página para el contenido. Esta lección vamos a estar configurando diseño del sitio web y el layout usando la cuadrícula. Va a ser un sitio web de tres columnas. Así que en primer lugar, vamos a seleccionar el contenedor principal, y eso va a ser el contenedor significa ya he agregado en el tamaño de la caja. Entonces este va a ser el padre que se va a mostrar a los hijos, los hijos inmediatos con él como formato de cuadrícula, usando la pantalla y configurarla como cuadrícula de visualización. Entonces para la rejilla, los vamos a configurar como un FR, FR y un FR. Que de inmediato establecen esas columnas en ese tipo de estructura. Actualicemos las columnas, seleccionando los elementos con las columnas, configurando el, agarrando el borde. Configurar el ancho de los mismos. Y se van a poner dentro de la rejilla. Por lo que queremos que sea dinámico que en realidad no tengamos que establecer el ancho, pero vamos a establecer la altura para esas celdas. Y también estableceré el text-align para alinear el centro el contenido del texto dentro de ellos. Entonces están esas cuatro columnas. También puedes acortar esto usando la repetición. Entonces si todos van a ser del mismo tamaño que podemos usar la repetición. Y estableciendo una repetición de cuatro con un FR para cada uno de esos. Y en realidad esto debería ser tres porque sí tenemos las tres columnas ahí. También vamos a hacer esto por la navegación. Tenemos unos elementos con una clase de nav. Así que ese va a ser el padre de la parrilla. Y luego los elementos de navegación van a estar contenidos dentro de ahí como elementos de cuadrícula configurando la cuadrícula. Y éste tiene que tener cuatro artículos para niños dentro de ahí. Y seleccionaremos el nav y los divs que están inmediatamente dentro de lo suficiente con una clase. Y luego los diffs. Estos van a ser enlaces. Podemos alinear texto. También configura un color de fondo, y voy a configurar un color de fondo de verde. Para esos. Actualizaré el tamaño de fuente a 1.2 EM. Pondremos un color de blanco para los enlaces. Y agregaremos la opción cada vez que pasemos sobre ellos, eso actualizará el color. Entonces el pseudo. Y podemos establecer esto. Entonces estableciendo esto. ¿ Qué tal si ponemos esto en bloque? Cada vez que se cierran sobre, Ahí están nuestros enlaces y la cuadrícula va a ser receptiva por defecto. Entonces eso nos da la estructura básica que necesitábamos. Ahora podemos aplicar algún estilo adicional al encabezado, así como al pie de página. Y establece un color de fondo para esos. Voy a configurar sólo un fondo negro predeterminado. Y el color de la fuente puede ser blanco. Vamos a seleccionar el tamaño de fuente. Que sea realmente grande. Y luego el texto alinear, alinear el centro el texto para esos. Para que eso nos da nuestra estructura básica de página web donde tenemos el encabezado, el pie de página, y también establecer el desbordamiento para estos. Para que así bajarán todo el camino hasta el espaciado predeterminado de la barra de navegación. Vamos necesarios dentro de la estructura de la página. Entonces a medida que lo redimensionas y lo encojas hacia abajo. Estos también van a ser elementos de página totalmente receptivos. Digamos que puedes usar la cuadrícula para configurar una plantilla de sitio web predeterminada que puedes usar como punto de partida para desarrollar tu página web.