ubiquitour.com

Cómo utilizar CSS para crear un diseño de página web

Una vez que dominas HTML, el siguiente paso es aprender CSS. CSS u hoja 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 ventaja distinta sobre diseños sólo HTML, permitiendo para el desarrollo web más flexible. En CSS 2, nuevas opciones de diseño están incluidos, permitiendo que los diseñadores alejarse de diseño HTML. CSS utiliza terminología que es similar a HTML y tiene estándares de acuerdo con el World Wide Web Consortium (W3C).

Instrucciones

1 Enlace al archivo CSS. En el archivo base, inserte el código siguiente después de las etiquetas de título, pero antes el /head etiqueta.< link rel = "stylesheet" href="stylesheet.css" tipo = "text/css" / >

Esto indica al navegador donde encontrar el archivo CSS.

2 Crear secciones en el archivo HTML. CSS aplicar a tu archivo HTML, debe unir los archivos y añadir las secciones correspondientes y IDs. En el archivo HTML se utilizará las etiquetas DIV. Estas etiquetas crean las secciones en el documento. Un navegador no reconoce individualmente pero cuando se combina con las etiquetas CSS como ID, el navegador se conecte con tu archivo CSS y aplicar el diseño.

En su archivo de base de nuevo, insertar etiquetas div alrededor de cada sección. Este archivo tendrá tres secciones obvio: una cabecera, un menú y el contenido principal. Dar a cada uno de las etiquetas DIV ID utilizando la sintaxis siguiente: < div id = "cabecera" >< / div >.

3 Crear un nuevo archivo de texto editor. El nombre stylesheet.css y guárdelo en la misma carpeta que el archivo HTML. Esto es donde escribirás el código CSS. Cada elemento sigue la misma sintaxis:

Selector (si cualquier) nombre {estilo: tipo;}

El archivo HTML contiene dos tipos de elementos que podemos seleccionar al estilo: etiquetas, que no hay selector, y IDs, que utilizan el # para referirse a sí mismos en un archivo CSS.

Estilo a la etiqueta escribiendo:cuerpo {estilo: tipo;}

Estilo de un tipo de ID escribiendo:

encabezado {estilo: tipo;} 4 Escriba 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 otro para el contenido.

Abra el selector de color. Elegir el color que desea utilizar para el fondo y anotar su código hexadecimal. Un código hexadecimal es un símbolo de # con un número de seis dígitos. Negro es #000000 porque no tiene color. Blanco sería #FFFFFF porque es todos los colores. Otros colores será una combinación de números y letras A-F.

cuerpo {fondo: #000000;}

El estilo de fondo le permite que seleccionar un color para el fondo. Añadir unos cuantos más estilos para aplicar a todo en la etiqueta body.

cuerpo {fondo: #000000; color: #ff0000; margen: 0; padding: 0; font-tamaño: 12px;}

Color indica el color del texto, en este caso rojo, en las etiquetas de cuerpo. Por puesta a cero del margen y el relleno, nos aseguramos de que la página se extenderá para adaptarse a la ventana del navegador. El tamaño de la fuente hará que todo el texto sin título 12 píxeles de altura.

5 Estilo los ID en el archivo html. Primer diseño ID para tener idea clara de lo que usted necesita.

encabezado {} menú {} {principal} No importa qué orden que colocar los elementos en el archivo. Queremos que la cabecera del estiramiento a través de la página y tener un fondo blanco con texto azul.

encabezado {width: 100%; fondo: #ffffff; color: #006699; texto-alinee: Centro;} El estilo de ancho da la anchura del div y mediante el uso de un porcentaje, vamos a permitir que la página encoger y crecer con el tamaño del navegador. El estilo de text-align le permite elegir la alineación del texto en el div, en este caso centro. Ahora queremos el menú a la derecha y el principal de la izquierda.

menú {posición: pariente; float: derecha; width: 160px;} Main {flotante: izquierda, posición: pariente; width: 400px;} El estilo de posición da instrucciones del navegador para permitir que el div para el flujo en una cierta manera. 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 la cabecera. Flotador permite el elemento a mover en la dirección que usted especifique.

6 Guarde el archivo. Puede ver el archivo HTML en un explorador y llamar al archivo CSS y mostrarte el diseño.

Consejos y advertencias

  • Puede utilizar CSS para cada etiqueta en el archivo HTML. Hay muchos más estilos disponibles para CSS.
  • CSS no funciona igual en todos los navegadores. Puede que necesite editar el archivo CSS en distintos navegadores.