Transcripciones
1. Introducción: Hola y bienvenidos a otra
clase de Skillshare desde el turno médico, que es la
segunda en el Skillshare. Esto va a ser una
introducción a CSS, pasando de principiante
a diseñador web. Y una hora. Como requisito previo
para este curso, esperaría que tuvieras que
completar las
llamadas HTML diseñador principiante
en 30 minutos, que he puesto para arriba en mi
otra clase de Skillshare. Entonces vas con eso primero
porque este curso se construyó sobre el cual has
aprendido en ese curso. Y mientras estamos
repasando es CSS, el aprendizaje de las
reglas y estructuras. Por lo que aprenderás diferentes tipos de propiedades para seleccionar como las declaraciones y
cómo realmente puedes aplicar CSS en su propio archivo, además de incrustar esto
dentro del archivo HTML. Mencionada, tienes que
aplicar tus conocimientos y construido sobre el HTML en
el curso anterior. Si eres completamente
nuevo en la codificación, lo que sugeriría es ir primero
al curso de HTML, aprender a diseñar
tu primera página web, luego acude a este curso para dar estilo
a tu página web. Entonces porque cuando estás
diseñando una página web, simplemente no quieres que
se reproduzca con solo texto. No tendrás
imágenes ni videos, pero necesitas
tener importancia
para tu sitio web
agregándole color, el fondo a ella. Lo más importante, cómo se ajustan las imágenes a los estilos fussing
y diferentes. Este es un
curso introductorio y cómo se puede hacer por supuesto proyecto también. Nos van a dar para que tengas
una oportunidad en practicar habilidades. Y por último, estarás
usando Visual Studio Code, la versión gratuita
para Windows o Mac, y descargarás por Googling código de
Visual Studio en el navegador web e ir a la página web oficial
donde puedes conseguir su
versión específica dependiendo del sistema operativo
que esté utilizando. Esto es todo para el primer video, seré CU a través toda
la clase de Skillshare en el siguiente par
de imágenes mientras te
demostramos cómo
realmente puedes estilo y construido
sobre tu página web. Te veré la próxima vez.
2. Crear y enlazar archivos CSS: Hola y bienvenidos de nuevo
al segundo video de la serie de diseñadores web CSS. Vamos a repasar cómo
realmente puedes desarrollar tu
sitio web con color, fondo y
estilo como quieras. Para que como puedes ver aquí, si has pasado por
el curso anterior, verás que este es
el sitio web básico que
he creado con HTML. Ahora debes estar pensando en
cómo podemos realmente expandir esto para mejorar todo
tu lote. Entonces este es el sitio web aquí. Lo que he hecho es que he
abierto esto en servidores en vivo, por lo que presionas Control, haz clic y abre con Live Server. Se puede
ver esto automáticamente aquí, ¿verdad? Entonces si quieres
saber más sobre esto, si vuelves al curso de HTML
anterior, puedes ver cómo lo hice todo
está volviendo aquí. Si quieres desarrollar CSS, lo
primero es CSS significa Hojas
de estilo en cascada. Es básicamente el archivo que ayuda a tu
sitio web a crear, agarra color, fondo,
y cómo darle estilo. Así que vamos a crear un archivo CSS. Entonces si vas en este
signo más aquí, aquí
mismo, primera página dot CSS. Ahora la razón por la que
pongo primera página es porque el archivo HTML es la
primera página punto HTML. Y será una buena
manera de recordar esta primera página, solo CSS aquí. Una vez que creamos esto, ahora queremos saber cómo
podemos vincular los archivos juntos. Para
enlazar con archivos juntos, primero
debes entender que estos dos no están conectados. Primera etapa, la
segunda etapa sería, es conectarlos. El tercer escenario sería
ver si has hecho esto correctamente y esto realmente
está funcionando, que estaremos trabajando a
través de un par de videos. Veamos aquí. Para que
tu sitio web funcione, tendrías que escribir enlace. Digamos por ejemplo, que
desea tener la primera página dot CSS. Esto será rho
iguala hoja de estilo deformado como aquí entonces es que has hecho un enlace a tu página CSS. Entonces así es básicamente
como
primero emprenderías el documento CSS. En realidad lo vincula. este momento no deberías
ver ninguna actualización usar Eneste momento no deberías
ver ninguna actualización usar
sobre nada ahí una vez
o poner algo ahí dentro, entonces podrás
ver si funciona. Esto es todo para la primera parte
en realidad está haciendo
el documento CSS. Y el próximo par
de partes se
centrará en cómo realmente se puede ampliar sobre esto y cómo realmente puede actualizar
su página web a medida que avanza. Y te veré en
el próximo problema.
3. Añadir el primer color: Hola y bienvenidos a la tercera parte de esta clase de
Skillshare donde voy a repasar cómo puedes empezar a agregar color
a tu sitio web, empezando por la fuente. Vayamos aquí. Puedes ver aquí esto está
vinculado a hasta tu HTML. Primera página dot CSS.
Este es el expediente. Entonces si quieres empezar a
escribir código y CSS, lo primero
que quieres hacer es entender lo que está
escrito en HTML. Si queremos dar estilo
al título aquí. Mi primer sitio web va
a ir a aquí. Aquí está escrito uno, mi H1 tipo abierto, cerrar empate, mi primer sitio web. ¿ Quieres darle estilo a esto? Entonces la forma en que está escrito es uno, abrir corchetes rizados, cerrar corchetes usando
IntelliSense. Cerrar. Básicamente, esta es la
forma en que escribes en CSS. Ahora, como esto parecerá obvio, quiere ajustar el color, la codificación de
color a la ortografía
americana y estará codificada por colores en, como puede hacer de este un
color rojo, punto y coma rojo. Siempre no se olvide
el punto y coma porque mucho punto y coma es
todavía falla el trabajo. Ahora presiona Guardar o Comando Guardar en Mac, controla las ventanas guardadas. Automáticamente, la
magia comienza a suceder. color de tu primer sitio web acaba de
cambiar
de color negro a rojo. Vamos a probar una mezcla
de colores de los que
probamos azul luego por cambios
a azul con la obra. Sí, funcionará
porque solo cambia de color. Azul, violeta quizá
intentemos eso. Tal se volvió a azul inalámbrico. Por lo que se obtiene el entendimiento, en realidad
se les pide cuando lo
escribes en la sintaxis correcta, entonces puedes pararte. Como quieres hacer es
esto el seleccionado
el tipo de propiedad
se le firmó. Una vez que entiendes
el código aquí, en realidad
es bastante simple la forma en que
lo escribes para los demás. Así que digamos que quieres estilo párrafo tal vez con
el párrafo fuera, digamos que es la etiqueta p, vale, así que es una etiqueta p. La mejor manera de hacer eso aprender es sólo bajar aquí, ¿verdad? P espacio, abrir, cerrar etiqueta, color. Vamos a probar el color aquí. Digamos que quieres poner este nuevo color verde, punto y coma. Sólo se vuelve verde. Entonces
debes ser para ti, ¿por qué sólo se está volviendo
verde porque estos tres aparecen verdes aquí? Porque los he puesto
en la etiqueta del párrafo. Cuando los puso en la etiqueta del
párrafo pasa pasa es el cambio de color que esto? ¿ Es por esta
parte en el video. Vas a ir por encima. La siguiente parte es cómo
estilizas tu color. Entonces te veré
en la siguiente.
4. Añadir color de fondo: Bienvenido de nuevo a
otro video dentro la clase Scotia de CSS que va desde el
inicio del sitio web AT. Y éste estará
mirando cómo en
realidad se puede agregar color de fondo y coloreadas diferentes partes a un sitio web sin alterar
algunas otras partes. Si puedes ver aquí
tienes div id mains. Entonces si recuerdas en
el video anterior, miramos cómo
colorear cada uno quiere. Entonces tenemos el primer sitio web de
malware. Esto es básicamente bajo H1. Lo hemos puesto en una etiqueta, por lo que teníamos un selector. Ahora por ejemplo,
si no tenemos uno para tener esta olla y color y no
vamos a tener esta parte en, digamos que un color aqua que
tenemos que hacer es en realidad anexar esto a específico hacia
esta parte del sitio web. Lo clave a
recordar de esto es que necesitas usar
algo llamado ID. Si vuelves al
curso de HTML, lo verás. Un ID es básicamente lo que da a
los párrafos es nombre. Div id igual significa
solo usar esto para colorear esta sección específicamente
ir de aquí a aquí. Para colorear esta primera
herramienta para empujar la red de hashtag, abrir soportes rizados, y a partir de ahí
puedes escribir en color, que podría ser verde. Color de fondo. Así es como pones
fondo en aqua. He salvado esto. Lo que debería pasar es que
veas que este color se vuelve verde en este texto aquí
rodeado de una columna azul. Así es como
generalmente ponemos color con el ID y
en
realidad peinando aún más. Así es como se puede hacer
diferentes partes de la página web. Diferentes colores no son playas. Aquí, veamos mejor
código como su destino. Y podríamos tener aquí, esto es una clase. En lugar de tener
esta clase cambia identificación
esta noche y lo hace
mejor de lo que quiero que aprendas. El ID es igual al destino. Entonces, vale, vamos a
cambiar esto a un div. Cambiado todo el camino aquí. Entonces tienes tu div aquí. Vamos a tener otro
ir a descubrir la etiqueta h2. Lo mejor, codificador debería ver
nada cambia mucho aquí. Entonces lo que pasa es que
si vuelves aquí
ya que tenemos el div, ahora vamos a llamar a este div
id es igual a destino. Después de hacer eso, lo que pasa
es que si vuelves aquí, destino capaz de tener un color de
fondo de púrpura. Lo que debería pasar es, se actualiza el autoservicio
no funciona. Voy a mirar hacia fuera por
qué no está funcionando desde ahí para
averiguar cómo lo hizo para básicamente mirar destino aquí,
dividido mejor codificador. Aquí. Lo que debería pasar
es si haces clic aquí, pincha aquí, entonces ¿qué pasa? Se actualiza a sí mismo. Donut aquí. Es necesario guardar
cada página en página, HTML o CSS
para actualizar esto. Esto es todo para este video, donde miramos en el
siguiente par de videos, cómo cambiaron el font-weight, el tamaño de la
fuente y el estilo de fuente. Y te veré
en la siguiente.
5. Aplicar elementos con Asterisk: Hola y bienvenidos de nuevo a otro video de la clase
CSS Skillshare. Y en esta ocasión estaremos
viendo cómo podemos aplicar propiedades que tengan una infección toda la página
web y lo va a estar mirando hoy es
usar el asterisco seleccionado. Entonces si pongo el
asterisco seleccionar aquí, suceda es para que pueda
aplicar una propiedad, así tiene el uso de un borde. Entonces si quieres aplicar un borde que sea específico a
todos los sitios web, solo
golpeas frontera
un píxel, color sólido. Por lo tanto, ¿qué pasará? Debe ver un tablero
o venir alrededor de
todo su sitio web
y nuestro lo rodea. Entonces, ¿cómo cambiamos el color? Entonces de nuevo, podemos poner esto aquí. Y esto también cambiará el color dependiendo de qué tan
grueso quieras ir allí. Si lo haces demasiado grueso, también
puede afectar la intensidad
de la mirada en el sitio web. Por lo tanto, cuanto menos
sea, mejor. Depende de
cuánto quería
tenerlos a ambos la
razón por la que se apareciera alrededor de ciertas palabras porque están bajo ciertos
encabezados y devs. Por eso aparecerá la
junta directiva. Esto es lo que
miramos ahora mismo. Por lo que también podemos ajustar
el color de fondo, que podrías tener,
digamos, un color de playa. Esto te da un color melocotón que puedes cambiar
esto en un color rojo. Y te dará un color rojo. Y por lo tanto tienes amarillo, no hay cambio al amarillo. Así es como
realmente puedes dar estilo a tu sitio web con el
fin de dar un color
diferente completo por completo. Por lo que parece bastante
interesado en cuanto a cómo se puede utilizar la función
asterisco. Para ello, sólo un
buen color se le daría pH. Entonces en realidad
te muestra cómo funciona. A veces en realidad se puede tener un error y no funcionará. Así que asegúrate de revisar por qué no funcionó
en primer lugar. Esto te ayudará a mejorar tus habilidades por completo porque si tu sintaxis es la forma en que escribes el
código es incorrecto, se mostrará un error y la propiedad exacta que
no aparecerás entonces. Esto es todo para este video. Y el siguiente es, voy
a ir más allá cuanto a cómo puedes darle
estilo también. Gracias por ver esto y te veo
en la siguiente.
6. Añadir color en la búsqueda a la: Hola y bienvenidos a
otro video de serie
Scotia o el CSS que va desde el
principio a diseñador web. Y bueno, te estaré
mostrando cómo puedes hacer que tu sitio web sea
más interactivo, sobre todo donde más
público visita tu sitio web y
en realidad cosechar algunos de tus párrafos. Entonces digamos que queríamos tener esta línea verde o
línea verde en color. Y cuando algunos se cierran sobre la raíz actualmente cuando se
pasa el cursor sobre ella, en realidad no
hay color. La forma de mejorar
esto sería
escribir lo siguiente seleccionado. Entonces escribe P espacio de colon. Ahora, la razón al estar rehaciendo
esto y simplemente nos dan poco espacio sin soporte
rizado abierto, entonces solo intenta colorear la codicia de
línea. Di esto. Ahora lo que debería pasar es tu color básicamente debería pasar el
cursor cuando está aquí, entonces eso se ve mucho
más interesante, ¿
no cambia de
color cuando rondas? Ahora, lo siguiente que voy a hacer
es tener un color de fondo. Vamos a ahorrar encima de azul. Sucede es en realidad
sobrescribir el color azul. Color verde aquí. Aquí se ve verde bajo azul, haciéndolo un poco más interesante en comparación con antes. Entonces hay alguna forma de
interacción, por lo que es CSS. No necesitas particularmente otro
lenguaje de programación como JavaScript para hacer color. Css es servicio muy potente y proporcionó
el fondo coloreado y también los diferentes tipos de formateo que desea
en su sitio web. Por lo que esto realmente
ayuda a tu audiencia a involucrarse más con el
sitio web aumenta el tráfico, así
como el hecho de
que creen que
en realidad tienes más experiencia
y haciendo sitios web. Y en realidad aprendimos esto, escribiendo algunos pequeños
trozos de código. Puedes cambiar la parte superior de su
huésped anfitrión de tu sitio web. Entonces de nuevo, este es el tipo
de
interactividad del sitio web. Esto es todo por este
video haciendo el show, que es para ayudarte a entender las diferentes pausas a cómo
puedes construir al
sitio web del repositorio y en realidad aumentar tu comprensión de
hacer un sitio web en general. Gracias por ver este
video si te gustó, por favor continúa viendo
esta clase de Skillshare. Y espero que se unan a
nosotros y nos vemos en la siguiente.
7. Clases: Hola, y bienvenidos de nuevo a la otra redu en la clase
CSS Scotia mientras
repasamos cómo podemos usar algo llamado clases a cómo hacer que
tu sitio web sea más interactivo. Entonces, si vuelves a
los videos anteriores, verás que he
discutido el
ID de asesor y cómo puedes usar un hashtag específicamente para usar
TI para colorear tu sitio web. De acuerdo, entonces entonces esta vez
miramos las clases, y la diferencia
entre clases e identificaciones. Empieza con la clase. Lo tienes aquí dentro de la propia sección
incrustada de Davis. Verás
destino es hashtag. Destino con la clase
que necesitamos es clase de puntos. Entonces en este caso, titular de punto. Esto es de lo que queremos
cambiar de color, por tanto su signo. Esto es falso. Si acabo de refrescar esta
página, sucederá. ¿ Sigue ahí? Entonces lo que tenemos que hacer
aquí es su lucha. Sólo escribe punto. Vuelve aquí y
dice titular de punto. El color nos da una
cubierta de suelo. Esta pronta de cambio. Por lo que claramente la diferencia
entre, como mencioné, entre la idea y
las clases necesita usar
un punto donde se llame a la clase, como titular,
luego corchetes rizados, igual que antes,
destinos de ancho , hashtags. Entonces esta es una buena manera de
recordar cuál te gusta. Depende de ti si
prefieres TI con hashtag, preferimos clase width full stop para ello y
en realidad hace que sea más fácil para los codificadores saltar entre realmente escribir mucho código en el
HTML, especificando todo. Si solo puedes
enlazarlo nuevo archivo CSS, y hace que tu código sea mucho más ordenado en comparación con tener
todo el archivo HTML. Esto realmente ayuda
a romper esto. Ahora si tuviera que introducir
el concepto de fuentes, para que puedas tener un tamaño de fuente, digamos el titular, queremos que esto sea
grande, digamos tocar. Resulta ser
razonablemente pequeño porque preprogramado en definición
sugiere que esta es la ciencia. Digamos si
quieres ajustarlo, por lo tanto unos diez
píxeles usan más pequeño. Ahora quieres hacerlo más grande, 100 pixeles. Y buena manera. Lo mejor es que usar
la palabra medio o grande, usar en realidad la
especificidad de los píxeles en sí utiliza número específico de píxeles hace que un enorme
Alex bastante grande. Alguien ha sido tonificado
para hacerlo un poco más pequeño. Este tipo de video musical de
ruptura razonable que mira a un árbol de mujer. Lo que aprendimos aquí es cómo usar el tamaño de fuente para el color. Quiero la familia de fuentes. Puedes tener
diferentes selecciones. Solo usemos Second Geneva,
****** y san-serif. Esto cambia por
completo toda la familia
de fuentes de su párrafo, o en este caso el título. Esto es todo para este video. Así que te dije muchas
cosas en este momento. Así que te dije cómo
usar una clase, específicamente el
titular de puntos, el color, los tamaños de fuente,
cómo ajustas el tamaño, la fuente y la familia de
fuentes es cómo simplemente escribes una fuente
que va con ella. Nuevamente, espero que hayas disfrutado esto y
te veremos la siguiente.
8. Alinear texto: Hola y bienvenidos de nuevo
a otro video esta serie CSS donde voy
a repasar cómo puedes alinear tu texto de acuerdo a los requisitos de
tu sitio web y realmente mejorar
la legibilidad de tu sitio web también. Por lo que aquí se puede ver todos los textos
se ha alineado
al lado izquierdo de la página web. Ahora digamos que si
quieres alinearte con el centro y en realidad hacer
que parezca más interesante, en realidad llamar la atención del
público hacia ciertas partes de tu sitio web que podemos usar
es algo llamado un función de selector de alineación de texto. Entonces digamos que tengo
uno y quieres alinearte específicamente aquí
mismo, texto. Ahora puedes ver aquí hay
muchas funciones diferentes. Vamos a ver los textos
esbozan para hoy, Centro. Dr. Hit Save. Y lo que sucede es que lo alinea hacia el centro
de la página web. Así es como te alineas hacia el centro y en realidad
logras lo que quieres. Qué pasa si quisieras volver a
poner de nuevo a la izquierda, solo
podrías hacer esto. Y iremos enseguida de regreso. Pero vamos a presentar. Usando algunas habilidades profesionales, pondrá esto a la izquierda. Entonces esto va a la
izquierda, de inmediato, adivina por dos y a la
derecha cambiará para correr. Ahora, veamos
específicamente si quieres alinearlo de acuerdo a
elementos padre, derecha e izquierda. Por lo que personalmente llamas
justificado solo para comprar básicamente significa que
quieres razonar cantidades. Este sitio web, es pertenece a izquierda porque ciudad para posición. Y quiere ir allí porque su
posición natural donde quieres que tu texto sea
super mirando esto, realmente
podemos ajustar de
acuerdo a cómo deseamos. Ahora si fueras a buscar
algunas otras partes diferentes, ahora, tienes que colorear grado. De acuerdo,
color de fondo, digamos alinear texto. Veamos lo que tenemos
es que el centro va a pasar es si alinear el
texto en el centro. Por lo que esto realmente
te ayuda a poner de pie como
quieres programar el color de
fondo. Este caso, se ha
mejorado un sitio web. Y luego llamaremos a esto
aquí en términos de lista. Volviendo a nuestro HTML, que miran lo que ponemos aquí, luego ponemos esto como una lista. Por lo tanto, es
por eso que aparece y puedes cambiar tu
trimestre como desees. Y básicamente si
quieres lanzar la derecha, será la,
no se ve tan bien. Entonces voy a deshacer
el centro de nuevo. Esto se ve bien. Tal vez porque cómo el lado de las
noticias de última hora de ella a la izquierda plus, es igual a algunas formas diferentes
de textos que van a todas partes. Entonces si volvemos aquí, solo
salvaremos esto. Este es el titular,
texto a línea. Esto es lo que
pasaría entonces debería moverse hacia atrás en ese entonces. Entonces así es como
funciona de acuerdo a cómo querrías hacer es
que acabamos de deshacernos de esto. Simplemente concéntrese en esto específicamente. Ahora si vamos aquí, text-align, derecha, el motor de texto derecha
e izquierda va a la izquierda. Y simplemente básicamente
entender esto es un concepto clave para
mejorar el código. Pura causa si
sabes dónde
colocar tus textos y lo
hace mucho más fácil a la hora de diseñar realmente tu sitio web para que no
tengas que pensarlo. Qué textos va donde
si diseñas en un trozo de papel que querías
escribir, usa textos alinear. Cada uno puede demostrar
ser una herramienta poderosa. De todas formas, esto es suficiente de
mi parte por ahora, para este video. Los primeros videos
estaremos viendo cómo
realmente podemos mejorar aún más el
sitio web. Gracias por escuchar. Te veré en la siguiente.
9. Imágenes de fondo en CSS: Hola y bienvenidos de vuelta al segundo a último video de la serie de
habilidades Skillshare. Si bien vamos repasando cómo
agregar una imagen de fondo en el archivo CSS con el
fin de vincular esto a su sitio web mirado en
el curso anterior para HTML y se
verá en eso, CSS básicamente puede
agregar el imágenes. Mientras que en HTML en
realidad podemos agregar imágenes directamente al sitio web
usando el giro IMG. Ahora
te voy a enseñar cómo usar un usando el selector CSS específicamente
si tienes la clase,
vale, entonces, así que si
volvemos aquí, lo que tenemos es la imagen de clase div. Por lo que queremos subtitulado
divertido
intercambio de Star Wars y C se pone una imagen. Y voy a vincular esto para ser imagen de
fondo a cosa clave. Solo presta atención a
esta imagen de fondo, URL, logotipos
médicos aquí,
que pones la prensa guardar automáticamente. Lo que pasa es que nos
actualizas después. Y así es como
básicamente como la imagen en dentro de tus archivos
mirando esto hasta ahora, realidad
hemos
iniciado nuestro sitio web mucho más que antes. Retorno es añadir algunas imágenes con el
fin de realmente aumentar la interactividad a la página web son muy
simples pero básica sitio web. Usando esta poderosa herramienta, imagen
superior, imagen de fondo, realidad
puedes
tener
las imágenes en primer lugar y realidad
puedes solo
cantidades de esto también. Por lo que quieres contenerlo todo
lo contenía para ser así. Será una imagen pequeña, pero aún así replicarlas. Digamos que tienes otra. Inicial sucede es que sólo tiene una imagen inicial también cambió la posición
de las imágenes. Ve a la derecha o a la izquierda. Podemos hacer todo tipo de cosas
diferentes,
sobre todo con esto. Y gracias por
escuchar esto y espero que hayas disfrutado de esta clase y estaré haciendo un video divertido. Somos capaces de mirar hacia arriba abajo. Muchas gracias y te
veré en la siguiente.
10. Conclusión: Hola y bienvenidos al
video final en la introducción al CSS comenzando al diseño web y una hora la serie Skillshare. En este video, voy a
repasar los diferentes tipos de CSS, reglas y estructura detrás de él. Aplicando conocimientos
y construido sobre HTML en el curso anterior. Por supuesto, proyectos,
que estaré
poniendo pero en los proyectos a continuación. Sí, muchas gracias
por intentar realmente esta sesión de habilidades de Escocia
y trabajar su camino a través de las diferentes
clases y lecciones se ponen a través y utilizar Visual Studio
Code descargando esto, básicamente lo que has
hecho es que has creado tu propio sitio web
usando HTML, CSS. Te he enseñado en toda
la gama de videos. Y este curso es oficialmente ahora completa
introducción a CSS, comenzando a un diseñador web. Gracias por asistir
y el futuro, estaré haciendo un curso
más avanzado en el cobro CSS
enseñarte a construir sobre tus conceptos básicos y cómo está
mejorando la analogía de un topo. Espero que hayas disfrutado esto
y te veré en la próxima clase de Skillshare
que se estrenará. Gracias. Adiós.
Medic 10, Medical Student + YouTuber
