Cómo crear una página Web CSS

August 12

La mayoría de los sitios web de hoy en día utilizan una combinación de CSS (Cascading Style Sheets) y HTML (Hypertext Markup Language) o XHTML (Extensible Hypertext Markup Language). Mientras que el HTML / XHTML manejar la estructura y el contenido de su sitio, el CSS determina el estilo y la apariencia de elementos en su página.

Instrucciones

La creación de archivos y carpetas

1 Antes de empezar a escribir su hoja de estilo, tendrá que configurar el diseño básico para su sitio web. Para ello, copia y pega el siguiente estructura en un documento en blanco del Bloc:

<Html>

<Head>
<Title> Básico Tutorial CSS </ title>
</ Head>

</ Html>

2 Una vez que haya copiado y pegado el texto, guarde el archivo como \ "index.html \" en una nueva carpeta llamada \ "CSS sitio web. \" Al guardar, asegúrese de que el tipo de archivo es \ ". Html \".

3 Abrir un nuevo documento en su editor de texto y en la parte superior, escriba lo siguiente:

/ * Simple CSS Sitio Web

Master Stylesheet Author: Your Name Here

* /

Este principio de la hoja de estilos declara el título de la hoja de estilo y el autor. Aunque no es esencial, es una buena práctica y debe ser incluido en la parte superior de cada archivo CSS.

4 Una vez que haya escrito el texto, guarde este archivo como \ "style.css \" en tu carpeta con el nombre \ "CSS Sitio web \". Asegúrese de cambiar el tipo de archivo en \ ". Html \" a \ ". Css \". Esto es absolutamente necesario, ya que su estilo no funcionará correctamente sin el \ ". Css \" extensión.

5 Ahora que tiene sus documentos HTML y CSS, debe vincular ellos. Para ello, añadir unos cuantos espacios debajo de la línea de \ "<title> CSS básico sitio web </ title> \" y escribir lo siguiente:

Una vez hecho esto, la hoja de estilos y marcas estarán vinculadas. Ahora puede comenzar a construir su sitio usando CSS.

La escritura de marcado y CSS

6 Lo primero que vamos a hacer con CSS es crear un diseño de página básico. En su \ "index.html \" entre las etiquetas <body> </ body>, escribe lo siguiente:

</ Div>

</ Div>

</ Div>

</ Div>

</ Div> <! - El contenedor DIV termina aquí ->

Este código crea elementos llamados \ ", \ VID", que es la abreviatura de divisiones. Estas cajas invisibles envuelven el contenido de su sitio. Con su hoja de estilo, se puede decir estas cajas dónde aparecerá en la página.

7 Ahora, vamos a hacer algunas cosas aparecen. En su hoja de estilo style.css etiqueta, escriba lo siguiente debajo de su declaración:

cuerpo {
margin: 0
IR
padding: 0
IR
}

envase {

Ancho: 960
IR
margen: auto
IR
}

{cabecera

background: # 000
IR
altura: 250 píxeles
IR
}

Hemos añadido un montón aquí, así que vamos a romper lo que hemos hecho. En primer lugar, establecemos las fronteras y el relleno de la ventana del navegador a 0. Esto asegura que nuestro sitio está a nivel con la ventana del navegador y no añade separación innecesaria.

A continuación, nos dimos nuestro DIV contenedor de un ancho y establecer su margen de automóviles. Se dará cuenta de que el DIV contenedor contiene todos los elementos de una página. Al establecer el margen de automóviles, que estamos contando esta caja y su contenido para centrar en la ventana del navegador. La anchura, 960, dice el cuadro de lo amplio que sea. Esto se puede cambiar, sin embargo, tener en cuenta que el usuario medio tiene un ancho de 1024px pantalla.

Por último, añadimos un poco de estilo a la cabecera DIV. Hemos establecido su color de fondo a negro (utilizando el código hexadecimal # 000) y le ha dado una altura de 250 píxeles.

Al previsualizar el archivo \ "index.html \" en un navegador, ahora debería ver un cuadro negro que es 250 píxeles de altura y al ras con la parte superior de la ventana.

8 A continuación, vamos a terminar el estilo del resto de los cuadros de contenido. Escribe lo siguiente en el archivo style.css:

column1 {

flotador izquierdo
IR
claro: la derecha
IR
background: # 0099FF
IR
Anchura: 480px
IR
altura: 350px
IR
}

columna2 {

flotar derecho
IR
background: # 999
IR
Anchura: 480px
IR
altura: 350px
IR
}

pie de página {

Limpia los dos
IR
background: # 555
IR
altura: 50px
IR
}

Usted se dará cuenta de que además de cambiar el fondo de estas cajas, también hemos añadido unos cuantos más elementos: flotador, claro, y la anchura. El elemento flotante le dice al cuadro de qué lado ir. En este ejemplo, estamos contando el cuadro de column1 para flotar o moverse a la caja de la columna2 para flotar o moverse hacia la derecha y la izquierda. El elemento claro en la primera columna, permite que el segundo cuadro que aparezca directamente al lado de él. La propiedad de ancho añadido a estas dos columnas es determinar la forma en que se llenan la caja. Por defecto, (vacío) flotaban cajas no se mostrarán a menos que reciba una anchura.

9 Ahora que se puede ver a sus cuatro cajas, es el momento de empezar a añadir y estilizar nuestro contenido. En su \ "index.html \" archivo, escriba lo siguiente:

1.) entre las etiquetas <div id = \ "cabecera \"> </ div> etiquetas, escribe: <p> Básico Tutorial CSS </ p>.

2.) entre las etiquetas <div id = \ "column1 \"> </ div> etiquetas, escribe: <p> Este es un tutorial básico sobre el uso de hojas de estilo en cascada </ p>..

3.) entre las etiquetas <div id = \ "columna2 \"> </ div> etiquetas, escribe: <p> Este tutorial fue creado por el autor y seguido por mí </ p>..

Lo que hemos hecho se añade un poco de texto a su sitio web que está listo para el peinado. Ahora, vuelve a su archivo \ "style.css \" y vamos a Estilo nuestro texto.

10 Con su \ "style.css \" Abrir archivo, escriba lo siguiente debajo de las propiedades existentes:

cabecera p {

font-family: Arial, Helvetica, sans-serif
IR
font-size: 30px
IR
text-align: top
IR
Color: #fff
IR
text-transform: mayúsculas
IR
}

column1 p {

font-family: Arial, Helvetica, sans-serif
IR
font-size: 18px
IR
Color: #fff
IR
text-transform: capitalizar
IR
}

columna2 p {

font-family: Arial, Helvetica, sans-serif
IR
font-size: 18px
IR
Color: #fff
IR
}

p {pie de página

font-family: Arial, Helvetica, sans-serif
IR
font-size: 14px
IR
Color: #fff
IR
}

Hemos hecho mucho, así que vamos a echar un vistazo a lo que se ha agregado. En primer lugar, todo el texto se le dio tres propiedades similares: font-family, font-tamaño y color. La propiedad font-family define qué fuente el texto se mostrará en. Tamaño de las letras establece el tamaño del texto y el color establece el color. Otra propiedad añadido a la cabecera de la columna 1 y el texto es: text-transform. Esto le permite controlar la capitalización de su texto. Para la cabecera, nos propusimos todo el texto en mayúsculas y en la columna 1, la primera letra de cada palabra se escribe con mayúscula.

Tecnología

Cómo crear una página Web CSS

Instrucciones

La creación de archivos y carpetas

La escritura de marcado y CSS

También podría gustarte