Scribd
Cargar
4 vistas

Conceptos de HTML y Css Final

Cargado por

soledad gallastegui
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
4 vistas

Conceptos de HTML y Css Final

Cargado por

soledad gallastegui
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 10

<!

DOCTYPE>:
▪ Se utiliza para especificar la versión de HTML que se está utilizando en
la página.

<HTML lang="es"> indica el idioma.

Head:
▪ Define la sección de encabezado de la página, donde se incluyen
elementos como el título de la página.

<Meta charset=” UTF-8” >:


▪ Es un conjunto de caracteres universal que incluye casi todos los
caracteres de casi cualquier idioma humano. La página web podrá
gestionar la visualización de cualquier idioma.

<Meta>: Define metadatos como descripciones y palabras clave

<HTML>: Define el inicio y el final de la página web.

Body:
▪ Define la sección del cuerpo de la página web, donde se incluyen todos los
elementos que se mostrarán en la página.

Nav:
▪ Es una etiqueta que se utiliza para definir una sección de navegación en un
documento web. Esta sección de navegación generalmente contiene enlaces o
menús que permiten a los usuarios desplazarse o acceder a diferentes partes
del sitio web.
Div:
▪ Nos permite definir un bloque de contenido o sección de nuestra página web y
agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas,
divisiones, etc.).

1
Class:
▪ Es un atributo que se utiliza para asignar una clase a uno o varios elementos
HTML. Este atributo permite etiquetar elementos con un identificador
específico que luego puede ser utilizado para aplicar estilos en CSS.

Title:
▪ Da título al documento.

<h1> a <h6>:
▪ Define los encabezados o títulos.

<p> Establece un párrafo.

Span:
▪ La etiqueta también funciona como un contenedor y a su vez al párrafo.

<Img src=” “>:


▪ Indica el nombre del archivo de la imagen. alt="" podremos escribir un texto
que se mostrará si la imagen no carga.

<Source src=”” >:


▪ Indica el nombre del archivo del video.

<Section>:
▪ Se usa para representar una parte de un documento o artículo.

<footer> Representa un pie de página.


<ul> Elemento para listas.
<li> Muestra la lista del menú.
<label>
▪ Es utilizada para asociar una descripción con un elemento de formulario
específico.

2
<input>
▪ Representa un campo de datos (placeholder="Texto por defecto/ muestra una
pequeña ayuda).

<hr> Representa una línea horizontal.


<form> Actuará como un contenedor de un formulario.
<textarea> Permite crear un cuadro de texto de varias líneas en una página web.
<value> Permite que se visualice un valor por defecto.
<strong> Para poner el texto en negrita.
<script>
▪ Conjunto de instrucciones que le dice a una aplicación o software cómo
funcionar.
<table> Estructura contenedora principal, tiene 3 elementos básicos:
1. <tr> (contenedor de fila)
2. <td> (celda de datos)
3. <th> es utilizada para definir un encabezado de celda en una tabla.

<i> Muestra el texto marcado con un estilo en cursiva o itálica.


<a> Se utiliza para enlaces.
HTML se utiliza para definir la estructura de la página web.
CSS se usa para darle estilo y posicionamiento visualmente. CSS se puede usar, por
ejemplo, para cambiar la fuente, el color, el tamaño y el espaciado del contenido,
para formar múltiples columnas, añadir animaciones y otros elementos
decorativos.

3
Estilos Css

Fuentes:

Font-family: Establece la fuente principal del documento.

Font-style: Estilo de la fuente normal | italic.

Font-weight: Ancho de la letra. | bold |

Font-size: Tamaño de la letra.

Textos:

Text-align: Alineamiento del texto: left | right | center | justify.

Text-decoration: Efectos de subrayado | tachado | eliminar cualquier decoración


de texto, : underline | overline | none.

Text-transform: Transformación a mayúsculas/minúsculas: uppercase|lowercase.

Line-height: Tamaño del espacio entre líneas: longitud | porcentaje.

Vertical-align: Alineación vertical: |top| (Alinea los elementos en la parte


superior)

Color y fondo:

Color: color del texto.

Background-color: Color de fondo.

Background-image: Imagen de fondo.

Background-repeat: Repetición de la imagen de fondo. repeat| no-repeat.

Background-position: Posición de la imagen de fondo. left | center | right.

Background-size: Tamaño de la imagen de fondo Auto|cover| contain| valor.

Opacity: Transparencia de un elemento [ 0 – 1 ] (0 → totalmente transparente).

4
Tamaño de los elementos:

Width: Establece el ancho del área del contenido elemento.

Height: Establece el alto del contenido del elemento.

Max-width: Establece el ancho máximo que puede tener un elemento.

Min-width: Establece el ancho mínimo que debe tener un elemento.

Min-Height: Establece la altura mínima que debe tener un elemento.

Max-Height: Establece la altura máxima que debe tener un elemento.

Display:

Cada elemento en una página web es un cuadro rectangular. La propiedad. Display


en CSS determina cómo se comporta esa caja rectangular.
El valor de esta propiedad determina cómo se comporta el elemento en cuanto a
tamaño, posición y cómo afecta a los elementos vecinos.
Tipos:
1. Flex: el elemento se comporta como un contenedor flex, permitiendo
posicionar y alinear sus elementos hijos de manera flexible.

2. Inline: Muestra un elemento como un elemento en línea (como


<span>). Cualquier propiedad de alto y ancho no tendrá efecto.

3. Block: Muestra un elemento como un elemento de bloque (como <p>).


Comienza en una nueva línea y ocupa todo el ancho.

4. Inline-block: Muestra un elemento como un contenedor de bloques de


nivel en línea, Puede aplicar valores de alto y ancho.

5. None: el elemento no se muestra en absoluto y no ocupa espacio en la


página.

5
Posiciones:

Position: especifica cómo un elemento es posicionado en el documento.


Tipos:
1. Relative: Los elementos se mueven desde su posición original, pero siguen
ocupando su espacio original en la página.

2. Absolute: Los elementos se colocan en una ubicación específica dentro de


su contenedor más cercano.

3. Fixed: Mantiene el contenedor fijado.

Tipos de Flex en CSS

1. Flex-wrap: establece si los elementos se colocan en una sola línea o en varias.

1. Flex-wrap: wrap; los elementos se colocan en varias líneas si no


caben en una sola línea.

2. flex-grow: hace que los elementos crezcan hasta ocupar todo el


espacio disponible en la dirección principal.
2. Flex-direction: define la dirección principal, es decir, la dirección en la que
se colocan los elementos flexibles en los contenedores.
Tipos:
1. row: los elementos se colocan horizontalmente de izquierda a
derecha
2. column: los elementos se colocan verticalmente de arriba abajo.

Overflow:

- controla qué sucede cuando el contenido de un elemento es demasiado


grande para ajustarse dentro del área designada. Esta propiedad tiene
varias opciones que determinan cómo se manejará el desbordamiento de
contenido:
Tipos:
1- Hidden: El contenido que desborda el contenedor será recortado
y ocultado.

2- Auto: Se agregará una barra de desplazamiento al contenedor


solo si es necesario. Si el contenido no desborda el contenedor, no
se mostrará ninguna barra de desplazamiento.

6
Justify-content:

Se utiliza en contenedores flexibles para alinear los elementos a lo largo del eje
principal del contenedor.
1. space-between: los artículos tendrán espacio entre ellos.

2. Center: los artículos se colocan en el centro del contenedor.

3. Flex-end: los artículos se colocan al final del contenedor.

Align-items:

- Mientras que justify-content determina la alineación de los elementos en el


eje principal, esta propiedad (align-items) lo hace en el eje secundario.

1. Stretch: Defecto. los artículos se estiran para adaptarse al contenedor.

2. Center: los artículos se colocan en el centro del contenedor.

3. Flex-start: el elemento se alinea al comienzo del contenedor, es decir,


arriba.

Transition:

- Proporciona una forma de animar los cambios de las propiedades CSS, en


lugar de que los cambios surtan efecto de manera instantánea.

1. Property: transform : Especifica el nombre de la propiedad CSS para el


efecto de transición.

2. Duration: especifica cuántos segundos o milisegundos tarda en


completarse el efecto de transición.

3. None: ninguno.

Outline:

- Se utiliza para establecer una línea de contorno alrededor de un elemento,


que es similar al borde es útil para resaltar un elemento, especialmente
cuando está enfocado.
Si se desea eliminar este contorno, se utiliza la propiedad outline: none.

7
Contenedor

Margin:

- Define la parte más externa del modelo de caja, creando espacio.

Border

- Dibujar una línea alrededor del elemento al que se aplica.


Tipos:

8
Border-radius: Puede dar cualquier elemento «esquinas redondeadas».
Border-bottom-left-radius: establece el redondeo de la esquina inferior
izquierda del elemento.
Border-bottom: Establece la posición del borde inferior en px. Puede ser un
espacio transparente. (Usado para Inicio, sobre nosotros, etc.).
Box-sizing: border-box; calcula las dimensiones de un elemento, específicamente
su ancho y alto.
Border-collapse: se utiliza para que los elementos se encuentren juntos.

Box-shadow: añade efectos de sombra alrededor del marco de un elemento.


Box-sizing: establece cómo se calcula el ancho y alto total de un elemento.

Padding:

- Define la parte más interna del modelo de caja, creando espacio alrededor
del contenido de un elemento.

1. Padding-bottom: tamaño inferior del borde del modelo de caja.

2. Padding-top: tamaño superior del borde del modelo de caja.

9
Cursor: controla cómo se verá el mouse.
- cursor pointer: El cursor se muestra como una mano.

Hover:
- Se utiliza para cambiar el color de fondo de un botón cuando el usuario pasa
el mouse sobre él.

Z-index:
- La propiedad z-index en CSS se utiliza para ordenar los elementos que se
superpongan entre sí. Con la propiedad z-index podemos controlar qué
elemento iría encima y cual debajo, como si el documento tuviera
profundidad.

Pointer-events none:
- Es una herramienta útil para controlar la interactividad y el
comportamiento de los elementos en una página web.

Vertical-align:
- Especifica el alineado vertical de un elemento en línea o una celda de una
tabla.
Letter-spacing:
- Controla la cantidad de espacio entre cada letra en un elemento dado o
bloque de texto.
Top:
- Se utiliza para posicionar elementos hacia arriba.

list-style: none:
- Se utiliza para que no aparezca la viñeta predeterminada.

Float:
- Posicionamiento left | right | none (barra de inicio).

10

También podría gustarte