HTML y CSS: creación de sitios web responsivos para principiantes

2. Fundamentos web: - Hola. - Bienvenido al primer conjunto de diapositivas, - Fundamentos HTML y Web. - Siéntate, - relájate y vamos a discutir cómo funciona la Web, - el proceso de desarrollo, - hábitos de flujo de trabajo. - Y luego, - más adelante, - haremos un ejercicio para conocer algunos elementos HTML diferentes. - Primero, - hablemos de cómo funciona la Web, - y ojalá esto te dé una idea de cómo encaja lo que estamos aprendiendo en la imagen más grande de Internet. - Vamos a hablar de solicitudes en respuesta, - renderización en el navegador, - remoto verso local y algunas diferencias entre front end y back y desarrollo. - En primer lugar, - hablemos de solicitud y respuesta. - Entonces imagina que estás sentado en casa y te pones frente a tu computadora y dices - Me gustaría ir a este sitio web para que escribas el nombre de dominio en tu navegador cómo las cosas - funciona dot com y luego golpeas retorno y tu computadora se conecta a el Internet, -y le habla a este tipo de aquí, - que es un servidor DNS, - D n A. - Es sinónimo de servidor de nombres de dominio Dina servicio. - Somos como operadores de Internet. - En realidad no tienen ningún archivo de sitio web, - pero te dirán cómo llegar a la computadora específica dondequiera que esté del mundo- . - Para que así puedas conectarte a él y luego obtener los archivos del sitio web que estás buscando. - Entonces servidores DNS. - Hablan con otros servidores DNS todo el día, - y están haciendo un seguimiento de asociar un nombre de dominio con algo llamado I P. - Dirección. - Um, - y yo p dirección es muy similar a la dirección que tiene en su casa. - Básicamente es una forma de identificar la ubicación de una computadora dondequiera que esté en cualquier lugar - en el mundo. - Eso cualquier computadora que esté conectada a Internet tiene una dirección I. - P. - Incluso la computadora en la que estás ahora mismo tiene su propia dirección I p. - Entonces cuando escribes cómo funciona las cosas dot com, - le preguntas al servidor DNS. - Si conoce la dirección de ese servidor de hosting y este dominio ing en realidad no lo sabe, - dice, - Bueno, - no está en mi base de datos, - así que le preguntaré a otro servidor DNS. - Y éste sí sabe que dice, - En realidad, - sí, - eso está en mi efectivo que se asigna a la dirección I P. - 70.42 punto 251.42 Así que este primer servidor DNF dice gracias todo efectivo esa información también. - En caso de que alguien me vuelva a preguntar en el futuro, - Entonces sabré qué decirles, - y te manda esa información. - Entonces ahora tu computadora conoce la dirección específica del servidor al que intentas conectarte -al, - y esa es su flecha verde. - Aquí está mostrando esa conexión entre su computadora local y este servidor de alojamiento remoto -y servidores de hosting, - que están representados aquí atrás por estas torres azules. - Estas son las computadoras que están sosteniendo los archivos web reales, - el contenido que está siendo entonces, - ya sabes, - descargado a tu computadora y renderizado en tu navegador. - Entonces cada vez que tengas la dirección i P, - estás haciendo un solicitado en ese servidor de hosting específico y envía de vuelta una respuesta. - Y esto inicia una conversación de ida y vuelta entre tu computadora y el servidor remoto. - Entonces preguntas, - haces una solicitud http y pides algo así como la página principal, - y el servidor envía de vuelta una respuesta en forma de contenido. - Y esto es código de texto, - es decir, HTML CSS o JavaScript. - Entonces en esta clase, - eso es lo que vamos a aprender. - Vamos a aprender a escribir el código HTML y CSS o el contenido que se pasa de ida y vuelta entre el servidor remoto, - el servidor Web y el navegador de visores. - Hablemos un poco del verso local remoto ahora, - por lo que el término local se refiere a la computadora que está frente a ti en este momento. - La computadora local es algo que puedes tocar que está justo delante de tus ojos, - y se supone que eso es remoto. - Donde remoto se refiere a un servidor Web que es una ubicación remota en algún otro lugar del mundo. - Entonces, siempre que estemos -ya sabes- produciendo siempre que estemos en nuestra fase de producción- siempre estamos trabajando en nuestra computadora local-, y lo estamos previsualizando en nuestro navegador en nuestro ordenador. - Entonces estamos trabajando a nivel local. - Lo estamos previsualizando localmente en el navegador, - revisando nuestro trabajo. - De esta manera podemos asegurarnos de que todo sea exactamente como lo queremos antes de publicarlo y - ponerlo en un servidor remoto. - Entonces estás construyendo tu sitio web en tu computadora, - tu escritura de código HTML y CSS. - Estás previsualizando ese código en tu navegador y te estás asegurando de que todo se vea de la manera que quieras. - A lo mejor estás corrigiendo tipografías, - cambiando de colores, - cosas así. - Entonces tú decides OK, - Estoy listo para poner esto en el servidor remoto. - Entonces vamos a utilizar un proceso llamado FTP, - que es protocolo de transferencia de archivos para poner esos archivos o subirlos al servidor Web. - Y ahora, - porque este servidor Web tiene un nombre de dominio específico, - una dirección I P asociada a ella, - personas de todo el mundo ahora pueden ver y acceder a esos archivos. - Y entonces, - en cualquier momento, - si quieres cambiar o modificar esos archivos, - siempre puedes bajarlos de ese servidor Web. - Por lo que también tienes la copia más nueva en tu máquina local. - Y lo puedes hacer descargando u obteniendo los archivos, - trayéndolos de vuelta a tu computadora local. - Hablemos un poco de las diferencias entre desarrollo frontal y web versus back end - Desarrollo web. - Entonces en esta clase vamos a estar haciendo sólo desarrollo web front-end. - Vamos a estar aprendiendo a escribir estos 1er 2 que es HTML y CSS. - Ahora. - La principal diferencia es que thes front y los lenguajes de programación de programas son en realidad - invitados. - Deberíamos decir que los lenguajes de marcado HTML y CSS se están renderizando en el lado del cliente, - lo que significa que se están renderizando en tu navegador. - Tu navegador está interpretando ese código y luego renderizándolo, - lo que permite que el sitio web aparezca ahora. - Eso en contraste con el back y el desarrollo Web, -donde todos los lenguajes de programación en el back end están siendo interpretados por el servidor- en el lado del servidor. - Entonces, - por ejemplo, - ruby, - PHP, - python, - Java y nodo, - que es una versión de JavaScript en el servidor. - Todos estos lenguajes de programación están trabajando para actualizar objetos. - Um, - ya sabes, - interactúa con la base de datos y eventualmente renderiza los archivos HTML y CSS que airen entonces - pasó al front-end ese aire más allá de tu navegador. - Entonces esa es la principal diferencia entre el desarrollo frontal y el desarrollo y el back end. - Entonces a medida que empiezas a hacer tus propios proyectos, - un buen comienzo para crear cualquier sitio web es un proceso de lluvia de ideas. - Entonces en el camino, - siéntete libre de agarrar un trozo de papel, - un bolígrafo o un lápices, - y simplemente empieza a esbozar las ideas de lo que quieres construir antes de empezar en realidad - a codificar. - A mucha gente le gusta hacer un diagrama de flujo o diagrama de flujo donde básicamente mapea qué - las páginas existirán y cómo esas páginas enlazarán a otro contenido. - Este es un buen ejemplo de un simulacro dibujado a mano, - por lo que también puedes tomar y sacar las páginas individuales y tipo de tomar decisiones sobre - a dónde irá el contenido. - Y esto te va a ahorrar mucho tiempo. - Porque en lugar de tener que mover código o agregar o quitar código, - puedes decidirte sobre el diseño general y en qué contenido te gustaría existir - un pedazo de papel. - Y es mucho más rápido borrar algo o redibujarlo que hacer muchos cambios en tu - código. - Entonces creo que es una buena idea antes de empezar cualquier proyecto hacer una especie de burla de qué -piensas que las páginas del sitio se mantendrán y especie de dónde te imaginas que estará- posicionando este contenido. - También hay simulacros digitales que podrías hacer en línea. - Un sitio que me gusta se llama Mockingbird, - y estos sitios te permitirán hacer simulacros de aire tal vez más adecuado si necesitas - para presentar esta información a un cliente antes de empezar a revestir, - incluso hay plantillas en mock up sitios específicamente para tabletas y dispositivos móviles también -. - Una de las primeras cosas que quieres asegurarte cuando comiences a cualquier nuevo proyecto es - crear una carpeta que esté dedicada sólo a ese sitio web o a ese proyecto Web, - y siempre vamos a guardar todos nuestros archivos y subcarpetas que están relacionados a ese - sitio en esa carpeta. - Por lo que siempre llamamos a eso una carpeta padre o una carpeta raíz. - A éste de aquí se le nombra sitio. - Normalmente vas a nombrar esto. - Cualquiera que sea el nombre de tu proyecto. - Por ejemplo, - si estuviera construyendo un sitio web para una fábrica de gofres, - podría llamar a esta carpeta algo así como Waffle factory dot com o algo así. - Ahora, - dentro de esta carpeta principal principal o carpeta raíz, - aquí es donde estarán todas sus subcarpetas. - Todas tus imágenes para tu página web estarán muy bien organizadas en una carpeta. - Podrían organizarse todas las fuentes especiales que pudieras estar usando. - Está bien, -todo nuestro CSS, -que va a ser el estilo de nuestro sitio web- va a estar ubicado en una carpeta- y todas nuestras páginas Web son HTML. - Las páginas también estarán dentro de esa carpeta principal principal de ahí. - Y esto mantendrá todo agradable y organizado en, - y vamos a tratar de evitar siempre tener ah, - archivo para nuestra página web existente fuera de esa carpeta principal. - Entonces en el próximo ejercicio, - vamos a saltar y hablar de la sintaxis HTML. - Vamos a ver estructura documental de construir una página básica. - Vamos a aprender a crear elementos de texto, - y vamos a aprender a crear imágenes y luego enlaces entre nuestras páginas. - Así que adelante y pasa al primer ejercicio. - Siéntase libre de navegar por el resto de estas diapositivas utilizando el enlace pdf de abajo, - y tendrá contenido que revisará todas las cosas que repasemos en el ejercicio. - Gracias. 3. Comienzo: - Hola. - Bienvenido al primer ejercicio 1.1. - Con cualquier ejercicio, - siempre vas a querer empezar por descargar el archivo zip que te proveo. - Y esos van a ser los archivos fuente con los que vamos a estar trabajando para cada ejercicio -. - Entonces solo por esta primera vez, - Te mostraré cómo funciona eso. - Entonces he seguido adelante y descargado ese archivo zip, - que se llama 1.1 dash html dash fundamentals dot zip y tuve que un comprimir esto. - Entonces es que el archivo es un solo archivo que está comprimido, - algo así como aplastar un montón de archivos y carpetas en remolque. - Un archivo, - y luego tuvimos que uncomprimirlo aquí. - Acabo de hacer doble clic en él en Mac toe un comprimir esto y escupe una carpeta como esta - Puede que necesite, - dependiendo de su computadora, - su sistema operativo que significa dedo del pie como derecho, - haga clic en él y diga algo así como una compresa o en archivo o extracto podría ser otra -forma que podría escribirse, - pero en cualquier caso, - tienes remolque, - descomprimir o uncomprimir ese archivo, - y eso debería convertirse en una carpeta como esta. - Um, - y esto son todos los expedientes. - Los archivos fuente que deberán iniciar este ejercicio. - Básicamente, - esto sólo contiene algunas imágenes aquí, - que son algunas imágenes de algunos zapatos. - ¿Por qué? - Porque el primer, - um, - proyecto que vamos a construir va a ser un sitio web ella. - De acuerdo, - así que seguí adelante y muevo esto a una carpeta de mi computadora. - Quizás quieras decidir dónde vivirán tus archivos para tu para esta clase. - Incluso puedes ponerlos en el escritorio si no tienes un lugar adecuado. - Lo que hice fue que me gusta poner todos los archivos de mi sitio web en una carpeta aquí. - Tengo mi carpeta de sitios aquí, - y seguí adelante y creé un nombre de carpeta específicamente para esta clase HTML y CSS desde - cero. - Y se puede ver dentro de ahí. - ¿Es que un archivo zip comprimido allí por 1.1 dash html dash Fundamentals folder. - Y dentro de ahí, -sólo tenemos algunas imágenes-, como dije. - De acuerdo, - entonces ese es un buen comienzo es mover estos archivos a un lugar donde te gustaría que vivieran - en tu computadora 4. Estructura de documento: - Y lo siguiente que vamos a hacer es que vamos a traer a nuestro editor de códigos, - Así que voy a ir y voy a lanzar texto sublime. - Y cuando empieza el texto sublime, - simplemente no tenemos archivo sin título aquí. - Y lo que queremos hacer primero es que vamos a querer abrir algo llamado The Sidebar, - que en la S nos permitirá ver nuestros archivos y carpetas del proyecto. - Entonces voy a subir al menú desplegable Ver, - y voy a ir a la barra lateral y volver a mostrar la barra lateral. - Eso está a la vista. - Barra lateral, - mostrar barra lateral. - Voy y hago clic en eso y eso traerá mi barra lateral hasta aquí. - Y lo bonito de esto es que puedo arrastrar esta carpeta que les hice descargar chicos - 1.1 html fundamentals. - Puedes arrastrar eso y soltar eso en tu barra lateral, - y puedes ver ahí que aquí están mis imágenes y esa carpeta en particular. - De acuerdo, - así que para empezar, - sólo queremos crear nuestra página principal. - Entonces voy a subir al menú desplegable de archivos y decir nuevo archivo, - y eso va a crear un archivo sin título así, - y vamos a guardar este archivo de inmediato del bate, - voy a decir archivo seguro y vamos a nombrar este archivo. - Algo muy específico. - Ahora, - todos los demás archivos de tu página web, - realmente puedes nombrarlos como quieras. - Um, - este archivo en particular, - que es la página principal, - tenemos que nombrar este índice, - que es todo minúscula I n d x, - y tenemos que darle una extensión de archivo de ya sea dot HTM o dot html. - Cualquiera de las extensiones está bien. - Entonces la razón por la que tenemos que nombrar este índice es que cada vez que ah persona que está intentando - ver tu sitio web está haciendo una solicitud a ese servidor remoto, - el servidor remoto por defecto va a pasar de nuevo el archivo llamado Index a ellos. - Y por eso lo verán primero. - De ahí que esto se convierta en la página principal o en la página de inicio. - Algunos lo llaman así queremos asegurarnos de que guardamos esto en la ubicación correcta. - Recuerda, - siempre, - siempre, - siempre queremos guardar todo el contenido de nuestro sitio en esa única carpeta raíz. - Entonces en este caso, - he creado una carpeta aquí, - minas bajo sitios, - y luego tengo una para el nombre de la clase HTML y CSS desde cero. - Y ahí está mi carpeta 1.1 y puedo ver mi carpeta Imágenes sentada ahí. - Algunos del nombre este índice y guarde este derecho en esa carpeta de ejercicios como so out. - Podemos ver que las páginas de índice sentadas dentro de esa carpeta Vale, - así que índice punto html, - estamos listos para irnos. - Entonces empecemos a escribir algún código HTML. - Vamos a sumergirnos justo en esta cosa. - Si alguna vez quieres hacer más grande tu texto, - puedes usar, - um, - controlar más y menos en ventanas o en Mac. - Es la tecla de comando, - y la tecla más o menos los hará más grandes. - Entonces si estás escribiendo texto, - puedes cambiar así el tamaño del mismo. - Voy a hacer que este impuesto sea bonito y grande para ustedes chicos, - y esto ayudará con la cepa de hielo. - También, - si estás codificando realmente tarde en la noche o durante largos periodos de tiempo, - um, - y puedes guardar tu postura de espalda en tus ojos haciendo que el código sea mucho más grande. - De acuerdo, - entonces lo primero que vamos a hacer es que vamos a aprender sobre la sintaxis html, - Así que html significa lenguaje de marcado de hipertexto y el lenguaje de marcado es lo que hacen son ellos - proporcionan una serie de elementos que rodean el contenido y luego definir ese contenido para el - navegador. - Entonces tenemos que decirle al navegador, - Hey, - este texto es un encabezamiento. - Oye, - este texto es un párrafo. - Esta es una imagen y este es un enlace. - Entonces para empezar, - vamos a aprender un elemento muy importante llamado el elemento HTML. - Ahora todos los elementos están conformados por etiquetas de inicio y etiquetas de final. - Algunos elementos en realidad sólo tienen una etiqueta de inicio, - pero la mayoría de ellos a menudo tienen una etiqueta de inicio y final. - Hablaremos un poco más de eso más adelante. - Por lo que todas estas etiquetas se componen de corchetes angulares, - que es un menos que símbolo. - Y luego el nombre de la etiqueta y luego un símbolo mayor que ese nombre es la apertura - etiqueta. - Excepto que tienen el lujo de slash frente a ella, - así. - Entonces lo que estamos viendo aquí es algo llamado el elemento HTML y el elemento HTML. - Lo que hace es que le dice al navegador que todo el código vino entre estas etiquetas. - Aquí en el medio está el código HTML, - por lo que puedes ver aquí. - Este es el elemento HTML, - y describe el contenido entre estas etiquetas como código HTML. - A esto se le llama la etiqueta HTML inicial, - y a esto se le llama la etiqueta HTML final. - Entonces otra vez, - la etiqueta inicial es la misma que la etiqueta final. - Simplemente tiene un Ford Slash delante de él así. - Y eso es muy común. - Está bien, - así que ese es un buen comienzo. - Básicamente, - Ahora sabemos que hemos dicho que el navegador empezaba a escribir aquí algo de html, -y estamos terminando aquí nuestro HTML, - por lo que todo lo que entre entre será el resto de nuestro documento. - Ahora, - Voy a añadir una etiqueta más justo en la parte superior de esto. - Um y esta etiqueta también es una etiqueta importante. - Esta es una etiqueta muy única- y se llama DOC Type. - Y para escribir la etiqueta de tipo doc, - hacemos menos que signo de exclamación de símbolo. - Y escribimos así la palabra doc type. - Ahora, - lo que hace el tipo Doc es Thisted AG le va a decir al navegador qué versión de HTML eran - en ejecución. - Entonces la forma en que decimos esto, - el navegador que estamos creando no sólo un documento HTML, - sino en html cinco documento es poner un espacio después de la palabra tipo doc y escribimos HTML como - eso. - Y esto le dice al navegador, - este es un documento HTML cinco. - Ahora, - si miras hacia atrás las versiones anteriores de HTML o X html, - vas a notar que estas etiquetas de tipo doc en realidad pueden ser bastante largas y largas. - En realidad pueden seguir y seguir. - Um, - a veces, - por ejemplo- en html cuatro o tres. - Éstas eran, - um, - casi una frase larga para describir al navegador que el documento en particular era, - ya sabes, - esa marca de versión para HTML 51 de las inclusiones de la misma, - que es un bonitas nuevas características que es muy simple. - Podemos justo a la derecha, -doc tipo html, - y lo ve como un documento HTML cinco. - Está bien, - genial. - Entonces ahora le hemos dicho al navegador, - um, - este es un documento HTML cinco, - y aquí está el inicio de mi código HTML. - Y aquí está el final de mi HTML podría a continuación. - Hablemos de las dos partes principales de cualquier página HTML. - Por lo que cada página html dividida en dos secciones principales y una se llama la cabeza así - cabeza de barra la cerrará y luego se llama otra. - Otra parte se llama el Cuerpo. - Entonces tenemos la cabeza y el cuerpo, - igual que tú y yo tenemos una cabeza en un cuerpo. - Entonces dentro de la sección de cabeza, - lo que específicamente va aquí es contenido que está destinado a navegadores, - motores de búsqueda y dispositivos. - Entonces esto es como código de máquina que va aquí. - Esta es información, - metadatos y enlaces de contenido que están relacionados con, - um, - cómo esta página debe mostrar qué tipo de términos de búsqueda se deben asociar a este sitio -, - que vamos a hablar un poco más sobre más adelante. - Pero principalmente todo en esta sección van a ser cosas que en realidad no veamos - físicamente en la página. - Son sólo cosas que están destinadas a otras máquinas y dispositivos. - Ahora, - eso es en contraste con el cuerpo ahora en la sección del cuerpo. - En realidad tenemos todo el contenido físico visible de la página para seguir adelante y dejar una nota - a sí misma sobre esto para enseñarnos sobre esto. - En realidad aprendamos otro elemento llamado el comentario. - Por lo que esta etiqueta usa thelancet que símbolo signo de exclamación y luego guión guión. - Está bien, - empieza parecida al tipo de muelle, - pero en realidad tiene dos guiones que lo siguen. - Um, - y se puede ver aquí que todo el código ahora debajo de esta etiqueta de comentario de apertura aquí ha - ha sido genial fuera. - Entonces aquí podemos escribir. - Este es un comentario, - um, - en Lee, - Yo Bueno, - sólo diré que puedo verlo, - uh, - en el código, - pero esto no aparecerá en el navegador. - Entonces un comentario es una gran manera de dejarnos mensajes a nosotros mismos. - A veces la gente incluso usa comentarios para desactivar secciones de código en la página y estos aire - ¿En serio? - Ah, - buen hábito para etiquetar cosas y especie de, - um, - dejar mensajes y comentarios Acerca de qué? - Ciertas partes del codificador haciendo. - Entonces ahora que hemos aprendido a crear este comentario, - ¿cuál otra vez? - Esto comienza con menos de exclamación dash es como se inicia el comentario como nosotros - terminar el comentario ya que usamos dash dash mayor de lo que realmente notas si me olvido de incluir - el final etiquetado ahí que en realidad comenta todo el resto de la página. - Entonces tengo que decir que ya terminé. - Di, - oye, - navegador. - Ya terminé de hacer un comentario diciendo guión guión mayor que esta es una etiqueta única que - no tiene la barra en el cierre. - Acaba de terminar así. - Pero este tipo es realmente el único así. - De acuerdo, - entonces ahora que hemos aprendido a crear un comentario- vamos a escribirle un pequeño comentario sobre lo que sucede en la sección de cabeza. - Entonces sigamos adelante y escribamos la cabeza. - La sección de cabecera, - uh, - contiene información para, - me gusta, - los motores de búsqueda y el navegador y no es visto por nuestro espectador, - y vamos a terminar ahí ese comentario. - Ahora. - Estos comentarios pueden ser de una sola línea o de línea múltiple. - Pueden estar en una sola línea como esta, -o puedes golpear retorno, - y en realidad puedes hacer que estos comentarios se extiendan a múltiples líneas como así Ok, - también escribamos un comentario para la sección de cuerpo. - Entonces a diferencia de la sección de cabeza, -que en realidad no vemos ah, - el cuerpo es toda el área visible de la página web. - Um, - ya sabes, - por ejemplo, - en esta sección, - um, - en realidad podemos ver cosas como textos, - uh, - enlaces imágenes y todo tipo de medios. - Entonces en ese comentario allá, - para que estos airen las secciones principales de en páginas HTML la cabeza y el cuerpo. - Vamos a aprender, - um, - empecemos aprendiendo una etiqueta que podemos colocar dentro de la sección de cabeza y de este tipo - llamado título para que podamos darle a nuestra página un título aquí. - Esta página web en particular es para una empresa de calzado. - Entonces por el título, - Voy a poner aquí el nombre de la empresa. - Diré que los zapatos Z H W sólo una especie de nombre genérico. - Yo me inventé, - y pondremos alguna información que será de alguna manera útil para los motores de búsqueda. - Dirá, - esto es Ah, - ganga. - Um, - mayoristas de calzado así. - Y esta página es la página sobre. - Mi página principal va a empezar con información sobre la empresa. - Entonces voy a seguir adelante y decir de nosotros. - Eso creo y vamos a cerrar este título de slash. - De acuerdo, - así que esto va a hacer algunas cosas. - Um, - los motores de búsqueda número uno pueden ver esto, - y van a decir, - Hey, - este es un sitio que tiene contenido sobre zapatos, - um, - y para mayoristas de calzado encendido. - Y esta es también una página de sobre ellos o sobre la empresa. - La otra cosa que hace el título es que también es visible en la pestaña del navegador. - En realidad echemos un vistazo a esto. - Voy a seguir adelante y guardar esta página. - Entonces vamos a decir archivo guardar o probablemente te pongas en el hábito de hacer. - Um, - comando s en Mac. - O podrías hacer Control s en ventanas para guardar. - Está bien. - Y sigamos adelante y planteemos esto en el navegador. - Y sólo podemos arrastrar a este tipo al cromo aquí. - Seguiremos adelante y buscaremos ese expediente. - Se llama Index, - y yo sólo tiraré eso ahí dentro. - Está bien, - Así que en primer lugar, - esta página es blanca. - Está totalmente en blanco. - No he puesto nada en el sexo corporal y aún, - pero una cosa que podemos ver desde la cabeza es aquí arriba en la parte superior de la pestaña del navegador, - podrás ver el nombre del sitio web, - y se queda sin espacio. - Ahí empieza oficina, - enormes zapatos W. - Calzado de ganga, - ¿eh? - Enfriar. - Entonces ese es un buen comienzo. - Entonces eso es una cosa que podemos ver en la sección de cabecera. - ¿Esta ficha está aquí? - Aparte de eso, - no vas a ver físicamente nada más desde dentro de la sección de cabeza. - De hecho, - este pequeño rectángulo blanco aquí que es la ventana de mi navegador que es el cuerpo. - Ahí es donde vamos a ver cosas que se encuentran en el cuerpo. - Entonces volvamos al código entonces y escribamos un poco más y alejarás un - un poquito así. - De acuerdo, - así que esta es una página HTML realmente básica es que tenemos el tipo doc de la parte superior. - Después tenemos la etiqueta HTML y luego anidados dentro de la etiqueta HTML. - Contamos con las dos secciones principales de cualquier página Web. - Tenemos la cabeza en el cuerpo, - así que ya vimos que podemos colocar el título en la cabeza. - Sigamos adelante y escribamos algo en la sección de cuerpo y veamos si eso aparece. - Adelante y escribamos Hola mundo aquí dentro del cuerpo. - Entonces voy a seguir adelante y guardar eso E hice un comando después de que puedas ir archivo guardar y voy - voy a volver al navegador y lo importante es que necesito refrescar siempre necesito - refrescar porque estoy guardando el código y luego en orden para el navegador para verlo, - tenemos que recargarlo. - Entonces voy a ir a esta pequeña flecha de refresco aquí para recargar la página en Mac, - También puedes golpear comando son para recargar la página y más que probable en windows en tu - navegador va a ser control. - Son el control y la Llave R. - Así que el comando de golpe son. - Y ahí podemos ver la palabra Hola. - Mundo apareció ahí en la esquina de la ventana del navegador así que un poco más grande - ahí. - Ahí vamos. - Entonces es agradable y fácil de ver. - Está bien, - Excelente. - Por lo que esto demuestra que el cuerpo es donde podemos ver físicamente el contenido en la página. - Por lo que aprendimos sobre Doc tipo HTML etiqueta la cabeza en el cuerpo encendido. - También aprendimos a escribir comentarios en el código, - que sólo podemos ver. - Te darás cuenta. - Este comentario aquí que dice que el cuerpo es toda el área visible. - La página Web. - Eso no lo vimos cuando fuimos al navegador. - Sólo vimos el texto que escribimos fuera del comentario, -que es hola mundo y sublime Texto está de acuerdo esto para nosotros para que podamos ver claramente- que que ese código aquí es un comentario 5. Formateo de texto: - Hagamos otro experimento. - Vamos al interior de la sección de cuerpos y voy a dar vuelta un par de veces y voy a decir - hola, - Moon Next. - Y luego vamos a seguir adelante y guardar y volveremos al navegador y veremos qué hizo eso. - Está bien, - eso es interesante. - Um, - veamos aquí la palabra. - Hola, - Luna. - Hola, - mundo. - ¿Cómo es que cuando lo escribí en el código aquí golpeo retorno y pongo este encima de esto - uno. - Entonces mundo hola Mundo debería estar arriba hola Luna. - Pero entonces, - extrañamente, - en el navegador ahí apareciendo uno al lado del otro. - Bueno, - la razón por la cual es que el navegador ignora Espacio en blanco. - Está en Lee realmente preocupado por la relación de estas etiquetas, - ¿verdad? - Estos cada Timo elementos conformados por esta etiqueta de inicio y etiqueta de final. - Están rodeando contenido y están describiendo al navegador cuál es ese contenido. - Por lo que esta etiqueta de título nos describe al navegador que este es el título de la página. - Envuelve este contenido y le dice al navegador cómo debe interpretarlo. - Entonces si queremos que este hola mundo y hola luna aparezcan lado a lado, - tendríamos que usar una etiqueta específica, - y en este caso realmente queremos que aparezcan una encima de la otra. - Entonces tendremos que usar una etiqueta específica para eso también. - Entonces si quiero decir que este es un párrafo y luego debajo de él, - hay un párrafo separado. - Tengo que rodear este contenido con el elemento apropiado. - De acuerdo, - así que vamos a usar la etiqueta p así. - Por lo que el elemento de párrafo se compone de esta etiqueta p de apertura y terminando etiqueta p así, - y rodea este contenido Hola mundo y le dice que sea un párrafo. - Entonces vamos a seguir adelante y añadir una etiqueta p de apertura y cierre a Hay bien, - y luego vamos a guardar eso y vamos a volver al navegador y refrescar. - Impresionante. - Así que ahora hola, - El mundo está encima de Hola, - Luna. - Ve esto como un párrafo en. - Se trata de un párrafo separado. - Entonces html implica, - um bueno, - una cantidad decente de memorización. - Vamos a tener que aprender al menos estas etiquetas comunes. - Te enseñaré que obtendrás bastante uso de etiquetas HTML de alta frecuencia a - contenido envolvente. - Está bien, - así que ese es un buen comienzo. - Hemos aprendido a crear párrafos. - Um, - tal vez nos gustaría crear encabezados en textos de diferentes tamaños alrededor de la página. - Entonces sigamos adelante y empecemos creando encabezamiento aquí en la parte superior de nuestra página en. - Y este va a ser el encabezamiento de mayor tamaño, - que es uno H. - Y vamos a seguir adelante y darle a esto el título de nuestra empresa, - lo cual es fácil. - H W es el nombre de nuestra empresa de zapatos, - y también crearemos una especie de subpartida, - um por debajo de ese texto un poco más pequeño y diremos zapatos. - Entonces la empresa es zapatos CHW así. - Entonces sigamos adelante y ahorremos, - y regresaremos a refrescarnos y comprobaremos. - Echa un vistazo a eso. - Por lo que ahí se puede ver el encabezado de la página, - el H w ah, - los zapatos de subpartida. - Y entonces tenemos aquí dos párrafos. - Por lo que los encabezamientos aire realmente importante. - No sólo cambian físicamente el tamaño del texto, - sino que también los motores de búsqueda ven semánticamente estos como teniendo importancia mawr porque esto- es un encabezamiento para el contenido de abajo, - entonces el motor de búsqueda da extra importancia para el rubro de nivel uno. - Y luego h dos, -que es un rumbo Nivel dos, -que es un poco más pequeño- tiene un poco menos importancia para un motor de búsqueda. - Ahora en realidad hay seis niveles de encabezamientos. - Ahí está H uno a H seis. - Um, - muchas veces realmente Onley termino usando, - ya sabes, - edad 12 tal vez h tres o H cuarto más. - Pero existen seis tamaños y niveles posibles de importancia para los encabezamientos que comienzan en cada uno -, - que es el más grande y el más importante-, bajando a los seis años, - que es el más pequeño y menos importante de los epígrafes. - Para que podamos crear encabezamientos. - Podemos crear párrafos. - Echemos también un vistazo a, - um, - colocar texto de relleno. - Entonces digamos que estoy construyendo este sitio web para mi empresa de zapatos y no tengo ningún, - um, - ningún impuesto real que poner ahí. - A lo mejor estoy esperando que mi redactor me lo traiga. - O tal vez yo personalmente no lo he escrito todavía. - Entonces lo que podemos hacer es que realmente podemos tocar algunos mensajes de relleno. - Están usando algún texto ipsum cálido y texto sublime tiene algunas herramientas integradas para hacer - eso. - Entonces seguí adelante y acabo de borrar el impuesto y colocar mi cursor entre la apertura y -cerrando etiqueta P ahi, - y vamos a subir a herramientas y dos fragmentos, - y vamos a seguir adelante e ir a este que dice warm ipsum y haga clic, - y se puede ver lo que hizo. - ¿Está colocando este tipo de tonterías ahí dentro? - Es una especie de solo colocar algún texto de relleno ahí para mí, - lo cual es una buena manera de empezar. - Y si quisiera tener dos párrafos, - podría seguir adelante y pegar los de ahí así. - Está bien, - excelente. - Entonces salgamos y guardemos esto y volvamos al navegador y asegurémonos de que eso funcionó. - Y ahí se puede ver mi rumbo. - Haremos de nuevo este tamaño normal. - Ahí se puede ver mi rubro y se puede ver Ah, - subtítulo de tesis y los dos párrafos aquí, - que tienen un espacio entre ellos y luego ahora están conteniendo ese texto de relleno de lugar. - Por lo que obtendrás mucho uso de estos párrafos y rubros. - Um, - entonces sabemos que los párrafos ponen un espacio de línea completo entre líneas de texto, - Pero y si sólo quisiera bajar una sola línea por ejemplo, - ¿qué pasaría si, - después de esta palabra aquí, - Laura MIPs Um, - ¿y si quisiera empujar todo lo demás hacia abajo? - ¿Sólo una línea? - Bueno, - Yo puedo hacer eso usando otra etiqueta llamada la Etiqueta BR, - que crea un salto de línea, - que parece que ahora esta etiqueta no tiene una etiqueta de apertura y cierre de la manera que - P lo hace para el párrafo B, - R o salto de línea simplemente moverá todo después de esta etiqueta PR hacia abajo un retorno de una sola línea. - Echemos un vistazo a esto y asegurémonos de que funcionó ahí. - Sigamos adelante y guardemos esto y volveremos al navegador y actualicemos. - Y ahí se puede ver que todo el impuesto saltó a la baja después de la palabra Laura MIPs. - Um, - acaba de moverse hacia abajo una sola línea, - mientras que entre estos párrafos aquí, - tenemos una línea completa en medio. - ¿Todo bien? - No terriblemente. - Yo no soy terriblemente excitante, -me di cuenta, - pero el aire, - todos los bloques básicos fundamentales. - Entonces esto será realmente importante a medida que avancemos. - Está bien, - así que eso es bueno para esta página. - Vamos a llamarlo un día en esta página de índice. - Tenemos el nombre de nuestra empresa y algunos párrafos. - Esta será alguna información sobre nuestra empresa, - pero sigamos adelante y pasemos a algunos otros elementos de formato de texto. - Entonces vamos a crear otra página aquí. - Digamos, -por ejemplo- que aparte de mi página principal, - voy a tener otra página que va a ser un catálogo de todos los zapatos. - Entonces sigamos adelante y digamos, - archivo nuevo. - Es un archivo nuevo aquí y vamos a guardar esto justo del bate dirá archivo guardar. - Y lo vamos a poner dentro de esa carpeta raíz principal de ahí para nuestros proyectos de página web. - Y sólo voy a nombrar a este catálogo como así lo llamaremos a este catálogo punto html. - No olvides la extensión de archivo adecuada. - Entonces ahora que tengo la página del índice, - todas estas otras páginas, - realmente puedo nombrarlas como me guste. - Algunas cosas a tener en cuenta aquí es que no vas a querer poner ningún personaje especial. - No pongas ningún signo de exclamación a los símbolos, - signos de interrogación y cosas así porque en realidad tiene significado reservado en una URL de un sitio web Así que no vamos a querer usar ningún símbolo extraño. - Um, - en general, - sólo vas a querer usar, - um letras y números minúsculas o mayúsculas letras y números. - También, - realmente no queremos poner espacios entre, - um, - nuestros nombres de archivo, - por ejemplo- si quisiera llamar a este catálogo de zapatos- no lo llamaría Espacio Zapato catálogo porque eso podría causar posibles errores más adelante -, - Cuando estamos vinculando dos cosas, - lo mejor que hacer sería poner guión, - zapato, - catálogo de guiones o subrayado catálogo de subrayado de zapato así están perfectamente bien. - En este caso. - Sólo voy a llamar a este catálogo de archivos. - Eso será suficiente para que lo guardemos. - Y ahora tengo dos archivos aquí, - y cada uno tiene una ficha. - A éste se le llama Index, - y a este tipo de aquí se le llama Catálogo. - Está bien, - así que vamos a ver si ustedes pueden recordar el archivo. - Entonces siéntete libre de gritar este primer archivo que siempre ponemos en la parte superior de cada HTML - documento. - Lo que hace es que le diga al navegador qué versión de HTML estaba usando, - así que siéntete libre de gritar la respuesta. - Eso es correcto. - Esta primera etiqueta se llama tipo DOC. - ¿Y cómo le decimos que se trata de un documento HTML cinco? - Sólo decimos doc type html así como eso. - De acuerdo, - entonces necesitamos un conjunto de etiquetas de apertura y cierre para decirle al navegador que se trata de un código HTML - entre estas etiquetas de apertura y cierre así. - Entonces usamos la etiqueta HTML y luego dentro de eso, - ¿cuáles son las dos secciones principales de cualquier página HTML? - Eso es correcto. - El 1er 1 es la cabeza. - Esta es la primera parte de la página HTML, - y la siguiente es el cuerpo así. - Y ustedes probablemente se hayan dado cuenta de que estoy en Denning. - Siempre que pongo algunos otros elementos dentro de un elemento como este, - Siempre golpeo a Tab en Dent así. - Um, - ahora eso no es necesario para el navegador. - Al navegador realmente no le importa si haces que el código sea bonito así. - De hecho, - se podría incluso poner todo el código en una línea en el navegador seguiría renderizando todo - porque el navegador sólo se preocupaba por esta relación de lo que hay dentro de qué y - qué etiquetas están rodeando qué contenido. - Pero lo que hago es como mejor práctica. - Me gusta en deuda cada vez que nido o entro de otro elemento como este, - y esto hace que un código sea mucho más legible y fácil de ver esta relación de lo que hay dentro - ¿de qué? - Está bien, - genial. - Por lo que también aprendimos un elemento por poner tan bien el título de la página que habrá dijo- Título Um y éste tendrá un título similar al último. - Adelante y llamemos a este uno zapatos Z H W. - ¿Y qué hicimos justo antes de escribirnos? - Um, - calzado de ganga? - Mayoristas en esta página es la página del catálogo, - así que voy a seguir adelante y escribir así el catálogo de palabras. - Y entonces no se olvide de cerrar así el elemento de título. - Veremos menos que símbolo barra de título para cerrar eso y luego dentro del cuerpo, - este es el área visible de la página Web. - Pondremos una H uno aquí que dice E h W. - Y pondremos ah subtítulo dice zapatos. - Uy. - Empezando a escribir un poco bobo ahí. - Está bien. - Y luego dentro de aquí, - tal vez tengamos otro párrafo con, - como, - colocar información de relleno. - Ustedes recuerdan cómo dedo del pie añaden el texto de relleno del lugar. - Por supuesto, - podrías escribir tu propio párrafo si quieres hablarte de un párrafo sobre el - catálogo de zapatos seguirá adelante y solo tienes que ir a fragmentos de herramientas, - y vamos a tirar un calentamiento. - Algún fragmento así, - y no solo hago que algún impuesto de relleno de lugar se enfríe. - Um, - bueno para ir. - Aprendamos algún otro texto que podamos poner dentro de aquí. - Um, - vamos a seguir adelante y crear una lista. - Entonces hago un pequeño comentario aquí- y sólo diremos que esta es una lista y el tipo de lista que esta es en realidad se llama - en una lista nórdica. - Por lo que ocasionalmente tendrás la necesidad de crear Ah, - una lista de artículos y tal vez artículos que no estén en un orden particular. - Tal vez sí, -por ejemplo- dirá, - Imaginemos que estamos creando como un archivo para nuestros zapatos para que puedas buscar todos - los zapatos. - Entonces tal vez voy a crear un encabezamiento primero para eso, - y vamos a seguir adelante y decir archivo de zapatos, - y luego queremos crear um, - sólo ah lista de artículos que van a representar todos los zapatos para un año en particular -. - Haré otro hará un subtítulo aquí para el año. - En realidad, - vamos a seguir adelante y decir, - um 2013 como esa barra h tres. - De acuerdo, - así que para crear una lista no ordenada, - lo que hago es usar una etiqueta específica llamada UL Tag UL que representa una lista de errores de Nord, - y se cierra así. - Cortar UL. - Está bien, - y entonces vamos a seguir adelante e ir dentro de la etiqueta UAL aquí. - Y cada elemento de lista aquí, -como éste, - requiere que pongamos otro elemento hijo dentro de él. - Anidamos. - Otro elemento dentro de ella llamado El. - Yo casualidad por artículo de lista. - Por lo que aquí podemos poner algunos elementos de lista diferentes. - En este caso, - vamos a poner todo lo diferente. - Um, - todos los diferentes meses para este año van a ser una lista. - Entonces diremos que esto será para diciembre y hará otra lista aquí. - Bueno, - sólo haz unos meses. - No necesitamos hacer. - Todos ellos dirán que éste es para noviembre, - por lo que esto será algo así como nuestro archivo blawg de todos los diferentes zapatos. - Vamos a crear otro elemento de lista aquí dirá otro elemento de lista. - Aquí está el mes del mes de octubre. - Está bien, - genial. - Entonces salgamos y guardemos esto y luego volvamos al navegador y tenemos la - página de índice abierta aquí y aún no hemos enlazado a nuestras páginas. - Entonces lo que tengo que hacer es, -si quiero ver esa página de catálogo, - tendrás que arrastrarla al navegador. - Entonces volveré a ese archivo llamado Catálogo, - y sólo podemos arrastrar y soltar eso aquí. - Enfriar para que podamos ver ahí está la página del catálogo y las páginas del índice separan pestañas ahí. - Está bien, - así que para esta página, - la, - um, - la página del catálogo aquí tenemos el archivo del zapato, - que tiene un año y luego cada año tendrá artículos de lista para que puedan ver aquí cuando usamos - la UL, - etiquetarlo en denso y crea una bala para cada L I, - que es elemento de lista. - Tenemos Diciembre, - Octubre, - Noviembre. - De acuerdo, - entonces volvamos al código y veamos algunas otras cosas que podemos hacer con las listas de aquí. - Imaginemos que queremos subanidar otra lista dentro de aquí. - Entonces digamos, - por ejemplo, - si hacen clic en octubre algo así, - queremos mostrar otra lista dentro de ella Así que a veces tenemos la necesidad de crear Ah sub - lista de ítems relacionados con esa lista artículo. - Entonces lo que vamos a hacer es abrir el ítem de lista como este e ir dentro de él y podemos - en realidad crear otro en lista ordenada si nos gusta así. - Entonces voy a seguir adelante y decir, - slash ul y estoy anidando. - Sólo un ser claro y mostrar que esto está todo dentro de este ítem de la lista para octubre y dentro - de octubre. - Vamos a hacer un subartículo de lista para diferentes días. - No voy a hacer todos los días del mes sólo voy a hacer unos pocos sólo para darte la idea Así que diremos -. - Ah, - cuando hacemos click en octubre, - queremos también poder hacer click y referirnos a los zapatos para esta fecha en particular en octubre. - Entonces diremos que hay un elemento de lista para el 17 de octubre y otro aquí para el - 18 de octubre así. - De acuerdo, - así que esto crea eso en lista ordenada. - Veamos qué pasó ahí en el navegador. - Si vuelvo y refresco, - podemos ver qué pasa. - Ahí vamos más allá en Denning, -y ahora- en lugar de llenar puntos de bala sólidos. - Esta sub lista para el 17 de octubre 18 de octubre tienen estos labios abiertos aquí. - De acuerdo, - así que el 2013 tiene meses debajo, - y entonces ese mes incluso puede tener días específicos como ese. - Entonces este es un buen ejemplo de algún contenido que podrías usar, - um, - apropiadamente, - con una lista no ordenada en orden. - Esto también podría ser cosas como una lista de abarrotes. - Podrías poner diferentes tipos de frutas o carnes que quieres que la gente use en una receta. - Algo así. - Si es algo que no sucede en un orden particular, - donde no necesitas numeración como 1234 y tu contenido solo para tener un punto de viñeta, - puedes usar ese elemento ul. - Está bien, - genial. - Entonces hay en lista ordenada. - Entremos y echemos un vistazo a otro tipo de lista, - que está en una situación en la que sí quieres que se ordene para que podamos hacer una lista ordenada - aquí, - bien, - abajo, - así que haremos una lista de pedidos diferente. - Um, - digamos que queríamos hacer una lista para top of brands, - así que sólo haré otro encabezado aquí- y diré marcas top sólo para hacer algún texto por encima de la lista, - y cerraremos ese Nivel tres dirigiéndose hacia allá. - De acuerdo, - así que para hacer una lista ordenada, - en realidad es lo mismo que la lista A Norden. - Excepto que en lugar de usar UL para hacer una lista inalterada, - usamos ol para hacer una lista ordenada como esa. - Y las listas ordenadas también se llenan de elementos de lista dentro de ella que dividen cada una - pieza individual de la lista. - Entonces sólo inventaremos algunas, - um, - inventamos algunas empresas falsas o algunas marcas falsas dirán, - um, - Bradley, - Bradley y Brown serán el nombre de una marca. - Si quieres usar el símbolo y para arena en lugar de un nd puedes usar turno en el número - siete como ese ahora que se va a iluminar rosa y el código sublime Texas haciéndonos saber - que en este caso para el símbolo, - sería ser más apropiado usar algo llamado el carácter HTML preguntando que - representa esto Así que podemos hacer eso diciendo y símbolo, - y luego poner en algún Limbert algunas letras o números que representan que te pregunten - carácter así que diremos, - y un semi colon MP así. - Este es un término de pregunta especial aquí que se refiere al símbolo y en código HTML. - Entonces podría tener curiosidad qué es lo que son estos otros símbolos preguntativos que están disponibles, - y ¿cómo sé qué escribir para ellos? - Si vas a tu navegador y podemos abrir otra ventana aquí y solo escribiremos - HTML, - pregunta E. - Eso es un S C I I se le ocurre estos diferentes códigos y referencias. - Ahora esta es una mesa. - Y, - um, - se puede ver aquí que, - por ejemplo- para crear esta marca de comillas dobles así, - podemos decir y qu ot punto y coma y va a crear este personaje, - también puedes decir y libra El símbolo 34 es un código numérico que funcionará para ello. - Entonces hay diferentes formas en que puedes conseguir que estos tipos traigan la mayor parte de estos aires. - Bastante común. - Podrías simplemente copiarlos y pegarlos del texto, - como simplemente copiar literalmente tu ritmo y simple así, - o encontrar, - ya sabes, - usando tu teclado para escribirlos. - No obstante, - hay algunas ciertas claves especializadas por las que vas a necesitar los personajes preguntantes- desplazémonos hacia abajo y encontremos un par que quizá sean un poco diferentes. - Um, - por ejemplo- esto es, - ya sabes, - podría tener que hacer, - como el símbolo de libras o euros, - um, - o alguna otra demarcación. - Este es como un pequeño signo de interrogación dentro de un diamante. - Algunos de estos son símbolos en matemáticas, - e incluso puedes ver personajes de acento basados en un lenguaje en particular. - Entonces aquí se pueden ver diferentes personajes que lotes y NBA, - um en diferentes tipos de acentos que se utilizarán para diferentes idiomas. - Aquí tienes otras cosas, - como el símbolo registrado. - Entonces si quieres crear el simple registrado puedes hacer y RG semi colon. - También hay cosas como los derechos de autor, -que es y copiar- que echarán un vistazo un poco más tarde. - Por lo que preguntar a los personajes son agradables si tienes la necesidad de crear símbolos especializados, - por lo que esto crea algo así como un poco estilizado y símbolo ahí que es atractivo. - Entonces esa es una de nuestras marcas. - Notarás que una diferencia entre la Lista A Norden y la lista ordenada es cuando yo - usé las etiquetas ol para lista ordenada. - Conseguimos un número aquí en lugar de un punto de bala. - De acuerdo, - así que sigamos adelante y sigamos adelante. - Um, - vamos a escribir aquí algunos otros elementos de la lista. - Yo solo haré unos cuantos más para que veas cómo ordenan estos Así nos conformaremos alguna otra marca - nombres. - Verá a Sampson Travelers. - Probablemente sea buena idea que me pegue a mi trabajo y no trate de maquillarme marcas así que - vamos a hacer otra aquí arriba. - Sólo diremos kitsch. - Groove es otra marca top que estamos vendiendo así. - Está bien, - impresionante. - Bien para ir. - Entonces aquí están las mejores marcas 12 y tres. - Entonces lo bueno de usar listas ordenadas es que si cambiamos de opinión y queremos -meter aquí otro Brandon, - entre Samson y Travelers, - sólo va a volver número para nosotros automáticamente. - Está bien, - genial. - Por lo que estos airean algunos elementos de texto que te serán útiles. - No te voy a enseñar cada elemento HTML, - pero sólo quiero que conozcas estos de alta frecuencia para empezar. - Estos aireados de los que sacarás mucho uso, - y sí te animo a que pases y revisen los limosnos proporcionados en los enlaces que - todo lugar, - um, - todos post para aprender mawr elementos HTML. - Entonces hay decenas y decenas de elementos HTML, - y será bueno que te familiarices con las diferentes posibilidades de cómo - puedes describir el contenido al navegador. 6. Imágenes: - Ahora, - algunos elementos más que creo que serán realmente buenos para que aprendamos de inmediato el - bat son además de texto de estilo izing. - También queremos aprender a crear enlaces en imágenes. - Entonces sigamos adelante y volvamos a la página del índice aquí. - Y digamos que queremos un lugar, - um, - una imagen aquí para representar especie de la vibra de nuestro sitio web para mostrar nuestro logo cualquier imagen. - Así que ya he creado una foto para nosotros, - um, - llamada intro pic, - y vamos a colocar esto en la página del sitio y vamos a colocarlo debajo esto- encabezamiento aquí que tiene el nombre de nuestra empresa dirá que queremos que esta imagen vaya -por debajo se encamina, - pero antes del párrafo. - Entonces solo voy a abrir algo de espacio en el código para hacerlo Ahora, - al igual que los otros elementos aquí tienen nombres de etiqueta específicos. - Las imágenes H uno y H dos y P también tienen su propia etiqueta específica que tienes que usar ahora una imagen- se ve así. - I m g. - Ahora la etiqueta de imagen no tiene nombre de etiqueta de cierre. - Simplemente empieza así. - Yo m G así y este elemento de imagen en sí cuando lo pones en la pantalla. - El navegador ahora sabe que queremos poner una imagen ahí, - pero no tiene idea de qué imagen estamos tratando de cargar ahí. - Entonces en realidad tenemos que decirle qué imagen queremos cargar ahora. - En HTML, - puedes pasar opciones para modificar y cambiar elementos colocando en algo llamado un atributo - en la etiqueta de apertura. - Ahora, - los atributos nunca se ven en las etiquetas de cierre. - La etiqueta de cierre siempre es solo una slash y una repetición de lo que fuera el nombre de la etiqueta de apertura - así. - Pero dentro de estas etiquetas de apertura eran libres de poner opciones y o atributos. - Entonces para decirle al navegador dónde se encuentra esta imagen, - vamos a seguir adelante y tenemos que poner un espacio después de la imagen del nombre. - Y vamos a utilizar el atributo llamado S R. - C. - SRC significa fuente le estaban diciendo la ubicación de origen de la imagen y la forma en que nosotros - le proporcionamos un valor ya que usamos el símbolo igual y las comillas para rodear el valor. - Entonces esta cosa de aquí que está en esta apertura soy G etiqueta se llama opción, - y esta parte de ella aquí se llama el nombre de Atributo. - Y aquí vamos a colocar el valor, - que es la ubicación de la imagen que nos gustaría cargar. - Ahora, - siempre que quiera cargar una imagen- tengo que hacer algún trabajo de detective. - Básicamente tengo que estar al tanto del archivo en el que estoy actualmente, - que en este momento estoy dentro de la página html de punto índice y me gustaría cargar una imagen. - Pero tengo que ser muy específico con el navegador. - El navegador no es muy inteligente, -y tenemos que decirle exactamente dónde esas imágenes- y tenemos que darle ubicaciones desde el archivo específico en el que nos encontramos actualmente. - Entonces ahora mismo estamos en la página del índice. - Imaginemos por un momento que estamos parados en esta página de índice. - Imagina que estás a dos pies se plantan aquí en la página de estudios de índice TML, - y si miras a tu alrededor, - ¿qué ves? - Ves que hay otra página llamada Catálogo y ves que hay una carpeta llamada - Imágenes, - pero no podemos ver dentro de esa carpeta a menos que entremos en ella. - Imagínese que las imágenes es algo así como un edificio en este sentido. - Entonces tenemos que caminar por la puerta de este edificio llamado imagenes, - y eso es como abrir la carpeta. - Ahora que estamos dentro de la carpeta Imágenes, - ya podemos ver todas estas imágenes a las que queremos un enlace. - Entonces lo primero que tengo que hacer es decirle al navegador que entre en la carpeta de imágenes - para que pueda ver dentro de ella. - Entonces para hacer eso, - Escribo el nombre de la carpeta. - Digo imagenes, - y luego hago un Ford Slash y ahora estamos dentro de esa carpeta. - Vamos a escribir un comentario para recordarse a sí misma que así en cualquier momento decimos un nombre de carpeta slash, - esto es el equivalente de ir dentro de la carpeta. - Bueno, - ¿y si quiero salir de una carpeta? - Lo contrario de esta situación es si quiero dejar una carpeta, - puedo ver punto, - punto, - slash tan dot dot slash es el equivalente de ir fuera de la carpeta, - la carpeta actual en la que estás, - ¿verdad? - De acuerdo, - así que estos aire realmente las dos únicas cosas que necesitas saber para navegar o para decirle al navegador- cómo navegar desde el archivo actual. - Estás en otro archivo o carpeta. - Entonces queremos decir, - Hey, - navegador. - Quiero crear una imagen. - Entonces usamos I m g. - Y luego ponemos un espacio y decimos, - Y por cierto, - esta imagen se encuentra dentro de la carpeta de imágenes, - imágenes slash y el archivo que queremos una carga se llama Vamos a buscarlo solo para asegurarnos de que - tener el nombre correcto se llama Intro pic, - no J. - Peg. - Entonces esto es sensible a mayúsculas y minúsculas. - Tengo que deletrearlo exactamente igual en mente tiene un subrayarlo. - Entonces tengo que decir intro subrayado pick dot j peg así y eso va a cargar esa imagen - ahí. - Está bien, - Ahora, - hay otra opción que siempre queremos incluir dentro de un elemento de imagen. - Y esto es algo llamado texto alternativo. - Y usamos el atributo Ault lt para darle algún texto alternativo Ahora para la alternativa - texto. - Nos vamos Teoh, - ¿verdad? - Algo voy a decir, - uh, - imagen del logotipo. - Muestra a un hombre con las piernas cruzadas, - así que estoy dando una descripción de la imagen aquí. - De acuerdo, - entonces ¿Qué es esto, - uh, - texto viejo todo por aquí? - Por lo que todo el texto sirve algunas funciones muy importantes. - Número uno, - si eres enlace de imagen está roto. - Si por alguna razón se trata de un mal escrito y las imágenes no aparecen en el navegador, - entonces este todo impuesto aparecerá en su lugar en la mayoría de los navegadores. - Entonces si se rompe el enlace de imagen, - la gente puede al menos leer lo que se suponía que habían estado viendo ahí. - ¿Cuál es? - Es un logo que muestra a un hombre con las piernas cruzadas. - En realidad, - eso no es demasiado grande de una descripción. - A lo mejor podrías subir. - Podríamos llegar a algo mejor más adelante. - Pero en todo caso, - estamos dando, - como, - una simple descripción de esa imagen. - Está bien, - entonces esta imagen de intro muestra este contenido el otro. - La otra cosa para la que es muy importante el texto todo es para los motores de búsqueda. - Entonces los motores de búsqueda, - no tienen ojos, - en realidad no pueden ver la imagen de la imagen. - Pero sin embargo pueden leer todo el texto, - y eso será útil para el buscador. - Ahora, - lo último y probablemente lo más importante de todas estas cosas es que si soy una - persona con discapacidad visual o estoy ciega o tengo algún problema para ver en Internet. - Lo que puedo hacer es instalar algo llamado lector. - Y el lector de pantalla, -que está integrado en la mayoría de los navegadores en la actualidad, - leerá en realidad el texto de la página Web permitido a la persona que está navegando por el - sitio web. - Entonces si tuve algunos problemas para ver la imagen, - entonces el lector del navegador en realidad va a leer este texto. - Para mí, - diría en voz alta imagen logo muestra a un hombre con las piernas cruzadas. - Está bien, - así que sigamos adelante y guardemos esta imagen y volvamos a ver a este tipo en el navegador- . - Entonces éste está en la página del índice, - que es índice punto html. - Si no tienes eso arriba en tu navegador, - es posible que tengas que ir y arrastrar ese archivo de tu carpeta ahí dentro. - Está bien, - ahí vamos para que podamos ver nuestras imágenes apareciendo ahí. - Entonces creamos un encabezado. - Ahí está mi H uno. - Aquí está mi edad a Aquí está mi texto de párrafo, - y aquí está mi imagen, - usando mi la etiqueta I M G. - Está bien, - así que ese es un buen comienzo. - Echemos un vistazo a algunas otras cosas que podemos agregar a la imagen aquí. - Um, - estas fueron algunas otras cosas opcionales que puedes agregar dentro de esta etiqueta de imagen. - También podemos agregar algo llamado Título y Título aparecerá cuando pasemos el cursor sobre la imagen. - Entonces dejemos un mensaje. - Si alguien se cierne y esto es opcional, - no tienes que tener este año. - Voy a decir, - Bienvenidos a los zapatos H W, - Algo así. - Hoy en día muchos errores tipográficos y luego vamos a seguir adelante y guardar eso, - y volveremos al navegador y refrescaremos tan de inmediato. - No veo esto el título, - pero miren, - ¿qué pasa si paso el ratón y lo dejo ahí? - Saca un pequeño pie de foto. - Dice Bienvenido a los zapatos H W, - por lo que puede o no querer eso ahí, - pero sí tiene la capacidad de agregar eso usando título, - la gente suele agregar estos títulos, - los links del dedo del pie o imágenes para dar información mawr sobre dónde podría vincularse esa imagen. - Entonces, - por ejemplo, - podrías tener iconos o tal vez, - por ejemplo, - iconos de redes sociales, - y puedes agregarles un título para que cuando pases por encima de la pequeña F para Facebook, - dirá, - Sigue nuestra visita página de Facebook. - Se puede tener la pequeña T, - así que cuando se pasa por encima dice Seguir en Twitter. - Algo así. - Está bien, - Otro atributo común que la gente agrega. - Esa es una buena idea para las imágenes es que puedes agregar el ancho y alto de la imagen ahora por - predeterminado. - Se fiesta hizo que esto tenga el, - uh, - ya configuró esto para tener el ancho y alto correctos, - pero en realidad puedo poner en el número de píxeles de la imagen aquí. - Y eso va a ser bueno si cambia el diseño. - Porque, - por ejemplo, - digamos que este enlace de imagen está roto o faltan las imágenes, - entonces bueno, - en realidad, - vamos a seguir adelante y mostrar que si colapso esto si cambio el mar a un X, -y escribí mal la imagen a propósito allí- esto en realidad romperá la imagen- y cambiará el contenido a su alrededor. - Entonces si refresco esto, - entonces se derrumba y este contenido se mueve hacia arriba. - Ahora, - si tuviera que poner en alto y ancho aquí en la imagen que luego hará que la imagen tome - arriba del tamaño que se supone que debe. - Entonces si quieres revisar eso. - Se puede ir a la imagen misma. - En Windows, - puedes hacer clic derecho y guardar propiedades en Mac. - Se puede ir a obtener info, - y se le debe decir información sobre la imagen. - Entonces en este caso, - me está diciendo que las dimensiones de la imagen son 9 20 por 500. - Una imagen bastante grande, - en realidad. - Para la página de intro s Oh, - esto es con 9 20 así y altura de 500. - Por lo que este nombre de enlace sigue roto. - Lo escribí mal a propósito. - Ahí volverá y refrescará, -y podremos ver a todo el Texas apareciendo Su imagen del logo muestra a un hombre con piernas cruzadas- y vemos este pequeño ícono de imagen rota que a nadie le gusta realmente ver. - Entonces sigamos adelante y arreglemos eso. - Pero se puede ver el acentuado con impidió que el diseño cambiara así. - Um, - así que vamos a cambiar esto de nuevo a foto de intro así, - que es la forma correcta de deletrearlo. - Se puede ver nuestra imagen aparece de nuevo ahí dentro y un bonito logo de pintura en aerosol. - Está bien, - ese es un buen comienzo. - Ahora, - más adelante, - vamos a estar construyendo una salida responsiva para que esta imagen se escale en tamaño -dependiendo de si estamos viendo esto en un escritorio o tableta o un dispositivo móvil. - Entonces vamos a terminar especificando esta altura y anchura usando CSS un poco más tarde para que podamos - hacerlo flexible. - Entonces por esa razón, - y por esa razón, - Onley, - en realidad voy a quitar el ancho y la altura de esta imagen por ahora. - Pero yo sólo quería que ustedes supieran que esos son algunos otros atributos que se pueden poner - ahí. - Está bien, - Tan genial. - Sabemos crear encabezamientos. - Ahora vamos a crear párrafos, - sabemos crear un listas no ordenadas y listas ordenadas. - Um, - también sabemos crear comentarios y medios en la página. 7. ENLACES: - Ahora pasemos a crear enlaces. - Los enlaces permitirán a nuestros usuarios navegar entre las páginas. - Entonces en este momento sólo tenemos aquí la página del índice, - que es nuestra página principal. - Y también tenemos esta página de catálogo. - Creo que vamos a seguir adelante y crear unas páginas más. - En realidad creemos tres más, - y luego tendremos todas las páginas listas para ir por el resto de nuestro sitio sobre ejercicios futuro- . - Entonces sigamos adelante y solo vamos a ir al archivo y diremos un nuevo archivo y eso creará un archivo - titulado. - Seguiremos adelante y guardaremos esto, - y nos aseguraremos de que esto se guarde dentro de nuestra carpeta del sitio y queremos llamar a esto - siguiente archivo. - Um, - Voy a llamar a éste. - Contacto murió. - HTML. - Esta será nuestra página de información de contacto, - y voy a seguir adelante y decir, - guardar así, - Um, - para que - Um, podamos empezar a redactar la estructura básica del documento, - que recordarán de thes páginas anteriores. - Aquí tenemos DOC tipo HTML head y el body tag etcetera eso para Para este, - les voy a mostrar un truco que pueden hacer. - A pesar de que es una buena práctica cuando estás empezando a escribir todo, - por lo que lo recordarás. - Um, - ya sabes, - cuando llegues al punto donde te sientes cómodo contigo, - recuerda, - estás seguro de recordar todas estas etiquetas que conforman la estructura básica del documento. - Siempre puedes usar cosas como esta, - las herramientas aquí arriba, - la parte superior. - Se puede ir a los fragmentos. - Y si haces clic en el primer fragmento aquí que dice html Mira eso. - Pone muchas de esas etiquetas ahí para mí. - Para que pudiera simplemente entrar aquí y después poner el título. - Y ésta es la página de contacto vio justo a la derecha Contacto así. - ¿De acuerdo? - Y también nos enteramos de la etiqueta tipo DOC en la parte superior, - sólo haciendo una revisión rápida allí. - Entonces, - Tipo de Doc HTML es el tipo externo de cinco doc. - Hay algunas otras cosas que podemos adherir que también ayudarán al navegador. - Hablemos de un atributo que podemos colocar dentro de esta etiqueta HTML de apertura para que podamos - especificar un idioma aquí así. - Podemos decir e en para inglés, - Um, - y si te interesa conocer todos los códigos de idioma, - por ejemplo, - sí, - para español, - fr para francés etcétera. - Puedes seguir adelante y mirar esos hacia arriba. - Se puede Google que si Google um html tendido hielo. - Por lo que s o códigos. - Yo así los códigos se le ocurrirá una gran lista de diferentes idiomas. - Puedes echar un vistazo a otra cosa que sea agradable para el navegador. - Aparte de contarlo, -ya sabes- la versión de HTML, -de la que hablamos antes- y darle un lenguaje para el contenido principal de la página. - También podemos añadir una metaetiqueta aparecer, - y las metaetiquetas suelen contener información para navegadores y motores de búsqueda. - En este caso, - lo que vamos a hacer es darle otra etiqueta llamada Meta con un tributo de - conjunto de personajes. - Y vamos a decirle que los caracteres de texto le vamos a decir al navegador cualquiera - dispositivos que entrevistan a esta página que estos caracteres de texto en la página son utf ocho y - caracteres de texto codificados. - Entonces este es el tipo preferido de HTML cinco de configurar ahí esta noche para especie de tener una página en blanco -. - Um, - Voy a seguir adelante y poner en las cosas que van a ser las mismas en cada página que con todas - nuestras otras páginas tenemos encabezamiento y también tenemos el subtítulo era zapatos, - creo. - Y entonces tuvimos, -como, - un párrafo. - Entonces va a haber algunas cosas diferentes van a ir en cada una de estas páginas. - Esta es la página de contacto en, - y ejercicios futuros en realidad estarán colocando en un formulario de contacto aquí y un Google embebido - mapas de personas pueden ver la ubicación de la empresa y cosas por el estilo. - Pero por ahora, - sólo vamos a crear un párrafo y sólo vamos a escribir algo en él sólo para que podamos - ver un cambio de página a página vista justo, - contacte aquí. - Y eso funcionará por ahora. - Voy a ir a guardar esta página. - Podemos simplemente seguir adelante y duplicar esta página un par de veces. - Voy a ir al archivo, - y sólo voy a decir, - guardar como Y voy a llamar a este siguiente en lugar de contacto. - ¿Por qué no seguimos adelante y guardamos este como precio? - Entonces también vamos a tener una página. - Va a ser una especie de gráfico de precios. - Vamos a insertar una tabla en esta página y luego hacer ejercicio. - Entonces no dice precios y guarde eso y por los precios, - vamos a cambiar algunas cosas aquí. - Bueno, - escribiremos la palabra pricing aquí en el título y sólo para que podamos ver el cambio en cada - página enólogo derecho, - precios en el párrafo aquí y guarde eso. - Y vamos a ver, -tenemos una página más vamos a hacer un archivo guardar como, - y vamos a seguir adelante y duplicar esta página también. - Um, - llamemos a éste ventas. - Esto va a ser una página. - Se va a, - uh, - vamos a enumerar todas las ventas de nuestro sitio. - Entonces aquí saldremos adelante y cambiaremos esto para decir a la venta por eso y diremos como, - um, - ventas aquí para el párrafo sólo para que podamos ver un cambio cuando navegemos entre las páginas - y de nuevo, - estaremos poniendo más contenido aquí más adelante. - Esto será justo para que empecemos. - Está bien, - así que esos están todos salvados. - Um, - volvamos a la página del índice aquí. - Acabo de dar click en índice. - Notarás en texto sublime. - Si solo hace clic en un archivo, - cambiará ese archivo. - Y si hace doble clic, - en realidad abrirá una pestaña adicional para el archivo. - Normalmente es cuando estoy trabajando en el sitio. - Muchas veces sólo voy a pasar y hacer doble clic en cada uno de los archivos con los que pretendo trabajar - con así. - Y entonces puedo cambiar entre todas estas pestañas de aquí arriba, - lo cual es un poco agradable. - Podrías incluso arrastrar y soltar y mover estos por ahí. - Otra cosa genial que puedes hacer es que puedes dividir la pantalla. - Por ejemplo, - en Mac, - se puede dio opción de comando y luego un número y el número que golpeaste en la parte superior del - teclado. - El teclado determinará cuántas veces se divide. - Entonces si digo opción de comando a ella dividirá la pantalla en dos, - y eso me permite arrastrar, - um, - estas pestañas de un lado a otro para que en realidad pudiera ver múltiples archivos al mismo tiempo, - que es un poco agradable. - Entonces eso es Ah, - opción de comando, - y luego un número en la parte superior. - Tu teclado. - Se puede jugar con eso. - Se puede hacer comando Opción tres. - Se dividirá tres veces Opción de comando para se dividirá cuatro veces, - aunque eso es un poco estrecho leer el código allí. - Pero se podía ver que en realidad podías tener, -como cuatro archivos diferentes abiertos en cada pestaña así, - lo cual sería un poco agradable. - Y si quieres volver a la normalidad, - solo haces comando opción uno. - Entonces esa es opción de comando en Mac en Windows. - Yo creo que es opción de control, - Pero tal vez tengas que buscar eso para que sí, - ¿sabes qué? - Voy a seguir adelante, - y, - um, - voy a averiguarlo, - y voy a publicar eso en la información debajo de este video para ustedes chicos. - ¿De acuerdo? - Entonces, - back Teoh, - enlaces del dedo del pie atrás, - aunque queremos hacer ahora- es que queremos un enlace entre todas estas páginas diferentes. - Entonces decidí que quiero mis enlaces dedo del pie en vivo justo debajo de esto. - Encabezando aquí en cada una de las páginas tendrá, - como, - una barra de navegación que vamos a colocar aquí, - ¿de acuerdo? - Y vamos a poner algunos enlaces aquí. - Sólo escribiré un pequeño comentario que estos aires se unen. - Entonces el elemento específico que usamos para crear enlaces es un elemento ancla. - Usa la letra A así. - Tiene una abertura y un cierre A y cualquier cosa que rodees con esta apertura y -cerrar una etiqueta se va a convertir en un enlace por ejemplo- en realidad vamos a enlazar a esta textura. - Primero, - va a crear algún texto que diga sobre y vamos a convertir este texto en un enlace y al - rodearlo con esto una etiqueta. - Por lo que un es sinónimo de enlace de anclaje. - Pero si es útil, - también se podría pensar en la de la palabra acción A para la acción. - Porque lo que esto hace es, - um, - crea una acción donde al hacer clic en algo, - cambia a una página diferente. - ¿Verdad? - De acuerdo, - Así que aparte de ti, - ningún texto circundante con estos enlaces de anclaje estos a elementos aquí, - también podemos, - um, - también podemos rodear imágenes. - Entonces, - por ejemplo- esta imagen de aquí abajo, - si quisiera este enlace de dedo de la imagen en algún lugar cuando hice clic en él, - también podría rodear a este tipo con unas etiquetas como esa. - Esta imagen en particular no me interesa realmente que ésta se vincule a cualquier parte, - Así que todos lo borren de eso, - Pero sólo para mostrarle que se puede, - de hecho, - ya sabes, - sólo girar enlaces ellos mismos son Disculpe, - se pueden convertir imágenes ellos mismos en los enlaces. - De acuerdo, - así que para este primer intento, - sólo vamos a convertir este texto en un enlace tan rodeando este texto con esto. - Una etiqueta le dice a un navegador que se supone que es un enlace, - pero aún no le hemos dicho al navegador dónde queríamos navegar realmente hacia donde queremos- a saltar cuando hacemos clic en este enlace. - Entonces para hacer eso, - tenemos que añadir una opción aquí en la apertura una etiqueta y este atributo se llama H Ref. - Un comedero significa referencia de hipertexto, - Um, - o hiper referencia. - Recuerde, - estas páginas son páginas HTML, - que son páginas de hipertexto o páginas de lenguaje de marcado de hipertexto. - Por lo que esto se refiere a hacer referencia a una página HTML específica si eso hace que sea más fácil - recordar su H ref. - De acuerdo, - entonces lo que queremos hacer aquí es que queremos poner el, - uh Básicamente queremos describir al navegador a dónde debería ir, - y tenemos que hacer eso, - ya sabes, - relativo a la página que estaban encendidos. - Actualmente estamos en la página html de punto índice. - Entonces si vengo aquí y miro en mi carpeta, - puedo ver que tengo Todo está dentro de esta carpeta principal del sitio que se llama HTML - fundamentos. - Um, - esta vez no estamos vinculando a ninguna imágen, - así que no tengo que preocuparme por el nombre de la carpeta de ahí, - y parece que todas estas páginas HTML están de hecho solo viviendo lado a lado en la misma - carpeta. - Entonces ya que ahí simplemente pasando el rato en la misma carpeta, - puedo literalmente simplemente escribir el nombre del archivo así. - Ahora otra vez. - Si estas páginas estuvieran en una carpeta diferente, - podría escribir el nombre de la carpeta para decirle al navegador que vaya a la carpeta y luego encuentre ese - archivo. - Y otra vez, - si quisieras salir de la carpeta, - podrías hacer punto, - punto, - barra, - que lo hará, - que saldrá de la carpeta actual y buscará un archivo u otro carpeta. - En este caso, - no necesitamos hacer ninguno de esos porque simplemente están pasando el rato viviendo en la misma- carpeta. - Genial. - Entonces ese es el primer enlace. - Eso es todo lo que necesitamos hacer para que funcione ese dedo del pie, - y seguiré adelante y crearé otro de éstos creará uno para cada página. - Eso es H ref. - Te acostumbrarás mucho a escribir eso, - y yo entraré aquí y pondremos algo de texto. - Vamos a ver, - lo siguiente a lo que vamos a enlazar es la página de la venta, - Saúl, - justo a la venta. - Y luego aquí, - la página HTML física real quiere un enlace a se llama venta punto html Al igual que eso. - Ah, - ¿sabes qué? - Ah, - aquí. - Yo lo llamé venta, - pero aquí se llama ventas Dentro de s. - Ahora, - eso va a crear, - um, - un problema. - Estos nombres tienen que ser exactamente los mismos. - Entonces esto en realidad va a romper el enlace aquí. - Entonces si llamo aquí a esta venta, - mejor me aseguro de llamar a esta venta por aquí. - Creo que lo que haré es dar clic derecho en este archivo y también renombrar y luego aquí abajo -en la parte inferior, - puedo borrar ese s y golpear retorno, - y eso lo arreglará. - Es bueno que cogiera eso, - um, - cuando lo hice, - porque eso en realidad va a romper el enlace. - Está bien. - Nadie quiere enlaces rotos. - Eso no es divertido. - De acuerdo, - así que vamos a seguir adelante y sólo hacer un par más de estos sólo para darte la idea de - cómo funciona. - Lo siguiente que vamos a hacer es después de la venta es la página del catálogo, -que ya construimos, - y que enlaza al catálogo dot html Al igual que eso. - Y estos son sensibles a mayúsculas y minúsculas. - Um, - así que aquí en el nombre del archivo. - Si fuera una C mayúscula en el nombre del archivo, - Necesitaría un C mayúscula ahí. - A veces los navegadores son más indulgentes localmente en tu computadora, -en la computadora frente a ti, - podrías, - ya sabes, - usar accidentalmente una sensibilidad de mayúsculas y minúsculas como un C Inferior Casey. - Y por alguna razón, - seguirá funcionando para ti a nivel local. - Pero entonces cuando subiste al servidor, - puede que no funcione. - Por lo que siempre es bueno estar al tanto de la ortografía de las cosas y de la mayúscula, - ya sea mayúscula o minúscula. - De acuerdo, - uh, - siguiente pasemos a la siguiente página. - Entonces después del catálogo, - vamos a enlazar a una página llamada pricing dot html. - Y el texto ahí se llama Precios y cerraremos látigos cerraremos ese enlace ahí, - y haremos una última como aquí. - Creo que eso se encargará de todas mis páginas. - Les mostraré chicos Ah, - atajo también lo es. - En lugar de escribir las etiquetas, - te acostumbras a ellas. - Si acabas de golpear la letra de la etiqueta como la letra A. - Y si golpeo barra espacial de control. - Surge así y puedo darle vuelta, - y lo hará Correcto eso fuera. - Para mí, - hay algunos atajos bastante aseados que puedes hacer para completar código en texto sublime. - Um, - vamos a ver dónde estamos aquí. - La última página se llama punto de contacto html. - Al igual que, - y vamos a enlazar con el Texas es contacto. - Está bien, - ahora. - Por lo que esto demuestra cómo utilizar una ruta relativa a otros archivos de tu sitio web. - Puede que te estés preguntando, - hipotéticamente qué pasaría si quisiera enlazar a otro archivo en algún otro lugar de la web, - por ejemplo- ¿Qué pasaría si quisiera, - ya sabes, - hacer otro enlace que fue a otro sitio web, - Por ejemplo, - si quiero un enlace a The New York Times, - podría poner en la chica llena, - razón por la que tiempos punto com así, - Um y por qué tiempos ahora probablemente terminaré quitando este enlace en ejercicios posteriores porque nosotros - no necesitamos realmente nuestro sitio web de zapatos Toe vinculado al New York Times no tiene mucho sentido -, - correcto. - Pero sin embargo, - quería mostrarles chicos que si ponen en nombre de un archivo en su sitio web siempre - el navegador tiene una visión clara de ello. - Ya sabes, -si están en la misma carpeta- podrías simplemente poner el nombre del archivo que se llama la ruta relativa. - Ahora, - si alguna vez quieres enlazar a algo en otro lugar de la web, - puedes poner el nombre de dominio completo así, - que se llama Ruta Absoluta. - Aquí. - Este es el absoluto tu ruta URL cada uno que sí tienes que poner la barra de colon http completa, - barra y luego el nombre completo del sitio web. - Entonces ahora cuando haga clic en este texto y los tiempos Blancos, - en realidad va a enlazar a otro sitio web. - Está bien, - así que por defecto, - si solo usas h ref, - um, - y haces click en ya sea una imagen o algún texto con la etiqueta de anclaje configurada así, - lo que va a pasar es que fueron todos bastante familiarizado con es que la pantalla va a cambiar. - Estaremos mirando una página, - hará clic en un enlace, - y cambiará a la otra página ahora, - en situaciones donde, - en lugar de cambiar la página en la que estás actualmente, - si quieres para forzar al navegador a abrir una nueva pestaña, - una nueva pestaña del navegador o una nueva ventana del navegador. - Lo que puedes hacer es usar otro atributo aquí, - que se llama Target. - Entonces voy a meterme dentro de esto. - Una etiqueta aquí, - esta última para The New York Times. - Y después de esta edad ref aquí.- Voy a seguir adelante y entrar aquí. - Acercaremos un poco y golpearemos un espacio y diremos Target así. - Ahí vamos. - Target es el nombre de los atributos, - y luego vamos a seguir adelante y poner algunas cotizaciones. - Aviso. - Si tienes múltiples atributos, - lo que pasa ahí es que simplemente pones un espacio. - Podemos incluso poner esto en su propia línea, - por lo que es más fácil de ver. - ¿Qué tal eso? - Está bien. - Entonces puedes ver aquí que si tengo múltiples atributos, - tenemos un solo atributo aquí. - Y luego hay un espacio. - Um, - y entonces tenemos otro atributo ahí. - Está bien. - Y atributos como estos sólo están en etiquetas de apertura, - ¿verdad? - Nunca en la etiqueta de cierre. - De acuerdo, - entonces, - bajo objetivo, - podemos decirle que apunte a una nueva pestaña del navegador en blanco diciendo guión bajo en blanco así. - El subrayado importante. - Hay que poner eso ahí también. - Este es un valor específico que el navegador entiende. - Como en lugar de apuntar a sí mismo, - el predeterminado es yo objetivo, - que se ve así, - Um Y eso significa que al hacer clic en un enlace en cualquier ventana en la que estés, - vas a perder la vista de esa página. - Pero va a cambiar a la vista de la siguiente página o estás vinculando dos. - Um, - y si te gustaría hacer eso, - realmente no tienes que precisar. - Entonces para estos de aquí arriba, - No especifiqué un objetivo. - Entonces cuando haga clic, - el sólo va a cambiar la página. - No obstante, - para este, - especificé blanco blanco, - y eso va a abrir una nueva pestaña del navegador. - Salgamos y guardemos esto. - Y lo que vamos a hacer es copiar y pegar estos enlaces a todas las demás páginas - aquí, - Así que voy a resaltar todo este código de Ah, - para mí, - está en línea. - 17 aquí. - Todo el camino a la numeración de líneas de la línea 19 puede ser ligeramente diferente para ti en tu ejercicio - código, - dependiendo de cuánto escribiste o cómo retorna la línea Maney lo hiciste. - Pero aquí mismo en esta sección, - sólo voy a copiar todos esos enlaces que acabamos de escribir así que voy a resaltar esos y decir editar- . - ¿Copiar qué? - Se puede ver el atajo. - Hay comando Ver en Mac o control Ver en Windows. - Y vamos a ir a las otras páginas del sitio. - Vamos al contacto, - y vamos a ir por debajo del encabezamiento y pegar esos enlaces ahí y guardar Va a la página - ventas y vamos a ir por debajo de los encabezados y pegar esos enlaces y guardar y vamos - al catálogo y estamos va a ir por debajo de los encabezamientos Vamos a dar un ritmo a esos enlaces y a ahorrar y - parece que todos hemos terminado ahí. - Ese es el Bien, - esto son sólo cuatro páginas. - Parece que me falta algo ahí. - Aún no tenemos precios. - Eso es lo que me estoy perdiendo. - De acuerdo, - vamos a entrar en la fijación de precios al último e ir por debajo de los encabezados y pegar y ahorrar. - Entonces ahora, - todos pelearon. - Las cinco de mis páginas tienen estos enlaces, - um, - pegados en ellos, - y luego podemos guardarte en los archivos y podemos volver al navegador ahora. - Y se puede ver en esta ficha su, - um, - en la página del índice y se puede ver nuestra bonita pequeña imagen que creamos aquí. - ¿Recuerdas? - Siempre tenemos que refrescar la página para ver los cambios más recientes que hicimos. - Por lo que siempre estás guardando tu archivo y luego regresando y refrescando. - Um, - no tengas miedo de ahorrar, - porque incluso después de que ahorres, - puedes deshacer. - Si cometes un error, - podemos ir a editar, - deshacer, - um, - o comando Z en Mac o controlar Z en Windows para que siempre puedas volver a donde estés. - Yo puedo deshacer eso así y arreglarlo. - De acuerdo, - así que siempre estamos ahorrando. - Volvemos al navegador y nos vamos a refrescar. - Y ahí vamos. - Veo aquí mis enlaces, -que están apareciendo al lado de mi imagen- hablará un poco más de eso más adelante. - ¿Por qué estos aire apareciendo uno al lado del otro? - Um, - así que vamos a probar estos. - Entonces iremos a la venta aquí. - Voy a hacer clic en eso cool y aquí dice ventas. - Ahora estoy en la página de ventas, - dará clic en catálogo. - Ahí está la página del catálogo que construimos con nuestras propias listas ordenadas y listas ordenadas. - Haremos clic en precios y va a la página de precios. - Ahí vamos a hacer clic en contactos y vamos a la página de contacto y luego por último pero no menos importante vamos a - dar click en el enlace Y times que puedes ver, - abre una nueva pestaña aquí y nos lleva a la página web del New York Times. - Entonces porque dije blanco en blanco, - Um, - como esto que está causando una nueva pestaña del navegador abierta La cosa. - Lo que es bonito de eso es que, - um todavía puedo volver a este sitio. - No he salido de este sitio de aquí. - Sólo puedo usar esa pestaña del navegador. - Correcto. - Entonces otra vez, - si hago clic, - esto abre una nueva pestaña del navegador aquí. - Sólo podemos cerrar eso y volver al sitio. - Ya estaban encendidos. - Está bien. - Buen trabajo, - todo el mundo. - Acabas de construir tu primera página web. - Um, - tu primer sitio web. - Entonces esto es realmente lo que son las páginas Web, - um, - los sitios web son esencialmente, - ya sabes, - vinculación entre varias páginas web. - Um, - Y aunque este no tiene un aspecto muy atractivo aún, - vamos a aprender más y más y empujarlo más para que podamos construir sitios realmente profesionales, - de aspecto pulido. - Está bien, - tan buen trabajo. - Lo que vas a querer hacer ahora es que vas a querer pasar al primer código - reto donde vas a empezar a construir tus propias páginas del sitio 8. Validación de HTML: - hablemos un poco de validar nuestro código. - Sólo voy a ir a un ejemplo. - Página. - Estos son los datos de precios que ves y todo paga que acabamos de terminar en el último - ejercicio. - Y cuando estés trabajando en estos ejercicios y en ejercicios futuros en este curso, - es posible que te encuentres con problemas donde las cosas no se muestren correctamente en tu navegador. - Um, - o tal vez incluso cuando vayas a construir tu propio proyecto de sitio, - estarás escribiendo algún código y tal vez algo no se muestre correctamente o cosas - no se colocará en la forma en que te gustaría que estuvieran en la página. - Entonces una buena manera de comprobar eso es validar el código y ver si el código está realmente escrito - correctamente. - Entonces una forma en que podemos hacer eso es que podemos usar un validador en línea. - Entonces lo que voy a hacer es resaltar todo el código de esta página en el precio - página aquí. - Voy a dar clic y arrastrar. - O puedes dio seleccionar todo comando a en Mac o controlar A en Windows, - y eso seleccionará todo. - Y luego vamos a copiar este código, -que es por supuesto, - comando. - Ver en Mac o controlar ver en Windows. - Y luego vamos a saltar a un navegador y voy a seguir adelante y buscar validador - dot w three dot org así. - Entonces esto trae al validador dot w three dot org y esto es en el w three dot org - sitio web, - que es el W tres c, - el consorcio World Wide Web, - que suena como una especie de culto espeluznante. - Pero en realidad estas son Estas son personas que están manteniendo el lenguaje HTML, - por lo que están determinando las reglas y la forma adecuada de escribir y el uso adecuado para - HTML y CSS. - Entonces si alguna vez quiero saber con certeza cómo escribir algo o cómo usar un elemento, - siempre puedes venir aquí y revisar allá, - echa un vistazo a su documentación en w three dot org. - Ahora mismo, - sólo vamos a estar usando su validador en línea. - Se pueden ver sus diversas formas de validar. - Algo que puedes hacer es poner en dirección Anat aquí para que yo pudiera subir mi sitio y mi - sitio podría existir en mi nombre de dominio como mi sitio dot com. - Y solo puedo pegar en esa URL y hacer que valide páginas de ese sitio. - Um, - también puedes validar por carga de archivo para poder elegir un archivo de mi computadora y podría - probar el código. - De esa manera podría validar el código a partir de ahí. - Vamos a usar esta tercera pestaña aquí esto dice, - validado por entrada directa. - Y los puedes ver. - Hay una cajita para copiar y pegar, - um, - y debilitar. - Hacer editar pegar, - que es un comando V o en Mac o Control V en ventanas. - Y eso pegará tu código ahí para que podamos ver el código que escribimos recientemente, - y voy a seguir adelante y hacer clic en comprobar. - Y la buena noticia es que escribimos eso correctamente. - Dice que este documento fue comprobado con éxito como html cinco. - Cada vez que te metes una barra verde en la parte superior que entonces lo hiciste bien, - todo está funcionando correctamente. - Um, - de lo contrario, - si consigues aquí un bar rojo, - entonces te va a decir que hay algo mal en el código. - Um, - vamos a crear ese escenario. - Entonces actualmente todo está escrito correctamente, - Pero digamos que estaba escribiendo a toda prisa y digamos que me olvidé de escribir este cierre - barra para que parezca que hay una apertura de dos años y luego otra. - H dos, - este es un error muy común. - Es Oops. - Olvidé poner la barra de cierre aquí. - Otro error común es acercarse demasiado a un elemento. - Entonces, ¿y si me olvido de esta etiqueta de cierre del párrafo así? - Entonces aquí hay dos errores thes aire a errores realmente comunes que veo. - Entonces vámonos. - Vuelven a guardar este archivo y bien, - copia. - Este año, - copiaré todo este código, - y vamos a seguir adelante y traerlo de vuelta al validador aquí, - ¿de acuerdo? - Y vamos a ritmo, - y luego voy a hacer clic en el botón Reeve ality aquí abajo. - Ah, - esa vez encontró errores en el código. - Entonces sabe que algo anda mal. - Um, - así dice Ares encontrado al revisar este documento. - Entonces vamos a ver cuáles son estos errores aquí. - Está bien, - um y esta es la zona que realmente me preocupa. - ¿Es este texto rojo aquí que dice salida cuatro errores. - Entonces veamos en dónde está encontrando estos aires. - Nos dice aquí en línea 10 um, - el rumbo no puede ser hijo de otro rubro. - Interesante. - Entonces ve esta edad para etiquetar. - Acerquemos eso para laicos. - Este es el primer mensaje aéreo. - Dice que esta edad para etiquetar aquí. - Ves, - esta pequeña marca roja no puede ser hijo de otro rubro. - Entonces piensa que estamos tratando de anidar, - yendo dentro de otro. - Y es decir que eso está específicamente en línea. - 10. - De acuerdo, - para que podamos volver a nuestro código aquí, - y porque tengo números de línea, - puedo bajar la línea 10 y confiné el tema y decir, - Oh, - de hecho, - ya veo qué de lo que están hablando aquí. - Necesito tener una marca de barra de cierre aquí, - así que cambiaré eso y luego guardaré y podremos volver a validar. - Y eso resolverá al menos uno de los errores ahí. - Y volvamos. - Y voy a seguir adelante y pegar este código aquí otra vez. - Voy a correr todo y pegar y revalidado. - Está bien, - eso fue. - Yo estaba bien. - Eso realmente funcionó esa vez. - Parece que nos escapamos con esta etiqueta p. - Um, - aunque realmente, - debería haber lanzado al aire sobre eso también. - Um, - y por supuesto, - si alguna vez ves visualmente estas cosas ocurriendo, - vas a querer limpiarlo, - arreglarlo tú mismo poniendo esa otra etiqueta de cierre. - Entonces cada vez que validas, - se va a, - ya sabes. - Por lo general te dirá la línea exacta donde está viendo el tema. - Pero otras veces hay que ir a esa línea. - Te dice que vayas a, -y tienes que retroceder y revisar el código encima para ver si algo más anteriormente- está interrumpiendo al validador en esa línea de código en particular. - Por lo que esa es una buena herramienta para solucionar problemas y asegurarse de que su código esté escrito correctamente -. 9. Publicación de sitio: - Hola. - Hablemos de la publicación del sitio después de todo nuestro arduo trabajo. - Al final del día, - digamos que nos gustaría llevar los archivos de nuestro sitio web y nos gustaría subirlos a un servidor remoto . - De esa forma podemos previsualizar los archivos o podemos compartir los archivos con World desde nuestro dominio. - Entonces, - por supuesto, - esto requiere salir y comprar un nombre de dominio y espacio de alojamiento Web de una - empresa en particular. - Y he sugerido algunas empresas con las que he tenido buenas experiencias y después tengo algunas - ofertas razonables en la sección 0.0 set up en el Módulo uno para que puedas revisar esas - empresas si no tienes ya esta puesta en marcha y realmente en cualquier lugar que tú puede encontrar un - proveedor de nombres de dominio y alojamiento Web. - Está bien usarlo aparte de poder subir nuestros archivos para que el mundo pueda verlo. - Esto también te será útil en esta clase para que puedas publicar tus proyectos y obtener comentarios de -otras personas porque solo podrán ir al dominio de tu sitio web para ver qué - has estado trabajando. - Entonces para empezar, - vamos a seguir adelante y asegurarnos de que hemos anotado las tres piezas de - información que obtuvimos de nuestro proveedor de hosting, - y esa sería nuestra dirección FTP nuestro nombre de usuario o usuario inicio de sesión y contraseña. - Típicamente, - la mayoría de las empresas de hosting te enviarán por correo electrónico esta información la primera vez que te inscribas. - Y si no te enviaron por email esto, - es posible que tengas que llamarlos o ponerte en contacto con ellos para obtener esta información. - O pueden haberte dado un nombre de usuario y contraseña para iniciar sesión en un panel de control en su - página web. - Y por lo general una vez que inicies sesión en tu panel de control en algún lugar de ahí podrás encontrar - esta información. - Y una vez que encuentres esa información, - quieres escribirla. - Y entonces lo siguiente que queremos hacer es lanzar esta aplicación llamada Archivo - Zilla, - que va a ser nuestro cliente FTP preferido. - Entonces voy a seguir adelante y lanzar archivo zilla, - y esto puede parecer un poco diferente en Windows. - Esto está en mi Mac aquí, - pero es más o menos lo mismo de ambos. - Um, - se puede ver que esta pantalla de aquí tiene todas estas diferentes ventanas aquí arriba en la parte superior. - Tenemos una ventana. - Esa va a ser la información de solicitud y respuesta de eso. - Los servidores que nos dan para que responda de nuevo, -como, - no pueden conectar el o será como conexión cosas exitosas como esa. - Y aquí abajo, - en realidad te dirá el estado de un archivo. - Si lo estás copiando, - verás un poco de carga del dedo del pie de barra, - hazte saber si se copia el archivo. - Y en el centro aquí nos hemos dividido en el lado izquierdo y derecho, - y el lado izquierdo es su sistema de archivos local. - Entonces estos airean todos los archivos de tu computadora justo en lo mismo que si estuvieras usando finder o -tu navegador de archivos y luego por aquí en el lado derecho, - que en realidad está en blanco ahora mismo porque no estamos conectados a ningún servidor. - Esta sería en realidad la estructura de archivos en tu servidor al que te estás conectando así - podrás ver tus archivos locales y los archivos de tu servidor, - y literalmente podemos arrastrar y soltar archivos desde el lado izquierdo hacia el lado derecho para copiar - desde nuestros archivos locales hasta nuestro servidor remoto. - Entonces este es en realidad el equivalente de subir es si haces clic y arrastras ya sabes, - justo de la misma manera que puedes hacer clic y arrastrar archivos alrededor de tu computadora, - simplemente harás clic y arrastrarás tus archivos de sitio web y los soltarás en el servidor remoto. - Y adicionalmente, - también puedes hacer clic aquí en el servidor remoto, - y puedes arrastrar y soltar archivos desde el servidor remoto a tu computadora local para descargarlos - esos archivos para que puedas subir y descargar simplemente arrastrando y cayendo. - Entonces no estamos conectados a ningún servidor. - Ese será el primer paso. - Tenemos que conectarnos a nuestro servidor. - Entonces lo primero que voy a hacer es que quiero seguir adelante y subir al menú desplegable de archivos - menu, - y vamos a seleccionar administrador del sitio Y aquí, - bajo esta pequeña pestaña que dice mis sitios. - Aquí es donde puedes crear todas las diferentes configuraciones para diferentes servidores a los que te conectas. - Entonces estos airen sólo servidores diferentes a los que me he conectado en el pasado. - Voy a seguir adelante y crear un nuevo sitio. - Voy a hacer clic en este botón aquí nuevo sitio, - y quiere que lo nombre aquí. - Actualmente se llama Nuevo Sitio, - pero le voy a dar un mejor nombre. - Zapatos C H W es el nombre de este sitio. - Y luego si hago clic en eso ahí, - puedo ver que puedo poner en algunos ajustes y se recordará estos ajustes para este - sitio en particular. - Entonces lo primero que necesito aquí es mi anfitrión. - Y para poder conectarme a mi servidor FTP, - acabo de poner en el nombre de dominio al que me estoy conectando, - que es Jonathan Grover dot com. - Y por supuesto, - esto será diferente para ti y tendrás que volver a tener que consultar con tu - proveedor de hosting para saber qué se supone que debes poner aquí para conectar el FTP para el protocolo -. - Aquí, - se puede seleccionar entre FTP, - que significa protocolo de transferencia de archivos, - o SFTP, - que es protocolo seguro de transferencia de archivos. - Eso sftp puede ser requerido. - Ciertos hosts o ciertos servidores requieren que se conecte con una conexión segura. - Mi proveedor no. - Sólo voy a usar el protocolo regular de transferencia de archivos, - lo cual es bastante común. - Voy a dejar el puerto en blanco. - A veces hay que poner aquí un cierto número de puerto, - pero la mayoría de las veces puedes dejar ese espacio en blanco bajo encriptación. - Yo sólo voy a decir usar ftp llano y aquí bajo ley tipo arma, - Voy a cambiar esto a normal. - Entonces voy a cambiarlo de anónimo a normal. - Y aquí donde dice, - usuario, - aquí es donde pones tu nombre de inicio de sesión o tu nombre de usuario. - Entonces aquí es donde es útil tener estas cosas escritas en alguna parte, - y entonces vas a querer poner tu contraseña. - Afortunadamente, - ustedes no pueden ver el mío porque son pequeños puntos. - Um, - y luego hay algunas otras pestañas. - No voy a llenar nada más, - pero sólo para que sepas cuáles son estos. - Si vas a la pestaña de avance, - puedes hacer clic, - navegar, - y puedes seleccionar un directorio local predeterminado. - Y lo que eso hará es cada vez que te conectes a este sitio, - cargará automáticamente una determinada carpeta desde tu computadora aquí en el archivo local. - A veces eso es lindo. - Puede acelerar el proceso para que no tengas que buscar tanto tiempo, - y podrías hacer lo mismo por tu servidor configurando un directorio remoto predeterminado. - Entonces de esa manera, - cada vez que te conectes al servidor, - entrará en carpeta específica. - Se quiere entrar. - A veces cuando te conectas a un servidor, -solo verás un directorio en blanco, - y podrías simplemente arrastrar tus archivos justo dentro de él. - Otras veces hay todo tipo de carpetas, - y ahí podrías ver una que dice, - Registros que sólo tiene, - como, - datos de tu empresa de hosting en ella, - como datos analíticos sobre quién visita el sitio, - cosas como esa información sobre la frecuencia con la que copiaste archivos y en qué fecha. - Y luego a veces hay otra carpeta que dice Public, - que es donde se copiarían los archivos de su sitio Web u otras veces. - Se llama http o tal vez incluso una carpeta HTML. - Entonces si ves muchas carpetas extrañas y no estás seguro de qué carpeta copiar tus archivos -y dos, - vas a querer preguntarle a tu empresa de hosting sobre eso. - Entonces por ahora, - sólo voy a dejar estos en blanco. - Pero lo principal que tienes que tener es en esta pestaña general, - y ese es tu host FTP, - tu nombre de usuario y tu contraseña. - Después de que me ponga todo configurado, - puedo hacer clic en el botón Aceptar para seguir adelante y guardarlo, - y ahora en cualquier momento que quiera visitar el sitio, - siempre puedo simplemente ir al administrador del sitio de archivos, - y puedo ver que recuerda esa información. - Siempre que hago clic en el nombre de mi proyecto, - aquí están cada W shoes. - Tendrá toda esa información ahí para que pueda seguir adelante y dar clic en mi sitio y hacer clic - Conecta aquí y se podría ver aquí arriba estos aire todos los comandos y respuestas del - servidor. - Afortunadamente, - mente dijo directorio listado exitoso aquí cuando me conecté. - Ahora, - si ves algún texto rojo aquí que dice algo así como error, - bla, bla un poco por lo general tienen ah, - número en algún tipo de mensaje de error. - Por lo general te dirá cosas como nombre de usuario o contraseña Incorrecto, - lo que te hará saber que obviamente estás usando la contraseña incorrecta. - O podría, - ya sabes, - tener algún tipo de extraño mensaje aéreo de que simplemente no sabes lo que significa. - Mi consejo es si recibes un mensaje de aire y no está claro por qué no funciona, - resalta el mensaje de aire y policías que estás hospedando empresas soporte técnico o llama a tu - empresa de hospedaje y lees el mensaje de aire, - y ellos podría ser capaz de decirte por qué no se está conectando Afortunadamente, - el mío fue capaz de conectarse. - ¿Cuándo estás? - Cuando te conectes. - Es posible que no veas esta complicada de una estructura de archivos en realidad tienen todas estas locas carpetas aquí. - Pero en cualquier caso, - lo que soy lo que voy a hacer es crear una carpeta específicamente para poner esto, - um, - este sitio web en si solo querías que estuviera en tu nombre de dominio. - Como si solo quisiera ir a este nombre de dominio, - Simplemente lo arrastraría a esa carpeta raíz. - Pero en realidad quiero crear. - Esto es como un proyecto de sitio oculto en una carpeta que, - como en Lee que conozco. - Así que creé una carpeta aquí llamada zapatos CHW para que en realidad pudiera ir dedo del pie como Jonathan, - Grover dot com slash zapatos CHW y ver los archivos ahí, - Por ejemplo, - déjame realmente quitar este directorio para poder recrear de nuevo. - Mostrar cómo Si hago clic derecho, - Aiken, - di borrar. - Ten cuidado al hacer esto, - Por cierto, - no lo puedes deshacer, - y diremos que sí. - Y ahora es Esa se ha ido. - ¿De acuerdo? - En realidad está quitando los archivos ahí. - Toma un tiempo. - Entonces si quiero crear un nuevo directorio aquí fuera de la ventana y decir Crear directorio - y me está mostrando dónde va a poner el directorio. - Y voy a llamar a éste zapatos Z h W. - Así que estoy tratando de hacer un poco de director oculto aquí, - y van a decir, - OK, - debería poder encontrar ese directorio por aquí en alguna parte. - Ahora, - ahí está. - Si alguna vez quieres entrar a una carpeta, - solo tienes que hacer doble clic en la carpeta. - Si alguna vez quieres salir de una carpeta, - solo tienes que hacer doble clic en esta carpeta de punto pequeño. - Siempre hay una carpeta en la parte superior, - llamada punto punto y si haces doble clic en eso, - te sacará de la carpeta. - Entonces en realidad voy a volver a esa carpeta aquí mismo. - Enfriar. - Y lo que quiero hacer eso es que quiero seleccionar todos estos archivos por aquí de una manera que puedas - hacer eso es que puedes hacer clic en archivos individuales y puedes mantener el turno y seleccionarlos así - eso. - También puedes seleccionar todos los archivos diciendo comando a en Mac o diciendo controlar a en windows -, - y luego puedes una vez que estén todos seleccionados como este azul. - Solo puedes hacer clic en cualquiera de ellos, - y los agarrará a todos que solo podemos arrastrar esto hasta aquí y podemos dejarlo caer. - Entonces arrastrando y soltando de mi lado local a mi servidor remoto allí.- Podría mover todos esos archivos ahí y arriba. - El top. - Este pequeño bar de aquí me está mostrando dónde está copiando esos dos. - Esto me está diciendo si los está copiando exitosamente y aquí abajo en esta ventana, - cuando copie un archivo, - en realidad verá una barra de progreso le mostrará cuánto tiempo lleva mover ese archivo. - Por ejemplo, -si vuelvo a arrastrar las imágenes por aquí, - me preguntó. - Dice que estos expedientes ya existen. - ¿Te gustaría sobrescribirse? - Di, - um, - siempre usa esta acción y di OK, - y aquí abajo puedes ver que está anulando esos archivos o actualizando esos archivos de imagen ahora, - está bien, - y una vez hecho, - dirá transferencia de archivos exitosa En esta pestaña, - dice que hubo 39 transferencias exitosas, - y si hago clic en eso, - me dirá qué archivos así y a dónde se copiaron. - Si ven algo aquí bajo transferencias fallidas, - eso significa que algo no se copió. - Y se puede, - como, - dar click derecho sobre él. - Y se puede, - como, - decirle que vuelva a intentar copiarlo o algo así. - Lindos archivos son los que deberían ser como actualmente café. - Está bien. - En cualquier caso, - se puede ver estas son imágenes espejadas. - Ahora, - estos son mis archivos locales. - Y este es mi servidor remoto, - que tiene todos esos archivos en espejo imágenes de los demás ahí. - Está bien, - Ya que aquí hay una página de índice, - podría simplemente encontrar esta carpeta y me va a mostrar estos archivos en la web ahora. - Entonces voy a abrir mi navegador, - y voy a ir a mi nombre de dominio y tenía que acabara de tirarlo a mi directorio predeterminado. - Son para mi nombre de dominio. - Podría simplemente ir al nombre de dominio en sí. - Ya tengo un sitio web aquí en el directorio raíz. - Entonces voy a ir en su lugar a mi carpeta de zapatos C h w underscore así. - Y hay cachorros. - Mi página web. - Entonces deberías poder Teoh, - subir tus archivos a tu servidor. - Y si no quieres que el mundo los vea. - Quieres ocultarlo un poco. - Siempre se puede crear un directorio y tirar los archivos en su. - Y si copias y pegas este directorio en tu página de proyecto en compartir habilidades, - entonces otras personas pueden ir a ver los archivos y darte retroalimentación y cosas por el estilo. 10. Introducción a las tablas, los formularios y los Iframes: - Oye, - bienvenido de nuevo. - Se trata de diapositivas 1.2 tablas formas y I marcos. - Vamos a estar viendo algunos elementos HTML adicionales que podemos pegarle a Ah, - el próximo ejercicio. - Entonces básicamente estará recogiendo donde lo dejamos para el último ejercicio, - pero estará sumando a ese mismo sitio. - Algunas cosas adicionales como tablas, - formas y yo marco tablas. - Probablemente estés familiarizado con cualquier momento que tengas algunos datos y lo mejor sería - que se muestre usando ah estructura organizada de filas y columnas que una tabla va a ser tu ir - al elemento. - El elemento de mesa está y se compone de esta mesa de apertura y cierre etiquetas aquí y después - dentro de ella. - Lo primero que hacemos es decidir cuántas filas hay, - y usamos este elemento TR aquí para crear una fila de tabla, - así que t r significa fila de tabla. - De acuerdo, - Entonces esta mesa en particular que sólo hemos construido para levantarse aquí, - que se puede ver. - Aquí está el primer set y aquí está el segundo Ahora dentro de mesa rosa, - tenemos TDs que dividen la tabla en columnas. - Entonces esto toma que esta fila aquí y le suma dos columnas porque tengo una apertura TD -. - Un TD de cierre hace una columna en particular y este otro divisor de mesa TD aquí crea - otra columna. - También podemos hacer lo mismo aquí arriba, - pero en lugar de usar TD para este primero estos 1er 2 en la fila superior aquí usamos th dance - para cabecera de mesa. - De acuerdo, - así que eso nos va a permitir darle estilo a estos tipos de manera diferente. - Entonces podemos decir, - Bueno, - queremos que el encabezado tenga, - ya sabes, - tal vez un texto más grueso y tal vez estar centrado o algo así. - O quizá el color de fondo de esta celda sea de un color diferente o algo así. - Por lo que utilizamos el elemento de mesa en su interior. - Tenemos mesa rose t r. - Y luego tenemos th para encabezamiento de mesa o cabecera de mesa y tenemos TV para las otras celdas. - Las otras columnas que queremos crear a continuación. - Entonces puedes ver aquí si nosotros si te imaginas que cortamos todas estas cosas a la derecha y - todo a continuación. - Básicamente, - sólo estamos construyendo estas 1ra 2 columnas aquí en estas 1ª 2 filas, - y esta sería la th la cabecera de la tabla que esta persona ha peinado de manera diferente, - por lo que está claro que este es el encabezado en la parte superior. - Tenemos un fondo gris de color más oscuro para indicar eso. - Entonces aquí está el nombre, - um, - como el primer th y paso de rosca en milímetros, - que está en contra de la medición para este producto en particular. - Y luego bajo eso tenemos el siguiente TR, - que es Table Road. - Todo este tipo de aquí es una mesa, - escribió esta primera barra gris claro. - Y dentro de eso tenemos un TD conformando esta primera columna, -que es M cuatro- que es el nombre del producto. - Y luego aquí abajo tenemos la medida para ese producto, - 0.7 milímetros. - Basta con mirar eso otra vez por un segundo. - Absorbiendo tomarlo. - Está bien. - Y entonces lo siguiente de lo que vamos a hablar son las formas. - Entonces vamos a estar agregando un formulario de contacto eso que el usuario pueda escribir un mensaje en el formulario -y enviárnoslo, - y se mostrará en nuestro correo electrónico. - De acuerdo, - así que en términos de html necesitará aprender algunos elementos de formulario para que podamos construir estos thes forma - campos de entrada para que el usuario pueda enviarnos información. - De acuerdo, - entonces El elemento de formulario está conformado por esta etiqueta de formulario abierto de apertura y cierre, - y se puede ver que hay dos opciones requeridas que hay que poner dentro de eso - la etiqueta de formulario de apertura allí. - Y este 1er 1 se llama Acción. - Por lo que la acción apunta a la ubicación del archivo o la ruta en su servidor que va a -aceptar la información que está esperando para recopilar la información o recolectar la información- que está enviando en este formulario. - Entonces, - por ejemplo, - en este caso particular, - hay una entrada para nombre de usuario y una entrada para contraseña. - Entonces digamos que escriben al usuario llamado Bob, - y escriben la contraseña papas fritas, - y luego hacen clic en un botón enviar. - Entonces siempre que esto por Miss presentada, - va a ir a la acción. - Y va a mandar esa información a este archivo en particular, - que se llama Iniciar sesión. - Entonces este registro y archivo en el servidor va a saber, - entonces para comprobar el ah, - va a comprobar el nombre de usuario y la contraseña contra una base de datos para ver si ese usuario existe - como ejemplo. - De acuerdo, - entonces para el nuestro y nuestro ejercicio más tarde, - vamos a estar construyendo un formulario de contacto, - así que será un poco diferente, - pero todavía tendremos una acción. - ¿Verdad? - De acuerdo, - Entonces la acción es esencialmente a donde se envía esta información. - Ahora, - el 2do 1 que tienes que tener aquí, - Um, - y estos pueden aparecer en cualquier orden que puedas escribir. - Método Primera acción en segundo lugar, - pero hay que incluir en algún lugar dentro de esa etiqueta de apertura, - inacción, - atributo, - y un atributo de método. - Entonces método en realidad estipula el método que envía esta información a esta acción - ubicación aquí. - Entonces hay dos principales con los que trabajarás. - Uno se llama get, - y otro se llama Post. - Um, - así que hazlo no esconde la información. - En realidad lo puedes ver escrito en la URL Cuando publiques usando cuando envías un formulario - usando el método get, - en realidad se anexará al Ural en la parte superior de la ventana del navegador. - Esos ah valores particulares, - esos parámetros y qué valor escribió la persona para su nombre y contraseña. - Entonces nunca querríamos usar get para algo que sea importante. - Al igual, - um, - como, - por ejemplo, - ya sabes, - información de tarjetas de crédito, - contraseñas, - cosas como esas que nunca quieres usar el método get. - Es mucho más común usar el post de método porque es seguro en el sentido de que, -bueno, - no está encriptado. - Pero es seguro en el sentido de que esta información esté al menos oculta. - No es visible en el encabezado http todo, - um, - y tampoco lo verás arriba en la parte superior de tu El Bar. - Entonces este es nuestro método preferido para cosas como Loggins o incluso nuestro formulario de contacto que vamos a construir. - Vamos a usar un método de post. - De acuerdo, - Así que la acción es, - ya sabes, - donde enviamos el archivo Post le está diciendo el formato que es o la forma tipo del - método para enviarlo ahí dentro de las etiquetas de formulario abriendo y cerrando formularios. - Entonces tenemos otro tipo de elementos que podemos colocar dentro de su um y vamos a echar- un vistazo a unos cuantos diferentes a medida que avanzamos. - Por lo que este 1er 1 aquí hablará se llama entrada. - Entonces este tipo tiene entrada, - tiene un tipo de texto, - por lo que cada entrada puede tener diferentes tipos. - Se puede ver este como un tipo de texto. - Esta tiene un tipo de contraseña, - um, - así que texto cuando escribes en una entrada de texto, - el usuario sólo ve las letras que están escribiendo. - Por lo que hacen clic dentro de la entrada y luego empiezan a escribir. - Ellos ven aparecer el texto. - Ahora, - la contraseña es diferente porque en realidad la contraseña, - Ves pequeños puntos. - Entonces cuando están escribiendo la contraseña, - si hubiera alguien que tal vez esté mirando por encima de tu hombro, - um, - es una biblioteca o algo así en un lugar público en una parada de autobús, - la gente mira por encima de tu hombro cuando escribes dentro de una caja de contraseñas con entrada con el - tipo de contraseña, - ven pequeños puntos para que en realidad no puedan ver las letras de tu contraseña o los números- de tu contraseña que estás escribiendo. - De acuerdo, - entonces eso es importante es especificar el tipo de entrada que es. - Incluso tenemos un tipo aquí abajo de Enviar, -que crea un botón que es un botón de enviar, - por lo que tenemos tipo texto tipo tipo contraseña mecanografiada. - Presentar esos aires unos cuantos. - Hablaremos de algunos más a medida que avanzamos. - Otra cosa realmente importante que debes hacer es agregar este atributo aquí llamado nombre Vale, - así que siempre que la persona escriba en esta entrada. - Digamos que escriben. - Se llama Bob, - y sometemos que va a publicar esa información en este expediente. - Entrar dot PHP. - Ahora, - cuando logging dot PHP recibe esa información, - el nombre Bob, - tiene que tener un con, - ah de identificar esa pieza de información entre la otra información. - Entonces vamos a estar enviando, - ya sabes, - nombre de usuario y contraseña. - Ahora le estén dando un nombre. - Ah, - como nombre de usuario o contraseña. - Lo que estamos haciendo es etiquetar esa información que estamos publicando en este expediente. - Entonces esto es básicamente un nombre de variable llamado nombre de usuario que almacena lo que sea - usuario, - ya sabes, - cualquiera que sea la persona que escriba el espectador del sitio, - Entonces escriben Bob y que ese texto string Bob se almacena dentro de esta variable o - este parámetro nombre de usuario, - que se publica para iniciar sesión dot PHP. - Entonces el nombre es muy importante. - Y por supuesto, - el nombre entre el diferente capataz pone tiene que ser diferente, - ¿Verdad? - Está bien, - um, - este tipo de aquí es Ah, - cosa divertida amigable que puedes hacer con formularios en HTML cinco es que puedes usar este atributo llamado - placeholder y lo que esto hace es que va a escribir algo en la forma y poner inicialmente así- puedes darle a la gente un indicio de lo que se supone que escriban su eso. - En realidad dirá nombre de usuario aquí. - Entonces el espectador sabe que se supone que escriben el nombre de usuario en este recuadro, - y luego cuando hacen clic dentro de la caja, - ese Marcador de posición desaparece, - y ahora sólo están viendo el texto ahí escribiendo tan a menudo veces el texto de placeholder - es gris y le indicará al usuario lo que se supone que escriba su. - Y luego cuando hagan clic dentro de la caja de puesta de capataz, - el color del texto se volverá negro a medida que empiecen a escribir su nombre de usuario. - Está bien, - y entonces tenemos tipo Enviar, - que mencionamos es un botón- y éste tiene también un atributo llamado Valor. - Y así etiquetamos el botón. - Esto realmente pondrá físicamente el registro de texto. - Escribirá ese texto en el botón que la gente ve en el navegador. - Por lo que estos airean algún otro tipo de entradas. - Miramos un tipo de texto antes de um, - también tenemos un tipo de contraseña, - que miramos antes de otro tipo que tenemos se llama T L, - que significa teléfono. - Como probablemente adivinaste, - una de las cosas bonitas del tipo dicen que es que es útil es que en realidad hay una ligera - diferencia si estás en, - Por ejemplo, - una tableta u otro toque Ah, - dispositivo móvil smartphone, - cualquier tipo de dispositivo táctil. - La mayoría de los navegadores ahora son compatibles que cuando ven un tipo de teléfono, - cuando el usuario, - um, - usa el dedo encendido como una tableta para hacer clic dentro de esa caja de entrada, - el teclado que aparece será un teclado numérico. - Por lo que es más fácil para ellos poner su número de teléfono porque son todos números en contraposición a - un tipo de textos. - Entonces cuando usted está en un dispositivo móvil o cualquier otro tipo de dispositivo táctil de tableta, - si hace clic dentro de una entrada con el tipo de taxi traerá la almohadilla Alfa, -que son todos los caracteres del alfabeto, - y luego cuando se hace clic en dentro de una caja telefónica, - trae números. - Está bien, - um, - también tenemos Esto es algo interesante. - Tenemos un tipo de oculto aquí, - vale, - tan oculto cuando pones un tipo de oculto, - te permite insertar un valor que automáticamente se envía en el formulario. - Esto es, - Ah, - situación hipotética. - Estamos diciendo, - Oh, - esta es la idea de usuario de una persona. - A lo mejor están iniciando sesión en su banco o para revisar sus acciones o algo así. - Y necesitamos saber cuál es el número de usuario. - Lo son, -por alguna razón- por lo que realmente podemos almacenar eso dentro de valor. - Entonces en lugar de que escriban esa información como estas otras cajas de entrada, - van Teoh, - se va a insertar automáticamente ahí para ellos, - y aún así le damos un nombre. - Esto tiene un nombre de I. - D. - Así que está almacenando este valor dentro de algo llamado I D. - Y como establece un tipo oculto, - no lo veremos físicamente. - Entonces esto no será visible en el formulario, - pero sigue pasando información a donde estés publicando este formulario. - ¿De acuerdo? - Y hablamos del tipo de entrada. - Presentar. - Esto también es algo útil de saber. - Si desea hacer una entrada de formulario requerida, - un HTML cinco. - Puedes usar esta palabra en particular al final de cualquier campo de formulario que quieras hacer requerido, - y solo escribes la palabra requerida, - que es un poco diferente a lo que hemos visto antes. - Normalmente, - estás colocando un valor en un atributo. - Esto es como simplemente colocar un nombre de atributo, - um, - al final aquí- y eso lo hará requerido, - que, - en realidad en el navegador lo hará en html cinco navegadores amigables, - es decir, - ya verás. - Aparecerá un ah pequeño mensaje, - indicando que ahora se requiere este formulario, - con el fin de darle estilo a los ojos esto O para que esto funcione en un navegador más antiguo, - tendríamos que abandonar requerido y probablemente usaríamos algo como JavaScript y - CSS Teoh validan el capataz pone e indican visualmente los campos requeridos. - Pero aquí, -si no somos muy quisquillosos con la forma en que luce, - podemos usar el html cinco requerido tributo aquí. - También contamos con entradas de radio. - Se puede decir radio tipo entrada, - y este es un ejemplo de cómo se ven. - Tienes estas pequeñas burbujas y puedes seleccionar ya sea masculina o femenina. - Entonces sólo es una cosa para la mayoría de la gente, -al menos probablemente no vas a sistema va a poder seleccionar a ambos en esta situación ahora- que estamos discriminando. - Por supuesto, - en esta situación, - probablemente vamos a seleccionar uno u otro, - ¿verdad? - Entonces lo que queremos hacer aquí para este botón de radio es que queremos asegurarnos de que tengan el - mismo nombre. - Entonces aquí está por los botones de radio. - Ambos tienen el mismo nombre de sexo. - Pero éste tiene un valor de varón, - y éste tiene un valor de hembra así. - Entonces si hago clic en macho, - entonces este parámetro o esta variable nombre sexo almacenará el valor de macho. - Y si hago clic en femenino, - va a anular eso. - Entonces de esta manera, - este nombre aquí sólo será igual a masculino o femenino. - Esa es la única posibilidad usando un botón de radio. - Entonces y esto sería indicado por cuando haga clic en esto. - Se iluminará de azul dentro de esa pequeña caja de radio. - También contamos con entradas de casilla de verificación. - Entonces, - como se puede ver, - podemos decir casilla de verificación tipo entrada. - Y aquí le dimos el nombre. - Um y tenemos valores diferentes. - Entonces podríamos decir, - um, - puedes marcar una casilla que diga que tengo bicicleta o puedes marcar una casilla que diga que tengo auto - tan bastante sencillo. - Le das un valor y le das un nombre y asegúrate de que tenga un tipo de casilla de verificación, - y luego puedes marcar esas casillas en un formulario. - Um, - si por alguna razón querías que se revisara automáticamente, - por ejemplo- a veces la gente astuta creará formularios que tengan una casita en la parte inferior que está - ya comprobada por ti. - Eso dice, - Regístrate a mi newsletter o acepta recibir cosas promocionales a tu correo electrónico, - algo así. - Entonces si quisieras, - por la razón que sea, - querías hacer que esta casilla se marque automáticamente mucho de la misma manera que usamos el atributo - requerido al final aquí. - También se puede escribir la palabra marcada como última cosa antes de esta mayor que símbolo o -este corchete angular de cierre aquí-, y eso hará que la casilla de verificación se marque automáticamente. - Cuando el usuario visita por primera vez el formulario, - también nos comprometemos menú desplegable seleccionar menús, - y eso es usar el elemento select. - Ah, - así que este de aquí le damos un nombre y luego anidado dentro de este elemento selecto. - Tenemos todas las diferentes opciones, - así que verías un pequeño bar como este y le darías click Y entonces cuando esto se abra - arriba, - podrías ver, - um, - pequeño, - mediano y grande, - y tendrías que seleccionar una talla allí. - Entonces la forma en que hacemos pequeños seleccionados inicialmente ya que se pueden escribir las palabras seleccionadas ahí, - al igual que la palabra marcada por marcar la casilla de verificación automáticamente en la palabra requerida para - requerir cualquier campo de formulario, - sólo se puede decir seleccionado si desea que pequeños se seleccionen automáticamente, - por lo que ese será el predeterminado en esa situación. - El área de texto es útil para cuando se tiene que poner en especie de múltiples líneas de texto o un - párrafo de información. - Si quieres que alguien realmente sea capaz de decir su mente, - um, - o, - ya sabes, - deja un comentario, - algún tipo de retroalimentación que va a ser de múltiples líneas. - Definitivamente vas a querer usar un área de texto en lugar de una entrada de texto. - Entonces esto sólo consigue un nombre, - y lo que sea que la gente escriba aquí se convierte en el valor. - Es bastante sencillo. - Entonces yo encuadre es lo siguiente de lo que vamos a hablar. - Vamos a insertar un Google Maps I frame en nuestra página de contacto para mostrar dónde se encuentra nuestra empresa de zapatos- . - I frames también se utilizan para, - a veces incrustar videos. - Esencialmente, - en cualquier momento que quieras cargar algún contenido HTML de algún otro lugar en un pequeño marco en - tu página Web, - puedes usar un ojo franco. - Entonces marco significa marco interior, - y eso es exactamente lo que es. - Es un marco dentro de tu página HTML. - Es como una ventana mirando a algún otro contenido HTML. - Entonces estamos agarrando algún H algún código en el sitio web de Google, - y lo estamos cargando en un pequeño marco en nuestra página Web en particular. - Entonces este es un ejemplo de un marco de ojos para que puedas usar I frames toe vinculado a otras páginas en - tu sitio. - Este es un ejemplo de, - ah, - sólo vincular a otra página dentro de nuestro propio sitio. - También puedes enlazar I frames con el contenido de otras personas. - Entonces algún otro tú Earl usando una chica absolutamente como http colon slash, - barra etcétera, - y podemos darle a esto un ancho y alto. - Um, - y también se puede especificar información sobre si aparecen o no barras de desplazamiento. - Si el contenido no encaja dentro del tamaño de tu marco, - sigamos adelante y pasemos ahora al siguiente ejercicio 11. Tablas: -para este próximo ejercicio, - vamos a estar agregando algún contenido adicional a nuestros diseños de página. - Se puede ver aquí que para este código de inicio para 1.2 tablas formas y I marcos. - Lo que he hecho es que he añadido es un poco extra de texto adicional y también he ido - a algunas de las páginas y también he añadido algunas imágenes ahí ahora. - Entonces siéntete libre. - Teoh, - mira el código de inicio y ve algunas de las cosas que he agregado. - Aquí hay alguna información de contacto y algunos enlaces, - Um, - y algunas imágenes nuevas. - Entonces lo que queremos hacer para estos ejercicios específicos, - vamos a entrar en la página de precios y vamos a añadir una tabla. - Eso va a ser ah gráfico de precios. - Y también vamos a entrar a la página de contacto y vamos a añadir un formulario de contacto. - Y también vamos a incrustar ubicación de Google Maps basado en el uso de un marco de ojos. - De acuerdo, - Así que para empezar, - has descargado el código y lo has descargado, - y lo has sacado a texto sublime. - Acabo de arrastrar la carpeta aquí y se pueden ver las cinco páginas que construimos para el último - ejercicio y lo primero que vamos a hacer es entrar en la página html de puntos de precios -. - Um, - y también se puede ver que he añadido algunos comentarios nuevos aquí en el código. - Entonces, - por ejemplo, - antes de tener este rubro aquí en los enlaces y he ido adelante y rodeado esto con- un comentario que dice que este es el inicio de una sección de encabezado en la página y este es - el final de un encabezado. - Por lo que esto eventualmente va a ser un bar en la parte superior de nuestro layout que tendrá el nombre de - la empresa y el enlace del dedo del pie de navegación entre todas las páginas. - Entonces antes de aprender sobre los diseños de construcción, - pensé que sería bueno Teoh tipo de show ustedes chicos hacia dónde nos dirigimos simplemente creando - algunos comentarios básicos para rodear las cosas. - Entonces esto me hace saber aquí que voy a estar poniendo en una mesa aquí mismo en esta sección de precio - gráfico. - De acuerdo, - Así como en las diapositivas, - aprendimos que el elemento de la tabla se utiliza para especificar una tabla. - Eso y luego podemos ir adentro de ahi, - y voy a endeudarme para mostrar dónde anidar y construyamos unas cuantas filas. - Voy a construir una fila de mesa aquí y construyamos otro camino de mesa justo debajo de ese. - Y parece que para este ejemplo, - realmente no tenemos que dejarnos llevar demasiado. - Pero creo que construiré tres o cuatro. - Lo haremos cuatro rosa de mesa. - Para que en realidad pueda copiar y pegar esto aquí así. - Ahí está mi mesa cuatro subió una aquí a tres y cuatro. - Está bien, - hasta ahora, - tan bueno dentro de aquí. - Vamos a tener un par de columnas diferentes. - Este 1er 1 vamos, - Teoh, - crear una columna que sostendrá el nombre de la marca del zapato. - Um, - así que voy a usar th que es cabecera de tabla sólo para esta primera fila en, - vamos a ver que aquí hay una columna llamada Brand. - Um, - Voy a hacer otra columna junto a esa llamada fijación de precios. - Tendrán el precio del zapato. - Ah, - vamos a ver. - Hará otro aquí llamado impuesto fiscal. - Está bien. - Y hará otra aquí para decir si está en stock o no. - Sólo escribiré en stock así, - y cerraré esa. - Ahora, - si estos aire más fácil de ver, - um, - si es más fácil entender lado a lado que estas columnas de Air se puede escribir de esta manera -. - Muchas veces la gente pondrá cada uno de estos en su propia línea porque entonces es un poco -un poco más fácil de ver um, - sin tener que desplazarse de lado. - Bastante Sfar. - Pero tiendo a ponerlos así. - Es por lo menos cuando lo estoy enseñando. - Me ayuda a entender que esto es una fila, - y esta es una columna porque está al lado de esta columna. - Pero también se puede, - Como dije, - se pueden hacer devoluciones de línea y se mostrará correctamente también. - Tortillas e Así que tenemos marcas de precios de impuestos en stock. - Y sigamos adelante y solo hagamos uno más Haré orden i d. - Así que haré un rumbo aquí y diremos orden, - I D. - Dice sería como un d. - Número que usarías para pedir zapatos, - supongo. - Y, - um, - hagamos a estos tipos usando la etiqueta T d así que sólo usamos th para el 1er 1 que es el cabeza- . - Um, - así que esta primera columna estaría debajo de la marca justo aquí. - Podemos desactivar el envoltorio de palabras, - así cuarto i d. - Sale de ahí. - Por lo que esta sería la primera columna bajo Brand. - Y tendré que maquillarme una marca funky. - Digamos, - um, - Fink Erstein es una marca ahí. - Y podríamos añadir otro televisor. - Éste sería, - um, - no te olvides de cerrarlo. - Este de aquí entre la etiqueta de cierre de apertura sería el precio. - Um, - por lo que estos aire bastante caros los harán $97.18. - Y para impuesto dirá que el impuesto está en una escala deslizante de, - um, - 15 centavos Teoh 30 centavos así. - Y lo siguiente que tenemos es si está o no en stock. - Entonces podríamos decir que sí, - está en stock. - Um, - bueno, - sólo pon un por qué. - Y entonces lo último que parece que tenemos aquí es algo llamado orden I d. - Está bien. - Y este orden yo d sólo va a conformar número. - Voy a decir 11. - El 70 es su orden. - I d. - Número. - Excelente. - Ahora, - um, - podría simplemente copiar esto y pegarlo abajo, - y podría simplemente cambiar la información para acelerar esto aquí arriba. - Sólo voy a destacar eso y podemos bajar abajo y pegar y voy a pegar esto otra vez, - y entonces yo sólo voy rápidamente en cambio estos valores aquí, - um, - ve la próxima marca hará a este tipo llamado Dolby. - Las esperanzas serán y Washington, - y vamos a cambiar el precio aquí. - Está bien. - Y éste será de 15 para simplemente cambiar el año fiscal a 15 a 32 centavos. - Um, - ¿estos tipos están en stock? - Um, - seguro. - ¿Por qué no esos Aaron stock También, - Y entonces cambiaremos el número de pedido aquí al final, - y sólo bajaremos y haremos un lanzamiento de producto más. - ¿De acuerdo? - Warby, - Brixton. - Y estos Esta marca en particular costó $111 y 42 centavos. - Hace tiempo que no me disparan a comprar zapatos, - así que ya no estoy seguro de cuánto le costaba. - Está bien, - bueno, - que éste sea igual y dirá que éste no está en stock ahí a popular dirá que no. - Y entonces, - um, - por su número particular sólo va a hacer algo. - Dirá 11. - 78 A. - Está bien, - Perfecto. - Entonces seguiré adelante y guardaré esto, - y aún no hemos usado ningún CSS. - Todavía no vamos a darle estilo a esta mesa. - Eso haremos en un ejercicio posterior, -así que sólo vamos a ver los datos crudos, - pero aún así debe organizarse en filas y columnas. - Podemos guardar y volver aquí a nuestro navegador y sigamos adelante y navega esa página. - Esa es la página de precios, - y ahí se puede ver mi mesa. - Entonces esto se verá mucho más bonito cuando nosotros cuando le demos a estos algunos colores, - cada una de estas celdas un color diferente y le agregamos algunos bordes y cosas y espaciando a su alrededor -. - Pero por ahora, - ojalá esto te dé una idea de cómo organizar la información que puedes ver aquí. - La palabra marca, -que es un encabezamiento, - está centrada, - pero todo el texto TD es por defecto. - Es algo más en el lado izquierdo de la celda, - pero sigue organizando estos en columnas iguales como esa y Rose. - Entonces esto son cuatro filas. - 1234 y 12345 columnas. - Sigamos adelante y volvamos a ver el código, - sólo por un momento para absorber todo eso. - Está bien, 12. Iframes: - así que sigue adelante. - Lo siguiente que queremos ver es que queremos ir a la página de contacto y queremos -entrar aquí a la página de contacto, - y queremos agregar dos cosas. - Vamos a añadir un mapa en un formulario. - Seguiremos adelante y empezaremos con los mapas de Google incrustados de Thea usando un marco de ojos, - algo para entrar aquí donde dice entre, - ya sabes, - mapa y mapa final en mi código. - Está en línea. - 24 aquí debería ser por años también. - Y lo primero que quiero hacer es ir a Google y agarrar un mapa para poder ir a maps dot - google dot com y tecleemos la dirección de nuestra empresa. - Podría estar en cualquier lugar. - Um, - digamos, - um, - bueno, - diremos, - Ah, - Hoboken sobre ese Hoboken, - Nueva Jersey, - y probablemente para su negocio, - pondrías en una dirección real. - Sólo voy a poner en este lugar y debilitarme, - básicamente acercar para que esto se vea como lo que queremos aquí. - Acercaré un poco más y luego centraré este pequeño A aquí que tiene esta bandera así -normalmente encontrarías tu negocio, - y luego lo seleccionarías, - Vale. - Y entonces lo siguiente que queremos hacer es que queremos poder Teoh, - capturar esta información y embebido eso al menos al momento de filmar esto, - um, - Google tiene un enlace aquí en la esquina superior izquierda. - Y si haces clic en ese enlace, - lo primero que hace es tratar de darte un enlace al que puedes enlazar en la parte superior aquí- . - Si miras aquí abajo en la sección inferior, - dice pegar html para incrustar en un sitio web, - y te dan un marco de ojos aquí. - Si quieres personalizarlo y ajustar la configuración de este marco, - tu mejor apuesta es hacer clic en este enlace aquí que dice personalización de vista previa, - mapa incrustado y que aparecerá una pequeña ventana como esta. - Y se puede ver aquí que se puede seleccionar pequeño, - mediano, - grande, - o se puede poner en una costumbre específica con y alturas. - Um, - así que esto está bien. - Sólo dejaremos aquí los predeterminados, -que es, - um, - medio, - que es 4 25 por 3 50 Eso está perfectamente bien para el ancho y la altura por ahora. - Y lo que vamos a estar haciendo más adelante es cuando empecemos a entrar en nuestros outs responsivamente -para diferentes dispositivos- vamos a cambiar realmente el ancho de esto-, dependiendo del dispositivo. - Entonces por ahora, - sólo seguimos adelante y usamos esta configuración predeterminada aquí. - También se puede cambiar entre la vista por satélite y la vista de la Tierra y la vista del terreno. - Voy a seguir adelante y seleccionar vista del terreno porque eso me gusta. - ¿Por qué no? - Y luego si bajamos aquí, - se puede ver que hay código que se puede copiar y pegar en esta sección aquí para que yo pueda - resalta todo esto. - Es bastante, - en realidad. - Um, - todo este código todo el camino desde aquí hasta aquí-, y luego lo copiaré. - Voy a dio comando ver en Mac para copiar o controlar ver en ventanas. - Y luego voy a volver aquí, - y puedo pegar esto y aquí voy a hacer el comando V en Mac, - que es, - por supuesto, - controlar V en ventanas y pegar a ese chico malo ahí dentro. - Para que eso arroje el marco I, - y podemos guardar esto y volvamos al navegador y comprobemos eso y veamos si tuvimos - alguna suerte. - Es ese tipo. - Entonces si hice esto correctamente, - debería ver ese mapa emergente. - Volvamos aquí y vayamos a la página de contacto, - y ahí es impresionante, - para poder mostrar la ubicación. - La gente puede hacer clic en esto y mover esto. - Pueden seleccionar direcciones. - Pueden utilizar estas herramientas para acercar y alejar y moverse por el mapa. - También puedes hacer clic en un enlace que aparece a continuación. - Esto es ver mapa más grande, - que los llevará a los mapas de Google. - De acuerdo, - tantos sitios te dan la capacidad de usar I frames para incrustar contenido. - Otros ejemplos son YouTube. - Puedes incrustar videos de YouTube vía, - y enmarco solo copiando y pegando el código. - Proporcionan video así como otro buen sitio para agarrar el contenido del video, - pegarlo en tu sitio. - Um, - y hay todo tipo de widgets para Twitter y foursquare en todo tipo de sitios sociales. - De acuerdo, - así que volvamos al código ahora. 13. Formularios: - Está bien, - así que a continuación vamos a crear un formulario de contacto y ya puedes ver que ya he creado algunos - comentarios en el código aquí para mostrar a dónde va eso. - Así que entra justo entre esos dos comentarios en línea, - 30 allí- y empezaremos con nuestro elemento de formulario, - que es una etiqueta de formulario de apertura y cierre como así Ahora, - dentro de la etiqueta de formulario de apertura, - tenemos para tener dos atributos. - Tenemos que precisar nuestro método, - que va a ser post. - Y lo siguiente es la acción, -que es el archivo que está recibiendo lo que se presente en el formulario ahora-, sólo voy a poner el hashtag o el símbolo de libra ahí. - Eso es sólo cambiar el número tres. - Esto se supone sólo para ser un positor. - Incluso podrías realmente dejarlo en blanco si quieres. - Um, -así más adelante en un ejercicio futuro, - vamos a apuntar esto hacia un archivo específico en el back end que va en realidad- procesar este formulario y enviar un correo electrónico a la persona deseada. - Entonces en este caso, - sólo estamos mapeando sólo el front-end. - Sólo estamos haciendo el HTML involucrado en poner en marcha este formulario. - Entonces por ahora, - realmente no tenemos que preocuparnos por la acción. - Sólo vamos a dejar esto, - um, - como una especie de Ah, - Marcador de posición. - Está bien, - así que dentro de este formulario aquí- me gustaría poner algo de información me gustaría crear un par de entradas, - Um, - para que la gente pueda poner a su nombre, - su correo electrónico, - su teléfono número, - y también un breve mensaje para mí, - y luego haga clic en el botón Enviar. - Entonces me gustaría ponerlo en poner aquí se pueden escribir, - y le voy a dar a esto un tipo de texto porque quiero que le pongan algunos caracteres alfabéticos- . - Yo quiero que puedan escribir aquí su nombre. - Entonces es importante que también dé esto en nombre para que cuando esto cuando se presente el formulario -envío- pueda almacenar esa información en algún tipo de nombre. - Um, - y aunque suene redundante, - en realidad voy a llamarlo nombre porque eso es lo que están escribiendo su le estoy dando esto- ingrese un nombre de nombre. - Um, - Y la razón por la que es esto es su nombre de usuario. - Este es el nombre de la persona que está enviando correo electrónico, - en realidad. - Es una mejor manera de describir eso. - Y éste, - también vamos a dar texto de marcapasos. - Digamos Marcador de posición, - y vamos a decir, - um, - tu nombre. - Bueno, - di tu nombre. - ¿Verdad? - Para que sepan que su nombre va ahí. - Um, - ¿cómo hacemos que esto se requiera? - Eso es correcto. - Decimos requerido escribimos la palabra requerida al final ahí así. - Creo que me quitaré el envoltorio de palabras. - Simplemente desplázate un poquito así. - Está bien. - Y luego bajaremos a la siguiente línea y creemos otra entrada, - y vamos a darle a éste un tipo de correo electrónico. - De acuerdo, - Entonces, - um, - tipo de correo electrónico es bastante útil cuando realmente estás tratando de obtener el correo de la persona. - ¿Y la razón por la que es eso en html cinco navegadores compatibles? - Validará si en realidad es una dirección de correo electrónico o no, - y evitará que se envíe. - Si alguien escribe algo ahí dentro que no se parezca a una dirección de correo electrónico de algún tipo. - Está bien, - Y tal vez, - ya sabes, - tal vez debería requerirse el correo electrónico porque queremos usar esto es como un correo de contacto. - ¿Y cómo vamos a saber a quién enviar un mensaje de vuelta a menos que sean capaces de meter eso? - Está bien, - hagamos otra entrada aquí. - Y éste, - vamos a hacer un tipo diferente. - Dirá que éste es un tipo de tell que trae hacia arriba el No, - el pad numérico en diferentes dispositivos. - Al hacer clic dentro de esta entrada, - debería subir la almohadilla numérica diciendo tipo teléfono- y le daremos un nombre a este tipo también y para asociarlo y diremos, - el teléfono es como nos preocupamos. - Eso y luego diremos placeholder y para lugar viejo aquí dirá teléfono, - Y también les mencionaremos en el placeholder que esto es opcional. - Realmente no tienen que decirnos esto a menos que quieran. - Está bien, - y vamos a ver. - Entonces, en realidad, - eso es todo. - Después de tener teléfono de nombre, - correo electrónico y luego después de eso, - queremos que puedan poner en su mensaje. - Entonces lo que voy a hacer es crear un área de texto como esa es usar el texto de apertura y cierre - etiqueta de área como así y luego dentro de esta área de texto. - Voy a decirle lo alto que debe ser. - Diré que debe ser por lo menos 10 filas de texto. - Ya sabes que podrías golpear retorno 10 veces 10 filas de tipo cabrán antes de que tengamos una barra de desplazamiento - para aparecer, - Um, - y le daremos a este tipo y nombre también dirá nombre igual mensaje. - Muy bien, - Y entonces, - por último, - vamos a sumar en una entrada con un tipo de enviar y eso nos dará nuestro botón de enviar. - Y con el fin de etiquetar el botón para que podamos leer algún texto sobre él escribirá la palabra enviar encendido- el botón así, - y eso debería estar bien para ir. - Vamos a darle a esto un guardado y volvamos al navegador y refresquemos Awesome. - Y aquí tenemos el mapa I frame y luego abajo del formulario que acabamos de crear. - Entonces si me acerco este año, - se puede ver que es Aún no está estilizado. - Um, - vamos a embellecer esto y hacer que se vea encantador más tarde, - usando CSS. - Pero por ahora, - es sólo una especie de este genérico como, - forma apilada horizontalmente para que podamos hacer clic dentro de aquí- y podemos escribir un nombre. - Mi nombre es Bob. - Puedo dar click dentro de correo electrónico. - Se puede ver el texto del positor ahí desaparecería cuando escribo, - y podemos decir que mi correo es bob at bob dot com. - Los números telefónicos opcionales, - así que no tengo que teclear eso. - Si quisiera, - sería algo así, - supongo. - Y entonces puedo escribir un mensaje como Hola? - Algo así. - Um, - ahora, - algunos de estos campos un requerido, - por ejemplo, - si no escribo un nombre y trato de dar clic en enviarlo dice, - por favor llene este campo. - Entonces esto es ese html cinco amigables atributo requerido que colocamos dentro hay - diciéndome que tengo que llenar esto antes se presentará. - Y otra vez, - si quieres poder estilizar esto un poco más, - um, - probablemente vas a terminar usando algo como JavaScript o J coury plug en estilizadas - estas formas, - que no vamos a pasar en esta clase, - pero tal vez en una clase futura. - Está bien, - así que aquí tenemos nombre va a llenar eso otra vez. - Hagamos ésta que ésta tiene dos cosas yendo para su validación. - Número uno que hemos requerido. - Entonces si no escribimos nada y debería decir que se requiere si también ponemos un correo electrónico - dirección, - eso no tiene sentido. - Como si me pongo como, - um, - falso fuera falso fuera sucka. - Y luego tratamos de mandar esto. - Dice, - Por favor, introduzca una dirección de correo electrónico. - Entonces tenemos que poner algo así como bob en bob dot com. - Supongo que se puede fingir todavía, - pero es un poco más de trabajo. - Y luego cuando presentemos, - publicaría esta información en el formulario al expediente específico que enumeramos en la acción- . - Atributo. - De acuerdo, - entonces en este caso, - acabamos de poner un símbolo de libra es un positor. - Entonces cuando hago clic en enviar, - en realidad sólo refresca la página. - En realidad no pasa nada ahí. - Pero como dije un poco más tarde, -en un ejercicio futuro, - vamos a todos al menos darles algunos back end para hacer esta función. - Entonces a continuación vas a querer pasar al siguiente reto de código e implementar estos nuevos - elementos que has aprendido en tu nuevo sitio. 14. Video: - Hola, - chicos. - Este es Ejercicio 2.1, - y ya he descargado los archivos aquí El código fuente, - y notarás que si miras dentro de la carpeta que hay unas cuantas cosas extra - aquí que no existían antes. - Por lo que aún tenemos las mismas cinco páginas HTML en nuestra carpeta Imágenes. - Pero algunas cosas nuevas son ahora la carpeta CSS. - No vamos a hacer mucho con CSS en este ejercicio. - En el próximo ejercicio estará aprendiendo los fundamentos del CSS y cómo funciona en este - ejercicio. - Sólo vamos a estar haciendo uso de un script CSS pre escrito que va a ayudar a nuestro HTML - cinco elementos funcionan en todas partes. - Entonces aprenderemos un poco más sobre esto en unos próximos ejercicios. - Por lo que también vamos a imponerle un video en este ejercicio. - Por lo que también he proporcionado para ti una carpeta de video que tiene una grabación. - Se parece a esto del artista Larry Hale tocando una canción, - Zapatos Azules. - Entonces tenemos ambos formatos aquí. - Tenemos un expediente MP cuatro, - y también tenemos un archivo O. - G. - G. - V. - Por lo que esto debería funcionar en todos los diferentes navegadores. - Está bien, - así que para empezar. - Podemos arrastrar esos archivos aquí al texto sublime, - que se puede ver que ya lo he hecho. - Y voy a hacer doble clic en la página html de punto índice. - Esta es la única página que vamos a necesitar para trabajar en la que vamos a estar trabajando - este ejercicio. - Entonces para empezar con, - vamos adelante y vamos a bajar a la sección de la página donde nos gusta agregar nuestro video y -voy a bajar aquí Teoh Line 44 en la sección de esquina del artista y vamos a seguir adelante- y empezar agregando la etiqueta de video de apertura y voy a añadir la etiqueta de video de cierre allí también- bueno. - Ahora la etiqueta de video de apertura. - En realidad puede aceptar algunos nombres de atributos especiales. - Entonces para pasar en una opción, - se pueden decir cosas como controles. - Um, - y sólo puedes dejarlo como un video. - Pero si dices controles como este, - entonces lo que sucede es cuando se carga la página, - automáticamente hará el valor predeterminado. - Los controles de video serán visibles en contraposición a que se oculten los controles. - Um, - algunas otras opciones que podrías pasar aquí hay cosas como auto play, - Por ejemplo, - puedes especificar si quieres que se reproduzca automáticamente o no. - Y también hay bucle. - Se puede activar el bucle diciendo Loop para este video en particular. - No lo quiero en bucle del dedo del pie. - Yo sólo quería jugar una vez encendido- y tendrían que volver a hacer clic en play si quisieran jugar una segunda vez. - Y en cuanto al auto play, - no soy un gran fan del auto play porque a veces atrapa a los usuarios desprevenidos si van a -tu página y escuchan video reproduciendo en algún lugar y no están muy seguros de dónde está el video- . - Entonces voy a seguir adelante y dejar que el usuario encuentre el video y haga clic en el botón de reproducción ellos mismos -. - Si les interesa verlo. - Creo que dejaré controles ahí dentro porque quiero asegurarme de que mis controles sean siempre -visibles. - Está bien, - ese es un buen comienzo. - Entonces lo siguiente que necesitamos hacer es enlazar a nuestros archivos de video fuente, - y se pudo ver que creé las carpetas de video que mencioné antes y dentro de eso - carpeta tienen dos archivos Zapatos azules y P cuatro y zapatos azules dot gv, - por lo que solo seguiré adelante y comenzaré creando el elemento fuente ahí, - y usaremos el atributo SRC dos puntos hacia la ubicación específica del archivo. - Entonces en este caso, - aquí estoy en la página html de punto índice y tengo que decirle al navegador exactamente dónde existe este - archivo de video. - Entonces recuerda cuando estábamos vinculando dos imágenes, - tuvimos que decirle al navegador un navegador. - Sé que estamos en la página del índice, - y quiero que entren dentro de la carpeta de imágenes y muestren una imagen en particular. - Lo mismo con los videos, - los videos se transmiten en su propia carpeta. - Entonces tengo que decirle al navegador primero entrar a la carpeta de video diciendo video slash como - eso. - Y luego le voy a decir que juegue azul subrayado zapatos dot mp cuatro así como eso. - Y también especificaremos el tipo Videophile aquí es video slash mp cuatro. - Está bien, - perfecto. - Entonces esto va a funcionar para todos mis dispositivos de safari, - ¿verdad? - Al igual que, - uh, - computadoras Mac, - iPads, - iPhones e Internet Explorer va a ser atendido con esta primera etiqueta fuente. - Está bien, - Así que para otros navegadores como Firefox, - chrome, - etcétera, - voy a necesitar enlazar a ese otro formato de video. - Entonces el otro se llama video slash blue underscore shoes dot org v y el archivo - tipo aquí es video slash o. - G es el nombre de la Kodak allá. - De acuerdo, - así que la razón por la que el Kodak se llama Ogi Theo ra y um o g tiene Códice para este formato puede - ser tanto de audio como de video. - Um, - tan a veces, - sin embargo, - para la extensión de audio, - verás oh dot org. - Y, - um, - ocasionalmente veré un video con esta extensión de archivo. - Pero la mayoría de las veces, - la gente nombró a la extensión del video como punto gv de ahí por qué esto es diferente aquí. - Esto es slash O g y los archivos de video. - 00 gv. - Pensé que mencionaría eso en caso de que ustedes estuvieran confundidos sobre eso. - De acuerdo, - así que aquí es donde entra en juego la solución de retroceso. - Entonces para navegadores más antiguos que aire no soportan los elementos de video um, - Podría incrustar algún flash. - Podría descargar un reproductor de video flash gratis si quisiera. - Y pon eso aquí. - Creo que lo que voy a hacer es simplemente escribir algo aquí. - Y esto esto sólo va a voy a escribir un mensaje al usuario aquí. - Y este mensaje sólo va a aparecer si por alguna razón, - el punto dolorido uno de estos archivos fuente no se carga. - Entonces en otras palabras, -si no pueden reproducir el vídeo- van a ver este mensaje. - Entonces solo voy a decir, - um, - que su navegador no soporta HTML cinco video periodo y será lo más educado que podamos, - así que diremos por favor actualiza tu periodo de navegador. - De acuerdo, -incluso podemos ser un poco más amables, - y en realidad podemos darles un enlace a donde puedan actualizar su navegador. - Entonces vamos a seguir adelante y envolver un enlace alrededor de este texto aquí que dice, - Actualiza tu navegador para que cuando hagan clic en la actualización de tu impuesto de navegador, - eso los llevará a ah, - sitio web amigable. - Eso les va a dejar descargar como una versión más reciente de Internet Explorer o una más reciente -versión de Firefox o safari, - si eso es lo que necesitan. - Entonces como ustedes recuerdan, - usamos la etiqueta A para crear un enlace. - Entonces si rodeo así a este tipo, - puedo hacer la apertura y cierre una etiqueta alrededor del texto que quiero ser. - El enlace, - que es actualizar su navegador y luego dentro de la apertura una etiqueta. - Puedo especificar a dónde enlaza, - así que voy a seguir adelante y decir, - um H ref, - Y hay un sitio realmente genial que me gusta usar, - que es en http colon slash, - slash y se llama. - Es bastante fácil de recordar. - Se llama navegar happy dot com, - y se puede ver a dónde les llevaría esto. - Déjame copiar esto y a través de esto en mi navegador muy rápido. - Sólo vamos a seguir adelante y ritmo eso. - Así que navegar happy dot com te lleva a esta página donde puedes llegar a la versión más reciente de - cualquier navegador que estés buscando y lo puedes ver siempre muestra la última versión - número aquí abajo. - De acuerdo, - para que la gente pueda elegir, - ya sabes, - un navegador en particular si hay cómodo con él. - Entonces a diferencia de vincularse a flash, - um, - vamos a seguir adelante y sólo darles acceso a actualizar su navegador, - lo que espero que lo hagan. - Está bien, - um, - añadamos también una Lo último es, - no quiero que salgan de mi sitio web. - Quiero mantener abierta la pestaña de mi sitio web. - Por lo que al decir subrayado Blank. - Te acuerdas que este objetivo de atributo y un valor de Subrayar en blanco lo harán - que cuando hagan clic en este enlace, - se abrirá una nueva ventana del navegador. - Entonces voy adelante y guardo eso. - Está bien, - así que vamos a probar a este tipo en el navegador. - Entonces puedo traer este código aquí y sólo arrastraremos y soltaremos a este tipo en cromo. - Entonces estamos aquí en la página del índice. - Sólo tiraré eso ahí dentro. - Enfriar. - Está bien, - así que aquí está, - um, - mi encabezando mis imágenes. - Y aquí abajo, - si me desplaza hacia abajo, - esta es en realidad mi sección de artista en la página y puedes ver los controles del navegador son - mostrando y puedo hacer clic en jugar Awesome. - Gracias, - Larry. - Entonces ese es Larry tocando su guitarra, - y resulta que funcionó. - Buen trabajo. - Y esto te puedo asegurar esto va a funcionar en cada navegador diferente. - Se puede seguir adelante y probarlo. - Este tipo trabajará en todos los diferentes dispositivos. - Está bien, - Sólo moveremos eso fuera del costado por un segundo, - volveremos a saltar al código. - Entonces así es como incrustarías video. - Y por supuesto, - si estás incrustando audio sería el mismo proceso excepto que utilizarías la etiqueta de audio - en lugar de video y para el archivo fuente. - Por supuesto, - estarías vinculando a un, - uh, - un archivo de audio como un MP tres y un O G. - Algo así. - Y yo solo estoy de la misma manera que existen soluciones JavaScript para hacer un solo - archivo de video trabajo y todos los diferentes navegadores. - También hay trabajo reproductores Js, - reproductores de JavaScript para elementos de audio también, - por lo que te puede interesar echar un vistazo a eso. 15. Preparación para HTML5: - Está bien. - Entonces para la siguiente parte del ejercicio, - vamos a seguir adelante e incluir algunas HTML cinco etiquetas semánticas en nuestro diseño. - Entonces el primer paso es elaborar nuestro documento para navegadores más antiguos. - Así que a pesar de que ya sabes, - como miramos en las diapositivas, - la mayoría de los navegadores modernos admiten HTML cinco etiquetas semánticas, - sin embargo, - ciertas versiones anteriores de, - um Firefox safari y chrome y más antiguos versiones de Internet Explorer como Internet Explorer - ocho y abajo. - Um, - No tengo ningún apoyo. - En realidad están creados antes de que se creara HTML cinco por lo que no tienen soporte para esos - etiquetas semánticas ahora. - En realidad es bastante indoloro y sencillo agregar ese soporte. - Entonces lo que podemos hacer es que podemos entrar a la sección de cabeza aquí, - y lo primero que vamos a hacer es que vamos a agregar apoyo para fuego, - Fox, - chrome y Safari. - Y lo vamos a hacer vinculando a un archivo CSS, - y vamos a aprender mucho más sobre, - um, - CSS en próximos ejercicios. - Pero por ahora, - simplemente vamos a enlazar a algún código CSS pre escrito que ayudará a estos elementos- . - Es html cinco. - Los elementos semánticos se muestran correctamente en todos los diferentes navegadores, - entonces Lo primero que quiero hacer es que queremos crear un enlace aquí en la parte superior de la página, - y este enlace va a apuntar hacia el archivo CSS de punto normalizado que he incluido para - tú. - Entonces tengo que añadir un par de atributos aquí. - El 1er 1 que quiero agregar se llama R E L. - Que significa relación. - Esto dice esto, - le dice al navegador el tipo de enlace, - la relación del enlace, - y vamos a decirle que esta es una hoja de estilo es el tipo de enlace, - y también tenemos que apuntarlo hacia un ubicación. - Por lo que utilizamos un borrador de dos apuntan esto hacia la ubicación específica del archivo. - Ahora, - Te di unas carpetas CSS. - Tenemos que decirle al navegador que entre a la carpeta CSS porque después de todo, - estamos en la página de índice aquí. - Entonces tenemos que decir, - Hey, - navegador, - ir de la página en la que estamos, - que es Index, - entrar a la carpeta CSS así y cargar este archivo que se llama normalizar dot CSS. - De acuerdo, - así que si tuviéramos que ver normalizado ese CSS, - en realidad hay todo un lío de codificación aquí todo un montón de código que implica usar CSS - estilo y todos estos estilos CSS. - Su propósito principal es hacer que el texto y los elementos se muestren igual en todos los - diferentes navegadores. - Y hablaremos un poco más de eso más adelante cuando cubramos CSS. - Pero lo principal que queremos usar este archivo está justo en la parte superior de la página. - Aquí se inicia en línea. - 10. - Entonces no te preocupes si aún no entiendes todo el código CSS, -definitivamente vamos a volver a esto en una fecha posterior- y vamos a describir en detalle cómo funciona todo esto. - Pero aquí arriba hay dos secciones importantes. - Um, - y esta primera parte aquí básicamente está corrigiendo la forma en que las cosas se muestran en los navegadores más antiguos. - Entonces esta es una lista de todas las cinco etiquetas semánticas HTML comunes que usarás de vez cuando para el diseño. - Y tenemos que decirle al navegador que muestre estos de una manera particular. - Vamos a entrar más detalles más adelante sobre las diferentes formas de mostrar elementos. - Pero esencialmente display Block le dice al navegador que estos elementos deben mostrar ah - vertical uno encima del otro y que no deberían poder mostrar uno al lado del otro. - Esto les dará espacio físico y los hará mostrar como una caja, -básicamente como un bloque de la página donde no podrán caber uno al lado del otro -. - Cuando pones uno en una línea en particular que ocupará toda la línea. - Y también tenemos tu corrección para el lienzo de audio y los elementos de video son elemento - aquí se mostrará en bloque de línea, - lo que significa que tendrá algunas características de un elemento de bloque, - pero en realidad podrá pantalla lado a lado con elementos. - De acuerdo, - así que no te preocupes por no preocuparte demasiado por eso. - Vamos a volver cuando discutamos modelo de caja, - y vamos a explicar con más detalle qué significa la pantalla y cómo funciona esto. - De acuerdo, - así que no quiero tocar demasiado CSS en este punto. - Todo es, - realmente tienes que entender es que al enlazar a este archivo CSS pre construido normalizado dot - CSS, - esto permitirá Firefox safari y chrome versiones antiguas de esos navegadores para mostrar estos - estos HTML etiquetas semánticas correctamente Vale, - para que eso cuide a todos. - Excepto Internet Explorer. - De acuerdo, - Así que mencioné en un, - uh supongo en las diapositivas anteriores que para Internet Explorer, - podemos incluir un archivo JavaScript que permita HTML cinco elementos toe trabajar en una versión antigua de IE. - Por lo que Internet Explorer 87 y seis y abajo no admiten html cinco elementos. - Entonces tenemos que decirle básicamente al navegador. - Oye, - navegador. - Si resulta que eres Internet Explorer, - por favor, vincula al guión. - De acuerdo, - así que vamos a salir un anuncio en una etiqueta de guión para que podamos decir guión. - Y esta es la etiqueta que usaremos Toe link a archivos JavaScript tiene una etiqueta de apertura y - cierre así. - Y aquí en realidad eres libre de escribir JavaScript. - Si quieres. - En esta sección, - en realidad vamos a estar usando el script tag toe link a un archivo javascript externo. - Y usamos el SRC El atributo fuente dos apuntan hacia eso. - Um, - no, - este tipo de eslabones, - ya sabes, - eventualmente, - puede memorizar esto, - pero más a menudo de lo que sabes, - más probable es que estés va a estar enlazando a ella vía Google. - Entonces si vas a Google y escribes en HTML cinco XM, - se va a llegar a un enlace como este, - que es que por casualidad sé es en http colon slash slash html cinco XM dot google code - dot com slash SV y slash trunk slash slash html five dot Js Sé que eso es, - Ah, - eso es más o menos un bocado, - Pero si te vinculaste a esto, - este archivo aquí hará que HTML cinco elementos funcionen correctamente en Internet Explorer. - De acuerdo, - en versiones anteriores de Internet Explorer, - Internet Explorer nueve y superiores, - ¿ya soportas estos elementos? - Ahora este lo hace funcionar para versiones antiguas de Firefox, - chrome y Safari. - Este está en Lee para Internet Explorer ocho y abajo. - Entonces, ¿no estaría bien si solo pudiera decirle al navegador solo que use éste si lo fuera - ¿Internet Explorer? - De esa manera, - no estoy perdiendo tiempo de carga, - así que si soy Firefox, - ni siquiera va a molestar cargar con el dedo este. - Eso sería genial, - ¿verdad? - Entonces resulta que en realidad podemos hacer eso porque hay algo llamado declaración if -y si condicional- que existe en Internet Explorer. - Por lo que Internet Explorer tiene de manera única la capacidad de reconocer este particular si es condicional. - Entonces la forma en que hacemos que otros navegadores ignoren esto mientras empezamos como si estuviéramos escribiendo un - comentario en el código. - Entonces decimos, - ya sabes, - como, - um ah, - menos que símbolo, - signo de exclamación, - guión, - guión así. - Y luego aquí abajo, - tendríamos un comentario. - El comentario terminaría así. - ¿Verdad? - Um y entonces lo que tenemos que hacer es para que Onley Internet Explorer procese este código - aquí en este comentario es que creamos un condicional usando corchetes así que usamos corchetes, - que es, - um, - es justo a la derecha de la letra p en tu teclado. - Entonces quieres ir justo a la derecha de la letra p en el teclado y quieres hacer abierto - corchete cierre Ahora, - dentro de estos corchetes, - podemos escribir una declaración y si condicional, - debilitar, - Di si y queremos decir Ah, - Significa menos que y vamos a decir si menos que Internet Explorer versión nueve. - En otras palabras, -si son ocho o algo por debajo, - entonces vamos a hacer el código aquí. - De acuerdo, - Entonces la forma en que conseguimos que esto trabaje es que vamos a hacer un signo de exclamación y mayor - que símbolo así. - Um y esto terminará con éxito la declaración if aquí así. - Y luego aquí abajo, - sólo necesitamos agregar otro conjunto de corchetes y empezaremos diciendo mayor que - signo de exclamación, - Soporte abierto, - soporte cerrado como ese y dentro de aquí, - vamos a poner las palabras Y si y eso va a terminar la declaración if sé que esto es una especie de -algo desordenado mirando aquí- pero lo que pasa es que el navegador baja y si el navegador es Firefox o chrome o - safari, - parece que todo esto es un comentario. - Es como si esto fuera solo algún comentario en el código. - Al igual que tengo un comentario aquí que me dice que esto es un encabezado y un común aquí arriba que es - diciéndonos el ejercicio específico estaban en, - Así que simplemente ignorará todo esto ahora. - Por otro lado, - si esto es Internet Explorer ocho, - um, - en realidad, - si su Internet cualquier versión de Internet Explorer, - va a leer el si condicional, - entrará y dirán que esto es un comentario. - Habrá como abierto No, - no es un comentario. - En realidad, - aquí hay corchetes, - y así es como conseguimos que el Onley Internet Explorer lea esta sección en particular de la página -. - Entonces se va a decir si menos de Internet Explorer nueve, - entonces se va a ejecutar este guión. - Se va a enlazar a ese archivo de guión. - Y entonces decimos, - Terminar si aquí para terminar esa declaración condicional. - Está bien, - así que realmente, - estas dos líneas de código esta vinculando a este CSS normalizado y me estoy vinculando a esto - archivo JavaScript son todo lo que necesitamos para que HTML cinco elementos funcionen e incluso el más antiguo, - la mayoría navegadores antiguos. 16. Elementos semantic de HTML5 de HTML5: Por lo que ahora nuestras páginas listas, Podemos escribir estas html cinco etiquetas semánticas y todos los navegadores las van a ver. Entonces el 1er 1 que quiero hacer es quiero hablar del encabezado. Por lo que mencionamos el encabezado va en la parte superior de la página aquí. Típicamente, aunque no tiene que hacerlo. Pero esta es una etiqueta con la que vamos a rodear el concepto, Like, esto dirá encabezado de barras de encabezado abierto. Entonces ahora que he rodeado esta sección aquí de código, voy a ir en den. Entonces resaltaré este código aquí y les mostraré aquí un atajo. Entonces si resalta una sección de código si escribes la tecla tabulación, sancionará ese todo, esa sección entera para ti. También puedes usar comando, uh, uh, abrir corchetes y cerrar corchetes para mover este tipo en Mac. O puede usar el control de soporte abierto y cierre de corchete en ventanas. También puedes ir a cada línea y simplemente presionar la tecla tabulador si quieres. Entonces solo para mostrar anidación, me gusta inventar cada vez que coloque algunos elementos dentro de otro solo para mostrar la relación de que está dentro de este otro. De acuerdo, ese es un buen comienzo. Por lo que acabamos de decir al navegador que este h uno y H dos y estos estos enlaces son enlaces de navegación que estos airean todo dentro de la sección de cabecera. Voy a seguir adelante y encender el envoltorio de palabras, así que eso es más fácil de ver. De acuerdo, esto es solo mi navegación envolviendo su Todo bien. Entonces, um, ahora le hemos dicho esto es el encabezado. Echemos un vistazo a algunos otros elementos. Podemos ah podemos entrar aquí. Y podemos precisar que estos enlaces son la principal navegación del sitio. Al decir knave aquí mismo y podemos añadir un enlace de knave de cierre justo ahí. Y puedo entrar aquí y en deuda que la navegación está sangrada. Y así ahora tenemos la sección de cabeza y dentro de la cabeza, tengo mi navegación principal. Por lo que esto sirve a algunos propósitos. Está diciéndole semánticamente al navegador y a los dispositivos que airen ese aire. Explorando este contenido que este apartado específico de la página es importante que este sea el principal identificar aire para el contenido de este sitio. Por lo que los H dentro de la cabecera van a tener más importancia. Esos términos clave que pones ahí y porque no tiene motores de búsqueda, sepan que esta es la sección de la página que pueden encontrar enlaces a otras páginas y luego pueden ir a explorar el contenido de otras páginas. También, adicionalmente, en realidad crea estética o físicamente una caja. Entonces ahora que tenemos estas cajas como Header y Knave, así es como soy capaz Teoh, Selecciona el Knave y puedo usar CSS para decirle al duende que sea un color de fondo de verde. Pero entonces quiero que el encabezado tenga un color de fondo de azul o algo así. Entonces la forma en que somos capaces de posicionar el contenido y darle estilo en cajas o contenedores separados es mediante el uso de estos elementos. Corte. Um, veamos también otro elemento HTML llamado H Group. Por lo que H Group es útil cuando tienes más de un encabezado y son una especie de sus enlaces juntos. Se supone que sean semánticamente parte del mismo mensaje o tengan el mismo significado. Entonces, básicamente como la forma en que leerías esto es que lo leerías un calzado Z H W. Todo es como una palabra. Pero si quiero que este texto sea más grande y tenga más importancia. ¿ Es la H w que la palabra zapatos? Puedo ponerlo en su rubro de nivel superior. Entonces este tipo está en cada uno. Este es un H dos. Sin embargo semánticamente cuando lees esto lo lees Es una especie de cosa. Zapatos CHW. Por lo que H group le dice a un navegador que se trata de una agrupación de encabezados. De acuerdo, entonces ahí tenemos el grupo de cabecera h con el nombre de la empresa, y luego tenemos nuestra navegación. Eso nos lleva a todas las páginas. De acuerdo, en esto es realmente fácil detectar estas etiquetas aire todas estas, Ya sabes, estos elementos aire único para que podamos detectarlos en cualquier parte de la página. Si estás desplazando hacia arriba y hacia abajo, puedes decir: Oh, Oh, hey, ahí está el encabezado. De acuerdo, bajemos a la siguiente sección. A éste se le llama la sección de venta. Entonces esta es una sección principal de la página semánticamente todo en esta página se relaciona con una venta, así que voy a utilizar los elementos de la sección que harán una caja. Esto rodeará este contenido con una caja y sugerirá que se trata de una sección única de la página así como así. Por lo que acabo de sangrar de nuevo resaltando, y lo hice. Ah comandos corchete cerrado, la llave de corchete cuadrado. Eso son solo dos teclas a la derecha de la letra p en tu teclado. Una y otra vez, también puedes rodear y presionar la tecla de tabulación así para moverla. Está bien, um, veamos otros elementos semánticos llamados figura para que podamos ver figura y fig. Figura de leyenda es una forma de rodear algo y sugerir que es, ah, figura y figura informativa en la página. Entonces vamos a seguir adelante y usar esta etiqueta aquí llamada Figura y bajaremos aquí y vamos a cerrar eso y usualmente esto alrededor de algún tipo de medio, como si se trata de un diagrama o de una imagen de algo que se relaciona con el contenido de abajo. Se puede etiquetar esto con figura, ¿de acuerdo? Y esto también agrega una pequeña caja alrededor de la imagen en este caso, alrededor de la imagen, para que pudiéramos darle estilo de una manera específica si quisiéramos. Otra cosa agradable de esto es que esto tiene una etiqueta de amigo que puedes poner dentro de ella. Um, que se llama higo subtítulo así. Por lo que fig subtion permite agregar un título para la imagen de abajo y debilitar el estilo. Estos y semánticamente sugiere que este título está relacionado con la imagen dentro de esta figura. Por lo que van juntos normalmente por subtítulos. Pones algo así como, um, ¿qué está pasando en la imagen? Detalles explícitos sobre la imagen o un título, A veces un título y autor. Um, realmente no tengo un autor específico de Tytler para poner aquí. Yo sólo voy a seguir adelante y escribir que esto es una, uh, uh, una imagen libre de regalías de www dot s xy dot h u Así que este es un sitio de fotografía de stock gratis que obtuve esta imagen de aquí para que pudieras ver la estructura aquí es figura, y entonces podemos tener una imagen o un video o algo dentro de ella. Y luego tenemos una leyenda de figura para esa imagen, y luego cerramos esa figura. ¿ De acuerdo? También podríamos añadir una sección aquí al rincón del artista. Esta es otra parte separada de la página, y acabo de colocar estos comentarios aquí como comodines porque anteriormente no teníamos estas secciones aquí, y creo que las dejaré en su lugar también porque lo hacen realmente fácil de ver donde comenzaron las diferentes secciones. Fin. Así que destacan todos estos tipos y en abolladura así. Está bien. Y, um, aquí adentro tenemos el video que creamos hace apenas un momento. Y si quisiera, también podría tener una figura por aquí. ¿ De acuerdo? Y dentro de aquí, también podría tener una leyenda para esto Usará higo caption como ese slash fig caption. A ver. Y esto es para el video. Y aquí dice que el artista es Larry Hale. Entonces en realidad conseguí esto de Ah, obtuve este video del archivo dot org bajo la atribución creativa Commons. Licencia. Por lo que este video es gratuito de usar y compartir. Gracias, Larry, y quiero asegurarme de que le acredite. Entonces aquí en el título de figura, le puedo dar crédito diciendo que esta es la canción Zapatos azules y voy a seguir adelante y poner un copyright aquí diciendo, Ponga el símbolo de copyright diciendo y copia. Y luego haremos esta copiadora. Y por el artista, que es Larry Hill. 2007 es en realidad cuando copió en esto y vamos a añadir un salto de línea como ese y voy a seguir adelante y sólo digo que esto está licenciado con la licencia de atribución 3.0 de creative common . Lo que eso significa es que simplemente tengo que atribuirle que esto es Hiss. No puedo afirmar que este es mi propio trabajo, así que tengo que atribuirlo con él. Pero es gratis para mí compartir y usar. Gracias, Larry. Grita dedo del pie Larry por eso. De acuerdo, ahí está mi figura, um, y mi título de figura aquí y el final de mi figura. Y luego aquí está mi encabezamiento y párrafo y esto está todo dentro de mi sección. Esta es la sección de esquina de artista que arranca aquí y termina ahí abajo. Entonces ahora tengo una cajita ordenada alrededor de esa sección. También puedo agregar una sección a la página de noticias. Eso es un Eso es largo. Escribí mucho ahí dentro, y cerraremos esto así, y parece que también tenemos una sección de detalles, y en realidad esta sección de detalles tiene. Está dividida en tres partes más pequeñas. Um, así que tengo una sección de enlaces que son, um, para Bueno, ahí, no hay vinculación a ninguna parte. Ahora solo tengo Este es un portador de lugar, pero estos enlaces enlazarán a todos estos diferentes sitios sociales, y esto será en la parte inferior de la página justo antes del pie de página, que hará en un momento. También tenemos algunos enlaces a alguna otra zapatilla relacionada. A lo mejor estos aires, como compañías hermanas o amigos de esta empresa. Entonces tenemos algunos enlaces ahí, y también tenemos, como, el número telefónico y la dirección, y cosas así estarán al final de cada página. Entonces quería que estas cosas fueran, ya sabes, todo esto es realmente el mismo contenido. Estos eran todos los detalles del sitio aquí, pero quería que estos Teoh estéticamente estén en diferentes cajas. Entonces si alguna vez quieres tocar algo en una caja, pero no lo es, um no todo es igual. Disculpe? No se trata de diferentes tipos de contenido. Entonces realmente no necesitas usar una etiqueta de sección. Entonces aquí solo puedo poner una sección alrededor de las tres cajas más pequeñas. Entonces esta es una sección sobre los detalles del sitio y dentro de esta sección son tres cajas más pequeñas y solo estoy usando la etiqueta Div. Son demasiado para mostrar. Esta es una caja. Esta es otra caja aquí. Por lo que Div es una etiqueta que crea un contenedor. Y no es una etiqueta semántica de cinco HTML. Simplemente me va a dar una manera de peinar estéticamente una caja alrededor de cada uno de estos, Um, cada una de estas partes de la sección de detalles. De acuerdo, um, aquí abajo. Por último, tenemos el pie de página, que tiene sus propias cinco etiquetas semánticas HTML. Puedo poner eso ahí dentro. Eso se llama Footer, y podemos golpear tab para inventar ese contenido ahí. Enfriar. Por lo que ahora todo mi contenido está rodeado con las cinco etiquetas semánticas HTML apropiadas. Ahora tengo casitas alrededor de cada sección, y esto va a hacer que sea mucho más fácil cuando llegue el momento de empezar a crear el diseño de página y mover las cosas. Entonces todos estamos preparados para eso. Ya me adelanté y agregué estas etiquetas al resto de las otras páginas para ti, que veas cómo las he incluido en las otras páginas también. Está bien, 17. metadatos: - Entonces lo último que queremos hacer es bastante rápido. - Sólo queremos agregar algunas metaetiquetas adicionales, - algunos metadatos en la parte superior de la sección de cabeza. - Entonces voy a bajar aquí. - Realmente no importa dónde pongas estos siempre y cuando estén en la sección de cabeza. - Um y vamos a seguir adelante y añadir otra meta etiqueta aquí Antes de usar meta también. - Dígale al navegador el formato de los caracteres de la página. - Entonces los pusimos en utf ocho caracteres formateados. - Y esta vez le vamos a dar algunas palabras clave y una descripción. - Entonces para empezar dirá meta nombre igual y dirá palabras clave así. - Y luego pondremos un espacio y añadiremos otro atributo llamado Contenido así y -dentro de contenido, - sólo vamos a poner una coma, - lista separada de términos que se relacionan con esta página. - Esto va a ayudar a un motor de búsqueda a asociar palabras o términos específicos con esta página en este -. - Esto podría ser diferente de página a página eso Ya sabes, - una página en la que podrías tener estas palabras, - ya sabes son palabras clave y otra página, - podrías tener unas palabras clave completamente diferentes Así que es bueno ser preciso. - Dee qué contenido existe en esa página. - Entonces iremos a decir todos los términos que creemos que la gente posiblemente podría escribir para encontrar este - página. - Entonces diremos. - Zapatos, - sandalias, - zapatillas. - Esto podría tomar algún pensamiento de tu parte para tus propios proyectos individuales. - Tendrás que pensar en qué términos encajarán. - Um, - vamos a ver, - ¿Qué más puedo decir? - Diré Zapatillas pie ¿Dónde? - En caso de que alguien escriba calzado, - Um, - podrían escribirlo de manera diferente. - A lo mejor lo escriben así. - Um, - digamos calcetines y tal vez algunos materiales. - Como si escriben zapatos de lona o, - um, - bueno, - digamos, - como zapatos de gamuza. - A lo mejor están buscando cordones. - Um, - vamos a ver. - Entonces diremos, - también cosas como almacén y venta al por mayor. - Entonces hay que pensar en qué términos son importantes para tu proyecto. - Um, - Creo que ya es suficiente ahí. - Creo que te das el punto, - está bien, - y luego le agregaremos también una descripción. - Entonces las palabras clave, -como dijimos estas son útiles para ayudar a los motores de búsqueda a recoger en términos específicos y- asociar esos términos con esta página. - También podemos agregar una descripción la cual se hace diciendo met a nombre, - descripción y contenido es donde escribimos la descripción. - Entonces esta es la descripción que se mostrará cuando la gente nos busque en un buscador. - El motor de búsqueda enumerará esta descripción debajo del enlace cuando subamos en el - resultados. - Entonces sigamos adelante y digamos algo. - Ojalá nada demasiado cursi. - Pero a mí sólo se me ocurre esto sobre la marcha así que bien di, - Ah, - te detienes por las mejores ofertas en el calzado más afilado de hoy. - Enfriar. - De acuerdo, - entonces están nuestras metapalabras clave y nuestra meta descripción. - Está bien, - eso es todo. - Ya he agregado este código a las otras páginas para ti y, - um, - ahora cosas. - Hay cosas que empezaban a verse bien, - su propia pista avanzando para aprender CSS y también para empezar a aprender el diseño de la página. - Entonces gracias por ver. - Y lo que vas a querer hacer ahora es siéntete libre de pasar al siguiente reto de código, - donde estarás agregando tus propios videos y etiquetas semánticas en tu proyecto de sitio web. 18. Estilizar el frente de finales: - Hola. - Bienvenido de nuevo. - Se trata de Slides 2.2, - estilo de los fundamentos de CSS front-end. - Ahora, - en ejercicios y conferencias anteriores, - aprendimos a escribir código HTML que proporcionaba la estructura y el contenido de nuestras páginas web- . - Ahora, - para el resto del curso, - vamos a estar explorando CSS, - que luego nos permitirá dar estilo a todo ese contenido que hemos creado. - Entonces vamos a discutir la sintaxis de CSS, - y luego más adelante, - vamos a pasar a un ejercicio donde vamos a demostrar todos los diferentes - selectores CSS que nos permitirán seleccionar contenido en la página y con ello permitiéndonos - darle estilo. - También vamos a explorar diferentes valores de color que podemos usar para darle color a estos - elementos. - Y también vamos a discutir declaraciones de fondos que podemos usar para estilo son tipografía. - CSS es sinónimo de hojas de estilo en cascada. - Probablemente lo llamaron así porque CSS nos da la capacidad de aplicar un estilo a través - múltiples páginas en un sitio web. - Por lo que tenemos una sola ubicación donde podemos especie de estilo Cascada abajo en numerosas otras - páginas. - Se creó CSS es una mejor solución para darle estilo a los elementos HTML en un principio. - Érase una vez, - solíamos usar HTML para darle estilo html y realmente era una carga enorme y mucho trabajo. - Eso CSS entra y nos da de nuevo un solo lugar. - Podemos ir a cambiar todos los colores de todos los párrafos de la página web en contraposición a - tener que entrar en cada párrafo individual y cambiar el color por elemento. - Por lo que realmente es un enorme ahorro de tiempo. - Es divertido, - rápido y fácil. - En mi opinión, - tiene, - ah, - sintaxis única separada de HTML. - Por lo que es un lenguaje completamente diferente al HTML. - Entonces como que tienes que tirar todas las reglas. - Aprendimos sobre cómo HTML ha escrito tiene que salir por la ventana cuando estás - enfocándose en CSS porque es su propio lenguaje único. - Hay tres formatos distintos que podrías ver aspecto CSS Onda. - Hablaremos de cada uno de esos. - Este es el CSS en impuestos y es bastante sencillo. - Se puede ver que está conformado por este selector aquí en este caso, -la letra P, - que está seleccionando todas las etiquetas P o todos los párrafos que podríamos decir en nuestras páginas HTML . - Ahora el siguiente el selector Tenemos aquí un conjunto de llaves, - una apertura y un tirante rizado de cierre como ese y dentro de las llaves, - ahí es donde declaramos todos los estilos que afectarán lo que estemos seleccionando. - Entonces dentro de las llaves aquí viven lo que llamamos declaraciones, - y puedes tener una sola o múltiples declaraciones tantas como quieras para darle estilo a eso - elemento seleccionado particular. - Entonces en este caso, - se puede ver que estamos cambiando el color del texto de todos los párrafos a negro, - y esta declaración en particular está conformada por el color de la propiedad. - Y entonces le hemos dado el valor a esa propiedad. - El negro y las propiedades y los valores están separados por un colon, - y siempre terminan en un punto y coma. - Ahora el punto y coma es importante porque así le decimos al navegador que se hicieron - definiendo un valor para esta propiedad en particular. - Entonces si tienes ah, - Siris de declaraciones, - múltiples declaraciones para este ah, - elemento de párrafo, - entonces vas a querer asegurarte de que todos los extremos de esas declaraciones terminen en un - semi colon. - Como mencioné anteriormente, - hay tres formatos CSS distintos y esos están en línea, - interno o externo para este curso, - vamos a estar usando CSS externo on, - y eso nos va a dar la mayor ventajas y la menor cantidad de molestias y problemas - ya que estamos trabajando en nuestra página web. - Entonces esta es realmente la mejor práctica o el método preferido. - Si estás construyendo un sitio web o una aplicación Web, - vas a querer darle estilo a tu contenido usando CSS externo. - Esto significa que hay una hoja de estilo CSS externa separada o un archivo CSS separado que es - peinar todas las demás páginas HTML. - Ahora eso es en contraste con estos otros formatos en línea e internos, - de los que realmente vamos a querer el dedo del pie tímido lejos. - Entonces tal vez te estés preguntando si estamos Si te estamos recomendando no usar estos 1er 2 formatos, - ¿por qué te lo enseñaría? - Bueno, - creo que ya sabes, - probablemente vas a terminar viendo estos otros formatos por ahí en el mundo real cuando - miras otro código de sitio web o si comienzas a trabajar en el sitio web de otra persona para ellos, - podría encontrarse con otro sitio usando uno de estos otros métodos de CSS. - Entonces creo que es importante que entiendas lo que es y entiendas cuál es el qué -las trampas son y el uso de estos otros formatos para que puedas elegir la solución correcta -para la construcción de web-, que es externa. - Este es un ejemplo de CSS en línea. - Entonces si alguna vez estás mirando algún marcado HTML y ves que hay un atributo de estilo - dentro de un elemento en particular dentro del valor para este atributo de estilo, - puedes escribir declaraciones CSS. - En este caso, - hemos escrito la fuente de propiedad estilo discontinua y dándole un valor de metálico. - Y lo que esto va a hacer es que va a cambiar el texto de este párrafo y Onley -este párrafo a un texto taliico o en cursiva. - Entonces la principal desventaja ahí que probablemente puedas imaginar, - es que si agregaste esta pequeña etiqueta de estilo todos los párrafos que querías ser talentos- eso podría sumar bastante rápido. - A lo mejor si tienes un sitio web más grande con cientos de páginas y cambias de opinión de que tú -ya no quieres que ese texto sea un tallix, - requeriría entrar en cada uno de esos diferentes cientos de elementos de tu sitio- diseño y cambiando esto de metalicos de nuevo a la normalidad. - Por lo que la enorme desventaja del mar interior evalúa sólo afecta el elemento que estás - aplicando eso en la línea CSS a ahora. - Un lugar que esto puede tener sentido usar es cuando estás usando cuando estás creando un HTML - newsletter. - Pero ese es realmente el único lugar en el que lo harías Ah, - alguna vez verías esto. - ¿Dónde sería una buena idea tenerla en este formato? - El siguiente, - vamos a ver que se llama CSS Interno o Embebido, - y es posible que veas esto apareciendo dentro de la sección de cabecera de una página HTML. - CSS interno está conformado por el elemento de estilo aquí el cual tiene el estilo de apertura y cierre - etiqueta, - y dentro de ella, - eres libre de escribir selectores y declaraciones CSS. - Entonces esto es justo, - ah, - lleno de declaración CSS aquí que está escrito dentro de esta etiqueta de estilo de apertura y cierre, - y esto podría ser internamente dentro de una página HTML. -Ahora, -la desventaja de esto es que esto sólo va a afectar párrafos de esta sola- página. - Entonces, cualquiera que sea la página html, - copiaste este código en la cabeza. - Afectaría a todos los párrafos de esa página. - Entonces lo que realmente queremos, - sin embargo, - es que queremos poder, - ya sabes, - cambiar el color de nuestros párrafos de una sola ubicación. - De esa manera, -si tenemos cientos de páginas en nuestra web, - podemos decir todos los párrafos color a leer desde un solo lugar. - Y si cambiamos de opinión, - tenemos una sola ubicación para volver a decirle a todos los párrafos que cambien a azul. - Entonces para hacer eso, - necesitamos CSS externo CSS Externo es ah realmente la mejor solución para sitios web y Web - aplicaciones porque estamos creando un archivo separado que es en este caso estilo CSS y - nos estamos vinculando a ese archivo en la sección de cabecera de nuestro documento HTML. - Ahora, - si abriéramos ese archivo y miráramos dentro de ese archivo CSS de punto de estilo, - se vería algo así donde estamos escribiendo un selector y luego declaraciones para - estilo ese selector. - Entonces aquí estamos contando todos los párrafos. - Teoh, - ya conoces todos los párrafos del sitio ancho y todas las diferentes páginas de nuestro sitio web para tener- el color negro. - Entonces si tenemos 100 páginas en nuestro sitio web, - cada una de esas 100 páginas tiene este código de enlace en la parte superior, - que le dice al navegador cuando carga que una página HTML en particular para estar al tanto o para - hacer referencia a los estilos CSS de este otro archivo. - Y entra en ese archivo y lo lee. - Y ve algo así que le dice a todos esos párrafos en toda la página web que - tener el color negro. - Por lo que esto se utiliza vinculando un archivo CSS externo a todas las páginas HTML que deseamos darle estilo - y las ventajas. - Ahora tienes una sola ubicación desde la que puedes hacer cambios. - Eso va a afectar elementos a todo sitio. - Eso es un Sfar como voy a ir en las diapositivas. - Para esta conferencia, - siéntase libre de revisar el conjunto completo de diapositivas en el enlace PDF debajo del video, - y de esa manera podrá utilizar las diapositivas restantes. - Puedes mirar sobre ellos, - y puedes usarlos como revisión para todos los diferentes colores selectores y texto- formato que usará en el ejercicio. - Entonces pasaremos al ejercicio ahora- y en este próximo ejercicio estaremos creando una hoja de estilos CSS y luego aprenderemos - varios selectores que podemos usar para darle estilo a diferentes contenidos dentro de nuestras páginas Web. 19. Configuración de una hoja de estilo externa: - este es ejercicio 2.2 fundamentos CSS. - Ya me adelanté y descargado todo el código fuente para este ejercicio, - y lo traje aquí arriba en algún texto ciego para empezar. - Lo primero que queremos hacer es que vamos a querer crear un archivo CSS externo - que podamos utilizar para dar estilo a todas nuestras otras páginas Web HTML desde. - Entonces sigamos adelante y subamos al menú desplegable de archivos y digamos nuevo archivo. - Y luego a pesar de que esto esté en blanco, - sólo vamos a guardarlo de inmediato el bate dirá guardar archivo. - Y voy a querer asegurarme de que esto se coloque dentro de la carpeta CSS. - Entonces quieres asegurarte de que tu primero en el, - um el directorio de trabajo para este ejercicio, - que es 2.2 dash CSS dash fundamentals, - y luego quieres asegurarte de que vas dentro de la carpeta CSS ahí y dentro del - Carpetas CSS donde vivirán todas nuestras hojas de estilo externas y vamos a seguir adelante y -nombre eso, - y solo voy a llamar a este estilo dot CSS y hacer clic en guardar. - Entonces ahora si venimos aquí a la barra lateral del proyecto. - Podemos ver que dentro de la carpeta CSS aquí tenemos nuestras hojas de estilo en el último ejercicio -, - dispuestos a normalizar punto CSS y eso estaba ajustando todos los navegadores a tamaño predeterminado del texto y - también estaba haciendo html cinco elementos semánticos mostrar correctamente y cosas así. - Entonces esto fue algún código CSS pre escrito que descargué dedo del pie tipo de darnos un buen comienzo, - y entonces vamos a dejar éste en paz. - Nunca iban a meterse con los ojos normales, - íbamos a escribir todos nuestros estilos personalizados aquí en este archivo CSS de punto de estilo aquí. - De acuerdo, - así que ahora tenemos esta hoja de estilo CSS de punto en su lugar. - Lo siguiente que queremos hacer es ir a través de cada una de nuestras páginas HTML y asegurarnos - que le decimos al enlace del dedo del pie del navegador volver a esta hoja de estilos. - Entonces sigamos adelante y vayamos a la carpeta raíz principal de ahí, - y sólo abriré la primera página aquí, - que se llama catálogo dot html, - y quiero entrar en la sección principal de esta página y sólo voy a desplazarme hacia abajo. - En realidad ya he hecho un espacio para este online 13 aquí. - Entonces justo debajo de mi enlace al archivo CSS de punto normalizado, - Lo siguiente que voy a hacer es crear un enlace a mi hoja de estilos. - Ahora es la etiqueta ah link como este dedo del pie enlace a archivos externos como este y tenemos que - poner dos atributos diferentes aquí. - El 1er 1 que voy a poner se llama R E l. - Una oportunidad de relación. - Y quiero decir que la relación es que es una hoja de estilo, - que este tipo de enlace es una hoja de estilo. - Y entonces lo siguiente que queremos hacer es darle el atributo, - h, - ref, - y eso señalará la ubicación de nuestras hojas de estilo. - Entonces aquí estamos en la página html de punto de catálogo. - Quiero decirle al navegador que vaya a buscar dentro de la carpeta CSS para el archivo llamado style dot - CSS Great. - Y entonces podemos ahorrar eso. - Ahora puedo copiar y pegar esta línea, - y entonces sólo voy a seguir adelante y agregar esta línea de código a todas las páginas del sitio -que me gustaría tener ligadas a esta hoja de estilo-, así que sólo voy a resaltar eso y hacer un comando. - Ver para copiar sea que sería un control ver en Windows Command, - Ver en Mac. - Y luego vamos a pasar al siguiente archivo, - que será contactado en HTML. - Y voy a hacer Command V en Mac el Paste o Control V en Windows para pegar, - y vamos a guardar y voy a ir por la página de índice y pegar y guardar, - y voy a ir a la página de precios y voy a pegar y luego guardar el archivo. - Y por último, - tenemos la página html de punto de venta, - y pegaré el enlace ahí y guardaré también. - Entonces ahora todas nuestras páginas aquí cada una tiene ese enlace a esa hoja de estilo externa. - Entonces eso significa que ahora puedo empezar a entrar en esta hoja de estilo- y puedo empezar a escribir código que va a peinarse y afectar a todas esas páginas diferentes- desde una sola ubicación 20. Selector de tipo: - Está bien, - genial. - Así que acabamos de crear aquí una hoja de estilo externa, - y ahora podemos abrir ese punto CSS de estilo de archivo y dentro de ella Aquí podemos empezar a aprender - a escribir algún código CSS. - Lo primero que quiero enseñarte en CSS es escribir un comentario. - Entonces si te ves justo de la misma manera que podemos crear comentarios y HTML, - también podemos crear comentarios en CSS como medio de darnos una pequeña nota o un - mensaje en el código y un comentario. - CSS comienza con la barra inclinada hacia adelante y luego el Starkey, - que es turno en el número ocho. - Entonces este derecho, - esto es un comentario, - y tienes que terminar un comentario usando Star y Ford Slash. - Por lo que se acaba de revertir de principio a fin. - Por lo que tienes estrella slash y luego así los comentarios y CSS pueden estar en una sola línea o ellos - también pueden ser multi línea. - Por ejemplo, - podría golpear, - volver y bajar a la siguiente línea. - Um, - y voy a seguir adelante y decir, - por ejemplo, - para que estos comentarios puedan abarcar múltiples líneas es largo mientras tengas el inicio y el final - caracteres correctamente que cualquier cosa puede entrar entre aquí, - y el navegador lo ignorará. - Está bien, - um, - vamos a ver. - Entonces vamos a escribir otro comentario para recordarnos la sintaxis CSS que discutimos en - dice el conjunto anterior de Slides. - Te acuerdas de CSS comienza con un selector, - y luego eso va seguido de llaves. - Y dentro de esos tirantes rizados, -se puede dar algunas declaraciones- que están conformadas por una propiedad en un valor. - Y si quieres poner múltiples propiedades para un selector, -solo puedes escribirlas así, - y realmente puedes escribir tantas como quieras. - Eso podría ser corto o largo lo que les interesa poner. - Terminemos ahí ese comentario. - De acuerdo, - Entonces, - por ejemplo, - echemos un vistazo a un selector llamado selector de tipo. - Primero, - buscaremos un selector de tipo. - Los selectores de tipo Eso usan el nombre de la etiqueta para ir y encontrar ese elemento. - Entonces lo que podemos hacer es, - digamos, - ya sabes, - hipotéticamente, - queríamos ir y seleccionar todos los párrafos de nuestra página web. - Podemos usar la letra P para salir y seleccionar todas esas etiquetas P para que pudiera escribir un poco- comentar en esa medida que esto selecciona, - Oh, - P elementos dentro de nuestra página. - Um, - así que vamos a cambiar el tamaño del fondo para cada uno de estos párrafos. - Entonces puedo decir que el guión de fuente tamiza la propiedad y luego es un valor. - Voy a decir 14 píxeles. - En cuanto a dimensionar la tipografía, - puedes usar píxeles, - puedes usar puntos, - puedes usar percéntimos, - y también puedes usar corte EMS. - Entonces los píxeles es un tamaño fijo 14 píxeles es el tamaño en cualquier pantalla? - Um, - y entonces también tenemos sistema de puntos, - con el que podría estar familiarizado de diferentes programas de procesamiento de textos. - No obstante, - Me gusta tratar de evitar el uso de puntos. - Y la razón por la cual es que, - um, - por ejemplo, - El tamaño de 12 puntos en Microsoft Word puede no ser el mismo que el tamaño de 12 puntos y fuego Fox o el - mismo tamaño y safari. - Entonces, - um, - el dimensionamiento de puntos para la tipografía, - desgraciadamente, - es un poco diferente, - dependiendo de la aplicación en la que estés. - Por eso, -con pixeles, - al menos sabes exactamente lo que estás obteniendo. - También tenemos por ciento, - que es como una cantidad variable. - Entonces, - uh, - como, - esencialmente, - si pongo el 100% de su refiriéndose al 100% del tamaño actual del texto. - Entonces es una especie de en relación al tamaño actual del texto. - En este caso, - 14 píxeles. - Um o, - ya sabes, - si no hubieras especificado previamente qué tan grande debería ser la tecnología de tamaño de párrafo, - entonces simplemente estaría heredando ese tamaño del navegador. - Entonces por defecto, - si no especificas el tamaño del texto y de un navegador, - ya te has dado cuenta de que el navegador simplemente hace que los párrafos tengan un cierto tamaño y - hace que los encabezados tengan un cierto tamaño. - Entonces el 100% sería en ese caso, - comer, - ya sabes, - sería equivalente a lo que el navegador decida es el predeterminado. - Si dijeras 200% lo duplicaría, - por lo que haría el texto dos veces más grande de lo normal. - Y, - claro, - ya sabes, - 50% sería como la mitad del tamaño algo así. - De acuerdo, - también tenemos EMS y M es una medida sobrante de los días de tipografía, - y también es una cantidad que es similar al porcentaje en esto, - en la forma en que es algo relativo a la fuente actual. - tamaño, - por ejemplo, - una M en este caso sería igual a 14 píxeles. - Si le dijera a em, - sería el equivalente a 28 píxeles si ya he especificado un tamaño de fuente aquí, - Um, - y si dijera que sabe 280.5 M o 0.5 ellos, - ese sería el equivalente a siete píxeles, - Um, - y de nuevo igual que antes con el por ciento. - Si no lo he hecho, - ya sabes, - especificó un tamaño que esta cantidad se va a referir uno m se va a referir a lo que sea el - tamaño predeterminado del texto del navegador, - y luego a M duplicaría ese tamaño. - De acuerdo, - por lo que los percéntimos y los EMS son algo relativos a cualquier tamaño que tenga el texto inicialmente, - y los puntos y píxeles en realidad lo cambiarán a una cantidad fija. - Puntos es, - ya sabes, - especie de número que cambia de navegador el navegador. - Por lo que los píxeles realmente serían nuestro método preferido para hacer un tamaño de texto fijo, - um, -. - De acuerdo, - um, - en realidad pongamos otra propiedad aquí. - Digamos, - aparte de cambiar el tamaño, - también me gustaría cambiar la altura de la línea, - así que voy a seguir adelante y decir línea, - la altura del guión y la altura de la línea es el espaciado entre las líneas del párrafo. - Entonces vamos a buscar un EMS para eso. - Por lo que una M en este caso sería igual a 14 píxeles o espaciado de una sola línea. - 1.5 sería el equivalente a 1.5 interlineado. - Y a M sería el equivalente al espaciado de doble línea, -que sería, - en este caso, - 28 píxeles de distancia de una línea de texto a la otra. - Sigamos adelante y guárdalo y echemos un vistazo a esto. - Solo asegurémonos de que esto esté funcionando y concursamos para asegurarnos de que nuestro estilo dot CSS - página esté enlazada correctamente con todas las páginas viertas. - Adelante y guarda aquí y volvamos a saltar al navegador. - Y veamos aquí este párrafo y veamos si cambiamos el espaciado entre líneas en el tamaño del texto -así que seguiré adelante y presionaré Refresh, - y ahí puedes ver que funcionó. - Este texto en realidad se hizo más pequeño. - Al parecer, - el tamaño predeterminado con el que estaba trabajando antes en párrafos era un poco más grande que -14 pixeles, - y el interlineado también estaba más cerca entre sí. - Entonces, - ya sabes, - tal vez decidí que esto está un poco demasiado alejado, - así que puedo volver aquí y podría cambiar esto. - Yo puedo ajustar esto a voluntad, - decir 1.5 ellos. - Intentaremos 1.5 espaciado entre líneas y quizá quiera que esto sea un poco más grande. - Yo quiero decir, - como 16 píxeles o algo así. - Entonces ahorraremos y volveremos a Chrome y nos refrescaremos así, - y eso se ve bastante bien. - Esto es Esto es bastante legible. - Tener la altura de la línea, - que es el espaciado entre la parte inferior de este d y la parte inferior de este Usted aquí que- se ve bastante bien. - 1.5 líneas y me gusta el tamaño de los personajes a ella es bastante decente ver cuando se reanuda - fuera todo el camino. - De acuerdo, - si eres Texas no está respondiendo o mirando lo mismo que está en mi pantalla, - puedes subir a ver en el navegador, - y puedes comprobar dos veces para asegurarte de que el texto esté configurado en tamaño real porque los navegadores - en realidad se puede ajustar, - uh, - tamaño de pantalla al acercar, - alejar. - Nos aseguraremos de que sólo somos un cero aquí. - Tamaño real en otras palabras, - reanudó todo el camino. - Está bien, - bien. - Entonces volvamos aquí y vamos a experimentar realmente creando, - um, - otro. - En realidad vamos a crear otro selector de tipo aquí. - Entonces voy a salir y crear uno llamado higo caption, - y esto va a seleccionar todos los elementos de subtítulos de higo. - En otras palabras, - seleccionar todos los elementos de subtítulos de higo así. - De acuerdo, - así que para el título de higo, - podemos explorar algunas otras formas de ajustar el tipo. - Echemos un vistazo a otra propiedad llamada fuente. - Espera, - y eso es usar el peso del guión de fondo, - y esto podría establecerse a la normalidad. - También se podría poner demasiado audaz en, - y también se puede ajustar a Boulder así, - que es el más audaz. - También tenemos una serie de números que van desde 100 2 900 que puedes utilizar para ajustar el - grosor o el peso del texto en y esos que van en incrementos de 100. - Entonces, - por ejemplo, - 100 sería el más ligero 200 sería ligeramente engomado 300 400 así todo el camino hasta - 900. -Yo lo creo en este caso, - no queremos que el texto sea audaz. - En realidad vamos a usar lo normal, -que en este caso, - es el predeterminado. - Entonces realmente no tendríamos que especificar para este elemento en particular a menos que lo estemos cambiando -por, - como, - negrita o algo así. - Pero primero, - sólo lo veremos, - um, - como tamaño normal. - Espera. - Y luego cambiemos también el tamaño de fuente aquí, - que vimos en el selector anterior. - Entonces diremos tamaño de guión de fuente, - y lo estableceremos en 12 píxeles. - Está bien. - Y, - uh, - vamos a ver, - ¿qué más nos gustaría hacer? - También pongamos línea. - Altura dirá altura tirada del guión. - Y pondremos a ese tipo para que diga también párrafos Mazza dirán 1.5 AM para que yo pudiera especificar esto -también en píxeles por ciento, - ¿ems o puntos? - Uh, - vamos a ver. - Así que la altura de la línea. - Echemos también a cambiar la tipografía. - Entonces vamos a usar la familia de guión de fuentes así y vamos a poner a este tipo en algo - diferente, - Dirá que queremos que sea Georgia. - De acuerdo, - Ahora, - la forma de encontrar obras familiares es que eres libre de elegir fuentes comunes. - En primer lugar, - vamos a ver una solución que es el uso de fuentes patrocinadoras seguras para la Web que son comúnmente - que se encuentran en las computadoras del usuario. - Y entonces, - más adelante, - vamos a ver usar un fondo Web especializado o un fondo que la gente podría no tener -y lo hará cargándolo, - cargar ese fondo de la Web para que aunque la persona no tiene esa diversión en su -computadora, - todavía podrán verlo. - Estará utilizando el método CSS de tres fuentes face para lograr eso. - Pero para empezar, - vamos a usar una fuente que sea segura y la mayoría de la gente tiene en su computadora. - Entonces la forma en que funciona esto es que el navegador vendrá aquí abajo. - Y si tienen esta fuente Georgia en su computadora, - seguirá adelante y cambiará el tipo a eso. - Ahora puede que te estés preguntando, - Bueno, - ¿y si no tienen ese teléfono en su computadora? - Bueno, - si no lo tienen, - podemos poner una coma, - y podemos especificar otras soluciones de copia de seguridad. - Y típicamente la gente elige de 2 a 3 soluciones de copia de seguridad. - Entonces, -por ejemplo- digamos que no tienen Georgia-, pero tienen tiempos. - O quizá tengan algo como esto. - Times New Roman así. - De acuerdo, - Entonces, - como respaldo podemos poner el primer fondo que queremos y luego una coma, - y luego podemos poner otro fondo. - Entonces si primero intentará ver si tienen a George, - si no tienen Georgia, - entonces va a revisar para ver si tienen tiempos New Roman. - Habrás notado que tiempos New Roman está entre comillas. - A veces verás estas y comillas simples como esta, - como así O puede que lo veas entre comillas dobles la forma en que inicialmente fue así. - Siempre que veas citas ya sea simples o dobles en CSS alrededor de una familia de fuentes como esta, - eso es porque aquí hay un espacio en el nombre del archivo. - Entonces Georgia no tiene este spot esta fuente. - Georgia no tiene un espacio en nombre de la fuente, - pero veces New Roman sí tiene un espacio en nombre del fondo. - Entonces, cualquier vez que tengas una fuente que tenga algún carácter extraño en ella, -como en símbolos, - signos de exclamación o, - ya sabes, - tal vez caracteres no latinos como caracteres chinos o japoneses o -así, - entonces tu mejor apuesta lo más seguro que hacer es ponerle una cotización a su alrededor, - ya sea comillas simples o dobles para rodearlo. - Um, - así que en este caso, - sólo tenemos comillas dobles tiempo, - espacio, - nuevo espacio, - romano. - Y porque éste no tiene ningún carácter especializado, - pero sí tiene un espacio en el nombre del archivo. - Entonces lo ponemos entre comillas así. - Y por último, -como solución fullback, - sólo le dirá al navegador que use cualquier genérico Sarah Font escribiendo la palabra serif allí. 21. Sistemas de color: - um OK, - así que vamos a establecer también el color. - Entonces aquí hay otra propiedad. - Si es útil saber, - es cambiar el color del texto, - simplemente se utiliza el color de la propiedad. - Está bien. - Y para este 1er 1 lo vamos a poner a un color gris para poder decir gris así, - que es un nombre de color. - Por lo que estos son los diferentes tipos de sistemas de color que puedes utilizar. - Aquí puedes usar uno de los 16 nombres de color y siéntete libre de referirte a las diapositivas para ver una lista - de esos 16 nombres de color aparte de los nombres de color. - También puede especificar colores decimales Hexi, - y también puede especificar valores RGB. - Y en CSS tres, - es rgb A con la inclusión de transparencia o Alfa ahí. - De acuerdo, - así podríamos decir gris. - También podríamos usar un valor de color decimal hexi que los valores de color decimal Hexi usaron los ellos - partieron con el hashtag o el símbolo de libra así. - De acuerdo, - entonces empezamos con el con el símbolo hashtag y luego después de eso, - vamos a poner en números y letras para que podamos usar el número cero a nueve y - letras de la a a la F para representar una gama de colores de miles de colores disponibles a través de - el sistema de color Hexi Decimal. - Entonces, - por ejemplo, - en sistema de color inaccesible, - el 1er 2 caracteres representa el color rojo. - Por lo que los 1er 2 pares de caracteres representan rojo. - 00 sería no rojo sería una ausencia de luz roja. - Y entonces los 2 personajes 2 representan verde. - Y eso sería una ausencia de luz si pongo dos ceros para eso y el último color - representa el azul. - Entonces el último par de dos es azul. - Entonces esto es rojo, - verde y azul. - Con estos lo dijo cero. - Eso significa que hay ausencia de luz. - No hay rojo, - luz verde o azul, - así que eso es negro. - Este es el color negro. - El valor más alto que puedo poner es una letra F. - Así que si pongo seis EFS aquí así, - esto sería, - um, - tanto rojo, - como 100% leer 100% verde y 100% azul ahí. - Entonces este sería el color blanco. - Si lo hiciera, - um, - 00 ff 00 Este sería el color verde. - Y si hiciera esto, - este sería el color azul, - y este sería el color rojo. - Así que también podría escribir esto como después de 00 porque los 2 primeros caracteres coinciden FF 0000 Entonces - a veces verás hacks un decimal en taquigrafía así. - Si sólo ves tres personajes, - eso es lo que está pasando. - Entonces, - por ejemplo, - si esto fueran estos tres caracteres después de cero F, - Yo sabría que en realidad, - esto es taquigrafía para F F 00 ff. - Ahí vamos. - ¿Eso tiene sentido? - Entonces podemos agrupar este 1er 2 en un par, - el segundo en un par en los dos últimos en un par, - por lo que esto en realidad podría acortarse a F cero f como Así que si tienes un número decimal hexi - eso no coincide en pares iguales, -por ejemplo- Acabo de hacer esto de arriba de mi cabeza. - Ni siquiera estoy realmente seguro de qué color es este, - pero este es un ejemplo del valor decimal Hexi para el que no puedo usar taquigrafía. - No puedo simplificar esto en tres personajes porque no tengo coincidencia en todos los - personajes. - En otras palabras, - de esto sería incorrecto porque aquí hay un partido. - No se me permite hacer esto y tengo cinco personajes. - La única vez que podría hacer esto es si tuviera un partido en cada uno de ellos así en - cada uno de los tres. - Entonces esto sería DD ocho A. - A. - Este es un ejemplo de un hacks, - un número decimal que podría acortar si quisiera. - Podrías acortarlo así. - De acuerdo, - así que sólo vamos a agregar un valor decimal hexi de 777 que es como un gris oscuro. - Está bien, - Um, - en realidad, - esto es un Es un poco de un color gris más claro. - Supongo que no debería decir que está oscuro. - Um, - y entonces vamos a seguir adelante y echemos un vistazo a otra propiedad aquí. - Vamos a crear una propiedad llamada texto guión una línea. - Entonces esto es útil. - Se puede establecer texto a una línea a la izquierda dentro del elemento que son que están - contenidos dentro. - Y entonces también puedes ponerlo en centro, - lo que centraría el texto en ese elemento. - Y también se puede decir correcto, - que centraría el texto en el elemento al RCD. - Eso empujaría el texto hacia la derecha dentro del elemento, - así que sí, - hagámoslo realmente. - Uno dirá texto la línea derecha empujará así a este tipo. - Está bien. - Y, - um sí, - eso lo va a hacer por ahora. - Hablaremos de color RGB en un momento. - Volveremos a esa. - Entonces vamos a guardar esto y volvamos al navegador aquí y actualicemos. - Y bastante seguro, - se puede ver aquí que debajo de esta imagen waas esta leyenda de figura y la leyenda de la figura - ahora es una fuente diferente. - ¿Ves cómo es éste? - Se ve como la Helvética de ésta. - Voy a adivinar ahí. - Y este de aquí es Georgia y parece un color gris Ahora en lugar de un color negro - bien. - Y también se puede ver que era una línea a la derecha ahí. - Está bien, - veamos otro sistema de color que se llama RGB. - Y en CSS tres, - también podemos especificar 1/4 valor, - que es una que oportunidad para Alfa. - De acuerdo, - así que la forma en que funciona RGB es que tienes un rango de números del 0 al 2 55 así que cero sería - la ausencia de luz. - Eso significa que no, - no. - En este caso, - significa que no hay rojo para el primer número. - Significa que no hay verde para el segundo número y no azul para el tercer número. - Y entonces el cuarto valor aquí es uno que significa 100% Alfa o, - UM, - 100% opacidad. - Si quisiera que ese texto fuera visto a través, - podría decir que 0,5 sería 50% 0.2 sería 20% 0.75 sería 75% y uno igual al 100%. - Entonces esta transparencia es un rango desde cero, -lo que significa que es invisible, - o no la puedes ver todo el camino hasta uno o 100%. - Cuidado. - No quieres hacer tipo invisible como este porque eso puede afectar a tu buscador - optimización. - A veces la gente intentará hacer un poco de trucos astutos, -como hacer invisible su tipo en solo poner muchos términos que enfocarán la búsqueda- motores para encontrar su página. - No obstante, - muchos motores de búsqueda, - si descubren que estás haciendo esto, - te penalizarán, - y Google en realidad frunció el ceño a eso. - Está bien. - Entonces, - por ejemplo, - si digo a 55 coma cero coma cero, - esto significa que es de rojo a 55 rojo cero verde cero azul. - Si yo hiciera todo esto a 55 sería 100% luz roja, - luz verde y luz azul, - que en realidad es el color blanco. - Entonces a 55 a 55 es el color blanco 000 es el color negro. - Y esto sería como el color verde, - porque es cero rojo todo el camino verde y todo el azul. - De acuerdo, - así que tal vez te estés preguntando, - ¿y si quiero que aquí sea un color específico? - Um, - y no estoy muy seguro de cómo es ese valor de color, - cuáles son los números equivalentes para ese valor porque no pensamos como robots. - Cuando pienso en el color naranja como una naranja ráfaga de sol, - no sé qué números ponchar aquí para los hacks del decimal o los valores RGB. - Exactamente. - Entonces, - afortunadamente, - tenemos algunas herramientas a nuestra disposición que podemos utilizar para lograr esto. - Está bien, - así que hay un cuentagotas en la tienda de fotos que puedes usar. - También hay un cuentagotas en gimp. - Si ese es el software que estás usando para que puedas sacar una imagen como esta, - puedes abrirla y puedes usar la herramienta cuentagotas para agarrar eso puedo demostrar de verdad - rápidamente en photoshop. - Y también puedo demostrarme muy rápida y otra vez, - está bien. - ¿Y por qué esas cargas de aire? - En realidad les voy a mostrar a aquellos de ustedes que están en una computadora Mac. - Te puedo mostrar cómo hacer esto usando un programa incorporado gratuito en el Mac llamado Digital color - Meter. - Entonces, - uh, - vamos a seguir adelante y escondemos esto realmente rápido y vamos a pasar a esta pequeña lupa - vaso caído aquí arriba, - y vamos a buscar una aplicación llamada Digital Color Meter y en realidad - ya vino aquí. - Acabo de empatar digital, - y se puede ver aquí el máximo hit es esta aplicación llamada Digital Color Meter. - Entonces voy a seguir adelante y seleccionar eso, - y esto aparece una pequeña ventana en tu pantalla. - En realidad estoy trabajando en Snow Leopard. - Es posible que tengas una versión más reciente de Mac OS. - Puede que estés corriendo sobre león, - y si estás corriendo sobre león o león de montaña, - esto se verá un poco diferente. - Pero es más o menos lo mismo. - Entonces si quiero hacer coincidir este color Digamos que quiero emparejar este color gris a un color específico -. - De acuerdo en este muro aquí atrás. - Tal vez hasta algo así como un color beige así. - Lo que estoy viendo ahí son los valores hexagonales y mostrándome que el valor rojo debe ser ser G - es B nueve y el último es un d. - Entonces si quiero copiar esos valores, - Aiken dice cambio de comando, - ¿ve? - Y puedo volver a meterme aquí en mi código. - Ocultemos juego por un segundo aquí. - Hola otra vez. - Está bien. - Para que pueda saltar de nuevo aquí al código. - Y por este valor de color, - Puedo simplemente pegar ese valor ahí dentro así. - Entonces si guardo esto y refresco, - me acaba de dar el valor decimal Hexi cuando pasé el ratón sobre esa parte de la imagen- que buscaba ese color. - Entonces si vuelvo aquí y me refresco, - se puede ver que este texto cambió ese tipo de color beige ish que saqué de la pared aquí- . - Está bien, - intentémoslo de nuevo. - Pero esta vez, - vamos a obtener los valores RGB. - Entonces voy a volver al medidor digital de color. - Lo perdí y a ver si podemos volver a subir. - Ahí estamos. - Y intentemos como este color naranja aquí para que veas en este momento estoy obteniendo el valor hex - ocho bits. - Y lo que quiero hacer es cambiar al valor real RGB en versiones anteriores de Mac como, - Ah, - Snow Leopard. - Vas a ver que puedes hacer click aquí y puedes cambiar al valor real. - Ahora, - si estás en una versión más reciente de Mac OS X como Tiger, - en realidad vas a querer llegar a un menú desplegable aquí arriba. - Entonces bajo la aplicación del medidor de color digital, - se puede subir aquí y en realidad se puede cambiar. - Olvidé qué menú desplegable es sin poder verlo. - Pero vas a mirar a través de las preferencias aquí arriba y podrás encontrar el mismo - menú. - Y se puede cambiar Teoh decir valor real ocho bit. - Entonces si digo RGB valor real ocho bit, - entonces obtengo este sistema de color, - que es de 0 a 2 55 en su lugar. - Entonces, - por ejemplo- vamos a flotar sobre esta naranja en el zapato aquí mismo, - y voy a decir turno de mando, - ¿Ves? - Y va a copiar esos números. - Y puedo volver aquí al código, - y puedo pasar eso ahí dentro. - Ahora, - estos de aquí son los valores RGB que necesito decir que RGB realmente tenía esto escrito antes y yo - lo borré. - Um, - y pondré paréntesis alrededor de esta salsa rgb a y luego pondremos una coma entre cada uno - de estos números aquí así. - Y necesitamos si hago el, - uh si lo hago solo rgb así, - esto es CSS para agregar algo de transparencia. - Podría hacer rgb A y podría especificar, - como 0.5 sería 50% de transparencia. - Yo sólo voy a decir uno por 100% así, - y luego vamos a ahorrar y volveremos a refrescar. - Y se puede ver ahora los años de texto, - ese color naranja de ahí. - Entonces goteros aire realmente útil. - Um, - en Kim, - tienes un tour de gota de ojos aquí mismo. - Yo sólo voy a señalar en cada aplicación. - Esta es la herramienta yo caigo aquí y gimp y tú irías a archivar abrir y subir tu imagen -. - Y tú puedes caer desde ahí y en tienda de fotos, - la herramienta cuentagotas se encuentra aquí mismo. - Se ve muy parecido. - Sube un poco más alto y los libros en el panel, - y se ve así. - Se llama la herramienta Cuentagotas. - También puedes golpear la letra. - La tecla I en tu teclado para seleccionarla. - Está bien, - excelente. - Entonces voy a cerrar estos. - Haremos un poco más con Photoshopped más adelante. - Está bien, - así que eso es genial. - Ahora sabemos que podemos usar, - um aplicaciones para hacer click, - y caigo sobre nuestras imágenes. - Si tus propias ventanas También hay algunos programas gratuitos que puedes descargar algunos buscar en Google - para cuentagotas o cuentagotas color que hay, - ah, - puñado de programas que deberían surgir que son gratuitos para la versión más reciente de Ventanas también- así. - Está bien, - um, - así que eso son los sistemas de color. - Y también aprendimos, - uh, - vamos a ver, - aprendimos nombres de color. - Aprendimos sobre los colores decimales Hexi y taquigrafía Hexi Decimal. - Um, - y también aprendimos valores RGB 22. Font Shorthand: - Echemos un vistazo a la taquigrafía para especificar todas estas propiedades de fuente aquí, - Así que en realidad voy a comentar esto y voy a escribir esto de una manera simple o más corta . - Déjame mostrarte lo que quiero decir aquí. - Entonces, - en realidad, - en CSS nosotros si queremos, - podemos escribir esto línea por línea. - Resulta para las fuentes, - hay una Hay una propiedad llamada fuente así. - Y si solo dices diversión, - esto te permitirá especificar los valores para peso y estilo y tamaño y línea, - altura y familia de fuentes todo en una sola propiedad. - Es importante que ocurran en este orden específico. - Entonces, - um, - Escribí intencionadamente escribí estos en el mismo orden para tratar de ayudarte a recordar. - Um, - y lo primero que harías es si tuvieras algún estilo de fuente o peso de fuente. - Eso se especificaría primero, - por lo que podríamos decir normal. - Y luego pones un espacio y el espacio entre estos valores es la forma en que el - browser es capaz de ver que es el final de un valor en el inicio del siguiente. - Entonces es importante tener un espacio entre ahí, - para que puedas decir que es una fuente normal. - Espera, - podemos decir que la fuente mide 12 pixeles, - y podemos poner una slash para especificar la altura de la línea, - que sería 1.5 m. - Así que la forma en que leería esto es, - dirías, - normal 12 puntos o 12 píxeles sobre 1.5 ellos, - um, - así 12 píxeles sobre este 1.5 ellos es, - um, - es el tamaño sobre la altura de la línea. - Entonces pones una baraja entre estos dos en lugar de un espacio, - y luego volveremos a poner un espacio y luego vamos a especificar. - Clips especificarán los fondos, - que son Georgia y tiempos New Roman. - Whoops. - Tengo demasiadas cotizaciones ahí. - Ahí vamos, - Haré una coma. - Y la última se llama Sarah, - que sólo cargará cualquier Sarah Font genérica que confinó el navegador. - De acuerdo, -entraremos y guardaremos eso- y creo que quiero cambiar de valor a mi color gris. - Aunque eso es una naranja rapida, -creo que es un poco demasiado vívida para sólo un pie de foto, - así que sólo guardaré esa espalda de 777 Y ahí vamos. - Todo vuelve a la normalidad. - Está bien, - excelente. 23. Fonts web: - Entonces esta es una gran manera de cargar fuentes que nuestra Web dice fuentes, - fuentes comunes y todo el mundo va a tener en su computadora. - No obstante, - ¿y si quiero cargar una multa de mi propia computadora? - O que si quiero cargar una Fina especializada. - Entonces vamos a ver un método llamado en Import para importar una hoja de estilo para algunos - fondos especializados de Google. - Está bien, - y hay todo tipo de sitios por ahí que proporcionan fuentes Web gratuitas. - Vamos específicamente a ir a la biblioteca una multa de Google. - Entonces volvamos a nuestro navegador y abramos una nueva pestaña y vamos a seguir adelante y - teclea google dot com slash fondos web viejo dot com slash fondos meteorológicos y puedes ver aquí - hay, - ah, - lista más grande. - Tienen más de 606 113 encontrar familias, - y puedes hacer clic aquí para ajustar la configuración y el tamaño que estás buscando. - Um, - Sucede que sé que hay dos fuentes específicas que quiero usar, - así que sólo voy a buscarlas aquí arriba. - De lo contrario, - ya sabes, - normalmente paso página por página y trato de encontrar estilos que parezcan, - ya sabes, - deseables para mí. - Voy a buscar una llamada Vamos a ver a Elsie Swash Elsie swash. - Yo quiero usar este de aquí. - De acuerdo, - así que esto es divertido que no es súper probable que alguien tenga este pensamiento exacto encendido - su computadora. - Entonces vamos a agarrar esta diversión y cargarla desde Google. - Um, - hay diferentes formas que puedes hacer este año. - Puedes agregarlo a tu colección, - y luego puedes tener una sesión de estilo personalizado con la que vinculaste. - Y en realidad, - en nuestro caso, - lo que voy a hacer es sólo voy a ir a este enlace aquí que dice uso rápido y voy a - dar click en el enlace de uso rápido así, - ¿de acuerdo? - Y aquí me están diciendo que hay diferentes versiones. - Hay normal y ultra audaz. - En este caso. - Yo sólo quiero usar el peso normal 400 de la diversión, - y luego vamos a desplazarnos aquí abajo, - y puedo ver que en realidad hay tres métodos que puedo usar para incrustar esto a mi vista. - Entonces un método se llama estándar, - y esto es usando un enlace que ponemos en la sección de cabecera de todas las páginas HTML. - ¿Entonces esta es la etiqueta de enlace que vimos antes? - De la misma forma que estamos vinculando a nuestra hoja de estilo. - De hecho, - uhm y otro método está usando algo llamado en la importación que importará este archivo - directamente a nuestras hojas de estilo actuales. - Y también hay una solución JavaScript que puedes copiar y pegar aquí, - que lo más probable es que pondrías en la sección principal de tu página HTML cortada o enlazada desde - tu página HTML. - Um, - así que JavaScript va a funcionar en navegadores más antiguos si la gente tiene su JavaScript apagado, - lo cual no estoy seguro de por qué lo harían. - Pero algunas personas pueden hacer eso por razones de seguridad. - Entonces éste no va a ir a trabajar con el dedo, - Aziz. - Siempre y cuando tengan un navegador más nuevo que soporte CSS tres en método de importación, - podemos usar este en particular. - Entonces en realidad voy a usar esta solución- que es el tabular medio llamado en la importación. - Y sólo vamos a copiar esto. - Voy a destacarlo y decir Copiar. - Y entonces voy a dejar abierta esta pestaña y sólo voy a volver a la pestaña. - Volverá aquí al texto sublime y vamos a cargar esto en la parte superior de nuestra página -, - así que sólo haré un comentario aquí que diga Fondos web como ese. - Entonces cargamos nuestra diversión web aquí, -y voy a ir a pegar, - y podemos hacer esto un poco más pequeño. - Aleja el zoom para que podamos ver cómo se ve esto aquí. - Es una especie de chica larga. - Está bien, - así que hemos pegado esta U R l Aquí, - volvamos a saltar de nuevo a nuestro navegador y veamos el uso de esto. - Entonces la forma en que usamos esto es que usamos la familia de guión de fuente, - y nos referimos a este fondo como gorras Elsie Swash. - Y, - um también- tienen una caída de cursiva, - que será que usará cualquier fuente cursiva que confinó si no puede cargar ésta por - alguna razón. - Entonces podríamos simplemente copiar aquí esta parte, - y volveré a mi código y puedo bajar a donde me gustaría usar esto. - Decidí que mis subtítulos de figura. - En lugar de ser Georgia, - Quiero usar un fondo especial. - Entonces voy a resaltar las familias de fuentes aquí y cambiarlo a las tapas Elsie Swash, - que cargarán desde aquí desde la Buehrle importada. - Digamos que quería agarrar algunas otras fuentes de fuentes de Google Web aquí. - También puedes volver y encontrar algunos más aquí. - Está bien, - así que sigamos adelante y busquemos otra fuente que quiero usar. - Y este se llama clicker clicker Scripts. - Ahí está. - Script Clicker. - Estoy usando estas fuentes muy decorativas. - Está bien. - Y luego vamos a ir al uso rápido, - que es el enlace aquí mismo. - Y luego iré tol desplácese hacia abajo y haga clic en la pestaña de importación que importación, - y resaltaremos ese texto y volveremos al código y solo pegaré esto - debajo del otro. - Entonces hay otra diversión. - Este es el 1er 1 es Elsie swash caps, - y la siguiente diversión a la que estoy vinculando se llama script clicker. - Y entonces tengo que asegurarme de que me refiero a esta fuente con el nombre correcto, - que es script clicker y coma retroceder de cursiva. - De acuerdo, - así que volvamos a nuestro código y vamos a seguir adelante y usar, - ¿eh qué? - Usa guión más rápido para nuestros H que vienen aquí en un poco. - Sí, - sólo vamos a seguir adelante y aferrarnos a éste y volveremos más tarde y divertirnos y - está bien, 24. Selector de clase: - así que ese es un buen comienzo. - Aprendimos selectores de tipo selectores permite entrar y seleccionar cualquier elemento en todos - esos elementos en todo el sitio web y darles estilo de una manera particular. - Ahora, - eso está todo bien cuando queremos que todo se vea igual si tienes un - puñado de elementos que te gustaría darle estilo de todos modos que tu mejor apuesta es usar- algo llamado selector de clases. - Entonces, - electores de clase, - los de los sí, - ya sabes, - thes Puedes aplicar Teoh, - um, - tantos elementos como quieras. - Entonces si tienes un puñado de elementos y quieres que sean peinados de cierta manera, - ya sabes, - tal vez no todos los párrafos, - pero sólo un párrafo específico o dos o tres párrafos y el sitio que te gustaría ser - un poco diferente. - Se puede utilizar algo llamado selector de clases. - De acuerdo, - entonces, - electores de clase, - tienen un carácter definitorio especial al principio de ellos que deja saber al navegador- que esto no es sólo un elemento normal. - Buscamos sentarnos al estilo. - Buscamos darle estilo a un nombre de clase específico, - por lo que siempre empezamos clases electores de clase con el símbolo de periodo. - Entonces siempre tengo el primero poner un punto, - y luego le voy a dar a esta clase un nombre específico. - Entonces realmente depende de mí nombrarlo. - Y quiero elegir un nombre que va a tener sentido para mí más adelante. - Entonces vamos a ver primero el uso para esto, - y luego volveré y lo nombraré. - Entonces voy a entrar a la página del catálogo, - y voy a seguir adelante y desplazarme hacia abajo. - Y si vengo aquí abajo a la línea 75 catálogo sobre HTML, - se puede ver que no tenemos h dos aquí llamado Marcas Destacadas. - Um, - y más tarde, - Voy a poner una especie de textura de madera detrás de todos estos elementos. - Y este texto va a estar encima de eso. - ¿Sería la textura de la madera y me gustaría que fuera blanco. - No me gusta tener el color blanco y todos los otros H twos van a tener el - color negro, - así que no puedo simplemente decir h dos para este selector porque eso haría que toda la edad a - es blanco. - Y en este caso, - Quiero que todos los que usen para ser negros. - Pero este específico, - digamos éste y tal vez en un par de páginas más también. - Yo quiero hacer algunos de los H dos es blanco. - Entonces la forma en que podría hacer eso es que puedo asignar una clase específica a esto y hay dos pasos - al proceso. - Un paso es aplicar una clase al elemento usando el atributo de clase para que pueda seguir adelante y - digamos que esta edad también tiene una clase de y lo voy a llamar texto de leche así. - Sólo usaré guión bajo y diré que esto tiene una clase de texto de leche. - Entonces me conformé por completo este nombre de clase. - Entonces me conformé por completo el nombre de esta clase en particular on, - Decidió llamarlo texto de leche porque quiero que todos estos textos sean blancos, - blanco lechoso. - De acuerdo, - así que ahora que le he dado a esto un nombre de clase único aquí- puedo aplicar esta clase en tantos elementos como quiera que quiera tener el mismo blanco - color para que su texto comience con todos. - Simplemente aplícalo a éste. - Pero puedes jugar a clase varias veces. - También puedes aplicar múltiples clases también. - Por ejemplo, - si tuviera otra clase aquí como quisiera agregar una clase llamada Shadow que va a agregar una - sombra al elemento. - Puedo simplemente poner un espacio aquí y aplicar clase adicional nombrada tantos nombres de clase que quiera - aquí estaría, - como otra clase que podría ahí mismo. - Entonces al poner un espacio aquí, - puedes aplicar tantas clases como quieras a un solo elemento, - y puedes aplicar clases es muchas veces en las páginas que quieras. - Puedo seguir adelante y copiar esta clase de texto de leche a tantos otros elementos diferentes como yo - veo conveniente. - Entonces ahora que he etiquetado esto con una clase en el HTML Aiken saltar de nuevo al CSS. - Y ahora puedo apuntar a esa clase usando el símbolo de periodo y escribiendo el nombre de la - clase, - que es texto de leche. - Y eso es sensible a mayúsculas y minúsculas. - Puedes maquillar el nombre de todas formas que quieras, - pero vas a querer usar sólo letras y números. - Y es sensible a mayúsculas y minúsculas, - y no quieres usar el espacio entre el nombre. - Um si quieres indicar un espacio puedes usar guiones o guiones bajos así. - De acuerdo, - así que para mi texto de leche, - vamos adelante y pongamos a este tipo para que tenga esa familia de fuentes que acabamos de cargar aquí, - que se llama script clicker. - Entonces vamos a seguir adelante y decir Font dash family y podemos agarrar el código para que eso funcione, - que está aquí. - Paso para su llamado script clicker cursivo. - Y en realidad, - ya deberíamos tener eso copiado. - Yo sólo debería poder dar un ritmo de eso ahí mismo. - ¿De acuerdo? - Y además de la familia de fuentes, - también quiero cambiar el color del texto para que sea blanco así. - Entonces para blanco, - Tengo un par de opciones. - Puedo escribir la palabra blanco. - Puedo usar el equivalente decimal Hexi, - que es s FF, - o puedo usar los valores RGB 2 55 coma 2 55 común a 55 o los valores RGB A a 55 a 1 - así. - Um, - así que en este caso, - sólo usaré el nombre de color blanco. - Está bien. - Y además agreguemos algo llamado sombra de texto. - Entonces en CSS tres, - también podemos agregar sombras del dedo del pie nuestro texto, - que es una especie de efecto agradable. - Y esto acepta cuatro valores que tengo que poner aquí. - Este primer valor aquí es el desplazamiento horizontal. - Entonces esto va Teoh, - empuja la sombra tres píxeles a la derecha. - Si digo negativo, - empujaría a la sombra tres píxeles a la izquierda. - En este caso, - no quiero que la sombra se mueva horizontalmente, - así que sólo voy a decir cero, - y entonces el siguiente valor es el desplazamiento vertical. - Entonces quería bajar a píxeles desde el frente, - y el tercer valor que ponemos aquí se llama el Radio de Desenfoque. - Entonces Radio Azul es salud. - Cuántos píxeles fuera la sombra se desdibujará o suavizará Si dijeras cero sería una muy afilada - sombra si dices como 10 pixeles, - eso será realmente suave y suave a medida que se desvanezca, - vamos a seguir adelante y encontrar aquí un medio feliz de tan solo tres píxeles. - Y por último, - queremos especificar un color. - Entonces si quiero que esto sea negro, - podría usar el valor decimal Hexi 000 será el equivalente de los colores negros allí. - De acuerdo, - vamos a seguir adelante y guardar eso, - ¿De acuerdo? - Y vamos a probar esto. - Hice una caja fuerte y puedo volver a pestaña a mi navegador y podemos. - Vamos a ver, - eso estaba en la página del catálogo vio. - Pasar a la página del catálogo y desplácese hacia abajo. - A ver si ves este de aquí y te pegarán. - Refrescar. - Enfriar. - Entonces eso está bajo futuras marcas, - y se ve bastante pequeño. - Creo que vamos a hacer esto un poco más grande, - pero se puede ver que es blanco ahora tiene son diversión Web especializada, - y tiene sombra. 25. Selector de ID: - Entonces lo siguiente que queremos hacer es aprender de otro tipo de selector. - Por lo que sabemos que los selectores de clase nos permiten etiquetar ciertos elementos con un nombre de clase específico- y podemos aplicarlo a tantos elementos como nos guste en una sola página. - También podemos aplicar múltiples clases al mismo elemento si queremos. - Ahora hay otro tipo de selector llamado selector I D y los selectores de ideas se airean un poco - diferente en que sólo se puede aplicar, - um, - uno yo d por página. - Más bien, - se podría decir, - um, - podemos aplicar a Onley uno elementos su página. - De acuerdo, - Entonces la forma en que puedes recordar que es que las clases se pueden aplicar a múltiples cosas y yo d tiene -la palabra I d, - que se puede pensar es significar una identidad única. - Por lo que d s tener una identidad única. - Sólo pueden aplicar a una cosa por página. - Entonces muchas veces cuando estamos construyendo sitios web, - tendremos que aplicar clases usando el símbolo de periodo y luego etiquetando una clase - atributo aquí- dándole el mismo nombre de clase. - Um, - si quieres tener, - ya sabes, - múltiples elementos con estilo dentro de una página. - Pero también hay muchas veces en las que tenemos elemento único que realmente sólo sirve a uno - propósito. - Entonces, - por ejemplo, - si tenemos, - como una barra de redes sociales o una caja y la página que es única y sólo hay uno de ellos -por página- entonces estamos mejor para usar un I. - D. - I. - D. - S tienen más fuerza, - más autoridad. - Si utilizabas estilos anteriores como si peinaras un color usando una clase, - Um y luego usaste un i d para establecer otro color. - El I D en realidad tiene más autoridad que una clase, - por lo que es más específico porque se refiere a un solo elemento en la página. - Entonces, - por ejemplo, - vamos a seguir adelante y crear ah box y darle un único I. - D. - Vayamos a la página html de punto índice y me voy a desplazar hacia abajo. - Y aquí tenemos el encabezado y he puesto algún lugar a más comentarios en el código desde el - último ejercicio porque quería, - uh, - quería mostrar que vamos a romper este encabezado en dos secciones a cajas más pequeñas. - Entonces aquí está mi encabezado de apertura en mi etiqueta de cabecera de cierre. - Ahora dentro de ese encabezado, - recordarán antes de que tengamos el rumbo, - Um, - que es el nombre de la empresa aquí. - Eso es y eso está anidado dentro de un grupo H. - Así que voy a darle estilo a esto, - ah, - pequeño logotipo de aspecto elegante. - Y decidí que quiero tener esto en su propia caja. - Quiero tener el logo en una caja y voy a darle estilo a la navegación en una caja separada. - Entonces para hacer eso, - rodeemos esto con una etiqueta div como esta dirá, - def, - y recordarás del ejercicio anterior que devore d I V es la forma en que creamos una - cajita. - Esto está creando estéticamente una caja alrededor de esta zona, - y voy a seguir adelante y hacer lo mismo aquí abajo. - Queremos que este también esté en una caja separada como así. - Entonces pondré un poco de ropa div aquí manos. - Nos aseguraremos de que puntera en deuda este contenido resaltará y golpeará la tecla tabuladora para inventar todo - de eso. - Al igual que bien, - um, - así tengo el este h uno y h dos está en una caja y la navegación está en otra caja. - Ahora, - si me gustaría etiquetar esto si este es un elemento único tiene una identidad única en la página, - entonces puedo etiquetar esto con un I. - D tan similar a cómo creamos este atributo de clase. - También puedes crear un tributo de idea. - Entonces podríamos decir, -por ejemplo- lo hizo y podemos darle un I D igual a logo. - Entonces esto va a ser un panel de logotipos o como un comprado una caja eventualmente lo va a dar estilo para ser una - caja en la parte superior de la página que atraviesa la pantalla y tiene nuestro logotipo dentro de ella. - Y este de aquí abajo se llama Knave Bar. - Entonces si quiero, - puedo darle a ésta unas ideas únicas. - Bueno, - bueno digo yo d igual a Dav bar como ese cheque y vamos a volver y en ah y estilo esto - uno un poco más tarde. - En primer lugar, - veamos el estilo de este. - Entonces esto le dimos una identidad única de logo. - Ya que le dimos a esto una idea de logo, - ahora tengo prohibido dar cualquier otro elemento en la página. - El mismo I d. - Así que de nuevo una vez más con clases puedes aplicar esta clase a tantos elementos como tú -como en la pagina, - mientras que con un I d like I D igual logo, - sólo podemos aplicar esto una vez por página. - Entonces he ido adelante y he agregado esto a todo el resto de las páginas del sitio para que podamos ir -de nuevo al CSS ahora- y podemos apuntar a que i d. - Y justo de la misma manera que las clases tienen un carácter identificativo único en el período de inicio - como para indicar que se trata de una clase de texto de leche. - Yo DS también tengo un carácter identificativo único al principio, - y ese es el símbolo de libra o etiqueta hash o algunos lo llaman el signo de número. - Y eso es Ah, - se puede crear que usando turno en el número tres va a crear eso y entonces sólo vamos a - decir el nombre de la I D. - Vale, - así que sólo para hacer una revisión rápida de nuevo, - si estamos tratando de seleccionar todos los elementos, - podemos usar un selector de tipo simplemente poniendo el nombre de la etiqueta como párrafo o ajuste. - Leyenda. - Si estamos tratando de seleccionar, - ya sabes, - un grupo de elementos, - tal vez hemos rociado un estilo a través de múltiples elementos en una página, - como hacer lechoso parte del texto. - Entonces podemos crear una clase usando el símbolo de periodo aquí delante del nombre de la clase. - Y con un I D. - Utilizamos el símbolo de libra si queremos aplicar a un elemento único de la página. - Está bien, - así que aquí, - dentro del logo, - vamos a seguir adelante y bueno, - vamos a escribir un comentario aquí para estos dos. - Olvidé escribir que éste selecciona, - uh, - bueno decir elementos con una clase igual a texto de leche, - Vale y logo, - que tiene un i único. - D. - Esto selecciona un elemento singular. - Sólo un solo elemento cómo decir ese elemento. - Es como el elemento con y d igual a logo así. - Entonces en el código HTML, - agregamos, - I d igual logo toe uno de nuestros dibs. - Puedes agregar ideas a cualquier elemento, -por cierto, - podrías poner una idea en un párrafo o en lista ordenada, - o un elemento de lista o una imagen, - lo que quieras, - pero sólo una por página que es importante. - En realidad obtendrás un aire de validación si trataste de tener un 92 múltiples cosas en la misma - página. - Entonces solo entramos aquí y le vamos a dar a este tipo un color de fondo y estaremos - aprendiendo mucho más sobre estética de cajas y cómo estilizar cajas un poco más tarde. - Pero sólo para que podamos ver que Div recuerde, - creamos un div aquí con una idea de logo que está rodeando a estos grupos de edad, - que rodea al H uno y H dos. - Si quisiéramos dar esta caja de color, -por ejemplo- podemos usar el fondo de la propiedad y vamos a seguir adelante y decir fondos. - Le daremos un color azul claro. - Usar Aqua Aqua es un nombre de color que puedes usar para el azul claro, - así que vamos a guardar eso. - Entonces si volvemos al código aquí y nos refrescamos, - se puede ver que acabamos de crear una barra en la pantalla con. - En realidad es un div con una idea de logo y su entorno a este contenido. - Está bien, - y volveremos un poco más tarde y el cambio de estilo es diferente. 26. Selector desesperado: - Echemos un vistazo a otro tipo de selector llamado selector descendiente. - Los selectores del Senado nos permiten ir al interior de Elemento Aparente y seleccionar todos sus - Niños o todos sus descendientes, - en otras palabras. - Entonces, - por ejemplo- si guardamos logo de libra y luego ponemos un espacio después de la palabra logo y luego decimos H uno. - Lo que esto está haciendo es porque aquí hay un espacio. - Entre este selector y ese selector, - está básicamente bien seleccionar en Lee los de página dentro de los elementos con el logo i D igual - toe. - Entonces, - en otras palabras, - si somos el navegador, - podríamos leer esto de la siguiente manera. - Entonces desde el navegador, - diría yo, - Um OK, - ve y encuéntralo un elemento único con la idea de logo y luego entra dentro de él y estilo - todo el H uno. - Entonces, - en realidad, - esto sólo es peinar los H si sucede que están dentro del contenedor padre llamado logo -. - Entonces aquí es donde entra en juego el anidamiento. - Este H uno está anidado. - Es descendiente o hijo de este elemento padre llamado logo. - Entonces este es un descendiente de do con la idea de logo y tal vez tengo otros H - en otro lugar de la página y no quiero que esos H sean estilizados. - Digamos que solo quería darle estilo a este h de una manera específica. - Me vendría bien una clase o podría lanzar un i d en esta h. - Pero ya tengo una identificación I d. - Aquí por este contenedor. - Y si tuviera múltiplo, - cada uno está aquí. - Podría entonces usar un selector descendiente para decir estilo que cada uno, - pero sólo si suceden que aparecen dentro de otro elemento. - Así que selectores descendientes, - Un realmente útil para eso otra vez, - estamos diciendo, - Hey, - navegador ir y encuentra un elemento con una idea única de logo y luego espacio. - El espacio aquí golpeando barra espaciadora indica que se trata de un selector descendiente y lo estamos diciendo - entra dentro de logo y ahora selecciona todos los H. - Está bien. - Y lo que vamos a hacer es cambiar la familia de fuentes de todos estos H de aquí, - y lo vamos a cambiar a script clicker, - que es mi fondo web especializado. - Descargué así. - Está bien. - Y si quería seleccionar a los H dos específicamente dentro de su. - Ya sabes, - no todos los H dos están en toda la página, - pero en Lee los dos de edad si están dentro del div con la idea de logo. - Entonces este de aquí es el mismo. - Este sólo va a seleccionar h dos si están dentro de un elemento con la idea de logo. - Entonces para estos h dos también hacen la familia de fuentes y esta voy a hacer la otra, - uh, - vamos a ver cuál es, - uh, - l c espacio swash caps. - Es muy importante que deletreemos eso correctamente y es un retroceso. - Usará cursiva si lo necesitamos. - Está bien, - Entonces, - selectores descendientes, - van y le dan estilo a algo que está dentro de otro elemento padre. - En otras palabras, - H uno es descendiente de este padre. - Entonces usamos la barra espaciadora en el medio indican esa relación que estaban peinando esto si es - dentro de esto. - Entonces vamos a entrar y guardar esto, - y luego vamos a volver a nuestro navegador y vamos a refrescarnos, - y eso cambió estas fuentes aquí. - Entonces no está afectando. - Esto no son h dos, -y esto es un H dos aquí- y no está afectando a estos otros H dos en el resto de la página. - Sólo está afectando este h dos porque está dentro de este Div con una idea de logo. - Está bien, - genial. - Echemos un vistazo a otra situación. - Tenemos todas estas secciones en la página, - y si quiero decir que quiero darle estilo a todos los enlaces que airen dentro de todas las secciones -, - puedo hacerlo diciendo espacio de sección A. - Estoy creando un descendiente selector que dice sólo seleccionar SIDA, - ya sabes, - unas etiquetas que son los descendientes de sección. - Entonces esto es literalmente sobre Lee va a darle estilo a un enlace. - Si está dentro de una sección, -veamos, - este no es Eso está dentro de Header. - A ver si podríamos encontrar uno aquí, - por ejemplo. - Bueno, - aquí hay uno. - Se trata de un varón para enlazar. - Entonces aquí hay una sección y luego aquí lo tenemos dice correo electrónico y hay un enlace de ancla aquí. - Entonces éste, - este impuesto de enlace en realidad se volvería estilizado entonces. - De acuerdo, - entonces lo que vamos a hacer por estos tipos es que vamos a darle un color. - Le daremos un gran color como ese usando los valores decimales Hexi y los enlaces por defecto tienen - un subyacente Y si quisiéramos eliminar eso, - podemos establecer la cubierta la decoración del texto en ninguna. - También puedes configurar la decoración del texto. - Teoh subyacente también puedes hacer overline así y voltea overline Y también puedes hacer -line a través de la cual se ve así en este caso queremos dio solo lo dejaré Subrayar - está bien, - que en realidad es el predeterminado. - Pero sólo para demostrarse con esta propiedad en particular se ve como ahí. - Está bien, - así que si guardo eso, - um y vuelvo a comer fresco normalmente por enlaces por defecto o azul Pero dije para que fuera - una especie de color gris, - volvamos al navegador y bajaremos aquí y nos se refrescará y se puede ver -estos ya no son azules allí ahora color gris-, - como es thes links y el enlace de correo electrónico aquí en la parte inferior de las páginas. - Bueno, - muy cool 27. Selector de Psuedo: - siguiente, - echemos un vistazo a los pseudo selectores o a veces referidos como selectores de pseudo clase. - Ahora los pseudo selectores se utilizan frecuentemente para darle estilo a un elemento basado en su relación -entre otros elementos. - O, -en el caso de este ejemplo- vamos a darle estilo a un elemento basado en un estado de evento. - Por lo que es bastante común que los enlaces de estilo. - Um, - y vimos antes que si usamos este selector de tipo para A, - va a entrar, - seleccionar todos los enlaces de anclaje en la página y darles estilo los cuales peinamos algunos aquí en las - secciones para tener ah, - gran color y ser subrayado. - OK, - pero ¿y si quisiéramos cambiar el estilo de un enlace cuando el ratón pasa sobre él? - ¿O qué pasa si quisiéramos cambiar el estilo del enlace cuando ya se le ha hecho clic? - Entonces para hacer eso, - tenemos que usar algunos pseudo selectores para que los pseudo selectores identifiquen el aire es el símbolo de colon. - Entonces primero comienzas con un elemento, -y esto podría ser cualquier elemento en este caso- estaban interesados en estilizar enlaces durante un estado de evento en particular. - Entonces vamos a usar dos puntos, - y luego vamos a escribir el nombre el nombre específico del estado de evento que estamos tratando - objetivo. - Entonces, ¿un enlace de colon? - Lo que hace es que esto selecciona enlaces, - um, - durante su estado por defecto. - Ahí es cuando no se tocan. - De acuerdo, - así que si visito una página y nunca he interactuado con el enlace antes, - esto controlará ese estilo. - Um, - así que digamos que queremos hacerlos negros. - Bueno, - Seo, - hagamos que los enlaces de color negro cuando visitemos por primera vez la página y ah bueno, - dile que quite la decoración del texto para que no haya subrayado debajo de los enlaces. - Se quedará texto decoración ninguno. - Está bien, - echemos un vistazo a otro evento. - Estado para enlaces llamados Visitado. - Ahora un colon visitó bien seleccionar y estilo enlaces que ya después han hecho clic o visitado. - En otras palabras, - piensa que ya hemos visitado en el navegador. - Entonces, - por ejemplo, - a veces para indicar que alguien ya ha hecho clic en el enlace, - se puede cambiar el color del enlace como podría hacer que el enlace sea gris o algo así -. - Y, - um, - cualquier tipo de decoración de texto o información como esa se va a heredar del - selector anterior. - Entonces ya que dije decoración de texto ninguno, - éste tampoco será ninguno. - Um, - tampoco tendrá ningún subyacente bajo. - No tendrá decoración, - pero cambiaré el color de negro a gris. - Aquí, - esto es una libra gris mediana C C c. - Vale, - echemos un vistazo a otro enlace Estado. - Este es el favorito de todos, -que se llama flotar así, - que probablemente puedas imaginar. - Este seleccionará enlaces, - uh, - durante el desplazamiento del ratón. - Entonces esto se llama, - como al ratón sobre así. - Está bien, - así que éste es divertido. - Podrías hacer lo que quieras. - Se puede cambiar el color. - Se puede poner salvaje. - Um, - ya sabes, - tal vez lo que vamos a hacer es mantener el color igual. - Um, - tal vez los colores negro en el hover. - Y tal vez lo que haremos es sólo añadir un subyacente aquí irá a la decoración de texto - y ponerlo para subrayar así. - Entonces de esa manera, - cuando, - sabes que normalmente no hemos hecho clic en un enlace, - um, - no hay decoración de texto, - y luego cuando pasamos por alto, - aparece una pequeña línea debajo de ella así. - Está bien. - Y siempre que especifique los enlaces, - debe hacerlo en este orden, - para que, - um, - los enlaces de abajo puedan heredar características de los estados de enlace anteriores. - Está bien, - um, - vamos a seguir adelante y crear otro. - Este será nuestro estado de evento final, - que se conoce como activo. - Y éste es, - um realmente no ves éste tan seguido, - pero éste selecciona enlaces, - Um, - mientras el botón del ratón está deprimido o cuando estás haciendo clic en ellos. - Entonces esto es literalmente mientras tienes el botón del ratón abajo. - Entonces en cuanto hagas clic y sueltes el botón del ratón, - ya no verás que esto desaparece. - Entonces para ver esto realmente claramente, - en realidad hay que hacer clic y mantener pulsado el botón del ratón. - Entonces es sólo una fracción de segundo. - Por lo general que vemos aquí este evento en particular. - Entonces sólo cambia el color a rojo solo para que eso realmente obvio Ahí, - podemos seguir adelante y ahorrar. - Está bien, - así que este estilos enlaza en base a su en los diversos estados eventos. - Entonces lo que queremos hacer es cambiar esto un poco para que podamos usar estos estilos para - enlaces de estilo dentro de una parte específica de la página, - porque muchas veces no te interesa mucho estilizar enlaces a través de todas las páginas -. - Lo mismo. - Pero por lo general, - ya sabes, - tienes enlaces en cierta parte de la página que te gustaría darle un estilo diferente. - Entonces tal vez, - ya sabes, - los enlaces durante el interior principal de la barra de navegación principal tienen un estilo en particular y entonces - tal vez enlaces abajo en tu cuerpo, - copiar, - tener otro estilo. - Y entonces tal vez, - ya sabes, - los enlaces en la parte inferior de la página tienen un estilo diferente. - Entonces en mi página particular aquí.- Voy a tener algunos enlaces que se van a esparcir entre esta copia corporal regular. - Um, - y también tienen enlaces como en una barra lateral como las mejores marcas y un archivo de zapatos, - uh, - etcétera. - Y creo que voy a darle estilo a estos enlaces en la parte superior aquí en mi NAB son completamente - de manera diferente. - Estos van a ser más prominentes, -texto más grande, - y los voy a hacer como botones en la parte superior de la página. - Y entonces si vengo aquí abajo al final de la página, - tenemos una seria de enlaces que están en una sección todos por su cuenta. - Esta es la sección de detalles justo antes del pie de página en la parte inferior de la página. - Y me gustaría establecer estos enlaces para que se peinen de manera diferente a estos enlaces aquí arriba ese aire - dentro de las secciones. - De acuerdo, - entonces ¿qué hemos aprendido previamente? - Eso nos ayudará. - Bueno, - antes usábamos un I. - D. - En una de las dibs. - Y entonces usamos algo llamado selector descendiente al poner un espacio aquí fueron capaces de -dar estilo a todos los H, - pero sólo cuando están dentro de este elemento, - o todos los dos cada uno. - Sólo cuando están dentro de este elemento con la idea de logo para que pudiera ser usado abajo - aquí también. - Entonces si quiero diseñar enlaces en diferentes partes de las páginas, - tengo un par de opciones. - Puedo aplicar clases a enlaces en ciertas áreas y especificar que un enlace con una clase determinada - tiene un cierto estilo. - Um, - o lo que es aún más fácil es que puedo usar un selector descendiente, - así que sigamos adelante y saltemos de nuevo a la página del índice, - y vayamos hacia abajo a la sección llamada Detalles debería estar en la parte inferior de la página. - Si estás en la parte superior de la página, - Te mostraré un truco. - Volveré a subir. - Entonces digamos que estás en la parte superior y te gustaría saltar muy rápido al fondo de la página -. - Si te toca comando y la flecha abajo en Mac, - es comando flecha abajo y en ventanas, - se controla flecha abajo. - Te saltaremos todo el camino hasta la parte inferior de la página así, - y entonces solo puedes desplazarte hacia arriba. - Esto en realidad es uno un poco demasiado lejos. - Aquí está la sección de detalle final y luego, - ah, - quiero dedo del pie desplazar hacia arriba arriba detalles y esta sección aquí. - Yo quisiera darle a este tipo un I D. - Así que voy a darle a esta sección de la página identidad única. - Y sólo voy a llamarlo detalles, - ¿de acuerdo? - Y entonces seguiré adelante y guardaré eso. - Y ya he agregado este código para ti en el resto de las páginas para que solo podamos volver - aquí para estilo dot CSS y debilitar. - Convierte estos en selectores descendientes diciendo detalles de libra espacio un carbón y enlace. - Por lo que de esa manera en los enlaces de Lee durante su estado normal se peinarán si están dentro de la sección - detalles. - Correcto. - Por lo que puedo añadir eso a este de aquí. - £2 detalles. - Espacio así. - Entonces esto dirá, - Oye, - navegador. - Ve y encuentra algo con una idea única de detalles. - Entra dentro de ella y da estilo. - Ya se hace clic en los enlaces, - siempre que hayan sido visitados. - Y esto dice, - Oye, - navegador, - entra dentro de la sección con la idea de detalles y encuentra algunos enlaces. - Y cuando la gente se cierne sobre ellos, - estilo de esta manera. - De acuerdo, - Y luego por último, - tenemos éste que es estado activo. - Por lo que sólo va a estilizar enlaces durante su estado activo si está dentro de la sección - con la idea de detalles. - Está bien, - impresionante. - Um, - así que salgamos a guardar esto y volvamos al navegador y vamos a hacer una - actualización. - Y estos enlaces aquí están dentro de las secciones. - Estos están dentro de las secciones sin nombre. - No tienen un I. - D. - Así que estos aire siguen grises en su subrayado inicialmente. - No obstante, - si vengo aquí abajo a esta sección, - se puede ver que estos enlaces son negros en el hover y cuando hacemos clic en ellos el estado activo -vemos, - se ponen de color rojo. - Y siempre que ya les hemos hecho clic, - eso y volvemos a la página. - Deberían ser geniales. - Cual es el ST visitado en realidad ya he hecho clic en estos enlaces. - Por eso están todos grises ahora mismo. - Está bien, - así que a veces te gusta un ST visitado. - Si tienes muchos enlaces, - la gente puede ver en qué enlaces han estado o han hecho clic. - No obstante, - otras veces es posible que sólo quieras compartir los mismos, - um, - estilos de tu estado normal de enlace que tu ST visitado. - Entonces si quisiera hacer eso una manera es que podría bajar aquí y solo decirle dedo del pie ser - negro y ya sabes, - no hay decoración de texto cuando visitamos el enlace también, - um, - pero esto es algo redundante porque yo solo estoy dando los mismos estilos aquí y aquí. - Y puedes notar que con bastante frecuencia estás usando los mismos estilos, - así que en realidad hay ah, - mejor manera de hacer esto. - Um, - siempre podemos usar el algo llamado selector compuesto, - que utiliza la coma dos separados, - selectores diferentes. - Entonces puedo usar esto para darle estilo a ambos al mismo tiempo poniendo una coma aquí y luego -pegando estos detalles un visitado aquí arriba y puedo deshacerme de éste aquí-, déjame seguir adelante y borrar ese así. - Entonces lo que hice ahí fue que dije, - libra detalla una coma de enlace de dos puntos, - lo que significa y también darle estilo a esto. - Entonces si fuera a leer esto en voz alta en la forma en que el navegador interpreta esto, - sería como decir Ah hey, - navegador. - Ve y encuentra algo con una idea única de detalles. - Está bien, - Ahora ve dentro de ella y encuentra algunos enlaces. - Y durante su estado normal, - cuando nadie les ha hecho clic, - estilo de esta manera y luego la coma significa y también ir y encontrar un elemento con la idea- de detalles e ir dentro de ella y también estilo enlaces durante su visitado ST Así que básicamente, - en un solo selector. - Al usar una coma, - puedes agrupar diferentes elementos, - y en este caso, - hemos dicho ir y estilo, - enlaces normales y también yendo enlaces de estilo que se han visitado. - Por lo que ahora tanto el estado de enlace predeterminado como el ST visitado serán de color negro con decoración de texto de ninguno. - Entonces es bueno y prueba esto todo a salvo, - y volveremos a refrescarnos. - Y ahora, - ya que el estado por defecto y el ST visitado o lo mismo. - A pesar de que he hecho clic en estos enlaces antes, - todos siguen siendo negros. - Ya no estamos viendo el gran color. - Um, - y se puede ver cuando me acerco, - nos ponen un poco subrayados así para hacerme saber que estoy flotando sobre el enlace. - Ahora. - De verdad depende de ti. - Lo que haces durante estos enlaces estados. - Hay todo tipo de posibilidades. - Um, - He hecho algunas cosas realmente convencionales, - que quizá son un poco aburridas. - Acabo de cambiar el color o la decoración del texto, - pero en realidad se pueden cambiar los textos. - Se puede cambiar el tamaño de la fuente, - y el enlace se verá como si estuviera creciendo más grande. - El texto parecerá como si estuviera creciendo más grande al pasar el cursor. - Um, - también puedes cambiar como el peso del texto para hacerte más grueso. - Se puede cambiar el, - um, - el estilo para que se convierta en un tallix. - Se podría incluso cambiar realmente la fuente por completo, - lo que sería una especie de efecto extraño. - Um, - puedes cambiar los colores de fondo y todo tipo de cosas. - También siéntase libre de consultar los siguientes enlaces. - Eso le dará recurso opcional alternativo es que se puede ir a revisar en línea para aprender - más sobre los selectores CSS. - Entonces lo que vas a querer hacer a continuación es seguir adelante y pasar al reto de código, - donde estarás usando CSS para darle estilo a tu proyecto de sitio web. 28. Herramientas de desarrolladores (parte 1): - Hola, - chicos. - Bienvenido de nuevo. - Quería mostrarte un video de ejemplo rápido de cómo usar tus herramientas de desarrollador y estas - herramientas te ayudarán a solucionar y depurar problemas y problemas que tengas a lo largo del - camino. - Por lo que anteriormente sí miramos el uso de validadores HTML y validadores CSS como una forma de validar - la sintaxis de nuestro código. - Otra palabra. - A veces simplemente escribirás mal accidentalmente o escribirás mal algo, - y eso creará un error en tu código. - Pero también va a haber un montón de veces cuando no hay errores sintácticos donde tú - has escrito todo correctamente. - Pero todavía hay algunas cosas que no se muestran exactamente de la forma que te gustaría en el - navegador. - Y ahí es donde la herramienta desarrollador entra y realmente se convierte en una excelente herramienta para resolver - estos problemas. - Primero, - echemos un vistazo a una especie de situación hipotética que he establecido aquí en el código. - Y por supuesto, - no verás estos cambios específicos en tu código encendido, - y realmente no hay necesidad de que sigas para este ejemplo. - Puedes seguir adelante y simplemente sentarte, - relájate y mira. - Um, - y he puesto un ejemplo aquí donde me gustaría cambiar el estilo de este particular - párrafo de la página. - Entonces esto está dentro de mi sección de venta y lo que hice fue que decidí que, - ya sabes, - quería tener todo este párrafo y tal vez, - ya sabes, - texto en diferentes lugares de mi página web. - Um, - tener esta clase de resaltado que cambiaría el texto a un color azul. - Por lo que normalmente este texto de párrafo es negro, -como saben, - y vamos a cambiar eso para que sea de estilo azul. - Por lo que he ido adelante y he añadido esta clase aquí de punto culminante a este elemento. - Y luego si entro en mi estilo dot CSS, - se puede ver aquí abajo en línea 87 que he creado una clase de lo más destacado y lo puse para tener - el color del azul. - Entonces en este punto, - asumo que todo se ha hecho correctamente en este texto aparecerá en el - navegador como azul. - Ahora, - extrañamente, - cuando voy al navegador y refresco la página, - te darás cuenta de que este texto, - de hecho no es azul sino que en realidad se lee. - Entonces en lugar de una especie de rasgarme el pelo o gastar, - ya sabes- posiblemente horas cavando a través de todas mis líneas de código CSS para averiguar dónde he - me contradijeron. - Esta es una situación excelente para entrar y usar las herramientas de desarrollador. - No, - No voy a demostrar herramientas de desarrollador y todos los diferentes navegadores. - Pero proporcionaré algunos enlaces en la parte inferior de este video donde podrás aprender más sobre - las herramientas de desarrollador para Firefox y Safari. - Pero voy a demostrar cómo usar las herramientas de desarrollador para resolver un problema como este en Google - Chrome. - Entonces una de las formas en que puedes abrir tu panel de desarrolladores en Google Chrome es si vas -a la vista, - menú desplegable y notarás aquí que hay una selección llamada Desarrollador. - Y bajo esto, - tenemos la capacidad de traer aquí herramientas de desarrollador para que puedas ir a ver herramientas de desarrollador - desarrollador y eso traerá este panel así. - Ahora, - en cualquier momento, - si quieres cerrar tu panel de desarrollador en el lado izquierdo, - hay un poco de X aquí. - Puedes seguir adelante y hacer clic en eso para cerrarlo, - y luego tienes de nuevo tu vista completa del navegador. - Otra forma en que puedes traer herramientas de desarrollador es inspeccionando un elemento específico para - ver el código HTML y CSS que está estilizando o afectando a ese elemento en el diseño de tu página. - Y para hacer esto, - lo que quieres hacer es hacer click derecho en el elemento que les interese - inspeccionar. - Entonces ya que tengo un ratón de dos botones aquí, - puedo hacer click derecho. - Y si estuvieras en una laptop Mac, - puedes usar dos dedos y hacer clic, - Um, - o podrías mantener el control y hacer el clic izquierdo, - por lo que el control y un clic traerán este menú arriba y otra vez. - Si tienes un ratón de dos botones como yo, - solo puedes hacer un clic derecho y subir este menú. - Y luego vamos a ir a inspeccionar Element aquí mismo, - y eso traerá al panel de desarrolladores. - Y no sólo trae arriba el panel de desarrolladores y en realidad también destaca thes - elemento específico que me interesa inspeccionar, - Así que si venimos aquí en el lado izquierdo de esto, - estamos actualmente en el panel de elementos y aprenderemos un poco más tarde. - Aprenderemos un poco más sobre estas otras pestañas, - pero en este momento sólo estaremos explorando el panel de elementos y puedes ver a continuación. - Tenemos todo el código HTML que se presenta. - Um, - e incluso te dan pequeñas flechas donde puedes expandir y colapsar los diferentes - padres para ver los otros elementos HTML que están anidados por dentro. - Y cuando se selecciona así, - También soy capaz de ver todo el CSS. - Está afectando a este elemento. - Entonces, - realmente, - cualquier vez que haga clic ah, - de un elemento a otro así, - se puede ver que el CSS está cambiando su en Lee, - mostrándome el código CSS que se aplica a ese específico elemento. - Entonces en nuestro caso, - debilitar descubrir algunas cosas sobre este párrafo en particular, -por ejemplo- como faras del CSS. - Eso lo está gobernando. - Sabemos que en el archivo CSS de punto normalizado en línea 63. - Me dicen que está heredando la familia de fuentes de San Serif, - y aquí nos dice que este estilo se hereda del selector HTML aquí. - De acuerdo, - también tenemos información sobre la hoja de estilo de los agentes de usuario, - y el agente de usuario es esencialmente mi navegador. - Eso significa que Google chrome está agregando este estilo predeterminado. - Está diciendo que en Google chrome que los párrafos se establecen para mostrar bloque y que tiene - una cantidad específica de margen que rodea el párrafo. - También concedemos e mi hoja de estilos personalizada, -que se llama Estilo, - que CSS tiene tres estilos diferentes que están afectando a este párrafo en particular. - Me dice que uno de ellos de aquí está en línea. - 19. - Por lo que siempre puedes leer esto viendo el nombre del archivo y luego después de los dos puntos, - en realidad te dirá la línea específica en el código donde puedes encontrar este estilo en so - aquí Online 19 de style dot CSS. - Puedo ver que he aplicado un tamaño de fuente de 16 píxeles y una altura de línea de 1.5 m. - Vale, - También puedo ver que en línea 87 he aplicado una clase de resaltado y le dije que tuviera el - color de azul. - No obstante, - notarás que aquí el color azul está realmente tachado. - Siempre que veas una de las propiedades siendo tachada así, - lo que está haciendo es decirte que este estilo está siendo anulado por algún otro estilo- . - Y en este caso, - si miro arriba aquí sólo unas pocas líneas por encima de esta clase destacada me he contraído. - Y aquí he usado un selector descendiente donde he seleccionado el elemento en este caso, - la sección con la idea de venta. - Y he dicho a todos los párrafos dentro de ella que tengan el color rojo. - Entonces en esta situación, -en realidad se puede ver que usar un selector descendiente va a dominar, - tener más autoridad que una clase. - Entonces aquí se ha tachado el color del azul, - y en realidad estoy viendo el color rojo para ese texto. - Ahora, - si paso el cursor sobre esta declaración en particular, - notarás que hay una pequeña casilla de verificación en la que puedo hacer clic al lado y que va a activar- y deshabilitar ese código para que podamos ver qué cambios ocurren dentro de la vista del navegador. - Entonces, - por ejemplo, - si hago clic en esta casita de verificación sobre el color rojo En otras palabras, - al deshabilitar este estilo, - se puede ver eso ahora. - Lo más destacado es de hecho, - um tiene la autoridad para volver a colorear el texto en azul. - Entonces ahora volvemos a ver el texto azul. - Si reviso esto de vuelta, - se va a leer. - Si desmarco ese estilo, - será azul. - Entonces lo que esto me está diciendo es que si de verdad quiero que esto sea azul. - Voy a tener que ir toe line 83 de style dot CSS para quitar este color rojo de ese - estilo. - Entonces sigamos adelante y probemos eso. - Voy a volver a mi código aquí, - y voy a bajar la línea 84 aquí y puedo ver el color rojo. - Entonces si sigo adelante y elimino este estilo o en este caso, - solo seguiré adelante y comentaré esto y luego volveré a guardar y volver al navegador -y actualizar-, - y ahora puedo ver que se corrigió ese problema. - Entonces cualquier cambio que hagas aquí dentro de las herramientas de desarrollador, - en realidad no cambiarán tu código. - No es lo mismo que entrar en impuesto sublime y cambiar físicamente el código. - En realidad es sólo mostrarte un adelanto. - Así que de nuevo, - herramientas de desarrollador o simplemente mostrarte una vista previa para que puedas jugar con - solucionar problemas de valores hasta conseguir que las cosas se vean como quieres. - Y luego se puede utilizar la información como el archivo y el número de línea para entrar en el - código real y realizar esos cambios de forma permanente. - De acuerdo, - entonces, - aparte de poder habilitar y deshabilitar estilos, - también puedes crear nuevos estilos haciendo clic dentro de aquí al escribir otras cosas. - Por ejemplo, - impugno las cosas antes de aplicarlo realmente en el código diciendo cosas como, - Ya sabes, - tamaño de fuente. - Y entonces puedo escribir, - Ya sabes, - como tres m algo así, - y puedo ver cuánto más grande se pone el texto, - dice Aiken. - Ah, - eso es un poco demasiado. - Yo le diré a ém y a ver cómo luce eso. - Y entonces puedo decir 1.5 ellos y tal vez eso sea perfecto. - Entonces si resulta que sí me gusta el tamaño de fuente en 1.5 ellos, - puedo entonces no, - para entrar en estilo dot CSS online 87 solo agrega esto debajo de eso. - Entonces sigamos adelante y comprobemos eso. - Entonces otra vez, - si actualizo esta pagina, - voy a perder el estilo porque, - recuerden, - y las herramientas de desarrollador, - estás como una especie de previsualización del estilo. - Entonces si golpeo refresco, - ya no son 1.5 ellos. - Pero ahora sí sé que puedo entrar aquí y añadirme permanentemente al código y jugando - alrededor con los diferentes tamaños. - Yo pude previsualizarlos antes de que realmente tomara una decisión aquí para comprometerme con este tamaño. - Entonces si refresco eso ahora- puedo ver ese cambio reflejado aquí. - Aparte de escribir nuevas declaraciones CSS y probarlas dentro de las herramientas de desarrollador -, - también puedes cambiar los valores existentes. - Por ejemplo, - aquí En línea 19 y estilo punto CSS. - Tiene estilos para mi párrafo, - como tamaño de fuente y altura de línea. - Entonces, - por ejemplo, - si me interesa jugar con altura de línea en lugar de hacer clic para crear una nueva - declaración, - también puedo hacer clic y seleccionar el valor para una propiedad preexistente como altura de línea. - Entonces la altura de línea sí existe en texto sublime, - y simplemente estoy probando un valor diferente para que pueda escribir un nuevo valor aquí. - Yo también puedo, - adicionalmente golpear la flecha arriba y abajo de mi teclado, - y eso cambiará el número así. - Entonces, - por ejemplo- impugno diferentes alturas de línea golpeando la flecha arriba o abajo así como -bueno, - o puedo escribir en una cantidad precisa escribiendo 1.4 algo así, - y yo soy capaz de ver ese adelanto. - Y si me gusta la forma en que se ve, - puedo seguir adelante y luego cambiar eso aquí dentro del código CSS real. 29. Exhibición de elementos: - Hola. - Bienvenido de nuevo. - Se trata de diapositivas 3.1 diseños de página de construcción. - Echemos un vistazo a algunos temas aquí que nos ayudarán en el camino a crear diseños de riel - sitio web para que podamos posicionar elementos y crear estructura de columnas en la página. - Entonces vamos a necesitar mirar la diferente forma en que los elementos se muestran en el navegador. - Vamos a echar un vistazo a algo llamado Modelo de caja, -que nos permitirá explorar las habilidades para dimensionar y escalar elementos así como cómo - disminuir el espaciado dentro de un exterior de elementos. - También vamos a echar un vistazo a algunas nuevas estéticas de caja, - por lo que aprenderemos algunas propiedades diferentes que podemos usar para darle más estilo a nuestros elementos. - Um, - en el pasado anteriormente mirábamos el color de fondo. - Pero ahora vamos a pasar a mirar cosas como agregar en una imagen de fondo, - redondear las esquinas de nuestros elementos, - crear un borde, - agregar opacidad y sombra de caja. - También vamos a ver el flotador de posicionamiento de flotador. - El posicionamiento va a ser tu solución ir a la creación de estructura de columnas y posicionamiento - elementos en la página. - Entonces primero tenemos que entender que todos los elementos por defecto ya sea muestran una de dos maneras - en el navegador. - Por lo que ciertos elementos en el navegador pueden haber notado ya de ejercicios anteriores - se muestran uno al lado del otro. - Por ejemplo, - las imágenes que utilizan la etiqueta AMG y los enlaces que utilizan la etiqueta A a menudo se muestran uno al lado del otro. - Y esa es la forma por defecto que mostrarán en cualquier navegador. - Ah, - y eso es porque son a lo que nos referimos como elementos de línea o elementos que se muestran en - línea por defecto. - Por lo que en los elementos de línea son incapaces de aceptar a. - Dentro de la altura, - sólo van a ser del tamaño del contenido. - Por lo que el contenido dentro del horno en el elemento de línea dictará el ancho y la altura de la de - ese elemento, - en otras palabras y en los elementos de línea. - También, - No aceptaré espaciado por encima o por debajo de ellos. - Los elementos interiores, - sin embargo, - no pueden existir armoniosamente lado a lado en la misma línea con otros elementos en línea. - Entonces ejemplos de elementos de nivel de bloque que has visto han sido cosas como encabezamientos o - párrafos. - Te darás cuenta cada vez que pongas como un encabezamiento o párrafo. - Los elementos que coloques después de ella siempre aparecen debajo en la siguiente línea hacia abajo, - por lo que los elementos de nivel de bloque pueden aceptar ancho y alto. - Podemos darles dentro de la altura, - propiedades para dimensionarlos en la pantalla. - Um, - y también pueden tener margen, - que es que pueden tener espaciado por encima y por debajo de ellos. - Los elementos de nivel de bloque siempre ocuparán la línea completa en la que están. - En otras palabras, - un elemento de nivel negro no puede existir lado a lado en la misma línea que otro nivel de bloque - elementos. - Echemos un vistazo rápido a un ejemplo de esto. - Entonces sólo voy a ir a tinker dot io y he puesto un ejemplo aquí de esta chica, - y este sitio es como una almohadilla de rasguños. - Um, - es similar a otros sitios que, - como Js fiddle y tinker been que te permiten, - um, - básicamente a - um, la derecha algunos CSS html y o javascript y esto y ver cómo que conoces el - resultado de eso. - Vea cómo eso se muestra en el navegador. - Está bien. - Entonces puedes ver que he creado para dibs en el html dos desarrollos y da esencialmente - crear un contenedor o una caja en la pantalla- y les he dado a ambos una clase genérica de caja. - Um, - así que aquí tenemos la clase de caja de puntos aquí mismo. - Yo especifiqué una clase de caja, - y he ido adelante y dado a los elementos un color de fondo de aqua, - que le está dando este color azul claro. - Está bien, - ahorita, - También le he dado a esta caja un ancho de 100 píxeles y una altura de 100 píxeles. - Un poco más tarde, - hablaremos de todas las diferentes posibilidades de dimensionamiento. - Pero por ahora, - sólo podemos mirar la propiedad con y la propiedad de altura, - y le hemos dado una cantidad fija de píxeles sólo para que este sea un cuadrado perfecto. - También le hemos dado thes propiedades, -que no hemos visto antes, - que se llama relleno y margen. - Entonces el relleno es espaciado dentro del elemento, - y el margen es espaciado fuera de los elementos. - Está bien, - um, - y bueno, - otra vez, - volveremos. - Y cuando entremos en más detalle sobre el modelo de caja se discutirá un poco más sobre cómo - relleno y factor de margen en el tamaño de los elementos. - Está bien, - así que estos tipos se dibs de aire. - Sabemos que desarrollos por defecto, - muestran bloque en el navegador, - motivo por el cual el cuadro número uno aparece por encima de la casilla número dos, - que aparece a continuación. - Entonces tenemos este apilamiento vertical. - ¿Por qué? - Porque estos aire por defecto, - estos elementos de nivel de bloque de aire elementos de nivel negro aparecen uno por encima del otro y ellos- ocupan todo el espacio horizontal. - Está bien, - ahí rey del espacio horizontal. - En otras palabras, - vale, - así que si alguna vez quiero cambiar la forma en que se muestra un elemento, - también tenemos la propiedad CSS llamada display. - Entonces por defecto, - este tipo muestra bloque así. - Pero si me gusta, - en realidad puedo cambiar esto a en línea así. - Entonces si cambio esto a en línea y vuelvo y hago clic en correr, - podemos ver el efecto ahí es que estas casillas ahora aparecen uno al lado del otro. - Entonces pasaron algunas cosas aquí cuando pusimos a estos tipos en línea, - probablemente te diste cuenta de que esto ya no tiene 100 píxeles de ancho y 100 píxeles de alto. - Entonces en cuanto establecemos que esto sea un elemento en línea, - estamos notando que en los elementos de línea, - Aunque conduzca lugar lado a lado, - también pierden algunas habilidades. - Está bien, - Entonces es decir, - ya no es capaz de aceptar en un ancho y alto. - Porque, - como mencioné en línea los elementos sólo son tan amplios como el contenido dentro de ellos. - Entonces si empezara a escribir más texto aquí, - en realidad se pondría un poco más amplio a la derecha. - También tenemos el podríamos ver el margen, - que es el espaciado fuera del elemento. - Podemos ver que existe en el lado izquierdo y derecho del elemento. - No obstante, - ya no existe en la parte superior ni en la parte inferior. - De hecho, - el azul aqua se colorea justo arriba contra el borde del marco aquí porque ya no hay - cualquier espaciado por encima. - Por lo que los elementos de nivel interior pueden existir uno al lado del otro armónicamente. - No pueden aceptar un con su estatura, - y no pueden aceptar el margen superior e inferior. - Entonces otra vez, - si cambio esto de nuevo a bloque y hago clic en correr, - lo puedes ver. - Es capaz de ah, -excepto anchura y altura ahora- y vemos espaciado arriba y abajo, - y también podemos ver que están apilados verticalmente. - Está bien, - entonces hay una especie de híbrido ah de estos dos. - Hoy en día, - la mayoría de los navegadores soportarán este siguiente método, - este siguiente valor para visualización. - No obstante, - um, - los navegadores como Internet Explorer siete y abajo tienen limitado parcial o tal vez incluso saben - el soporte para este valor en particular, - que se llama en línea. - Dash block, - bloque de escritorio interior es, - uh, - especie de como el amor hijo de los elementos de nivel de línea y bloque. - Algo así como un elemento en línea en un elemento de nivel de bloque. - Hacerlo y su hijo en bloque de línea tiene especie de parte de la calidad de calidad, - algunas de las características de ambos padres. - Si quieres pensarlo de esa manera, - esa es una especie de tonta forma de describirlo. - Pero es una especie de cómo funciona. - Entonces si pongo a este tipo en linea dash block, - es capaz de aceptar dentro de la altura. - Y es capaz de tener margen en la parte superior e inferior. - Um, - y también puede exhibir uno al lado del otro. - Por lo que hay algunas ventajas únicas de la en línea. - Ah, - el elemento de bloque en línea. - Um, - y dependiendo de lo que intentes hacer, - en realidad podría funcionar para ti. - Está bien, - um, - hay algún tipo de desenlaces inesperados. - Ocasionalmente, - cuando usas en bloque de línea en un diseño de página, - y en lugar de demostrar todos esos ejemplos, - busca un enlace debajo de este video. - Um, - y habrá un enlace de recursos. - Eso será a un buen artículo en línea que habla de algunas de las locuras. - Bueno, - especie de. - Algunas de las partes buenas y las malas de usar en bloque de línea para mostrar elementos. - De acuerdo, - Um, - sin embargo, - vamos a Teoh aprender. - Ah, - un método alternativo para posicionar elementos de nivel de bloque. - Es una estructura de columnas como esta llamada posicionamiento flotante o flotante que va a - realmente resolver todos nuestros problemas y construir diseños de página. - Pero no obstante, - Quería mostrarte las diferentes formas que los elementos pueden mostrar en el navegador. - Y también quería llamar la atención sobre el hecho de que al usar esta propiedad, - la visualización de la propiedad CSS, - en realidad podemos cambiar la forma en que se muestra un elemento si lo elegimos. 30. Modelo de caja: - Entonces primero podemos ver las palmaditas, -que mencioné. - Patting es el espaciado interior de un elemento, -y entonces tenemos margen, - que es el espaciado exterior de un elemento. - También tenemos la propiedad border, - que le podemos dar a los estilos un grosor y colores así para agregar un borde, - que es una línea o trazo en el borde de un elemento también. - Ahora todas estas diferentes piezas en partes se suman a la medida del ancho y - altura del elemento. - Y de eso se trata realmente el modelo de caja. - Entonces echemos un vistazo a esta imagen. - Este diagrama aquí demuestra el modelo de caja, - Um, - y lo que te están mostrando aquí es que el margen aquí es thes espaciado fuera de los - elementos. - Por lo que esto empuja sobre otros elementos que puedan posicionarse junto a este elemento para que - no estén justo el uno contra el otro. - Por lo que este es un tipo cómodo de buffer o espaciado entre elementos, - y se puede ver aquí se puede especificar margen para margen superior, - margen izquierdo inferior y derechos de margen. - Por lo que la frontera puede ser de cualquier tamaño que quieras. - El borde puede tener un píxel de espesor. - Podría tener 10 píxeles de grosor. - Se puede especificar diferente tamaño de bordes, - y eso va a ser un espesor adicional de trazo en el borde exterior de su - elemento. - Ahora, - dentro de la frontera, - tenemos algo llamado relleno, - por lo que palmaditas es el espaciado interior de los elementos. - Entonces si escribí texto dentro de aquí, - si escribo hola, - mundo, - si no quiero que ese texto esté justo en contra del borde de mi caja, - entonces lo que puedo hacer es añadir algún tipo de relleno aquí, - palmaditas a la izquierda, - relleno a la derecha, - palmaditas en la parte superior o en la parte inferior para alejar el contenido del borde del elemento. - Para ver esto, - la forma más fácil de ver el relleno y la acción es dar un color de fondo a su - elemento o dar un borde para que pueda presenciar el contenido dentro del elemento moviéndose - lejos del borde o viendo un cómoda cantidad de espaciado entre el borde del - color de fondo y el Khan, - donde el contenido comienza aquí. - De acuerdo, - así los colores de fondo irán atrás, - relleno hasta el borde del elemento hasta el borde. - Entonces el modelo de caja está conformado por el contenido con el relleno, - el borde, - y entonces el margen ahora es si las cosas no fueran lo suficientemente complicadas, - tengo que hablarte de la existencia de dos modelos de caja diferentes. - Entonces la forma en que resulta son navegadores como Firefox, - Safari y Chrome todos usaron un modelo de caja conocido como el modelo W three C box. - Entonces se dicta el W tres C que cuando especificamos el con o la altura de un elemento, - estamos hablando del espacio disponible dentro de ese elemento para el contenido. - Y si agrego relleno o borde o margen, - eso es adicional en cantidad adicional que tenemos que sumar al ancho. - De acuerdo, - entonces lo que quiero decir con eso es digamos que tengo una caja un div, - por ejemplo. - Y especifico que ese def debe tener 200 píxeles de ancho. - Lo estoy describiendo con, - um aquí- que es el contenido con Así que si digo con 200 píxeles en fuego, - Fox en Safari, - en Chrome y en ópera que 200 píxeles va a conformar la cantidad de espacio disponible - para el contenido dentro de tu elemento. - Ahora, - si también especifico relleno, - que es espaciado dentro del elemento. - Digamos que especifico 10 píxeles de relleno que va a sumar en 10 píxeles al lado izquierdo y - 10 píxeles al lado derecho. - Entonces ahora, - en lugar de tener 200 píxeles de ancho, - ya sabes, - si especifico con 200 píxeles y palmando 10 pixeles, - la medida real de este elemento es ahora de 220 píxeles. - ¿Por qué preguntas? - Porque inicialmente dijimos que el con era de 200. - Pero palmaditas tenemos que sumar es una cantidad adicional. - Por lo que las palmaditas no se incluyen en el ancho, - Um, - en el con valor usando los navegadores, - todos los navegadores que acaten el modelo W three C box. - Así que 200 píxeles de ancho más 10 píxeles de palmaditas aquí y 10 píxeles de palmaditas aquí hacen que esto - elemento en realidad, - 220 píxeles ahora, - está bien, - podrías preguntarte por qué te importarían todas estas matemáticas. - Bueno, - resulta que cuando empezamos a construir estructura de columnas que necesitamos saber cómo por qué- estas columnas son para que realmente puedan caber uno al lado del otro. - Solo tienes tanto espacio de pantalla o pantalla inmobiliaria es, -lo llamamos, - y necesitas hacer que estas cosas encajen armoniosamente lado a lado. - Entonces eso es una cosa a tener en cuenta es que fuego Fox Safari, - cromo y ópera usaron el método de modelo de caja W tres C Ahora, - en contraste, - Internet Explorer tiene su propio método de modelo de caja. - De acuerdo, - así que en el método de modelo de caja de Internet Explorer, - cuando se especifica 200 píxeles de ancho que en realidad va a incluir automáticamente cualquier - borde o relleno. - Está bien, - pero no margen. - Ni de los métodos del modelo de caja, - incluyendo el corte de margen. - Pero la principal diferencia entre la forma en que Firefox safari y chrome y opera consideran dimensionar -de un elemento versus la forma en que Internet Explorer considera el tamaño de un elemento es a saber, - que Internet Explorer incluye automáticamente el borde y el relleno. - Entonces lo que eso significa es, - digamos que digo que mi div tiene 200 píxeles de con bien en ambos navegadores, - ¿verdad? - Ambos navegadores aire mirando el mismo código y decimos 200 píxeles de ancho y 10 píxeles de - relleno izquierdo y derecho. - De acuerdo, - vamos a dejar la frontera fuera de ella por ahora. - Pero solo imagina que tenemos 200 píxeles dentro de 10 píxeles de relleno en todos los lados. - Entonces en el método de modelo de caja de Internet Explorer, - el elemento en realidad va a aparecer a 200 píxeles. - Entonces si dices 200 pixeles, - serán 200 pixeles. - Pero el espacio de contenido disponible en el interior es de sólo 180 píxeles de espacio para el contenido porque - 10 píxeles del lado izquierdo se toman por relleno, - y 10 píxeles del lado derecho se retoman por relleno. - Entonces con esos 200 píxeles de con, -tenemos que restar 20 pixeles, - lo que nos da 180 pixeles de espacio disponible para el contenido, - aunque el elemento en sí Onley ocupará 200 pixeles de ancho. - De acuerdo, - Y eso es otra vez, - en contraste, - el método W tres c, - donde, - en lugar de restar los 20 píxeles de relleno del interior, - tenemos que añadirlo al afuera. - De acuerdo, - tan literalmente, - si yo dijera, - con 200 píxeles de relleno 10 píxeles por todos lados en AII e Internet Explorer, - la caja tendría 200 píxeles de ancho tal y como le dijimos. - No obstante, - en Firefox safari, - chrome y opera, - en realidad se vería más amplio en ese navegador. - Serían 220 pixeles. - Yikes. - Esto suena a mucha molestia y trabajo. - Y de hecho, - fue en el pasado. - Esto realmente nos metió a muchos desarrolladores abajo. - Fue una gran fuente de molestia para mí. - Personalmente, - sé que puedo decir, - pero afortunadamente para ustedes, - ustedes chicos código de aprendizaje aéreo en un punto ahora donde hay algunas grandes soluciones en su lugar para - tipo de arreglar todas estas tonterías. - Pero, - ya sabes, - a lo largo del tiempo ha habido muchas soluciones diferentes para esto, - y voy a hablar de algunas de ellas, - y vamos a hablar de por qué algunas de ellas están bien de usar y por qué algunas de ellas - definitivamente no debe hacer para corregir esta diferencia de modelo de caja. - De acuerdo, - así que estas son algunas soluciones de hackeo. - Entonces de CSS uno y dos, - había algunas soluciones de hackeo diferentes donde había teclear un poco el código - de manera diferente para que se mostrara diferente para cada navegador. - También vamos a ver un método llamado box in a box, - y también vamos a echar un vistazo a un nuevo método que te recomiendo que uses para tu - project, - que se llama la propiedad CSS three box sizing. - De acuerdo, - así que primero, - hablemos de algunos hacks CSS más viejos y no hagamos a esta gente. - Entonces en el pasado, - alguien se dio cuenta de que si pones caracteres incorrectos en la propiedad CSS como slash - marca que ciertos navegadores ignorarán la marca de barra y otro navegador lo hará, - um, - otro navegador de hecho aún lo procesará y lo leerá. - Entonces ya sabes, - un navegador podría decir, - Oh, - Puedo Onley entender esto con de 100 píxeles porque está escrito correctamente. - Y entonces en realidad escribirías el ingenio varias veces, - pero para un navegador diferente. - Entonces otro navegador, -porque pones una barra aquí, - lo ignoraría. - Y sin embargo un navegador seguiría, - uh, - excepto este valor y luego cambiarlo dedo del pie 1 40 Así que para básicamente compensar el horneado para el - hecho de que Internet Explorer estaba mostrando de manera diferente. - Lo que haría la gente es que pondrían pequeñas marcas de barra y caracteres divertidos en los - atributos de ancho y alto, - y aplicarían, - ya sabes, - múltiples CSS diciéndole a diferentes navegadores que mostraran el con de diferentes maneras. - Esto en realidad te da un error de validación. - Si validas tu CSS, - da un aire. - Esto es algo así como una solución extravagante. - Realmente no confiaría en esto por el camino. - Um, - la única razón por la que no deberías usar esto es aunque funcione ahora- no hay garantía de que estas cosas vayan a trabajar en el futuro. - Y no vas a querer tener que volver a tu sitio años por el camino y quitar - algún tipo de código pirateado como este. - Entonces realmente no uses este método. - Este otro método se llama box en un método box, - y esto funcionará en todos los navegadores, - viejo y nuevo. - Es un poco más de una molestia que el último método que te voy a mostrar, - pero éste sí funciona. - Y, - um, - esto es una especie de centrado en torno a la idea de que la única diferencia entre los dos que compiten - modelos de caja es que uno de ellos, - excepto relleno y borde en el ingenio y el otro no incluyen palmaditas y - frontera en el con. - Entonces en serio, - si haces una caja que no tenga relleno ni borde en ella, - entonces no hay diferencia entre todos los navegadores. - Por lo que este método requiere código de marcado extra, - por lo que a mucha gente no le gusta este método. - Lo que eso es personalmente una de las cosas que no estoy muy seguro de este método es que lo - siempre implica tener que hacer dos cajas en lugar de una. - Pero la forma en que funciona esto es crear una caja exterior. - Entonces este div aquí es el externo, - y éste tiene un ingenio especificado, - pero no tiene margen, - sin relleno y sin borde. - En realidad deberíamos haber escrito Borde cero aquí también, - pero se obtiene el punto por lo que tiene un ancho y alto especificado, - tal vez, - pero sin relleno y sin borde son las principales cosas importantes aquí. - Por lo que este va a mostrar esta cajas exteriores va a mostrar lo mismo en todos los navegadores - porque no hay relleno incluido ni borde incluido. - ¿Verdad? - Entonces es faras Firefox y Safari e Internet Explorer preocupados. - Tiene 100 píxeles de ancho porque no hay inclusión de relleno ni borde. - Um, - y luego para Internet Explorer, - también ve que tiene 100 píxeles de ancho. - Pero entonces tal vez te preguntes, - pero ¿y si sí quiero tener relleno? - ¿Y si no quiero que todo mi contenido esté justo al borde de mi elemento. - Quiero un poco de espaciado cómodo para el I. - Entonces lo que se puede hacer ahí, - entonces, - es que se puede crear otra caja dentro del elemento una caja interior, - por ejemplo. - Y éste le podemos dar relleno. - Entonces este tipo de aquí tiene relleno dentro de ella, - pero tenemos deliberadamente no hemos especificado un con. - Entonces si haces este método, - en realidad funcionará en todos los navegadores. - Pero tu código HTML es el doble de líneas de código, - por lo general porque tienes cada elemento tiene una caja dentro de otra caja. - Está bien, - así que hoy en día tenemos el en CSS tres. - Tenemos esta maravillosa propiedad que llegó llamada Box Dash Size, - para que pueda decirle a mis elementos que tengan dimensionamiento de caja, - y puedo especificar cómo debe medir para que pueda forzar, - ya sabes, - todos los navegadores a ya sea utilizar el modelo de Internet Explorer, - que se llama Border dash box. - O puedo obligar a todos los navegadores a usar el W tres, - uh, - modelo llamado content dash box. - De acuerdo, - así que aquí he anotado que esto tiene un 94.3% de soporte, - al menos al momento de grabar este video, - la cantidad de navegadores que la gente está usando a nivel mundial que soportan o - entienden el tamaño de la caja de tres propiedades CSS no es alrededor del 94%. - Ahora la buena noticia al respecto es que los navegadores que no entienden que pequeño -porcentaje que no entienden esto esta propiedad de tamaño de caja pasó a ser Internet - Explorer versiones antiguas de Internet Explorer como I E siete y abajo. - Por lo que resulta que esas versiones antiguas de IE realmente utilizan esta medición el i E - modelo box. - Entonces, si configura el tamaño de su caja a border dash box, - realmente debería tener 100% de soporte. - En tanto que si usted lo dijo a la W tres Método valor de caja de contenido. - Si escribes el cuadro de contenido aquí, - realmente solo tienes alrededor del 94% de soporte. - Entonces en este caso, - um, - como que dejo ir la política en términos de quién tiene razón o quién está equivocado. - Y me gusta usar el método de modelo de caja I E diciendo caja dash dimensionamiento Caja de borde. - Esto va a hacer tu posicionamiento flotante y tu diseño de página en el dimensionamiento de tus - columnas. - Tanto más libre de preocuparte y sin complicaciones, -que verás a medida que pasemos al siguiente ejercicio, - donde construimos algún diseño de página. - De acuerdo, - así que aquí está ese gráfico real que te estaba mostrando, - y puedes ver que realmente es IE siete es el culpable. - Entonces hablemos de escalar elementos. - Ciertos elementos pueden tener un tamaño fijo en píxeles. - Se pueden utilizar píxeles para crear una cantidad estática o fija de con su altura y en todos - dispositivos, - todas las pantallas. - Siempre tendrá esa cierta cantidad de píxeles. - También puedes usar un porcentaje para escalar las cosas, - por lo que es de la misma manera que yo puedo decir, - 200 píxeles de ancho. - Yo también puedo decir, - como 100% ancho o 50% ancho y usar un porcentaje va a hacer fluida la cantidad, - lo que significa que va a responder al tamaño del dispositivo. - En realidad puede, - um, - ya sabes, - encoger y expandir ah, - porcentaje del espacio disponible en pantalla basado en cualquier valor que pongas antes del - porcentaje. - También tenemos la capacidad de establecer el ancho del tablero de los hombres y el tablero Max con o min altura del tablero y - altura máxima del tablero. - Por lo que estableciendo valores mínimos y máximos. - Tienes un umbral donde nunca escalará por debajo del valor mínimo o por encima del máximo - valor. - Por lo que el elemento todavía puede, - um, - expandirse dinámicamente en la página en función del tamaño del dispositivo o al tamaño de la ventana - navegador. - Pero tendrás un punto de parada, - un umbral mínimo donde se detendrá. - Dejará de encogerse a los hombres con o la altura de los hombres, - y dejará de crecer al máximo con o la altura máxima. - Está bien, - también tenemos un valor llamado auto y auto es realmente el predeterminado con o altura. - Básicamente, - establecer A con su auto de dedo alto es esencialmente lo mismo, - no es especificar un con su altura, - un ancho de auto en un elemento en línea básicamente, - como usted sabe, - sólo permitir el contenido. - Disculpe. - El elemento toe único ancho de BIA es el contenido frente a un elemento de nivel de bloque. - Si estableces algo a un ancho de auto, - los elementos de nivel negro realmente ocuparán sin A con especificado, - en realidad ocupan el 100% o el ancho completo de la pantalla, - así que auto lo hará, - ya sabes, - hacer cosas diferentes para ancho y alto, - dependiendo de la forma en que se muestre el elemento, - ya sea que se muestre en bloque de delineador o en bloque de guión de línea. - Está bien, - hablemos también de contenido. - Desbordamiento. - Entonces y si pongo un fijo con a un elemento, - Pero entonces hay más contenido del que cabrá, - entonces encajaremos dentro de ese elemento. - Entonces, ¿y si hago un cuadrado de 100 por 100 pixeles y coloco mucho contenido dentro de ella y - no encaja? - Bueno, - resulta que en realidad se puede cambiar eso estableciendo la propiedad de desbordamiento en visible, - oculto o desplazamiento. - Echemos un vistazo a eso realmente rápido en el navegador para que podamos usar estos ejemplos. - Aquí tenemos la caja uno y dos, - y, - um, - empecemos a añadir algo más de contenido aquí en la caja. - Voy a empezar a teclear así. - A lo mejor haría un par de retornos de línea aquí. - Sólo estoy escribiendo alguna jerga aquí. - Está bien, - vamos a correr eso y a ver qué pasa. - De acuerdo, - así que esto hizo exactamente de lo que estábamos hablando. - Um, - y también nos fuimos. - Esto está en bloque de línea. - Se puede empezar a ver algunas de las extrañas, - cosas tontas que en los elementos de bloque de línea hacen. - Voy a ir a cambiar esto de nuevo a bloque, - así que ahí es un poco menos confuso. - De acuerdo, - así que esta primera caja, - sólo tiene el Texas dice uno en ella. - Este siguiente cuadro le dice a, - Pero escribimos más texto y cabrá. - Entonces veamos la diferencia en un elemento de nivel de bloque cuando especificamos una altura o lo hicimos - no especificamos una altura. - Por lo que aquí tenemos la altura especificada de 100 pixels. - Vamos a seguir adelante y configurar esto el auto, - que es realmente cuál es el equivalente de no especificar una altura. - En realidad podríamos simplemente borrar esa propiedad. - Esta es la altura. - Auto es realmente el mismo si simplemente borramos eso ¿verdad? - De acuerdo, - so ah, - altura de auto o no especificar una altura en un elemento de nivel negro, - o en realidad también en un elemento en línea, - permitirá que el contenido crezca Aziz tanto como necesite para ajustarse al contenido. - Por lo que muchas veces fueron deliberadamente no especificando una altura. - Si tienes una caja en tu diseño y sabes que dices que tienes múltiples artículos de noticias y -no estás seguro de cuántos habrá ahí o en el futuro- podrías actualizarla. - Podría tener más y más artículos. - Um, - muchas veces, - simplemente no vas a especificar altura porque cuando no hay altura especificada los elementos simplemente van a - crecen tan altos como sea necesario a se va a expandir en función de cuánto contenido hay dentro de ella-. - De acuerdo, - um, - volvamos a especificar altura. - Entonces vamos a darle a esto una altura fija como teníamos antes. - Entonces diremos, - um, - Heights Colon 100 pixels. - Está bien. - Y volveremos a correr eso. - Está bien, - Excelente. - Entonces cuando le doy a esto una altura fija, - tengo que tener cuidado porque esta altura no es lo suficientemente alta para todo el texto que escribía - aquí. - De acuerdo, - um, - ahora podemos controlar eso usando una propiedad llamada Desbordamiento. - Entonces bajemos aquí y sigamos adelante y digamos Desbordamiento, - Colón y probemos uno llamado Oculto. - Digamos que desbordamiento oculto. - Está bien. - Y entonces correremos eso y veremos qué pasa. - Así desbordamiento, - oculto Bueno, - en realidad ocultar cualquier contenido que se desborda fuera de la altura o el ancho del elemento. - Entonces en realidad está cortando el contenido ahí. - No lo veo. - Um, - ocasionalmente, - quizá quieras usar esto si estás haciendo algo un poco más dinámico. - Si pasas a JavaScript, - por ejemplo, - puedes usar desbordamiento oculto, - um, - ya sabes, - emparejado con algún JavaScript para animar o deslizar contenido dentro de un fijo más pequeño - contenedor. - Entonces, - por ejemplo, - si está construyendo un deslizador de imagen, - podría establecer un elemento para que tenga su desbordamiento configurado en oculto, - y podría hacer imágenes mawr de las que caben dentro de ese marco. - Y luego puedes usar JavaScript para especie de animarlos. - Entonces una flecha mueve esas imágenes hacia la izquierda y hacia la derecha, - y sólo se puede ver una imagen a la vez, - las otras aire oculto porque tienes el desbordamiento establecido a oculto como ejemplo para - uso de eso, - um, - también tienes gente a veces haciendo algo llamado Desbordamiento Auto. - A ver qué hace eso. - Si cambio el auto desbordado, - Obtengo una barra de desplazamiento. - Entonces en línea Lyon y Mac, - es posible que no veas la barra de desplazamiento porque tendrás que pasar el ratón. - Y luego si tú, - um si usas el toque de dos dedos en la almohadilla táctil o tu rueda de desplazamiento de la boca, - en realidad se desplazará Es sólo que esconden la barra de desplazamiento aquí, - pero puedes ver en ventanas y también en ah - Mac Snow Leopard. - Ya verás. - La mayoría de los navegadores crearán aquí una barra de desplazamiento. - Entonces si el contenido es más grande de lo que cabrá, - si configuramos el overflow toe auto realmente obtendrá una barra de desplazamiento aparecerá. - Entonces en este caso, - Tengo una barra de desplazamiento vertical. - El contenido fue muy amplio. - Yo conseguiría un pergamino horizontal. - Bar es Bueno, - vale, - así que esa es la propiedad de desbordamiento, - que es útil para controlar. - Um, - ya sabes cómo fluirá el contenido dentro de un elemento ya sea que fluya, - se desborda fuera del elemento o no. - Está bien, - genial. - Um, - ya que miramos lo alto que responde de nuevo, - notamos que si establecemos la altura a auto o quitamos la altura, - notamos que el contenido simplemente se expande tan alto como necesita ser. - Echemos un vistazo a lo que sucede si configuramos el con el auto o, -en otras palabras, - si solo quitamos el corte ancho. - Entonces otra vez, - um, - estos elementos de nivel de bloque de aire o están mostrando bloque. - Y si no especifico A con para elementos de nivel de bloque que simplemente consiguen es ancho como pueden ser- . - Básicamente ocupan el 100% del espacio de la pantalla. - Está bien, - um, - que es exactamente lo que queremos. - A veces. - Ocasionalmente, - queremos algo para estirar todo el ancho de la pantalla, - y solo puedes usar un elemento de nivel de bloque y no especificar es Es contigo. - También podría decir que es con 2 100% si quieres. - De acuerdo, - um, - echemos un vistazo a las diferentes posibilidades para dimensionar entonces. - Entonces miramos, - um, - miramos a mostrar en línea versus bloque. - Nos fijamos en establecer el ancho y la altura auto o para fijar cantidades de píxeles. - Y miramos cómo reacciona el desbordamiento si no hay espacio suficiente para que el contenido encaje - dentro del elemento. - De acuerdo, - um, - así que echemos un vistazo a algunas otras posibilidades de ancho y alto. - Um, - volvamos aquí a con y sigamos adelante y probemos un porcentaje. - Entonces volvimos a mirar los píxeles. - Yo haré eso. - Eso fue Esto son 200 píxeles, - por ejemplo. - Yo puedo seguir adelante y cambiar con su y correr, - y se pueden ver 200 píxeles de con sus ¿Y si digo algo así como 50%? - Entonces nos quitaremos la P X aquí y pondremos un 50% así y correremos, - y se puede ver que en realidad está ocupando el 50% de lo disponible con aquí. - Te darás cuenta si le crují así a este tipo. - ¿Ves cómo es en realidad siempre exactamente la mitad de ese espacio ahí? - De acuerdo, - entonces, - por ejemplo, - si me gustara, - ya sabes, - 75% como ejemplo, - entonces está ocupando el 75% de la saliva en el exterior, - por supuesto, - y el relleno interior porque aún no hemos establecido la propiedad de dimensionamiento de caja, - pero se puede ver que está ocupando aproximadamente el 75% del espacio allí. - De acuerdo, - así que eso es un dimensionamiento de fluidos. - A veces queremos tener las cosas tamaño, - Ah, - escala basada en el ancho del espacio disponible en pantalla. - Y eso es usar un porcentaje. - Echemos también un vistazo al valor de Min y Max, - Así que voy a cambiar a este tipo por un hombre con hombres Dash Wits Museum en eso. - Entonces es más fácil de ver para que podamos salvar a los hombres. - Dash con, - saldremos y diremos 200 píxeles. - Y también especificaremos un guión máximo con y diremos como, - 600 píxeles así. - Está bien, - así que los hombres corren con y Max dash con También puedes hacer Min dash height y Max dash height y - vamos a ir y hacer click. - Corre. - De acuerdo, - así que este es en realidad el máximo de 600 píxeles con eso que estamos viendo aquí en este momento. - Aunque dé más espacio en la pantalla, - va a Onley ser un máximo con 600 píxeles ahí. - Y en este caso, - son 600 píxeles más el relleno y más el margen porque estoy en cromo, - ¿Verdad? - De acuerdo, - vamos a ver qué pasa si me cruje esto hacia abajo, - Voy a arrastrar esta ventana para darle menos espacio disponible. - Está bien, - así que aquí llegué al borde. - Oh, - mira, - está bajando su escala hacia abajo. - No hay problema. - Se va a seguir bajando hasta que llegue a ese mínimo con y luego se va a quedar - fuera de la habitación. - Está bien, - así que ahi, - cuando llego al mínimo con puedes ver en realidad conseguimos una barra de desplazamiento aquí en la parte inferior - de la pantalla aquí- y tengo que usar esa barra de desplazamiento para desplazarme y ver el resto de la contenido. - Y eso es porque usamos los umbrales de, -ya sabes- una cantidad máxima de 600 una cantidad mínima de 200 así. - Y otra vez, - sólo se expandirá hasta llegar al máximo con. - Y entonces se detendrá. - Está bien, - genial. - Entonces ese es un buen comienzo. - Entendiendo modelo de caja. - Volvamos a hablar de algunas de las otras cualidades del modelo de caja como margen - y relleno y borde. - Entonces empecemos agregando una frontera a este tipo. - Vamos a bajar aquí y sigamos adelante y agregarle una frontera a estas cajas. - Digamos frontera colon un píxel, - que es el ancho del borde. - Y luego voy a poner un espacio, - y voy a especificar el estilo de las fronteras sólo iban a hacer sólido. - Y si te gustaría ver un ejemplo de los otros estilos fronterizos, - estará mirando eso que viene en las diapositivas aquí en un momento. - Ah, - y entonces le podemos dar un color. - Entonces solo voy a decir que el negro especificará el color negro. - Ahí vamos. - Entonces volveremos a salir y correremos esto y ahí está mi frontera. - Bastante guay, - ¿verdad? - Así que en realidad puedo, - ya sabes, - cambiar esto Si quieres ver, - como lo que se ve a 10 píxeles, - si digo 10 píxeles de borde y corro, - puedes ver que hace eso. - Vamos a cambiarlo de sólido a discontinua para que podamos demostrar dónde termina el borde del fondo - color aquí. - Entonces si digo 10 píxeles discontinuados y hago clic en correr, - se puede ver ahora es una línea discontinua para el borde y se podría ver el color fondo- va justo hasta el borde del borde justo ahí. - Está bien, - Haremos esto un poco más delgado, - aunque. - Voy a volver a un sólido de un píxel así. - Y, - um, - juguemos con el espaciado, - entonces. - De acuerdo, - así que hablamos antes de margen y relleno. - Voy a seguir adelante y cambiarme. - Este tipo está con la espalda Teoh. - 101 100. - Entonces nos quedaremos. - 100 píxeles. - 100 píxeles. - Usado para hacerlos pequeños, - manejables. - Poco pequeño, - cajas manejables ser más fáciles de ver aquí. - Bueno, - entonces podemos acercarnos más de esta manera. - Entonces echemos un vistazo al relleno. - Ahora mencionamos que el relleno es espaciado dentro del elemento. - Si de verdad quieres ver de qué se trata todo eso aquí, - pongamos este relleno a cero y veamos qué pasa ahí. - Hacemos clic en correr y se puede ver cuando ajustamos el relleno a cero. - El texto está justo arriba contra el borde del borde allí, - por lo que el relleno cero significa que no hay espacio dentro del elemento. - Ahora, - si colocé 10 píxeles aquí como este 10 p x y salimos y corremos, - puedes ver ahora hay 10 píxeles de espaciado alrededor del elemento. - Y aquí porque tenemos la barra de desplazamiento algunos, - en realidad sólo está cortando ahí. - Pero ya sabes, -de hecho- lo que es esto es un poco desordenado. - Voy a deshacerme de eso ya que ya hemos aprendido sobre la propiedad de desbordamiento. - Sólo traigamos esto de vuelta bonito y sencillo aquí. - Como ese uno en dos. - Está bien, - um genial. - ¿Entonces el relleno es el espaciado interior del elemento? - ¿Y si quisiera una cantidad diferente de relleno a cada lado? - Entonces, - por ejemplo, - en este momento, - si solo uso un valor si digo palmaditas 10 píxeles, - añade 10 píxeles en la parte superior, - la inferior, - el lado izquierdo y el derecho. - Así que en CSS, - sí tenemos la capacidad de especificar cosas como relleno, - dash left, - ya sabes, - palmaditas dash right, - palmaditas dash top y patting dash bottom. - Y luego puedes cambiar la cantidad de relleno de tu costado. - Um, - ahora, - sin embargo, - en realidad es aún más fácil o tipo Leicester. - Si utiliza el método abreviado llamado patting, - y luego, - basado en la cantidad de valores que le dé, - afectará a qué lado se ve afectado. - Entonces, - por ejemplo, - si haces un valor como este, - sabemos que, - um, - un valor, - um, - afectará a todos los lados. - Entonces si solo digo 10 pixeles, - eso significa 10 pixeles por todos lados. - Si digo a valores como este, -si digo 10 píxeles 20 píxeles con solo poner un espacio entre aquí- pongo múltiples valores en este caso a valores para dos valores. - Aquí, - el primer valor, - um, - representa la parte superior e inferior. - Entonces tanto la parte superior como la inferior y el segundo valor aquí representan la izquierda y la derecha, - o, - ya sabes, - ambos lados. - Vamos a seguir adelante y poner este comentario aquí abajo, - para que quepan así, - Separaremos esto así. - De acuerdo, - así que un valor afecta a todos los lados. - Significa que tenemos relleno en todos los lados a valores representa que el primer valor es de 10 - píxeles en la parte superior e inferior y 20 píxeles en la izquierda y la derecha. - Está bien. - También podemos especificar relleno con tres valores. - Por ejemplo, - si digo, - como 10 píxeles, - 20 píxeles, - 35 píxeles o algo así. - Entonces en este caso, - si tenemos tres valores, - el primer valor representa la parte superior al 1er 1 es igual al superior. - El segundo valor representa ambos lados, - tanto izquierda como derecha, - y el tercer valor aquí representa la parte inferior. - Entonces si digo 10 pixeles, - 20 pixeles, - 35 pixeles, - lo que estoy haciendo es decirle al navegador que quiero 10 pixeles de espaciado dentro del elemento en - los 20 pixeles superiores de espaciado en ambos lados y 35 pixeles de espaciado en la parte inferior. - Bien. - Y si por alguna razón quiero tener una cantidad diferente de relleno por cada lado, - puedo especificar cuatro valores. - Entonces, - por ejemplo, - podría decir, - como, - ya sabes, - 10 píxeles, - 20 píxeles, - 35 píxeles, - cinco píxeles algo así. - Entonces en este caso, - tenemos cuatro valores. - Y la forma en que puedes recordar esto es pensar en un reloj y recuerda que comienzas por el - top a las 12 en punto. - Entonces el primer valor, - si nos imaginamos que esto es un reloj es la parte superior, - ¿verdad? - Y entonces el segundo valor aquí representa el lado derecho moviéndose en el sentido de las agujas del reloj. - Y el tercer valor aquí representa el fondo, - y el cuarto valor representa el lado izquierdo. - De acuerdo, - Entonces dependiendo de si tienes 123 o cuatro valores, - eso en realidad va a cambiar el espaciado en el navegador. - De acuerdo, - así podría decir, - relleno 10 píxeles, - 25 píxeles. - Animal. - Aleja aquí y correremos a este tipo en el navegador. - Y se puede ver que hay 10 píxeles en la parte superior, - y, - uh, - bueno, - en realidad, - es la parte superior e inferior, - pero no hay nada abajo cerca de abajo ahí. - Y luego tenemos 25 píxeles a la izquierda y a la derecha, - para que se puedan ver 25 píxeles aquí. - Hay más. - Hay más espaciado en el lateral que en la parte superior. - Está bien. - Y eso es mediante el uso de los dos valores 10 y 25. - De acuerdo, - así que este es el caso del margen. - También, - um, - margen puede ser valores diferentes. - Aquí, - se puede decir margen, - 10 píxeles, - 35 píxeles, - cuatro píxeles. - Y eso va a cambiar para ser 10 en el top 35 en los lados y cuatro en la parte inferior. - Algo así. - De acuerdo, - así que el margen es el espaciado fuera del elemento. - En realidad sólo mantengamos el margen igual en todos los lados. - Pero diremos, - um, - lo haremos una cantidad mayor. - Digamos 30 30 píxeles para ver qué pasa ahí sólo para demostrar que esto es espaciado - fuera del elemento. - Entonces vamos a seguir adelante y dar click. - Corre, - y se puede ver que ahora hay más espaciado fuera del elemento. - De acuerdo, - entonces, - um, - relleno es espaciado dentro del margen del elemento es espaciado fuera del elemento. - Empuja a los elementos el uno del otro desde su borde exterior. - Está bien, - Um, - así que esto son 30 píxeles. - Se puede notar. - Aquí hay 30 píxeles en la parte superior, - 30 píxeles en la izquierda y la derecha y 30 píxeles en la parte inferior. - Pero espera un segundo. - Aquí. - ¿Esta caja uno de aquí no tiene 30 píxeles en la parte inferior y no caja para tener 30 - píxeles y margen en la parte superior. - Eso es interesante. - Entonces pensarías eso porque se supone que están 30 píxeles por debajo de éste y 30 - píxeles por encima de éste. - Que esos valores se sumen y 30 más 30 sean de 60 píxeles. - De hecho, - aquí no hay 60 píxeles de espacio. - Sólo hay 30 y eso es por la forma en que se comporta el margen. - El margen puede superponerse. - Entonces, - por ejemplo- si dije que el va a seguir adelante y jugar con esto estableciendo el margen superior en 30 - pixeles, - digamos que el margen izquierdo y derecho es de 10 píxeles. - Pero pongamos más en la parte inferior, - Digamos que 50 píxeles de abajo. - De acuerdo, - así que ahora el número de caja, - una vez que tenga 50 píxeles de margen en la parte inferior y la caja número dos debe tener 30 píxeles de - margen en la parte superior. - De acuerdo, - así que si refresco eso, - resulta que los 50 píxeles ganan, - así que éste tiene 50 en la parte inferior, - así que en realidad está empujando a este otro elemento 50 píxeles hacia abajo. - Este de aquí sólo tiene 30 en la parte superior, - que probablemente termine por aquí. - Entonces, - um, - éste empuja 30 pixeles, - pero ya está siendo empujado 50 pixeles de distancia. - Por lo que estos márgenes se superponen al aire. - No se acumulan, - no se suman. - Entonces eso es una cosa a tener en cuenta sobre margen. - Está bien, - así que eso es genial. - Aprendimos mucho aquí. - Miramos dimensionar estas cajas. - Nos fijamos en agregar colores de fondo, - bordes y afectar la forma en que se muestra utilizando la propiedad de visualización que afecta el desbordamiento de - el contenido usando desbordamiento. - También miramos a explorar el espaciado interior del elemento, - usando relleno y fuera del elemento usando margen. - Está bien. - Y también aprendimos sobre especie de las diferencias entre el tamaño de caja e Internet - Explorer y el tamaño de caja en los otros navegadores. - Entonces, - a medida que pasemos al posicionamiento volverá a este modelo de caja encendido, - y nos será útil cuando empecemos a crear estructura de columnas. 31. Estética de caja: - Sólo sigamos adelante y saltemos de nuevo a los toboganes y pasaremos a la estética de caja. - Está bien, - así que vimos que podríamos agregar un color de fondo. - Pero ¿y si quisiéramos agregar imágenes de fondo a nuestros diseños, - lo que estará haciendo en el ejercicio? - Estaré demostrando que un próximo ejercicio que también miramos frontera tomará unos cuantos. - Echaremos un vistazo a algunas otras posibilidades de frontera en cuanto al estilo de frontera, -y también veremos algo llamado radio de frontera que podemos usar para alrededor de los bordes- de nuestras cajas. - Entonces si no queremos bordes afilados al cuadrado, - también podemos tener bordes redondeados usando la propiedad CSS de radio de tres bordes. - También vamos a ver la sombra de caja para agregar sombras, -lo que demostrará en el ejercicio también mirará la opacidad, - lo que nos da la capacidad de hacer ver un elemento a través o transparente. - Entonces incluso si pones en imagen en y quieres que esa imagen sea parcialmente transparente, - puedes establecer la propiedad de opacidad de un elemento para que se vea parcialmente a través. - También buscaremos ingredientes que nos permitan agregar un desvanecido de un color a otro color - dentro de un elemento en contraposición a tener un solo color de fondo. - Está bien, - así que estos airen algunas propiedades de fondo. - Ah, - Así que hemos visto la propiedad de fondo aquí en la parte inferior, - y en realidad acepta todos estos valores diferentes aquí arriba. - Por lo que también se puede decir fondo, - guión, - color y simplemente especificar un color. - Estos pequeños símbolos de tubería horizontal aquí sólo significan para representar o significado se puede utilizar un - nombre de color o hacks un decimal, - o aceptará los valores RGB. - Aquí. - También podemos decir imagen de fondo dash, - y podemos ver que eres l. - Y entre paréntesis. - Podemos apuntar a la ubicación de una imagen específica. - Ahora esto pondrá en realidad una imagen en nuestro elemento, - y esto es diferente de la etiqueta de imagen. - El elemento AMG, -que crea, - esencialmente, - crea una imagen de primer plano. - Siempre que creas una imagen usando el elemento de imagen, - en realidad ocupa espacio en el diseño, - y no puedes poner cosas encima de ella, - mientras que con una imagen de fondo, - puedes escribir encima de un fondo imagen. - Puedes poner otros elementos encima de una imagen de fondo, - y simplemente se deslizará detrás de todo. - Está bien, - así que son realmente cooperativos. - Simplemente se quedarán detrás de cualquier cosa que le pongas encima. - Y muchas veces, - la gente usa esto para crear texturas ahí dentro. - Sitio web, - por ejemplo, - Puedes si tienes una cámara, - puedes salir a tomar fotos del mundo y tirar. - Esa es una imagen de fondo detrás de los elementos de tu sitio web que puedas. - También, - si tienes un escáner te puede gustar escanear pedazos de papel, - puedes salir afuera y sacar como hojas de un árbol. - Tíralo en la cama de escaneo y podrás escanearlo. - Una vez tuve un profesor en, - Ah, - en mi licenciatura que nos estaba mostrando las cosas que puedes hacerlo Saran envolver en un escáner, - lo cual en realidad es bastante interesante. - Entonces si tienes un escáner y no quieres dañarlo poniéndote como líquidos y cosas -en él que pueden dañar el electrón ICS, - en realidad puedes Saran envolver tu cama escaneadora y te puede gustar galletita huevo crudo sobre él y escanearlo -. - Y si haces zoom en eso, - puedes obtener todo tipo de texturas interesantes y esas cosas. - Es como mirar a través de un microscopio si haces zoom en algunos escaneos de alta resolución -, - pero de todos modos tipo de apagarse en una tangente ahí. - En cualquier caso, - las imágenes de fondo son una gran manera de tener alguna vibración en alguna personalidad a tu sitio web -. - Está bien, - nosotros también la posición de guión de fondo, - y esto nos permite posicionar las imágenes de posición de fondo para que podamos mover la - imagen dentro del elemento. - Si necesitamos posicionar T ver una parte diferente de la imagen o hacer que la imagen aparezca en - una esquina diferente del elemento. - También podríamos especificar si esa imagen se repite o no. - Entonces a veces queremos, -como una textura o un patrón de azulejo, - repetir varias veces en un elemento como imagen de fondo. - Otras veces sólo queremos mostrar una sola imagen dentro de los elementos, - así poder, - poder decir guión de fondo, - repetir y especificar si algo se repite o no es muy útil. - Entonces puedes ver que puedes uh, - esto acepta los valores de repetición. - Acepta también la repetición X, - que se está repitiendo horizontalmente. - También acepta escritorio de repetición. - ¿Por qué es un valor que se está repitiendo verticalmente, -y también se puede decir que no se repita, - lo que significa que no lo va a repetir. - Todo lo que también podemos establecer el desplazamiento de fondo y el desplazamiento de fondo va a afectar si o - no esa imagen se desplazará cuando el navegador se desplace. - Entonces si el usuario se está desplazando por la página, - podemos controlar si los estados de imagen fijos en su lugar o si sigue la barra de desplazamiento -. - Entonces eso es una especie de efecto de necesidad que puedes controlar. - También podemos decir tamaños de guión de fondo, - una nueva propiedad CSS tres. - Y aunque esto no tiene soporte completo en todas partes, - esta puede ser una forma útil de hacer imágenes de fondo que se estirarán automáticamente al tamaño - de tu navegador. - Entonces si pones una, - um, - una imagen de fondo en el cuerpo, - um, - y dijiste que es tamaño de fondo al 100% por ejemplo, - para acentuado con, - estirará el para que a medida que la ventana del navegador se haga más grande, - más pequeña, - esa imagen se escale con ella. - Entonces eso es una especie de efecto ordenado que puedes crear usando el tamaño de fondo. - Bueno, - mira, - es que vamos a conseguir algunos ejemplos de esto en el ejercicio que viene ahora. - Muchas de estas cosas, - con la excepción de estos dos últimos desplazamiento de fondo, - tamaño de fondo thes 1st 1234 propiedades aparecen en realidad se pueden escribir en una sola - propiedad aquí llamada Fondo. - Entonces esta sería la taquigrafía similar a la forma en que tenemos fuente para taquigrafía. - Solo puedes decir fondo y en lugar de decir color de guión de fondo, - fondo, - imagen de guión, - fondo, - posición de guión, - fondo, - guión. - Repito, - se podría decir de fondo. - Y al poner un espacio entre los valores, - se puede especificar Ah, - color e imagen, - y se está repitiendo y posicionando información todo en un solo valor. - Este es un ejemplo de la taquigrafía fronteriza, -que acabamos de ver, - Um, - y esto es taquigrafía para el tamaño de guión de borde, - um, - y color de guión de borde y estilo de trazos de borde. - Y se podían ver todos los estilos aquí. - Sólido, - salpicadero punteado, - doble ranura, - dijo Rhijn Inicio. - Y así es como se ven. - Tan sólido hace una línea sólida. - Si le pones la celda fronteriza a correr para conseguir una línea de guión, - que vimos Dotted hace estos pequeños diamantes Aquí. - Doble es una doble línea y Groove Ridge incidente Inicio. - Toma el color que especifiques, - y crean como una versión clara en una versión oscura del mismo color. - Creo que es un 50% de 100% Phil para el color que selecciones para la frontera. - Por lo que estas fueron algunas otras posibilidades para el estilo fronterizo que son aceptadas. - Y todos estos funcionan en todas partes. - Estos están funcionando todos los navegadores, -viejos y nuevos-, porque el estilo de frontera ha existido desde hace bastante tiempo. - De acuerdo, - tan nuevo y CSS tres, - también tenemos radio de frontera y radio de frontera es ah es la forma en que vas a Teoh ronda - las esquinas de tus elementos si eliges. - Está bien. - Entonces con el fin de llegar a trabajar en todas partes, - usamos border, - dash radius Y este es un prefijo llamado dash Web kit. - Muchas veces cuando se introduce una nueva propiedad CSS en CSS, - lo que sucede es diferente. - Los navegadores tienen que determinar cómo van a aceptar esa propiedad y cómo el valor - afectará a su navegador en particular, - cómo su navegador en particular mostrará esta propiedad en este valor. - Entonces lo que pasa muchas veces es que diferentes compañías de navegadores, -mientras todavía están tomando decisiones y determinaciones sobre cómo van a aceptar esos - propiedades CSS y cómo van a mostrar esos valores- crean algo llamado prefijo donde toman el nombre de la propiedad. - Pero agregan un guión y luego algún tipo de prefijo al principio que les permite - controlar. - Es como un futuro experimental, - también, - para permitirles controlar el valor de una manera específica en su navegador. - Eso no afectará a otros navegadores. - Entonces, - por ejemplo, - dash Web kit va a afectar radio de borde y navegadores como chrome y safari. - Mientras que para Internet Explorer, - um, - en realidad, - Internet Explorer versiones antiguas de IE no están aceptando radio fronterizo, - así que realmente no tenemos que preocuparnos por eso ahí. - Pero mientras que para Firefox se puede decir apenas ahora radio de guión fronterizo, - por ejemplo. - Y ya sabes, - unos meses para tal vez fue como hace un año. - Solías tener que usar Dash M o Z dashboard un radio para fuego Fox. - Ahora sólo se puede decir radio de frontera y va a creer en realidad en cromo esto funciona ahora a - un tiempo se mueve. - Se puede una banda, - se puede abandonar el prefijo aquí. - Está bien, - entonces, - radio de borde um, - también puedes especificar qué esquina de la caja te interesa redondear así que al decir - como borde dash top dash left puedes redondear justo la esquina superior izquierda de la caja, - o se puede decir guión superior derecha o inferior guión, - izquierda abajo guión derecho. - Y se puede hacer diferente el redondeo de los tamaños de la esquina de la caja en diferentes - esquinas. - Um, - al poner un solo valor, - lo rodeará uniformemente. - Lo que esto hace es que toma de la esquina donde el punto habría existido. - En realidad va 15 píxeles y redondea 15 píxeles de la esquina del elemento. - Um, - si usas dos valores aquí, - puedes controlar la diferencia entre lo horizontal frente a lo vertical. - Por ejemplo, - este primer valor aquí dice radio de borde 100 píxeles y luego espacio 50 píxeles. - Se puede ver aquí en la parte superior, - en realidad hay horizontalmente. - Hay 100 píxeles redondeados y verticalmente. - Sólo hay 50. - Entonces esto hace una curva de forma diferente aquí versus 50 píxeles. - 100 harían esto. - De acuerdo, - para que puedas aplicar múltiples valores aquí, - Teoh múltiples tamaños de píxel aquí al radio del borde, - y puedes cambiar la forma en que redondea. - Ah, - este es un apoyo actual. - Al menos al momento de grabar esto tienes sobre, - ya sabes, - 80% de apoyo global al radio fronterizo. - Funciona un Internet explorando nueve, - pero yo e ocho y siete simplemente no lo apoyo en absoluto. - Entonces vale la pena señalar eso, - y que básicamente lo que pasa es que realmente no se hace daño. - Es sólo que en i e ocho, - ignorará esa propiedad de radio de frontera y sólo tienes bordes cuadrados en tus elementos -. - ¿De acuerdo? - También tenemos sombra de caja. - Si alguno de ustedes está familiarizado con programas de Adobe como Illustrator y Photo Shop, - donde se puede agregar una sombra de caja o una sombra de gota, - se llama más bien en CSS tres semanas y también ahora en una sombra de caja. - Y se ve casi exactamente igual y tiene el mismo tipo de ajustes que lo harías - conseguir para la tienda de fotos. - Um, - así que esta es en realidad una manera muy agradable de agregar sombreado y sombras en los elementos, - así que ah, - la forma de corregir esto es que decimos box, - dash shadow. - Y para que esto funcione e incluso navegadores más antiguos, - puedes usar estos prefijos Web kit y M o z para que funcione ahí. - Ah, - Web kid va a ser para safari y chrome y M o Z va a ser para versiones antiguas de Fire - Fox aquí. - De acuerdo, - así que aquí tenemos sombra de ceniza en caja, - y el primer valor que puedes poner se llama desplazamiento horizontal. - Entonces cinco píxeles van a empujar a la sombra cinco píxeles a la derecha. - Um, - valor negativo lo empujaría cinco píxeles a la izquierda. - Um, - y el siguiente valor es vertical. - Entonces eso lo va a poner cinco píxeles abajo. - Un valor negativo haría que la sombra subiera cinco píxeles hasta la parte superior. - Si dijo negativo cinco píxeles, - por ejemplo. - Y el tercer valor aquí se llama Blur Radius. - Así se extiende el desenfoque. - Si dices cero píxeles, - será una sombra de bordes muy afilada. - Um, - mientras que si agregas un mayor número de píxeles para la borrosidad se suavizará, - se apagará el borde de la sombra. - Y por último, - aceptamos el valor del color para que puedas usar cualquier color aquí. - Aquí. - Han usado un color gris para demostrar eso, - y vamos a seguir adelante y añadir esto en nuestro ejercicio. - Vamos a añadir algunas sombras a algunas secciones diferentes de la página, - y probablemente todos hayan visto algún ejemplo de opacidad. - Este es un ejemplo de alguien usando opacidad en el menú. - Entonces hay un menú desplegable y que los hombres que ves a través para que puedas ver la imagen detrás de él -. - Por lo que la opacidad se escribe usando la propiedad de opacidad y dándole un número entre cero y - uno. - Entonces CSS tres La forma moderna de hacer esto es sólo decir opacidad y 0.5 sería el - equivalente al 50% de opacidad y uno sería el equivalente al 100% de opacidad. - Ahora, - si tienes un color sólido, - estás realmente mejor para usar la propiedad RGB para el color y simplemente establecer el fondo - color con un RGB un valor. - Entonces recuerda que un in rgb a es Alfa. - Eso lo miramos en un ejercicio anterior. - Puedes volver atrás y comprobar eso si quieres. - Cuando llegamos fue cuando empezamos CSS por primera vez. - Se puede comprobar que bajo sistemas de color video para CSS. - La razón por la que querrías usar RGB un valor en contraposición a un pasaje si solo estás - hacer un color de fondo es un poco más simple simplemente hacer que el fondo tenga - transparencia versus todo el elemento. - Entonces una cosa a tener en cuenta aquí es si se establece la opacidad en un valor más bajo aquí, -no sólo va a afectar el fondo, - sino que también va a afectar todas las cosas dentro del elemento también. - Entonces si hay alguna imagen de textura dentro del elemento, - también las va a hacer opacas o parcialmente transparentes. - Aquí arriba, - se pueden ver todas las soluciones de retroceso para navegadores más antiguos. - Esto es para muy viejo, - como safari uno. - Se puede utilizar K html dash opacidad para afectado en versiones anteriores de safari. - Um, - super viejo. - No estoy seguro de cuán maney quiero decir, - empecé a dudar de eso, - ya sabes, - tiene que ser, - como 1% o menos del 1% de la población, - usando como estas primeras versiones de Firefox y Safari. - Realmente no me preocuparía demasiado por estos para Internet Explorer. - Es posible que tengas que usar la propiedad de filtro para que esto funcione en i e. - Y ésta va a funcionar para ti prácticamente en todas partes. - Fuera de AII está usando opacidad. - Aquí está el apoyo global actual para el solo uso de la opacidad. - Um, - puedes ver que realmente ahora solo puedes usar la propiedad de opacidad, - y vas a obtener alrededor del 95% de apoyo global para eso. - Ah, sí. - Y hasta dice aquí que, -como, - para i e ocho, - deberías usar el filtro. - Por lo que para 87 88 debes usar esta propiedad de filtro aquí para esas personas, - que es probablemente alrededor de menos del 10% de la población allí. - De acuerdo, - así que aquí tenemos a Grady INT. - Entonces cuando dices color guión de fondo, - sabemos que sólo podemos especificar un color. - Este es un color decimal hexi. - No muy seguro de qué color es este exactamente. - Pero puedes darle un color sólido a un fondo. - Um, - y luego también puedes usar la imagen de fondo dash. - Y en lugar de vincularse a una imagen, - se puede especificar un int Grady, - y se puede ver aquí, - este es el, - um este es el prefijo para Firefox, - y este es un prefijo para, - um, - safari y chrome, - que utiliza el kit web. - Um, - y escucha lo que haces por Mazzilli, - ¿verdad? - Es un poco diferente que para tesis. - Afari en cromo. - Tú lo escribes de esta manera. - Usar paradas de color de Mozilla Es bastante sencillo. - Solo usas, - Ah, - el color hacks, - un color decimal, - y luego pones una coma y pones el otro color en el que te gustaría que se desvaneciera. - Um, - para Web kit, - se puede especificar el tipo de Grady en. - Es un poco más sofisticado. - Tienes más posibilidades. - Se podría hacer un radio Grady Int o un Grady Int lineal, - y se puede especificar el ah, - el posicionamiento de donde se inicia y se detiene y el porcentaje del elemento que ella- mide a través. - Y también puedes establecer paradas de color para que la primera parada tenga este color en la segunda parada -tiene este color- y en realidad vamos a echar un vistazo a usar algunas herramientas en línea en el ejercicio para crear estos - Grady INTs. - Entonces Grady y el apoyo no es tan bueno como los otros que te había mostrado. - Incluso usando el kit Web en prefijos M O Z. - Todavía hay algunos navegadores como Internet Explorer nueve, - incluso que ni siquiera es realmente todo lo viejo no lo soporta en absoluto. - Entonces realmente sólo tenemos alrededor de al menos al momento de filmar este video, - realmente sólo tenemos alrededor del 65% del apoyo global. - Entonces lo que haces es especificar un color de fondo. - Y si el navegador más antiguo no puede entender el Grady int este color que se desvanece, - sólo va por defecto a tener unos colores sólidos. - Simplemente escoges un color con el que estés bien como solución alternativa para navegadores más antiguos, - y debería funcionar bien todavía. 32. Elementos flotantes: - siguiente hablemos de posicionamiento flotante o flotante. - Entonces este va a ser tu solución para crear estructura de columnas en tus diseños de página - puedes ver en este ejemplo aquí esta persona tiene un encabezado y un pie de página en la parte superior y -inferior de la página- y les gustaría crear una barra lateral que se posiciona a la izquierda de algún contenido principal. - Esa es posición a la derecha aquí. - Entonces mediante el uso de flotante debilitar, - dile a un elemento que flote hacia la izquierda y este otro elemento aquí que flote hacia la derecha. - Y eso nos va a permitir tener elementos de nivel de bloque que puedan aparecer uno al lado del otro. - Entonces si configuramos la barra lateral, - digamos que este de aquí es un div que tiene una idea de barra lateral y tal vez este es un def tiene un - idea de quiero decir, - podemos entonces establecer libra lateral a flotar colon izquierdo y debilitar set main a float colon derecho -, - por lo que la propiedad flotante nos permite especificar ya sea a la izquierda o a la derecha. - Entonces siempre que flotes elementos, - tenemos que estar conscientes de que hay algunas cosas tontas que van a suceder así que inicialmente cuando - primero comienzas a aprender posicionamiento de flotador en realidad puede ser bastante frustrante. - Pero mientras te explique claramente todos los temas que te pueden encontrar cuando estás -usando el posicionamiento flotante, - entonces ojalá no te pregunten -usando el posicionamiento flotante, , - frustrado- y tendrás un claro entendimiento sobre por qué ciertos elementos se están comportando mal. - Entonces en este ejemplo, -en realidad flotaron el contenido principal a la izquierda-, y decidieron flotar la barra lateral a la derecha y tenían un pie de página que era -abajo aquí abajo. - Pero, ¿qué pasó? - Es un poco extraño. - Se suponía que el pie de página se quedara en la parte inferior. - Recuerda, - aquí arriba tenemos el pie de página en la parte inferior. - Pero por alguna razón, -cuando floto cosas, - los elementos que están por debajo de las cosas que están flotando tienden a intentar tirar hacia arriba a su lado. - Ahora. - A veces esto es deseable, -así que a veces queremos envolver texto alrededor de imágenes y una página- y cosas como esa y flotar es genial porque cada vez que flotas algo, - elementos que están por debajo del elemento que el aire flotando son afectados por eso, - y tenderán a levantarse junto a él si pueden caber ahí. - Entonces en este caso, - el pie de página tiene algo de espacio para caber debajo de la barra lateral. - Y como todas estas cosas están flotando, - se va a tratar de tirar hacia arriba al lado o al lado de las cosas que están flotando. - Y eso es simplemente porque el pie de página estaba físicamente en el código debajo de las cosas que están - flotando. - Entonces se está tirando a su lado. - Ahora, - si queremos evitar esto, - en realidad podemos evitar que esto suceda. - A veces realmente queremos que esto suceda. - Es algo bueno, - y otras veces se molestaron porque este elemento no debería estar aquí arriba. - Queremos que el pie de página vuelva aquí abajo. - Entonces si queremos decirle al pie de página, - um no para no subir al lado de las carrozas, - podemos usar una propiedad y CSS llamado clear. - Podemos decir claro tanto así al decir Footer claro. - Ambos fueron capaces de conseguir que ese pie de página despeje Más allá de la altura de esos elementos tan claros - acepta tres valores diferentes se puede decir clara izquierda y eso despejará más allá de la altura - de cualquier cosa flotando izquierda y encendida. - Lee pasó la altura de las cosas flotando a la izquierda, - y también puedes decir claro a la derecha, - que despejará más allá de las alturas de cualquier cosa que flote a la derecha, - o para cubrir todas tus bases. - Se puede decir claro ambos, - y se aclarará más allá de la altura de ambas cosas que están flotando a la izquierda o a la derecha. - Está bien. - Y otra vez entonces eso permite que el pie de página despeje más allá del contenido medio y la barra lateral. - Está bien, - está bien. - Así es si eso no es suficiente en realidad, - una especie de ocurrencias tontas que provoca flotar tiene algunas otras cosas que hace - que es un poco extraño. - Pero de nuevo, -siempre y cuando entienda por qué lo está haciendo y cómo arreglarlo, - no nos va a ser frustrante. - Entonces otro tema que a veces obtienes cuando estás flotando un elemento es que obtienes - algo llamado padre colapsado. - Entonces imagina que esta caja gris aquí es un padre, -lo que significa que es un contenedor, - y colocamos estas cajas dentro de ella. - Está bien, - así que aquí tengo impuestos dentro que dice, - soy padre estático, - bien. - Y floté estas tres cajas a la izquierda en esta caja a la derecha. - Una cosa señalará aquí es que cuando flotes algo a la izquierda, - si hay otros elementos que pueden caber ahí que también están flotando a la izquierda que está- sólo se van a apilar uno al lado del otro así. - Entonces a veces puedes crear estructura de múltiples columnas simplemente flotando todo en una sola dirección, cual es una especie de truco genial para hacer eso. - De acuerdo, - así resulta, - sin embargo, - esto es sólo algo de lo que tener en cuenta. - Tienes dedo del pie solo siempre ten en cuenta cuando estás flotando algo es que cada vez que - flotar todos los Niños dentro de un padre, - es un Ziff. - El padre ya no tiene referencia para lo alto que debe ser. - La metáfora que utilicé para esto es Imagina que ya sabes, - normalmente elementos. - Ah, - cuando están dentro del padre, - es como cuando están en la preparatoria y aún no se han graduado. - No se han ido de la universidad. - Um, - y los padres se quedan su cuarto para ellos. - Como si sigues siéndolo aún no te has ido de la escuela. - Eres un elemento estático. - No estás posicionando en absoluto. - Aún no estás flotando, - Así que cuando estás en la preparatoria, - no estás flotando y tus padres se quedan tu habitación para ti. - Son como, - Oh, - esta es tu habitación. - Es tu espacio. - Vives aquí. - Y por esa razón, - el padre tiene una referencia de lo grande que tener razón. - Puede rodear al niño. - De acuerdo, - Ahora, - cuando flotas un elemento, - es como enviarlo fuera de la universidad. - Es como si flotara. - Entonces es como si se fuera de casa. - Y a pesar de que parece estar dentro de este elemento padre, - en realidad está flotando. - Entonces estos tipos estaban flotando a la izquierda. - Éste está flotando derecho. - Y como todos los Niños flotaron fuera de la universidad, - el padre ya no está guardando su habitación para ellos. - Al igual que básicamente, - el padre ya no tiene referencia para lo alto que debe ser. - Entonces se derrumba. - O tal vez se podría decir que el padre se derrumba porque se ponen tristes porque todos sus - Los niños se alejaron flotando. - Así que en realidad podemos arreglar esto usando algo llamado claro Fix, -que es una especie de hacker de CSS, - una solución que los desarrolladores han ideado a lo largo de los años para solucionar este problema. - Por lo que en realidad se puede detener aparente de colapsar incluso si sus Hijos están flotando como - esto y obtener este efecto mediante el uso de algo llamado la Solución fija clara. - Ahora, - esto parece un montón de CSS, - pero voy a descomponer esto por ti. - Básicamente lo que está pasando aquí es que estás creando una clase, - y podrías nombrar a esta clase lo que quieras. - Típicamente, - esto se llama solución clara. - Y de hecho, -si abres tu navegador y Google clear fix, - se le ocurrirá toneladas de sitios que donde puedas copiar y pegar este código para que no lo hagas - tienen que memorizarlo. - Y también mucha discusión al respecto y por qué lo usamos. - Um, - En realidad voy a proporcionar un enlace debajo del video que habrá, - vinculado a su tutorial dando el código y también discutiendo solución clara. - Entonces lo primero que hacemos es crear una clase, -y elegí nombrar esta solución clara- que es el nombre común que la gente llama a esto. - Y luego estamos usando un selector de pseudo clase especial llamado After Estamos diciendo colon después -. - De acuerdo, - Entonces lo que después hace es cualquier elemento al que aplique esta clase, - va a ir dentro de ese elemento, - y después de todo sus Hijos, - va a aplicar este estilo que usted pone aquí. - Eso lo voy a decir una vez más. - Entonces aplicando la pseudo clase seleccionada aquí, - colon después de eso va a permitir que funcione para que cualquier elemento aplicemos esto - clase de claro fijo a su va a ir dentro de ese elemento y después de Colin, - después de todo de sus Niños, -en ese elemento en nuestro caso- todo después de todo los Niños flotantes va a aplicar este estilo. - Entonces lo que estamos haciendo es que estamos agregando una propiedad aquí llamada contenido y entre comillas. - Vamos a poner algo de texto. - En realidad puedes escribir literalmente la palabra hola aquí, - y verás la palabra Hola aparecerá después de todos los elementos flotantes. - Entonces el contenido es la forma en que realmente puedes usar CSS para insertar contenido de texto en un elemento. - Está bien. - Y esta es en realidad la única vez que uso esta propiedad porque me gusta reservar CSS para - styling. - Y me gusta reservar html para realmente crear texto y contenido físico que es perente-por una teoría llamada la separación de preocupaciones. - Donde queremos separar HTML es ser contenido y CSS a ser estilo. - Esta es una pequeña excepción a la regla donde todos realmente agregan un símbolo de periodo después de todo -el contenido que conozco esto suena loco, - pero quédate conmigo aquí. - Aguanta ahí en esto todo poco a poco vienen juntos y tienen sentido por qué estamos haciendo esto. - Entonces básicamente, - creamos una clase llamada solución clara. - Decimos colon después y lo vamos a aplicar al padre que se está colapsando. - Entonces, lo que va a pasar es cualquier padre que conozcas, -el padre colapsado que necesita dejar atrás a los Niños flotantes, - le aplicamos esta clase. - Y dentro de este elemento, -este padre colapso- va a ir tras todos los elementos flotantes porque usamos el colon después y está- va a agregar un símbolo de periodo. - En realidad, - físicamente aparecerá un pequeño punto que el símbolo de periodo o el carácter de texto del - periodo aparecerá debajo de todos esos Niños flotantes. - Lo siguiente que hacemos es decirle a ese contenido que muestre bloque, -y recuerdo elementos de nivel de bloque, - su rey del espacio horizontal. - Ocupan todo ese espacio horizontal ahí abajo y como no tenemos un con -especificado para el contenido- sólo va a ocupar el 100% del espacio dentro de ese contenedor padre. - Entonces ahora nuestro pequeño símbolo de periodo es un elemento de nivel de bloque en la página y ocupa todo el - espacio horizontal, - y luego usamos a nuestro amigo Borrar ambos. - Recuerda, - usamos claro ambos antes en el pie de página. - Lo que sí despejado lo aclararás, - recordarás es lo que solíamos decir a cualquier elemento en este caso, - este pequeño contenido de símbolo de periodo para despejar más allá de la altura de cualquier cosa flotante. - Por lo que esto mueve ese símbolo de periodo para despejar más allá de la altura de los Niños flotantes. - Está bien, - um y entonces básicamente tenemos una referencia para lo altos que deben ser los padres. - El contenedor padre ahora sabe lo alto que ser, - porque este símbolo de periodo ha sido empujado hacia abajo por debajo de todos los Niños flotantes. - Es como, -si te imaginas, - si usamos la metáfora de los elementos flotantes son algo así como los Niños flotados - el colegio. - Esta solución de solución clara es algo así como tener un estudiante de divisas que venga y se quede -con los padres para que sepan básicamente hacerse cargo de tu habitación para que la casa -no cierre bien o en otras palabras-, así que el los padres no están tristes. - No colapsan su altura. - Da a los padres o referencia por lo alto que debe ser porque hay un estudiante de intercambio - pasando el rato ahí en este caso de periodo. - Pero no queremos ver a este estudiante de intercambio porque eso va a hacer nuestro Eso suena - significante. - Pero va a hacer que nuestro diseño se vea desordenado porque tendremos un pequeño símbolo de periodo -visible, - visible debajo son elementos flotantes. - Entonces lo que hacemos es poner la visibilidad a escondida. - Entonces esto es algo así como el estudiante de intercambio que siempre está estudiando y tú nunca realmente - los ves. - Entonces hacemos oculto el símbolo de periodo diciendo visibilidad oculta, - y nos aseguramos de que no ocupe ninguna altura diciendo altura cero y altura de línea, - que es la altura del texto, - la altura entre líneas de texto a cero. - Y esto lo hará para que en todos los navegadores, - este pequeño contenido sea invisible. - Entonces este contenido le da al padre una referencia de lo alto que debe ser para que no colapse, - pero también lo hacemos invisible. - Entonces está escondido. - Entonces esto es una especie de un parece un tipo bastante loco de código aquí, - pero en realidad esto funciona bastante bien y funcionará en todos los navegadores. - De acuerdo, - en realidad echemos un vistazo a eso dentro de un ejemplo. - Entonces una cosa es para mí hablar de estas cosas. - Pero y si aquí tenemos un ejemplo real, - mira el dedo del pie. - Entonces vamos a ir. - Se trata de tinker dot io y puedes usar esta longitud CB 3 46 para ver la versión completada de - este ejemplo. - Si quieres echarle un vistazo más tarde, - puedes ver que acabo de crear algunas dibs. - Estas eran solo algunas cajas que vamos a usar diseño lejano. - Y este 1er 1 solo tiene la palabra de arriba escrita en ella. - Y le volví a dar una clase de arriba. - Sólo estoy dando este tipo de nombres genéricos de clase. - Y también tenemos uno en la parte inferior aquí con una clase de abajo, - y eso también tiene la palabra de abajo escrita en ella. - Y entonces aquí tenemos Ah, - contenedor. - Este es nuestro contenedor para padres. - ¿Qué le di un nombre de clase de contenedor y anidado adentro fuera de este Este padre es tres - cajas que le di una clase de caja y sólo los nombra aquí. - 123 De acuerdo, - echemos un vistazo al código U CSS. - Escribimos para estos tipos entonces Así, - um la caja de la parte superior que tiene una clase de arriba. - Le dimos a este tipo un color de fondo de lima, - y también le dimos 10 píxeles de espaciado por dentro y un margen, - que es de 10 píxeles de espaciado por fuera. - Está bien, - también le dimos un color de fondo al contenedor para que podamos ver todos estos elementos. - Todos tienen un color de fondo. - Esto también tiene relleno y margen. - También tenemos una caja aquí abajo la cual tiene un color de fondo de Aqua y Samos. - Las cajas en el ejemplo anterior Acabamos de darle un ancho y alto de 100 pixeles y - algo de relleno y margen también. - Um, - Y entonces también tenemos esta clase en la parte inferior aquí llamada punto abajo. - Por lo que a continuación tiene un color de fondo de amarillo y tiene algo de relleno y margen. - De acuerdo, - así que si venimos por aquí, - podemos ver Aquí está nuestra caja arriba. - Aquí está nuestro padre contenedor y aquí está abajo. - Ahora, - por defecto, - todos estos días, - bloque de exhibición de aire. - Por lo que están ocupando el 100% con de la pantalla, - y no tienen ningún posicionamiento especial. - A ninguno de ellos se les ha dicho que flote todavía, - así que porque estos aires se sumergen están exhibiendo uno encima del otro, - su rey del espacio horizontal aquí. - Por lo que 12 y tres o apilados verticalmente. - Ahora, - digamos hipotéticamente que me gustaría convertir esta posición de chicos en una columna - estructura. - Digamos que queremos hacer tres columnas 123 lado a lado Así podemos bajar aquí a esto - clase de caja y bajaré aquí y voy a usar la propiedad aquí llamada - Flotar. - Por lo que pondremos estos en posición de flotación y diremos flotador a la izquierda. - Entonces van a ir tan lejos a la izquierda como pueda dentro de este padre. - Y si su espacio, - se van a apilar uno al lado del otro, - siempre y cuando haya espacio disponible para que todos encajen, - parece que aquí hay mucho espacio, - por lo que debería funcionar. - Entonces tenemos a estos tipos para flotar a la izquierda y voy a dar clic en correr, - y ahí podemos ver a estos tipos aire ahora exhibiendo lado a lado. - Ahora están flotando 123. - Entonces estamos viendo algunas cosas tontas que suceden aquí en Esto frustra a mucha gente cuando - están lidiando con el posicionamiento. - Yo quiero señalar algunas cosas. - De acuerdo, - así que en primer lugar, - el div llamado anteriormente no se ve afectado por el hecho de que estos aire flotando. - Voy a decir eso otra vez. - El elemento por encima de los elementos flotantes. - Éste, - el Div. - Con la clase de arriba aquí- este tipo no se ve afectado por flotar. - Entonces cada vez que flotes algo, - en Lee efectos elementos por debajo de ese elemento que está flotando en los elementos Lee que están - físicamente escritos abajo aquí así. - Esto fondo si eres el pie de página, - eso es que tiene una palabra abajo escrita en ella se ve afectada. - Cortar. - Entonces porque estos tipos estaban flotando a este tipo de aquí abajo, - puede caber. - Entonces está tratando de flotar al lado de estos tipos. - Está bien, - entonces, ¿cómo arreglo eso? - ¿Si alguna vez tengo un elemento que no quiero dedo flotar al lado de mis otros elementos aquí? - Si no quiero tirar hacia arriba junto a estos elementos flotantes, - puedo decirle que despeje más allá de la altura de esos elementos flotantes. - Entonces para hacer eso, -voy a entrar en toro la clase de abajo aquí- y vamos a seguir adelante y decirlo claro Colón y yo sólo voy a guardar ambos lo que se aclarará- pasó cualquier cosa flotando izquierda o derecha. - En este caso, - Podría salirme con la izquierda apenas despejada. - Pero para estar del lado seguro, - tapar todas mis bases solo dirán claras las dos así. - Entonces dije este div de abajo para despejar ambos. - Ahora, - si refresco que se puede ver ahora abajo se está comportando y se está deslizando por debajo de esos elementos flotantes . - Entonces eso es una cosa que te puede estresar cuando estás usando posición flotante, -solo tienes que estar al tanto de que cuando flotas cosas, - elementos por debajo de ellas pueden jalar hacia arriba junto a ella. - Y quizá quieras que esto suceda o quizá no quieras que esto suceda. - Si no quieres que suceda, - puedes configurarlo para despejar ambos así. - Está bien, - otras cosas que están sucediendo que podrían, - um, - frustrarte como puede ver desaparecer el elemento padre porque le di a este padre - contenedor algo de relleno. - Es mantener al menos algún relleno dentro de ella, - así que veo que es una gran barra. - Pero si quita este relleno, - puede que incluso vea que las cosas desaparecen como este reloj de este año. - Si le dije esto a cero relleno en ese contenedor de padres, - en realidad no lo puedes ver en absoluto. - Podría decirse a sí mismo, - ¿Qué diablos? - ¿Qué pasó con ese contenedor para padres? - Ya no veo su color de fondo. - Ocasionalmente, - vas a querer rodear tus columnas. - A lo mejor si quieres otro color de columna detrás de ellos u otra imagen detrás de ellos. - En el caso del ejercicio, -vamos a añadir, - como una textura de madera detrás de nuestra estructura de columnas. - Entonces vamos a necesitar, - como, - un contenedor para padres ahí. - Y, - um, - si no quieres que ese padre colapse a este gran padre aquí para colapsar, - necesitamos usar la solución clara para que esto funcione. - De acuerdo, - así que sigamos adelante y agreguemos esa solución clara aquí. - Entonces otra vez, - los elementos flotantes son algo así como Niños que se han ido de la universidad y los -padres tristes, - demasiado triste que se derrumba. - No tiene referencia para lo alto que ser más. - De acuerdo, - entonces lo que hacemos es entrar en el CSS y vamos a corregir esa solución clara. - Entonces vamos a decir “dot clear fix” y otra vez, - ese es sólo un nombre común para nombrarlo. - En realidad puedes nombrarlo como quieras. - Y vamos a decir colon después, - que va a entrar específicamente en el elemento. - Aplicamos esto a un anuncio, - este estilo, - después de todos los demás elementos, - todos los demás elementos Niños dentro de él. - Y vamos a decir contenido. - Entonces diré contenido. - Y sólo voy a hacer un símbolo de época porque es pequeño y sin pretensiones. - Y vamos a decir que ese contenido para mostrar bloque Así que ocupa todo el -espacio horizontal ahí, - y ah, - entonces básicamente le vamos a decir a este tipo que despeje, - igual que hicimos con la caja de abajo. - Nosotros queremos esto ahora. - Queremos este pequeño símbolo de época. - Va a aparecer, - ya sabes, - como abajo están al lado de todos estos. - Ya sabes, - va a dos puntos después significa que va a aparecer después de todos estos niños flotantes, - y lo vamos a poner para mostrar bloque para que ocupe todo el espacio horizontal-, y entonces vamos a decir claro ambos para despejar pasado la altura, - y ahora el padre debe tener una referencia para lo alto que debe ser. - Pero no queremos ver ese pequeño símbolo de época. - Eso no va a ser muy atractivo. - Entonces vamos a poner visibilidad a oculta, - y también vamos a fijar su altura a cero. - Por lo que el pequeño símbolo de periodo no ocupa altura alguna. - Y también queremos decir altura de línea y establecer la altura de línea del texto a cero así. - De acuerdo, - entonces ese es el primer paso es crear una clase que podamos aplicar. - Y podemos aplicar esto ahora a cualquier elemento, - Cualquier elemento aparente que se esté colapsando. - De acuerdo, - entonces vamos a subir aquí con el padre que tiene el tema. - Por lo que este tipo llamó contenedor de clase que tiene el color de fondo gris. - Este es el que tiene el problema. - Entonces vamos a entrar. - Esta clase es igual a contenedor. - Vamos a poner un espacio, - y vamos a aplicar otra clase aquí llamada Clear Fix. - Así. - Aviso que no tuve que escribir el colon tras parte aquí. - Sólo tengo que usar el nombre de la clase, - lo cual es claro. - Fijar. - Está bien. - Y luego si volvemos aquí y actualizamos el código, - puedes ver que lo arregla. - Entonces ahora el padre sabe lo alto que debe ser. - A pesar de que los Niños están flotando dentro de ella. - De acuerdo, - así que hemos aprendido la mayoría de las cosas que pueden meterte en problemas cuando estás usando - posicionamiento flotante, - como elementos que intentan saltar junto a los elementos flotantes. - Y hay que ponerlos para despejar ambos para bajar abajo. - Y también miramos a los padres. - Cuando todos los Niños están flotando dentro de un padre, - tienen la tendencia a colapsar. - Y miramos el uso de solución clara para corregir ese problema. - Um, - volvamos en realidad a lo que estábamos discutiendo antes con respecto a las dos cajas diferentes - modelos y a veces los problemas con los que se podría tropezar cuando se tiene que enfrentar configurar el - ingenio de su de sus columnas para encajar ambos modelos de caja. - Entonces para este ejemplo, - sigamos adelante y cambiemos algunas cosas por aquí. - Voy a ir a la clase de caja aquí, - y en realidad quitemos el relleno dentro de ella. - Entonces diremos relleno cero. - Y, - um, - en realidad se establece el margen a cero. - También, - por ahora, - está bien, - y entonces vamos a seguir adelante y cambiar el ancho para que sea un porcentaje. - Entonces, - um, - vamos a ver. - Entonces si tengo aquí tres columnas, - y quiero que estos tipos ocupen el 100% del espacio aquí. - Podríamos establecer el ancho de cada 1 a 33.3% haría que cada uno de los tres retome. - Bueno, - supongo que sí nos conseguí hasta el 99.9%. - A lo mejor podríamos hacer, - como 0.333 para acercarlo aún más. - Uh, - y entonces vamos a seguir adelante y correr eso y podemos ver que esos tres elementos están igualmente - espaciados. - Entonces aquí hay uno a y tres. - Por lo que cada una de esas columnas está de lado a lado. - Eso Esto está funcionando cuando no tenemos relleno ni frontera. - Entonces, - en realidad, - Estoy en cromo Ahora mismo. - Estoy en el navegador Chrome, - que utiliza el modelo de caja W tres C donde, - cuando se especifica un con él no incluye relleno ni borde. - De acuerdo, - así que esto funciona bien porque no hay relleno ni borde. - Pero vamos a ver qué pasa ahora cuando decidamos Teoh, - um, - dijimos cuando decidimos realmente darle a esto algo de relleno y algo de frontera, - así que lo primero que va a hacer es que voy a dar el contenedor arreglado con. - Entonces por ejemplo, - ya sabes, - ya que estos aire todo escalando 33% realmente puedo dar un fijo con al contenedor ahora. - Entonces diremos hipotéticamente que queríamos que el contenedor padre tuviera 800 píxeles de ancho. - Algo así. - Entonces esto debería estropear todo aquí dentro. - Está bien. - Y ahora este contenedor tiene un fijo con y vamos a Teoh decir, - Bueno, - queremos agregar algún relleno o algún borde alrededor de estas columnas. - Entonces ya sé que esto se va a romper en este navegador en particular por su caja-modelo que utiliza. - Entonces ah, - 33.3 para cada uno de ustedes debe terminar hasta el 100%. - Pero eso no es contar el relleno ni el margen. - Entonces digamos que configuramos el relleno dentro de la manera Teoh podría usar píxeles como 20 pixeles, - pero ¿por qué no usar un por ciento? - Y entonces en realidad podemos hacer las matemáticas para ver, -como, - cuánto porcentaje extra estaba sumando. - Entonces digamos que agrego como, - 1% de relleno alrededor de todos los lados del elemento, - y voy a seguir adelante y hacer clic en correr, - y eso lo rompió. - Entonces la razón por la cual es que el ancho de la cada. - Cada columnista, - 33%. - Por lo que 33 más 33 más 33 suma hasta como 99.999 básicamente 100% derecho. - Pero luego cuando tengamos relleno, - eso es 1% de relleno en cada lado. - Por lo que eso suma un 123456% adicional de relleno. - Entonces estas cosas ahora Ah, - 106. - Es en realidad debería estar ocupando 106% lo que no encaja dentro del 100% ancho con de - el contenedor de 800 píxeles. - Entonces por eso, - no hay espacio suficiente para que cada elemento exista para que esto sea un poco más fácil de ver. - ¿Por qué no vamos adelante y fuera de frontera aquí en esto salvará borde un píxel sólido - negro así. - Está bien, - ahora es un poco más fácil ver dónde están cada una de las divisiones. - Está bien, - Entonces, ¿y si yo sí quisiera agregar borde y relleno um a estos elementos, - Pero no quería que eso se añadiera. - Además del ancho, - quería que se incluyera en este 33% con así que lo que podemos hacer es realmente podemos configurar chrome - o cualquier otro navegador para obligarlo a usar el modelo de caja de Internet Explorer que incluye - borde y relleno en el ancho. - Entonces déjame seguir adelante y bajar aquí y sólo vamos a acercar y voy a seguir adelante y - teclea el turno Starkey en ocho para crear una estrella. - Esto se llama Selector Universal, - y el Selector Universal es cómo se pueden seleccionar todos los elementos literalmente cada uno - elemento, - um, - y le dirá a todos los elementos que tengan, - uh, - oops para tener ah, - caja Papá haciendo ejercicio. - Y para que sea el método i e box, - podemos decir border dash box y podemos añadir los prefijos um dash M O Z dash box dash size - y también establecer eso a border box. - Y también podemos agregar los prefijos para Web kit cash box dash sizing solo para cubrir todas nuestras - bases. - Entonces va a funcionar en cualquier navegador y dirá “border dash box” así. - Entonces esto le dice a todos los elementos que adopten independientemente de que el navegador esté diciendo todos los elementos en - la página para adoptar el modelo de caja de Internet Explorer que sí incluye relleno y borde en - remolque. - con. - Entonces no debería ser extra con, - bien, - Y entonces vamos a seguir adelante y dar click. - Corre y puedes ver que soluciona ese problema. - Lo genial de esto es que ahora puedo cambiar el relleno y no debería romperse. - Puedo hacer este relleno ahora para poner un 3% así, - y eso me dará más espaciado dentro de la caja. - Se puede ver. - Mueve el texto más abajo. - También podemos agregar un borde más grueso si queremos. - Podríamos decir como, - Oh, - la frontera ahora debería ser a pixeles en su lugar o algo así y yo podría correr eso - ahí. - Um Y lo bonito de usar percéntimos para estas columnas es que ahora, -si cambio el tamaño del contenedor, - responderán en consecuencia. - Entonces si cambio de opinión y quiero que este contenedor tenga 600 pixeles de ancho, - entonces se encogerán así. - Todos responderán en consecuencia. - Y también puedo hacerlo más grande, - como 900 píxeles o algo así. - Y responderán así. - Entonces supongo que nueve cientos fuera de mi pantalla un poco ahí, - pero, - uh, - en cualquier caso, - se puede ver que puedo cambiar el tamaño del contenedor. - Ni siquiera puedo ajustar el contenedor a un porcentaje si quiero. - Podría decir, - como, - 90% y refrescar eso. - Y entonces sólo nos queda el 10% por aquí, - así que eso es bastante guay. - Está bien, - um, - vamos a ver, - ¿De qué más nos gustaría hablar? - Por lo que el margen de margen no está incluido en ninguna de las medidas del modelo de caja. - Entonces eso es algo de lo que tengo que estar al tanto. - Si agrego un margen aquí de apenas 1% ver lo que pasa. - Esto realmente lo romperá. - Y ni siquiera la propiedad de dimensionamiento de caja puede salvarnos, -porque ni el modelo de caja W tres C ni el modelo de caja I E incluye margen, - que es un espaciado fuera de los elementos. - Por lo que acabo de añadir 1% de margen, -que será 1% a la izquierda y a la derecha de uno, - la izquierda y la derecha de dos en la izquierda y derecha de tres conjuntos. - Un total de 6123456% que va a sumar en adicional. - Entonces esto va a ser 6% um, - más sobre lo que necesita ser para mantenerse uno al lado del otro flotando. - Entonces si me refresco, - va a saltar la tercera caja hacia abajo. - Se va a romper ahí así. - De acuerdo, - entonces mis opciones aquí son estar conscientes de que estoy restando ese porcentaje, - ¿verdad? - Entonces si tengo, - um, - 100% del espacio aquí, - derecha, - ah, - 100 manera hay que pensar en el contenedor padre como la disponibilidad del 100% del espacio con - dentro del contenedor padre allí en Lo que puedo hacer es restar ese 1% de descuento - a cada lado. - Entonces lo que podemos hacer es agarrar, - agarrar la aplicación de la calculadora y traer eso hasta aquí, - y podemos hacer algunas matemáticas. - Entonces si tengo el 100% del espacio disponible y resto el, - um, - el 6123456% del margen, - eso me da 94 por ciento restante. - Y eso tiene que dividirse entre estos tres el ancho de estas tres cajas para que pueda tomar- ese 94 puedo dividir por tres. - Y eso me da 31.3 repitiendo. - Entonces es bastante simple matemática también hay que hacer aquí es volver y cambiar el ancho de la - caja de 33 a 31% para recuperar el margen. - Y eso lo arregla. - Y aún tengo espaciado entre las cajas así. - Entonces eso es bastante guay. - Y todavía puedo volver a este contenedor aquí y cambiar el ancho de todos modos, - me gusta y se va Teoh, - va a arreglarlo básicamente puede incluso quitarlo ahí así y hacerlo el exacto - con Ok, - um, - así que hemos discutido más o menos, - la mayoría de cualquier cosa que necesitarías hacer en el diseño. - Pero hay una cosa que hemos dejado fuera, - y es cómo centrar las cosas en el diseño. - Lo que podemos hacer es una estrategia típica es crear algo llamado rapero para que yo pueda entrar -en este código aquí- y yo sólo voy a, - en Dent todo este código bombea. - Ahí vamos. - Y vamos a rodear este código con un contenedor exterior. - Y le voy a dar a este tipo y a mí d de rapero así y lo cerraremos aquí abajo. - Yo sólo diría slash Div e incluso puedo escribir un comentario si me gusta a mí mismo decir eso - Este es el final del rapero así. - Para que veas aquí rodeamos todo el concepto con un rapero de apertura y rapero de cierre -. - Um, - esto básicamente pone todas las otras cajas dentro de una caja más grande, - y ahora tengo la capacidad de darle estilo a esa caja más grande y controlar donde está posicionada así - sólo voy a seguir adelante y entrar en el CSS y crear. - Uh, - ya que esto es un i d. - Si quiero crear un selector para ello, - tengo que usar la etiqueta hash y el nombre del particular I. - D es rapero. - Entonces puedo decir rapero hashtag así y ahora puedo darle estilo a esto. - Entonces vamos a darle a esto un ingenio con set todo a 800 píxeles otra vez así. - Y ya que, - um, - ya que no tengo un ingenio especificado para mis otros contenedores como arriba contenedor y abajo, - sólo van a ser lo más anchos que puedan ser porque sus elementos de nivel de bloque y - ya que el rapero va a tener un específico con, - sólo van a ser lo más amplios que puedan hasta que se toquen con el filo de ese rapero. - Entonces echemos un vistazo a eso. - Entonces mi rapero tiene un ancho de 800 píxeles, - y luego puedo hacer clic en correr, - y eso mantendrá todo limitado dentro de esos 800 píxeles de ahí. - Entonces eso es bastante guay. - Um, - ¿y si quisiera centrar ahora todas estas cosas dentro del diseño de página? - Entonces recuerda que podemos usar margen, - um, - como espaciado en el exterior de los elementos. - De acuerdo, - Así Margin también acepta un valor de margen auto y auto, - básicamente solo creará una cantidad automática de margen donde simplemente empujará margen hacia fuera - desde el elemento hasta que se encuentre con otra cosa, - como un contenedor padre o el borde de la ventana del navegador. - Entonces ya que tengo un ingenio conjunto, - ahora puedo establecer este margen, - um, - al margen automático para que cree una cantidad igual de margen en ambos lados. - Entonces básicamente, - Quiero establecer el dedo del pie del margen izquierdo auto y el margen derecho del dedo del pie auto. - Um, - y si quiero algún margen en la parte superior e inferior, - podría establecer eso también. - En este caso, - creo que lo que haré es crear margen cero en la parte superior e inferior poniendo un cero - ahí y luego pondré Auto para la izquierda y la derecha. - Así que recuerde, - cuando solía valores dentro de relleno o margen a valores indica que el - verso el primer valor representa el espaciado superior e inferior, - y el segundo valor representa los espaciados izquierdo y derecho. - Esto es decirle al margen que sea una cantidad automática a la izquierda y a la derecha de esto- elemento llamado Rapper que IHS rodeando todo lo demás. - Entonces si voy adelante y corro que va a centrar todo para que veas que hay un igual - cantidad de margen aquí en una cantidad igual de margen allá. - Y de hecho, -a medida que la ventana del navegador se contrae y crece, - ese margen se ajustará por sí mismo porque está configurado en auto. - Entonces esa es la forma típica en que verás a la gente centrando el contenido. - De acuerdo, - ahora- en el próximo ejercicio, - en lugar de centrar todo el contenido, - sólo vamos a estar centrando ciertas piezas del contenido. - Entonces, ¿qué? - Seguí adelante y lo hice en los ejercicios que verás es creé una clase llamada Rapper, - y lo aplicé en múltiples ubicaciones a lo largo. - Entonces, - por ejemplo, - podría simplemente aplicarlo, - aplicarlo dentro de esta barra superior aquí y un arriba y dentro de abajo. - Y de esa manera puedes tener barras que se extienden por toda la pantalla, - pero luego contenido dentro de esas barras que se centran. - De acuerdo, - entonces, - um, - esa es una muy buena manera de Teoh para trabajar con diseños en el centro convenientemente. - Todo es usar algo llamado rapero, - o algunas personas lo llaman contenedor y lo dijeron para tener un margen de cero auto, - y eso empujará al elemento hacia el medio. - Está bien, - genial. - Entonces, - um, - eso es realmente todo ganar dedo del pie. - Mira ahora. - Vamos a seguir adelante y aplicar todas estas cosas que hemos aprendido en el ejercicio continuado que - hemos estado trabajando para la empresa de calzado CHW. - Y luego después de completar ese ejercicio, - entonces puedes pasar al siguiente reto de código. 33. Diseño de preparación: - Hola, - chicos. - Bienvenido de nuevo. - Este es el ejercicio 3.1 modelo de caja y disposición. - Ahora, -en este ejercicio en particular- vamos a estar construyendo a partir de todas las técnicas que aprendimos del conjunto anterior de - diapositivas de conferencias y uno de los ejemplos donde exploramos cosas como la caja del modelo de caja- estética y también posicionamiento flotador para crear diseños de página. - Se podía ver que ya he descargado aquí el código fuente, - y lo traje a texto sublime. - Y los dos principales archivos con los que estará trabajando aquí es la página html index dot y también la página CSS - style dot. - Por supuesto. - De acuerdo, - También he ido adelante y he traído esto en ah browser aquí para que podamos ver tipo de dónde - estamos. - Um y hablemos un momento de lo que vamos a hacer en este ejercicio. - ¿De acuerdo? - Entonces puedes ver aquí estos aire- todo el contenido de la página que agregamos en todos los ejercicios anteriores. - Entonces aquí tenemos todos los videos de texto, - imágenes y enlaces de ejercicios anteriores y pasados y usando, - um, - ya sabes, - espaciado como relleno y margen y ancho y altura que aprendimos del modelo de caja - ejemplo, - Vamos a empezar a dimensionar y añadir espaciado a estos elementos. - También vamos a añadir algunas divertidas estéticas de caja como imágenes de fondo, - um, - Grady INTs y radio de borde alrededor de las esquinas de nuestras cajas y algunos puntera de sombra de caja. - Agrega algunas sombras de gota a algunos de estos elementos, - por lo que agregaremos algunos contenedores de caja aquí a nuestra página en voz alta y los peinaremos . - Dales un poco de estilo estético y al siguiente vamos a pasar a integrar flauta - posicionamiento para crear algunas estructuras de columna en el diseño. - Entonces para empezar con, - vamos a seguir adelante y a traer el código y vamos a entrar en la página html de punto índice, - y he decidido que quiero que el, - um, - el encabezado aquí tenga dos paneles principales en ella. - Y recuerdas que recordarás del ejercicio anterior que creamos, - ah, - panel de logotipo y un panel de barra de gallo, - y eso nos permitirá crear un contenedor que se estire por toda la pantalla. - Pero también me gustaría crear algunos rapero Tibbs que podemos usar para centrar contenido usando - margen automático, - que vimos en los ejemplos de diapositivas de conferencia anterior. - Entonces queremos tomarnos así. - Ah, - este logotipo aquí y empujarlo a un contenedor que se centró aunque tendremos una caja más grande -circundante llamada logo o panel de logotipos que se estirará con una textura Grady Int 100% - de la pantalla. - De acuerdo, - así que cualquier vez que quieras crear una caja dentro de una caja con fines estéticos y Div es lo más - probable o ir al elemento, - recuerda que en HTML cinco sí tenemos elementos semánticos como Encabezado y sección, - y éstos se reservaron en su mayoría para sugerir semánticamente que se trata de una cierta sección -de la página o que el contenido aquí dentro tenga cierta relación o significado. - En este caso, - sólo estamos interesados en crear algunas cajas para esto, - Por el bien del estilo estéticamente, - algo es así aquí tenemos una caja con la idea de clavar nuestro en una caja de la idea de logo y - por dentro de estos voy a crear una caja interior llamada Div con una clase de rapero esto y -vamos a seguir adelante y cerrar esto aquí, - e incluso podemos hacer un pequeño comentario aquí. - Entonces dejémonos, - no, - más adelante que este este cierre en particular, - Div cierra así al rapero, - y vamos a seguir adelante y añadir otro aquí. - Entonces a veces verás a la gente creando un solo rapero que encerrará todos tus - elementos y muchas veces veces. - Entonces le das un I. - D. - Por lo general la gente lo nombra una idea de rapero o una idea de contenedor. - Ahora, - en nuestro caso, - vamos a tener algunas barras a través de toda la pantalla que se estirarán, - ya sabes, - 100% a través de toda la parte superior del navegador. - Y dentro de eso, - tenemos la necesidad de tener varios raperos más pequeños que van a centrar contenido dentro de - una caja más grande. - Se está estirando por toda la pantalla. - Entonces por esa razón, - vamos a tener varios raperos, - y cada uno de nuestros raperos va a tener, - um, - un nombre de clase de rapero porque, - recuerden, - clase que pueden usar varias veces, - mientras que un I D. - Realmente solo debes usarlo una vez por página. - Entonces vamos a tener un par de clases de raperos aquí. - También vamos a crear una caja que estéticamente va a llevar una textura de madera dentro - de ella. - Por lo que todas nuestras secciones como esta sobre sección y la sección esquina Artista en la empresa - sección de noticias. - Todas estas secciones de página que se airean en el área constante principal. - Todas estas secciones se centrarán usando un rapero, - y también habrá otra caja exterior con una idea de madera que podemos crear que lo hará- sostener una textura de madera dentro de ella. - Eso va a ir detrás de todos estos tramos. - Entonces vamos a salir y darle a este tipo un div yo d de Wood así, - y luego dentro de ella tendrán que hacerlo con la clase de rapero para que podamos centrar - contenido dentro de una caja más pequeña aquí. - Está bien, - y quiero que esto termine. - Ambos tipos tienen que cerrar por debajo de todas las secciones antes de que bajemos al detalle - sección en el Pie de página para que pueda bajar aquí más allá del final de la nueva sección aquí, - y vamos a seguir adelante y en un cierre, - difieren los rapero dot Rapper y también una sección de cierre para la textura de la madera. - Entonces la textura de madera aquí va a ocupar el 100% con de la pantalla, - mientras que cualquier rapero tendrá un fijo con y se centrará para centrar todas las secciones - de la página. - De acuerdo, - um veamos, - también tenemos la sección de detalles, - que es justo antes del pie de página, - y esto tendrá tres columnas. - Eventualmente. - Una columna será la información de contacto, - y luego otra columna serán enlaces a nuestros sitios hermanos y otras empresas de calzado afines - negocios. - Y entonces la tercera columna aquí va a ser para los enlaces de redes sociales y todos estos -tres columnas cuentan aquí- quiero tenerlas también dentro de un fijo con eso un centro usando un div con una clase de - rapero. - De acuerdo, - así que los detalles se estiran el 100% de la pantalla, - pero entonces tendremos una caja con una fija con dentro de ella, - por lo que su sitio no podría no estar conformado exactamente igual que el mío. - Estéticamente, - esto es sólo el que estoy logrando la mirada que voy hacia adelante. - Pero está perfectamente bien si eres estructura rapero o tus estructuras div no son las mismas - que las mías. - Está bien, - así que parece que todo está en su lugar aquí en la página del índice. - Ahora he ido adelante en todas las demás páginas, - como catálogo, - contacto, - precios y venta, - y he añadido todos estos raperos, - uh, - y Stives con la madera textura. - He agregado todos estos ahí para ti, - así que sólo quería agregarlos a la página del índice sólo para mostrarte sólo para mostrarte dónde se colocaron en el código, - ¿de acuerdo? 34. Aplicación de propiedades de la caja: - Entonces ahora lo que podemos hacer es debilitar Saltar a la página CSS de punto de estilo. - Y yo sólo voy a ir de arriba a abajo. - Y voy a añadir un montón de estilos a los diferentes elementos a medida que voy, - sólo añadiendo en algún espaciado usando modelo de caja y también algunos ingenio y alturas de las cosas y - también algunas estéticas de caja y luego más adelante pasarán a usar propiedades flotantes para - colocar elementos y crear estructura de columnas. - Entonces solo podemos ir a la parte superior de la página de CSS de punto de estilo aquí- y el 1er 1 que voy a hacer es realmente voy a seleccionar el cuerpo en sí. - Entonces el cuerpo es en realidad un elemento. - Y recuerda los cuerpos, - toda el área visible de la página. - Y sigamos adelante y agreguemos aquí una propiedad estética de caja, - que se llama fondo. - Entonces el fondo es la forma en que podemos especificar una imagen y la imagen se está posicionando y - si se repite o no etcétera. - Entonces para especificar una imagen de fondo, - podemos decir que eres l y luego entre paréntesis, - podemos apuntar hacia la ubicación de la imagen. - Alguien adelante y diga punto, - barra de puntos para salir de la carpeta CSS, - y luego las imágenes se inclinan para entrar en la carpeta de imágenes. - Y voy a usar Ah una imagen llamada papel hecho a mano consiguió PNG y por defecto, - si no especificas alguno, - um, - cualquier posicionamiento o cualquier repetición de la imagen por defecto, - se colocará en la parte superior izquierda esquina del cuerpo, - y se repetirá infinitamente porque no especifico ningún comando repetido. - Los valores aquí sólo se van a repetir horizontal y verticalmente como faras. - La ventana del navegador puede ir, - así que es bueno y guardar eso y volver y vamos a darle refresco Y eso fue bastante sutil. - No sé si ustedes lo pueden decir, - pero todo es blanco antes y ahora en realidad tiene una especie de textura de papel. - Um, - si acercamos aquí, - podrías tal vez lo puedas ver un poco mejor allá, - este tipo de ah, - una textura de papel hecha a mano. - Entonces es un blanco apagado. - Acabamos de dar a nuestras páginas blancas textura sutil de blanco claro. - Si quieres seguir adelante y echa un vistazo a cómo se ve esa imagen por sí sola, - puedes traer eso aquí arriba en el buscador y puedes ver eso se llama papel hecho a mano. - Entonces ah, - cuadrado de esto es sólo así de grande. - En realidad solo son 100 por 100 pixeles, - pero en realidad se está repitiendo infinitamente, - por amplia que sea nuestra pantalla, - por alta y ancha que sea la ventana del navegador, - sólo va a repetir esta textura y parece una textura sin costuras. - Entonces también vamos a cambiar algo de espaciado en cosas como las H twos y H threes. - Y recuerda, - si uso una coma, - puedo especificar un selector compuesto Bueno, - donde va a dar estilo tanto al H dos como al H tres igual, - y vamos a añadir algún margen. - Algún margen inferior aquí, -que es recordar, - margen es el espaciado exterior de los elementos. - Entonces si quiero agregar un poco de espaciado por debajo de las H dos y H tres, - puedo establecer eso aquí. - En nuestro caso, - el espaciado por debajo de la H dos y H tres es un poco más de lo que quiero. - Este es el valor predeterminado que se está obteniendo de lo normalizado en CSS al que también hemos vinculado -, - y, - um, - esto parece que está a unos 2025 píxeles de distancia. - Yo quisiera que Teoh realmente estuviera más cerca de los párrafos. - Entonces voy a poner eso en cinco píxeles de margen. - ¿De acuerdo? - Y si salimos y guardamos eso y volvemos a refrescarnos, - podemos ver que cambiamos el espaciado ahí. - Aparte de nuestros encabezamientos aquí, - también queremos cambiar el margen por debajo de nuestra lista. - Por lo que hemos ordenado y a tampoco lo hicimos las listas. - Y si queremos cambiar el azul del margen ahí, - podemos ponerlo en margen dash bottom y diremos 10 píxeles y los propios ítems de la lista. - Queremos que sangren un poco, - así que vamos a seguir adelante y establecer el margen que Dash dejó en unos 20 píxeles como ese y vamos a guardar- y vamos a volver a navegar y refrescar ahora para ver estos. - Estos artículos de lista están en realidad en la página del catálogo. - Y si me desplazo aquí abajo hasta donde tenemos archivo de zapatos, - los verás sangrados aquí 20 píxeles. - Y también aquí verás los 123 que deberían ser ahora y sangraron 20 píxeles aquí. - Está bien, - eso está bien. - De acuerdo, - Así que nuestros párrafos y barra de direcciones, - también tenemos algún tamaño de fuente aquí. - También seguiremos adelante y agregaremos algún margen dentro de aquí. - Así que sólo de la misma manera que podemos ver margen, - guión, - arriba, - margen, - guión, - margen inferior, - guión izquierdo. - También podemos usar taquigrafía. - Um, - y recuerda, - el número de valores que coloques aquí determinará qué lado se ve afectado o cuál - lado se está espaciando. - Eso aquí podemos decir, - Ya sabes, - por ejemplo- si queremos poner los 20 primeros y ambos lados en cero, - pero queremos establecer los 2 25 pixeles inferiores, - esta sería otra forma de escribir esto. - Entonces en lugar de decir margen, - guión abajo, - también podemos decir margen, - que es taquigrafía y decir cero en el cero superior a izquierda y derecha y 25 píxeles en el - inferior así. - Entonces cuando hay tres valores, - el primer valor es el segundo valor superior es ambos lados, - y el tercer valor es el inferior. - ¿De acuerdo? - Y también vamos a seguir adelante y añadir algo de espaciado. - Usaremos la misma técnica para agregar algo de espaciado debajo de las figuras. - Así que recuerden, - tenemos un html cinco elemento semántico llamado figura que existe rodeando todas nuestras - imágenes aquí. - Y también la figura está rodeando también, - nuestro video aquí en la sección de esquina de artistas. - Entonces vamos a seguir adelante y decir, - Figura y vamos a añadir un margen aquí de coma cero o discúlpame espacio cero espacio, - 10 píxeles, - sólo 10 píxeles en la parte inferior y sin margen en el interior superior. 35. Tilla de estilo: - Añadamos también algo de estilo a nuestra mesa que creamos. - Recuerda que teníamos una mesa aquí en la página de precios. - Sólo te lo mostraré por un momento. - Entonces esta es la sección del gráfico de precios aquí, - y tenemos esta tabla compuesta por los elementos TR y th que es cabecera de tabla y T d. - ¿Cuál es el divisor de mesa o un no encabezado aquí, - crear estructura de columna o crear realmente una tabla célula. - Entonces estos aire creando todas esas filas y columnas de la tabla Así que nos gustaría darle estilo a esto como - es Puedes ver lo que parece poco elegante aquí, - debilitar, - Saltar a precios. - Y se puede ver que estos aires se agrupan aquí, - así que veremos qué podemos hacer para que esto se vea un poco más bonito. - Um, - vamos a seguir adelante y decirle a este tipo dedo del pie tener un ancho del 100%. - Uh, - y eso será agradable, - porque entonces cuando cambiemos el tamaño de nuestros envoltorios, - um o, - ya sabes, - el tamaño del dispositivo se escala hacia abajo. - Podemos hacer que la mesa responda en consecuencia. - Entonces pondremos a este tipo para que tenga un ancho del 100% y vamos a seguir adelante y decir Margin 000 20 - píxeles como ese y vamos a añadir un borde a la parte superior de un píxel medio sólido Gris así - usará un atajo decimal hexi para gris medio, - y también crearemos un borde similar. - Pero esta vez en el lado izquierdo también, - diremos guión fronterizo izquierda un píxel, - libra sólida C C c para crear allí un gris medio. - Está bien, - También queremos darle estilo a la rosa de mesa, - que está usando la etiqueta TR así. - Quiero agregar un color de fondo a estos tipos, - um, - labios atrás tierra, - y vamos a decir e f g f e f, - que es de un color gris muy claro, - algo así como a solo 11 muesca del blanco de alguna manera - um, - y echemos un vistazo a eso por un segundo. - Entonces si refresco esto ahora- estos tipos son de color gris claro, - pero se puede ver y también tenemos un borde en la parte superior y en el lado izquierdo. - Y también se está estirando al 100% en este momento. - Está bien, - ¿Y si quisiera poner el este este este color gris más claro a cada otra fila. - Entonces tal vez, - como yo quiero que sólo las filas pares de las tejas de la mesa sean un color de fondo gris claro. - Entonces lo que puedo hacer entonces es que puedo usar un selector de pseudo clase. - Anteriormente, - miramos selectores de pseudo clase para enlaces como hover y visitamos para controlar varios - enlaces estados. - Echemos un vistazo a otro seudo selector de clases llamado Child, - y vamos a seguir adelante y decir End child even. - Y esto seleccionará solo filas incluso numeradas solo filas de tabla numeradas y lo cambiará a - este este color gris aquí así. - Entonces, - por ejemplo, - si dijera, - um, - la mesa se levantó, - por ejemplo dedo del pie blanco así y luego dije las únicas las filas pares a un gran color - va a conseguir este efecto, - que es así. - Entonces ahora es algo así como rayado, -y es más fácil ya que tenemos la fila de la tabla rayada así, - es más fácil ver dónde se alinean estos entre sí. - Um, - resulta un poco más tarde. - Sólo vamos a decir a las secciones que todo está adentro para ser blanco, - así que hasta podemos sacar el blanco por ahora. - y eventualmente sólo heredarán el color de la sección blanca detrás de la mesa. - Um, - vamos a ver, - ¿Qué más queremos hacer aquí, - a la mesa? - De lo que tenemos los encabezados de mesa y divisores de mesa, -que conforman todas las columnas de la tabla y especie de rebanar en celdas individuales de- la tabla. - Y recuerda, - queremos usar relleno para espaciar dentro de elementos y margen para espaciar fuera. - Entonces si quiero agregar espaciado alrededor de estos números y estas palabras aquí, - tengo que usar espaciado dentro del elemento. - Entonces vamos a seguir adelante y poner a este tipo para que tenga un relleno de 10 pixeles. - Creo que eso debería quedar bien. - Y también pondremos a este tipo para que tenga un guión fronterizo a la derecha de un píxel, - sólido color gris medio así, - igual que antes. - Excepto la última vez, - ya sabes, - para la mesa sólo como un borde en la parte superior e izquierda. - Toda célula individual tendrá una frontera en los derechos y también en la parte inferior así. - Entonces diremos eso y volvamos a refrescarnos y a ver qué hizo eso. - Ahí vamos. - Así que el relleno agregó algunos, - obviamente algún relleno alrededor de cada uno de estos tipos y el, - uh, - cada célula individual tiene un borde en la parte inferior a la derecha. - Este tiene en la parte inferior en la parte inferior derecha a la derecha. - Entonces ya que cada uno tiene un borde en la parte inferior y la derecha, - en realidad hace una caja. - Y luego para hacer la frontera en la parte superior e izquierda, - acabamos de añadirla a la mesa misma para rellenar. - Sólo éste de aquí y el del lado izquierdo está en nuestra mesa se ve bastante bien. - A este tipo se le llama un th, - que es encabezamiento de mesa. - Entonces, - por ejemplo, - el pensador Steam Dolby en Washington, - Warby en Brixton. - Thes Brandon nombra a estos aire dentro de las etiquetas TD, - pero este de aquí marca en la parte superior está dentro de un encabezado de mesa th. - Entonces si queremos que el estilo de fin de semana el encabezado de la tabla sea un poco diferente, - para que sepamos que es el encabezado Um, - así que cambiemos el color de fondo de éste para que sea un poco más oscuro. - Gris dirá cinco látigos libra 555 y también cambiaremos el color del texto para que sea blanco -así y volveremos a refrescarnos, - y ahora puedes ver los encabezados de la tabla más oscuros ahí. - Eso se ve bastante bien. 36. Formas de estilo: - um, - saltemos por encima de la página de contacto aquí y usemos el, - ya sabes, - las nuevas propiedades que hemos aprendido, - como display y, - um, - y ingenio y relleno y margen para hacer un forma atractiva aquí. - Entonces ahora mismo, - nuestra forma se ve un poco triste. - Volvamos a aprovechar las cosas nuevas que hemos aprendido y darle estilo a esta forma - aquí. - Entonces voy a seleccionar todas las áreas de entrada y todas las áreas de texto, - y por defecto, - estos tipos se muestran en línea. - Voy a cambiarlos a bloque de exhibición. - De esa manera se mostrarán uno encima del otro, - uno al otro en lugar de lado a lado. - A ver qué hizo ahí. - Entonces si me refresco ahora- estos campos foráneos airean uno encima del otro así. - Está bien, - eso es bastante guay. - Um, - vamos a seguir adelante y decirle a este tipo también tiene un ancho del 100% igual que hicimos con la mesa- . - De esa manera, - se va a estirar dinámicamente, - y esto lo hará Esto será útil cuando empecemos a hacer la respuesta del diseño donde, - uh, - las tablas y las formas y las cosas se redujeron en diferentes tamaños dispositivos por lo que lo haremos -un fluido con de 100% allí- y vamos a añadir un poco de relleno dentro de todos estos elementos a cinco píxeles sumará un gran adentro - tablero abajo aquí de cinco pixeles, - para que esos aire se separaron un poco y vamos a añadir una caja sombra, - que añade una sombra de gota debajo del elemento. - Y diremos cero para el desplazamiento horizontal. - Tres píxeles para el desplazamiento vertical. - Cinco píxeles para el radio de desenfoque y libra C C. - C para el color de sombra así y también agregarán un borde alrededor. - Estos tipos dirán que hay una frontera a cada lado. - Eso es sólido de un píxel. - Si, - si, - si sólo para igualar la mesa ahí y vamos a guardar eso y volvamos a echar un vistazo a esto -, - entonces se refrescará. - Y eso empieza a parecer más fresco. - Tenemos el nombre, - correo electrónico, - teléfono y mensaje aquí- y eso está todo bastante bien. - Está bien, - um, - ver qué más quiero. - Un ciervo. - Bueno, - una cosa es que este botón, - el botón de envío también se está estirando al 100%. - Entonces creo que lo que voy a hacer es establecer un estilo para seleccionar específicamente el botón de envío. - Eso no va a estilo 100% que en realidad va a tener un fijo con si fuéramos a saltar - esa página sólo para que te pueda mostrar en la página de contacto. - Si bajo al formulario de contacto aquí, - notarás que esta entrada tiene un tipo de texto. - Este tiene un tipo de correo electrónico. - Este tiene un tipo de teléfono y este es el área de texto. - Y ya he peinado todo esto para estar 100% encendido porque le dije a todos los insumos que fueran 100% anchos. - Este botón aquí que dice enviar en él también está estilizando al 100% aquí. - Está bien, - Ahora éste tiene un tipo de presentación que es singularmente diferente a estos otros tipos de - texto y correo electrónico y teléfono. - Entonces lo que puedo hacer es que puedo usar un tipo especial de selector llamado selector de atributos. - Um, - y si quieres aprender más sobre los atributos, - selectores, - puedes referirte de nuevo a las diapositivas para la conferencia de selectores CSS. - Entonces vamos a volver al estilo de punto CSS y bajaremos aquí y vamos a seguir adelante y - digamos entrada y luego pondremos corchetes para seleccionar solo una entrada con un tipo específico, - para que podamos decir tipo igual a enviar. - Entonces lo que esto hace es que diga Hey, - navegador. - Vamos a buscar un elemento, - um, - elemento de entrada y vamos a seguir adelante y Onley seleccione los elementos de entrada que tengan un atributo - con el tipo igual a presentar. - Está bien, - y vamos a añadir un margen en la parte superior de esto diciendo Margin, - tablero y diremos cinco pixeles, - y eso nos dará un poco de espaciado por encima del botón para que no esté bien en contra - el capataz pone . - Y cambiemos también el ingenio. - Por lo que normalmente el ancho de los insumos es del 100%. - Sólo queremos hacer de estos 100 pixeles, - por lo que va a ser un más pequeño, - los arregló. - Y pongamos el color de fondo en negro y el color del texto en blanco. - Y si me gustaría rodear los bordes de un Elemento y CSS tres, - puedes usar el radio de guión de borde y lo estableceremos en 25 pixeles, - que rodeará las esquinas y hará que se vea un poco más como un botón circular- en lugar de ah, - gráfico con bordes cuadrados, - y vamos a seguir adelante y quitar el borde voluntad para decir frontera cero porque por defecto, - los botones tienen un borde. - De acuerdo, - así que vamos a guardar eso y vamos a volver y refrescar y ver qué le hizo eso a nuestro botón de envío - aquí. - Coulson, - nuestro botón hijo se ve así cuando pasamos el cursor sobre el botón del sol. - Queríamos cambiar un poco para que la gente sepa que ahí que pueden dar click en él. - Eso justo de la misma manera que creamos una acción hover para el estilo hover para enlaces. - Podemos hacer lo mismo para los botones de entrada diciendo, - Oye, - CSS, - ve y encuentra una entrada que específicamente tenga un tipo de atributo igual a enviar. - Y entonces puedo usar el pseudo selector de clases hover para decir Y cuando pasemos sobre él, - estilo de esta manera. - Entonces lo que quiero hacer aquí es sólo cambiar el color de fondo. - Eso es lo único que realmente quiero cambiar cuando pasemos por alto es en lugar de negro. - En un principio es negro. - Aquí, - vamos a cambiarlo, - Teoh un color gris más oscuro así que vamos a ahorrar. - Y si me refresco, - entonces si paso el cursor sobre enviar, - se puede ver que se vuelve a un color más claro. - Se volverá a un color gris más claro ahí así 37. Iframe de estilo: - genial. - Está bien, - um, - algunas cosas a poner para el modelo de caja del marco I. - Entonces estamos usando un marco de ojos en la página de contacto aquí, - que es el Google Maps en la cama. - Estamos incrustando Google Maps. - Estás usando el código que copiamos en un ejercicio anterior aquí desde Google Maps. - Y está dentro de este elemento llamado marco, - y tenemos que seguir adelante y darle estilo a esto. - Está bien, - Lo que voy a hacer es entrar en el CSS aquí y establecer I frames y quiero quitar la frontera - fuera de ella. - Voy a decir frontera cero, - Voy a decir relleno cero y margen cero. - Uy, - Margen con ojo. - Ahí vamos. - Y también vamos a Sethi desbordamiento a escondido De esa manera. - No aparecen barras de desplazamiento. - Y si hay algún mapa que no quepa dentro del tamaño del marco, - simplemente quedará oculto. - Y vamos a seguir adelante y establecer la altura en 353 píxeles y pasa a saber que esto es una - buena altura para que coincida aproximadamente con la altura de la forma en la que está por encima - es. - Entonces volveremos y refrescaremos eso y eso le da una altura. - Eso será Oh, - de aquí a aquí va a ser casi igual a de aquí a aquí. - Y eventualmente, - estos van a ser una estructura de dos columnas donde el donde estará el mapa a la derecha -columna- y el formulario estará en la columna izquierda, - ¿de acuerdo? 38. Centrar contenido: - Uh, - y recordarán que hace un tiempo agregamos un rapero, - def porque queríamos tener algunas barras en la pantalla para el panel para el logo aquí-, que se va a estirar por toda la página todo el camino a través de la parte superior. - Pero queríamos enviarle algún contenido dentro de ella. - De acuerdo, - así que echemos un vistazo a eso. - Recuerda, - agregamos esto lo hizo con la clase de rapero en toda la página, - en cualquier lugar que quisiéramos centrar los contenidos, - como dentro de este panel de logotipos y también dentro de la barra de navegación. - Por lo que ahora guardia Knave Bar estirará 100% del panel del logotipo de la pantalla se estirará 100% de - pantalla. - Pero rapero, -eso está conteniendo el H uno y H dos con el nombre de la empresa y el rapero aquí- conteniendo una navegación que vamos a dar una fija dentro del centro. - Entonces ya lo he aplicado en todas las páginas diferentes, - y podemos simplemente volver al CSS y añadir la clase para ello diciendo rapero de puntos, - y le daremos un fijo con, - um 9 60 píxeles. - Ahora podemos cambiar esto cuando pasemos al diseño responsive. - Lo que haremos es dependiendo del tamaño del dispositivo. - Podemos cambiar el ancho del rapero. - Y debido a que no especificamos un con para el otro contenido dentro, - se va a escalar en consecuencia. - ¿De acuerdo? - Y recuerdas que del anterior apagado ejemplos en las diapositivas de conferencia que miramos - usando margen automático para centrar al rapero. - Entonces cuando solo solíamos valores dentro de relleno o margen, - el primer valor especifica la parte superior e inferior. - Entonces esto significa margen cero en la parte superior e inferior, - y el segundo valor significa ambos lados izquierdo y derecho. - Por lo tanto, establecer un margen automático a la izquierda y a la derecha empujará la misma cantidad de espaciado en el - izquierda y derecha, - lo que logrará centrar el elemento. - En realidad es echarle un vistazo a eso aquí en el navegador. - Entonces si tocamos refresco, - se puede ver a todo mi hijo. - Ahora todo mi contenido está centrado. - Si te gustaría poder ver al rapero saber realmente, - como lo que hacen estos contenedores debilitan temporalmente, - al menos podemos darle un color de fondo, - por lo que es más fácil para ti verlo así y luego vamos a golpear refresco, -y al darle un color de fondo, - en realidad se puede ver a ese rapero. - Entonces hay un div más grande aquí arriba llamado Logo con una idea de logo que se estira al 100%. - Y vamos a seguir adelante y darle a eso un Grady de color viniendo aquí muy pronto. - Se desvanecen de Blanco a Gris. - Um, - y entonces hemos creado este rapero DIV rapero dentro de ella para crear una caja como fija con- . - Eso va a centrar el contenido y se puede ver incluso cuando destine el navegador, - ah, - más ancho o más estrecho. - Es mantener centrado ese contenido dentro del rapero. - Entonces en realidad hay un rapero por aquí alrededor del logo. - Hay otro rapero por aquí, - que está alrededor de la navegación. - Hay otro rapero alrededor de todo el contenido, - el contenido principal aquí que contiene todas estas secciones. - Entonces hay como una sección llamada Company News que está dentro de la envoltura, - y esa sección se está centrando porque está dentro de ese rapero y también esta cosa- llamada Artist Corner. - Aquí hay una sección que antes etiquetamos Artist Corner. - Eso también está dentro del rapero y también una sección que se trata de la empresa que contiene - esta imagen en este párrafo aquí en el rubro que también está dentro de ese rapero. - Está bien, - genial. - Y luego también- esta es una sección justo antes del pie de página. - Creamos una sección que está en todas las diferentes páginas. - Se llama detalles que tiene la información de contacto, - enlaces y los enlaces de redes sociales ahí. - Está bien, - voy a ir a quitar el color de fondo de ahí, - pero en cualquier momento que estés construyendo un diseño, - um, - puede ser más fácil para ti solo darle a estos contenedores colores de fondo solo para que tú - lo puede ver. - Y entonces eso hace que sea un poco más fácil ver donde las cosas se airen, - iniciar y parar donde las cosas empiezan un fin y ayuda cuando estás posicionando - cosas, - ¿de acuerdo? 39. Aplica la sombra de la caja: - hay unas cuantas clases más que se adherirán. - Añadamos otra clase aquí llamada Sombra, - y podemos seguir adelante y agregar una sombra a ciertos elementos de la página y, por supuesto, - usaremos box shadow para hacer eso. - Y diremos cero horizontal, - A ver. - Y luego diremos tres píxeles desplazamiento vertical, - 10 píxeles para el radio de Desenfoque y hará que el color sea casi negro. - Pero no del todo. - Esta es una libra gris muy oscuro. - 333 Está bien. - Y ya he aplicado Rapper, - pero no he aplicado sombra en ningún lado. - Entonces sigamos adelante y en realidad sumamos la clase de sombra a algunos de los elementos. - En realidad ya lo he agregado en el contacto del catálogo, - página de precios y ventas. - Pero sólo para mostrarte dónde lo vamos a poner a la vista, - he ido adelante y lo he dejado fuera en la página del índice para que podamos ver, - um, - cómo pasé por una temporada añadida. - Entonces en la página de índice aquí, - el primer lugar al que vamos a añadir una sombra está en ese panel de logotipos, - así que va a haber una caja que se extiende por toda la página llamada logo, - y podemos darle a eso una clase yendo dentro de ahí y decir clase equivale a sombra. - Y como voy a añadir esto en unos pocos lugares diferentes, - todos sólo copiarlo aquí y luego vamos a ir a través y pegarlo a lo largo. - ¿De acuerdo? - Entonces el siguiente lugar donde principalmente voy a estar sumando, - esto está dentro del área de contenido principal. - Uh, - aquí abajo más allá de la cabecera tenemos la textura de la madera va a empezar en el rapero, - y entonces todas estas secciones realmente van a conseguir sombras. - Entonces estas van a ser secciones que voy a dar un color de fondo blanco y una gota -sombra, - y eso va a estar encima de esta textura de madera- y van a estar centradas porque están dentro del rapero. - Entonces pasaré por cada sección y añadiremos las sombras. - Entonces artistas esquina, - también obtienes una clase de sombra y, - um, - noticias. - También se va a sacar la noticia de la empresa Esta sección también va a conseguir una sombra de gota sobre ella - así. - Y creo que eso es todo. - A ver, - ¿Quiero añadir la sombra en algún otro lugar? - Yo no lo creo. - Creo que no voy a sumar a los detalles ni al pie de página. - Entonces estamos bien en esa página. - Y como dije, - ya he agregado esto a algunas de las otras páginas o en realidad a todas las demás páginas allí- . - Muy bien, - así que vamos a guardar eso y vamos a volver al navegador aquí y refrescar. - Y ahí se puede ver la sombra de gota. - En efecto, - hay una sombra de gota aquí en cada sección, - como las noticias. - El artista de Thea rincones lo que estamos llamando a éste, - y éste es como de la empresa. - Está bien, - y aquí está la sombra de gota en el logo. - Este es el panel del logotipo. - O lo hicieron con la idea de logotipos. - Se puede ver que lo hizo con la idea de logo. - Nunca especificamos un ancho. - Y debido a que los dibs son elementos de nivel de bloque, - solo está estirando el 100% de la pantalla. - Para que esa sombra estire el 100% de la pantalla que deja caer sombra ahí. - Considerando que, - uh, - tenemos otro div dentro de él con la idea de rapero que está manteniendo eso centrado ahí - justo de la misma manera el rapero centrando todas estas secciones abajo. - Está bien, - eso es bastante guay 40. Aplica degradados: - y vamos a apuntar a ese div con la idea de logo. - Está bien. - Y queremos agregar algo de espaciado dentro de aquí. - Queremos agregar algo de relleno. - Vamos a poner a este tipo también. - 85 píxeles, - 0 25 píxeles así. - Agrega algo de espaciado en el interior del logo. - A continuación, - vamos a añadir color de fondo de ingrediente. - Ahora, - en el código completado, - vas a ver, - um, - ya me he topado con ingrediente. - Eso se ve bastante bonito. - Es algo así como un blanco a un desvanecido gris claro, - y no voy a seguir el código para el mismo exacto aquí. - Pero lo que quiero mostrarte es un sitio que puedes usar es un recurso para generar el CSS para - Grady INTs. - Si quieres tener un color de fondo se desvanece dentro de un elemento como este panel de logo. - Entonces si vuelvo a mi navegador y abrí una nueva pestaña debilitar tipo en CSS tres y vamos - tipo en Grady int generator. - Ya viene ahí arriba, - y escribimos generador de ingredientes como este generador de tres ingredientes CSS, - y vamos a ir a este sitio tiene uno realmente bonito. - Se llama color Zillow dot com slash ingrediente Editor es la chica, - Pero se puede ver aquí en realidad hay una tonelada de estos por ahí. - Puedes probar diferentes si quieres, - y tienen todos estos presets. - Entonces si encuentras algo así como un fundido de color que te queda bien, - solo puedes seguir adelante y usar uno de los presets. - La forma en que funciona esto es que puedes hacer clic y arrastrar para mover la ubicación de estas paradas de color. - Puedes agregar más paradas de color al igual que haciendo clic debajo de él así, - y luego puedes seguir adelante y cambiar el color. - Entonces, - por ejemplo- si hago como un color verde diferente que se desvanecerá de como blanco a gris y espalda. - Si quieres deshacerte de estos, - si haces clic en ellos y los tiras hacia abajo lejos de ese deslizador, - el deslizador de color, - sólo hará que desaparezcan. - Um, - Entonces, - por ejemplo, - si quiero que este de aquí sea como un poco de gris claro casi de blanco claro, - puedo Eso es realmente bueno. - Esto es todo e el valor de los hacks, - um e Y aquí abajo, - si queremos que esto sea un poco más oscuro. - Podríamos simplemente, - como, - dejar esto atrás un poco así, - y eso se desvanecerá de como un grado de luz blanco apagado a un gris ligeramente medio como ese. - Eso se puede ver. - Ya sabes, - hay diferentes tipos de resplandor que podrías hacer, - como horizontal una diagonal para hacer que se desvanezca de un color a otro. - O como una radio, - que se desvanecerá del exterior al interior en forma de círculo. - Sólo lo vamos a mantener como vertical para este ejemplo. - Y lo bueno de esto es que te da una interfaz de usuario para crear el Grady int que -quieres, - y puedes dimensionarlo a la aproximación de tu elemento. - O incluso puedes perforar exactamente el tamaño de tu elemento aquí. - Y te da el todo el código CSS aquí abajo, - y puedes ver que en realidad es bastante código actualmente para conseguir que los ingredientes trabajen con el dedo del pie - todos los diferentes navegadores. - Desafortunadamente, - en realidad hay una cantidad bastante pesada de código CSS justo aquí. - Lo que vamos a hacer es hacer clic en este pequeño botón aquí en la esquina que dice -copiar en eso va a copiar todo el código para nosotros-, y entonces podemos seguir adelante y entrar aquí también. - Uh, - el estilo del logo, - y podemos pegar eso ahí dentro. - Y este bloque masivo de código no habría sido muy divertido para mí escribir. - Entonces acabo de usar ese sitio web para generar esto para mí, - y vamos a seguir adelante y guardar eso y volvamos al navegador aquí y veamos cómo se ve eso-. - Entonces ahora vamos a añadir que Grady se siente aquí, - y yo me refrescaré. - Y eso se ve bastante guay. - Lo estoy cavando, - está bien. 41. Estilizar el logotipo: - Entonces volvamos a entrar y vamos a añadir algunos márgenes de espaciado más y almohadilla ings y cambiar la - forma en que estos H y H dos está dentro de mi sección de logotipo de carga se están mostrando. - Entonces lo primero que quiero hacer es realmente querer cambiar este h un dedo del pie, - no tener margen. - Voy a fijar el margen aquí. - Cero. - Pero creo que lo que voy a hacer es añadir un margen en la parte superior o disculparme, - una palmadita en la parte superior así decir padding dash top y sumaré unos 20 píxeles de espacio - por encima de las letras reales para que ya sabes, - la palabra dentro de la H, - que es E h W um y también voy a cambiar la forma en que muestra. - Actualmente, - este tipo está mostrando el H uno es bloque y el H dos es un elemento de nivel de bloque por defecto -. - Entonces está apareciendo uno en la parte superior. - El otro. - Quería ver se z h w zapatos uno al lado del otro para que pudiera poner en línea esta pantalla de Teoh. - Y quiero tener la capacidad de tener uh, - t quitar ese margen de ahí. - Entonces en realidad voy a decir display en line dash block como este vamos a decir display in - line block. - ¿De acuerdo? - Y vamos a bajar aquí y a una imagen de fondo. - ¿Entonces qué? - Hice waas sí creé una imagen de fondo específicamente para este h uno que tipo de - crear un logo. - Um, - se puede ver que yo generé. - Se me había ocurrido esto. - Este logo de la corona que está aquí dentro de la foto de intro. - Y lo que voy a hacer es poner una pequeña corona por encima de la Z h w aquí. - Entonces voy a hacer de eso una imagen de fondo, - que es una pequeña corona que creé en la tienda de fotos. - Entonces voy a decir punto, - punto, - slash imágenes para salir de la carpeta CSS y dentro de la carpeta de imágenes. - Y vamos a enlazar a logo subrayado Crown Underscore y boss dot PNG. - Y le vamos a decir a este tipo que no repita diciendo que no, - Repite así aquí y dijo que vamos a decir que no. - Repetir. - Y vamos a decirle a esta cosa que posicione el centro superior dentro del elemento así. - Sólo estamos usando la taquigrafía de fondo, - y lo estamos dando como un valor de imagen de fondo, - Aziz. - Bueno, - como el valor de posición de fondo y o disculpe el valor de posición de fondo y también- el fondo repite valor aquí así. - Y también cambiaremos el margen en los dos H también. - Nos vamos aquí y le diré, - Bueno, - vamos a quitar todo tu margen. - Y también vamos a cambiar la forma en que exhibes para que puedas existir uno al lado del otro. - Y los vamos a poner a los dos en la cuadra, - Aziz. - Bueno, - botas así. - Está bien. - Y volveremos a refrescarnos. - Impresionante. - Entonces ahora mi logo, - mi H uno está lado a lado con mi edad, - también. - Y tengo una imagen de fondo apareciendo aquí arriba, - que es mi poco como corona en relieve. - Por lo que ahora mi logo está completo en la esquina de mi panel de logotipos. 42. Estilizar las secciones principales de la sección principales: - Y recuerda, - creamos uh, - un div que va a envolver alrededor de todas esas secciones que tiene una textura de madera, - y esto texturaría caja se va a expandir el 100% de la pantalla. - Va a ser textura de madera, - un Sfar, - una Z que puedo ver dentro del navegador. - Pero entonces tenemos el otro div Ese es el rapero, - que es tiene un fijo con y está centrando el contenido encima de esta textura de madera. - Y luego encima de eso, -tenemos estas secciones que, -um, - van a tener nuestro contenido principal de la página. - De acuerdo, - así que vamos a seguir adelante y crear un estilo entonces para me gustaría esto. - Y vamos a darle a este tipo una imagen de fondo como esta imagen de fondo dash, - y vamos a decir que eres l. - Y vamos a seguir adelante y decir que debes enlazar a punto, - punto, - slash imágenes slash Will Dajae peg así y le diremos a éste que tenga un fondo - posición de tablero bien de centro top. - Y también pondremos la repetición de fondo para saber, - repite así y le agregaremos un poco de relleno dentro de esta cosa. - Veremos 30 píxeles en la parte superior e inferior y cero píxeles en la izquierda y la derecha, - y vamos a ahorrar. - De acuerdo, - así que volvamos al navegador. - Y esto crea esta bonita imagen de fondo detrás de todas mis secciones. - Te darás cuenta de que ahora todas mis secciones, - o ver a través. - Entonces, - um qué? - No especificamos un color de fondo para mi sección. - Entonces ahora este impuesto es un poco ilegible, - así que vamos a tener que volver un poco más tarde y darle un color de fondo blanco a - todas nuestras secciones. - Pero lo haremos en un momento. - Pero sí quería demostrar que ahora, -detrás de todo aquí- debajo del panel del logotipo y debajo de la navegación- tenemos una textura de fondo de madera. - Esto tiene un bonito punto culminante en la madera. - Um, - Ahora, - lo único de esto es que quiero tener este punto culminante en la parte superior, - pero quiero tomar este tipo de sombra especie de color más oscuro de la madera aquí-, y quería simplemente continuar nuestra repetición. - Y la razón es que se puede ver que la altura de esta textura de madera no es lo suficientemente alta - para compensar todo mi el resto de mis secciones. -por ejemplo- la sección de artistas sobresale abajo, - y la sección de noticias también sobresale por debajo de la altura de la textura de la madera. - Una de las cosas geniales que podrías hacer con CSS tres es que puedes especificar múltiples - imágenes de fondo. - Entonces lo que hice fue entrar en la tienda de fotos y acabo de recortar una pequeña rebanada de esto- sería aquí abajo donde empieza a desvanecerse. - Sólo voy a decir eso para repetir dentro de eso, -eso sí, - con una idea de madera. - ¿Tenemos Ah, aquí. - Entonces de esa manera, - si el contenido es más alto que la imagen de madera, - también puedo tener otra imagen repetida ahí y CSS a través de la forma que especificas - múltiples imágenes de fondo es que usas una coma como esta y luego especificas otra muchacha - apuntando a otra imagen. - Entonces vamos a seguir adelante y decir punto, - punto, - slash imágenes slash yo subrayaría rebanada punto j peg así. - Está bien. - Y también podemos poner una coma y luego decir que esta otra debe posicionarse arriba izquierda y - para repetir este 2do 1 aquí. - Bueno, - dicen repetir. - ¿Por qué? - Para que veas que Um la primera chica es lo haría en su top central Sin repetición. - Y luego después de estos Commons, -habríamos rebanado, - que es sólo un poco cortado de la madera en la parte inferior. - Hay una rebanada de madera, - y eso es posicionarse arriba a la izquierda y repetir Onley verticalmente, - por lo que esto se repetirá verticalmente. - De acuerdo, - así que vamos a guardar eso. - Y veamos la diferencia ahora que tenemos la textura de la madera, - ojalá se esté repitiendo aquí. - ¿Verdad? - Entonces vamos a pegarle. - Refresca Y ahora se puede ver que la textura simplemente continúa si hay más espacio ahí. - De acuerdo, - entonces la textura de la madera empieza aquí. - Y luego mientras nos desplazamos hacia abajo, - continúa así. - Está bien, - así que eso es bastante guay. - Podemos poner incluso múltiples imágenes de fondo en un elemento así aquí. - Está bien, - um, - también vamos a darle estilo a todas esas secciones porque, -como dije antes- es una especie de arrastre que este texto negro esté sobre este fondo de madera oscura que no se ve - demasiado caliente. - Entonces vamos con estilo. - Todas las secciones como esta seguirán adelante y seleccionarán cualquier elemento llamado seccion, - y agregaremos algo de relleno aquí y veremos relleno 20 píxeles de espacio. - Y también les daremos un color de fondo de blancos así. - Y entonces vamos a seguir adelante y guardar y vamos a volver al navegador aquí y golpear. - Refrescar. - Enfriar. - Entonces ahora tenemos algo de relleno alrededor de ese elemento. - Tenemos este color blanco aquí en la sombra gota debajo de ellos. - Podríamos sumar algún margen de Martin Leadsom entre ellos aquí, - subiendo. - Y se puede ver que la textura continuaría hasta que nos topemos con la sección de detalles así -, - ¿de acuerdo? 43. Sección de detalles de estilo.: - Entonces, en realidad vamos a darle algo de estilo a eso. - Esa sección de detalles aquí. - Entonces justo donde terminaría esto. - Queremos agregar otro Grady aquí donde la sección de detalles está justo antes del pie de página. - Así que voy a bajar aquí arriba detalles o abajo detalles allá, - y vamos a crear un selector llamado hash tag details para seleccionar ese div con la idea - de detalles y vamos a entrar aquí y añadir algo de relleno a ella va a seguir adelante y decir, - 20 píxeles en la parte superior e inferior y 10 píxeles en la izquierda y la derecha. - Y también vamos a añadir una, - uh, - textura de fondo de ingrediente aquí. - Eso voy a saltar de nuevo al generador radiante CSS y en realidad podemos incluso sólo usar esto - uno y tipo de cambiarlo un poco. - Voy a seguir adelante y hacer que estos sean un poco más oscuros. - Ahora diré que este color se vuelve un poco más oscuro y también quizá empieza un poco más oscuro -así, - y lo haremos un poco más alto. - Chicas, - echa un vistazo a eso. - Eso se ve bastante bien. - Um, - y vamos a seguir adelante y decir copia para copiar esto, - Grady que uno se ve bien y luego lo pegamos aquí así. - Enfriar. - De acuerdo, - así que vamos a seguir adelante y guardar eso y volveremos a refrescarnos. - Y si me desplace hacia abajo, - podemos ver ese int codicioso de grados claros y oscuro grande. 44. Creación de la estructura de columna: - Por lo que esto concluye todos nuestros estilos utilizando las técnicas que aprendimos para box model y box - estética. - A continuación, - vamos a desarrollar nuestro diseño de página mediante el uso de las técnicas de posicionamiento de flotación que aprendimos en los ejemplos anteriores. - Si volvemos al navegador aquí, - se puede ver que ciertas secciones van a ocupar el ancho completo del rapero y - otras secciones serán columnas que serán posiciones una al lado de la otra. - Entonces, -por ejemplo- aquí en la página Acerca, -que es nuestra página principal aquí-, esta sección sobre va a ocupar las tres columnas o la totalidad del espacio rapero. - Está bien, - ahora esta sección de artistas aquí que tiene nuestro video en ella, - la sección de esquina de artista va a ocupar sólo las 2 primeras columnas de la izquierda-, y entonces la sección de noticias de la empresa va a ocupar sólo una sola columna de la derecha aquí que - flotará a su lado. - Y en otras situaciones, -como en la página del catalogo- vamos a tener una estructura de tres columnas donde aquí la sección masculina va a ser una - caja pequeña que ocupa sólo la primera columna de la izquierda. - El tramo femenil ocupará la media o la columna central en el centro en el - medio aquí y la sección Niños tomará una sola columna a la derecha. - Entonces tendremos 123 cajas una al lado de la otra. - De acuerdo, - Entonces para lograr esto, - voy a hacer uso del posicionamiento flotante, - y voy a seguir adelante y crear una especie de mi propio sistema de cuadrícula para hacer esto creando clases -. - Y cada clase controlará si esa sección es el ancho de una sola columna, - dos columnas o estirándose a través de las tres columnas. - Y también utilizamos el posicionamiento de flotador para controlar. - Si se queda a la risa se queda a la derecha. - De acuerdo, - así que voy a nombrar a cada una de estas clases de una manera que tenga sentido para mí más adelante por el camino. - Entonces sé cómo aplicar estas clases. - Dependiendo de cómo me guste posicionar estas secciones en la página, - por lo que ciertas secciones sólo tomarán una sola columna. - Si imaginamos que la mayoría tendrá una estructura de tres columnas, -entonces voy a nombrar clases, - llama al CEO L para columna y luego al número uno. - Si sólo se estiran a través de una sola columna. - Voy a usar Llamar dos o C O L dos si se estiran a través de dos columnas y llaman a tres. - Si se estiran a través de las tres columnas, -como en esta sección de intro pic aquí son más bien la sección sobre aquí-, que se extiende a través de las tres. - Está bien, - así que sigamos adelante y creemos algunas clases. - Vamos a crear un año llamado columna uno, - porque sólo se extiende a través de una sola columna y dirá guión bajo izquierda. - Entonces sabemos que esta columna se posiciona a la izquierda y con el fin de posicionarla a la izquierda, - usará float left y especificaremos un específico con para que ocupe sobre Lee Ah, - una columna. - De acuerdo, - así que si hay tres columnas, - 33 0.3% debería llevarme al punto en el que sólo es alrededor de 1/3 porque tres de éstas - sumarían , - como 99.999 um, - y tienen tres columnas iguales. - No obstante, - queremos tener un poco de espacio entre las columnas usando margen. - Entonces vamos a usar una calculadora para averiguar cómo por qué estas cosas tienen que ser para que tú -probablemente puedas hacer esta matemática en tu cabeza-, pero no soy tan genial. - No tan caliente, - Matt. - Entonces voy a asegurarme de que todo esto sea correcto usando calculadora. - Entonces tenemos 100% con del rapero disponible, - y quiero tener 1% de margen entre cada una de las tres columnas. - Por lo que eso sería 1% entre la columna izquierda y media y 1% margen entre la columna - media y derecha. - Por lo que cada uno de esos 1% en el lado izquierdo de la columna media y 1% en el lado derecho de la columna - medio suma dos. - Entonces tengo que restar 2% de los 100 lo que me da 98% sobrantes disponibles con - toe trabajo con. - Entonces ahora puedo tomar ese 98% y dividida por tres columnas, - y eso me dará 32.6. - Está bien, - así que esta columna debe ser 32.6% con todo bien. - Y creo que también tuve un margen a ello dirá que este tipo no tiene margen en la parte superior. - No hay margen a la izquierda y a la derecha. - Pero tiene 20 píxeles de margen en la parte inferior. - Por lo que no doy un poco de espacio por debajo de cada una de las secciones a las que aplico esto. - También creemos una sola columna para el medio. - Entonces esta es la columna que flotará en el medio, - y pondremos esto también para flotar a la izquierda por lo que se apilar al lado de la otra columna- eso está flotando a la izquierda ahí y eso lo pondrá justo en el medio. - Este tipo tendrá el mismo ancho, - que ahora es 32.6%. - Una diferencia es que en realidad voy a tener margen en el lado izquierdo y derecho de este tipo por - diciendo cero en el top 1% a la derecha, - 20 píxeles en la parte inferior y 1% en la izquierda. - Así que recuerda, - si especificas cuatro valores el primer valor. - Si vas en el sentido de las agujas del reloj, - el primer valor es top thes. - El segundo valor es correcto. - Por lo que este es 1% de margen a la derecha. - El siguiente valor que va en el sentido de las agujas del reloj es los 20 píxeles inferiores en la parte inferior y, por último, - 1% a la izquierda. - Por lo que esto dará un porcentaje de margen a cada lado de la columna media. - Ahora la última columna, -que está a la derecha- va a ser más o menos la misma que la Columna Izquierda, -excepto por el hecho de que en lugar de flotar a la izquierda, - podemos flotar a este tipo a la derecha. - Está bien, - pero tendrá el mismo ancho y el mismo tipo de margen, - que no es margen en la parte superior, - ninguno a la izquierda o a la derecha y 20 píxeles en la parte inferior. - Entonces estas serán todas las clases que necesito para mi estructura de tres columnas. - Otra situación es que podría querer un elemento que tome el ancho de dos columnas, - así que seguiré adelante y crearé una clase llamada llamada a significando que ocupa el ancho de - dos columnas y haremos A veces, - ya sabes, -las dos columnas estarán en el lado izquierdo, - y otras veces ustedes dos columna estarán en el lado derecho, - por lo que crearemos dos clases para eso. - De acuerdo, - entonces este tipo obviamente va a flotar hacia la izquierda, - mientras que el del lado derecho va a flotar hacia la derecha. - Está bien, - tendremos un 100% de espacio disponible, - y luego tendremos una columna A que está tomando el con de dos columnas o discúlpame, -una sección que está retomando el con de dos columnas-, y entonces tendremos sólo 1% del margen en el lado derecho de eso. - Y entonces tendremos otra columna que sólo está ocupando el ancho de una columna. - De acuerdo, - entonces en lugar de restar 2% de margen aquí- sólo tenemos que restar 1% de margen, - lo que nos da un 99% así. - Vale, - así que en serio, - lo que queremos hacer es restar el, - uh, - también restar la columna de la derecha porque sabemos que el para este tipo para para columna - a izquierda sabemos que, - um, - vamos a tener la combinación de una columna a izquierda y una columna a derecha, - que en realidad debería cambiar el nombre de aquí. - Esta será una columna una columna izquierda, - una mitad en la columna uno. - Correcto. - Entonces vamos a emparejar como una columna a izquierda con una columna una derecha o una columna para escribir-con una columna uno a la izquierda y ya verás a qué me refiero cuando empecemos a implementar esto en la página -. - Entonces lo que hice fue que decidí restar el 32.6% para averiguar cuáles son los espacios restantes -para esta otra columna. - Entonces tenemos 99%. - Tomamos el margen 100% menos 1%, - y luego vamos a restar 32.6, - lo que me dará el ancho de la otra columna- que es 66.4%. - De acuerdo, - por lo que ambos tipos deberían tener un ancho de 66.4%. - Está bien. - Y este de aquí tendrá un margen de cero en la parte superior. - 1% a la derecha, - Y entonces diremos 20 píxeles en la parte inferior y cero en la izquierda así. - Y éste será el mismo aquí. - Excepto que está flotando derecho. - Y será margen cero en el cero superior a la derecha, - 20 píxeles en la parte inferior y 1% en la izquierda. - Está bien, - así que tengo más posibilidades ahí. - Puedo tener una sección que ocupe el ancho de una sola columna o que ocupe dos columnas. - Está bien. - Y luego por último -ya sabe- quizá queramos tener algo que abarque las tres columnas- así que podríamos llamar a esa llamada. - Tres. - Entonces aquí tenemos, - um, - margen de 00 20 píxeles, - lo que significa cero en el cero superior en ambos lados y sólo 20 píxeles en la parte inferior. - Y vamos a añadir otra clase aquí llamada columna tres para que ocupe las tres - columnas y recuerda agregar múltiples clases. - Podrías simplemente poner un espacio entre cada nombre de clase. - Y ahora esto tiene una clase de columna tres, - y también tiene una clase de sombra, - por lo que también debería tener una sombra de gota. - Entonces vamos a seguir adelante y guardar eso, - y volveré al navegador. - Y en serio, - lo único que va a cambiar aquí es que va a agregar algún margen debajo de él, - lo que se puede ver que sí. - Ahora hay un espacio entre esta sección y la siguiente sección así en esta a - que abarca tres columnas a través. - Está bien, - Um, - no demasiado no demasiado elegante. - Ahí. - Ahora las cosas empezarán a ponerse interesantes aquí abajo. - Entonces esta es la sección de artistas, - y quiero que la sección de artistas tome el ancho de dos columnas o sea, - uh, - 66.4% de ancho y luego tenga la sección de noticias que está justo aquí. - Noticias de la Empresa. - Toma sólo el ancho de una columna por aquí en el lado derecho. - Entonces lo que quiero hacer es usar la columna a la izquierda para el, - um, - para la sección Artistas Corner y quiero usar la Columna uno derecha para la nueva sección. - Derecha para que pueda desplazarse aquí abajo hasta la esquina de artista y podemos entrar aquí y añadir una clase - de columna para subrayar izquierda así y bajará a la nueva sección y vamos a añadir - una clase de columna uno a la derecha, - lo que significa que se queda a la derecha. - Pero sólo tiene el ancho de una columna, - y vamos a seguir adelante y decir eso y vamos a volver a nuestro navegador aquí y vamos a golpear. - Refrescar Y ahí vamos. - Entonces aquí sucede algo tipo de gracioso. - Se supone que las noticias de la empresa pueden caber junto a esta columna de la izquierda. - OK, - pero ustedes podrían recordar que hay dos modelos de caja diferentes, - y, - um, - este navegador en particular Chrome utiliza el modelo W three C box donde cada vez que agrego like - border o relleno en este caso, - tengo 20 píxeles de relleno alrededor de cada uno de estos, - en realidad lo hace un poco más ancho de lo que cabrá lado a lado. - También tenemos algunos elementos, - como la sección de detalles en la parte inferior de la página tiene enlaces corresponsales de contacto y - seguir. - Se está tirando al lado del elemento que está flotando, - así que eso es un poco bobo, - también, - así que tendremos que arreglarlo. - Así que recuerda en el uno fuera ejemplos de la conferencia en las diapositivas de la conferencia anterior, - miramos el uso de una propiedad llamada Clear para que este tipo despeje pasado. - También nos fijamos en cambiar el modelo de caja con para incluir relleno usando box dash dimensionamiento a - CSS tres propiedad para establecer todos los navegadores para usar el mismo modelo de caja. - De acuerdo, - Así que para conseguir que algunas de estas cosas del dedo del pie trabajen, - vamos a tener que volver al estilo que CSS y en realidad creó un comentario arriba cerca de la - parte superior de la página aquí en una sección llamada Fixes. - Aquí mismo está en línea 12 de la página CSS de estilo dot. - Entonces nos desplazaremos hasta ahí y sigamos adelante e implementaremos en algunas de estas correcciones CSS. - Una cosa que queremos hacer es cambiar el modelo de caja, - así que vamos a decir Star para seleccionar todos los elementos así y vamos a seguir adelante hasta, - por defecto. - Inicialmente dirán que estos chicos deben tener un margen de cero um, - relleno de cero y borde de cero solo para hacer un reinicio. - Y luego también cambiaremos el tamaño de caja, -lo que la hará para que cuando especifiquemos un ancho, - incluya el relleno en el borde. - Y diremos, - Usa el valor Border box, - que es el método de tamaño de caja de Internet Explorer. - Está bien. - Y usaremos los prefijos Web kit también para que esto funcione y versiones antiguas de chrome - y safari. - Bueno, - dicen Web kids dash box dash size y vamos a guardar border dash box Y también usamos dash mosey - dash box Dasha dimensionamiento. - Y también diremos que dos cajón fronterizo. - De acuerdo, - entonces todos los elementos ahora deberían estar usando, - um, - el método de caja de frontera de Internet Explorer el cual debería darnos un buen soporte y todos los - navegadores y debería permitir que estas cosas lo muestren correctamente. - Entonces ahora nuestros 20 píxeles de relleno no serán lo que en realidad se incluirá en el ancho. - De acuerdo, - entonces seguiré adelante y ahorraré que tenemos algunas cosas que no están despejando adecuadamente. - Por ejemplo, - la sección de detalles que queremos borrar más allá de la altura de cualquier cosa que flote por encima de ella para que - en realidad podemos desplazarnos hacia abajo luego hasta esa sección de detalle aquí y podemos seguir adelante y establecer la sección - detalle para borrar ambos. - Entonces eso significa que la sección de detalles y ya no saltará al lado de esta cosa que está - flotando. - Y estos tipos tendrán el ingenio apropiado, - por lo que deberían aparecer uno al lado del otro. - Entonces sigamos adelante y guardemos el código, - y volveremos al navegador y actualicemos. - Enfriar. - Entonces ahora estos tipos están apareciendo uno al lado del otro. - De acuerdo, - entonces resolvimos algunos de nuestros problemas aquí Ya tenemos. - Este tipo tiene una columna a clase izquierda la cual está haciendo flotar a la izquierda y dándole un 66.4 - punto 4% con versus éste, - que está usando una columna una clase derecha- que está flotando a la derecha y tiene 32.6 con y porque nosotros cambió el modelo de caja a - border dash box, - esto tiene el 32% o 32.6%. - Con está incluyendo el relleno aquí y también esta. - Aquí. - El 66.4% con está incluyendo relleno, -y entonces tenemos 1% de margen, - lo que suma esto hasta un total del 100%. - Está bien. - Y le dije a esta sección de detalles que despejara diciendo claro ambos. - Ah, - aquí. - Conseguí esta sección de detalle para despejar más allá de la altura de esos elementos que están flotando - arriba. - Está bien, - um, - puede que se den cuenta de que las otras pocas cosas están pasando Eso es un poco bobo. - Um, - así que una cosa es que el ah Div con el i d. - De sería esto texturaría en realidad está en Lee como peaje como este elemento que no es - flotando. - Este elemento de columna tres no está flotando. - Pero recuerda, - cada vez que tienes un elemento padre y flotas Niños dentro de él, - pierde su referencia por lo dicho que sea. - Ahora. - Esto sería este div, -con la idea de la madera que tiene la textura de la madera- se está colapsando. - Es evidente que se está derrumbando porque tenemos a los Niños flotantes dentro de ella, - ¿verdad? - Entonces, ¿recuerdan el método? - Usamos el arreglo que solíamos para evitar que un padre colapse así que voy a subir aquí en el - correcciones y voy a añadir que ese hack especial de CSS para arreglar a un padre colapsado. - Se llama claro Fix. - Entonces crearemos una clase de colon fijo claro después y entraremos dentro y diremos - contenido. - Y vamos a lanzar como un pequeño símbolo de época allí le dirá a este continente que exhiba - bloque. - Y le diremos a este tipo que despeje ambos para despejar más allá de la altura de cualquier Niños flotantes. - Um, - cualquier elemento flotante por encima de él. - Disculpe, - y luego cambiaremos su visibilidad a escondida, - para que en realidad no veamos ese contenido. - Y estableceremos su altura 20 y su altura de línea 20 A oleaje. - Uy. - Y tenemos un pequeño tipo de ahí va a arreglar eso. - De acuerdo, - Seis, - Ahora podría aplicar esta clase a cualquier elemento que se esté colapsando. - Entonces, -por ejemplo- puedo entrar aquí al div con la idea de madera, - y podemos añadir una clase de arreglo claro para evitar que ese tipo se derrumbe. - De acuerdo, - así que vamos a seguir adelante y guardar eso. - Volveremos al navegador y refrescaremos y enfriaremos. - Ahora podemos ver las texturas de madera repitiendo todo el camino por debajo de los Niños flotantes, - tan claros arreglos viniendo aquí abajo y despejando más allá de la altura de los Niños flotantes. - Dar a este elemento padre, -que se llama, - sería una referencia para lo alto que debe ser. - Está bien, - vamos a hacer lo mismo por estos tres dibs aquí abajo. - Vamos a convertir esto en una estructura de tres columnas, - así que acabamos de hacerlo antes, - Así que debería ser bastante fácil recordar cómo hacer esto esta vez. - Entonces si vengo aquí a detalles, - vamos a seguir adelante y darle a este 1er 1 aquí una clase de columna uno a la izquierda. - Entonces diremos Activo, - Yo D. - Disculpe. - Columna Div Clase Una izquierda así y bajará a la segunda columna y vamos a dar - esto una clase de columna uno medio para el medio. - Y por último, -le daremos el último si aquí una clase de columna uno derecho- eso debería hacer que esos tipos aparezcan uno al lado del otro. - Y no queremos que la sección colapse porque tenemos estos tipos estaban flotando Niños -, - Entonces vamos a tener el mismo tema que teníamos arriba con la sección o temporada con el Div -. - Con la idea de madera se estaba derrumbando. - Ahora tendremos el mismo tema donde se derrumbará la sección yo d detalles porque todos - sus Niños dentro o flotando. - Entonces tenemos que darle una referencia de lo alto que debe ser agregando ese arreglo claro y en el - mix. - Y si no recuerdas muy bien qué arreglos claros para ir, - adelante y vuelve a los videos y a la conferencia de diapositivas para checar eso. - Entonces guardé eso y podemos refrescar. - Y ahora se puede ver a estos tipos uno al lado del otro, - lo cual es bastante guay. - Creo que voy a añadir un pequeño borde en el lado derecho aquí y un escrito dentro aquí sólo - a estos dos de aquí. - Entonces vamos a seguir adelante y crear una clase para eso Aquí. - Voy a volver al estilo y a la sección de estilo global y debajo de la sombra - aquí. - ¿Por qué no creamos una clase llamada frontera así? - Y vamos a guardar borde dash colon derecho, - un pixel bueno decir punteado y darle un color gris medio. - Y también agregamos algo de relleno en el lado derecho también, - Así que el texto nunca sube justo contra ese borde y diremos, - palmaditas a la derecha 20 píxeles así y seguro. - Entonces sólo quiero aplicar esta clase de derecho fronterizo, - también. - Esa sección de detalles aquí abajo, - pero sólo a algunos de estos. - Entonces sólo quiero que esa frontera esté en las dos columnas Central de ahí. - Entonces vamos a seguir adelante y agregarlo a la primera columna dentro de los detalles, - que se llama una columna. - Una izquierda vendrá aquí y diremos derechos fronterizos como ese anuncio que estilo allá y -también ir a este llamado Columna uno medio y también sumará Border right, - ese también. - Y tú salvarás y yo volveré y refrescaré, - y ahora puedes ver que es algo sutil, - pero creé una línea de guión justo aquí en el lado derecho de esta columna y también en el - lado derecho de esta media columna de aquí. - Entonces ahora sólo tenemos, -como, - una sutil línea ahí en el centro. - Está bien, - eso se ve bastante genial. - Um, - tengo que decir, - me estoy impresionando. - Chicos, - Me gusta la forma en que se ve ahí. - Por lo que ya he agregado estas clases a las otras páginas, - se puede ver que esto tiene una clase de columna uno a la izquierda. - Esto tiene una clase de columna uno medio. - Esto tiene una clase de columna uno justo aquí tenemos una estructura de dos columnas, - así que esta se llama Columna a izquierda, - y ésta se llama columna uno Columna derecha una columna derecha una derecha, - y esta es columna a izquierda. - Y aquí tenemos la columna de estructura de tres columnas una columna izquierda, - una media y la columna una derecha, - está bien, - y esto nos va a permitir crear diferente estructura de columnas en diferentes páginas. - Puntera cualquiera que sea la sección que nos guste. - Um, - así que si voy a la página de venta, - este tiene una clase de columna tres. - O llame a tres para significar que ocupa tres columnas a través. - Y aquí tenemos columna una columna izquierda, - una columna media, - una derecha. - Está bien, - esta es la columna tres, - ocupa las tres columnas de ahí, - y se puede ver, - ya que tengo un ancho del 100% dentro de mi, - um, - mi mesa aquí, - se está expandiendo tan lejos como puede oír hasta que se encuentra en el borde de la sección. - Ahora, - en la página de contacto. - Tenemos una ah clase de columna columna dos izquierda en una clase de columna uno. - Correcto. - Está bien, - así que eso es todo. - Para este ejercicio, - Espero que esto te diera alguna idea de cómo crear estructuras de página con múltiples - columnas y la flexibilidad para escribir tus propios estilos CSS para crear tus propios sistemas de cuadrícula - usando combinaciones de flotando Ah, - el dimensionamiento de sus columnas. - Y también técnicas para solucionar problemas como claro fijo para evitar el colapso de los padres y el dimensionamiento de caja . - Teoh. - Ajusta todos los navegadores para usar el mismo modelo de caja y también técnicas como despejar para - que podamos despejar más allá de la altura de cualquier elemento flotante arriba en ah, - en próximos ejercicios, - vamos a llevarlo un poco más allá aprendiendo algunas técnicas avanzadas de posicionamiento. - Vamos a volver y terminar el estilo para la navegación, - la pieza principal en la parte superior de la página. - Entonces pasaremos a aprender a construir algunos diseños responsivos usando CSS durante las consultas de medios . - Entonces espero que te guste este, - y espero que estés empezando a agarrar el ahorcamiento de construir tus propios diseños de página. - Siéntase libre de revisar los enlaces debajo del video para algunos tutoriales más sobre posicionamiento y - construir diseños de página, - y luego seguir adelante y pasar al siguiente reto de código, - donde estarás agregando algo de posicionamiento y columna estructura en su propio diseño de sitio web. 45. Herramientas de desarrolladores (parte 2): - Hola. - Bienvenido de nuevo. - Esta es la segunda parte de los videos de Developer Tools. - En la primera parte, - miramos a inspeccionar elementos para que pudiéramos ver a qué se aplicaba HTML y CSS - esos elementos particulares. - Y también nos fijamos en cambiar y modificar los atributos y valores CSS para que pudiéramos - previsualizar cambios en el navegador antes de decidirnos permanentemente hacer cambios en el codigo - editor. - En la segunda parte, - vamos a ver todas las cosas magníficas con las que las herramientas de desarrollo pueden ayudarnos - cuando estamos construyendo diseños de página. - Entonces no hay necesidad de cambiar realmente nada en tu código. - Acabo de crear una situación hipotética aquí donde tenemos un problema ocurriendo en nuestro -layout Así que puedes ver esto es sólo la página de índice de nuestro ejercicio, -y he entrado y he roto a propósito algo aquí-, y estamos va a usar herramientas de desarrollador para ayudarnos a resolver este problema. - Entonces el tema principal aquí es que esta sección aquí llamada el Artist Corner, -se supone que está flotando a la izquierda- y esta sección de noticias de la compañía aquí se supone que está flotando a la derecha- y se suponía que estos tipos eran lado a lado. - Y aquí se puede ver que a pesar de que aparece como si la sección de noticias de la empresa tenga suficiente -espacio para caber lado a lado con esta otra sección-, por alguna razón se está empujando abajo. - Entonces lo primero que voy a hacer es lo correcto. - Haga clic e inspeccione uno de los elementos que me está dando un problema. - Y aquí tengo razón, - hizo clic en la figura, - que es la caja. - Está rodeando el elemento de video en la leyenda de la figura, - y te darás cuenta si miras la parte inferior del panel de desarrolladores aquí, - en realidad hay una miga de pan que te muestra la relación de qué elementos están anidados - dentro de otros elementos. - Entonces, -por ejemplo- estamos en figura. - Si hago clic, - Puedo ver que figura en realidad está dentro de sección con la clase de columna a la izquierda. - Y eso está dentro de un div con la clase de rapero y así sucesivamente y demás. - Entonces si repaso esta sección aquí con la clase de columna a la izquierda, - puedo ver que Chrome realmente me está dando codificación de color para indicar el relleno y también - el margen. - Entonces en este caso, - Chrome utiliza un color verde claro para indicar el relleno interior del elemento, - y utiliza un color azul claro para indicar el área de contenido dentro de ese elemento, - y utiliza un color naranja claro para indicar margen. - Entonces en este caso, - se puede ver que en realidad hay bastante margen en el costado del elemento, - y ese es probablemente el culpable en cuanto a por qué la otra sección, - la sección de noticias, - no es capaz de caber de lado a la par con esta sección de esquina artista. - Entonces si selecciono el elemento ahí como sabemos, - podemos ver todos los estilos CSS que están afectando a ese elemento en particular. - Y si vengo aquí abajo al margen, - podemos ver que el culpable aquí es que el margen derecho está fijado al 20% ahora, -aparte de poder hacer clic y cambiar los valores aquí, - también tenemos otro panel que podemos abrir para ver más información sobre este - modelo de caja particular para este elemento. - Entonces voy a colapsar el panel de pasillos este aquí haciendo clic en esta pequeña flecha hacia abajo, - y debajo de eso se puede ver hay otro panel titulado Métricas, - y vamos a ampliar el panel de métrica, - y eso va a revelar el modelo de caja para este elemento en particular. - Se puede ver si floto dentro del centro. - Yo soy capaz de ver el área de contenido. - Y de hecho, - eso incluso me está dando la cantidad exacta de píxeles dentro de la altura para el contenido disponible- área dentro de este elemento. - Y si paso el rato dentro de la siguiente sección de la caja aquí, - esta que se llama relleno, - podemos ver que en realidad hay 20 píxeles de relleno a cada lado. - Um, - y podemos ver que no hay frontera y que hay un margen de 20 píxeles en la parte inferior - y que ese margen de 20% a la derecha en realidad termina siendo 192 píxeles. - Una de las cosas bonitas de poder ver el modelo de caja es que se puede ver muy claramente - cuánto espacio o cuánto espacio de pantalla inmobiliaria. - Cada elemento en realidad está retomando, - y eso es importante cuando se trata de construir estructuras de columna. - Adicionalmente, - también podemos hacer doble click para cambiar estos valores para poder escribir aquí otro valor, - o también puedo usar las flechas arriba y abajo para cambiar la cantidad de margen en este caso. - Entonces sólo voy a sostener la flecha abajo y meter el margen hasta que vea que hay - suficiente espacio para que la otra columna quepa lado con ésta. - Ahí estamos. - Entonces aquí se ve como alrededor, - ya sabes, - nueve pixeles es más o menos el margen que puedo tener aquí para que la nueva sección t ajuste - lado a lado. - Adicionalmente, -aparte de poner en valores de píxel, - también podemos poner en valores por ciento también. - Entonces, -por ejemplo- si le dije a este tipo al 5% puedo ver que eso no funciona. - Si se lo dijera al 4% puedo ver que todavía no lo suficiente. - Si yo lo dijera al 3%. - Ah, - 2%. - Entonces al escribir el símbolo de porcentaje en lugar de píxeles, - en realidad hará la conversión por mí. - Um, - y otra vez, - si escribo 1% podemos ver que eso funciona. - Entonces 1% del espacio dentro de este rapero, -que son 960 pixeles, - sale a nueve píxeles de espacio. - Entonces ahora que sé que 1% es mi número mágico, - puedo ver que voy a tener que cambiar este 20% aquí, - toe 1% que está en línea 206 de estas hojas de estilo de punto CSS. - Entonces si vuelvo a mi código y vengo aquí abajo a la línea dos de seis, - puedo ver esta es la columna de clase a la izquierda. - Y aquí está el margen del 20%. - Puedo restablecer eso al 1% de ahorro, - y podemos volver y refrescar la página. - Y hemos corregido ese error para que veas que las herramientas de desarrollador pueden ser muy útiles para - solucionar problemas del ingenio, - relleno y márgenes bordes del modelo de caja. - Aziz Bueno de permitirte ver todos los comandos de posicionamiento CSS. 46. Técnicas de posición: - Hola. - Bienvenido de nuevo. - Se trata de diapositivas 3.2 técnicas avanzadas de posicionamiento. - Por este punto, - deberías empezar a sentirte un poco más seguro sobre la construcción de diseños de página. - Y en el ejercicio anterior, - miramos el uso de flotación para crear estructura de columnas. - Y en este próximo ejercicio, - vamos a aprender algunas técnicas de posicionamiento adicionales. - También vamos a echar un vistazo a una propiedad CSS llamada Z Index que podemos utilizar para - capas o posicionamiento de elementos frente o detrás de otro. - También vamos a echar un vistazo a una técnica popular usando sprites de imagen y algunos CSS - código para crear rollovers donde cuando el usuario pasa por ahí, - el mouse sobre una imagen verá cambiar la imagen. - Creé algunos ejemplos de trabajo para las técnicas de posicionamiento que vamos a aprender. - Y si te interesa ver el código completado para todos estos ejemplos, - siempre puedes consultar los enlaces que se enumeran aquí en las diapositivas. - Entonces sigamos adelante y saltemos a ese primer ejemplo y se puede ver aquí. - Acabo de crear algunos contenedores para padres y dentro de ellos he creado algunas cajas aquí, - y cada caja nos ayudará a demostrar un nuevo tipo de posicionamiento que vamos a aprender. - Vamos a aprender posicionamiento relativo absoluto y fijo. - Y ya les he dado a estas cajas algunos nombres genéricos de clase sólo para ayudarnos a demostrar- cada uno de los diferentes tipos de posicionamiento. - Primero, - echemos un vistazo al posicionamiento relativo, - así que por defecto, - todos los elementos si no especificamos nuestra posición estática así. - Pero vamos a ver qué pasa si seguimos adelante y agregamos algún posicionamiento especial, - como el posicionamiento relativo para poder decir posición relativa. - Y en cuanto cambies el posicionamiento a cualquier otro tipo especial de posicionamiento, - entonces ganas la capacidad de usar algunas otras propiedades CSS como arriba abajo izquierda y derecha, - para que puedas decirle al navegador hasta dónde empujar o mover sobre elemento en la pantalla. - Entonces, - por ejemplo- si decimos que top le estaban diciendo al navegador que empujara en la parte superior del elemento y lo moviera hacia abajo - 50 píxeles así. - Entonces si sigo adelante y corro que se pueda ver empujó el este elemento aquí, - el cuadrado que dice relativo lo empujó hacia abajo 50 píxeles de su ubicación anterior donde -se ubicó antes allí- y si digo un número más pequeño como 10 por ejemplo, - y corro que sólo lo mueve hacia abajo 10 píxeles desde su ubicación anterior. - Entonces especificar arriba abajo izquierda o derecha para un posicionamiento relativo es decirle al navegador - qué lado del elemento que desea presionar Ahora. - Incluso puedes usar números negativos también, - si quieres. - Si digo top negativo 50 pixels y ejecuto esto, - se puede ver que en realidad hace lo contrario. - Entonces con un número positivo estás empujando en la parte superior. - Pero con un número negativo es como si estuvieras tirando de la parte superior. - Lo estás tirando hacia arriba 50 pixeles, - así que seguiré adelante y diré los 10 primeros píxeles y el mundo lo moverá hacia la derecha diciendo a la derecha -10 pixeles, - que empujará en el lado derecho. - 10 píxeles así. - Echemos un vistazo a otro tipo de posicionamiento llamado posicionamiento absoluto para que podamos establecer -este tipo para posicionar absoluto-, y vamos a seguir adelante y usar los mismos valores top 10 pixels, - derecha, - 10 pixels. - Y a pesar de que estos airen los mismos valores, -vamos a ver que esto hace algo muy diferente y Eso es porque absoluto- el posicionamiento utiliza estos números de una manera bastante diferente, - para que se pueda ver lo que pasó ahí. - Waas. - Cuando configuro este elemento hijo aquí para posicionar absoluta, - en realidad se libera del padre y tira hasta la esquina superior derecha de la pantalla. - Entonces ahora cuando estoy usando la parte superior de la propiedad, - se refiere a su relación con la parte superior de la ventana visible o el área visible - navegador. - Y cuando digo bien, - se refiere a su relación con el borde derecho de la ventana del navegador visualizable para que tú - en realidad se pueden ver los 10 píxeles que hay. - Está a 10 píxeles de arriba aquí, - y está a 10 píxeles más de ahí derecho. - Entonces la principal diferencia entre relativo y absoluto es que cuando estás usando posicionamiento - aquí, - comandos de posicionamiento en un elemento relativamente posicionado, - estás reposicionando ese elemento en relación con donde se colocó antes, -derecha, - por lo que solía estar aquí, - y luego lo presiona en una dirección particular- empuja o tira de él y lo reposiciona en base a la relación de donde solía estar. - Ahora, - absoluto se basa en la relación de toda la ventana visible así que eso es bastante - diferente. - Entonces una forma en que puedes pensarlo es este niño absolutamente posicionado aquí. - Es como si le diéramos demasiada azúcar y se, - como, - como, - se liberó. - Se puso hiper y se sacó del padre, - y se puede ver que su padre se derrumbó allí. - Y eso es en contraste con relativo también donde cuando posicionas algo relativo, - el padre sigue manteniendo una especie de fantasma de donde se posicionaba ese elemento - anteriormente. - Por lo que todavía tenemos la altura mantenida su bien, - por lo que puede ser curioso lo que sucede cuando también le damos un posicionamiento especial al padre. - Entonces, -por ejemplo- digamos que subo a este padre aquí que se ha derrumbado porque tiene un hijo dentro de - que se posiciona absoluta. - ¿Y si le agrego algún posicionamiento relativo a este padre está bien, - entonces eso es algo interesante. - Se puede ver que el padre en realidad sigue colapsado aquí. - No obstante, - este niño absoluto ya no es capaz de liberarse. - Entonces le dimos al niño superpoderes. - Le dimos azúcar. - Lo hicimos hiper al posicionarse en absoluto, - pero ahora le hemos dado a los padres superpoderes posicionando a ese pariente padre. - Entonces cuando el padre tiene poderes especiales a ella todavía puede sostener al niño dentro de ella. - Y ahora este top 10 pixeles, - ¿verdad? - 10 píxeles se refiere a su relación dentro de los padres. - Entonces fue a la parte superior Qué, - 10 píxeles hacia abajo desde la parte superior de este padre y 10 píxeles sobre desde el lado derecho del - padre. - Y luego verás lo que quitamos ese posicionamiento relativo del padre y lo configuramos -de vuelta a sólo un padre normal, - estático. - Ya no puede sostener a este niño salvaje dentro de él. - Entonces cuando corremos eso ahí, - este padre colapsa y es normal, - posición estática y el niño absolutamente posición puede liberarse. - Y ahora es, - um, - posicionarse en base al borde de la ventana del navegador en su lugar. - Entonces eso es algo interesante. - Echemos un vistazo a otro tipo de posicionamiento llamado fijo. - De acuerdo, - para que podamos ahorrar posición, - puede debilitarse. - Establece este en posición fija, - y vamos a seguir adelante y vamos a fijar este para que se sitúe a 10 píxeles desde arriba, - y lo estableceremos 240 píxeles desde la derecha. - Lo que veremos es que el posicionamiento fijo es algo parecido al absoluto en que esta dirección superior - inferior izquierda y derecha que podemos colocar aquí siguen en relación a la - ventana entera del navegador visualizable igual que con absoluta. - Entonces éste está apareciendo 10 píxeles hacia abajo desde arriba y 140 píxeles desde el lado derecho - así. - Ahora hay una diferencia principal entre fijo y absoluto, - y eso es lo que sucede cuando se desplaza la ventana del navegador. - Entonces he creado esta clase DIV con relleno aquí en la parte inferior. - Adelante y pongamos una altura a eso para que podamos hacerlo lo suficientemente alto como para que necesitemos - pasear por el navegador. - Entonces le daremos a este tipo como una altura ridícula, - para que sepamos que saldrá de la pantalla. - Esto pondrá esto a 900 píxeles de altura, - y eso debería ser suficiente para salir corriendo de la pantalla ahí. - Está bien. - Y ahora tenemos una barra de desplazamiento apareciendo causa que estos elementos pegan y lo vamos a notar -mientras nos desplazamos hacia abajo el elemento que tiene posicionamiento fijo se está quedando con nosotros. - Entonces los elementos de posición relativa absoluta y todos sus contenedores estáticos que airen. - Todos los padres se están desplazando fuera de la pantalla, - pero fijo significa que se mantiene fijo en su lugar mientras la ventana del navegador se desplaza Bien, - por lo que podría tener curiosidad sobre cuándo podría usar este otro tipo de posicionamiento, - y estamos va a echar un vistazo a algunos usos para estos en el próximo ejercicio. - Sigamos adelante y saltemos de nuevo a los toboganes entonces. - Entonces miramos el posicionamiento relativo, -lo que nos permite utilizar comandos de posicionamiento como arriba abajo izquierda y derecha y mover un - elemento basado en la relación de dónde solía estar cuando estaba posicionado estáticamente- . - Entonces Top sólo está empujando. - Su parte superior izquierda está empujando en el lado izquierdo del elemento, - y lo estás moviendo en función de dónde solía colocarse. - También miramos el posicionamiento absoluto, - lo que nos permite mover un elemento en base a su relación con todo lo visible - ventana del navegador. - Y también miramos el posicionamiento fijo, - que similar al absoluto pero se mantendrá fijo en su lugar incluso cuando el usuario se desplaza en el - navegador 47. Capas de Z-Index: - siguiente, - echemos un vistazo a una propiedad CSS llamada Z Index, - y tengo, - ah ejemplo rápido por el que podemos pasar. - Mira eso. - Um, - habrás notado que en este último ejemplo cuando escalas la pantalla dentro y fuera, -más grande y más pequeño- que estos elementos en realidad se pueden solapar uno encima del otro. - Y en realidad podemos controlar eso usando algo llamado Índice Z. - He creado un ejemplo realmente básico aquí 123 con estos tres dibs, - y les he dado a cada uno una clase genérica de Z uno, - Z dos y Z tres. - Y usaremos eso para aplicarles un índice Z diferente y posicionarlos para que algunos - de ellos estén encima de los otros. - Entonces solo empezaremos bajando aquí y crearemos una clase llamada Z one para que nosotros - podamos añadir este 1er 1 para tener un índice Z de uno ahora por defecto. - Si no especificas todos los elementos posicionados estáticamente, - solo tienes índice nefasto de cero, - y cuando añades algún posicionamiento especializado como relativo o absoluto, - se moverá por encima de los elementos posicionados estáticamente. - A menos que especifiques índice Z para que un índice Z de cero sea el que conoces, - la capa normal que está justo por encima del cuerpo. - En realidad se pueden establecer los números de índice en números negativos, - y esos quedarán atrás de lo normal lo normal, - elementos reposicionados estáticos, - y nunca se puede ir detrás del cuerpo. - Entonces el cuerpo es como la capa más lejana de atrás que no puedes quedarte atrás para que no puedas - hacer desaparecer elementos. - Cualquier cosa detrás del cuerpo. - Pero puedes colocarlos delante y detrás de otros elementos en la parte superior del cuerpo, - esencialmente. - Y en cualquier momento usamos cuanto mayor sea el número de índice, - va a ir por encima de otro elemento en cualquier momento. - Utilizamos cuanto menor sea el número de índice. - Se va a ir detrás de esos otros elementos. - De acuerdo, - entonces este tipo, - sólo tendré el índice Z de uno. - Vamos a seguir adelante y darle a éste un color de fondo de aqua sólo para que podamos ver el cambio - ahí. - Y démosle también a éste un cargo de familiares. - Pero actualmente supongo que en realidad no vamos a tener que posicionarnos. - Este sólo colocará al otro encima. - Entonces supongo que solo pondré esto en el top zero left. - Cero. - Está bien. - Y vamos a ejecutar eso para ver ese código. - Entonces ahora vamos a entrar y, - uh, - poner esta segunda caja para que se superponga encima de ésta. - Esto creará otra clase, - y la llamaremos Z dos. - Y pondré este para que tenga un índice Z de dos. - Y voy a cambiar el color de fondo aquí, - dedo del pie lima. - Entonces destacan y para tirar de éste encima del otro, - Voy a seguir adelante y ponerlo en negativo 50 píxeles en la parte superior y 50 píxeles en la izquierda - lado. - Entonces estaré tirando de esta segunda caja 50 pixeles, - y la estaré empujando desde el lado izquierdo. - 50 pixeles. - Entonces tendremos que correr eso. - Y se puede ver la casilla dos con los contratados. - El índice de dos recuadro superpuesto uno que tiene el índice de uno. - Se puede ver si cambiamos el índice Z de dos a ah, - número menor que uno. - Por ejemplo. - Si digo como, - negativo a lo que es un número menor y corres eso, - verás que va a ir atrás, - y luego cuando uses un número más alto, - saltará de nuevo en la cima. - De acuerdo, - Podemos meter esta caja tres aquí en la mezcla también- configurando este para que tenga un índice Z de tres. - Entonces te pondremos a ti también. - El índice tres. - Y estableceremos aquí el color de fondo. - Dos fucsia. - Y pondremos esto arriba negativo 100 a la izquierda. - 100 para conseguir que se superpongan. - Ahí vamos, - ahí vamos. - Entonces se puede ver ahí que el índice de un número mayor se superpone y él tira al frente y -el índice del menor se va atrás, - ¿de acuerdo? 48. Sprite Sprite: - siguiente, - hablemos de sprites de imagen. - Ahora un sprite es esencialmente cuando tomas múltiples imágenes y las sándwich juntas, - las losetas juntas en una sola imagen y lo que se adapte al propósito de acelerar tu - tiempo de carga en el navegador. - Es más eficiente si cargamos una sola imagen y luego simplemente la reposicionamos que si cambiamos - entre múltiples imágenes. - Entonces, - por ejemplo- digamos que tienes una navegación que se ve así en tu sitio web. - Y hablemos de este botón de inicio aquí. - Digamos que tienes un elemento que está en Ley del tamaño de esta casa. - Pero así, - por ejemplo, - si todo este sprite fuera, - digamos, - hipotéticamente, - 60 píxeles de alto, - digamos que creamos un elemento que es sólo la mitad de los 30 píxeles de alto, - para que Onley vea que esta gran parte del botón es visible. - Recuerda, - si colocamos una imagen de fondo en un elemento, - sólo podemos ver tanto de esa imagen de fondo como bien caben dentro de ese elemento. - Entonces el elemento que probablemente sea un enlace o algo así, -Theo Element, - va a ser en ley del tamaño del botón de inicio gris aquí. - De acuerdo, - Ahora, - cuando el usuario se cierne sobre, - queremos volver a posicionar esta imagen para tirar de la imagen de fondo hacia arriba, - revelando así la parte naranja y al usuario. - Parece que este botón se ilumina en naranja, - pero realmente muy, - muy rápido, - más rápido que ahí. - Puedo ver que el navegador realmente está reposicionando la imagen de fondo tirando de ella hacia arriba. - Y esto es más eficiente que pedirle al navegador que vaya y encuentre una imagen separada y - cargado. - Y la razón por la cual es cuando se carga por primera vez la página, - en realidad carga toda esta imagen a la vez. - Y luego cuando el usuario se cierne sobre, - no es tener que ir a buscar la otra imagen y volver a cargarla. - Sólo lo está reposicionando. - De acuerdo, - por lo que los sprites pueden incluir dos estados para un solo ícono, - o pueden contener varios estados, - por ejemplo- para diferentes elementos de menú o interfaces de usuario más complicadas. - Y la principal ventaja hay un tiempo de carga más rápido, - por lo que cargas todas las imágenes al principio de la página, - y luego no hay espera cuando el usuario está interactuando y colocando el ratón sobre él. - Este es un ejemplo de un ícono de dos estados realmente simple que te muestra una pequeña flecha desplegable hacia abajo, - por lo que puedes imaginar que el elemento del que esta dentro es sólo tan ancho y alto es la mitad - de esta imagen. - Básicamente, - se puede. - Sólo se puede ver esta mitad alta. - Es como una ventana mirando sólo a la mitad superior de esta imagen de fondo que contiene la flecha desplegable negra. - Y luego cuando el usuario pasa el cursor, - estamos usando un comando CSS para cambiar la posición de fondo. - Negativo, - sin embargo muchos píxeles de altura. - Esto es correcto. - Entonces si esto tiene 60 píxeles de alto, - diremos, - Sube esto. - Negativos 30 píxeles para que esta flecha desplegable blanca esté ahora en la posición o mostrando - donde solía estar la flecha negra. - Este es el código para un giro brillante CSS para que puedas ver si estamos haciendo esto con un link - establecerá el enlace para mostrar bloque. - De esa manera puede aceptar un ancho y alto. - Y luego nos vinculamos a la imagen de fondo, - que es toda la imagen Sprite que tiene múltiples estados tipo de anidados en una sola imagen. - Y luego cuando pasamos el cursor sobre, - podemos usar el selector de pseudo clase CSS hover, - que permite que el hover permita que este estilo se dispare cuando el usuario pasa por encima y lo unico - cosa que estamos cambiando aquí es la posición de fondo, - que cambia esa imagen de fondo para reposicionarse. - Por lo que realmente somos como deslizar la imagen de fondo dentro del elemento y - revelar otra parte de la imagen que anteriormente estaba oculta. - La posición de fondo Propiedad acepta dos valores el posicionamiento horizontal y el - posicionamiento vertical. - Por lo que el posicionamiento horizontal aquí se fijó en cero. - Entonces no estamos moviendo la imagen horizontalmente. - Pero aquí han optado por ajustar la posición vertical a 30 píxeles negativos, - lo que moverá esa imagen de fondo hacia arriba 30 píxeles. - De acuerdo, - entonces vamos a seguir adelante y echar un vistazo a algunas de estas técnicas que hemos aprendido y aplicamos -ellas dentro del ejercicio- que es nuestro ejercicio continuo que hemos estado trabajando en la página web de Z H W Shoes. 49. Navegación de estilo: - Volveré. - Este es el ejercicio 3.2 posicionamiento y sprites. - En este ejercicio, - vamos a estar agregando algo más de estilo a la barra de navegación principal en la parte superior de la página- . - Y vamos a estar con estilo izándolo para que cada tipo de enlace parezca un botón cuando - pasemos por encima de él como si estuviéramos presionando en un botón y también vamos a añadir una red social- barra en el lado derecho de la pantalla y la tanto la navegación como la bar social. - Nosotros les vamos a aplicar algún posicionamiento para que se queden puestos. - Se mantendrán en su lugar incluso cuando el navegador se desplaza de qué? - No había descargado el código inicial y se puede ver lo traje aquí arriba en texto sublime - y los dos archivos principales con los que vamos a necesitar trabajar aquí es la página de índice y la página de estilo - dot CSS. - Entonces lo primero que vamos a hacer es que podemos desplazarnos hasta aquí hasta el encabezado y recordar - dentro del encabezado tenemos el panel de logotipos, - pero también tenemos esta barra de knave y queremos empezar a peinar esta barra de knave donde peinar - esto hizo con la idea de knave Bar para tener un granulado en textura que se repite a través de la - pantalla. - Y entonces también vamos a darle estilo a esta caja llamada Knave el HTML cinco contenedor semántico - llamado aquí Nath. - Y entonces también vamos a darle estilo a cada uno de estos enlaces individuales aquí. - Entonces sigamos adelante y saltemos a la página CSS de punto estilo y podemos desplazarnos hacia abajo. - Y yo creé un comentario aquí. - Se puede ver en línea 1 39 debilitar. - Empieza a escribir algún código para darle estilo a la barra de gallo. - Entonces lo primero que quiero hacer es que quiero seleccionar ese DIV con la idea de barra de gallo - en sí, - y me gustaría agregar una imagen de fondo a esto ahora. - Previamente, - miramos usar CSS tres radiantes para hacer un desvanecido de un color a otro, - y esta vez te voy a mostrar algo así como una estrategia más antigua o una especie de legado - técnica para conseguir que aparezca un int Grady. - Y eso implica usar realmente crear el ingrediente como me gusta, -una pequeña rebanada de imagen- y entonces puedes repetir esa imagen horizontalmente. - Entonces, - en realidad, - echemos un vistazo a esa imagen realmente rápido aquí. - Voy a seguir adelante y a sacarlo. - Entonces este se llama header fade y tal vez un poco difícil de decir. - Alexis es tan estrecho, - pero esto es algo así como un color gris claro aquí se desvanece de un color genial a otro, - y se pone un poco más oscuro aquí en la parte inferior. - Entonces va a ser el gráfico que usamos. - Y vamos a repetir este pequeño finlandés astilla de un gráfico horizontalmente. - Ya que esto es sólo una pequeña astilla de gráfico, - una pequeña imagen aquí, - esta imagen ojos se va a cargar muy rápidamente. - En realidad es un tamaño de archivo muy pequeño en. - Y entonces, -repitiéndolo horizontalmente, - vamos a conseguir que fluya por toda la página. - Um, - y así podemos tener un tamaño de archivo pequeño real como cuatro K, - y podemos usar eso en una gran parte de la pantalla, - y aún así se cargará muy rápidamente. - Entonces antes de coss los ingredientes que ya conoces, - muchas veces estamos usando una imagen real que tenía el Grady dentro de ella. - Entonces vamos a seguir adelante y decir que eres l y apuntarás hacia son imágenes carpeta y vamos - vamos a usar esa que se llama header dash fade dot Jeff. - Y le vamos a decir a éste que sólo se repita horizontalmente así. - Repetir X. - Está bien, - También vamos a añadir un borde en la parte inferior aquí. - Y anteriormente mirábamos el uso del borde abreviado CSS, - que afecta a todos los lados. - Pero también podríamos decir guión fronterizo, - fondo, - borde, - guión, - borde izquierdo, - guión, - cuarto superior. - Eso es correcto. - Entonces en este caso, - estableceremos un píxel sólido y usaremos un color gris medio así, - viniendo en un par de estilos más aquí. - Por lo que también queremos agregar un borde a la propia caja de knave para que podamos seguir adelante y específicamente - apuntar al nab que está dentro de la barra de knave mediante el uso de un selector descendiente. - Entonces estamos diciendo, - Hey, - navegador va a encontrar un elemento que tiene una idea única de nab nuestro ir dentro de ella y seleccionar - que ese html cinco elemento semántico llamado knave. - Y éste sólo le vamos a decir que le quede un guión fronterizo. - Un píxel, - libra sólida. - Ver, - Ver. - Ver así. - Está bien, - genial. - Ahora, - dentro de este tipo, - tenemos los enlaces que queremos diseñar, - así que voy a empezar a peinar estos enlaces aquí uh, - y serán realmente específicos. - De nuevo, - usando un selector descendiente dirá, - Oye, - navegador, - ve y encuentra algo Ya sabes, - un elemento con una idea única de barra de solzuelo. - Entra dentro de ella y encuentra un elemento llamado knave y entra dentro de ese elemento con estilo, - todos los eslabones dentro de él. - Por lo que esto sólo estilos enlaza dentro de nab que está dentro de barra de knave. - Entonces es bastante específico ahí. - Entonces para estos enlaces, - queremos configurarlos para que se muestren en linea dash block, - y de esa manera podrán aceptarlo con. - Y lo que queremos hacer es que queremos configurar esto para que los cinco enlaces tengan igual - espaciado. - Y recuerdas que esta barra de gallo aquí, - el hecho con la idea de nab nuestro esto es justo a través de toda la pantalla al 100%. - Y entonces tenemos un do con la clase de rapero aquí, - y este tipo tiene un ancho fijo de 960 píxeles. - Y luego dentro de eso, - tenemos a este tipo llamado knave. - Entonces ahora no tiene un ingenio especificado actualmente, - así que se está estirando al 100% hasta que se encuentra al borde del rapero, - que es 9 60 Así que básicamente tengo estos cinco enlaces aquí sobre a la venta, - catálogo, - precios y contacto. - Y quiero que esos ocupen una cantidad igual de espacio dentro de tu Así que si tomo ese 100% de - habitación que tengo disponible dentro de nunca y me dividí por cinco, - obtengo 20%. - Entonces puedo configurar a este tipo para que tenga un ancho de 20% así y me aseguraré de que esto no tenga - margen alrededor dirá margen cero, - y le agregaremos algo de relleno. - Aquí está Bueno, - De verdad sólo quiero un poco de relleno en la parte superior e inferior. - Entonces voy a establecer 22 píxeles de palmaditas en la parte superior e inferior y cero en la izquierda y derecha- . - Usar texto, - transformar y hacer que todo el texto transforme automáticamente sólo los caracteres mayúsculas, - y estableceremos el color del texto para que sea negro, - ¿de acuerdo? - Y te permite también establecer el texto a una línea en el centro en relación a esas casillas. - Entonces diremos texto alinear, - centro. - A continuación, - vamos a poner un borde sólo en el lado derecho de cada uno de esos enlaces, - y vamos a ponerlo en un sólido de píxel. - Si, - si, - si. - Y queremos quitar lo subyacente de estos enlaces. - Entonces voy a poner la decoración del texto a ninguna. - Y también vamos a establecer la fuente. - Estás usando la propiedad de fuente abreviada CSS. - Y voy a fijar el fondo para que sea de 20 píxeles y usaremos, - uh, - vamos a ver. - Usaremos cubo comercial m s así. - Estaba teniendo un juego extra de cotizaciones ahí. - Tienes que deshacerte de un conjunto. - Ahí vamos. - Y diremos una copia de seguridad za dirá, - Ariel, - Arena, - Sarah así. - De acuerdo, - así que vamos a seguir adelante y guardar eso. - Echemos un vistazo a este tipo en el navegador para que regresemos y nos refresquemos. - Enfriar. - Por lo que la barra naff tiene un fundido llamado fundido de cabecera Dodge. - Si eso es repetir el 100% de la pantalla porque lo hicieron con la idea de Navid, - Bar no tiene un ingenio especificado, - y es un elemento de nivel de bloque como ir al 100% de la pantalla. - El rapero aquí es de 960 píxeles. - Entonces ese tipo se está centrando aquí mismo en igualar el ancho de este rapero en este rapero - aparecen así todos estos alineados perfectamente. - Ahora knave está dentro de la envoltura. - Y le di un borde izquierdo de gris sobre naff. - Entonces esta pequeña línea aquí se crea creando un guión fronterizo dejó un naff, - y luego cada enlace tiene un ah, - guión fronterizo. - Correcto. - Entonces eso me da la frontera aquí, - sobre aquí en venta aquí en catálogo, - aquí en precios aquí en contacto, - lo que nos da algo así como un poco de separación, - haciendo que se vean un poco más como botones. - Se puede ver la decoración del texto mayúscula y el estilo de fuente ahí. - Está bien, - um, - vamos a ver. - Eso es bastante bueno. - Vamos a ver, - también queremos poder hacerle saber al usuario en qué página en particular estaban para que cuando -ellos dan clic en la página, - ese enlace tenga ah estilo diferente para que podamos ver que esa es la página que estuvimos - aterrizó en. - Entonces volvamos al CSS aquí, - y vamos a crear un estilo específico para eso. - Um, - Voy a seguir adelante y decir amor bar espacio un DOT seleccionado. - Entonces esto sólo se va a seleccionar enlaces que han sucedido, - tener una clase de seleccionados si están dentro de barra de knave. - Y le voy a dar a este tipo un color de fondo aquí, - vamos a guardar el fondo negro, - así que va a tener un color de fondo más oscuro, - y voy a poner el color de primer plano aquí a Blanco así, - y voy a ir a aplicar esto. - Voy a entrar y aplicar esta clase a cada página, - y luego vamos a volver a la página html de punto índice y en la página de índice. - Esta es realmente la página sobre así que dentro de este enlace aquí, - Quiero agregar una clase bien de seleccionados solo a este link, - y podemos copiar este código aquí clase seleccionada, - y voy a añadir esto a las otras páginas. - Entonces entraré en catálogo y bajaré a la navegación, - y encontraré el enlace que rodea al catálogo, - que está justo aquí y este. - Voy a darle una clase de seleccionados. - Entonces en esta página, - se selecciona el enlace del catálogo y vamos a ir a la página de contacto en todo desplazar hacia abajo e iremos -al enlace de contacto, - que está justo aquí y bien transitado en esa clase de seleccionados ahí. - Iremos al precio de una página, -y aquí está elancet para el precio, - y voy a entrar de ese enlace y bien ritmo la clase de seleccionados ahí dentro. - Y por último, - podemos ir a las ventas y vamos a ir al enlace en venta aquí y voy a pegar en esa clase de -seleccionados ahí podemos ahorrar-, y luego nos acercaremos al navegador y nos refrescaremos. - Enfriar. - Por lo que se puede ver ahí que este enlace está teniendo la clase de seleccionados en él. - Si hago clic ahora en la página de venta, - ésta tiene la clase negra de seleccionada en ella. - Catálogo Tiene las clases seleccionadas ahí precios las clases seleccionadas ahí y contacto - clases seleccionadas ahí. - Para que pudieras ver que cada uno de enlace lo tiene casi tipo de hace que parezca una pestaña - Estructura como ese botón está presionado para la página en particular. - Está bien, - genial. - Entonces vamos a seguir adelante y volver a la página de CSS de punto de estilo aquí, - y nos gustaría agregar un estado de flotación aquí-, así que diremos que el laboratorio ahora son un flotante de dos puntos así. - Y aquí vamos a cambiar algunas cosas iban, - Teoh cambia el color del texto a blanco. - Y vamos a cambiar el color de fondo también, - Ingrediente. - Y para éste, - Voy a usar el CSS tres Grady int. - Están Así iremos al navegador e iremos a buscar a nuestro amigo el color Zilla, - Grady y editor. - Y ya he creado aquí a Grady inapropiada. - Simplemente comienza como un color negro en los bordes y se desvanece para gustar un gris más claro en el - centro. - Y voy a seguir adelante y decir, - Copia y bien ritmo, - Eso está aquí. - Ellos son Río, - y vamos a dar ese ahorro y vamos a volver al navegador y refrescar. - Está bien, - Genial. - Y se puede ver cuando yo flote por ahí. - Entonces ahora estos enlaces se iluminan sólo en el estado flotante que estaba usando la pseudo clase - selector. - Un colon se cierne a la derecha. - Y luego cuando cambiamos de página, - obtenemos el color más oscuro en la clase seleccionada así. - Enfriar. - De acuerdo, - Ahora mismo sólo tenemos estos. - Estos elementos solo tienen posicionamiento normal aquí. - Y lo que he hecho es que ya he añadido suficiente relleno por encima del logotipo aquí que podemos - en realidad encajar esta barra de navegación knave para colocarse encima del logo y fijarse en - lugar. - Y de esa manera, - cuando nos desplazemos por la página, - esa barra de navegación se quedará ahí. - Y en un principio, - cuando cargue la página por primera vez, - verá el logotipo debajo de la barra de gallo, - y luego cuando desplácese hacia abajo, - y luego cuando desplácese hacia abajo, - comenzará a cubrirlo. - Entonces volvamos al código y volveremos a atrapar nuestro aquí. - Entonces vamos a seguir adelante y añadir una posición aquí de fijo. - Ahora esto tiene posicionamiento fijo. - Debe mantenerse fijo. - Incluso cuando la ventana del navegador se desplaza y queríamos estar en la parte superior de la página, - alguien dice Top zero left zero. - Entonces está en la esquina superior izquierda de la página. - Ahora, - desde que pusimos a este tipo a la posición fija, - en realidad va a colapsar. - Es con, - a pesar de que no con se especifica. - Entonces lo que realmente debemos hacer es especificar un ancho del 100% para esa barra de navegación - ahí. - Y recuerda, - nuestro amigo Z Index permitirá que esté por encima de otras cosas. - Entonces si digo Z Index uno debería estar encima de todo lo demás, - está bien, - así que salgamos y guardemos eso y volvamos al navegador y echemos un vistazo a esto. - Entonces este ahora bar va a saltar aquí cuando haga una actualización de página así. - Entonces eso es genial. - Entonces acabamos de hacer el nab nuestro go en la parte superior y porque está configurado para la posición fija cuando me desplaza - que NAB son siempre se queda ahí ahora. - Entonces si vengo aquí a este video, - y yo estoy como, - Oh, - este es un video cool, - pero quiero ir a otra página. - No tengo que desplazarse todo el camino hasta la cima. - Yo sólo podría tener siempre acceso a ese bar de soltera en todo momento. - Entonces ese es un uso para posición fija. - Está bien, - eso se ve bastante estilizado. - A mí me gusta. - ¿Qué piensan ustedes? 50. Estilizar la barra de redes sociales: -siguiente- vamos a construir una barra de redes sociales para la página de aquí en el lado derecho, - y vamos a usar algún posicionamiento especial-, para que eso también se mantenga fijo en su lugar. - Y también vamos a usar una imagen de Sprite realmente brillante para que cuando pasemos el cursor, - esa imagen cambie. - Primero, - sigamos adelante y vayamos a la tienda de fotos y echemos un vistazo a cómo se ve esta imagen Sprite . - Así que en realidad agarré estos iconos sociales, - um, - psd de Internet y se puede ver aquí tiene, -como la mayoría de los iconos populares de las redes sociales aquí- y sólo vamos a estar usando los primeros tres primeros. - Pero dependiendo de cómo posicione esto, - podría utilizar potencialmente otros, - como video y YouTube o parpadeo etcétera. - Entonces estaremos usando. - Facebook estará usando Twitter aquí y el ícono de Google plus sólo porque son los primeros - tres. - Voy a seguir adelante y encender mis guías así, - y se puede ver que cada 40 píxeles hay otro ícono, - por lo que el icono de Facebook en escala blanca o gris empieza en cero píxeles y termina en 40 pixeles, - y entonces tenemos un color versión de ese icono de Facebook que comienza en 40 píxeles y termina en - 80 píxeles. - Y entonces el icono negro de Facebook empieza en 80 píxeles y termina en 120 píxeles aquí, - ¿de acuerdo? - Y entonces, -si quisiéramos usar un icono de Twitter, - necesitamos posicionarlo más abajo. - Entonces tendríamos que decir negativo 40 para subir esta imagen 40 pixeles para que pudiéramos usar el - pajarito aquí para Twitter. - Entonces vamos a configurar esto para que estos iconos o blanco y luego cuando pasemos el rato, - van a conseguir color, - que es la segunda columna aquí. - Y cuando deprimamos el botón del ratón o cuando hacemos clic en el estado activo, - se va a poner negro así. - Está bien, - así que sigamos adelante y volvamos al texto sublime. - Lo primero que vamos a querer hacer es entrar a la página del índice y se puede ver aquí -eso en la parte superior del cuerpo- he creado un comentario aquí- y aquí es donde voy a colocar mi barra de redes sociales. - Entonces voy a entrar aquí y voy a crear un div, - y le voy a dar una idea de social. - Vamos a entrar de aquí y crear un enlace. - Y este primer enlace va a ser para Facebook, - y vamos a seguir adelante y decirle esto que apunte hacia el conde de nuestra página de Facebook. - Por ahora, - sólo voy a poner un marcador de posición, - y podrías volver aquí más tarde y cambiar esto a la verdadera Earl la dirección http - de tu página de Facebook. - Y vamos a poner a estos tipos en blanco para que se abran en una nueva pestaña del navegador. - Vamos a ver, - también podríamos darle un título que recuerden, - título surtirá efecto. - Entonces cuando pases por alto, - uh, - el enlace, - aparecerá un pequeño título Así que podrías decir, - como, - visitar mi página de Facebook o algo así Podrías escribir dentro de ella ahí. - Y una cosa que es realmente importante es que queremos asegurarnos de darles a cada uno una unica - clase. - Y la razón por la que queremos darle a cada uno de estos un nombre de clase único es para que por cada - link, - podamos usar el nombre de la clase para reposicionar esa imagen Sprite para deslizarla hacia arriba o hacia abajo para que - estamos viendo teatro pro PRI it icon dentro de ese enlace. - Alguien le dé a este 1er 1 un libro de clase F así, - y voy a copiar ese código y lo pegaremos dos veces aquí. - Ah, - el segundo enlace será para Twitter, - así que sólo le daré una clase de idiota. - Sólo usaremos unos nombres de clase cortos como ese y para el título dirá Twitter y - para el último dirá G plus como nombre de clase y establecerá el título en Google. - Además así. - Y mejor cambiemos el texto aquí también dentro del enlace. - Ahora, - puede que se estén preguntando por qué estamos poniendo texto dentro de estos enlaces cuando sólo vamos a - estar viendo un icono aquí que está conformado por nuestra imagen Sprite. - El motivo por el que es una buena práctica para los motores de búsqueda escribir realmente el nombre - dentro del enlace aquí así. - Y de esa manera el buscador puede leer esto y ver a dónde está este enlace en particular - yendo a. - Usaremos algún CSS para ocultar este texto, - y de esa forma nuestros usuarios solo verán el icono de Sprite. - De acuerdo, - para que podamos guardar esto en esta página, - y he ido adelante y ya he agregado este código en todas las demás páginas para ti, - para que podamos simplemente saltar de nuevo a la página CSS de punto de estilo. - Y si nos desplazamos hacia abajo hasta la línea 14 aquí, - se puede ver que he escrito un comentario, - um, - señalando que esta sección aquí será para el bar social. - Lo primero que queremos hacer es querer darle estilo a esa caja con la idea de social. - Y vamos a poner esta cosa también. - Posición fija. - Y vamos a decirle que vaya a la parte superior 200 píxeles hacia abajo desde arriba, - y le daremos sólo un poquito desde el lado derecho. - Por lo que no está justo arriba contra la ventana del navegador dirá como tres píxeles de la derecha. - Y recuerda que cada uno de los iconos tiene solo 40 píxeles de ancho, - así que podemos decir sólo 40 píxeles y nos aseguraremos de darle un índice Z más alto para que -está arriba dira Z Índice uno bien- y luego vamos dentro de eso y vamos a añadir la imagen de fondo para cada uno de - esos enlaces, - así que voy a seguir adelante y decir un punto f libro, - bien. - Y luego voy a decir un twit de punto para el twitter y un punto g plus para el link de Google Plus -. - Y estoy usando un selector compuesto porque en realidad voy a establecer algunos estilos Todo lo mismo para estos chicos. - Estos se van a configurar para mostrar bloque porque queremos que se apilen verticalmente uno encima -del otro, - y vamos a asegurarnos de que cada uno de estos enlaces esté en ley del tamaño de un Nikon eso. - Recuerda, - cada uno de estos sólo va a ser de 40 píxeles así, - por lo que podemos establecer esto para tener un con de 40 píxeles y una altura de 40 píxeles. - Entonces a pesar de que las imágenes de fondo mucho más grandes, - sólo vamos a poder ver 40 píxeles por 40 píxeles de la imagen de ese fondo- imagen y con el fin de ocultar el texto. - Lo que podemos hacer es usar guión de texto en den y podemos establecer el texto en deuda al 100% lo cual - en realidad lo empujará. - Um, - 100% significa que está sangrada 100% del tamaño del contenedor en el que se encuentra. - Entonces esto es, - Ah, - Contenedor de 40 píxeles de ancho. - Entonces, en realidad va a sangrar el texto 40 píxeles justo fuera del contenedor, - y lo que podemos hacer se debilita, - luego establece el desbordamiento en oculto para que no veamos nada que esté fuera del elemento -. - Entonces este Texas en Denning está en Denning fuera del elemento, - y entonces ahí es invisible. - Y también pondremos el espacio en blanco aquí para conocer Rap eso- y nos vincularemos al fondo. - Entonces cada uno de estos realmente va a usar la misma imagen Sprite, - y diremos que eres más y vamos a enlazar a imágenes slash iconos sociales dash dot PNG y yo - quiero configurar esto hasta que no se repita. - Por lo que sólo hay una de esas imágenes de iconos sociales dentro de estos tipos. - Por lo que cada uno de estos F libro twit y G plus cada uno tiene la misma imagen de iconos sociales dentro de - ellos. - De acuerdo, - Ahora, - para cada clase individual, - sin embargo, - voy a tener que posicionar esa imagen de manera diferente. - Entonces, - por ejemplo, - para la clase de libro F, - vamos a querer x en la posición de guión de fondo 200 que es Ah, - cero horizontalmente y cero verticalmente simplemente lo pondrá básicamente en la esquina superior izquierda. - Entonces recuerda, - volvemos a la imagen aquí, - este sería el equivalente a 00 es el medio de esquina superior izquierda, - lo que significa que no estamos cambiando la imagen. - No obstante, - cuando pasamos el cursor, - queremos que esta imagen se mueva por encima de 40 píxeles así. - Entonces vamos a crear una clase de flotación para eso diciendo un punto f libro colon flotando. - Y para este, - vamos a cambiar la posición de fondo para que sea negativa 40 píxeles horizontalmente y cero - píxeles verticalmente. - Entonces lo que eso va a hacer es que lo va a mover horizontalmente, - negativo 40 píxeles. - Lo que significa que va a ir a este borde izquierdo izquierdo y tirar de él para que cambie esto - f coloreado hacia la posición de donde solía estar esta F blanca. - Y porque no lo estamos moviendo verticalmente. - Ah, - podemos simplemente poner a ese tipo a cero allí- y deberían tener un punto y coma ahí. - No olvidemos eso, -y también tenemos un estado activo también- que es el estado en el que presionamos el botón del ratón- o cuando estás presionando el botón del ratón. - Y para éste, - podemos cambiar la posición de fondo para avanzar aún más. - Uh, - entonces en este caso, - queremos movernos, - no sólo 40 pixeles, - sino que queremos mover más de 80 píxeles para llegar al fondo negro F. - Así que diremos negativo. - 80 píxeles cero así. - Está bien, - El siguiente es el icono de Twitter, -que tiene una clase de twit, - así. - Y para ése, - queremos también fijar la posición de fondo. - Entonces solo copia y pega eso ahí Ahora para éste, - queremos moverlo hacia abajo. - Entonces primero, -inicialmente, - queremos ver este blanco, - para que no tengamos que moverlo horizontalmente. - Será Pero para poder llegar de esta esquina superior aquí abajo a ver el ícono del pajarito -en su lugar, - tenemos que decir negativo 40 píxeles verticalmente. - Por lo que este primer número horizontal en los segundos números verticales. - Entonces aquí queremos decir negativos 40 píxeles así para moverlo verticalmente. - Y en realidad podemos copiar y pegar estos otros aquí sólo para ahorrar un poco de tiempo. - Y podemos pagar Siéntate aquí y simplemente cambia esta clase a twit así y twit como - eso. - Y aquí la diferencia es que estaríamos bajando 40 píxeles por cada una de estas verticales-posiciones aquí. - Pero lo mismo para éste en que todavía nos movemos horizontalmente. - 40 píxeles en el flotar y activos o moviéndose más de 80. - Porque recuerden estos aire apilados para que este sea el estado por defecto. - Siempre nos estamos moviendo horizontalmente 40 para el estado flotante y moviéndonos más de 80 horizontalmente para - el estado activo. - Entonces lo único que va a cambiar para cada uno de estos es el valor vertical. - Ahora, - cuando dependa de usted sabe, - qué clase estaban usando, - Así que por ejemplo, - realmente podría simplemente copiar y pegar este código aquí- y podría reformularlo sólo un poquito para el Google Plus Icahn, - que tiene una clase aquí de G plus también te un pequeño truco limpio que puedes hacer con texto sublime - si quieres cambiar múltiples cosas al mismo tiempo aquí. - Por ejemplo, - si quiero cambiar esta clase, - nombre este nombre de clase en este nombre de clase simultáneamente. - Lo que puedes hacer es realmente hacer click con el ratón, - ya sabes, - hacer clic en el cursor delante de ese texto. - Y si estás en Mac, - puedes mantener presionada la tecla de comando y hacer clic una y otra vez delante de cada uno de esos tres - nombres de clase. - Si estás en Windows, - podrías aguantar para controlar y hacer clic después del té para cada uno de esos, - y puedes ver que en realidad tengo tres cursores parpadeantes. - Ahora déjame hacer eso una vez más, - así que haré clic en el cursor una vez aquí. - Y si mantienes comando en Mac o control en Windows y vuelves a hacer clic una segunda vez en la - tercera vez aquí, - en realidad obtienes tres cursores. - Y ahora, - cuando borras su permitiéndote escribir o editar esas tres líneas simultáneamente para que podamos -digamos como- G plus como ese Oops consiguió un P extra su G plus así. - Y entonces lo único que está cambiando aquí es el hecho de que estamos bajando 80 píxeles -así que podría hacer clic aquí y aquí- y puedo cambiar simultáneamente los tres de estos 2 80 píxeles así. - Así que adelante y guarde y volvamos al navegador y hagamos una actualización. - Enfriar. - Entonces aparecieron estos tipos y yo hice algunas matemáticas para que aparecieran, - uh, - 200 píxeles abajo deberían permitirles igualar justo arriba con el borde superior aquí de la primera - sección. - Y calculé que midiendo la altura de píxel de esto más esto más los 30 píxeles de - espaciado o relleno dentro de eso la madera hizo aquí. - Y se puede ver el efecto del sprite funcionando. - Porque cuando pasamos el rato, - vemos el color para Facebook. - Vemos el color para Twitter, - y vemos el color para Google. - Además así. - Ahora, - si hacemos clic y mantenemos pulsado el botón del ratón, - veremos que se pondrá negro así para cada uno de estos. - Entonces tenemos el estado flotando y el estado activo. - Está bien. - Muy cool. - Está bien, - genial. - Los sitios empezando a lucir bastante lisos. - Podemos comprobarlo en todas las diferentes páginas que hay, - asegurarnos de que las navegaciones funcionen correctamente y asegurarnos de que aparezcan estos ítems sociales- . - Y eso se ve bastante bien. - Entonces aquí en la página de contacto, - Tengo un pequeño problema con el marco I sobresaliendo. - Entonces voy a volver al texto sublime y vamos al código CSS para eso enmarque -ahi , - que debería estar aquí en línea. - ¿Quieres esperar? - Entonces vamos al marco I aquí- y vamos a anular el HTML con algo de CSS con comando. - Y sólo vamos a decirle que sea al 100%. - Entonces en realidad será 100% hasta que se encuentre con el contenedor padre, - que es esa pequeña sección para la columna en la que está. - Y eso debería arreglar eso. - Démosle una prueba a eso. - Ahí vamos. - Entonces ahora el marco I se está comportando. - Se está quedando dentro de esa columna de ahí. - Entonces a continuación vas a querer pasar al reto de código donde estarás agregando - algún posicionamiento especial y algunos sprites en tu propia página. 51. Técnicas de diseño responsivo: - Hola. - Bienvenido de nuevo. - Se trata de las diapositivas 4.1 de manera responsiva hacia fuera técnicas. - Entonces en ejercicios pasados, - hemos aprendido a conseguir un mango real en la construcción de un diseño de sitio web. - Y ahora lo que queremos hacer es que queremos enfocarnos en tomar todas las cosas que hemos aprendido y - aplicarlo a un nuevo modelo donde podamos cambiar nuestro diseño en función del tamaño del dispositivo. - Lo está viendo para hacerlo. - Vamos a explorar CSS tres consultas de medios como una técnica para cambiar nuestro código CSS, - dependiendo del tamaño del dispositivo. - Y eso va a alterar así nuestro diseño en nuestro contenido para que quepa a la vista -agradablemente en todos estos dispositivos de diferentes tamaños con el fin de crear una visualización más suave- experiencias posibles. - También vamos a discutir técnicas como met, - un dispositivo con el tributo y también algunas correcciones de JavaScript que van a permitir CSS tres - consultas de medios toe trabajo en dispositivos más antiguos además de explorar algunas correcciones de JavaScript que - permitirá una visualización fluida de la experiencia Incluso al cambiar una orientación de dispositivos de retrato - paisaje del dedo del pie, - por ejemplo, - los sitios web de hoy se están viendo en un número cada vez mayor de dispositivos cada uno con - su propio diferente tamaños de pantalla y proporciones. - Y debido a esto, - han surgido diferentes estrategias para lidiar con el cambio de diseño y las diferencias de dimensionamiento - desde la detección de dispositivos a dispositivos. - Al comprobar los dispositivos solicitantes, - La información del encabezado es una forma común de ver cuáles son las especificaciones para un dispositivo dado y luego servir - los archivos apropiados de vuelta al dispositivo. - Entonces, - por ejemplo, - una solución es construir sitios separados para móvil y de escritorio, - como twitter dot com versus mobile dot twitter dot com. - Otra solución es crear un solo sitio y alterar el estilo y el diseño usando CSS - consultas de medios, - que es la técnica que vamos a aprender. - Por lo que puede que veas que algunas empresas optan por usar un guión en el back-end. - Y cuando un dispositivo solicita esa página cuando hace la solicitud http al servidor remoto, - el servidor utiliza esa información de encabezado para detectar el dispositivo que está solicitando el archivo, - y en base a eso, - en realidad pasará de nuevo diferentes archivos HTML en diferentes archivos CSS. - Entonces eso es como construir dos sitios web diferentes, - um, - para uno para móviles y otro para computadoras de escritorio y tablets, - etcétera. - De acuerdo, - así que eso realmente requiere más trabajo porque en realidad estamos construyendo, - ya sabes, - dos sitios. - Entonces tenemos el doble de la cantidad de código ahí, - y por eso me gusta esta última solución. - Y esa es la solución que les voy a enseñar chicos y las soluciones cada vez más - ganando en popularidad como el ir a la solución para proporcionar un sitio responsive. - Entonces con el fin de que el contenido se muestre en dispositivos más pequeños, - se realizan cambios en las páginas. - Los cambios comunes en el diseño incluyen ocultar contenido o mover contenido alrededor. - Para hacer coincidir el área de pantalla disponible de los dispositivos dados, - por ejemplo, - puede tomar los elementos de envoltura o contenedor y cambiarlos a un fluido con en lugar de una - cantidad fija de píxeles. - Y de esa manera, - cuando el dispositivo con cambia tus elementos con también responderá. - Otras estrategias incluyen establecer las columnas flotantes para flotar ninguna, - y con el 100% para cambiar a una estructura de columna única en oposición a una columna múltiple - estructura, - imágenes, - tablas, - forma, - los insumos y el video también suelen establecerse en ingenio fluido. - De esta manera, - el contenido se escalará a medida que disminuya la pantalla de los dispositivos, - por lo que es importante tener tus imágenes y tablas y forma configuradas de esa manera, - y te puedes imaginar que en una pantalla más grande, - tus imágenes y las formas se verán un poco más grandes. - Ocuparán el ancho completo, - mientras que a medida que el dispositivo se escala hacia abajo, - esas imágenes también se reducirán en esas formas también se reducirán para caber dentro del - espacio de pantalla disponible. - También viene a cambiar el tamaño del texto y de los enlaces. - Entonces, -por ejemplo- a medida que un dispositivo se hace más pequeño, - puede que tenga que hacer cierto impuesto más pequeño para que no se encuentre con otro texto. - También es posible que encuentres que necesitas hacer más grande el impuesto porque el texto de cierto tamaño podría ser muy legible en una computadora de escritorio. - Pero a medida que vas a un dispositivo de mano, - si estás sosteniendo ese dispositivo de mano a una distancia más lejana se longitud del brazo, - por ejemplo- posible que necesites como tu texto de navegación principal para ser un poco más grande. - Por lo que el texto probablemente va a escalar hacia arriba o hacia abajo para crear una visualización cómoda - experiencia en los dispositivos de diferentes tamaños. - Entonces echemos un vistazo a esto. - Este diagrama aquí por un segundo y vamos a imaginar que este es un sitio que estamos construyendo, - y vamos a imaginar que este cuadrado rosa representa nuestro logotipo. - Y digamos, -por ejemplo- que esta plaza Amarilla representa nuestra navegación principal. - Y esta caja negra aquí será una barra lateral que tiene algunos sub enlaces en ella. - Y estos cuadrados azules aquí representan las diferentes secciones de nuestra página. - Entonces cada uno tiene ah cierto tipo de contenido y probablemente párrafos y texto y cosas -así. - De acuerdo, - entonces este es el diseño preferido que este diseñador había creado para escritorio. - Pero, ¿qué pasa cuando bajamos a una pantalla de menor tamaño, -por ejemplo- cuando vemos este sitio web en una tableta en su lugar? - Entonces aquí se pueden ver algunos cambios que se han hecho a lo alto para que sea más legible - es que hemos disminuido el espacio aquí entre la navegación principal y el logotipo con el fin - acomodar el ancho de este dispositivo. - Y también, - realmente ya no hay lugar para la barra lateral aquí a la izquierda, - porque nos gustaría utilizar todo el espacio disponible para el contenido de nuestra sección. - Entonces lo que han hecho aquí es que se han quitado la barra lateral del costado, - y han decidido mover eso hacia arriba debajo de la navegación. - Y entonces aquí tenemos, - ah, - cambiar de una estructura de tres columnas aquí a una estructura de dos columnas en el dispositivo de tableta -. - Y entonces, - a medida que bajamos a un dispositivo aún más pequeño como un iPhone, - por ejemplo- hay una necesidad de cambiar a una estructura de columna única, - y de hecho han ocultado algunos contenido. - Las barras lateral o bien se han movido al fondo con los sub enlaces, -o se ha escondido por completo-, y verás que la navegación principal aquí, -que es una caja amarilla- ha sido empujada hacia arriba debajo de la logo. - Por lo que esto demuestra todas las técnicas que iban a utilizar en el próximo ejercicio para - cambiar nuestro diseño a medida que disminuye el área de pantalla disponible. - Y para hacerlo como mencioné, - vamos a utilizar una nueva técnica y CSS tres, - conocida como consultas de medios, - Y esto le da a CSS el poder de preguntarle al navegador el ancho del dispositivo. - Entonces, - basado en cuántos píxeles de ancho es la pantalla de ese dispositivo, - determinará qué código CSS usar. - Y empieza con el símbolo at aquí decimos en medios de comunicación, -y después de eso, - podemos escribir una declaración- y esta afirmación o evaluará a verdadero o falso. - Lo que esta afirmación está diciendo es Onley screen, -lo que significa que sólo va a evaluar esto o comprobarlo en pantalla específicamente - dispositivos en contraposición a dispositivos de proyector o de impresión. - Y después de eso estamos revisando el ancho del dispositivo. - Entonces esto es una cosa verdadera o falsa. - Dice Ah en pantalla solo de medios. - Si esto estuviera en un proyector, - esto evaluaría como falso y así no usaría este código aquí. - Adicionalmente, - si el ancho máximo de los dispositivos es mayor que 768 píxeles, - esta afirmación se va a evaluar a falso y por lo tanto no utilizará ninguno del código CSS - escrito entre la llave rizada de apertura y cierre aquí. - No. - Si el ancho del dispositivo es de 768 píxeles o menos que esta afirmación aquí, - esta consulta de medios evaluará a true, - en cuyo caso utilizará el código dentro de la sección, - haciendo así el tamaño de fuente de los enlaces dentro de la navegación un poco más pequeña como yo - mencionado anteriormente. - Con el fin de obtener la experiencia de visualización más fluida es posible, - hay algunas otras técnicas que podemos implementar en nuestro código para hacerlo. - Una de esas cosas es el metadispositivo con etiqueta. - Entonces aquí puedes ver tengo una metaetiqueta con el nombre de Vieux Port, - y usamos una declaración aquí dentro del contenido para evitar que los dispositivos se acerquen o alejen. - Y esto nos permitirá en cambio confiar en nuestro estilo de consulta de media query para cambiar el - layout en consecuencia. - Por lo que los fabricantes de dispositivos se dan cuenta de que son el tamaño de escupir pantalla disponible es - en realidad mucho más pequeño que la mayoría de los sitios web que la gente estará viendo en el dispositivo. - Entonces una estrategia, -especialmente en dispositivos de pantalla táctil- es alejar para que todo el contenido del sitio web se haga más pequeño. - De este modo, - encaja dentro del marco del dispositivo, - y luego le toca al usuario usar sus dedos o tocar para acercar dos partes diferentes - del sitio web. - Y esto es algo que queremos prevenir. - No queremos que se aleje porque vamos a estar escribiendo ingenioso estilo de consulta de medios para - conseguir que nuestro contenido cambie de tamaño y se diseñe para que quepa dentro del ingenio de la pantalla - dispositivo sin tener necesidad de reanudar. - Entonces para deshabilitar, - reanudar lo que hacemos es volver a poner esta metaetiqueta con el nombre de Vieux Port y dentro - contenido. - Aquí establecemos el ancho para que sea igual al ancho real del dispositivo y al establecer inicial - escala toe 1.0 que el dispositivo no será, - um, - no se alejará cuando el sitio se cargue inicialmente, - será el 1.0 es el tamaño real de píxel del sitio web y al establecer escala mínima a - 1.0 y escala máxima a 1.0 que realmente deshabilitó el zoom para que el usuario no sea capaz - acercar o alejar en el sitio web de nuevo, - lo que nos permite confiar en nuestros medios estilo de consulta para cambiar el diseño. - También hay algunas correcciones de JavaScript diferentes que ayudarán a que la experiencia de visualización sea mucho más fluida. - Um, - así que al menos al momento de grabar esto, - hay algunos bugs con diferentes dispositivos apple como iPhone um, - habilitar zoom o cambiar el zoom cuando cambias de horizontal a vertical o cuando - cambiar de retrato del dedo del pie paisaje. - Entonces si estás viendo un sitio en tu iPhone y lo inclinas de vertical a horizontal. - El software del dispositivo desencadena un zoom, - por lo que en realidad podemos deshabilitar eso usando esta corrección de JavaScript. - Adicionalmente, - también hay una solución de consultas de medios para versiones anteriores de Internet Explorer que no lo hacen - admiten consultas de medios. - Entonces sigamos adelante y pasemos al siguiente ejercicio y empezaremos a implementar estos medios-consultas sobre nuestro proyecto de ejercicio continuado. 52. Configuración de pruebas de respuesta local: - Hola. - Bienvenido de nuevo. - Este es Ejercicio 4.1 Disposición receptiva Para empezar, - Me gustaría ayudarlos chicos a configurar su computadora para probar el sitio responsive en - pantallas de diferentes lados para diferentes dispositivos sin realmente tener que salir y comprar todo - esos dispositivos y pantallas de diferentes tamaños. - Para hacerlo, - vamos a estar usando una herramienta gratuita en línea. - Este sitio web llamado Cork tools dot com slash screen fly una de las cosas bonitas de pantalla - vuelo que disputamos en una sola ubicación. - Y porque está en línea, - no hay necesidad de descargar ningún software especial. - Una de las cosas bonitas de la mosca de la pantalla es que está muy limpia, - y se puede ver aquí abajo en la parte inferior. - Hay diferentes iconos, - y te permite cambiar entre pantallas de diferentes tamaños, - tabletas y móviles, - para que luego puedas previsualizar tu sitio en pantallas más pequeñas y más grandes. - E incluso incluye un botón de visualización de rotación aquí abajo para que pueda probar retrato versus - vista de paisaje. - Ahora, - una de las cosas que notarás cuando vengas a pantalla mosca es que te solicita que - pegue en la URL del sitio que desearías probar y notar que están pidiendo- una dirección http. - Por lo que en realidad están buscando una dirección de sitio web adecuada. - Y puede que hayas notado de los ejercicios anteriores que cada vez que hemos estado abriendo nuestro - archivos localmente en nuestra computadora no se estaban subiendo realmente. - Dirección Http Lo que terminamos viendo es algo así donde la URL comienza con - barra de dos puntos de archivo, - barra de barra y luego tiene sólo la estructura de carpetas al archivo en nuestro equipo local. - Y eso está perfectamente bien para previsualizar tu sitio web antes de que decidas subirlo a - tu servidor de hosting, - sin embargo, - notarás que con pantalla fly si copiamos y pegamos esto aquí que cuando vamos a ver - el sitio lo que quiero Wow, - no funciona. - Um, - y la razón por la que es eso? - Se trata de ir a una dirección http o a una chica real en Internet tan hipotéticamente - en realidad podrías subir tu sitio. - Eres el sitio receptivo, - y entonces podrías probarlo aquí si ya lo tienes en línea. - Um, - y si te interesa ir por esa ruta después de ver este video, - puedes seguir adelante y saltarte al video titulado Site Publishing usando FTP y eso - te enseñará a usar file zilla para subir tus archivos del sitio a su servidor remoto. - Y luego solo puedes pegar tu nombre de dominio aquí, - y puedes usar la mosca de la pantalla para probar tu responsive diseñado de esa manera. - Y si no quieres que todos en Internet puedan verlo mientras sigues -arreglarlo, - podrías crear una carpeta en tu servidor llamada Test o algo así que solo tú - sabes cómo llegar. - Y podrías simplemente arrastrar los archivos a su ahora. - La única desventaja de eso es que obviamente, -en cualquier momento que hagas un cambio en el CSS localmente, - tendrás que guardarlo y luego subirlo a tu servidor para luego probarlo en pantalla fly. - Entonces con el fin de especie de acelerar el proceso de producción y poder seguir simplemente -trabajar localmente, - lo que voy a hacer es instalar un servidor de pruebas en mi computadora local-, y hay algunas opciones diferentes para haciendo eso. - Para Mac, - se puede descargar señora, - lo que le dará ah, - la capacidad de instalar un servidor de pruebas en su computadora que pueda utilizar. - Um, - Y si estás en windows, - puedes usar, - uh, - Wamp o Wamp server. - Entonces ambos libres de aire, - Um, - y te mostraré cómo configurar esto en Mac. - Desafortunadamente, - no tengo computadora Windows, - pero te puedo decir que la forma en que funciona esto es que descargarías Wamp. - Um, - y tienes que seleccionar el que específicamente coincidirá con tu computadora. - Tienen una versión de 32 bits en una versión de 64 bits. - Y si no estás seguro sobre cuál, - um, - configuración respeta tu computadora tiene, - hay un enlace dentro del área de discusión. - Se puede ir a ver que tiene algunos otros enlaces Teoh sitios que tienen indicaciones. - O en realidad, - si buscas en Google ventanas, - cómo comprobar si tu sistema es de 32 o 64 bits, - verás que hay un hilo ah que explica eso en el sitio web de Microsoft. - Está bien, - así que básicamente lo que haces, - aunque esencialmente como descargas wham! - Y cuando lo instalas después de instalarlo, - crea este directorio en tu computadora, - que el predeterminado es C, - barra de colon wamp slash www y cualquier archivo que pongas dentro de esta carpeta www en el que puedas acceder - tu navegador escribiendo en http colon barra barra barra inclinada host local. - Entonces, - por ejemplo- digamos hipotéticamente que estabas creando un sitio web para una granja de café en Hawai. - Um, - y tal vez le nombre a la carpeta su carpeta raíz principal para ese proyecto de sitio web. - Tú lo llamas, - um, - Granjas Kona. - Entonces lo que haces es tomar tu carpeta de sitio web, - Kona Farms, - y arrastrarías toda esa carpeta del sitio web a la carpeta W W W W dentro de esa carpeta Wamp -, - y luego acceder a eso en tu navegador como - ah, - servidor de pruebas local, - escribirías en el dominio host local slash Kona Farms para entrar en esa carpeta. - Ahora, - es muy similar en Mac cuando instalas señora. - Entonces, - hombre, - puedes venir aquí y puedes hacer clic en la descarga. - Ahora vincula esto. - Ah, - éste de aquí que dice, - por ahora eso es para la versión pagada, - que es señora pro y para nuestras necesidades. - Está bien solo usar la versión gratuita aquí, - así que pincharías descargar ahora e instalarías señora. - Ahora, - cuando lo descargues e instalas, - lo puedes encontrar en tu carpeta de aplicaciones e incluso creé un atajo aquí en mi dock. - Para ello así dice puede tener. - Y cuando hagas clic en eso cuando lo subas, - verás que aparece esta pequeña pantalla. - Y lo que pasa es que cada una de estas luces aquí se iluminará en verde cuando se inicie el servidor. - Si vas aquí abajo a las preferencias, - hay estas pestañas diferentes aquí y la última pestaña aquí, - este botón que dice, - Apache, - si vas adelante y haces clic en que esto realmente te permite elegir cualquier en tu - computadora Ah, - que te gustaría ser el directorio raíz de tu servidor local. - Entonces, - um, - Tengo una carpeta llamada Sitios en mi Computadora. - Así que acabo de decir que seguí adelante y entré en select, - y acabo de seleccionar mi nombre de usuario. - Y luego seleccioné sitios, -por ejemplo- y hice clic en abrir. - Y de esa manera. - Ahora, - cualquier archivo que ponga en mi carpeta Sitios puedo acceder yendo al host local en el navegador. - Así que una vez que configuras esto, - puedes simplemente como, - minimizar esto u ocultarlo, - y lo que quiero hacer es que me gustaría encontrar que los archivos de mi sitio web, - y quiero mover esos a la misma carpeta que acabo de especificar. - Entonces arrastraría esos archivos en mi caso, - a mi carpeta Sitios y luego a acceder a eso en el navegador. - Ahora podemos entrar en nuestro navegador predeterminado y de nuevo en Windows. - Simplemente escribirías anfitrión local Slash. - Y entonces, - cualquiera que fuera el nombre de la carpeta que había colocado dentro de la carpeta www dentro de eso - Wamp folder en Mac, - es un poco diferente. - Aparte de escribir host local, - hay que poner también el símbolo de colon y un número de puerto, - que el número de puerto predeterminado para señora es el colon 8888 Y luego una vez que entras ahi, - puedes encontrar la carpeta de tu proyecto de sitio web. - En mi caso, - tengo unas cuantas carpetas aquí para llegar a ella, - Um, - y entonces tu sitio web aparecerá así que te darás cuenta. - La diferencia es que en lugar de previsualizar este archivo desde el sistema de archivos local así -, - usando barra inclinada de dos puntos de archivo, - en realidad puedes previsualizarlo desde tu desde un servidor de pruebas local que acabas - instalado en su computadora. - Entonces esta u R L ahora es utilizable en pantalla mosca para que pueda seguir adelante y copiar esto y volver - en pantalla Vuela y puedo pegar a este tipo aquí bajo H T T p. - Barra de barra de colon Solo pegará eso ahí dentro y verás que empieza con - host local ahora en su lugar y haremos clic en Ir y ya podemos ver nuestro sitio y lo disputamos en - todos esos dispositivos de diferentes tamaños. - Enfriar. - Entonces lo bueno de esto es que no sólo puedo probar mi sitio ahora, - pero no hay necesidad de que lo suba porque esto en realidad se está ejecutando una prueba - servidor en mi computadora local. - Entonces si traigo esos archivos en texto sublime que puedo editar, - el código es que voy y lo guardo y veré los cambios aquí dentro haciendo clic derecho dentro del - marco y seleccionando reload frame. - Podré ver instantáneamente aquellos que cambia el sitio. - Ahora hay una última opción. - Um, - si no estás seguro de que quieres instalar wham o señora como servidor de pruebas local en tu - computadora. - Al menos absoluto, - lo que puedes hacer es traer tus archivos aquí en tu desde tu sistema de archivos local, - y simplemente puedes arrastrar la esquina del navegador para ver cualquier cambio. - Entonces, - me gusta, - este ancho particular de pantalla aquí se pueden ver los iconos sociales están a la derecha - lado . - Pero cuando ya no hay espacio para que quepan, - lo tengo configurado en el código completado para que salten aquí al panel de logotipos. - Y a medida que una pantalla se hace más pequeña, -hay otros cambios como este, - como el logotipo cada vez más pequeño y voltear la navegación temática debajo de ella así. - De acuerdo, - de acuerdo, - Así que así es como configuramos nuestro entorno de pruebas local para construir salidas responsivas. - Sigamos adelante y pasemos al ejercicio de diseño responsive. 53. Preparar HTML para la composición de la respuesta: - está bien, - así que para empezar, - yo quiero no había traído ya el código fuente para 4.1 responsivamente aquí en sublime - texto. - Y también he traído este código aquí en el navegador yendo a corcho tools dot com slash - pantalla fly, - que se discute en el video anterior. - Y he ido adelante y ya he vinculado a la copia local en mi servidor de pruebas local para - esta página Web. - Por lo que podremos probar el diseño en dispositivos de diferentes tamaños. - Y los únicos dos archivos con los que realmente vamos a necesitar trabajar para este ejercicio es la página html - index dot y también la página CSS de los estilos de dispositivo dot. - Así que he creado una hoja de estilo adicional para ustedes chicos en la carpeta CSS. - Entonces ahora deberías haber normalizado dot CSS estilo dot CSS y esta hoja de estilos adicional - estilos de dispositivo dot CSS donde estaremos agregando todas nuestras consultas de medios s para que podamos - controlar la forma en que el sitio se muestra en dispositivos de diferentes tamaños. - Ahora lo primero que queremos hacer es que vamos a querer agregar algunas etiquetas aquí en - la sección principal de nuestras páginas HTML. - De esa manera podemos obtener la experiencia de visualización más suave es posible en todos los diferentes - dispositivos. - Entonces lo primero que haremos es ir a la línea nueve aquí y vamos a añadir el meta con - etiquetas para que podamos configurar dispositivos enviados para que sus navegadores no acerquen ni alejen - cuando se cargue el sitio. - Y al prevenir el zoom. - Entonces solo podemos confiar en nuestras consultas de medios para cambiar el tamaño del diseño. - Entonces he escrito un comentario aquí en línea. - Nueve. - Simplemente puedes seguir adelante y resaltar eso y crearemos un ataque Met. - Y dentro de la metaetiqueta, - vamos a darle un nombre de puerto de vista que apuntará a los dispositivos puerto Vieux. - Y vamos a configurar otro atributo llamado Contenido. - Y aquí vamos a escribir un comunicado que va a desactivar el dispositivo está condenando. - Lo primero que queremos hacer es establecer con igual al dispositivo con, - y luego vamos a poner una coma, - y vamos a especificar que la escala de guión inicial es igual a 1.0 o 1.0, - y luego vamos a establecer el escala de guión mínima igual a 1.0. - Y también vamos a establecer la escala máxima de tablero igual a 1.0. - Por lo que eso desactivará el zoom en todos los diferentes dispositivos que ven este sitio. - Otra cosa que vamos a hacer es que vamos a enlazar a un archivo JavaScript que va - Teoh arreglarlo para que los iPhones y iPads cuando rotemos desde horizontal dos retrato, - no intentará acercar o alejar ahora. - Ah, - en realidad, - Google busca esto, - o puedes ir a obtener hub dot com y buscar este código. - Se llama el I O i. - O s Cambio de orientación. - Arregla cómo confinaste eso? - No, - tengo el, - uh están todos escritos aquí, - así que sólo voy a escribirlo, - y vamos a usar esta etiqueta de guiones así, - que tiene una etiqueta de escritura de apertura y cierre. - Y dentro de la etiqueta de guión de apertura, - vamos a usar SRC para apuntar a la ubicación de este archivo javascript, - que está en http s colon slash slash raw dot Obtener hub dot com slash w I l t o slash I os - dash orientation change. - Asegúrate de deletrear eso correctamente Orientación cambio dash fix dot Js Eso es en realidad un - bastante largo estás todo ahí. - De acuerdo, - también podrías ir a esta chica y simplemente descargar este archivo javascript y ponerlo en una de - tus carpetas, - tal vez una carpeta J s, - y luego puedes vincularlo localmente. - Y esa en realidad probablemente va a ser tu apuesta más segura es agarrar la copia actual de esto - descargado y enlazarlo aquí para nuestros propósitos. - Eso debería estar bien. - Sólo para vincularlo desde este mando a distancia, - están todos aquí. - Está bien. - Y entonces, - ah, - también queremos bajar aquí a la sección de guiones y vamos a añadir un arreglo para, - um, - versiones más antiguas de Internet Explorer aquí. - Esto es en línea 19. - Escribí este comentario aquí que dice agregar vinculado a CSS tres consultas de medios IE fix. - Voy a borrar eso, - y voy a tabular aquí y vamos a crear la etiqueta de guiones para esto. - Entonces esto sólo va Teoh ser necesario para versiones antiguas de IE. - Entonces puede estar dentro de mi comentario condicional por menos de Internet Explorer nueve aquí, - así que crearé mi etiqueta de guión de apertura y cierre ahí y crearé mi atributo SRC y - Voy a enlazar a ese archivo. - Ahora Este archivo aquí se comparte a través de la red de entrega de contenido de Google. - Podría simplemente escribir en la barra de barra inclinada de colon http y esto está bajo C SS tres consultas de medios de tablero -. - Asegúrate de deletrear ese punto derecho Js Disculpe, - Eso es dash Js media queries Dash Js Y entonces eso será ah dot google code dot com slash - SV y slash trunk slash CSS tres dash commedia consultas dot Js Wow, - eso es un bocado allí por lo que en realidad puedes ir a Google y solo puedes buscar medios - consultas fix o CSS tres consultas de medios para i E. - Y debería venir con este código aquí al que simplemente puedes vincular directamente una y otra vez -. - Esto se comentará y la mayoría de los navegadores ni siquiera se molestarán Cargarlo. - Pero si es una versión antigua de i e, - verá aquí la declaración condicional que dice, - si menos que i e. - T. - Nueve y entonces en realidad ejecutará este guión thes estos dos guiones aquí. - Este guión superior, -si recuerdas, - es el que hace que HTML cinco etiquetas semánticas funcionen en Internet Explorer. - Y este de abajo aquí es un javascript que hace que las consultas de medios funcionen. - Sí, - podemos tener nuestro sitio web receptivo trabajo en viejo e. - Vale, - hasta ahora, - tan bueno. - Y lo último que tenemos que hacer para apenas empezar a configurar esto es en línea 16 aquí. - Necesitamos enlazar a nuestra hoja de estilo para los dispositivos. - Por lo que ya hemos vinculado al CSS de punto normalizado y aquí enlazamos al estilo dot CSS. - Pero necesitamos crear un enlace a la nueva hoja de estilo que creé, -que es específicamente para que nuestras consultas de medios se escriban dentro de así aquí sólo diremos - hoja de estilo de relación. - Y estableceremos la ubicación de la balsa H dos puntos a ese archivo, -que es CSS slash Uh, - dispositivo, - creo, - es como escribí esto. - Sí, - estilos de dispositivo puntos CSS y podemos guardar eso. - Entonces he ido adelante y he añadido esto a todas las demás páginas para ti. - Por lo que acabamos de agregarlo a la página de índice para que pudieras ver el proceso 54. Aplicación de las consultas de medios de CSS3: - Entonces ahora tenemos todo esto en su lugar. - Podemos seguir adelante y saltar al dispositivo estilos dot CSS, - y podemos empezar a escribir nuestro código responsivamente. - Entonces el primer dispositivo que quisiéramos considerar aquí es la tableta cuando está en paisaje. - Entonces, - por ejemplo, - el iPad de Apple cuando está volteado, - paisaje tiene 10 24 píxeles de ancho para que podamos saltar a nuestro navegador y podemos usar pantalla - volar para asegurarnos de que esto se vea correcto en ese dispositivo. - Ahora mismo, - estamos viendo nuestro sitio web en la pantalla de tamaño portátil de 15 pulgadas y podemos saltar aquí abajo a - tablet. - Y podemos seleccionar Apple iPad uno y dos, - que tiene el 10 24 con tamaño de pantalla. - Está bien, - ahora lo cambiamos al iPad. - Se puede ver que la mayor parte de nuestro sitio se ve bien. - Aún así, - el texto de navegación se ve bastante bien. - Um, - logo se ve bastante bien, - y todo lo demás está bien. -Creo que el rapero de aquí podría estar un poco cerca del filo, - pero eso puedo corregirlo. - Y entonces también te das cuenta aquí. - Algo que podría ser problemático es que los iconos de las redes sociales aquí se están iniciando del dedo del pie - se superponen ahora en el contenido. - Entonces necesito averiguar qué me gustaría hacer con esos. - Entonces ten un par de opciones diferentes aquí. - Puedo ocultar la barra de Redes Sociales o puedo optar por moverla a una sección diferente. - Entonces, - por ejemplo- creo que lo que haré aquí es que usaré este espacio vacío aquí y sólo los colocaré en la parte superior- del panel de logotipos en esta esquina. - Entonces sigamos adelante y volvamos al código, - y escribiremos nuestra primera consulta de medios para lograr eso. - Entonces primero diremos en medios, - que revisará el dispositivo y agarrará alguna información. - Y aquí podemos escribir una declaración que se va a evaluar a verdadero o falso si esto Si esto - declaración de consulta de medios se evalúa como verdadero, - utilizará el código que se capta dentro de la consulta de medios. - Y si evalúa lo falso sólo va a omitir esto o ignorar el código dentro de la consulta - media. - De acuerdo, - entonces estas declaraciones pueden ser bastante complicadas o bastante simples, - y depende de ti lo sofisticado que lo hagas. - Lo primero que queremos hacer es decir solo pantalla, - y esto sólo evaluará a verdad. - Si se trata de un dispositivo de pantalla, - algunas otras cosas puedes decir las tuyas. - Se puede decir en los medios todo lo que abarcaría todos los dispositivos. - También se puede decir, - uh, - impresora o para proyección también. - Y en este caso, -nos preocupa una tablet, - que es un dispositivo de pantalla. - Entonces aquí diremos solo pantalla y luego usaremos la palabra clave y para que podamos continuar -la declaración para que puedas usar la palabra y tantas veces como quieras, - y eso se asegurará de que esto se evalúe a verdadero y lo que sea que esté del otro lado de - la palabra evaluará a verdadero también. - Y en nuestro caso, - queremos asegurarnos también de que el ancho máximo en este caso coincida con 10 24 píxeles o menos -. - Y luego pondremos un juego de llaves y le daré vuelta un par de veces ahí. - Está bien, - para que puedas decir Min, - Dash wits, - Max, - dash wits y realmente puedes poner en cualquier tipo de cantidad de píxel que te guste en este caso, - queremos asegurarnos de que se trata de una tableta de paisaje de 10 24 píxeles o menos. - De acuerdo, - así lo hemos dicho en medios Onley dispositivos de pantalla y también donde ese dispositivo de pantalla no tiene más - que un ancho de 10 24 píxeles. - Ahora, - si esto es cierto y eso es cierto, - en realidad va a ejecutar el código aquí que aquí mismo Así que podemos empezar a escribir - código CSS normal aquí. - En medio de esta apertura y cierre rizado para esta consulta de medios, - y ese código se ejecutará cuando esta declaración. - El enunciado completo aquí es cierto ahora. - Si cualquiera de los lados de esto es falso, - si esto es falso, - no es un dispositivo de pantalla. - O si se trata de un dispositivo de pantalla y esto es falso, - en realidad es más grande que 10 24 píxeles. - No va a ejecutar el código aquí. - Y una de las cosas bonitas de las consultas de medios es que no tengo que escribir todo el CSS - código otra vez porque todavía sólo va a heredar los estilos que he escrito anteriormente . - Entonces, - por ejemplo, - en la página CSS de punto de estilo, - tenemos la imagen de fondo del cuerpo. - Aquí está la textura del papel hecho a mano, - y si no quiero cambiar eso en la consulta de medios de lo que simplemente puedo dejarlo fuera. - No tengo que volver a escribir todo este código, - lo cual es maravilloso. - No tenemos que pasar tiempo perdiendo, - copiar y pegar un montón de código. - Realmente sólo necesitamos escribir el código para lo que nos gustaría cambiar cuando esta condición es - verdadera. - Entonces en nuestro caso, - sentimos que el rapero era un poco demasiado ancho. - Lo que voy a hacer es una técnica común que es cambiar lo fijo con rapero, -que es de 960 píxeles actualmente para cambiar a un fluido con para que sólo sea un - porcentaje del ancho del dispositivo. - Entonces aquí voy a poner al rapero ahora al 90% de bien. - Y algunas otras cosas que queríamos cambiar es que quiero apuntar a la barra de Social Media y yo -quiero cambiar su posicionamiento, -que antes se fijaba en posición fija-, - y quiero ponerla ahora para posicionar absoluta en su lugar. - De esa manera, - no se mantendrá fijo en su lugar cuando el navegador se desplace, - pero todavía podemos usar el posicionamiento absoluto para posicionarlo en relación con el navegador- ventana y vamos a seguir adelante y decir los primeros 100 píxeles. - Y en realidad tuve que jugar un poco con esto para que apareciera en el en la derecha - lugar y 100 pixeles justo alrededor de lo centran y luego vamos a seguir adelante y decir Queremos movernos - es alrededor del 5% sobre desde el borde de la pantalla. - La forma en que calculé esto fue que pusimos el rápido y 90 así fuera de eso, - 100% fue de área disponible en el dispositivo. - Estamos ajustando al rapero para que se apriete a 90 lo cual deja en disponible, - ya sabes, - 10% que sería 5% a la derecha y 5% a la izquierda. - Por lo que sólo lo pondremos a 5% de emisión. - Permitir que el ícono social barra remolque alinee justo con el borde de la envoltura de la mano derecha -lado, - y en realidad vamos a cambiar el ancho de esta cosa. - Entonces antes de que el con se ajustara a 40 píxeles cuando los iconos se apilan verticalmente, - pero en realidad vamos a cambiar todos esos enlaces para que se muestren horizontalmente? - No. - Entonces para poder hacer eso, - tenemos que hacer para que encajen. - En otras palabras, - necesitamos cambiar el ancho. - Y si dijera el con el auto, - simplemente sería es ancho es necesario estar ahí para caber todos esos elementos. - Lo siguiente que queremos hacer es querer apuntar a esos enlaces dentro de esa barra social. - Podemos usar un selector descendiente para hacerlo, - y queremos configurarlos en lugar de bloque de visualización. - Queremos configurarlos para que se muestren en bloque de línea para que se muestren uno al lado del otro así -. - De acuerdo, - así que sigamos adelante y guardemos esto, - y entonces podremos volver a la mosca de la pantalla. - Y en lugar de refrescar la página aquí, - um, - lo que queremos hacer es, - si vas al borde de la ventana del marco aquí y tienes razón, - click. - Estoy usando un ratón para hacer click derecho. - Si estás en Windows, - solo debes sentir hacer clic derecho. - Si estás en Mac y no tienes bocas de dos botones, - puedes controlar click. - Para que eso funcione o para hacer clic con el dedo para subir este menú y dentro del menú, - debería haber algo que diga Recargar marco. - Y si hace clic en eso, - debería volver a cargar la página del sitio allí. - Está bien, - entonces algo está funcionando el aire. - Aquí hay otra cosa rota, - que abordará en un momento. - Pero se puede ver que los iconos, - iconos de redes sociales aquí se movieron desde un costado y con el fin de previsualizar eso para asegurar- está funcionando correctamente. - Si quieres, - puedes cambiar de ida y vuelta. - Entonces aquí está la pantalla de 15 pulgadas. - Entonces ahora los iconos sociales se airean de lado aquí, - y el rapero tiene 9 60 pixeles, - y se quedará en 9 60 pixeles, - aunque se ensanchen. - Entonces aunque subamos como 19 pulgadas o, - ya sabes 20 pulgadas el tamaño del rapero lo mantiene 9 60 pixeles, - que está dictado por la hoja de estilo CSS de punto de estilo. - Pero entonces, - cuando bajamos a un tamaño más pequeño, -por ejemplo- vamos a la tableta iPad. - Ahora el rapero está configurado en el 90% de la pantalla, - y estos iconos sociales aquí cambian a en bloque de líneas, - por lo que ahora se muestran horizontalmente en lugar de verticalmente, - y también están dentro de esta barra de logotipos. - Aquí están colocados encima del logo, - pero panel. - De acuerdo, - así que una cosa que notarás es cuando escalas hacia abajo a tamaños más pequeños aquí que el - imágenes aire, - no escalar Así ciertas cosas. - Esto es problemático para, - um, - por ejemplo- esta imagen y también será problemático aquí para el video cuando se baje más pequeño y -más pequeño y también cosas como las tablas y formas. - Uh, - entonces lo que podemos hacer es una técnica común es que querrás establecer todas tus imágenes y - videos y etiquetas de audio todas tus formas y tablas- cualquier cosa que normalmente se estire a lo largo de toda la sección o mantenga marco de la página. - Vas a querer poner esos a un ancho del 100%. - Entonces tienen un ingenio fluido, - y se reducirán en dispositivos de diferentes lados de tamaño. - Por ejemplo, -si bajo a un tamaño realmente pequeño aquí, - entre otros temas, - puedes ver estas imágenes fuera de la pantalla ahora mismo. - Entonces una manera realmente fácil de arreglar eso es entrar en tu hoja de estilo principal, -que es la hoja de estilo CSS de punto de estilo aquí y bajo arreglado este año bajará y -vamos a ver bajará la línea 32 aquí- y vamos a decir imágenes. - Está bien, - video. - Y si tuviéramos algún audio en nuestro sitio, - podríamos configurar audio y cualquier I frames y cualquiera, - como, - formas y tablas a todo el 100% de ancho. - De acuerdo, - En realidad ya puse esto de forma individual para la mesa. - Yo creo aquí. - Sí, - y en realidad ya puse esto para la forma. - Por lo que normalmente escribo todos estos fuera. - Ya he escrito estos en el código en otra parte. - También para el marco I. - Yo lo creo. - De veras, - Lo único que queda aquí son las imágenes y videos. - Y no estoy usando una etiqueta de audio en esta, - así que incluso puedo quitar esa también. - Pero normalmente tienes todas estas escritas así. - Todas las cosas que el aire estira tu sitio a través de la pantalla hasta el borde del rapero -. - Puedes ponerlos dos con un 100% así. - Entonces si guardo esto y luego volvemos y refrescamos aquí, - intentemos esto otra vez. - Por lo que voy a ir a hacer clic derecho recargar marco. - Está bien. - Y luego si bajamos de nuevo a las tabletas ahora- se puede ver que la imagen está sólo al 100% dentro de ese rapero, - así que se va a reducir para cada talla. - Entonces ahora, -incluso cuando me caigo a gustar el tamaño de iPhone, - las imágenes se ponen realmente pequeñas así. - Pero no es saltar fuera del marco. - De acuerdo, - así que hemos ido adelante y hemos abordado el estilo para el iPad cuando es paisajista, - y si rotamos la pantalla, - podemos comprobar cómo se ve aquí cuando se baja a retrato. - De acuerdo, - Voy a saltar de nuevo a mi hoja de estilos aquí y volver a los estilos de dispositivo dot CSS. - Y aquí vamos a seguir adelante y cambiar algunas cosas bajo la vista de retrato para - Tablet. - Entonces en serio, - lo único que quiero cambiar aquí es que quiero hacer los enlaces de navegación un poco - más pequeños así que vamos a seguir adelante y decir en Media Onley, - Grito y paréntesis, - Ancho máximo guión y diremos 7 68 pixeles, - y usaremos nuestras llaves y abriremos esto así. - Podemos sangrar dentro de aquí y simplemente anidar algunos estilos aquí, - y vamos a seguir adelante y decir Nah, - bar space ahora enfrenta un objetivo todos los enlaces dentro de Navid Bar y cambiará la fuente - tamaño para ser un poco más pequeño porque es una especie de hacinamiento y acercándose un poco al - borde de su. - Entonces diremos 0.8. - Entonces los ems son fluidos. - Están en relación con el tamaño de fuente anterior. - Por lo que un em es igual al tamaño de fuente actual y 0.8 será un poco más pequeño. - Punto a más pequeño. - De acuerdo, - entonces vamos a seguir adelante y guardar eso y volver y vamos a recargar la página aquí. - Recargar marco. - Está bien. - Para que veas que esos tipos se pusieron más pequeños ahí. - Y ahora hay un poco más de espacio. - De acuerdo, - así que si cambio ahora, - si giro la pantalla aquí, - se puede ver el tamaño del texto en el enlace aquí en horizontal. - Entonces para el paisaje. - Y luego si rotamos una pantalla aquí para retrato, - se puede ver que esos impuestos vinculados se hacen un poco más pequeños allí. - Y tenemos una cantidad de espacio más cómoda alrededor del texto del enlace en los botones. - Está bien, - Impresionante. - Entonces lo siguiente que queremos hacer es que queremos armar a este tipo para smartphone. - Está bien, - así que quiero ir a ah paisaje smartphone, - ¿Cuál sería yo roto este año. - Esto tiene 480 pixeles de ancho así. - Esto es una especie de OK, - excepto por el hecho de que quiero poder ver más del contenido aquí. - Está todo bien y bueno poder ver, - uh, - uh, - esta navegación aquí y este logotipo. - Pero estaría bien si pudiera ver un poco más de esta imagen, - la imagen introductoria y tal vez incluso algo del texto, - si es posible. - Entonces con el fin de sacar esto de la pantalla más alto así, - creo que lo que voy a hacer es una especie de encogerlo un poco. - A lo mejor esto es un poco demasiado alto aquí. - También, - deberíamos poder Teoh, - sacar a estos tipos para hacer espacio. - Y, - um, - creo que vamos a mover el logo también. - Entonces probaré algunas cosas diferentes aquí si nos desplazamos por aquí. - Esto también es un poco demasiado estrecho. - Entonces mi si miras esta estructura de columnas aquí, - aquí mismo, - donde dice noticias de la compañía, - esto sería realmente un poco molesto de leer, - porque imagínate, - sólo eres capaz de lee como dos palabras, - y luego tienes que saltar a la siguiente línea. - Entonces lo que estoy pensando aquí es que necesitamos abandonar nuestra estructura de columnas múltiples. - Sospecho que esto es aún peor en la página del catálogo, - que tiene tres columnas aquí. - Entonces esto es simplemente demasiado estrecho de una línea. - Entonces vamos a tener que hacer es vamos a tener dedo del pie fusionar a este tipo con una estructura de columna - aquí y poner las columnas al 100% de ancho dentro de ese rapero. - De acuerdo, - entonces vamos a seguir adelante y bajaremos aquí y diremos, - uh, - en medios sólo pantalla y paréntesis. - Max, - Dash con dos puntos, - 480 pixeles, - que es el ancho del iPhone cuando está en paisaje. - De acuerdo, - así que voy a seguir adelante y sólo quitar la corteza social aquí. - Tenemos que hacer espacio, - así que diremos libras sociales. - Y en cualquier momento que queramos ocultar algo simplemente puedo configurar para mostrar ninguno así lo hará - ocultarlo y sacarlo del diseño para que realmente no destruya el contenido. - Simplemente lo hace así Ya no es visible. - Siempre lo podemos volver a hacer visible más tarde en cualquier momento que queramos y pondremos la barra de solloza - aquí. - Dos posiciones estáticas. - De acuerdo, - así que estoy quitando el fijo, - el posicionamiento de fijo fuera de la nab nuestro porque en una pantalla más grande, - es bueno tener el NAB nuestro seguimiento, - pero es una gran, - barra gruesa, - y está ocupando demasiado espacio en una pantalla más pequeña. - Entonces en una pantalla más pequeña, - cuando la gente se desplaza más abajo, - quiero que puedan usar todo el ancho de la pantalla de sus dispositivos para ver el contenido y - no tener la barra de navegación ocupando tanto espacio. - Lo que movemos esto de nuevo a estática en lugar de estar por encima en realidad va a estar por debajo - el área del logotipo. - Entonces creo que voy a cambiar la frontera. - Estar encima de ello. - Seguiremos adelante y pondremos a este tipo para que quede bordeado. - Top de ceniza para hacer línea visual entre el panel del logo en el duende están aquí, - así que pondremos este dedo un pixel sólido C C c y luego para todos esos enlaces dentro habrá - añadir algunas palmaditas arriba y abajo lo hará un poco menos así que creo esto tenía un - relleno de, - como, - 22 píxeles o algo así antes. - Y pondré el relleno por encima de estos enlaces ahora en sólo 10 píxeles, - por lo que eso hará que esto sea más estrecho. - Aquí, - vamos a ir y decir, - relleno 10 píxeles arriba y abajo cero a izquierda y derecha. - Está bien. - Y luego el logo aquí, -ese es el siguiente es el panel de logotipos que sí recuerdan, - antes de que los paneles del logo un poco demasiado altos aquí. - Y esto tenía, - um, - como, - 80 píxeles de relleno para que apareciera debajo del nab fijo nuestro Vamos a quitar un - mucho de ese espacio ahí así que vamos a seguir adelante y decir relleno de logotipo y diremos, - cero en la parte superior Ahora para logo y cero en la izquierda y derecha. - Y 10 píxeles justo en la parte inferior. - Está bien. - Y bajará aquí a Ah, - el H uno y H dos para el logo se adelantarán y ahorrarán libras. - Logotipo espacio H una coma, - espacio logo libra Edad a recordar. - Ahí dice los zapatos H W en el logo ahí. - Y vamos a cambiar el margen en la parte superior aquí para que sea más pequeño dirán, - Bueno, - en realidad usar el margen de la parte superior y cambiará esto a 10 píxeles como ese. - Está bien, - y veamos tu para el para el propio H. - Ajustaremos algo de relleno en ese tipo está bien, - diremos palmaditas cero en la parte superior. - Estás a la derecha es cero en la parte inferior y 30 píxeles de palmaditas en el lado izquierdo Empujarlo - en un poco. - Y para la imagen, - la pequeña imagen de la corona Vamos a cambiar eso para estar fuera a un lado diciendo fondo - guión posición cero horizontalmente y negativa. - Cinco píxeles verticalmente. - Entonces lo que estamos haciendo aquí es llevarnos la corona pequeña. - Ah, - eso estaba por encima de los zapatos Z H W. - Parte del logo que era el jefe M, -pequeña gran corona, - y la estamos moviendo de arriba hacia un lado. - Por lo que agregué relleno adicional en el lateral. - 30 píxeles con para esa corona, - Um, - y lo he desplazado el posicionamiento de fondo para ser cero horizontalmente, -que está en el lado izquierdo y negativo cinco pixeles, - moviéndolo un poquito arriba verticalmente para alinearse con las letras. - Y eso debería quedar bastante bien, - Así que eso debería cuidar el logo. - La otra cosa que queremos hacer es poner la columna. - Entonces tengo todas estas columnas. - Estilos como la columna uno a la izquierda vienen una columna, - una columna media, - una derecha y columna a izquierda y Colin para escribir estos aire todos los que estaban flotando - previamente y podemos seleccionar todas esas clases. - Y podemos usar una coma para simplemente agruparlos a todos juntos. - Y podemos decirles a todos que se pongan a flotar Ninguno. - Entonces en lugar de flotar a la izquierda o flotar a la derecha, - sin embargo están flotando antes para crear esa estructura de columna lado a lado. - Lo vamos a cambiar para flotar ninguno. - Y también queremos que tomen ahora el ancho completo del rapero, - Así que los cambiaremos para tener un ancho del 100% así. - Y queremos mover el quitar el margen de todos los lados, - a excepción del fondo así. - De acuerdo, - vamos a seguir adelante y guardar eso. - Está bien. - Y luego, - um, - abajo en la parte inferior de la página de detalles los otros tres abajo de la sección de detalles - aquí abajo. - Se puede ver que estos tipos ya no encajan uno al lado del otro. - Estos aire no van a ser uno encima del otro, - pero no vamos a tener necesidad de la pequeña, - uh, - línea aquí, - que se llama Border right. - Agregamos una clase llamada frontera derecha en el ejercicio anterior para hacer este poco discontinua - línea aquí. - Por lo que en realidad quiero quitarle eso. - Entonces vamos a volver al abrigo y seleccionaremos ese estilo, - que se llama Border Underscore. - Derecha es el nombre de esa clase, - y estableceremos el guión fronterizo justo para que ahora se establezca en cero para apagarlo. - De acuerdo, - Eso debería ser todo lo que necesitamos hacer. - Eso fue en realidad bastante cambiando del escritorio a la tableta. - No hubo muchos cambios. - Um, - pero cuando cambiamos a los 480 pixeles, - en realidad perdimos mucho espacio. - Entonces tuve que cambiar un montón de cosas diferentes aquí, - como puedes ver. - Entonces volvamos a entrar y lo intentaremos de nuevo. - Iremos a recargar cuadro. - Enfriar. - Entonces ahora sólo tenemos una columna. - Entonces ahora, -como marcas y archivo de zapatos-, y estas son las diferentes secciones del catálogo etcétera masculina femenina. - Estos tipos son todos ahora una columna. - Ah, - Yo muevo la navegación hacia abajo y noté que la navegación ya no está fija. - Entonces cuando nos desplazamos fuera de la pantalla, - no tenemos que preocuparnos de que la navegación esté encima de las cosas y ocupe espacio. - Es más área ahora para ver fotos y leer el texto. - Está bien, - así que se ve bastante bien. - Y se puede ver que movemos el logo, - luego a un costado aquí. - Y lo que también haremos es que vamos a cambiar el tamaño del impuesto sobre logotipos. - Déjame seguir adelante y volver aquí. - Y ahora que miro esto, - creo que se vería bien si pusiéramos a este tipo también. - Una m así y ahorra. - Y ahí vamos. - Entonces dije, - este tipo más pequeño. - Eso se ve un poco mejor ahí. - Está bien, - así que ahora tenemos un logotipo más pequeño, - un panel de logotipos más estrecho porque el texto es más pequeño. - Nos movimos una pequeña corona a un costado. - Hicimos el impuesto dentro del enlace más pequeño y tipo de hizo toda esta zona más delgada. - Por lo que tan pronto como veas el sitio. - Ya puedes empezar a ver algunas de las fotos y cosas aquí y puedes empezar a desplazarte - hacia abajo y echa un vistazo al contenido. - Está bien, - genial. - Y ahora la noticia de la compañía se está estirando al completo porque todas mis columnas ya no son - flotando. - Son cada uno está ahí, - cada 100% con y creando una estructura de columna única como esa y lo mismo con los tres - paneles en la parte inferior. - Ahora estos aires todo verticalmente en lugar de horizontalmente. - Está bien, - eso está bien. - Está bien. - Um, - lo último que hacer es echar un vistazo a la vista de retrato para que vayamos a rotar la pantalla. - Y se puede ver aquí que lo único que es realmente esto es algo así está bien. - Aún así, - el texto sigue siendo legible aquí como una sola columna. - Lo único que realmente es puede ser problemático. - Aquí está este texto aquí dentro de esta barra de navegación. - Podría hacer el texto más pequeño, - pero luego a la altura del brazo, - cuando estás sosteniendo esta cosa a la longitud del brazo, - sería texto sería un poco demasiado pequeño. - Y también cuando estas, - uh, - cuando estas cajas se vuelven tan pequeñas, - si eres si tienes un dedo grande, - tacón como yo, - es un poco duro dedo del pie haga clic en esos enlaces cuando se convierten en este diminuto y cerca juntos -. - Entonces centrémonos principalmente en este gallo aquí para el tamaño del retrato. - Entonces volveremos al código aquí y vamos a desplazarnos hacia abajo a Smartphone Portrait - y diremos en pantalla solo de medios y donde el máximo ingenio es de 320 píxeles así. - Y luego si entramos aquí, - Voy a hacer que el rapero un poco a ninguna parte. - Ahora, - era 90% y quiero un poco de espacio si necesito tener barras de desplazamiento o algo así - eso. - Entonces vamos a cambiar a este tipo a un ancho del 80% en lugar del 90% Afeitarse algo de espacio - ahí y vamos a seguir adelante y decir, - Sin barra. - Está bien. - Y para el NABF están aquí, - vamos a seguir adelante y cambiar el ancho de este tipo para ser 100% de la pantalla. - Ahí colocará el borde en el top 20 para eliminarlo, - y pondremos el borde en la parte inferior para que sea sólido de un píxel. - ¿Ves? - ¿Ves? - Nos vemos como ese compromistal. - Establezca esto en textos. - Un centro de línea. - Por lo que centrará el elemento de knave en su interior. - Y también cambiaremos el trasfondo de este tipo. - Vamos a poner a este tipo a fondo Blanco así, - ¿de acuerdo? - Y entonces el nunca bar en sí tiene un rapero dentro de ella. - Y quiero asegurarme de que eso realmente se expanda al 100%. - Entonces puedo cambiar esto diciendo ahora rapero de punto barred, - Voy a poner a este tipo para que tenga un ancho del 100% así y debilite estilo el palo adentro - de ello diciendo nab nuestro espacio ahora y vamos a poner a este tipo para que normalmente le quedara una frontera en -ella- y queremos poner eso está aquí. - Ya no queremos una frontera en el lado izquierdo de los knaves- y entonces podemos enfocarnos en los eslabones dentro de ahí. - Y estos tipos estaban exhibiendo en bloque de línea, - así que estaban uno al lado del otro. - ¿Qué necesita ser vertical ahora? - Entonces los voy a poner para mostrar bloque, - ¿de acuerdo? - Y también pondremos a estos chicos para tener un con del 100% sobre cualquiera de los anteriores con y vamos - cambiar el tamaño de fuente aquí para que sea un poco más grande, - porque cuando estás sosteniendo esto a la longitud del brazo, - um, - el texto podría ser un poco difícil de leer, - y el impuesto de navegación definitivamente debería ser lo suficientemente grande para leer para saber a dónde vas - en el sitio. - Entonces pondremos a este tipo Teoh. - Tendremos un guión fronterizo, - ¿verdad? - Pondremos eso a cero. - Queremos quitar el borde del lado derecho, -y lo cambiaremos en su lugar para ser bordeado de ceniza, - por lo que cada enlace tendrá un borde por encima de él. - Y pondremos eso a uno patea un poco de libra sólida C c c así. - Está bien, - vamos a guardar eso y ya veremos cómo se ve eso. - Y luego decidiremos si hay algo más que queramos cambiar. - Entonces volveré aquí. - Muy bien, - haga clic en el borde del marco y haga clic en recargar cuadro. - Enfriar. - Está bien, - los logotipos no alineados, - aunque. - Entonces tenemos que volver a entrar y arreglar eso. - Vuelve aquí y vamos a seguir adelante y seleccionar el logo aquí como beso. - Y yo soy como el texto de estado dash align center para que ese logotipo al centro, - al igual que todos los enlaces de navegación. - Cool va a ahorrar eso y vamos a recargar. - Encuadra aquí. - Marco lascivo. - Enfriar. - Por lo que ahora mi logo centrado. - Mi navegación. - Está centrado. - ¿Qué? - Me desplaza hacia abajo. - Desaparecieron. - Puedo ver todo eso. - Está bien, - eso es bastante guay. - Y vayamos a la página de venta. - Asegúrate de que estos tipos se vean bien. - Siempre es bueno probar todas tus diferentes páginas. - Asegúrate de que tus contenidos se visualicen correctamente. - Está bien. - Está bien, - aquí está el mapa de Google, - y aquí está nuestra forma, - ¿está bien? - Y todo eso se ve bastante bien. - De acuerdo, - Así que si voy aquí abajo, - Teoh la tabla de precios, - esto parece que aquí es problemático. - No todo esto cabrá. - Entonces si escribí el a la pantalla, - está algo bien aquí cuando es parece que es suficiente espacio aquí cuando está en - vista del paisaje, - 480 píxeles de ancho. - Pero cuando bajamos al iPhone horizontalmente, -parece que no hay suficiente espacio, - así que o bien tendría que hacer más pequeño el texto dentro de esta tabla u ocultar algunas de las columnas -. - Creo que si hago el texto y tu más pequeño aquí, - no va a ser muy visible desde la distancia. - Está bien, - así que digamos hipotéticamente que lo único que realmente nos preocupaba es como el - marca en el precio y en un dispositivo móvil. - Parte de esta información la podemos dejar ir. - Entonces lo que haré es realmente crear una clase específicamente para esto. - Um, - Voy a entrar aquí y vamos a crear una clase llamada Heitor así. - Y sigamos adelante y sumamos a este tipo para decir, - mostrar dos puntos ninguno. - Entonces cualquier cosa que aplicemos, - uh, - una clase de hidro a se va a configurar para mostrar ninguno siempre que esté por debajo de este - tamaño específico , - ¿de acuerdo? - Y también queremos seleccionar esos encabezamientos de mesa y divisiones de mesa, -todas esas casitas de la mesa- y queremos darles menos relleno. - Creo que antes tenían 10 pixeles de relleno. - Los vamos a acercar un poco más juntos. - Y también hagamos que el tamaño de la fuente sea un poco más pequeño. - Va a ir tamaño de fuente 0.9 m como ese va a seguir adelante y ahorrar, - y queremos tener que ir y luego vamos a tener que entrar en la página html punto de precios - y agregó clase en el cada uno de esos chicos. - Entonces ya me adelanté y hice esto por ti. - Pero se puede ver eso. - Decidí que quería que apareciera el precio de Brandon. - Pero entonces cuando bajamos a impuestos, -agregué una clase de Haider en impuesto- y aquí tenemos en stock. - Añadí clase de Haider para ocultarlo y bajo idea de orden, - agregué una clase de Haider. - Entonces cuando uh cuando esta página se carga en una pantalla más grande de más de 320 píxeles de ancho, - Um, - como cualquier otro tipo de tableta o escritorio o incluso un iPhone cuando es horizontal, - no hay especificaciones para la clase de Haider. - Entonces no va a hacer nada, - sin embargo, - basado en esta consulta de medios cuando está por debajo de un ancho de 3 20 pixeles, - entonces de repente la clase de Haider tiene algún estilo especificado a ella. - Entonces se va a poner para mostrar ninguno y esconder a esos tipos. - Demos a esto una prueba y veamos cómo funciona eso. - Así que bueno, - adelante y guarde esto aquí, - y voy a seguir adelante y volver al navegador y vamos a hacer una actualización aquí. - Eso es un marco de recarga. - Enfriar. - Entonces ahora esta mesa, - uh, - tiene sólo la marca en el precio, - que cabe. - Y hicimos el texto un poco más pequeño, - pero no demasiado pequeño. - Entonces eso todavía es legible ahí. - Está bien, - eso es todo. - Um, - para que lo sepas, - una última prueba. - Siempre paso por cada uno de los diferentes dispositivos para que puedas bajar y puedes decir, - Oh, - esto es como se ve mi sitio web esta pantalla de tamaño, - y así es como se ve en esta pantalla de tamaño. - Y así es como se ve en esta pantalla de tamaño. - Entonces aquí tienes lo horizontal, -lo vertical, - y es buena idea probar esto en todas las diferentes páginas. - Quieres revisar tus mapas y tus formularios y asegurarte de que todas estas cosas se airen - mostrando correctamente en todos los dispositivos de diferentes tamaños. - Entonces esto en realidad consume bastante tiempo. - Irás de ida y vuelta y modificarás pequeños cambios en tus consultas de medios. - Una última cosa que vamos a hacer es que vamos a armar uno en medios impresos. - Entonces si dices una pantalla de impresión de archivo en tu navegador, - podemos ir adelante y decir estrella para seleccionar todo, - y podemos ajustar el color de todo a negro. - Um, - ahora para anular, - ya sabes, - Star es en realidad ah, - selector bastante débil. - Es fácil tener más autoridad que empezar a anularlo. - Entonces lo que puedes hacer para estar en el lado seguro es que puedes usar un selector compuesto. - Se puede poner comas, - y podemos especificar Bueno, - quiero decir, - también cada uno h dos, - cada tres cada cuatro H cinco h seis. - Todos mis elementos de texto esencialmente todos los párrafos, - todos los enlaces. - Todo el otro texto que está dentro de secciones flotando libremente en Div. - Z o dentro de mesas tendrán todos el color negro. - Por lo que esto ahorrará el corte de tinta de tu impresora para que podamos ahorrar. - Y si volvemos aquí a Chrome, -por ejemplo- digamos que este es el sitio que quiero imprimir aquí. - Notarás que este enlace de mapa más grande aquí es azul debajo de mi Google. - Ahora, - ahora, - si voy a imprimir archivo cuando llegue la vista previa, - te darás cuenta de que ha cambiado eso a texto negro. - Entonces este tipo es todo blanco y negro ahora. - Excelente. - De acuerdo, - así que eso es todo por crear outs responsivamente. - Entonces a continuación vas a querer pasar al reto de código, - y vas a crear tus propios estilos de dispositivo que CSS y puedes crear tus propios - consultas de medios para cambiar ciertos aspectos de tu sitio en función del tamaño del dispositivo. 55. Agregar secuencia de PHP: - Hola. - Bienvenido de nuevo. - Este es el código final para la página web Z H W Shoes. - En este código, - Voy a estar completando el formulario de contacto y usando un poco de código PHP proporcionado que se va a - en realidad enviar la información en el formulario a su dirección de correo electrónico. - Entonces me gustaría mostrarles cómo agregué eso al sitio y también les enseño cómo pueden - actualizarlo para que funcione en su propio sitio. - Entonces primero, - Voy a sacar el sitio en sí solo para que veamos qué le he agregado. - Entonces esta es la página del formulario de contacto, - y todas estas entradas de primera forma aquí en la parte superior ya existían ahí, -como sabes- pero sí agregué en una entrada adicional aquí y también esta imagen de verificación aquí que es - generado para que puedas ver si refresco la página cada vez que refresco la página. - Este número cambia aquí así. - Bastante guay, - ¿eh? - Entonces estamos usando PHP para generar esta imagen. - Um, - y para poder ver cualquier archivo que tenga este código PHP en ellos, - lo que tenía que hacer fue tener que traer mi servidor de pruebas local. - En este caso, -entre Max me crié a Man Pierre, - Um, - y señora no sólo está en el servidor Apache en su computadora local. - También incluye PHP en mi secuela para que puedas usarlo para otras cosas también. - Y así hemos agregado esta entrada de verificación para que podamos asegurarnos de que no recibamos spam a - nuestro buzón de correo electrónico. - Serán seres humanos reales, - no aplicaciones web que están por ahí causando estragos, - enviando correos electrónicos que la gente todo tipo de correo basura. - Entonces queremos evitar ese correo basura. - Entonces vamos a asegurarnos de que la gente sea realmente seres humanos escribiendo este código que se genera aquí. - Entonces solo para mostrarte que esto funciona, - En realidad he subido esto a mi servidor y necesitarás realmente subir esto. - Puedes Básicamente, - puedes previsualizar los archivos e incluso puedes probar como la generación de imágenes aleatorias aquí - a través de tu servidor de pruebas local. - Pero necesitarás la capacidad de conectarte a un servidor de correo, - que estás hospedando. - Empresa estará proporcionando para que esto realmente envíe o envíe el correo electrónico, - por lo que tendrás que subir esto primero para que realmente funcione. - Entonces ya he subido esto y sólo lo probaremos. - Voy a escribir a nombre de Bob, - y luego vamos a seguir adelante y teclear su correo electrónico. - Lo que dirá, - ¿Está bob en bob dot com? - Sí me disculpo si en realidad es la dirección de correo electrónico de alguien. - Eso me lo acabo de hacer. - Lo siento, - Bob. - Ah, - y el teléfono es opcional, - así que no pondré ahí un número telefónico, - y dejaremos un mensaje. - Yo dire, - No te he visto en tanto tiempo así. - Uy. - Y entonces tenemos que verificar que somos humanos. - De acuerdo, - así que ahora mismo, - si pones este número incorrectamente así, - sólo te lleva a un mensaje de error muy básico que dice que el mensaje no se envía. - Por favor, regrese y rellene los campos requeridos. - Podríamos hacer esto más bonito. - A lo mejor es algo que voy a añadir es una actualización futura. - Normalmente, - si estuviera construyendo esto para un cliente, - usaría javascript para validar esto. - Y entonces imprimiría un mensaje. - Probablemente aquí, - um, - eso dice que no es correcto. - O tal vez en un contorno rojo alrededor de la forma y poner algo así, - que sería un poco más elegante. - Pero por ahora, - Sólo quería hacer que esto sea lo más simple posible y apegarse a solo html CSS y PHP. - Entonces tenemos ese verdadero mensaje genérico. - Pero básicamente podrías agregar el Ya sabes, - eso podría ser una mejora. - Puedes agregarla. - A lo mejor en una fecha posterior. - Volveré y mejoraré eso un poco- pero esto se adaptará a nuestras necesidades por ahora mismo. - Entonces, - si sí ponen, - uh, - la imagen de verificación correctamente, - Voy a poner los números correctos esta vez así. - Y luego si hacemos clic, - enviar cool, - nos lleva a esta página, - que es una página llamada Contacto Underscore éxito dot html. - Y creé esta página simplemente duplicando la página de contacto y luego obviamente quitando - la forma y simplemente poniendo en esta imagen de fondo de un pulgar pulgares arriba justo ahí. - Entonces si volvemos a saltar a mi correo electrónico, - en realidad podemos comprobar si eso ha aparecido, - y ahí se puede ver que en realidad ya existe ahí. - Entonces eso fue bastante rápido, - justo en el tiempo que me llevó hablar de ello o explicar que vamos a comprobar fue - en realidad tiempo suficiente para que el servidor de correo lo enviara a mi buzón de correo. - Por lo que realmente sólo debe tomar unos minutos para que aparezca, - dependiendo de tus proveedores de hosting. - Servidor de correo Cómo se respalda. - Podría tomar más tiempo. - Um, - En realidad nunca lo había visto tomar más que, - como 10 minutos para llegar. - Entonces si voy cabeza a dar click en este mensaje, - puedo mostrarte cómo se ve ahí. - Entonces me dice los mensajes de Bob en bob dot com, -y vemos aquí es el nombre de Bob y el correo electrónico de Bob-, y no puse nada por dentro para un número telefónico. - Pero si hubiera puesto ese número telefónico, - aparecería aquí. - Y entonces podemos ver el mensaje. - No te he visto en tanto tiempo, - así que puedes ver esa es mirada, - eso se ve bastante bien ahí. - De acuerdo, - para que los chicos trabajen, - eso es bastante impresionante. - Si la gente quiere volver al formulario, -si querían enviar otro mensaje- pueden volver a hacer clic en el enlace de contacto, - y volverán enseguida. - De acuerdo, - así que vamos a meternos en la tontería de cómo agregué esto aquí y cómo construí este tipo y -lo conseguí funcionar- y luego también mostrarte cómo puedes modificar el código para que funcione para tu dirección de correo electrónico- en lugar de la mía. - Entonces sigamos adelante y pasemos al código, - y lo primero que hice fue cuando estaba construyendo. - Esto es que agregué dos archivos adicionales. - Uno de ellos se llama mailer dot PHP, - y el otro se llama Verificación image dot PHP. - Para que se puedan ver los dos de aquí. - Aquí está Mailer y aquí está la imagen de verificación de imagen. - Si hacemos clic en eso, - Pongo un comentario en la parte superior aquí que dice, - No hay necesidad de tocar este código Así que realmente ni siquiera tienes que tocar imagen de verificación Si - solo lo incluyes con tus otros archivos del sitio, - tú podrá vincularse a ella y hacer que haga lo suyo. - Entonces todo esto es código PHP, - y no vamos a discutir PHP en estas clases clases estrictamente HTML y CSS. - Por lo que no hace falta entrar realmente en gran detalle sobre esto. - Pero lo que está haciendo es que está generando un número aleatorio Um, - y también está poniendo eso en. - También está generando píxeles aleatorios en una cuadrícula. - Y entonces está convirtiendo eso en una imagen. - En realidad construye un archivo de imagen a partir de eso, - lo cual es bastante increíble. - Y hay unas 29 líneas de código. - Por lo que PHP es capaz de generar una imagen aleatoria de números y puntos así. - Um, - sólo en 29 líneas de código, - lo cual no está tan mal. - Está bien, - Y entonces el otro archivo que creé aquí se llama mailer dot PHP. - Um, - y la forma en que funciona esto es de nuevo, - Puse un comentario en línea. - 14. - No hay necesidad de tocar el código debajo de esta línea, - por lo que realmente no tienes que meterte con ninguno del código debajo de la línea 14. - De hecho, - probablemente no quieras meterte con ello, - Um, - pero en realidad, - lo que está pasando aquí es básicamente tomar la entrada que se publicó al hacer clic - el botón de enviar en el forma, -y está tomando esa información- y la está enviando en un varón. - En realidad es enviarlo por correo, - usando el servidor de correo de su host a la dirección de correo electrónico en particular que especifique. - Entonces ahí es donde especificas a qué dirección de correo electrónico querías realmente enviar, - um solo para, - ya sabes, - crear un marcador de posición. - Te escribí en tu sitio dot com, - y obviamente tendrás que entrar aquí y cambiar eso. - Um, - no uses mi dirección de correo electrónico. - No quiero conseguir un montón de correos electrónicos de todos ustedes. - Me pondría triste si me pasaran cientos de correos electrónicos de prueba. - Entonces por eso cambio a este tipo por ti en tu sitio dot com. - Y eso está en línea. - Nueve para el envío a variable. - De acuerdo, - La otra cosa que podría querer establecer es la variable de sujeto, - que está en línea 12 año. - Um, - en este conjunto de cotizaciones aquí- quizá quieras cambiar esto para decir lo que sea tu sitio. - Entonces por este lado, - Puse zapatos CHW, - envío de formulario de contacto, - y esto es lo que aparecerá como el asunto para el correo electrónico que se envía. - Y eso es realmente todo lo que realmente necesitas poner. - Esta es la dirección de correo electrónico a la que va y el asunto del correo electrónico. - Cuando escribes esto, - quieres conservar esas pequeñas marcas de cotización. - Um, - ahí quieres escribir entre estas comillas, - la pequeña cita amarilla, - las comillas simples que ves aquí a la izquierda y a la derecha, - Esas son completamente esenciales para que funcione. - Por lo que se romperá si se quitan esos. - Entonces otra vez para el tema, - quieres escribir sobre Lee aquí entre esas comillas, - y entonces volverás a guardar el archivo y deberías estar bien para ir. - Entonces, - aparte de agregar el mailer y el punto de imagen de verificación PHP, - También cambié la extensión del archivo en la página de contacto. - Previamente, - esto se llamaba contact dot html y tuve que cambiar esto para contactar con dot PHP porque estoy - en realidad eligiendo usar un pequeño fragmento de PHP aquí para obtener la verificación - image toe work. - Entonces te puedo mostrar ese código si nos desplazamos hacia abajo al formulario aquí y creo que voy a poner esto - chico dos palabras envuelve que podemos ver todo el código que tener que desplazarse sobre estéreo. - De acuerdo, - así que todos estos insumos estaban ahí antes de que este tipo de aquí sea nuevo. - Se llama. - Es un tipo de entrada de texto con el nombre de verificado y en el marcadores de posición. - Acabo de poner verificar tu humano. - Um, - También le he agregado una clase de caja de verificación a esto, - y lo hice estilo un poco. - Yo le di un ancho. - Si quieres comprobar eso, - puedes saltar a la página CSS de punto de estilo aquí y puedes encontrar eso, - um, - que está justo aquí. - Ahí estamos, - en línea 1 19 Se llama input dot verificar cajas. - La clase que agregué, - Um y yo dije, - este tipo para exhibir en bloque de línea para que pueda estar al lado de esa entrada de forma. - Um, - y le doy un ancho del 80% para hacer espacio a la imagen de verificación real sobre el - lateral y luego la imagen de verificación misma. - Yo sí agregué un poquito de código para aquí. - Yo le di un ancho y alto y se lo dije a una línea al fondo. - De acuerdo, - eso es realmente sobre eso, - por el estilo. - Y entonces la única otra cosa es esta etiqueta de imagen aquí para el para la imagen de verificación - en sí. - Um, - y lo que estamos haciendo aquí es, - en lugar de enlazar a un archivo de imagen típico como mi imagen que J peg o qué te tiene Qué - estamos haciendo es realmente estamos vinculando al archivo PHP de punto de imagen de verificación aquí, - y también estamos enviando un generando un número aleatorio para ello, - um, - y eso le permitirá hacer lo suyo y generar un número para usted. - Está bien, - así que esas fueron las únicas dos cosas que agregué al formulario fue la caja de entrada en la verificación - imagen. - Y eso es usar este archivo aquí verificación imagen punto PHP. - Está bien. - Y luego adicionalmente, - también cambiamos la acción aquí de la forma. - Recuerda, - antes de la, - um, - acción de forma, - creo que era un marcador de posición, - creo que acabo de poner como un símbolo de libra aquí anteriormente y ahora he cambiado esto a - en realidad apuntar hacia el archivo PHP punto mailer. - Entonces de esa manera, - después de que el usuario haya escrito a su nombre su correo electrónico en su número de teléfono y un mensaje- y un escrito en la imagen de verificación, - van a hacer clic en el botón enviar del formulario, - que está aquí abajo. - Y cuando hagan clic en el botón Enviar, - va a utilizar esta acción para saber a dónde enviar la información que han escrito. - Entonces han escrito en su nombre, - su correo electrónico, - su teléfono en su mensaje y la imagen de verificación Y todo eso se está enviando a esto - file mailer dot PHP, - que está justo aquí. - Y este es, - por supuesto, - el archivo que acabamos de discutir justo donde se pone en la dirección de correo electrónico para enviar esto- a y al asunto. - Y reunirá toda esa información y la presentará. - Dice, - si el ah si verifica que, - um, - esa imagen de verificación verifica ahí, - la va a enviar por correo y luego se va Teoh, - cambiar la ubicación, - enviar el usuario al éxito de contacto que la página html. - De acuerdo, - de lo contrario, - si no verifica va a mandar ese mensaje de error que te mostré antes. - Está bien, - está bien, - así que eso es bastante guay. - Um, - entonces este tipo está trabajando, - y eso es todo lo que tienes que hacer es si quieres implementar esto en tu sitio, - necesitarás hacer los cambios que acabo de mencionar aquí. - Tendrás que añadir el código de imagen del cuadro de verificación de aquí para aquí. - Um, - desde la entrada, - verificar todo el camino hasta el final de la imagen de verificación. - Tienes que cambiar la acción 2.2 mailer. - Y por supuesto, - tendrás que incluir la imagen de verificación dot PHP y el script PHP mailer dot en - para que funcione, - Um, - y entonces querrías crear tu propia página de éxito de contacto. - Esencialmente, - Um, - vamos a ver algunas cosas a supongo algunas otras cosas por mencionar que es importante es que lo hice - cambiar el nombre de esta página para contactar a ese PHP, - como mencioné anteriormente. - Um, - y de nuevo, - eso fue porque sí usé un poco de script PHP aquí dentro de la página. - Y necesito usar esta extensión de archivo para ello con el fin de que este script toe trabaje aquí. - Um, - Así que cuando cambié el nombre, - tuve que ir a la, - uh, - navegación para todas las páginas y actualizar eso porque recuerdas, - um, - en línea 50. - Aquí tenemos los enlaces para navegar entre todas las páginas. - Y aquí está el enlace de contacto. - Y antes de esto solía decir, - punto de contacto html en todas las páginas. - Y como cambié la extensión del archivo, - tuve que volver por cada página y cambiarla para contactar con dot PHP. - Pero eso es todo lo que tienes que hacer. - Y entonces deberías tener esta bonita caja de verificación y poder enviar un correo electrónico- y en realidad hacer que ese tipo aparezca en tu in box aquí. - Entonces eso es bastante guay. - Um, - eso es todo. - Espero que se hayan divertido construyendo este proyecto. - Cuídate. - Dios bendiga. 56. Resets, sistemas de cuadrícula y plantillas: - Doy la bienvenida de nuevo. - Se trata de diapositivas 4.2 sistemas de cuadrícula y plantillas Vamos a discutir los reinicios de CSS y - normalizar scripts también van a hablar de plantillas de sistemas de cuadrícula CSS y HTML five - frameworks. - En primer lugar, - hablemos de un restablecimiento de CSS. - Así que muchas veces, - cuando estás construyendo tus propios sitios web, - vas a querer salir y descargar un restablecimiento de CSS. - En realidad hemos estado usando uno que te he dado, - o mejor dicho, - una versión de un reset llamado Normalizado, - que discutirá un poco más sobre en un momento pero esencialmente un restablecimiento de CSS. - Lo que hace es que va a eliminar todo el estilo de navegador predeterminado eso que puedas tener - notado antes de aprender CSS en el primer módulo, - ustedes chicos estaban usando sólo HTML para escribir contenido. - Por alguna razón, - todo ese contenido ya tenía un estilo inherente, - y eso se debe a que cada navegador estaba determinando cuál debía ser el estilo de ese texto, - qué tan grande debería ser, - de qué color era en qué cara de fuente que estaba usando. - Ahora son diferencias sutiles de navegador a navegador y un restablecimiento de CSS es una forma en la que podemos - obtener estilos consistentes en todos los navegadores eliminando primero todo el estilo del navegador- . - Y luego puedes volver a entrar y añadir tu propio estilo CSS. - Entonces cada vez que usamos un reset, - lo que vamos a hacer es ir primero al enlace al archivo de restablecimiento CSS, - y luego vamos a enlazar a nuestra propia hoja de estilos personalizada con el fin de volver a agregar estilo a - nuestro sitio web. - Estos son algunos ejemplos de algunos reinicios populares de CSS. - Entonces si vas a un motor de búsqueda en línea y buscas alguno de estos títulos, - entonces podrás encontrar el código que puedes seguir adelante y descargar y usar para tu - CSS reset. - Eso Myers es, - ah, - restablecimiento común. - Se llama Myers Reset. - Otra a la que la gente usa se llama a que pueda. - También hay uno que se llama Por qué tú yo y hay otro. - Te voy a mostrar que algunas personas llaman reinicio del pobre hombre-que puedes escribir rápidamente tú mismo para restablecer los estilos en tu navegador. - Este es un ejemplo del restablecimiento del pobre hombre, -que sólo puedes escribir en la parte superior de tu hoja de estilo si lo eliges, - Así que esto sería una alternativa a en lugar de descargar estos otros restablecimientos como Myers a - can and ¿por qué tú? - Por qué, - um, - podrías escribir el tuyo bastante rápido usando este código aquí. - Lo que esto hace es básicamente seleccionar todo en la página HTML, - y luego quita todo el relleno y todo el margen de cada elemento. - Entonces no hay espacios entre ninguno de los elementos en una de las razones por las que haces esto es, -por ejemplo- en Firefox. - El espaciado entre párrafos podría ser ligeramente diferente al espaciado en safari o -algo así. - Por lo que la solución de restablecimiento es eliminar todo el estilo en este caso, - todo el espaciado. - Y luego puedes volver a entrar en tu propia hoja de estilo en tu propia hoja de estilo personalizada, - y puedes agregar, - ya sabes, - una línea de código que diga, - Bueno, - quiero que todos los párrafos tengan 10 píxeles y margen debajo de ellos o algo así. - También establecemos todos los tamaños de fuente aquí en Hmm body al predeterminado regular 100% y esto - en realidad toma las todas las imágenes que tienen enlaces que los rodean y elimina un borde - A veces cuando añades un enlace a una imagen, - lo hará conseguir una cajita azul alrededor de ella. - Um, - y cuando sea un enlace visitado, - se pondrá como un borde morado a su alrededor. - Y esto evitará que quitando la frontera de todas las imágenes que aire- rodeados por las etiquetas A ahí. - Entonces esto es como un pequeño reset muy simple thes otros restablece Myers a puede y por qué voy -en realidad ser muchas, - muchas más líneas de código algunas de estas o incluso cientos de líneas de código. - Entonces son un poco más sofisticados y del hombre pobre, - así que en realidad recomendaría, - ya sabes, - lo más probable es que lo mejor simplemente se vaya. - No había descargado uno de estos en lugar de usar un reinicio tradicional para nuestro proyecto de sitio, - el sitio de CHW shoes que hemos estado construyendo. - Lo que utilizamos fue un archivo normalizado en CSS, - y se puede ver aquí es el enlace donde se puede ir y agarrar el código para el archivo punto normalizado - CSS. - Por lo que normaliza similar para restablecerlo, - cept que vuelve a entrar y agrega algo de estilo para que empieces tan como, - mientras que cuando usas algunos de estos otros restablecimientos como los Myers to can. - ¿Por qué, - por qué, - Lo que pasa son todos los encabezados, - por ejemplo, - parecen ser del mismo tamaño, - por lo que la normal I script le quita estilo. - Pero luego vuelve en estilo de anuncios para que aparezca igual en todos los diferentes - navegadores. - A continuación, - hablemos de sistemas de cuadrícula CSS. - Por lo que una especie de construimos nuestro propio sistema de rejilla a nuestro estilo. - Dot página CSS creando esas clases de columna una columna izquierda, - una columna media, - una derecha y las habíamos estado flotando en diferentes direcciones y estableciendo varios ingenio - ellos. - Entonces creamos clases llamadas Call One o C O L. - Una para cosas que sólo iban a cubrir una columna en nuestra configuración de tres columnas. - Y también creamos otra clase llamada Call to C O L dos para representar elementos que tenían un -más ancho con eso abarcaba dos columnas en nuestra estructura de tres columnas- e incluso teníamos una llamada Call tres que abarcaba todo el camino a través del rapero todo -de las columnas, - por lo que tipo de construimos nuestro propio sistema de cuadrícula simplificado. - Resulta que en realidad se puede ir en línea y descargar código CSS preconstruido que ya tiene un - mucho de ese código de posicionamiento escrito en estos aires llamados sistemas CSS Grid. - Este es en realidad un diagrama de uno popular llamado el Sistema de Cuadrícula 9 60. - Y este es un diagrama para mostrarte cómo funciona. - Por lo que este sistema de rejilla tiene muchas más posibilidades que el que creamos. - Um, - porque recuerdas, - el sistema de cuadrícula que creamos sólo era como mucho un sistema de cuadrícula de tres columnas y este, - que en realidad es de 9 60 Grid System. - Este tiene un total de 12 posibilidades de columna. - Estos son algunos ejemplos de algunos sistemas de cuadrícula CSS populares. - Entonces de nuevo, - si vas a tu motor de búsqueda y escribes alguno de estos títulos, - se te acercará un sitio donde podrás seguir adelante y descargar los archivos CSS de código abierto gratuito de código abierto que puedes usar para empezar a construir su proyecto de sitio web. - Entonces hay 9 60 Blueprint es otro popular sistema de grid sense CSS semántica grilla, - y también hay un framework completo llamado bootstrap, - que tiene incluido un sistema de cuadrícula propio. - Esto en realidad es mostrar tipo de cómo su contenido puede caber encima de esa cuadrícula. - Entonces tomando eso ese último grado que estamos viendo y si tipo de columnas rosas superpuestas -encima de ella, - entonces se puede ver que, - por ejemplo- el área de publicidad aquí está abarcando 12345 columnas. - Ah, - y se puede ver que la barra lateral de aquí sólo abarca dos columnas. - Entonces dependiendo del nombre de clase que utilices para el sistema de cuadrícula específico, - va a hacer de tus elementos un ancho diferente y también les dará diferentes flotador- comandos para que puedan posicionarse uno al lado del otro. - Ahora, -sea cual sea el buen sistema que elijas descargar, - vas a querer asegurarte de leer la documentación de ese sistema de cuadrícula en particular- porque todos tienen nombres de clase diferentes, - y todos esperan que los uses un poco diferente. - Hablemos también de HTML cinco frameworks, - por lo que Hee lo fi boilerplate es un ejemplo de una biblioteca de plantillas que puedes descargar. - Esencialmente, - te pone en marcha. - Ya cuenta con la mayor parte de la estructura de documentos creada. - Viene con archivos HTML, - archivos CSS e incluso algunos archivos JavaScript que ya tienen correcciones en su lugar para hacer que tu - sitio web funcione en todos los diferentes navegadores, - so hee mollify boilerplate. - Da soporte para HTML cinco elementos incluso en tus navegadores más antiguos y en todos los dispositivos. - Y también hay una versión móvil de este framework conocida como HTML five boilerplate mobile. - Entonces estos fueron los enlaces que puedes seguir adelante y echa un vistazo a eso. - Um, - para que pudieras descargar este código y lo puedas arrojar en texto sublime, - y realmente sólo tienes que entrar y empezar a añadir tu contenido. - Todas las estructuras de documentos ya configuradas y ya se vincula a archivos CSS y - JavaScript que puedes usar Twitter. - Bootstrap es otro marco popular, - y Twitter bootstrap también incluye. - Aparte de HTML y CSS, - también incluye muchos enchufes J coury para que puedas crear cosas como galerías de imágenes, - menús deslizantes y cosas por el estilo sin tener que salir y escribir el javascript personalizado - tú mismo y simplemente pudiendo cargar los enchufes que te proporcionan. - Yo quiero animarlos chicos a seguir aprendiendo y seguir escribiendo código todos los días.