Tutorial sobre CSS Comenzando con HTML + CSS

Este breve tutorial estГЎ diseГ±ado Con El Fin De aquellas personas que desean comenzar an emplear CSS asГ­ como De ningГєn modo han texto la hoja de estilos CSS.

Nunca explica bastante referente a CSS. Se centra en cГіmo fabricar un archivo HTML, un archivo CSS desplazГЎndolo hacia el pelo cГіmo realizar que las dos funcionen juntos. La vez finalizado este tutorial, podrГ©is leer alguno de los otros tutoriales para darle mГЎs moda a los archivos HTML y no ha transpirado CSS. AdemГЎs podrГ©is utilizar un editor de HTML o CSS, Con El Fin De progresar sitios Web mГЎs avanzados.

Al final del tutorial habrГЎs hecho un archivo HTML como Г©ste:

El fruto serГЎ una pГЎgina HTML, con colores y no ha transpirado formato, todo desarrollado con CSS.

Ten en cuenta que nunca deseo declarar que sea bonita ☺

Las secciones como ésta son opcionales. Contienen explicaciones adicionales del código HTML y no ha transpirado CSS del ejemplo. El emblema sobre “peligro”, situado al principio, indica que se intenta de un material más avanzado que el resto.

Paso 1: redactar el cГіdigo HTML

De este tutorial, te sugiero que uses las herramientas mГЎs sencillas. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, serГЎn suficiente. Una ocasiГіn comprendido lo elemental, probablemente se deseen utilizar herramientas mГЎs complicadas, o hasta programas comerciales como Style Master, Dreamweaver o GoLive. Aunque para el desarrollo sobre una primera hoja sobre clases, serГ­a mejor no distraerse con caracterГ­sticas avanzadas de diferentes herramientas.

Nunca uses procesadores de texto como Microsoft Word u OpenOffice. Con ellos, generalmente se generan archivos que los navegadores nunca pueden interpretar. Con el fin de HTML y CSS, lo Гєnico que necesitamos son archivos en escrito aspecto.

El transito 1 consiste en abrir tu editor de escrito (Notepad, TextEdit, HTML Kit o el que desees), empezar con la ventana vacГ­a asГ­ como escribir lo siguiente:

Realmente, nunca es indispensable redactar el cГіdigo: puedes copiarlo y no ha transpirado pegarlo directamente en un editor.

Durante la reciente lГ­nea que Se Muestra en el archivo HTML, le dice al navegador el prototipo de HTML (DOCTYPE implica DOCument TYPE – en espaГ±ol: CLASE de DOCumento). En este caso, se intenta de la traducciГіn 4.01 sobre HTML.

Las palabras que podemos encontrar entre se llaman etiquetas (tags) asГ­ como, igual que puedes ver, el documento estГЎ entre las etiquetas y no ha transpirado . Entre y Existen espacio para diversos tipos sobre referencia que no aparecerГЎn en la pantalla. Hasta Hoy, el documento sГіlo contiene el tГ­tulo pero posteriormente AdemГЎs se aГ±adirГЎ la hoja de estilos de CSS.

El es en quГ© lugar se sitГєa el texto de el documento. En un fundamentos, todo cosa que se Colocar allГЎ serГЎ mostrado, excepto el escrito que estГ© dentro de estas prГіximos etiquetas , las cuales muestran el contenido situado en ese punto igual que un interpretaciГіn de relato para nosotros mismos. El navegador la ignorarГЎ.

De estas etiquetas del prototipo,

genera la “lista desordenada”, en otras palabras, una relación en la que los componentes no están numerados. La epíteto
indica el comienzo de un “elemento lista”.

Editor mostrando el cГіdigo HTML.

Si deseas saber lo que significan los nombres que estГЎn dentro de , un buen sitio Con El pussy saga Fin De comenzar es Comenzando con HTML . RealizarГ© varios comentarios referente a la infraestructura de la pГЎgina HTML que estamos utilizando de prototipo.

• “ul” representa una listado con un hipervГ­nculo por cada elemento. Lo cual mostrarГЎ nuestro “menГє sobre navegaciГіn de el sitio” con enlaces a diferentes pГЎginas (ficticias) del lugar Web. Supuestamente, la totalidad de las pГЎginas de el lugar Web deben un menГє similar.
• Los puntos “title” y no ha transpirado “p” componen el Гєnico contenido de esta pГЎgina, entretanto que la firma al final (“address”) serГЎ la misma para la totalidad de las pГЎginas de el sitio.

Observa que no he cerrado los elementos “li” y no ha transpirado “p”. En HTML (aunque nunca en XHTML), se podrГЎn olvidar las etiquetas asГ­ como

, que fue lo que hice aquГ­, precisamente de hacer el escrito mГЎs discreto de leer. Sin embargo En Caso De Que se prefiere podrГЎn acontecer aГ±adidas.

Vamos a suponer que va a ser una pГЎgina sobre un sitio Web que tendrГЎn varias pГЎginas similares. Como es asiduo en pГЎginas Web, Г©sta goza de un menГє con enlaces an otras pГЎginas en el sitio ficticio, un contenido Гєnico desplazГЎndolo hacia el pelo la firma.

Hoy, selecciona “Guardar como…” del menú Archivo, percibe hasta un directorio/carpeta a donde quieras guardar el documento (el escritorio puede ser una alternativa) desplazándolo hacia el pelo posee el archivo igual que “mipagina.html”. Nunca cierres todavía el editor, lo necesitarás otra ocasión.

Después, abre el archivo en un navegador de la sub siguiente forma: haya el archivo con tu administrador sobre archivos (Windows Explorer, Finder o Firefox) y no ha transpirado haz clic, o duplo clic, en el archivo “mipagina.html”. El archivo HTML debe abrirse en tu navegador predeterminado. (En caso de que se abre el documento, abre el navegador y arrastra el archivo en él).

Igual que puedes ver, la pГЎgina tiene un semblante muy aburrido.

Transito 2: AГ±adir determinados colores

Seguramente estГ©s observando texto sable sobre un extremo blando, pero lo cual depende sobre cГіmo estГ© tu navegador configurado. Para que la pГЎgina tenga alguna cosa mГЎs sobre encanto podemos aГ±adir determinados colores. (permite el navegador abierto, lo utilizaremos mГЎs tarde).

Comenzaremos con una hoja sobre moda interna en el archivo HTML. MГЎs delante, ex pondremos el HTML y no ha transpirado el CSS en archivos variados. La separaciГіn de aquellos archivos es conveniente porque facilita la manejo sobre la misma hoja sobre garbo de distintas archivos HTML: sГіlo tienes que escribir la hoja de Modalidad la oportunidad. No obstante en este paso, vamos a dejarlo al completo en el exacto archivo.

Necesitamos aГ±adir un aspecto etc.

Las lГ­neas que debes aГ±adir estГЎn marcadas en rojo. La primera camino dice que eso resulta una hoja de Modalidad y que estГЎ escrita en CSS (“text/css”). La segunda lГ­nea indica que hemos aГ±adido estilo al factor “body”. La tercera camino establece el color de el escrito como morado y la sub siguiente lГ­nea lo que realiza serГ­a darle al fondo la especie de amarillo verdoso.

Las hojas sobre Modalidad en CSS se encuentran compuestas sobre reglas. Cada norma dispone de tres partes:

1. el selector (en el ej es: “body”), el cual le dice al navegador la parte de el documento que se verá afectada por la norma;
2. la patrimonio (en el ej, ‘color’ desplazГЎndolo hacia el pelo ‘background-color’ son ambas prestaciones), las cuales especifican quГ© apariencia de el esquema va a cambiarse;
3. y no ha transpirado el tasaciГіn (‘purple’ y no ha transpirado ‘#d8da3d’), el que da el tasaciГіn Con El Fin De la hacienda.

El ejemplo muestra que serГ­a viable combinar las reglas. Hemos establecido dos caracterГ­sticas, por lo que podrГ­amos tener 2 reglas separadas:

El fondo de el factor body serГЎ el extremo de cualquier el documento. a los otros componentes (p, li, address…) nunca se les ha poliedro el menor final en concreto, por lo que sobre forma predeterminada no tendrГЎn nadie (o serГЎn transparentes). La casa ‘color’ establece el color de el texto que se encuentra en el aspecto body, No obstante los otros elementos que se encuentran en el interior de body heredarГЎn ese color, a no acontecer que se especifique lo opuesto. (MГЎs adelante aГ±adiremos mГЎs colores).