Transcripciones
1. Introduccion: ¿Alguna vez has querido
diseñar tu propio sitio web? Si es así, necesitarás
conocer y dominar CSS. Hoy, vamos
a hacer precisamente eso construyendo este proyecto. Hola, mi nombre es Zoe. Soy ingeniero de software
y ex profesor que le encanta ayudar a otros a
comenzar con la codificación. He creado toneladas de sitios web
y aplicaciones web usando React, CSS, HTML y más. Hoy, vamos a
repasar los elementos esenciales de CSS y usar esas habilidades para agregar
estilo a nuestro sitio web de HML Si no estás
familiarizado con HTML, recomiendo encarecidamente que
revisen mi clase anterior donde
construimos el código base
para este proyecto. Pero de cualquier manera, tendré el código de inicio
vinculado en la pestaña de proyecto y recursos a continuación. En esta clase,
hablaremos todo sobre cascada, hojas de
estilo y las
diferentes reglas de CSS. Primero,
comenzaremos con una visión general de qué es CSS y
cómo se usa. Luego nos sumergiremos directamente
en nuestro tutorial. En el tutorial, puedes esperar aprender
a escribir CSS, cómo conectar tu
CSS a tu HTML, cómo usar una hoja de estilo de
manera efectiva y cómo usar CSS para
darle vida rápidamente a un diseño Este curso es para cualquiera
que esté interesado en construir y diseñar sus propios sitios web y aprender
a trabajar con CSS. Al final de este
curso, podrás
hacerlo por ti mismo.
Así que comencemos.
2. Proyecto de clase: Proyecto de clase. Nuestro
proyecto para esta clase será darle estilo a un
sitio web simple usando solo CSS. Para esta clase,
será fundamental tener acceso
a una
computadora con la que puedas ejecutar código de Visual Studio u otro editor
de código de tu elección. También querrás
tener un navegador como Google Chrome
en funcionamiento, ya que lo usaremos para
mostrar nuestra página web. Como mencioné
antes, habrá algún código de inicio disponible si quieres seguir junto
con el tutorial. Dejaré enlaces a cualquier
activo y recurso que necesite en la pestaña de proyectos
y recursos a continuación.
3. ¿Qué es CSS? : ¿Qué es CSS? CSS significa hojas de estilo en
cascada,
y es un lenguaje de hojas de estilo
utilizado para describir la forma en que
se presenta HML al usuario CSS puede vincularse usando una hoja externa o escribirse dentro del propio documento
HML Exploraremos ambas opciones a
lo largo de este curso. Como lenguaje, el CSS se compone de dos partes primarias,
selectores y reglas Vamos a sumergirnos en lo que es
cada uno de esos.
4. Selectores y reglas: Selectores y reglas.
Los selectores son indicadores que le dicen a la computadora a qué elementos se deben obligar a los estilos
deseados, y las reglas son esos Cada regla CSS comienza
con al menos uno, pero posiblemente con
más de un selector. Estos pueden seleccionar ya sea un tipo de elemento como uno H, P o imagen, una
clase específica de elemento, o la idea de un elemento
singular. Tanto las clases como
los ID se pueden agregar a cualquier elemento HTML para ayudar a
agruparlos o identificarlos. Pero hay una diferencia clave
entre clases e identificaciones. Mientras que las clases se pueden agregar a múltiples elementos para ayudar a llevar a través de un
conjunto consistente de estilos, una
especie de página web
o un sitio completo. Los ID, por otro lado, están destinados a ser únicos
para un solo elemento. Dependiendo de tu objetivo de estilo, es posible que quieras usar
clases o ID o ambos. La mayoría de los sitios web tienen una
combinación saludable de los dos. Los selectores de clase se escriben en CSS al anteponer el
nombre de la clase, que
tú eliges tú mismo con un punto Los ID se escriben
casi de la misma manera, pero en lugar de un
punto, se usa un hash.
5. Cascada: Cascada. Como puedes ver, hay múltiples formas de
seleccionar un elemento usando CSS. Pero, ¿cómo sabes
si
tu regla se
aplicará correctamente o no ? CSS tiene dos características
que pueden ayudar con esta cascada y especificidad. Como su nombre lo indica,
los estilos en CSS se aplican en
cascada. Eso significa que los
estilos que se escriben en la parte superior del
archivo se aplican primero, y luego a medida que baja, los otros estilos se aplican encima de ese estilo inicial. Si por casualidad has escrito dos estilos conflictivos
para un mismo elemento, como nivel básico, el que aparece más adelante en la hoja CSS será
el que se aplique Sin embargo, esto no es
muy mantenible, especialmente si tienes varias
hojas de estilo con las que trabajar Entonces hay una manera de
anular este comportamiento. Echemos un vistazo a otra
característica llamada especificidad.
6. Especificidad: Especificidad. La especificidad nos
permite anular reglas
previamente establecidas
en función de cómo específicamente se selecciona el
elemento. Por ejemplo, si todas las etiquetas P se configuraron para tener el color rojo, pero luego le dimos a una etiqueta
P específica la clase de especial y le dimos a esa clase
el color de regla de azul, independientemente de dónde
se indicara esa regla en el documento. Entonces, independientemente de la cascada, esa etiqueta P se vería obligada
a tomar el color azul porque las clases son más
específicas que los selectores de elementos Lo mismo es cierto para las identificaciones. Si le dimos a esa misma etiqueta
P el ID de unique y establecemos la regla para que ese ID sea
el color verde, esa etiqueta P
tomaría entonces el color verde. Esto se debe a que los ID son los más específicos de
nuestras tres opciones de selección. Así que yendo de lo menos
específico a lo más, tenemos elementos, luego
clases, luego IDs.
7. Declaraciones: Declaraciones. Una vez que
hayas apuntado correctamente al elemento o elementos con los que
te gustaría trabajar, es hora de escribir tus estilos. Como
ya habrás recogido, las reglas
CSS se escriben
usando un conjunto de declaraciones que gravan el
uso de propiedades y valores El inmueble en el
lado izquierdo de la declaración es la característica estilística que queremos modificar con nuestra regla El valor en el lado derecho es la
elección de estilo específica que hemos hecho. Cuando combinamos la propiedad de la izquierda y el
valor de la derecha, obtenemos una declaración CSS. Estas declaraciones
vivirán dentro nuestros conjuntos de reglas CSS o reglas y luego se
aplicarán a nuestro HTM.
8. Información adicional: Información adicional. Como
puedes imaginar, CSS tiene cientos de propiedades
diferentes, pero no te preocupes, no estás destinado a memorizarlas todas Puede usar sitios
como W three Schools, puntos de desarrollador de
Mozilla y desbordamiento de pila para buscar la propiedad CS correcta para
usar cuando los necesite. Cada propiedad puede tener muchos valores
diferentes
que deben
escribirse correctamente o escribirse en el orden correcto
para que funcionen Entonces, si alguna vez no está seguro la propiedad o el estilo con el
que está trabajando, es la mejor práctica simplemente
buscar la documentación
9. Tutorial: Todo bien. Entonces ahora es el
momento de agregar algo de CSS, algo de estilo a nuestra página. Pero, ¿cómo
trabajamos incluso con CSS, y a dónde va
y cómo se conecta? Y vamos a sumergirnos
desde el principio. El mejor lugar para escribir
CSS es en su propio archivo. Entonces lo que vamos a hacer
es crear nuestro propio archivo CSS. Entonces para hacer eso, vamos a
entrar en nuestra carpeta donde vive
Indext HTML, y vamos a crear un nuevo archivo Lo llamaremos archivos punto CSS. Impresionante. Hemos
creado nuestro archivo CSS. Perfecto. Lo que tenemos que
hacer ahora es vincularlo a nuestro archivo HTML porque en este momento solo están
sentados uno al lado del otro, pero no necesariamente saben que están destinados
a trabajar juntos. Entonces, lo que tenemos que hacer es
pasar a nuestro archivo HTML de punto índice. Vamos a seguir adelante y vincular nuestro archivo CSS a nuestro HTML. Entonces vamos a
entrar en la sección head, y vamos a usar lo que
se llama un elemento link. Entonces el elemento link
hace precisamente eso. Enlaza un archivo a otro. Entonces vamos a usar tinta, y luego la relación. Hay un par de atributos
diferentes que vinculan que tiene el elemento
link. Entonces uno es RL, que
significa relación. Entonces quiere saber por qué estas dos hojas
necesitan, como, trabajar juntas. Entonces vamos a llamar a éste. La relación aquí es hoja de
estilo porque CSS, la hoja CSS
con la que estamos trabajando es una hoja de estilo. Está destinado a darle estilo a HTML. Y luego vamos a usar otro atributo um llamado HRF HRF es básicamente la URL o la ubicación de
lo que es el archivo En este caso, porque es un archivo local, va
a ser, ahí mismo, pero incluso puedes usar, google.com para tu HRF si
eso es lo que tiene que ser No lo usarías como
tu hoja de venta porque Google no es un archivo CSS,
pero entiendes la idea. HRF se puede usar en una variedad de situaciones para
diferentes tipos de enlaces, y usaremos Links un
poco más adelante Entonces por ahora, lo que vamos
a hacer es tomar nuestro HRF, y lo vamos a poner vamos a vincularlo
a nuestro estilo punto CSS Ahora, recuerda cómo cuando
estábamos hablando terminal y el punto punto
slash y todo eso, bueno, bastante similar, podemos
indicar que un archivo está en la misma carpeta que el que estamos actualmente usando dot slash Entonces si voy dot slash, y verás que VSCode ya reconoce
lo que estoy tratando de hacer, listará todos los directorios en los
archivos que están en la carpeta actual
en la
que estoy trabajando Entonces si voy dot slash y
voy a estilos dot CSS, esa es en realidad la
hoja de estilo que acabamos de crear Así que pulsa Enter, y
ya lo ha subrayado
porque básicamente se ha creado ese enlace dentro de VSCode diciéndome, Sí, sí, hemos
vinculado este archivo CSS Entonces todo lo que tengo que hacer
ahora es cerrar, nuevo, una etiqueta de cierre automático. Notarás que la mayoría de
las etiquetas en la cabeza en
realidad se cierran por sí mismas porque no
hay nada entre ellas. Solo están destinados a contener
piezas de información, y nosotros seguiremos adelante
y guardaremos eso. Y ahora deberíamos tener nuestra hoja de
estilo a nuestro HTML. Pero
aún no pasa nada. Nuevamente, porque no
hemos puesto
nada en nuestro CSS. Así que sigamos adelante y
comencemos a estilizar esto. Hay un par
de formas en las que puedes apuntar a elementos HTML con CSS, adelante y
movemos esto por aquí para que podamos ver
ambos al mismo tiempo. Entonces puedes apuntarlos usando qué tipo de
elemento son, ¿verdad? Para que puedas apuntar al cuerpo. Puedes apuntar a todos
los divs, H unos,
Ps, strongs,
formas de entradas, etcétera. Esa es una forma de apuntar. Y si tienes una especie de cambio
general que
te gustaría hacer, probablemente
esa sea la
mejor manera de hacerlo Entonces, por ejemplo, una
cosa que me gustaría cambiar porque
como notas aquí, es una fuente SNSerf
y la fuente que estamos
usando tiene Tiene esos pequeños
bordes, esos sombreritos. Quiero asegurarme de que la
fuente que se utiliza a lo largo este documento es San, son serif Entonces vamos a
seleccionar la etiqueta corporal. El cuerpo así que vamos
a sectar el elemento body, y vamos a
hacer familia de fuentes. Familia de fuentes So. Entonces hay todos estos
diferentes tipos de propiedades a las que
puedes acceder dentro de CSS. La familia de fuentes es solo una de literalmente
docenas y cientos. Así que la familia de fuentes permite determinar qué tipo de fuente
es. En términos generales. A veces se puede
especificar la fuente real. A veces eso
implica descargar la fuente o
vincularla y todo eso. Pero en este caso, solo
quiero una fuente San sera. Entonces voy a
desplazarme hacia abajo hasta donde dice Ariel,
Helvetica, y SNSerf
y dar click en eso Helvetica, y SNSerf
y Entonces ahora, ojalá, todo en el cuerpo
debería ser SNSerf Y una
cosa realmente, muy importante que debes recordar hacer después de hacer un cambio en
tus archivos es siempre es segura. Entonces echemos un vistazo por
allá, y miremos eso. Todo nuestro texto es ahora SNSerf. Tiene No hay más
sombreritos y colas. Está perfectamente limpio y se
ve un poco moderno. Perfecto. Bien, así que veamos qué más podemos hacer con esta página. Ahora, aquí hay una cosa. Quiero apuntar al H
uno, y para ser justos, puedo hacerlo con solo hacerlo, veamos. Quiero apuntar
en realidad, veamos. Quiero apuntar parte del
texto en la página, pero no todo el
texto de la página. Si echas un
vistazo a nuestra imagen aquí, verás que gran parte
del texto es en realidad blanco. Entonces esto es blanco, eso es blanco. Pruébalo gratis durante
siete días es blanco. Pero este texto en la
parte inferior parece ser gris, y este texto parece ser,
como, rosado o rojo o algo así. Entonces queremos tener una combinación de diferentes tipos y
diferentes colores de texto. Ahora, como mencioné, con la codificación, hay diferentes formas de acercarse
a todo. Algunas formas son
mejores que otras, pero realmente depende de ti y de
tu preferencia personal. Entonces, la forma en que me
gustaría abordar esto es
hacer que el color general sea blanco y luego probablemente apuntar a
los elementos no blancos. Creo que esa es la forma
más limpia de hacer esto. Entonces otra forma en que puedo hacer
eso es apunto al cuerpo, y uso el uso
el color de propiedad, que está destinado al color de fuente, y solo lo nombraré blanco. Ahora, tal vez ya
hayas recogido lo que
va a pasar. Nuestra página parece que hay casi nada
ahí, ¿verdad? Derecha. Entonces, lo que
vamos a hacer ahora es en realidad implementar
nuestros antecedentes. Entonces ahora es algo esencial que nos pongamos en marcha
los antecedentes. Sabemos por nuestros archivos, así que si entramos en los archivos
que se incluyen con nuestro proyecto que tenemos una imagen de fondo, este escritorio de
fondo. Pero en realidad no es
la imagen rosa. Es solo, como, los pequeños
íconos que están en la parte superior. Por lo que tenemos que hacer algún trabajo
con este trasfondo. Bien, así que sigamos
adelante y hagamos nuestra imagen de fondo de fondo Y vamos a usar lo
vamos a vincular a nuestro BG de escritorio en
o PNG de escritorio. Entonces, la mejor manera de
hacerlo es usar una URL, igual que tienes google.com,
igual que tienes hf, vas a
usar una URL para vincular
este selector a este selector a ese archivo de imagen de fondo
que está en nuestro proyecto Entonces haremos URL. URL, corchetes. Y luego entre comillas, voy a especificar
la ubicación de ese archivo de
escritorio BG Intro, ¿verdad Entonces si miro donde estamos, actualmente
estamos
en estilos punto CSS, necesito bajar un
nivel a imágenes y
luego a la Bg
introdsktop Entonces para llegar
ahí, lo que
hago es escribir dot slash
indicando esta carpeta Entonces quiero ir a
la carpeta Imágenes, así que voy a agregar imágenes a eso
y luego dar clic en Bueno, voy a escribir el Bg
intro desktop dot png, y eso debería vincularlo
directamente a esa imagen Entonces, si hago clic en Guardar y
vuelvo a navegar. Genial. Podemos empezar a ver que nuestra imagen se está aplicando.
Pero hay una cosa más. Ahí está este, como, color rosa que no forma parte de
la imagen de fondo. ¿Cómo lo
conseguimos ahí? Bueno, hay otra propiedad
llamada color de fondo. Entonces creo que esto viene
con una guía de estilo, razón por la
cual nos han
dado todos estos archivos. Entonces, si pasamos a la guía de
estilo punto D, y pasamos a, veamos. Hay una maquetación. Los colores. Hay primates son rojos, un verde y acento de
color azul, una fuente Bien, en realidad nos habían
dado una fuente específica, así que definitivamente podemos
usar eso si queremos No estoy muy seguro de qué color
es, pero ¿sabes qué? Ni siquiera tenemos que adivinar. Aprovechemos otra herramienta que
tenemos a nuestra disposición. Entonces ahí está esta herramienta
llamada Cuentagotas. Es una extensión que puedes agregar a tu cuenta de Google
Chrome,
totalmente gratis, y
solo tienes que hacer clic en ella. Una vez que lo tienes instalado en tus extensiones de Google Chrome, haces clic en él y
haces clic donde dice Pick Color de la página web, y en realidad puedes simplemente pasar el cursor sobre la parte de tu
página web para obtener ese color Entonces, debido a que no estábamos seguros de
qué color era este, acabamos de agarrar ese color, y podemos ver que hay tres formas diferentes de que
se nos describe Entonces está en un hash hash EC 7476. Entonces esa es una forma
de describirlo. También está en una HSL, matiz, saturación y luma,
como 359, 76% y 69% Uh, o está en RGB, entonces es una combinación
de rojo, verde y azul, y esos
son los números. Entonces 236 rojos, 116
verdes y 118 azules. Podemos usar cualquiera de estos. No hay una respuesta correcta
o incorrecta. Para los efectos de
ello. Solo usaré el hash porque
es el más corto. Entonces, si vuelvo y
vuelvo a nuestros estilos, crearé una nueva propiedad. Y solo estoy poniendo estos
en orden alfabético, pero realmente puedes hacerlo
en el orden que quieras. Simplemente me resulta más fácil
encontrar cuando es alfabético. Puedes ir color de fondo,
y voy a añadir el hash. Voy a ahorrar. Verás que el código
VS realmente lo
llena para mí. Me dice de qué color
es. Y ahí vamos. Ahora tenemos nuestro, como, fondo
rosa. Podemos ver nuestro texto blanco, y estamos como, bien en nuestro camino. Impresionante. Genial. Estamos
en un buen lugar. De hecho, estamos en
un lugar tan bueno que en realidad
podríamos querer
comprometer esto a nuestro repositorio de GitHub porque digamos que hacemos otra cosa y
lo
estropeamos completamente, podríamos terminar deseando poder
volver a este lugar. Entonces sigamos adelante
y hagamos precisamente eso. Así que ahora estamos trabajando con un par
de piezas diferentes. Así que sigamos adelante y cometamos el escritorio de intro de fondo, que es la imagen
que estamos usando Sigamos adelante y
comprometamos nuestros estilos dot CSS, también. Y vamos a comprometer
nuestro índice de punto HTML, que vincula estos archivos
juntos. Impresionante. Así que vamos a dar nuestro mensaje
como estilos iniciales. Inicial intentemos deletrear
correctamente. Ahí vamos. Y vamos a
cometer esto. Y ahora que hemos hecho este commit, en realidad
vamos a empujarlo a nuestro repositorio remoto
para asegurarnos de que, aunque nuestra computadora simplemente se
desvanezca en los próximos 5 minutos, sigue ahí
en Internet Y cuando consigamos una computadora nueva,
podemos traerla de vuelta. Entonces lo que vamos a hacer es tocar estos pequeños
tres botones aquí mismo, estos pequeños tres puntos aquí arriba, y vamos a
hacer clic en la palabra push porque ya hemos conectado
los dos repositorios, va a saber que
cuando digo push, quiero decir, empujarlo al control remoto al que lo
hemos conectado Sigamos adelante y hagamos
clic en empujar. Y verás que la pequeña barra azul
va empezando a ir. No fueron muchos archivos, así que no va a
llevar mucho tiempo. Pero si vamos a GitHub y volvemos a nuestro código
para nuestro formulario de registro, veremos que
acabamos de tener empujones recientes. Entonces tenemos un archivo styles en CSS, que es nuestro
estilo inicial aquí mismo, y tenemos nuestro archivo Images, que tiene nuestra carpeta Images, que tiene un archivo, que
es el PNG de escritorio. Impresionante. Gran lugar para estar.
Estamos volando a través de esto. Entonces, lo siguiente
que queremos ir a abordar, echemos un vistazo a
lo que tenemos aquí. Lo siguiente que probablemente
queremos abordar es la separación o poner estos en
diferentes elementos. Podemos ir en cualquier dirección. Empecemos
abordando estos, como, pequeños elementos, y luego los
separaremos a los dos Y nuevamente, como
dije, con la codificación, hay ocho
formas distintas de hacer cualquier cosa. Depende totalmente de ti y de
lo que prefieras hacer primero. Y, por supuesto, siempre
puedes cambiar opinión y hacer
algo diferente. Si has decidido
que, ya sabes, has elegido el enfoque
equivocado,
totalmente bien, sobre todo a
medida que estás aprendiendo. Siéntete libre de cometer errores y luego solo Controlar Z
y hacer algo nuevo. Entonces, comencemos por tomar esto. Pruébalo gratis por siete días
y $20 al mes después. Sigamos adelante
e intentemos crear esta caja. Déjame volver a nuestra
guía de estilo y ver si
hay algo ahí. Creo que esto podría ser ese azul oscuro o tal vez el azul grisáceo.
No estoy muy segura. Vamos a darle una puñalada
y a ver qué podemos hacer. Entonces, para apuntar a
esta línea aquí mismo, esta etiqueta P, bien,
hay un par de
formas en las que podemos hacerlo. Podemos agregar relleno
a la etiqueta P o podemos envolverla en un divisor y agregar
el estilo al divisor. Totalmente depende de ti
lo que quieras hacer. Simplemente, ya sabes, haz tu
elección y quédate con ella. Entonces hablemos de relleno. Lo
que es el relleno es ese poco espacio, ese espacio entre
el espacio entre el texto y el
límite exterior de la caja. Eso es acolchado. Entonces, en realidad, acabo de responder a
mi propia pregunta. Tenemos que usar un div si
queremos usar padding. Margen, sin embargo, es la cosa en el exterior de
algo, ¿verdad? Entonces el margen es la distancia
entre dos objetos. Entonces, por ejemplo, porque
queremos usar un color de fondo, necesitamos tenerlo como
fondo para un elemento. Entonces déjame mostrarte lo que yo. Si tuviera el
color de fondo para esta etiqueta de guisante, y lo hice así, color
grisáceo azulado . Entonces
probemos algo aquí. Tomemos todas las etiquetas de guisante, y haremos
color de fondo, y luego seleccionaremos. Probemos este azul grisáceo. No estoy segura. Y vamos a
hacer eso y vamos a ahorrar. Todas las etiquetas P tienen ese color. Pero como ves, tampoco hay mucho espacio alrededor de las etiquetas
p, ¿verdad? Son una especie de todas
simplemente, como, líneas rectas muy largas. Lo que podemos hacer para
evitar esto es crear realmente una
caja alrededor de la etiqueta P y usar algún relleno dentro esa caja para especificar cuánto espacio queremos
para ese elemento. Entonces déjame mostrarte a lo que me refiero. Vamos a deshacernos de este color de fondo de la
etiqueta P. Y vamos a crear una caja
alrededor de nuestra etiqueta P, ¿verdad? Así que vamos a
crear este, como, cuadro
más grande alrededor de nuestra
pequeña línea de texto aquí. Así que vamos a crear otro div y vamos a envolver eso alrededor de
nuestra etiqueta P. Impresionante. Bien. Entonces ahora queremos
apuntar a esa etiqueta P específica, también, porque, como notaste, cuando puse ese
color en la etiqueta P, hizo, como, todas
las etiquetas p, ¿verdad? Eso no es lo que queremos. que ese div específico rodee
esa etiqueta P específica. Ahora bien, hay un par
de formas de hacer esto. En realidad podemos, como,
tratar de hacer, como, una especie de cosas anidadas
donde podríamos escribir algo así como
podríamos escribir algo Podríamos escribir
algo como, um, cuerpo, y entonces el hijo
del cuerpo es un div. Y entonces creo que está dentro de
otro div y luego
tenemos un Ptag y ese es el petag al que estamos
buscando apuntar Pero uno, no estamos
buscando apuntar a la etiqueta Pe. Estamos buscando
apuntar al div. Y dos, esto todavía
no es lo suficientemente específico. Como, claro, esto
apuntará a este
div específico, y funcionará. Entonces si hago color de fondo, y hagámoslo no creo
que ese fuera el azul correcto. Esta vez hagamos un
azul diferente. Hagamos el azul oscuro. Puede que sea azul normal, pero ya veremos. Nosotros haremos esto. Eso apuntará a
ese div específico. Pero la única razón por la
que apunta a eso
es porque solo hay un div. Echemos otro
vistazo a lo que hice aquí. Entonces apunté al
cuerpo, al cuerpo. Y luego apunté a los
divs dentro del cuerpo, que es este div y este div Entonces apunté a los
divs dentro de los divs, y solo hay, en este caso, div dentro de
un div Sé que se vuelve un
poco complicado, pero en este caso, solo
hay un
div dentro de un div, y ese es este div. Entonces esa no es la
mejor manera de hacer esto porque hasta yo tratando de
explicártelo fue confuso. Lo que preferimos hacer es
apuntar a este divisor específico, este elemento específico, y
no a ningún otro elemento. Entonces, hay dos
formas en las que podemos hacer esto. Si el diseño que estamos
buscando implementar se volverá a utilizar en otro lugar. Podemos usar algo
llamado clase. Entonces una clase es un tipo de propiedad que se pone
en cualquier HTML visible. Entonces puedes escribir en clase, y luego puedes nombrar a una
clase lo que quieras. Cualquier texto que quieras darle
, puedes nombrarlo así. Entonces si llamo a esta
clase, ya sabes, llamo a CTA como llamada a la acción, entonces ese será el nombre
de la clase a apuntar Y si tengo alguna otra llamada
a la acción en el sitio web, a lo mejor quiero que
todas tengan el mismo aspecto. Entonces, cuando voy aquí, en realidad
puedo cambiar esta estructura y
puedo apuntar a la CTA Ahora bien, para apuntar a una clase, en realidad
necesitas poner un punto antes de lo que sea el texto. Entonces el punto especifica clases. Cuando escribo en CTA y
pongo los
colores de fondo esto e
identifico como esto teniendo la clase CTA y esto es lo único
con un CTA de clase, solo
debería
apuntar una vez más a esta cosa solo
debería
apuntar una vez más a esta Genial. Lo volví a hacer. Perfecto. Ahora bien, ¿y si quisiéramos apuntar
solo a una instancia singular
de algo, verdad? Al igual que, ¿no queríamos
apuntar a ningún otro tipo de CTA? Esto es literalmente solo para
este y solo CTA. Bueno, lo que podemos hacer entonces es usar este otro identificador
llamado ID, una pieza de, como,
identificación, esencialmente. Es otro atributo
que puedes usar en elementos HTML
visibles o HTML no
visibles. Y puedes llamarlo
literalmente solo tienes que escribir ID. Y al igual que en clase, puedes darle
el nombre que quieras. Así que puedes escribir para este, podría escribir en Unique CTA Y guárdalo. Y luego cuando vaya
aquí a especificarlo, en realidad
voy a usar
un hash porque un hash es el selector para IDs en CSS. Así que voy a escribir
el nombre de la misma,
Unique CTA, y voy a
hacer mis pequeños corchetes, y entonces tal vez voy a cambiar
el color de fondo Esta vez, lo pondré como azul. Pero, ya lo dijimos, así que no debería cambiar, ¿verdad? Mal. Definitivamente cambió. Ahora bien, ¿por qué sucedió eso? Bueno, lo que pasa con CSS
es que tiene una jerarquía. Entonces, hay dos formas de
determinar esta jerarquía y la especificidad a
la que recurre CSS. En lo más bajo en el tipo de nivel de menor importancia
está el elemento. Entonces esas son nuestras etiquetas corporales. Cuando escribimos H uno, H dos, generalmente
solo
se refieren
al tipo de elemento
en general, ¿verdad? Esos son elementos no específicos. Después de eso están las clases. Si especifico que todos los H deben tener el
color rojo como texto. Pero luego especifico le doy una clase a uno de mis H unos, H uno clase. Lo que sea que ponga como
color en esa clase H one realidad
anulará lo que
puse para ese H un elemento. Entonces, ya sabes, ese H uno será entonces
azul en lugar de rojo. ¿Eso tiene sentido? Todo bien. Ahora bien, siendo aún más específicos, como acabas de ver, son identificaciones. Los ID están destinados a ser identificadores
únicos para un solo elemento. No debes reutilizarlos
para más de un elemento. En realidad solo está destinado a
ese elemento individual. Y así si quisiera ser realmente,
realmente específico y le dije, Solo ese H uno, ese div, entonces usaría un ID y diría H uno ID y luego cambiaría
el color a amarillo. ¿Correcto? Y así si fui y tomé mi H uno y agregué todas
estas clases. Así que agregué clase
es igual a H una clase, e ID es igual a H una ID. Lo deletreé correctamente,
muy importante. ¿Cuál crees que
saldría arriba? Ojalá, adivinaste H una identificación. Y si lo hicieras, lo adivinarías,
cierto, porque es amarillo. Entonces está destinado a ser, está destinado
a pasar por la especificidad. Pero digamos que no
tenía esta identificación H one, ¿
verdad? Digamos, acabo de tener clase. Debería ser azul,
¿verdad? Y lo es. Pero hay otra
cosa a tener en cuenta. CSS también funciona en términos de lo que ve en
qué orden lo ve. Lo último que ve CSS es
lo que va a tomar. Entonces, si has escrito H una clase y la has
llamado azul aquí, y la has llamado verde
aquí, y luego Ups Y luego te has ido
por debajo del verde, has dicho, en realidad, no,
voy a colorearlo de púrpura. Si tienes tu
linter encendido para esto, realidad probablemente
provocará un error Pero, digamos que no lo haces
y
lo guardas, debería elegir
la última versión de esa clase que especifiques. Entonces, si adivinas,
debería ser de color morado. Y cuando revisas,
es de color morado. Entonces, lo que necesitamos sacar de esta
lección son dos cosas. Uno que CSS usa clases. Para que puedas especificar clases y aplicarlas a múltiples elementos.
Así que en realidad puedo aplicar. A pesar de que no son
H, puedo aplicar a este PTAG y,
ya sabes, guardar eso Y entonces debería haberlo hecho bien, es un poco difícil de decir, pero esto también es morado. Así puedo aplicarlo a
múltiples elementos diferentes. Las clases están destinadas a compartir dentro de una cierta
cantidad de elementos. Puedes apuntar al elemento en sí, al tipo del elemento, pero solo debes saber que
se transferirá a través de todos esos
tipos de esos elementos, realmente solo se recomienda
hacer para, como, el cuerpo o si sabes que todos los PTA deben ser de cierto
tamaño o algo así Y entonces tenemos identificaciones, ¿verdad? Los ID están destinados a
apuntar realmente a algo muy específico. ¿Solo están destinados
a ser singulares? Solo debes usar
una ID para un elemento y no
debes
repetirlos . Para eso están
las clases. Impresionante. Así que sigamos adelante y diseñemos el
resto de esta página. Entonces sigamos adelante y agreguemos el relleno del que estábamos
hablando antes a nuestro elemento. Entonces parece que hay
una buena cantidad de, como, relleno a la izquierda y
relleno a la derecha, y un poco de relleno en la parte superior y un poco
de relleno en la parte inferior. Como mencionamos,
el relleno es lo que hay
dentro de un elemento. Básicamente es hacer que el
elemento en sí sea más grande, ¿verdad? Piense en ello como,
como, acolchado natural. Estás como, poniéndote
capas extra para cubrirte
contra el frío. Entonces agreguemos en un par
agreguemos un poco de relleno. Entonces, la forma en que escribes padding, hay dos formas de
escribir padding. De hecho, puede
escribir relleno Um, y luego especificar la dirección. Así que el relleno dejó. Y luego
puedes especificarlo en píxeles. Entonces digamos que es
como 20 píxeles. Y eso agregará algo de
relleno a la izquierda ahí, solo un poco de
relleno ahí mismo. Hay otra manera y luego lo haces
para rellenar izquierda, derecha, arriba e abajo. Esos son los cuatro lados
de cualquier elemento en CSS, izquierda, derecha, arriba e inferior. Esa es una forma de apuntar a
las cosas usando el relleno. También puedes escribir relleno solo la palabra por sí misma
y usar dos selectores Así podrás seleccionar la
parte superior e inferior, así
como la izquierda
y la derecha. Es un
atajo para
poder escribir relleno
en una sola línea. Entonces podrías escribir el relleno
superior e inferior porque además, si miramos nuestro diseño, parece que deberían
ser bastante similares, ¿verdad? La izquierda y la
derecha se ven similares, y la parte superior e
inferior se ven similares. Entonces podríamos poner nuestra izquierda
y derecha como, digamos, 40 píxeles o lo siento, la parte superior e inferior
probablemente deberían ser de unos 20 píxeles. Y la izquierda y la derecha,
tal vez 40 o 60 pixeles. Um vamos a echar un vistazo. Y, como, es más o menos
lo que estamos buscando, tal vez no exactamente lo que estamos
buscando, sino más o menos. El problema aquí,
sin embargo, es que nuestros elementos se extienden
por toda la página, que no es lo que
queremos hacer en absoluto. Queremos asegurarnos de
que son simplemente, como, agradables y lindos y, como, envueltos como los tienen
aquí en la imagen, ¿verdad? Entonces para hacer eso, vamos a tener que
emplear algún tipo de, como, contenedor
más grande, algo para, como, hacer que todo esto básicamente encaje en estos,
son como, dos columnas. Necesitamos, como, conseguir
que se queden dentro dos columnas y luego también, como, arreglar este relleno y, como, ya sabes, hacer que se vea
un poco más bonito. Entonces, demos un par de
pasos para hacer eso. primero es lo primero,
separemos estas en dos columnas porque
creo que eso va a facilitar
un poco nuestro estilo. Entonces la forma en que voy
a elegir hacer esto, y de nuevo, 100 formas diferentes de
hacer 100 cosas diferentes. Pero la forma en que
voy a elegir hacer esto es con Flexbox Flexbox es una de las
mayores herramientas en CSS, y realmente te recomiendo que te tomes un tiempo y lo
aprendas porque vas a
estar usándolo todos los días
, te lo garantizo Flexbox es un diseño
de caja flexible que esencialmente crea un tipo de contenedor que contiene
varios elementos Y dependiendo de qué propiedades le des a ese flexbox, básicamente cambiará de tamaño en función del tamaño de la
ventana y la pantalla que sea Es realmente genial de usar para el diseño
receptivo y los diseños
receptivos, y es un poco
un cambio de juego. Entonces, usemos Flexbox y
empleemos algunas de estas herramientas para que nuestra página se vea como
queremos que se vea Y voy a tener este enlace a CSS Trix en la descripción continuación para que puedas echarle
un vistazo por ti mismo Al mirar el
diseño, sabemos que estas dos piezas de texto
están destinadas a estar juntas, y toda esta
sección está destinada a estar juntas, estas dos columnas que
estamos viendo. Y luego más grande que eso, parece
haber esto, como, acolchado
lateral o lo que sea en el cuerpo o tal vez un margen, aún no lo
he decidido. Entonces, sigamos adelante y
demos algunos identificadores a estos dos a estos dos
divs y luego vayamos de ahí Entonces lo que podemos hacer aquí es, de hecho, ¿
sabes qué vamos a hacer? Envolvemos todo en un div grande y pondremos
todos los estilos en eso. Entonces, esto es un div, y se puede ver una especie de
donde las cosas capturan las cosas. Entonces ahí está el cuerpo, que es, como, una especie
de elemento de página. No voy a
perder el tiempo con eso. Usemos un div que envuelva alrededor de todos los
elementos dentro de él. Y vamos a darle a
esto el vamos a darle el nombre de clase de contenedor en caso de que quiera volver a
usarlo en una
página diferente o algo así. Y ahora vamos a darle
ese contenedor, el vamos a seleccionar ese contenedor. Um, selecciona ese contenedor. Y vamos a darle
el display de flex. Entonces, cuando
escribes display flex, eso realmente crea
un contenedor flexbox Entonces, si lo hemos hecho bien, verás aquí que nuestros dos datos están ahora uno al
lado
del otro. Ahora, ya están separados porque si recuerdas antes, seguimos adelante y
creamos estos dos divs Entonces Flexbox ya
ha hecho mucho
del trabajo por nosotros,
lo cual es increíble Entonces echemos un vistazo a
qué más tenemos que hacer. Tenemos
que asegurarnos de que tenemos, como, algún tipo de espacio,
algo de relleno aquí. Se ve bastante incluso en
todos los sentidos. Entonces sigamos adelante
y agreguemos eso en. Entonces vamos a hacer un poco de relleno. Y vamos a
hacer los cuatro lados. Ahora, otro truco para el
relleno es cuando
haces los cuatro lados,
es la misma cantidad. Sólo puedes
ponerlo en un número. Entonces, si pones como 50 píxeles, debería hacer 50 píxeles
en los cuatro lados. Entonces, los píxeles o REM o EM son básicamente dos
formas diferentes de describir el tamaño. Personalmente, prefiero
usar REM o EM solo porque es un
poco más personalizable. Entonces tienes si tu navegador particular está
configurado en tamaño de fuente 16 píxeles, entonces todos los tamaños de toda la fuente que sigue se basarán
en ese tamaño de raíz. Entonces prefiero usar REM solo porque es
un poco más adaptable porque si alguien cambia su tamaño de píxel a, como, 24,
para poder ver mejor las cosas, se ajustará, y no va mantener este, tamaño muy pequeño. Es difícil de ver. Así que
en realidad voy a seguir adelante. Ah, y también la mayoría de los navegadores, píxeles
predeterminados el tamaño de
fuente predeterminado es de 16 píxeles. Entonces básicamente, todo en REM que sigue eso es
una multiplicación de eso Entonces un REM es de 16 píxeles. Dos REM son 32 píxeles. Tres REM es 30 No. Tres REM son 48 píxeles, etcétera, etcétera, etcétera. Y así, una vez que te
acostumbres un poco más, te ahorcarás
un poco. Entonces, lo que voy a
hacer aquí es
cambiar esto a tres REM, y voy a
seguir adelante y cambiar el relleno de mi
CTA aquí a REM, también, solo para hacer mi
vida un poco más fácil Y estos son vientres
aproximados. Yo también estoy jugando alrededor de
las eslingas. Entonces si vuelvo aquí,
empezando a ver, ya sabes, empezando a formarse alrededor de
los bordes ahí, hagamos que el relleno sea
un poco mayor. Y
lo bueno de RMT, simplemente, como, darle un par de números, y es como una
tonelada más de relleno. Así hay una tonelada más de
relleno en el costado ahí. Creo que podría llegar
hasta a diez. Muy bien, dejémoslo así. Por ahora, eso parece
una buena cantidad Impresionante. Entonces tenemos el relleno
alrededor de nuestros elementos, y ahora tenemos nuestros dos
elementos uno al lado del otro. Volvamos a echar un vistazo a
nuestro diseño. Bien, entonces otra
cosa a notar aquí es que nuestro texto
aquí está centrado, y supongo que esto
está centrado, también,
porque es, como , una especie de
centrado en centrado, ¿ Eso es
algo importante a lo que hay que prestar atención cuando se busca
implementar un diseño, donde las cosas estén centradas,
si son como, inclinarse hacia la izquierda, inclinarse
hacia la derecha, etcétera Lo realmente impresionante Flexbox y del uso de
Google Chroma General es que en realidad puedes
jugar con estos estilos en el propio
navegador Así que no tienes
que, como, codificar un montón de cosas y
luego preguntarte si funciona. Realmente puedes simplemente
jugar con esto aquí y
ver si funciona. Bien, entonces lo que voy a empezar
a hacer primero es en realidad centrar estos elementos dentro de
este contenedor Entonces verás nuestro
contenedor aquí. Y si realmente te
desplazas hacia abajo debajo la pieza de estilos aquí mismo, en realidad
puedes
ver el relleno. Entonces tenemos diez carneros de
relleno alrededor de todos los lados, y eso es 160 píxeles de
relleno alrededor de todos los lados Ese es ese margen verde justo
ahí. Bastante genial, ¿eh? Um, entonces el medio aquí, ese es el tamaño de nuestros propios elementos
reales. Entonces un par de temas aquí. La forma no está
realmente construida, así que por eso se
ve tan encogida A lo mejor el texto es un
poco pequeño, también. Así que vamos a seguir adelante y
una especie de desenvolvamos estos componentes y luego
veamos cuánto más relleno
necesitamos para agregar padding y Margus que necesitamos agregar
a nuestros elementos Así que comencemos de nuevo por aquí la derecha porque es
la más compleja. Y veamos qué podemos hacer. Terminemos lo que
estamos haciendo aquí con esto pruébalo gratis CTA Entonces, si le echamos un buen vistazo, notaremos en realidad
que los bordes están redondeados y parecen
tener algún tipo de
sombra debajo de ellos, también, porque eso es,
como, parte de esto. Y si
lo miramos ahora,
no hay sombra. No hay redondeo Y también, hay
una brecha significativa entre esto y
la forma misma. Entonces lo que queremos hacer aquí
es hacer un par de cosas. Queremos redondear estos bordes. Y en realidad,
parece que estos bordes son igualmente redondos y
tienen un borde similar. Así que en realidad podríamos
crear una clase para esto. Redondearemos los bordes,
y luego
agregaremos ahí el pequeño borde de
sombra. Bien, así que vamos a crear una
clase llamada bordes redondos. Bordes redondos punteados. Y vamos a repasar así
que ¿cuál div era? Fue la CTA. Entonces otra cosa es, puedes agregar múltiples clases
a cada elemento. Entonces agregaremos aquí la segunda
clase de bordes redondos. Y luego agregaremos
la otra clase aquí a nuestra forma de ronda Ups Clase. Bordes redondos.
Pero en realidad, ¿sabes qué? He
cambiado de opinión. Me di cuenta de que en
realidad deberíamos envolver este formulario en un div porque este pTag aquí es
parte de esta cosa más grande, pero en realidad no es parte de la forma formalmente definida esta Entonces, cancelemos esto. Y vamos a crear
otro div aquí. Vaya, Div. Y luego envolvamos eso
alrededor de nuestra etiqueta P aquí. Y luego agreguemos
esta clase aquí. Clase equivale a gritos. Bordes redondos. Impresionante. Fresco. Entonces ahora que hemos
creado esta clase, hagamos que haga algo. Entonces hay una propiedad CSS
llamada border radius. Y sí, tengo
muchos de estos memorizados, pero es sólo después de trabajar con ellos una y otra
y otra vez Literalmente, puede buscar propiedades
CSS para un borde
o propiedades CSS para hacer esto, y obtendrá una lista exhaustiva de todas las propiedades a las que
podría dirigirse. Um, incluso podría haber
mejores formas de hacer lo que estoy haciendo aquí con solo
jugar CSS y HTML, pero es
con lo que estoy trabajando en este momento. Así que los bordes redondos, vamos
a apuntar al borde, pero en realidad es el radio de la frontera. Entonces radio fronterizo. Y vamos a lograrlo,
digamos, vamos a
curvarlo tal vez 20%. A ver si eso funciona.
Ahora, eso se ve súper raro. Vamos a curvar
usando REM en su lugar. Usemos dos REM. Eso
se ve un poco más normal. Bien, genial. Vamos a
compararlo en. Uh, tal vez tal vez sea un
poco demasiado agudo, en realidad. Hagamos una llanta. Eso parece un poco más cerca. Eso está un
poco más cerca. Bien. Y ahora ya podemos
decir que nuestro en realidad, voy a mover esto por
aquí ya que no lo estamos. Ya podemos
decir que aquí hay, como, demasiado
relleno, ¿verdad? Entonces echemos un vistazo a donde
podemos quitar algún acolchado. Definitivamente eliminamos algunos acolchados arriba y abajo acolchados superior
e inferior, y algunos acolchados izquierda y derecha. Así que vamos a quitar vamos a seguir adelante y eliminar
cuál era? Fue la CTA. Entonces acolchado superior
e inferior,
vamos a cambiarlo a uno. Eso ya se ve
mucho mejor. Y en realidad, lo que pasa
aquí es que esto está centrado. Así que queremos realmente hacer un centro de alineación de
texto en el CTA, y luego tomaremos
revisaremos nuestro relleno. Entonces agreguemos la propiedad. Centro de alineación de texto, que
en realidad alineará nuestro texto con
el centro de nuestra página. Ahí vamos. Eso es perfecto. Y vamos a tomarlo.
Vamos a compararlo nuevo con nuestra imagen aquí. No tan mal. No tan mal. Creo que en realidad podría ser que el elemento en sí
es un poco demasiado ancho. Entonces, abordemos eso
en el siguiente bit.
10. Conclusión: Conclusión. Hemos
hablado mucho en este video desde los conceptos básicos de CSS hasta el
estilo de tu propio sitio web. futuro,
deberías poder
comenzar a modelar tu propio
sitio web desde cero. Solo recuerda buscar
algo cada vez que no
estés seguro de ello. Me encantaría ver cómo resultó tu
sitio web. Así que por favor déjalo
enlace a tu código, una captura de pantalla o el sitio alojado en la
pestaña de proyectos y recursos a continuación para que pueda ver todo el arduo
trabajo que has hecho. Leo cada comentario, cada reseña y miro
cada envío de proyectos. Entonces, si tiene alguna pregunta, no
dude en
dejar un comentario en la sección de revisión
a continuación o comunicarse conmigo directamente. Consulta mi página de perfil para obtener
más información al respecto. Si quieres saber
más sobre codificación, consulta los otros videos
que tengo en mi página de perfil. También tengo videos en Next S y React disponibles en mi canal y sitio web de
YouTube. Los vincularé a continuación y
en mi perfil si estás interesado en aprenderlos también, y
te veré en el siguiente.
Zoë Davidson, Software Engineer & Cinematographer
