Transcripciones
1. Introducción a CSS: Bienvenido al
módulo CSS de este curso. En este módulo
aprenderemos sobre CSS. Css significa Hojas de estilo en cascada. Se utiliza para dar estilo a la página web. Ahora recuerda que cada vez que te
enseñes sobre HTML, te
he mostrado este diagrama, que es si tengo que borrar
diferentes extremos de una página web, dividiré mi trabajo
en tres partes. En la primera parte,
estructuraré la página web. En la segunda parte, lo
diseñaré con pitch. Y en la tercera parte, agregaré la lógica
contrarrestada con paciente. Ahora, hemos visto que para
estructurar la página web, utilizamos lenguaje de marcado HTML, no para descender
página web usamos CSS, también conocido como hojas de
estilo en cascada.
2. sintaxis de CSS: Para escribir CSS, tenemos que
seguir algunas reglas. Llamamos a eso reglas sintaxis. Entonces, en primer lugar, tenemos que
teclear el seleccionado, que en este caso es dP, dy. Ahora discutiremos más sobre los selectores en la conferencia de
selectores. Después de eso, tenemos que abrir
y cerrar los corchetes rizados. Entonces tenemos que añadir
el nombre de la propiedad, que en este caso es de color. Y después tenemos que
sumar el colon. Después de eso, tenemos que
sumar el valor de la propiedad, que en este caso es de color rojo. Y después tenemos que escribir este punto y coma para
terminar con la declaración, no para recapitular rápidamente. Uh, en primer lugar, hemos
añadido este selector. Después de eso, hemos agregado
este selector de propiedades. Después de eso hemos agregado
este valor de propiedad.
3. Uso CSS en archivo HTML: En esta conferencia,
aprenderemos sobre cómo agregar archivos CSS y HTML. Entonces, antes que nada,
voy a crear un documento llamado agregando CSS dot HTML. Conocimiento de género,
el código de calderas. Cambiaré el título a CSS. Dentro de la etiqueta body,
generaré una etiqueta P. Y agregaré aquí
agregando CSS y HTML. Ahora veamos si este
documento y copie el camino. Considerado mi párrafo
ha aparecido aquí. Hay tres formas de
agregar CSS y HTML. El primer camino es el CSS en línea. Para eso, agregaré aquí un atributo de
estilo. Ahora dentro de este atributo de estilo, agregaré el nombre de la propiedad, que en este caso es de color. Entonces agregaré el
valor de la propiedad. Por lo que voy a añadir aquí. Ahora agregaré el punto y coma. Ahora guardemos este documento. Se puede ver un
párrafo normal está en color rojo. Esta es la primera
forma de agregar CSS. Ahora la segunda forma
es CSS interno. Por lo que voy a quitar esto de aquí. Entonces para eso tenemos que añadir las etiquetas de
estilo dentro de la etiqueta head. Dentro de la etiqueta de estilo,
tenemos que añadir la seleccionada, que en este caso
es p. Y luego tenemos que abrir y cerrar
los corchetes rizados. Dentro de este corchete rizado, primero
tenemos que escribir
el nombre de la propiedad para ello. Voy a añadir aquí color. Ahora cambiaremos
el color a azul. Ahora guardemos este documento. Recarga la página. Se puede ver en el párrafo
tiene color azul. No se ha oído hablar de ello es CSS externo. Para eso, voy a quitar
esta cubierta de azulejo de aquí. Ahora guardemos este documento. Y ahora vamos a crear
un archivo más. Y voy a nombrar aquí styles.css. Ahora puedes nombrar
lo que quieras aquí, pero tienes que agregar
la extensión CSS de punto. Ahora dentro del archivo CSS. En primer lugar, tenemos que
usar el selector, que en este caso es p. Entonces tenemos que abrir y
cerrar los corchetes rizados. Discutirá más
sobre los selectores en esta conferencia de conferencias. Ahora dentro del selector
se refiere a tener que escribir el nombre de la propiedad. Entonces voy a dejar que el color del cabello. Entonces tenemos que leer
el valor de la propiedad. Voy a llegar aquí verde. Guardaré el documento. Y entonces tenemos que vincular
estos estilos dot archivo CSS a este archivo HTML para ese
insecto la cabeza hasta, tenemos que usar la etiqueta de enlace
para ese tipo aquí enlace. Y luego presiona la tecla Tab. Después de eso dentro
del atributo HREF, hay
que agregar la
ruta del archivo CSS. Así que ahora mi
archivo HTML y CSS EN la misma carpeta. Así que sólo dejaré que el
nombre de este archivo CSS. Ahora guardemos este documento
y recarguemos esta página. Ahora lo puedes ver
el párrafo tiene color verde. Entonces para recapitular rápidamente, hemos visto que
hay tres formas de
agregar el CSS y el archivo HTML. La primera forma es CSS en línea, la segunda forma es CSS interno y es difícil
es CSS externo. Css es la buena manera de
escribir CSS y el archivo
HTML porque al
crear proyectos grandes, tenemos que escribir un
montón de código CSS y contrarrestamos todo ese
código en un solo archivo. Esta es la buena manera en la que separamos el CSS y el HTML.
4. Selectores en CSS: En este video,
discutiremos sobre los selectores. Entonces lo que he hecho es que
he creado este archivo HTML. Ahora dentro de este archivo HTML, generaré un código
de calderas. En el título
llegaré aquí selectores. Ahora dentro de esta etiqueta body, generaré una etiqueta p. Y luego dentro de esta etiqueta p, escribiré aquí,
este es un párrafo. Ahora digamos que quiero dar
estilo a este elemento HTML. Para soportar este elemento HTML, la primera forma es
agregaré tu atributo de estilo. Entonces agregaré a tu
color. Entonces yo añadiría 200. No, veré si
este documento HTML, después de eso, copiaré
el camino desde aquí. Ahora se puede ver que el color
de este párrafo no lo es. Esta es una forma rápida de dar
estilo a este párrafo. Digamos que tengo un archivo muy
grande como demo. No quiero agregar
estilos en línea li aquí porque quiero agregar mucho
estilo a este elemento. Lo que voy a hacer es
quitar este azulejo de aquí. Entonces guardaré este documento. Luego dentro del archivo CSS. Escribiré a mis estilos aquí. En primer lugar,
enlazaré este archivo CSS y ahora guardaré este
documento y recargaré la página. Ahora puedo ver el color de
mi párrafo es negro porque no he agregado
ningún estilo ahí. Ahora lo que voy a hacer
es entrar en este archivo CSS y luego voy estilo a este p elementos
para darle estilo a este PLMN. En primer lugar, tengo que
seleccionar este elemento p. La primera forma de
seleccionar este elemento p es usar la etiqueta div seleccionada. Para eso
entraré en el archivo CSS. Y entonces añadiría aquí p. si, si quisiera seleccionar una
etiqueta en del archivo HTML, solo
tengo que escribir
este nombre de etiqueta. Entonces por eso he
escrito aquí p,
No, voy a abrir y cerrar
los corchetes rizados. Entonces aquí voy a conseguir mis estilos. Entonces por ejemplo,
agregaré aquí color azul. No te preocupes si no
entiendes esta propiedad. Voy a explicar esta pobreza en la conferencia de colores
por ahora solo para entender que esta propiedad nos
da el color
en el texto. Por lo que guardaré este archivo. Entonces voy a refrescar esta página. Se puede ver un color oscuro de este párrafo se ha vuelto azul. Ahora agregaré tu etiqueta H1 y luego
agregaré aquí encabezado. Guardaré este documento. Se puede ver en mi rubro
ha aparecido aquí. Ahora voy a decir este rubro. De igual forma lo que hemos
hecho aquí con la etiqueta P, lo
haré con la etiqueta H1. Escribiré H1, y luego abriré y
cerraré los tirantes rizados, y luego cambiaré el
color a, digamos verde. También he añadido aquí punto y coma
para terminar con este comunicado. Ahora guardemos este documento
y recarguemos la página, no Doctorado de mi
rubro es verde. El segundo tipo de
selector es la conferencia de clase. Lo que haré es copiar y pegar esto
varias veces. Escribiré aquí dos, aquí, tres, y luego
no estoy aquí por ahora. Eliminaré este
rubro al encabezamiento uno. Guardaré este documento
y recargaré la página. Se pueden ver aparecer los encabezados. Ahora digamos que quiero darle
estilo a esto todos los elementos. La primera forma en que puedo hacer esto, puedo añadir todos los
textos y estilo aquí. Lo que trato de decirte es que voy estilizar todas las
etiquetas por separado. Por ejemplo, si
quisiera aguantar la etiqueta h2,
llegaré aquí son dos. Y entonces dejaré que el color.
Y luego digamos marrón. Entonces tengo que hacer esto
por todos los elementos. Ahora, por ejemplo, quiero que todos estos elementos
agreguen el mismo estilo. En este ejemplo quiero añadir el mismo color en todos estos
elementos, que es marrón. La primera forma en que puedo
hacer esto es
copiaré esto y luego lo
pegaré aquí. Y luego
lo pegaré aquí también. Y entonces tengo que hacer
esto a todas las etiquetas. De esta manera, he
repetido lo mismo y
otra vez
para todas las etiquetas. Y en general se considera una mala práctica repetir
las mismas cosas. Entonces lo que haré es agregaré un atributo a todas las etiquetas, que es el atributo class. Para eso
presionaré la tecla Alt y luego haré clic aquí, también aquí, y también aquí. Ahora presionaremos el espacio y
después no tendré clase. Este es el futuro del código VS. Puedo añadir múltiples cursores. Deje que su clase equivale a dos
y luego dobles cotizaciones. Entonces digamos mi clase. Puedes añadir cualquier valor aquí. Ahora voy a copiar esto
y guardar la estimación. No para seleccionar las clases, tenemos que usar la clave de punto. Entonces, antes que nada,
eliminaré todo esto de aquí. Entonces escribiré un punto, y luego pegaré lo mismo,
que
la he copiado aquí. Entonces básicamente, todo lo que tenemos que
sumar la clave de periodo, y luego tenemos que
sumar el mismo valor, que hemos dado en
el atributo class. Ahora, abriré y
cerraré los corchetes rizados, y luego
te dejaré tener color. Y entonces tengo aquí marrón. No, guardaré este expediente.
Luego vuelve a cargar la página. Ahora puedes ver que todos mis elementos no tienen color marrón. Ahora digamos que tengo
un rumbo H1 más. Entonces agregaré
aquí rumbo uno. Eliminaré esto todas las
clases atribuyen conocimiento, guardaré este archivo, y
luego recargaré esta página. Se puede ver todos mis
estilos están decididos. No, alejaré de aquí. Entonces digamos que sólo quiero dar estilo
a este rubro. Encabezado. Si selecciono este
encabezado con la letra de texto, este encabezado
también se
seleccionará automáticamente porque este
es también un encabezado H1. Entonces lo que puedo hacer es
agregar aquí un atributo de clase. Y luego agregaré
aquí rumbo clase. Ahora voy a copiar esta
clase desde aquí. Y vamos a ver si el documento, y luego pegaré
esta clase aquí. Por ahora, voy a
quitar este estilo. Ahora voy a abrir y cerrar
los corchetes rizados. Y luego dentro de estos
corchetes rizados agregaré color. Ahora guardemos este
archivo, recargue esta página. Ahora considera esto
sólo este rubro. Esto es la forma correcta de hacer esto, pero sólo quiero
seleccionar este rubro. Y generalmente usamos clases para seleccionar uno o más tipos
de encabezados o elementos. Lo que puedo hacer es que
llegaré aquí ID, y guardaré este documento. Y luego dentro del
archivo CSS para seleccionar el ID, tenemos que usar el hashtag, hashtag knife y guardar este documento y
refrescar esta página. Y se puede ver que
nada ha cambiado aquí. Lo que haré es que
cambiaré este color a rojo. Ahora voy a guardar este
archivo, recargar esta página. Se puede ver que el encabezado tiene un estilo
separado
usando el selector de ID.
5. Colores en CSS: En este video, discutiremos
sobre los colores en CSS. En primer lugar, voy a
crear un nuevo archivo llamado colores dot HTML. Voy a cerrar todos
los tipos desde aquí. En el título.
Agregaré colores de cabello en CSS. Ahora dentro de esta etiqueta de cuerpo, escribiré D. Entonces escribiré aquí,
este es un párrafo. Ahora guardaré este archivo. Para ver esto claramente,
voy a hacer zoom presionando Control y luego la mayoría lo
hará para esta final, no
quiero crear
un archivo CSS específico, así que por eso me quedaré
usando el CSS interno. Sabemos en primer lugar, seleccionaré esta etiqueta p
usando el selector de etiquetas. Si escribo aquí color, ahora
guardaré el documento. Se puede ver el color
de mi párrafo es porque he añadido
un color atribuido. Ahora lo que hace el atributo de color es agendas el color del texto. No cambia el
color del fondo. Sólo cambia el color del texto en la conferencia de
antecedentes, vamos a aprender a cambiar el
debate sobre este elemento p. Por ahora, solo entiende
que el buffer de color t solo cambia el
color del texto. Ahora hay muchas formas en que puedo
agregar valores en el color para d. La primera forma es que puedo escribir
directamente el
nombre de este color, que es en este caso que
he hecho aquí. Ahora la segunda forma es que
puedo escribir el valor hexadecimal, ya
sabes, el valor hexadecimal
es un código de colores de seis dígitos. Los dos primeros dígitos
representan el radical y los dos segundos
representan el color verde, y luego los dos últimos dígitos
representan el color azul. Por ejemplo, si escribo
aquí 00, FF, B15, y luego ahora si
guardo este documento, ahora se puede ver que el color
de mi etiqueta p ha cambiado. El segundo formato
de color de escritura es formato
RGB para la
sintaxis de la escritura, formato
IJ es RGB. Y luego tenemos que anexar
cerrar los corchetes. Y luego dentro de estos corchetes, el primer valor que damos
representa el reticular. El segundo valor que damos
representa el color verde. Y el tercer valor que dará
representa el color azul. Y todo el valor
oscila entre 0 y 255. Por ejemplo, si escribo aquí 59. Y luego digamos que 5795, guardó un documento y
recargue esta página. Se puede ver que mi
color ha aparecido aquí. Ahora, no tienes que recordar
todos los códigos de color. Si terminas código VS. Y luego puedes
directamente quienes están aquí, y luego obtendrás
este selector de color. Ahora puedes elegir cualquier
color de tu deseo. Vamos a tener en este
bien, y este es el código de color de este color. Ahora si guardo el documento
y recargo esta página, se
puede ver en Micron
ha aparecido aquí, la parte de la off escribiendo el valor del color es RGBA. Valor. Para eso,
agregaré aquí RGB. Las tres primeras letras, RGB representa el
rojo, el verde y el azul. Los últimos ocho
representan el alfa. Lo que quise decir por alfa es doscientos cincuenta y
nueve, treinta y ocho. Después 75. Sabes, tengo que
escribir aquí el valor alfa. Este valor oscila entre 0 y uno. Si escribo aquí 0, entonces el
color es totalmente transparente. Si agrego aquí, entonces el
color es totalmente opaco. Por ejemplo, si
escribo aquí 0.7, y si guardo este documento
y recargo esta página, puedes ver los efectos
Alpha aquí. Si agrego un 0, entonces el color se vuelve totalmente
transparente y no lo podemos ver. Ya lo puedes ver. No puedo ver
el color. Si agrego aquí. Ahora si guardo este documento
y vuelvo a cargar la página, se
puede ver que el color
es totalmente visible. Siguiente forma de escribir el valor HSL de
Kennedy. Por lo que voy a añadir aquí. Entonces los corchetes rizados.
El primer valor representa la u y el segundo valor
representa la saturación. El tercer valor
representa la ligereza. El valor de este enorme es en grados que van
de 0 a 360. Si agrego aquí 25, y entonces este valor de saturación
está en el porcentaje, por lo que no voy a tener 9%. Entonces la ligereza también
es por ciento de valor diario. Añadiré aquí un cuchillo
T6 por ciento y guardaré el documento
y cargamos esta página. Se puede ver que el
color apareció aquí. Ahora, te mostraré un truco para ese
truco si agrego aquí. Y luego por aquí, se puede ver en mi selector de color
ha aparecido aquí, 95 cambian este color a, digamos, de tipo verdoso. Y luego si hago clic aquí, primera vez,
obtendré este valor hexadecimal. Si hago clic en tu segunda vez, obtendré este valor HSL.
6. Comentarios de CSS: En esta conferencia, echaremos
un vistazo a los comentarios en CSS. En primer lugar, voy a crear un nuevo archivo llamado
comentarios dot HTML. Ahora dentro de este
comentario dot archivo HTML, primer lugar,
generaré un código de calderín. Y entonces
dejaré que sus comentarios. Dentro de esta etiqueta body, generaré un elemento H1. Entonces llegaré aquí lastimando. Ahora generaré una
etiqueta de estilo dentro de esta etiqueta de cabeza. Ahora, mientras aprendemos HTML, hemos visto qué son los
comentarios y cómo escribir comentarios en HTML. Entonces para recapitular rápidamente, para escribir comentarios en HTML, primero
tenemos que escribir
el corchete angular, luego el signo de exclamación, y luego tenemos que escribir
d double dash también, tenemos que teclear esto
para cerrar este comentario. Y cualquier cosa entre esto, lo
consideraremos como un comentario. Por ejemplo, si escribo
comentarios y luego lo
considerará como un comentario y no renderará en el navegador, no escribo comentarios en CSS, tenemos que escribir el signo de
exclamación. Y luego el entonces para
cerrar este comentario, tenemos que escribir el signo de
exclamación. Ahora, cualquier cosa entre estos bien considerados como
un comentario en CSS. Por ejemplo, si
escribo aquí comando, lo considerará como un comentario.
7. Fondos CSS de fondos: En este video, discutiremos
sobre los fondos en CSS. En primer lugar, voy a crear un nuevo archivo llamado
fondos dot HTML. Dentro de este archivo. En primer lugar, generaré un código
de calderas. Entonces cambiaré este
título a fondo. Desde CSS dentro de esta etiqueta body, generaré la etiqueta H1. Entonces agregaré aquí encabezamiento. Después de ese promedio
generar una etiqueta p. Y entonces agregaré aquí,
este es un párrafo. Ahora guardemos este documento y luego copiemos el
camino desde aquí. Se puede ver en el encabezamiento
y párrafo aparecieron aquí. Ahora escribiré el peinado del cabello. Ahora hablemos de
antecedentes desde CSS. Entonces
las propiedades de fondo CSS nos permiten dar estilo a fondos
de un elemento HTML. Por ejemplo, si
escribo su cuerpo. Entonces discutamos sobre
el primer Verde pasado, que es propiedad de
color de fondo. Por lo que agregaré aquí color de
fondo. Entonces escribiré un nombre de color. Vamos a elegir el color chocolate. Ahora guardemos este documento. A continuación, actualice esta página. Se puede ver que el color
de
fondo del cuerpo ha cambiado a color chocolate en lugar
de color de fondo. Si tengo coloreado. Si guardo este documento
y refresco la página, se
puede ver el color del texto
de todo lo que dentro la etiqueta del cuerpo ha cambiado
a color chocolate. Ahora, también puedo agregar color de
fondo en elementos
HTML como HL7 y P. Por ejemplo. Escriba aquí. Entonces vamos a añadir el color de
fondo. No aceptar este documento. A continuación, actualice esta página. Se puede ver que el color de
fondo del encabezado ha cambiado a azul. Ahora no puedo ver estos textos
en este color de fondo, por lo que también cambiaré
el color del texto a blanco. Ahora guardemos este documento
y actualicemos esta página. Se puede ver que el color
ha cambiado a blanco y luego el fondo
ha cambiado a azul. Ahora hablemos de la propiedad de segundo
fondo, que es la propiedad de
imagen de fondo. Para eso,
seleccionaré una etiqueta de cuerpo. Y luego dentro de esta etiqueta corporal, agregaré aquí una imagen de
fondo. Ahora dentro de esta imagen de
fondo, tengo que usar la función URL. Entonces para eso tengo que escribir una URL y luego abrir y
cerrar los corchetes. Ahora dentro de este soporte
tengo que usar el cuarzo, por lo que voy a utilizar las cotizaciones dobles. También puedes usar cotizaciones individuales. Ahora dentro de esta doble cotización, tenemos que dar el
camino de la imagen. Ahora se puede ver que mi imagen y este archivo está en
la misma carpeta. Así que puedo
escribir directamente el nombre de esta imagen aquí, bg dot GIF. Ahora guardemos este
archivo, recargue esta página. Se puede ver que mi
imagen ha aparecido aquí. No, no puedo
ver claramente este texto, así que cambiaré el color del
texto a blanco. Para eso, agregaré color de cabello. Entonces escribiría aquí, ¿verdad? También puedes darle a este texto color una y p etiqueta por separado. Pero si tengo un contenedor, que en este caso es cuerpo, puedo escribir directamente
color blanco y todo está en este cuerpo
habrá descolorido. Por lo que ahora si refresco esta página, se
puede ver que mi color
ha cambiado a blanco. Ahora también puedo dar esta imagen de fondo
en elementos también. Entonces tu tarea es
probar esto por ti mismo. Ahora por defecto, la propiedad de imagen de
fondo se repite la imagen tanto
horizontal como verticalmente. Entonces para evitar esto, tenemos que escribir aquí repetición de fondo. Entonces tenemos que escribir
aquí no hay repetición. Si escribo node repeat, entonces el, entonces la imagen que queríamos repetir tanto en horizontal como verticalmente
. Y si quiero repetir
esta imagen horizontalmente, entonces puedo escribir aquí, repetir x Ahora si guardo este archivo, recargue esta página, se puede ver que mi imagen se ha
repetido horizontalmente. Ahora si quiero repetir
esta imagen verticalmente, puedo añadir aquí repetir por nueve. Si cargo esta página, se puede ver en mi imagen
repetida verticalmente. Ahora no tenemos ningún
contenido extra en esta etiqueta de cuerpo. Entonces la imagen ha cortado de aquí, no las segundas propiedades de
fondo, propiedad posición de
fondo. Entonces, antes que nada, le
haré saber ese latido. Entonces dejaré su posición
de fondo. Entonces si escribo aquí bien, entonces si guardo este documento
y recargo esta página, se
puede ver en mi
fondo está en la derecha así como en la parte superior. Si escribo tu centro, guardo este archivo y
actualizo esta página, puedes verlo ahora mi
fondo no está centrado. También puedo establecer esta posición de
fondo adecuada D en este elemento también fin de discutir sobre el adjunto de
fondo sobre t. Así que si escribo aquí
teniendo en adjunto, generalmente podemos escribir
aquí dos valores. El primer valor, scroll, si escribo tu
scroll y luego guardo este archivo y actualizo esta página, ahora no puedes ver
nada nuevo aquí. Para eso. Escribiré aquí p, luego escribiré cargando 25. Veamos. Ahora lo que he hecho es que he
copiado y pegado esta etiqueta p dos veces. Ahora si desplazo este documento, se
puede ver que esta
imagen también se desplaza. Si cambio esto a fijo y luego guardo este
archivo y actualizo esta página. Ya lo puedes ver si desplazo el documento de la
imagen se fija aquí. Ahora, también tengo una propiedad de
taquigrafía de fondo, lo que significa que puedo reemplazar esta TODAS las partes
de fondo por una sola propiedad. Entonces la sintaxis de eso es, primer lugar, tenemos que
agregar un selector. Entonces tenemos que escribir
aquí fondo. Después de eso. En primer lugar, tenemos que
agregar un color de fondo. Después de eso, tenemos que
agregar una imagen de fondo. Ahora tenemos que separar
estas propiedades con velocidad después de un
fondo diverso, repita. Después tengo que escribir tu archivo adjunto
de fondo. Después de eso tengo que escribir
aquí posición de fondo. Voy a comentar esta parte L. Veamos un ejemplo de uso de esta propiedad de
taquigrafía recámara. Dejaré su cuerpo.
Entonces en primer lugar, anuncio sus antecedentes. Después de eso, he escrito
aquí color de fondo. Ahora si no quiero agregar esta propiedad de color de fondo, puedo omitir esto. Entonces, por ejemplo, puedo
agregar directamente esta propiedad de
imagen de fondo. Entonces para eso
escribiré esa URL. Y luego escribiré
el nombre de la imagen. Entonces tengo que escribir tu espacio. Y entonces tengo que añadir esta propiedad de repetición de
antecedentes. Por lo que te haré saber repetir. Entonces tengo que añadir esta propiedad de apego de
carga. Ahora si no quiero
agregar esta propiedad, puedo omitir esto desde
aquí. Después de él. Tengo que sumar esta posición de
fondo sobre T. Así que escribiré aquí centro. Entonces tenemos que sumar este
punto y coma para terminar con el enunciado. Ahora guardemos este archivo y
luego haga referencia al discurso. Ahora se puede ver que las fiestas de
fondo
se han aplicado aquí con esta propiedad
única de taquigrafía. Es muy útil a la hora de
crear sitios web.
8. Modelo de caja de CSS: En esta conferencia, discutiremos sobre el modelo de caja en el CSS. Modelo de caja es
concepto muy importante para conocer NCSS, conocer cada elemento HTML como un cuadro rectangular
en la página web, contiene muchas propiedades
como relleno de margen, etcétera Ahora voy a resumir todas
estas propiedades en definitiva, relleno crea un espacio entre el contenido
y el borde. La propiedad border,
como el nombre especifica, agrega un borde al elemento. El inmueble de margen crea
un espacio fuera del tablero.
9. Bordes de CSS: En esta conferencia,
discutiremos sobre las fronteras en CSS. Entonces, antes que nada, voy a crear un nuevo archivo llamado
borders dot HTML. En primer lugar,
generaré un código de calderas. Ahora dentro de este título
escribiré aquí fronteras en CSS. Ahora dentro de esta etiqueta body, generaré una etiqueta p. Y luego agregaré
aquí párrafo. Ahora guardemos este documento y luego copiemos el
camino desde aquí. Se puede ver que el
párrafo ha aparecido aquí. No, voy a mecanografiar peinado. Entonces dentro de la
etiqueta de estilo, agregaré el CSS. En primer lugar,
seleccionaré esta etiqueta p. Entonces agregaré las propiedades del
borde. Ahora,
los bordes, como su nombre indica, en el borde
del elemento HTML. El primer atributo en el borde es el atributo de estilo de
borde. Para eso añadiría
aquí fronteras Tailandia. Hay muchos valores para la
propiedad de estilo de borde que se puede ver aquí a la más utilizada es
el sólido punteado y ninguno. Entonces por ejemplo,
voy a añadir aquí sólido. Ahora, la segunda propiedad
es propiedad de radio fronterizo. Entonces dentro de esta propiedad
puedo agregar valores en pixel o algunos
valores predefinidos como medio delgado, etc. Puedes buscar
en Google un valor
más predefinido
para frontera con libertad. Ahora para este ejemplo, voy a dejar aquí diez píxeles. No esa propiedad dura es
la propiedad del color del borde. Ahora, propiedad de color Border, como su nombre indica, en
el color del borde. Por ejemplo,
agregaré aquí un negro. Ahora guardemos este
archivo, recargue esta página. Se puede ver que la
frontera ha aparecido aquí. Si cambio este
sólido dos discontinuos. Ahora si guardo este archivo y la displasia de carga, lo
puedes ver. Observe que el borde está discontinuado. Sé que voy a cambiar
esto a sólido. Entonces agregaré este
ancho de borde a cinco píxeles. Ahora guardemos este
archivo, recargue esta página. Ya se puede ver la
frontera se ve bien. Ahora también puedo especificar un borde
con dos o cuatro valores. Como por ejemplo, si llegué
aquí cinco píxeles a pixel. Esto significa que la tasa de borde en la parte superior e inferior será cinco píxeles y la escritura de borde en izquierda y derecha
será de dos píxeles. Ahora guardemos este archivo
y recarguemos esta página. Se puede ver a la velocidad del
agua y a la izquierda o a es dos píxeles y superior e
inferior es de cinco píxeles. También puedo sumar cuatro valores aquí. Por ejemplo, si agrego seis
píxeles y digamos diez píxeles. Ahora guardemos este archivo. Ahora lo que esto significa es que la tasa del
borde en la parte superior será cinco píxeles a pixel en la
parte inferior será de seis. Pixel en la izquierda
será de diez píxeles. Ahora si cargo esta página,
puedes ver los cambios aquí. Ahora hay una propiedad de
taquigrafía fronteriza, lo que significa que puedo especificar
toda esta propiedad en una sola propiedad fronteriza.
Para eso, agregaré aquí. El primer valor de esta
frontera es el borde de la misma. El segundo inmueble
es de estilo fronterizo. Color del borde.
Voy a comentar esto. Ahora te mostraré el ejemplo
de la propiedad de taquigrafía de mantequilla. Voy a añadir aquí frontera. Y luego la primera propiedad
es mejor leer propiedad. Entonces voy a añadir aquí, digamos tres píxeles. El segundo inmueble es
estilo de borde sobre t servlet aquí, propiedad
sólida es la propiedad de color de
borde. Por lo que voy a añadir aquí. Y luego agregaré el
punto y coma para terminar con el comunicado. Ahora guardemos este archivo. Recarga esto. Se puede ver que la
propiedad de taquigrafía funciona bien. Ahora hay un nombre de propiedad
más, radio
fronterizo sobre t Para eso, agregaré aquí border-radio. No se
utiliza el suburbio de zona fronteriza t para redondear las fronteras. Por ejemplo, si
agrego nuestros dos píxeles, entonces desaparecerá. Se puede ver que el borde
es una forma redondeada aquí. Voy a cambiar esto a, digamos 30 pixeles. Ahora vamos a defender este expediente. Entonces se puede ver que el
borde ahora está redondeado. Estas son propiedades muy útiles
al crear sitios web.
10. Margines y alzado: En esta conferencia, discutiremos sobre Hoover que sintió en CSS. En primer lugar, voy a
crear un nuevo nombre de archivo hovers dot HTML. Ahora dentro de este archivo, en
primer lugar,
generaré un código de calderas. Entonces en el
nivel de título aquí, hover efectos. Ahora dentro de esta etiqueta body, voy a crear una etiqueta H1. Ahora, agregaré aquí encabezamiento. Ahora guardemos este
archivo y copie la ruta. Ahora generaré una etiqueta de estilo. Ahora hablemos de efectos de
hover. Para crear un efecto de hover, tenemos que usar una pseudo-clase de
hover. Ahora discutiremos más sobre pseudo-clases y
pseudoselectores más adelante. Para crear un efecto de hover. En primer lugar, tenemos que
teclear este selector. Entonces tenemos que teclear colon. Después de eso, tenemos
que escribir hover. Entonces tenemos que abrir y
cerrar los corchetes rizados. Y luego tenemos que escribir
nuestras propiedades aquí. Ahora puedes agregar muchas
propiedades en efectos de hover. En primer lugar,
escribiré aquí. Y luego escribiré aquí, hover. Ahora quiero cambiar el color. Cuando alguien se cierne
sobre el rumbo, llegaré aquí color. Entonces escribiré aquí el nombre del
color, digamos marrón. Ahora guardemos este archivo
y refresquemos esta página. Se puede ver si me desplaza aquí, el color cambia para mezclarse. Ahora, también puedo cambiar
el color de fondo. Entonces dejaré su trasfondo. Entonces escribiré tu negro, y luego cambiaré
este color a blanco. Ahora guardemos este
archivo y refresquemos esta página. Por aquí. Se puede ver en el fondo, color ha cambiado a negro y el color de este texto
ha cambiado a morder.
11. Altura y anchura: En este video,
discutiremos sobre las
propiedades de altura y anchura en CSS. En primer lugar, voy a crear un nombre de archivo altura
y ancho punto HTML. Ahora generaré
un código de calderas. Entonces en el título
aquí mismo, altura y anchura. Ahora dentro de esta etiqueta body, generaré una etiqueta H1. Y luego
agregaré aquí encabezamiento. Ahora guardemos este archivo. Se puede ver el
encabezamiento apareció aquí. Ahora abriré y cerraré estas etiquetas de título
dentro de esta etiqueta de cabeza. Ahora seleccionemos esta
etiqueta H1 usando el selector de etiquetas. Ahora vamos a discutir sobre la propiedad de
altura y anchura. Así que no leí
propiedades nos permite
agregar una altura y anchura
en el elemento HTML. Tenga en cuenta que las propiedades de altura
y anchura están dentro del
relleno y el borde. Para explicar esto con claridad, agregaré una frontera a la una. Y luego agregaré aquí
dos píxeles, rojo sólido. Guarde este archivo. Se puede ver en la frontera
ha aparecido aquí. Ahora vamos a usar la propiedad
height. Entonces dentro de esto puedo agregar el valor de píxel así
como el valor porcentual. Entonces por ejemplo,
agregaré aquí un 100 pixeles, guardaré este archivo, y
recargaré esta página. Se puede ver en el
encabezado no encabezado tiene la altura de unos 100 píxeles. Si hago clic con el botón derecho allí y
luego haga clic en este inspector. Se puede ver las
Herramientas para desarrolladores de Chrome ha aparecido aquí. Ahora lo que voy a hacer es
hacer clic aquí. Entonces voy a hacer clic aquí.
Vendrá en el fondo. Se puede ver en el encabezamiento
que he añadido aquí aparece aquí. Por lo que puedo hacer click en este encabezado y luego
puedes ver aquí todas
las propiedades CSS que
he aplicado en la etiqueta H1. También puedo cambiar la
altura desde aquí. Y para eso voy a hacer clic aquí. Y luego presionando
la tecla de flecha hacia arriba, el valor aumentará. Al presionar la tecla de flecha hacia abajo, el valor disminuirá. Ahora, también puedo hacer
esto con una frontera. Entonces también puedo elegir
el color desde aquí. Se puede ver en el
selector de color ha aparecido aquí, puedo cambiar este color. Tenga en cuenta que estos son cambio
temporal. Si refresco esta página, entonces todos los cambios
desaparecerán. Para establecer los cambios. Primero tienes que hacer
el cambio y luego copiar todos los cambios
que has hecho aquí, y luego pegarlo en tu código fuente.
Con el fin de guardar este archivo. Quitarlo de aquí.
Guarde este archivo. Ahora considerados, los
cambios aparecieron aquí. Ahora hablemos de
deshacerse de la propiedad. Cambiaré esto a 100 pixeles y luego
escribiré aquí. Entonces también puedo agregar
el valor de píxel así
como el
valor porcentual en la propiedad root. Por ejemplo,
escribiré aquí 60 pixeles. Ahora guardemos este archivo
y actualicemos esta página. Se puede ver en la
escritura es de 60 pixeles y se puede ver que el
encabezado está desbordando aquí. Si escribo aquí desbordamiento
oculto, guarde este archivo. Ahora si refresco esta página, se
puede ver en la parte del
teléfono ha ocultado. También puedo establecer este desbordamiento en la dirección horizontal y
vertical. En este caso, el desbordamiento es desde la dirección horizontal. Voy a cambiar esto a, digamos, 200 pixeles. Actualiza esta página.
Puedes empezar por aquí. Ahora también puedo establecer la
tasa en valor porcentual, como también puedo añadir aquí 50%. Guarde este archivo,
actualice esta página. Se puede ver que
el material 3D 50, 50% por ciento se calcula a partir del elemento padre porque el elemento padre tiene
la tasa de un 100%, el elemento hijo
se ha calculado automáticamente. Se deshace. Ahora también puedo iniciar la
altura 250%, está aquí. Ahora guardemos este
archivo, recargue esta página. Se puede ver que aquí no
pasó nada
porque porque se puede ver
que la tasa de elemento
padre no es el ancho
total de este navegador. Si pongo el cursor aquí, se puede ver que la altura
del elemento padre, no cubre
la página web completa. Es por eso que en este
problema ocurre. Ahora te diré cómo solucionar este problema en el sexo
receptivo entonces, cuando
hablaremos de la capacidad de respuesta.
12. Efectos de bloqueo: En esta conferencia, discutiremos sobre Hoover que sintió en CSS. En primer lugar, voy a
crear un nuevo nombre de archivo hovers dot HTML. Ahora dentro de este archivo, en
primer lugar,
generaré un código de calderas. Entonces en el
nivel de título aquí, hover efectos. Ahora dentro de esta etiqueta body, voy a crear una etiqueta H1. Ahora, agregaré aquí encabezamiento. Ahora guardemos este
archivo y copie la ruta. Ahora voy a generar una etiqueta de estilo. Ahora hablemos de efectos de
hover. Para crear un efecto de hover, tenemos que usar una pseudo-clase de
hover. Ahora discutiremos más sobre pseudo-clases y
pseudoselectores más adelante. Para crear un efecto de hover. En primer lugar, tenemos que
teclear este selector. Entonces tenemos que teclear colon. Después de eso, tenemos
que escribir hover. Entonces tenemos que abrir y
cerrar los corchetes rizados. Y luego tenemos que escribir
nuestras propiedades aquí. Ahora puedes agregar muchas
propiedades en efectos de hover. En primer lugar,
escribiré aquí. Y luego escribiré aquí, hover. Ahora quiero cambiar el color. Cuando alguien se cierne
sobre el rumbo, llegaré aquí color. Entonces escribiré aquí el nombre del
color, digamos marrón. Ahora guardemos este archivo
y refresquemos esta página. Se puede ver si me desplaza aquí, el color cambia para mezclarse. Ahora, también puedo cambiar
el color de fondo. Entonces dejaré su trasfondo. Entonces escribiré tu negro, y luego cambiaré
este color a blanco. Ahora guardemos este
archivo y refresquemos esta página. Por aquí. Se puede ver en el fondo, color ha cambiado a negro y el color de este texto
ha cambiado a morder.
13. Estilizar un botón: En esta conferencia, crearemos
unos proyectos simples y pequeños
utilizando HTML y CSS. Entonces, antes que nada, voy a crear un nuevo archivo llamado
botones dot HTML. Ahora generaré
un código de calderas. En el título
agregaré aquí botón. Entonces dentro de esta etiqueta de cuerpo, generaré una etiqueta de botón. Y entonces aquí
dejaré Click Me. Ahora guardemos este documento. Ahora se puede ver que el
botón apareció aquí. Ahora voy a soportar este
botón usando CSS. Voy a soportar esto usando
el CSS interno. Para eso,
escribiré tu estilo. Después de eso,
seleccionaré este botón. Ahora antes que nada, agregaré
un relleno a este botón. Para eso, le dejaré relleno diez píxeles desde
arriba e abajo y 20 píxeles de la
izquierda y derecha. Ahora vamos a refrescar esta página. Se puede ver el relleno
ha aparecido aquí. Aumentemos este relleno
a 15 píxeles y 25 píxeles. Ahora volvamos a cargar esta página. Ahora se puede ver que los
efectos del relleno aquí. Ahora vamos a añadir un color de
fondo. Entonces vamos a añadir el color
baryónico. Vamos a guardar este archivo,
recargar esta página. Se puede ver la
corriente de fondo ha aparecido aquí. No, no quiero que estas fronteras. Lo que haré es escribir su frontera y luego
agregaré aquí ninguno, ninguno. Guarde este archivo,
recargue esta página. Se puede ver que la frontera se
ha ido de aquí. También quiero aumentar el tamaño
de la fuente. Para eso escribiré
su tamaño de fuente. Entonces escribiré aquí,
digamos 20 pixeles. No, no te he
hablado esta propiedad font-size. Básicamente, aumenta
el tamaño de la fuente. Se puede investigar más sobre esta
propiedad en los conductos MDM. Ahora guardemos este
archivo, recargue esta página. Se puede ver que la
fuente ha aumentado. Ahora quiero sumar
algunas propiedades. Cuando alguien se cierne sobre este
botón, escriba aquí botón. Entonces agregaré un efecto de hover. En esto, cambiaré
el color de fondo a algo más oscuro. Ahora guardemos este archivo
y actualicemos esta página. Se pueden ver los cambios. Si alguien que estaba
en este botón, no
quiero discursivo. Lo que puedo hacer es escribir aquí cursor. Entonces agregaré aquí un puntero. Ahora, no te he enseñado sobre propiedad
discursiva también. Y básicamente el
cursor sobre t cambia el cursor cuando
alguien que estaba en este botón, como si guardo este archivo
y refresco la página, se
puede ver que el
cursor ha cambiado a 0.9. Si inspecciono este botón, entonces se pueden ver todos
los estilos que he escrito aquí.
Voy a hacer clic en esto. Entonces voy a hacer clic aquí. Básicamente activa
el estilo de hover. Lo que puedo hacer es que pueda cambiar esta propiedad cuántica desde aquí. Y se puede ver los valores por
supuesto son propiedades. Desde aquí puedes experimentar
más valores. Estos son botón simple
que estamos peinando.
14. Posiciones CSS Posiciones: En esta conferencia, discutiremos
sobre posiciones en CSS. Entonces, antes que nada, crearé un nuevo archivo llamado
oposiciones al HTML. Ahora generemos
un código de calderas. Entonces dentro de este título, agregaré aquí
posiciones en CSS. Ahora dentro de esta etiqueta body, generaré un div con
una clase de contenedor. Entonces para eso
escribiré dot container. Y luego
presionaré la tecla tabulador. Se generará automáticamente un div con una clase de contenedor. Ahora vamos a estilizar esta diferencia. Entonces para eso
usaré el estilo interno. Entonces seleccionaré este div
con la conferencia de clase. En primer lugar,
le daré esta altura DBA. Entonces voy a dar una altura de, digamos, unos 100 pixeles. Entonces voy a dar un
escrito de 100 pixeles. Entonces agregaré un
borde de dos píxeles. Sólido. Conocimiento, guardar este archivo
y copiar la ruta desde aquí. Ahora puedes ver que el
div ha aparecido aquí. Ahora lo que voy a hacer
es crear un div más con la
clase de canalizado. Si. Ahora voy a dar estilo a este div. En primer lugar, seleccionaré este div usando la conferencia de
clase. Y entonces le daré a este
una altura de 50 pixel. Entonces le daré a este
una tasa de 50 pixel. Después de eso,
le daré a este un borde de dos píxeles, negro sólido. Guarde este archivo y
actualice esta página. Se puede ver una diversa
apareció aquí. Aumentemos la altura
y eliminemos este desarrollo. Entonces escribiré aquí
quinientos quinientos píxeles. También aumentó el
artículo deshacerse de este div. Escribiré sus 100 pixel
y luego un 100 pixeles. Guarde este archivo y
actualice esta página. Ya se puede ver que
se ve bien. Ahora las propiedades de posición CSS se
utilizan cuando se
desea posicionar un
elemento específico en la página web. Si quisiera posicionar
esto significaba generalmente agregaré una propiedad
de posición. Entonces hay muchos valores
en la propiedad de posición. El primer valor se
posiciona relativo. Entonces si escribo una o
posición relativa, entonces tenemos que especificar
la propiedad CSS superior. Escriba aquí arriba. Y luego lo
escribiré 20 pixeles. Guarde este archivo y
actualice esta página. Se puede ver que
hay una brecha de 20 píxeles desde la
parte superior de este elemento. nueve quintas partes inspeccionan
este elemento. Entonces si aumento
esta brecha desde arriba, se
puede ver que
los cambios en el tono. Ahora también puedo añadir una
propiedad más, que es la izquierda. Y luego agregaré
aquí 20 pixeles. Se puede ver que ahora hay un hueco de 20 píxeles
de la izquierda. También puedo aumentar y
disminuir este valor. También puede agregar el valor inferior, así
como el
derecho a la propiedad. El motivo por el que esta propiedad
derecha e inferior no
está funcionando ahora
porque ya he especificado la propiedad CSS superior e
izquierda arriba. Entonces si refresco esta página,
se puede ver que ahora
todo es normal. Otra posición, posiciones relativas de
propiedad, el elemento con respecto
a su elemento padre. Se trata de la propiedad
absoluta persa. Entonces si escribo en su
posición absoluta, no esta porción de elemento en sí misma con respecto
al elemento cuerpo. Entonces si escribo left, entonces 0. Ahora si guardo este fichero
y refiero a estos mil millones no quedamos,
escribiré aquí derecho. Ahora si guardo este archivo
y refresco esta página, se
puede ver ahora
este elemento tiene posición en sí con
respecto al cuerpo. Si escribo su posición relativa
en el elemento padre. Ahora si guardo este archivo
y refresco esta página, lo
puedes ver ahora
se ha
posicionado con respecto a
su elemento padre, que en este caso
es el contenedor, porque he agregado la posición relativo en su elemento padre. Observe sus tareas para jugar
con propiedades de dispersión.
15. CSS Floats: En esta conferencia,
discutiremos sobre flotadores en CSS. Por lo que ya he creado un nuevo archivo llamado
floats dot HTML. Ahora dentro de este archivo, generaré un código
de calderas. En el título llegaré
aquí flotadores en CSS. Ahora dentro de esta etiqueta body, crearé un div con
una clase de contenedor. Y luego dentro de este div, crearé dos divs más con la clase de
caja uno y caja dos. Por lo que voy a hacer esto con
la ayuda de amateur. Para eso escribiré aquí
dot box, dash dollar. Entonces escribiré en dos. Entonces si presiono la tecla Enter, entonces se puede ver
que tengo género dos divs más con la clase
de caja uno y caja dos. Ahora voy a soportar
esto hacer por eso. Voy a teclear peinado del cabello. Ahora seleccionaré este contenedor con la ayuda de la conferencia de clase. Después de eso,
le daré una altura de 200 píxeles de la parte superior derecha.
Daré una frontera. Y escribiré aquí
a pixel negro sólido. Conocimiento para ver
si esta phi ahí, entonces copiaré
el camino desde aquí. Ahora se puede ver que
D ha aparecido aquí. Seleccionaré esta
casilla. Para eso. Escribiré aquí punto box1. Entonces vamos a darle una
altura de 200 pixel. Después de eso,
le daré una tasa del 50%. Le daré un color
de fondo. En primer lugar,
guardemos este archivo. Y luego la primera esta página, se
puede ver esa caja
ha aparecido aquí. También agregaré el mismo
estilo a la caja también. Cambiaré este color
de fondo. Ahora guardemos este archivo
y actualicemos esta página. Se puede ver que aquí han aparecido dos
jefes. Ahora si escribo aquí, flote a la izquierda. Guardemos este archivo
y actualicemos esta página. No esta caja está a la
izquierda de este contenedor. Lo que
haré es escribir aquí, flotar bien, guardar este archivo
y refrescar esta página. Se puede ver que esta caja está ahora en la derecha y
esta caja está a la izquierda. flotadores son útiles
al crear navbar. Lo puedes ver aquí. Puedo escribir el nombre de la empresa, y aquí puedo añadir una navegación. No hay flotadores son muy
útiles en los primeros días. Pero ahora en CSS moderno, tenemos flexbox y grid
para hacer nuestra vida más fácil. Aprendimos sobre flexbox y
grid en los módulos posteriores. Ahora tu tarea es
leer más sobre flotadores propiedad en
el MDM. Patos.
16. Crear una barra de guerra: En esta conferencia,
crearemos esta barra de navegación usando HTML y CSS a partir de lo que
hemos aprendido hasta ahora. En primer lugar,
ya he creado un nuevo nombre de archivo, navbar dot HTML. Ahora generaré
un código de calderas. Dentro de este título,
escribiré aquí navbar. Entonces dentro de esta
etiqueta body crearé un div con una clase de navbar. Dentro de este div, voy a crear un div más con una clase de logotipo. Ahora dentro de este div, crearé una etiqueta H1, y luego
escribiré el nombre de la empresa. No este será nuestro logo. Ahora voy a crear una URL
con la clase de y navegación serán
nuestros enlaces de navegación. Voy a teclear aquí. Entonces dentro de
este LI escribiré a. después de eso, cada tipo aquí. Si el usuario hace clic en este enlace, quiero que el usuario se
quede en esta página web. Para eso,
escribiré aquí hashtag. Después de un doble género
mañana, como tags. Para eso, copiaré esto
y lo pegaré varias veces. En el segundo
escribiré aquí, contacto. En la tercera
escribiré aquí sobre. Entonces terminar cuarto uno
voy a escribir aquí, galería. Guardemos este archivo y luego
copiemos la ruta desde aquí. Ahora se puede ver que la etiqueta H1 y
UL ha aparecido aquí. Ahora vamos a darle estilo a esto. Afforded
utilizaré CSS interno, así que escribiré tu estilo. Entonces aquí, antes que nada, seleccionaré esta clase navbar. Aquí. En primer lugar,
le daré una altura de 80 píxeles, y después
le daré un borde de, digamos, dos píxeles
sólidos y luego negros. Para guardar este archivo, se
puede ver que el botón ha aparecido aquí para
darle estilo a esto. Entonces, en primer lugar,
seleccionaré este logo. Escribiré aquí altura. Entonces le daré una
altura de 80 pixeles. Entonces le daré
una tasa del 20%. Después de ello, agregaré
un color de fondo. Agreguemos un color de fondo. Ahora voy a soportar
esta navegación. Para eso, escribiré
aquí dot navigation. Después de que yo doble toque
aquí, altura, ATP. Entonces el escrito del 80%. Entonces añadiría un
color de fondo de, digamos verde. Guarde este archivo. Ahora quiero que esto sea flotar
en el ojo izquierdo. Voy a aplicar aquí
la propiedad fluida. Entonces escribiré tu izquierda.
Y luego en la navegación, cada tipo aquí flotan a la derecha. Ahora veamos si este archivo
y actualice esta página. El motivo por el que esto no
está operando en izquierda es por el margen. Entonces si inspecciono esto, se
puede ver en la
navegación hay por defecto margen de 16 píxeles tanto
en la parte superior como en la inferior. Entonces para eliminar este margen, escribiré aquí margen. Entonces escribiré 0. Ahora se puede ver que el margen
se ha eliminado de arriba y abajo. Ahora también se puede ver
que también hay un relleno en la
izquierda de 40 pixel. También voy a quitar este relleno. Para eso
escribiré aquí relleno. Entonces cada tipo aquí es 0. Ahora ya sabes,
puedes ver que
está perfectamente ahí adentro ¿verdad? Ahora voy a copiar
esto a los inmuebles. Y lo pegaré aquí. Guarde este archivo y
actualízate esta página. Quiero quitar estos
puntos de esta etiqueta LI. Lo que puedo hacer es
seleccionar esta etiqueta LI. Entonces para seleccionar este icono de toda la
electrónica, la primera forma es que puedo dar todos estos nombre
de subclase eléctrica. Y la segunda forma es primer lugar seleccionar
esta navegación. Y luego después de eso agregaré un espacio y luego
escribiré aquí. Ahora lo que
hace esta propiedad es que
buscará todas las líneas que
están en la navegación. Además. Entonces dentro de esta alianza, agregaré una propiedad
que es tipo de estilo de lista. Entonces escribiré aquí ninguno. Guarde este archivo y
actualízate esta página. Se puede ver que todos los puntos
ha desaparecido de aquí. Más valores en este tipo de estilo de
lista, puedes jugar con todos
los valores por ti mismo. Ahora también quiero eliminar
este subrayado en el eTAG. Para eso en primer lugar,
seleccionaré esto una etiqueta. Entonces para hacer eso,
seleccionaré esta navegación
para cualquier tipo que sea. Y luego escribiré aquí.
Ahora lo que esto hace es que buscará todos los vivos que están en la navegación. Y
buscará todos los eTag que están en la etiqueta LI. Se seleccionará todo esto un tags. No, escribiré tu decoración de
texto. Y entonces escribiría
aquí none, ninguno, y guardaría este archivo y
referiría a este paciente. Se puede ver que todo subrayado ha desaparecido de la ETag debido a este texto
a la degradación de la propiedad. No, quiero que esto esté en el centro. Lo que puedo hacer es seleccionar el H1. Entonces escribiré
aquí texto alinear. Entonces escribiré tu centro. No aceptar este archivo
y refrescar esta página. Se puede ver que nuestro
texto no es el centro. Etiquetas ligeras. Yo no los llamé. Quiero hacer esta intro. Lo que voy a hacer es esta etiqueta LI. Voy a teclear aquí, flotar. Entonces escribiré aquí justo. Ahora guardemos este documento
y actualicemos esta página. Se puede ver que ahora
todos estos están en el lado derecho. Lo que quiero es que quiero todo
esto en el lado izquierdo. Para eso escribiré
aquí, flotar a la izquierda. Conocimiento, guarde este archivo
y actualice esta página. lo puedes ver, todos estos
arios a la izquierda ahora quería sumar el
margen en su vida, Dagan. Por lo que escribiré aquí margen. Y agreguemos 20
píxeles y diez píxeles. Guarde este archivo y
actualízate esta página. Se puede ver aquí
ha aparecido un margen. Quería cambiar el margen. Lo que
haré es hacer clic derecho aquí y luego haga clic
en este inspector. Ahora voy a dar click en
esta zona de luz. Entonces cambiaré
el margen desde aquí. Aumentaré este margen. 30 pixeles serán buenos. Y entonces también
aumentaré este margen. Y 20 pixel creo que es bueno. Lo que haré es copiar esto y luego lo
pegaré aquí. Ahora quiero aumentar el tamaño de
fuente de esto una etiqueta. Ahora quiero aumentar el tamaño de
fuente de esto una etiqueta. Para eso escribiré en tamaño de
fuente 20 pixeles. Ahora vamos a guardar este archivo y lo
puedes ver ahora se
está viendo mejor. Ahora lo que voy a hacer es que
eliminaré este
fondo de aquí. Voy a quitar este
color de fondo. También este color de fondo. Entonces agregaré un
color de fondo en la barra de navegación. Entonces pegaré el color de fondo
que he copiado. Guarde este archivo y,
a continuación, actualice esta página. Se puede ver que la textura no
se ve bien. Lo que haré es cambiar este color de texto a
blanco en el Etag. Entonces también cambiaré el color del
texto para el encabezado. Ahora guardemos este archivo
y luego actualicemos esta página. Ya lo puedes ver.
Aviso que se ve bien. Ahora una cosa me di cuenta de que
hay piezas de aquí. Voy a inspeccionar esto. Entonces se puede ver que
en la etiqueta body
hay algún margen
desde todos los lados. Lo que voy a hacer es
antes que nada seleccionaré esta etiqueta corporal. Y luego
escribiré aquí margen. Entonces escribiré aquí 0900, guardaré este archivo, y
luego actualizaré esta página. Ya lo puedes ver ahora
se ve bien. Entonces esta fue nuestra barra
básica de navegación que hemos creado
usando HTML y CSS. No usamos flotador. Entonces mientras creamos
navbar en CSS moderno, más bien usamos flexbox. Veremos qué es
Flexbox y
aprenderemos sobre flexbox
en próximas conferencias.
Piyush Jha, Web Developer & Educator
