Scribd
Cargar
10 vistas

HTML y CSS

Codigos html y css

Cargado por

Sebastián Beltrán
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
10 vistas

HTML y CSS

Codigos html y css

Cargado por

Sebastián Beltrán
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/ 22

Crear una tabla

Crear listado
Cargar imagen

Crear enlace, enlazar con otro HTML

Crear enlace a una página web

Crear enlace a una pagina web y abrir en otra pestaña nueva

Crear formulario, para pedirle al usuario que ingrese datos (input)

Agrupar elementos por clase (si se pueden repetir, menos los id)
Input en bloque, se usa <div> para dividir en bloques y no quede en línea,
salto de línea.

Para que en el input aparezca lo que va escrito, placeholder=”Escribe tu


apellido”

Contraseña, para que no se muestre al escribir, type=”password”


Type=”numer” para ingresar números

Type=”email” para ingresar correos

Para crear lista de opciones desplegada seleccionables

Para selección única en línea (sin div para no saltarse una línea)
Para multielección

Para crear un cuadro de texto en blando de input

Para crear botón


Selectores para elementos, clases y id

Referenciar nuestro css en html


CSS
Para cambiar la letra, el tamaño y el color a todo el cuerpo de html

Para alinear texto a la izquierda, derecha o centrar se usa uno de estos

Para texto subrayado, en cursiva, tachado o sin formato

Cambiar el color hexadecimal


Modelo de caja, no se herederan, a no ser que le apliques la misma clase a
todo

Para crear padding y border

Para crear padding por lado o en todos los lados manecillas del reloj

Poner margen 0 en body y en h1


Eliminar borde de fieldest

Aplicarle borde, padding y margen a fieldset

Poner en negritas el título

Anchura y margen de abajo de separación en input que están dentro de la


clase .formElement
Ancho y alto de un elemento

Para poner una imagen de fondo

Borde solido negro, dotted para borde puntado.

Redondes del borde de un elemento, 0 es sin borde.

Para centrar un texto en un objeto redondo se usa line-height debe ser igual al
ancho y alto de la figura.
Para convertir elementos en línea a bloques display: block;

El span es para poner un elemento en linea, Registry form separados, para


editar form solo lo ponemos en una clase, por que esta dentro del span y de la
clase “especial”

Jerarquía de selectores, mientras más específico más jerarquía tiene

En la clase que están los botones, es para cambiar cursor al apretar un botón y
la opacidad del botón al pasar por encima
Selector hibrido, no se ocupa mucho, por que puedes asignar clases para que
sea más fácil. El primero colorea los padres de los li, y el de abajo todos los li
hacia abajo.

nePuedes seleccionar varios elementos para aplicarles el mismo formato,


separándolos por una coma.

Cuando dos elementos en línea no quieren ponerse en línea y se saltan una


línea y quedan en bloques. Si no quieres que pase y que se adapte a donde
esta, usa box-sizing: border-box:
Poner una clase u objeto, el titulo en una posición fija y con 0 de pixeles de
separación en el top (arriaba de la página), puede ser con lef:0, right:0 o
button:0 o combinando dos.

Poner margen a los párrafos (que están en esa clase) para que no queden
pegados al titulo fijado en una posición

Para editar posición a un objeto dentro de otro, hay que poner position: relative
para que funcione el position: absolute
z-index: numero de que tan al frente estará 1 esta debajo de 2, aquí el titulo
queda en 2 y el mensaje en 1 ósea debajo.
Aquí usamos en inline-block, y quedan espacios en blanco que no alcanza la
última figura en el contenedor, haciendo que se salte un espacio.

Aquí aplicamos display: flex para que eliminar el espacio de separado


automáticamente y quede dentro del contenedor en la misma línea, alinear
objetos en una misma línea y se adapte automáticamente al contenedor
ajustando el tamaño de los objetos.
En el repositorio o contenedor (que tenga más elementos dentro) aplicamos
display: flex y flex-direction: column es por defecto (hacia abajo, en una sola
columna) y flex-direction: row es por filas (hacia la derecha). Display: flex es
obligatorio para los siguientes códigos.

Si es flex-direction: row, con el justify-content: flex-start es para dejarlos a la


izquierda, justify-content: center (para el centro) y para la derecha justify-
content: flex:end. Display: flex es obligatorio para los siguientes códigos.

Si es flex-direction: column, con el justify-content: flex-start es para dejarlos


arriba, justify-content: center es para dejarlo al medio y el justify-content: flex-
end es para dejarlo abajo. Display: flex es obligatorio para los siguientes
códigos.

En justify-content: space-between es para tener el mismo espacio entre los


elementos del contenedor o repositorio, sin espacio el inicio ni el fin, solo el
mismo espacio entre los elementos.
En justify-content: space-araund es para agregarle el mismo espacio entre los
elementos y además le agrega espacio al inicio y al final es la mitad del
espacio de cada elemento al principio y al final.

En justify-content: space-evenly es para agregarle el mismo espacio entre los


elementos y en el inicio y final también. (todo igual la cantidad de espacio,
incluyendo el inicio y el final)

Agregarle espacio en pixeles solo para el espaciado o separación que hay entre
los elementos del contenedor.

Si es flex-direction: row para mover los elementos en el eje horizontal es


justify-content y para el eje vertical es aling-items. Y para el flex-direction:
column es al revés, justify-contenet para el vertical y aling-items es para el
horizontal.
Si quieres mover solo 1 elemento individual del contenedor, debes aplicar
aling-self, el ejemplo lo mueve hacia abajo.

Para usar el flex de abajo, se debe usar display: flex en el contenedor, para
main va a ser 4 veces mas grande que .menu que es la base, el primero
siempre es la base. Es para editar las proporciones de los elementos dentro de
un contenedor.

Un elemento se puede convertir en contenedor, siempre y cuando tenga mas


de un elemento dentro.
Para ponerlos del mismo tamaño a dos elementos en un contenedor, se aplica
el flex: 1 para los elementos dentro de un contenedor, en este caso hay dos
elementos en una clase llamada .noticia.

Cuando achicas la ventana del navegador y que salten a la siguiente línea


cuando no caben todos los objetos o elementos.

Ocultar elementos de un menú, una lista

Para quitarle el formato lista


overflow: hidden; y overflow: auto;

Ajustar elementos y moverlos dentro de un contenedor, como una torta,


repartir en fracciones. display: grid

Para no perder calidad de la imagen, object-fit: cover

Por ejemplo, que la imagen vaya de la línea 1 a la 5 en columna y fila también.

También podría gustarte