Tutorial de CSS Comenzando con HTML + CSS

Tutorial de CSS Comenzando con HTML + CSS

Este corto tutorial esta disenado de esas seres que quieren comenzar an usar CSS y no ha transpirado nunca han texto una hoja sobre estilos CSS.

No explica demasiado en CSS. Se centra en como generar un archivo HTML, un archivo CSS y no ha transpirado como realizar que las 2 funcionen juntos. Una ocasion finalizado este tutorial, podreis leer alguno sobre las otros tutoriales Con El Fin De darle mas moda a los archivos HTML y no ha transpirado CSS. Tambien podreis emplear un editor de HTML o CSS, para llevar a cabo lugares Web mas avanzados.

Al final de el tutorial habras hecho un archivo HTML como este:

El consecuencia sera una pagina HTML, con colores y no ha transpirado formato, cualquier desarrollado con CSS.

Ten en cuenta que no deseo declarar que sea bonita O

Las secciones como esta son opcionales. Contienen explicaciones extras del codigo HTML desplazandolo hacia el pelo CSS de el modelo. El simbolo sobre peligro, situado al comienzo, indica que se intenta de un material mas avanzado que el resto.

Transito 1: redactar el codigo HTML

who is scheana shay dating now

Para este tutorial, te sugiero que uses las herramientas mas simples. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran bastante. La ocasion comprendido lo basico, posiblemente se quieran utilizar herramientas mas complicadas, o incluso programas comerciales igual que Style Master, Dreamweaver o GoLive. Pero para el progreso de una primera hoja sobre estilos, es preferible nunca distraerse con caracteristicas avanzadas de diferentes herramientas.

Nunca utilices procesadores sobre escrito igual que Microsoft Word u OpenOffice. Con ellos, habitualmente se generan archivos que los navegadores no pueden interpretar. De HTML desplazandolo hacia el pelo CSS, lo unico que necesitamos son archivos en texto aspecto.

El paso 1 estriba en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees), iniciar con una ventana vacia desplazandolo hacia el pelo redactar lo siguiente:

Realmente, nunca es preciso redactar el codigo: puedes copiarlo y pegarlo directamente en un editor.

La primera camino mature quality singles opiniones espaГ±a que Se Muestra en el archivo HTML, le dice al navegador el arquetipo de HTML (DOCTYPE implica DOCument TYPE – en castellano: CLASE de DOCumento). En este caso, se alcahueteria sobre la lectura 4.01 sobre HTML.

Las terminos que se encuentran entre se llaman etiquetas (tags) desplazandolo hacia el pelo, igual que puedes ver, el documento esta dentro de las etiquetas y . Entre y no ha transpirado hay lugar de distintas clases sobre referencia que no apareceran en la monitor. Inclusive Actualmente, el documento solo contiene el titulo aunque posteriormente tambien se anadira la hoja de estilos sobre CSS.

El seria en que lugar se situa el escrito de el documento. En un principio, cualquier cosa que se coloque alla sera mostrado, excepto el escrito que este adentro de estas siguientes etiquetas , las cuales muestran el contenido situado en ese lugar igual que un comentario de referencia Con El Fin De nosotros mismos. El navegador la ignorara.

De estas etiquetas de el ej,

    crea la lista desordenada, en otras palabras, una listado en la que las elementos nunca se encuentran numerados. La etiqueta
    indica el comienzo sobre un elemento lista.

Editor mostrando el codigo HTML.

Si quieres conocer lo que significan las nombres que se encuentran entre , un buen lugar de empezar es Comenzando con HTML . Realizare varios comentarios sobre la configuracion de la pagina HTML que estamos utilizando sobre exponente.

  • ul representa la lista con un hipervinculo por cada factor. Esto mostrara el menu de navegacion de el sitio con enlaces a diferentes paginas (ficticias) del lugar Web. Supuestamente, todas las paginas de el lugar Web deben un menu similar.
  • Las elementos title y no ha transpirado p componen el unico contenido sobre esta pagina, mientras que la casa al final (address) sera la misma Con El Fin De todas las paginas del lugar.

Observa que nunca he cerrado los componentes “li” y “p”. En HTML (No obstante nunca en XHTML), se podrian callar las etiquetas desplazandolo hacia el pelo

, que fue lo que hice aqui, precisamente de elaborar el texto mas simple de leer. Pero En Caso De Que se prefiere podrian acontecer anadidas.

Vamos a suponer que va an acontecer una pagina sobre un sitio Web que tendran varias paginas similares. Como seria habitual en paginas Web, esta posee un menu con enlaces an otras paginas en el sitio ficticio, un contenido unico asi como la firma.

Hoy por hoy, elige Guardar como de el menu Archivo, percibe inclusive un directorio/carpeta a donde quieras proteger el documento (el escritorio es una eleccion) y guarda el archivo igual que mipagina.html. No cierres aun el editor, lo necesitaras otra oportunidad.

Despues, abre el archivo en un navegador sobre la sub siguiente maneras: haya el archivo con tu gerente sobre archivos (Windows Explorer, Finder o Firefox) desplazandolo hacia el pelo haz clic, o duplo clic, sobre el archivo mipagina.html. El archivo HTML debe abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y no ha transpirado arrastra el archivo en el novio).

Como puedes ver, la pagina dispone de un porte bastante aburrido.

Transito 2: Anadir varios colores

Posiblemente estes observando texto oscuro sobre un fondo blando, pero esto dependera de como este tu navegador configurado. Con el fin de que la pagina tenga algo mas de encanto podemos anadir ciertos colores. (permite el navegador abierto, lo utilizaremos mas tarde).

Comenzaremos con la hoja sobre moda interna en el archivo HTML. Mas delante, ex pondremos el HTML y el CSS en archivos distintas. La separacion sobre todos estos archivos es apropiado ya que favorece la empleo sobre la misma hoja de Modalidad para diferentes archivos HTML: solo debes escribir la hoja sobre moda una ocasion. Aunque en este camino, vamos a dejarlo todo en el mismo archivo.

Necesitamos anadir un elemento [etc.]

Las lineas que debes anadir estan marcadas en rojo. Durante la reciente camino dice que eso resulta una hoja sobre garbo y no ha transpirado que esta escrita en CSS (“text/css”). La segunda camino indica que hemos anadido garbo al aspecto “body”. La tercera linea establece el color de el escrito como morado y la siguiente linea lo que realiza seria darle al extremo una especie de amarillento verdoso.

Las hojas sobre Modalidad en CSS se encuentran compuestas de reglas. Cada regla posee 3 zonas:

  1. el selector (en el ej seria: body), el cual le dice al navegador la zona del documento que se vera afectada por la indicacion;
  2. la hacienda (en el ej, ‘color’ desplazandolo hacia el pelo ‘background-color’ son ambas propiedades), las cuales especifican que apariencia de el bosquejo va a cambiarse;
  3. asi como el tasacion (‘purple’ desplazandolo hacia el pelo ‘#d8da3d’), el que da el valor Con El Fin De la dominio.

El modelo muestra que seria concebible combinar las reglas. Hemos establecido dos propiedades, debido a que podemos tener dos reglas separadas:

El extremo de el factor body sera el fondo Con El Fin De todo el documento. a los otros elementos (p, li, address) no se les ha dado el menor final en concreto, por lo que de maneras predeterminada no tendran nadie (o seran transparentes). La dominio ‘color’ establece el color de el texto que se halla en el aspecto body, aunque los otros elementos que podemos encontrar adentro de body heredaran ese color, a nunca ser que se especifique lo opuesto. (Mas el frente del manillar anadiremos mas colores).