Propiedades y elementos esenciales de CSS y HTML

Estilos CSS

Color del texto: color: red;
Tamaño de la fuente: font-size: 12px;
Tipo de letra: font-family: Arial, Helvetica, sans-serif;
Anchura de caracteres: font-weight: 200;
Estilo de la fuente: font-style: normal;
Espaciado entre líneas: line-height: 12px;
Texto subrayado, sobrerayado o tachado: text-decoration: underline | overline | line-through | none;
Alineación del texto: text-align: left | right | center | justify;
Sangrado o márgenes en las páginas: text-indent: 10px;
Primera letra en mayúsculas de todas las palabras, todo en mayúsculas o minúsculas: text-transform: capitalize | uppercase | lowercase | none;
Color de fondo de un elemento de la página: background-color: green;
Una imagen de fondo en cualquier elemento de la página: background-image: url(mármol.gif);
Tamaño del margen a la izquierda: margin-left: 1cm;
Tamaño del margen a la derecha: margin-right: 5%;
Tamaño del margen arriba de la página: margin-top: 0px;
Tamaño del margen en la parte de abajo: margin-bottom: 0pt;
Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido de este: padding-left: 1px; (Iguales que margin)
Color del borde del elemento de la página: border-color: red;
El estilo del borde: border-style: solid;
Tamaño del borde del elemento: border-width: 10px;
Sirve para alinear un elemento a la izquierda o la derecha haciendo que el texto se agrupe alrededor de dicho elemento: float: none | left | right;

Enlaces

Enlaces normales: A:link {atributos}
Enlaces visitados: A:visited {atributos}
Enlaces activos: (Los enlaces están activos en el preciso momento en que se pincha sobre ellos) A:active {atributos}
Enlaces hover: (Cuando el ratón está encima de ellos, solo funciona en Explorer) A:hover {atributos}

Alineación de texto

Para alinear el texto con el margen izquierdo:

Texto alineado a la izquierda

Para centrar el texto:

Texto centrado

Para alinear el texto con el margen derecho:

Texto alineado a la derecha

Para alinear el texto a los dos márgenes. Es ignorado por muchos navegadores:

Texto justificado

Líneas horizontales

<hr width="50%" align="left" style="color: red;">

Sangría

Esta asignatura es interesante

Variar el tamaño, el color y el tipo de letra

<FONT SIZE=4 COLOR="#AA0000" FACE="Arial, Verdana">Prueba texto</FONT>

Prueba texto

Coloreando el fondo y el texto

<body bgcolor="#FF0000"> (Fondo rojo)

<body background="radio.jpg" bgproperties="fixed"> (Imagen de fondo fija)

Imágenes (IMG)

width="x": Permite al navegador predeterminar el ancho, en píxeles, que tendrá la imagen.
height="x": Junto con el atributo width, el navegador puede preparar el espacio necesario para tu imagen antes de que se muestre.
border="x": Para añadir o eliminar un borde, donde la x será un valor numérico.
align="xxx": Puedes alinear una imagen horizontal y/o verticalmente en una página usando este atributo.
alt="descripción_de_la_imagen": El atributo alt te permite describir la imagen para los navegadores de solo texto, así como etiquetar la imagen antes de que se cargue en una página.
hspace="x" (horizontal space): Se usa para añadir espacio vacío, con un valor numérico, en la coordenada horizontal de una imagen.
vspace="x" (vertical space): Permite controlar el espacio de la imagen en las coordenadas verticales.

Marquesinas

<MARQUEE width="50%" height="80" align="bottom">Texto desplazándose</MARQUEE>

Texto desplazándose

Listas desordenadas

<UL> con etiqueta de cierre </UL> para la lista y <LI> para cada línea.

type: DISC (disco), CIRCLE (círculo), SQUARE (cuadrado)

Elemento 1
Elemento 2

Listas ordenadas o numeradas

<OL> con etiqueta de cierre </OL> para la lista y <LI> para cada línea.

start="num": Indica qué número será el primero de la lista. Si no se indica, se entiende que empezará por el número 1.

type="tipo": Indica el tipo de numeración utilizada. Si no se indica, se entiende que será una lista ordenada numéricamente.

Los tipos posibles son:

1: Numéricamente (1, 2, 3, 4, …).
a: Letras minúsculas (a, b, c, d, …).
A: Letras mayúsculas (A, B, C, D, …).
i: Números romanos en minúsculas (i, ii, iii, iv, v, …).
I: Números romanos en mayúsculas (I, II, III, IV, V, …).

Elemento 1
Elemento 2

Listas de definición

La etiqueta a usar será <DL> con etiqueta de cierre </DL> para la lista.

<DT> Para cada palabra.

<DD> Para cada definición de cada palabra.

Palabra 1: Definición de la palabra 1
Palabra 2: Definición de la palabra 2

Enlaces dentro de la misma página

<a name="Principio"></a>

<a href="#principio">Ir al principio</a>

Ir al principio

Enlaces usando imágenes

<A href="intro.htm"><IMG src="gato.jpg" border="0"></A>

Tablas

Dentro de la etiqueta <table> se colocarían las de las filas <TR> y </TR>. Y dentro de ellas, a su vez, habrá que colocar por celda <TD> y </TD>.

<table border="1" style="border-collapse: collapse;" width="500">

Separación entre las celdas: cellspacing="x"

Cambiar el espesor de los bordes: <table border cellpadding="25">

Centrado y en negrita: <TR> y <TH>

Insertar mapa

<iframe src=""></iframe>

Formularios

<form action="mailto:correo@example.com" method="POST" enctype="text/plain">

Campos ocultos

Se usará la etiqueta <INPUT TYPE="hidden" NAME="xxx" VALUE="yyy">

Cuadros de texto de una línea

Se usará la etiqueta <INPUT TYPE="text" NAME="xxx" VALUE="yyy" SIZE="x">, que indica la longitud en píxeles, y MAXLENGTH="y">

Cuadros de texto oculto

<INPUT TYPE="password" NAME="xxx">

Cuadros de texto con desplazamiento

<textarea NAME="xxx" ROWS="y" COLS="z"></TEXTAREA>

Listas desplegables

<SELECT NAME="xxx"><OPTION>yyy</OPTION></SELECT>

Botón de opción o de radio

<INPUT TYPE="radio" NAME="xxx" VALUE="yyy">

yyy es el nombre de cada opción en concreto. Habrá que introducir varias veces la etiqueta, y con CHECKED conseguiremos que se seleccione solo uno de ellos.

Casilla de verificación

<INPUT TYPE="checkbox" NAME="xxx">, donde xxx es el nombre de la información introducida. Tiene el modificador CHECKED si queremos que se active por defecto.

Botón de envío

<INPUT TYPE="submit" VALUE="xxx">

Mediante imagen

<INPUT TYPE="image" SRC="imagen.gif" BORDER=0>

Botón de borrado

<INPUT TYPE="reset" VALUE="xxx">, donde xxx es el texto del botón.