CSS es una hoja de estilo en cascada, que es un lenguaje para describir la apariencia de las páginas web. Una de las principales ventajas de CSS es la capacidad de reemplazar el diseño de la tabla con el diseño de bloques.
Es necesario
Editor de código HTML
Instrucciones
Paso 1
Crea el primer bloque. En formato HTML, se verá como una etiqueta div con id 'block01'. Aquí, el identificador block01 indica que en la descripción CSS, todas las propiedades de este bloque están especificadas para el selector # block01.
Paso 2
Describe el bloque en CSS. En los estilos CSS, especifique el nombre del identificador (# block01) y entre llaves describa sus parámetros: ancho, posicionamiento, desplazamiento, color de fondo, etc. Por ejemplo, podría verse así: # block01 {width: 150px; altura: 150px; posición: absoluta; arriba: 0px; izquierda: 0px; color de fondo: rosa}. Esta descripción asume que el cuadro tendrá 150 píxeles de largo y 150 píxeles de ancho, se colocará rígidamente en la esquina superior izquierda del documento y su fondo será de color rosa.
Paso 3
Dale al bloque un posicionamiento relativo. Si usa un posicionamiento no absoluto, sino relativo en la descripción CSS, entonces puede colocar bloques no con un ajuste rígido a una cuadrícula de coordenadas, sino en relación con otros bloques ya existentes. Para hacer esto, cambie la posición del código: absoluta; arriba: 0px; izquierda: 0px por posición: relativa; superior: 200px; izquierda: 100px.
Paso 4
Dale al bloque un redondeo. En CSS, la declaración border-radius es responsable de esto. Agregue el siguiente código a su hoja de estilo: border-radius: 8px. El bloque ahora tendrá esquinas redondeadas. Si solo desea redondear algunas esquinas, describa el radio por separado para cada una de ellas: border-radius: 8px 8px 0px 0px.
Paso 5
Dale un golpe al bloque. Para resaltar el contorno de un bloque con una línea delgada, agregue el siguiente código a su descripción CSS: border-top: 1px discontinuo negro. Esta instrucción significa que el borde del bloque será negro y tendrá un píxel de grosor. En este caso, la línea de contorno en sí se mostrará como una línea discontinua (discontinua - una línea de puntos, de puntos - puntos, sólida - una línea sólida).
Paso 6
Establezca las propiedades restantes del bloque. Especifique en la descripción CSS qué tipo de letra debe usarse para el texto dentro del bloque, cuál debe ser el tamaño de fuente, la alineación y la sangría de los bordes del bloque. Estas propiedades se describen en las definiciones font-family, font-size, text-align y padding.
Paso 7
Puede usar la propiedad float para personalizar el flujo de un bloque sobre otro. Si lo establece en "izquierda", el resto de los elementos fluirán alrededor del bloque a la izquierda y "derecha", a la derecha. Si establece el valor flotante como "ninguno", no se establecerá la alineación del bloque. La propiedad clear en CSS evita que el bloque fluya hacia la derecha, la izquierda o ambos lados, y anula la instrucción flotante.
