Ahora cambiemos el color del texto de la H-1 y la edad de 3
en este momento es que el color de arranque predeterminado oscuro entrará aquí y podríamos hacer H-1 color blanco y H-3 color blanco y refrescar.
Y recibimos texto blanco así como así.
Pero también podemos hacer una combinación de estos dos porque son idénticos y tienen H-1 coma H-3 y eso
hará que ambos sean blancos.
Cada vez que tenemos una coma, simplemente selecciona diferentes grupos.
Entonces todos los gemelos tienen tres años y se ven exactamente iguales.
Pero incluso podemos simplificar esto más y solo asignar todo en el cuerpo para que sea de color blanco.
Y podría pensar que podría haber un problema que podría cambiar o que el botón podría cambiar o una barra de navegación, pero
recuerde que esos son más específicos.
Tenemos clases de Bootstrap que están haciendo eso frente a estos son simplemente H-1 y H-3 que no tienen
ninguna clase o ID y son más fáciles de anular con sus propios estilos al establecer el
color del cuerpo en blanco el H1 y los tres años heredaron ese color y todo lo demás también lo hizo.
Simplemente fue anulado.
Entonces, si inspeccionamos, digamos este botón y echamos un vistazo.
Cuando lo seleccionamos y ve que el color está configurado en este color es 3 3 3 por la clase Botón predeterminado.
Pero si seguimos desplazándonos hacia abajo verás que el cuerpo aquí establece el color en blanco
y resulta que está tachado.
Todo bien.
Entonces, una vez más, dijo que ambos eran blancos.
Ahora trabajemos en el tamaño de la fuente.
Entonces son H-1.
Queremos que se pliegue, lo que no es actualmente.
un peso de fuente de 700, que es la forma en que usamos la actualización en negrita .
Entonces, debe ser audaz y quiero que sea de 5 cm, que es cinco veces
más grande que el elemento principal, así que seleccionaremos cada uno y le daremos
Puedes verlo en negrita.
Ahora hagámoslo mucho más grande para el tamaño de fuente 5 E-M.
Ahora regresa y ahí vamos.
Así que eso es mirar más de cerca.
Ahora, esta relación entre el H1 y el H-3 se ve exactamente igual.
No es necesario que hagamos nada al H-3 para que la imagen se comporte como queremos.
Y para hacer eso, voy a mostrarte algo que no hemos visto antes.
Voy a mover el lado oscuro al lado derecho y si inspecciono el elemento envejecido o el cuerpo verán
que ambos se detienen antes del final de la página.
Entonces aquí.
Ese es el final de la edad de mi documento.
Así que cuando le digo a mi imagen que cubra el cuerpo y le digo que es el tamaño de fondo para cubrir y
la posición de fondo para ser centro, toma en cuenta el tamaño del cuerpo y cuando el cuerpo termina aquí se comporta de
manera diferente.
Lo que haremos para solucionarlo es darle al elemento HTL una altura del 100 por ciento, lo que significa que debe
ocupar el 100 por ciento del contenedor, que es solo la ventana completa del documento.
Altura masculina 100 por ciento y volveremos.
Hagamos que sea pantalla completa ahora y refresque.
Y nuestra imagen funciona de la manera en que lo esperamos y me encojo.
Y eso también se ve bien para mí.
Ahora tenemos dos cosas principales para enfocarnos.
El primero es el H. R. Es demasiado amplio para nosotros, se supone que es mucho más pequeño.
Y luego también quiero centrarme en la fuente aquí.
Bueno, comienza a elegir la obra de arte y todo lo que queremos hacer es darle una de 400 píxeles.
Entonces, en nuestro C Ss, seleccionaremos h en la parte inferior con 400 píxeles.
Aquí vamos.
Otra cosa que haré es
un poco furtiva que quizás no hayas notado ya que voy a entrar aquí y le doy un Forder en la parte superior.
Un pixel sólido
Entonces tienen un color aquí que es f 8 8 8.
Y luego un borde inferior que es un píxel sólido y este será un color transparente.
Cero cero cero punto cero dos.
Entonces esto no le dará el efecto de una sombra.
Entonces presta atención.
Es realmente difícil de ver.
Ni siquiera sé si voy a
retomar el elenco de la pantalla, pero lo que tenemos es un borde y luego, justo debajo del borde,
una línea gris clara que hace que parezca que hay una pequeña sombra que se muestra un poco mejor sobre el colores más claros.
DE ACUERDO.
Entonces
no puedes ver eso lo suficiente si confías en mí o puedes deshacerte de la imagen de fondo y será más fácil verla allí también.
Luego, centrémonos en los iconos que utilicé, divertidos y divertidos.
Así que lo tengo abierto.
Divertido.
Increíble.
Lo sé.
Y también tendremos el CD aquí.
Si hace clic en comenzar, hay un CDN que puede copiar allí.
Ponlo en nuestra aplicación y también
hazlo arriba guarda y luego echaremos un vistazo a los iconos reales.
Y el primero que sabemos que usamos es un PA.
Y para hacerlo, todo lo que necesitamos es un ECO de clase alta F A F A dash PA.
Así que lo puse dentro del botón.
Entonces, si vamos al botón justo antes de comenzar, lo agregué.
Ahora, si volvemos y actualizamos, puede ver si tenemos un pequeño botón allí y tenemos
una huella de la mano. Aquí tenemos dos iconos para registrarse e iniciar sesión.
Y esos dos recuerdo lo que son.
Voy a hacer eso aquí al lado para suscribirme después de que escribamos que desea agregar otro ícono.
Excepto que esta clase de tiempo no es F-8 PA sino F. A. dash user dash Plus que nos da ese ícono con el signo más e inicia sesión
es lo mismo sin el más.
Entonces, un usuario de tablero y tenemos esos dos iconos.
Hay otra cosa que hice que puede que no hayas notado cuál es la sombra de texto.
Entonces, hay una sombra alrededor de todo el texto aquí y verlo allí puede verlo aquí.
Está alrededor de la H-1 y la H-3 y la sombra tecnológica es algo que podemos establecer con la sombra del tablero de texto SS.
Y hay un montón de piezas para eso.
Así que pueden ver aquí que estamos sentados en el desplazamiento X el desplazamiento y.
Entonces, qué tan lejos de las palabras debe ir la sombra.
Luego, también estamos configurando el radio de esas faltas de definición, así que, básicamente, qué tan grueso debería ser.
Y luego el color y la sombra que estoy usando es un poco complicado.
Hay muchas piezas, así que voy a escribirlas una a una en el archivo CSSA.
Por lo tanto, dentro del contenido div se agregará la sombra del tablero de texto y luego la primera hará.
Cero píxeles 4 píxeles 3 píxeles y haré que sea realmente
obvio comenzar a hacerlo rojo y si actualizo la sombra que estamos agregando primero.
Ahora vaya y agregue el segundo con
una coma y sangría un poco y luego queremos 0 píxeles, 8 píxeles y 13 píxeles y luego en naranja aquí y echemos un vistazo a ese.
naranja brillante y luego hay una tercera sombra que es 0 píxeles que recuerda que este primer
número es el desplazamiento X y luego el desplazamiento y 18 píxeles y luego 23 píxeles es
el radio y lo haremos haz que este sea amarillo y podemos ver que tenemos la sombra del título rojo brillante.
Puedes ver que tenemos esta más borrosa debajo de su
Y luego el naranja que está un poco más lejos.
Y luego el amarillo que es mucho más borroso y mucho más ancho.
Entonces queremos cambiar esos colores.
No queremos trabajar con eso.
Entonces los colores son un poco menos emocionantes.
El primero.
Cero cero cero cero 0. 4.
El siguiente muy similar en lugar de 0. 4 0. 1.
Y luego uno más que también es 0. 1.
Entonces usando R. GRAMO. B-A solo estamos configurando diferentes tonos de gris.
Y ahí vamos.
Mucho menos emocionante pero espero que todavía puedas verlo aquí.
Es mucho más sutil pero solo agrega un poco de profundidad a la página.
Estupendo.
Entonces eso es todo lo que tenemos que hacer.
Déjame volver y solo envolver algunas cosas.
El gran punto que quiero hacer aquí es
que podemos usar el arranque y confiar en él, pero no confiamos en todos sus estilos.
Así que sí, mantuvimos la barra de navegación
igual, aunque en el último video te mostré cómo podrías cambiar el color de la barra de navegación, pero cambiamos las fuentes en las que agregamos imágenes de fondo.
Así que realmente solo usamos bootstrap como la base subyacente y
luego agregamos todos los estilos en la parte superior y no tomó mucho.
Pero creo que hicimos algo que parece relativamente respetable con solo unas pocas líneas de código.
Y seamos honestos, la mitad de todo lo gordo de este texto Shadowline justo allí.
Increíble.
Así que hicimos que el sitio se vea relativamente bueno.
Hemos terminado con bootstrap por ahora.
Luego pasamos a Javascript en la próxima unidad, lo cual es realmente emocionante.
Nos alejaremos de la creación de sitios y de cosas
que se vean bien por un tiempo para que podamos centrarnos exclusivamente en Javascript.
cosas que no solo se vean bien.
Pero luego reuniremos todo de nuevo y haremos algunos sitios hermosos que realmente hagan
Así que eso está por venir. Espero que disfrutes con el arranque. Disfruté esta unidad.
Y como siempre, le recomiendo que descargue el código si tiene alguna pregunta.
Está en la descripción de este video.
Está bien, veré la próxima unidad