Vamos a escribir el CSS para el nombre de la camiseta y el precio.
Si vemos el HTML del que aquí tenemos la lista no ordenada con productos lo le leí y luego un párrafo
con el nombre de la camisa y una Span con el precio nuestros electores van a ser un poco más complejos
a poner el Elai y luego un párrafo y en este caso le leí el párrafo y luego le Span usualmente se recomienda
que tus electores no pasen de tres niveles.
En este caso son cuatro.
Es una recomendación no es que sea obligatorio siempre digo que no es como que alguien vaya a tu casa
y te vaya a decir que por qué pusiste cuatro selectores.
No hay ningún problema solamente se recomienda que no sean como muy largos los electores.
En ese caso te convendría más por ejemplo ponerle aquí Clas precio y solamente ponerla aquí por ejemplo
están a punto precio cualquiera de las dos formas está bien no es así como que sea una obligación cumplir
esas reglas totalmente cualquiera las dos formas está bien sea copiar aquí esta clase en ambos España
o en todos los Span y pegamos aquí entonces tenemos el span precio y finalmente tenemos estos enlaces
que dicen botaban entonces también voy a poner aquí punto bottom son los electores que nos hace falta
por escribir primero el nombre de la camisa puedes ver que nos hace falta que sea más grande y también
nos osaría no hace falta que sea como en negritas primero vamos a lo más grande bonsais digamos 28 píxeles
frente un poco más grande que la que tenemos por default y un fondo Huay Bogg para que sea en negrita
sobre el proyecto y puedes ver que se ve de esta forma.
Bullies y 25 por ciento por default podés ver que queda como muy separado aquí por default los párrafos
siempre tienen margen puedes inspeccionar aquí el código.
Este párrafo puede ser que aquí se pone como una franja anaranjada bastante grande.
Si hace un poco de scroll la quita aparece márgen Block Start y margin Block entre reescribirlo y ponerla
aquí como un margen digamos 10 pixeles arriba cero las demás direcciones y eso va a ser como que la
separación sea menor siempre que veas así como que como que un elemento se ve extraño como que le agregó
más margen o el margen tú no se lo pusiste pero esta es muy probable que el navegador se lo haya agregado
aquí en esta parte creo que hay mucha separación tal vez este margen top debería de ser de unos 30 30
tal vez menos incluso esta lista de productos creo que tienen mucha separación un poco de scroll hacia
arriba se removerse no creo que se vea mejor porque tenía mucha separación creo que se ve mucho mejor
ya quitándoselo a ver que nos hace falta el precio por lo tanto es Croods de nueva cuenta y aquí podemos
ponerle los estilos al precio nada más es el color de otra forma y la fuente un poco más grande color
FFS cero cero color que DJI y puedes ver que aparece en color amarillo y nos hace falta que sea más
grande.
Por lo tanto un iPhone 6 el otro era de 28 entonces uno de unos 40 píxeles para que sea mucho más grande.
Entonces se ve bastante bien.
Lo único que nos falta es la parte del botón siempre darle estilos a un botón no es complicado pero
toma muchos atributos muchos selectores propiedades y valores etcétera.
Primero vamos a empezar con un bacana un color vamos a aplicar el mismo color amarillo que aplicamos
en el precio que de esta forma en este caso puede ser que el botón es mucho más grande y voy a mover
a la izquierda y lo voy a hacer un poco más a la derecha para que puedas ver lo que viene siendo el
botón y cómo queremos que quede o como debe ir quedando primero el botón debe ser más grande un Padín
diez píxeles arriba allá abajo 40 en ambos lados eso lo va a hacer un poco más grande pero puede ser
que queda como muy pegado hacia arriba si encima lo que viene siendo el nombre y la camisa.
El precio de la camiseta ya supera el margen top y las 10 píxeles puede ser que lo de guardar y no pasa
nada.
Eso pasa porque todos los enlaces todos estos enlaces tienen un display inline y si recuerdas el display
online no le puedes poner un ancho ni tampoco un margen.
La forma más fácil cambiarlo a Display y en este caso va a ser en la block si guardas cambios puede
ser que ya se aplica lo que viene siendo el y hacia arriba si vemos un poco el diseño puedes ver que
el color es diferente tiene color morado está en mayúsculas está en negritas no tiene el interlineado
entonces primero vamos a empezar con hacerlo mayúsculas Tex Transform o percas removiendo la línea correction
Nong haciendo el texto de negritas con fondo weight bold y por ejemplo voy a abrir nuevamente viéndolo
bien no sé si el color esté bien pero creo que no hay que poner color porque creo que le está aplicando
el color que es por default cuando visitas un link que es también morado pero no el mismo morado entonces
cuando guardas cambios puedes ver que sí es un poco diferente pero ya se ve bastante bien y queda centrado
porque ya lo habíamos aplicado en texanas encender a lo que era el Eloy y eso también lo centrã se ve
bastante bien la verdad me gusta mucho como está quedando y por ejemplo voy a hacer esto de nueva cuenta
pequeño que cuando dejó ver esta parte cambia un poco la intensidad con una pequeña transición pues
vamos a copiar este de aquí tenemos botón 2 puntos Jabber y un background color de M ven C 0 cero color
amarillo pero también un poco más intenso puede ser que cuando le doy a ver aparece como muy rápido
poner en transición y solamente poner de transición a un color .3 segundos de nueva cuenta cualquiera
de estos está bien casi todas se ven igual.
No va a haber mucha diferencia porque son solamente tres segundos se ve bastante bien.
Quiero mostrarte algo un detalle adicional si recuerdas en el capítulo anterior vimos que los floods
el contenido que está después del float o cuando utilizas un float se mueven un poco y vimos que tenías
que limpiar lo que era el float.
Otro detalle importante de los robots es que si lo haces muy pequeño aparecen detalles como éste puedes
ver que en el caso de esta camiseta de Nott J Ese es un poco más alta que la otra por lo tanto este
HTML como que detecta que más o menos me diría hasta aquí y no se acomoda debajo solamente como que
choca y deja este espacio aquí limpio hay formas de limpiarlo uno es bueno no utilizar floods pero yo
agregué estos proyectos con float porque es importante que conozcas las técnicas anteriores y las técnicas
nuevas y las técnicas actuales entonces floods aún se utiliza muchas veces algún empleador te va a decir
requerimos que el proyecto se vea bien en todos los navegadores montados pero sí en su gran mayoría
incluyendo Internet Explorer y la forma más que es soportada en Internet Explorer son los floods.
Puedes ver que aparece de esta forma como cortado aquí esto lo vas a solucionar.
Voy a copiar este Lehi con algo que se llama Clear pero está complicado no se qué le pones Clear Boot
eso es aplicarle el en todos los elementos que hace creer es que si por ejemplo le pones un cuervo a
la ley va a limpiar a esta zona va decir no permito que ningún otro elemento se ponga al lado de mi
solo deben de estar abajo pero esto no es lo que queremos porque puede ser que incluso en la parte grande
que debería de verse 3 se ve nada más +1 cuando estás en pequeño quieres que se vea cada dos o que se
aplique cada dos y para ello vamos a utilizar el Lehi dos puntos NTA Chichilo y aquí vamos a utilizar
una fórmula media extraña que es dos n+1 Xinwei guardar cambios.
Pues que lo arregla incluso el de abajo que aplica correctamente el click bot éste que era más grande
ya no tiene ese problema qué hace este 2 n+1 2π +1 significa dos veces por cero +1 pero con el detalle
que este valor va a ir aumentando en cada iteración si revisamos bien el proyecto puedes ver que dos
por cero va a ser cero +1 entonces al primer elemento le aplicará un bought sólo un poco más grande
para que sea más fácil de ver si aquí le pones por ejemplo un Mac a un color y le pones Red y guardas
cambios el que le va a aplicar el click en esta parte se aplica de cãlera que al inicio aplica al creer
que al inicio aplica el click aquí el inicio aquí le inicio y hace que se vean de dos en dos.
Ahora si quisieras que se ven de tres en tres pues es estrese n+1 mostrando de tres en tres.
Por qué.
Porque tres n+1 es de nueva cuenta 3 por 0 +1 y va a ser 1 3 por 1 3 +1 va a ser 4 entonces va a aplicarle
al 1 al 4 al 7 al 10 etcétera y va a ir limpiando siempre el inicio y por eso nos permite tener esta
funcionalidad.
Puedes ver que le aplica un Bagram color y de forma más visual te va a parecer esta forma si lo quieres
como dos n+1 aplicarle solamente al elemento 1 al elemento 3 al elemento 5.
Siguiendo esta fórmula de 3 por quisiere a 2 por 0 +1 igual a 1 2 por 1 +1 igual a 3 2 por 2+1 igual
a 5 y así hasta que complete todos los elementos.
Es un poco extraño este selector la verdad pero en algunos casos te va a ser muy útil y te va a ayudar
bastante para aplicarlo ahora este vaquero en color no va si guardo cambios puede que aquí se ve bien
los dos incluso desde que eran múltiples líneas se ve bastante bien funciona correctamente pero si lo
hago grande aquí me gustaría que fuera de 3 aquí en el Media cuerito a ver si es bueno voy a copiar
este lo pongo aquí nada más lo cambio por 3 y guardo cambio si se ve solucionar no se va a solucionar
tan fácilmente por qué porqué se sigue heredando este Clear cada dos elementos entonces puedes ver que
incluso se ve peor por qué porque tenemos un click cada elemento 1 3 5 pero también tenemos 1 cada elemento
1 4 7 y por eso se ve así de extraño tienes que limpiar o eliminar este y para ello lo vamos a copiar
y pegar aquí vamos a ponerle click on set eso quiere decir bueno creer que está aquí reescribirlo y
quitarle mejor el click on set es como una forma de quitar ese valor en CSS y vamos a quitarle el Clear
Boot que teníamos en 2 n+1 que sería el elemento 1 3 5 7 etc..
Y si guardas cambios puedes ver que se ve de esta forma y ya queda bastante bien cuando esté en grande
elimino lo que viene siendo que aparezca el click cada elemento 1 3 y 5 pero que le aplique que para
que lo muestren el elemento 1 4 y 7 si lo hago pequeño esta parte no entra porque son Miyako y por lo
tanto solamente aplica el cliente en el elemento 1 3 5 y 7 y lo aplicantes por eso me permite tener
dos columnas un ejercicio que en mi opinión era importante mostrarte de nueva cuenta.
Un empleador un posible empleador te va a pedir conocer las herramientas actuales las formas actuales
de escribir CSS también las anteriores y de esta forma ya tienes los conocimientos necesarios en el
siguiente capítulo.
Así estaremos viendo el capítulo de Flex Box y después se es ese grito.