Cargo actual:Index > Cómo crear un CSS Página Web

Cómo crear un CSS Página Web

Actualizado:05-13Fuente: consolidación de la red
Advertisement

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, la CSS determina el estilo y la apariencia de los elementos en su página.

Cosas que necesitará

Editor de texto como Notepad ++ o TextMate)

Creación de archivos y carpetas

Antes de empezar a escribir su hoja de estilos, tendrá que configurar el diseño básico para su sitio web. Para ello, copie y pegue el siguiente estructura en un documento de la libreta en blanco:

<Html>

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

<Body>
</ Body>

</ Html>

Una vez que hayas 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 \".

Abra 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.

Una vez que has escrito el texto, guardar este archivo como \ "style.css \" en su carpeta llamada \ "CSS Sitio Web \". Asegúrese de cambiar el tipo de archivo de \ ". Html \" a \ ". Css \". Esto es absolutamente necesario, ya que su hoja de estilo no funcionará correctamente sin el \ ". Css \" extensión.

Ahora que tienes tus documentos HTML y CSS, debe vincularlos. Para ello, agregue unas cuantas plazas bajo la línea de \ "<title> CSS básico Sitio Web </ title> \" y escribir lo siguiente:

<Link rel = tipo \ "hoja de estilo \" = \ "text / css \" href = \ "style.css \" />

Una vez que hayas hecho esto, se vincularán su hoja de estilos y marcas. Ahora puede empezar a construir su sitio web utilizando CSS.

Escritura de marcado y CSS

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

<Div id = \ "contenedor \"> <! - El recipiente contiene todas las páginas de contenido ->

<Div id = \ "header \">

</ Div>

<Div id = \ "columna-1 \">

</ Div>

<Div id = \ "columna-2 \">

</ Div>

<Div id = \ "pie de página \">

</ Div>

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

Este código crea elementos llamados \ "DIVs, \", 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.

Ahora, vamos a hacer aparecer un par de cosas. En su hoja de estilo style.css marcado, escribir lo siguiente debajo de su declaración:

body {
margin: 0
GO
padding: 0
GO
}

contenedor {

width: 960px
GO
margen: auto
GO
}

encabezado {

background: # 000
GO
altura: 250px
GO
}

Hemos añadido mucho 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, le dimos nuestra DIV contenedor de un ancho y establecer su margen para auto. Se dará cuenta de que el DIV contenedor contiene todos los elementos de una página. Al establecer el margen de auto, estamos contando de esta caja y su contenido para centrar en la ventana del navegador. El ancho, 960px, dice la caja lo amplio que sea. Esto se puede cambiar, sin embargo, tener en cuenta que el usuario medio tiene un ancho de 1024px de pantalla.

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

Cuando una vista previa del archivo \ "index.html \" en un navegador, ahora debería ver un cuadro negro que es 250px de altura y al ras con la parte superior de la ventana.

A continuación, vamos a terminar el estilo del resto de las cajas de contenido. Escribe lo siguiente en su archivo style.css:

column1 {

flotador izquierdo
GO
claro: la derecha
GO
background: # 0099FF
GO
width: 480px
GO
altura: 350px
GO
}

column2 {

float: right
GO
background: # 999
GO
width: 480px
GO
altura: 350px
GO
}

footer {

clear: both
GO
background: # 555
GO
altura: 50px
GO
}

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: float, claro, y el ancho. El elemento flotante dice la caja que lado ir. En este ejemplo, estamos diciendo la caja column1 flotar o moverse a la casilla column2 para flotar o moverse hacia la derecha e izquierda. El elemento claro en la primera columna, permite la segunda caja que aparezca directamente junto a él. La propiedad width añadido a estas dos columnas es determinar cómo llenar la caja. Por defecto, (vacío) flotaban cajas no se mostrarán a menos que reciba una anchura.

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

1.) Entre el <div id = \ "header \"> </ div> etiquetas, escribir: <p> Básico Tutorial CSS </ p>.

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

3.) Entre el <div id = \ "column2 \"> </ div> etiquetas, escribir: <p> Este tutorial fue creado por el autor y seguido por mí </ p>..

4.) Entre el <div id = \ "pie de página \"> </ div> etiquetas, escribir: <p> © 200X mí. Todos los derechos reservados. </ P>.

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

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

cabecera p {

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

column1 p {

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

column2 p {

font-family: Arial, Helvetica, sans-serif
GO
font-size: 18px
GO
colores: #fff
GO
}

footer p {

font-family: Arial, Helvetica, sans-serif
GO
font-size: 14px
GO
colores: #fff
GO
}

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-size 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ñade a la cabecera y la columna 1 del texto es: text-transform. Esto le permite controlar la capitalización de su texto. Para la cabecera, nos pusimos todo el texto en mayúsculas y en la columna 1, la primera letra de cada palabra se escribe con mayúscula.

  • Cómo crear un CSS Página Web Actualizado:05-13

    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 d

  • Cómo crear una encuesta Página Web en Word Actualizado:06-02

    Páginas web a menudo se crean usando el software hecho especialmente para la creación de sitios web. Sin embargo, las páginas web se pueden crear en Microsoft Word. Todos los documentos creados en Microsoft Word se pueden guardar como páginas Web. La

  • Cómo crear una aplicación Página Web en Microsoft AccessCómo crear una aplicación Página Web en Microsoft Access Actualizado:06-22

    Microsoft Access proporciona las herramientas que necesita para crear páginas de acceso a datos, que son formas de páginas web que se conectan a sus bases de datos Access. Páginas de acceso a datos pueden ser estáticos o dinámicos. Los informes suele

  • Cómo crear una simple página Web con HTML Actualizado:06-21

    Cualquier persona con un poco de conocimiento puede crear su propio rincón del mundo que detalla los intereses más oscuros. Una página web puede estar en funcionamiento en un corto período de tiempo mediante la creación de una página web sencilla con

  • Cómo crear sitemaps para páginas web estáticas HTMLCómo crear sitemaps para páginas web estáticas HTML Actualizado:07-02

    Los llamados mapas de sitio son archivos que contienen información sobre la estructura de un sitio web. Por lo general, no es la única información pero eso debería ser suficiente como explicación por ahora. Muchos de los sistemas de gestión de conten

  • Cómo crear un ligero Página Web en segundosCómo crear un ligero Página Web en segundos Actualizado:10-25

    Hay tantas maneras diferentes de poner arriba de texto en Internet. Tienes que Facebook, Twitter, WordPress, Medio, Tumblr y, por supuesto, la forma de crear un sitio web por su cuenta. Si lo que desea es escribir algo de forma rápida y tenerlo acces

  • ¿Cómo puedo crear mi propia página web de forma gratuita? Actualizado:06-14

    Aunque hay muchas empresas que van a cobrar usted para desarrollar un sitio web - incluso una pequeña, sitio web personal - Internet ofrece muchas herramientas que puede utilizar para crear su propia página web de forma gratuita, incluso si usted nun

  • Flavorsme - Crear su propia página web personalizada gratuitoFlavorsme - Crear su propia página web personalizada gratuito Actualizado:06-09

    Twittering la otra noche, me topé con un servicio llamado Flavors.me . Es un sitio web de portal personal para vincular todo tu contenido de todo el Internet. Lo que significa que los visitantes de tu página Flavors.me obtendrán enlaces para decir tu

  • Cómo Poseer su propia página web (incluso si no se puede construir uno) Pt 3Cómo Poseer su propia página web (incluso si no se puede construir uno) Pt 3 Actualizado:06-28

    Si usted ha seguido a lo largo de, usted ha comprado de alojamiento e instalado el software de WordPress para una nueva página web ostentoso. Hoy vamos a explicar las ventajas menos obvias de WordPress y cómo usted puede conseguir un poco más kilomet

  • Cómo crear un CSS Vertical Barra de navegación Uso Actualizado:11-20

    Creación de una barra de navegación horizontal añadirá funcionalidad a su sitio y ayudar a mantenerlo organizado. También puede agregar valor en términos de SEO. Es un proceso simple que se puede hacer uso de CSS o Cascading Style Sheets. Cómo crear