Una vez que domine HTML, el siguiente paso es aprender CSS. CSS, o de hojas de estilo en cascada, es un lenguaje de script que elimina la carga de estilo y el diseño de HTML. Cuando se utiliza CSS, puede cambiar su diseño, sin modificar el contenido. Esto es una clara ventaja sobre los diseños sólo HTML, lo que permite el desarrollo web más flexible. En CSS 2, se incluyen nuevas opciones de diseño, permitiendo a los diseñadores se alejan de diseño HTML. CSS utiliza una terminología que es similar a HTML y tiene las normas de acuerdo con el World Wide Web Consortium (W3C).
Instrucciones
1 Enlace a su archivo CSS. En su archivo de base, inserte el código siguiente después de las etiquetas de título, pero antes de la etiqueta / cabeza.
<Link rel = "stylesheet" href = "stylesheet.css" type = "text / css" />
Esto le dice al navegador dónde buscar el archivo CSS.
2 Crear secciones en el archivo HTML. Con el fin de CSS para aplicar a su archivo HTML, es necesario enlazar los archivos juntos y añadir las secciones correspondientes, y los identificadores. En el archivo HTML que va a utilizar las etiquetas DIV. Estas etiquetas crean las secciones del documento. Un navegador no reconocerá de forma individual, pero cuando se combina con etiquetas CSS como ID, el navegador se conectará con su archivo CSS y aplicar la disposición.
En su archivo de base de nuevo, insertar etiquetas div alrededor de cada sección. Este archivo tendrá tres secciones obvias: una cabecera, un menú y el contenido principal. Dale cada una de las etiquetas div una identificación usando la siguiente sintaxis: <div id = "header"> </ div>.
3 Crear un nuevo archivo en el editor de texto. Nombrarlo stylesheet.css y guardarlo en la misma carpeta que el archivo HTML. Aquí es donde se va a poner el código CSS. Cada elemento sigue la misma sintaxis:
Selector (si existe) Nombre {estilo: tipo;}
El archivo HTML contiene dos tipos de elementos que podemos seleccionar para el estilo: las etiquetas, que no tienen selector, y los identificadores, que utilizan el # para denotar a sí mismos en un archivo CSS.
ESTILO una etiqueta escribiendo:
body {estilo: tipo;}
Estilo un tipo ID escribiendo:
cabecera {estilo: tipo;}
4 Escribir el código CSS para crear su diseño. Un diseño simple para una página web sería un color de fondo, una cabecera, con su propio color, y dos columnas, una para el menú y una para el contenido.
Abra el selector de color. Elige el color que desea utilizar para el fondo y anotar su código hexadecimal. Un código hexadecimal es un símbolo #, con un número de seis dígitos. Negro sería # 000000, ya que no tiene color. Blanco sería #FFFFFF porque es todos los colores. Otros colores serán una combinación de números y letras AF.
body {background: # 000000;}
El estilo de fondo le permite elegir un color para el fondo. Añadir un poco más de estilos para aplicar a todo en el cuerpo de la etiqueta.
body {background: # 000000; color: # ff0000; margin: 0; padding: 0; font-size: 12px;}
Color indica la color del texto, en este caso de color rojo, en las etiquetas del cuerpo. Poniendo a cero margen y el relleno, nos aseguramos de que la página se estira para adaptarse a la ventana del navegador. El tamaño de fuente hará que todo el texto no epígrafe 12 píxeles de altura.
5 El estilo de los identificadores en el archivo html. En primer lugar el diseño cada ID para que tenga idea clara de lo que necesita.
cabecera {} {} menú principal {}
No importa qué orden de poner los elementos en el archivo. Queremos que la cabecera se estire a través de la página y tener un fondo blanco con el texto azul.
cabecera {width: 100%; fondo: #ffffff; color: # 006699; text-align: center;}
El estilo de ancho da el ancho div y mediante el uso de un porcentaje, que permitirá que la página se encoja y crecer con el tamaño del navegador. El estilo de texto-align le permite elegir la alineación del texto en el div, en este caso centro. Ahora queremos que el menú de la derecha y de la principal a la izquierda.
menú {position: relative; flotar derecho; Anchura: 160px;} principal {position: relative; flotador izquierdo; Anchura: 400px;}
El estilo de posición da instrucciones de su navegador para permitir que el div fluya de una manera determinada. Por lo que es relativo, la posición tendrá en cuenta los DIVs por encima y por debajo de ella en el archivo HTML. Esto evitará que los elementos flotantes que cubren desde la cabecera. Flotador permite que el elemento se mueva en la dirección que se especifique.
6 Guarde el archivo. Puede ver el archivo HTML en un navegador y que va a llamar a su archivo CSS y le mostrará el diseño.
Consejos y advertencias
- Puede usar CSS para cada etiqueta en su archivo HTML. Hay muchos más estilos disponibles para CSS.
- CSS no funciona igual en todos los navegadores. Puede que tenga que editar el archivo CSS para trabajar en diferentes navegadores.