Tutorial de CSS Comenzando con HTML + CSS

Tutorial de CSS Comenzando con HTML + CSS

Este corto tutorial estГЎ pensado de aquellas personas que quieren empezar an usar CSS y no ha transpirado De ningГєn modo han escrito una hoja sobre clases CSS.

Nunca explica mucho sobre CSS. Se centra en cГіmo generar un archivo HTML, un archivo CSS y cГіmo realizar que los dos funcionen juntos. La ocasiГіn finalizado este tutorial, podrГ©is leer alguno de los otros tutoriales para darle mГЎs estilo a los archivos HTML asГ­ como CSS. TambiГ©n podrГ©is utilizar un editor sobre HTML o CSS, para llevar a cabo sitios Web mГЎs avanzados.

Al final de el tutorial habrГЎs hecho un archivo HTML igual que Г©ste:

El rendimiento serГЎ la pГЎgina HTML, con colores asГ­ como formato, todo desarrollado con CSS.

Ten en cuenta que nunca quiero aseverar que sea bonita ☺

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

Paso 1: redactar el cГіdigo HTML

Para este tutorial, te sugiero que utilices las herramientas mГЎs sencillas. Como podrГ­a ser, Notepad (Windows), TextEdit (Mac) o HTML Kit, serГЎn suficiente. Una vez comprendido lo elemental, probablemente se deseen usar herramientas mГЎs complicadas, o tambien programas comerciales como Style Master, Dreamweaver o GoLive. No obstante para el incremento sobre una primera hoja de estilos, es preferiblemente no distraerse con caracterГ­sticas avanzadas sobre otras herramientas.

Nunca utilices procesadores de texto igual que Microsoft Word u OpenOffice. Con ellos, habitualmente se generan archivos que las navegadores nunca pueden entender. De HTML y no ha transpirado CSS, lo Гєnico que necesitamos son archivos en escrito aspecto.

El paso 1 consta en abrir tu editor sobre texto (Notepad, TextEdit, HTML Kit o el que desees), comenzar con la ventana vacГ­a y no ha transpirado escribir lo siguiente:

Realmente, no es necesario redactar el cГіdigo: puedes copiarlo desplazГЎndolo hacia el pelo pegarlo directamente en un editor.

La primera lГ­nea que Se Muestra en el archivo HTML, le dice al navegador el prototipo sobre HTML (DOCTYPE quiere decir DOCument TYPE – en castellano: ARQUETIPO de DOCumento). En este caso, se prostituciГіn sobre la versiГіn 4.01 de HTML.

Las palabras que se encuentran dentro de se llaman etiquetas (tags) y, igual que puedes ver, el documento estГЎ entre las etiquetas asГ­ como . Dentro de desplazГЎndolo hacia el pelo Existen espacio Con El Fin De diferentes clases de noticia que nunca aparecerГЎn en la pantalla. Hasta ahora, el documento sГіlo contiene el tГ­tulo aunque posteriormente ademГЎs se aГ±adirГЎ la hoja sobre estilos de CSS.

El es en quГ© lugar se sitГєa el texto de el documento. En un principio, todo cosa que se Colocar allГ­ serГЎ mostrado, excepto el texto que estГ© adentro de las subsiguientes etiquetas , las cuales muestran el contenido situado en ese sitio igual que un opiniГіn sobre referencia para nosotros mismos. El navegador la ignorarГЎ.

De las etiquetas de el modelo,

    genera una “lista desordenada”, en otras palabras, una listado en la que las puntos no están numerados. La epíteto
    indica el principio de un “elemento lista”.

Editor mostrando el cГіdigo HTML.

Si quieres conocer lo que significan las nombres que estГЎn entre , un buen lugar de comendar serГ­a Comenzando con HTML . RealizarГ© ciertos comentarios acerca de la infraestructura sobre la pГЎgina HTML que estamos usando sobre modelo.

  • “ul” representa la listado con un hipervГ­nculo por cada factor. Lo cual mostrarГЎ el “menГє sobre navegaciГіn del sitio” con enlaces a diferentes pГЎginas (ficticias) de el sitio Web. Supuestamente, la totalidad de las pГЎginas sobre el sitio Web poseen un menГє similar.
  • Las elementos “title” asГ­ como “p” componen el Гєnico contenido de esta pГЎgina, mientras que la casa al final (“address”) serГЎ la misma de la totalidad de las pГЎginas de el lugar.

Observa que nunca he cerrado los elementos “li” asГ­ como “p”. En HTML (sin embargo nunca en XHTML), se pueden prescindir las etiquetas desplazГЎndolo hacia el pelo

, que fue lo que hice acГЎ, precisamente para realizar el escrito mГЎs discreto de leer. Sin embargo En Caso De Que se prefiere pueden ser aГ±adidas.

Vamos a suponer que va a ser una pГЎgina sobre un lugar Web que tendrГЎn varias pГЎginas similares. Como es habitual en pГЎginas Web, Г©sta dispone de un menГє con enlaces a diferentes pГЎginas en el lugar ficticio, un contenido Гєnico https://hookupdate.net/es/asiandate-review/ desplazГЎndolo hacia el pelo la casa.

En seguida, selecciona “Guardar como…” del menú Archivo, percibe Incluso un directorio/carpeta a donde quieras proteger el documento (el escritorio es la decisión) así como posee el archivo igual que “mipagina.html”. Nunca cierres aún el editor, lo necesitarás una diferente ocasión.

Luego, abre el archivo en un navegador sobre la sub siguiente manera: localiza el archivo con tu gerente de archivos (Windows Explorer, Finder o Firefox) y haz clic, o copia clic, en el archivo “mipagina.html”. El archivo HTML debe abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y arrastra el archivo en él).

Igual que puedes ver, la pГЎgina goza de un semblante bastante aburrido.

Transito 2: AГ±adir determinados colores

Posiblemente estГ©s observando escrito sable referente a un final blando, aunque lo cual va a depender de cГіmo estГ© tu navegador configurado. Para que la pГЎgina tenga alguna cosa mГЎs de encanto podemos aГ±adir algunos colores. (Deja el navegador abierto, lo utilizaremos mГЎs tarde).

Comenzaremos con una hoja sobre moda interna en el archivo HTML. MГЎs el frente del manillar, pondremos el HTML asГ­ como el CSS en archivos diversos. La separaciГіn sobre todos estos archivos serГ­a apropiado porque favorece la manejo de la misma hoja de estilo de distintas archivos HTML: sГіlo debes redactar la hoja sobre estilo la oportunidad. Aunque en este paso, vamos a dejarlo todo en el idГ©ntico archivo.

Necesitamos aГ±adir un elemento etc.

Las lГ­neas que debes aГ±adir se encuentran marcadas en rojo. La primera camino dice que eso resulta una hoja sobre garbo y no ha transpirado que estГЎ escrita en CSS (“text/css”). La segunda lГ­nea indica que hemos aГ±adido moda al aspecto “body”. La tercera lГ­nea establece el color de el texto igual que morado desplazГЎndolo hacia el pelo la siguiente lГ­nea lo que realiza serГ­a darle al fondo una especie sobre gualdo verdoso.

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

  1. el selector (en el exponente sería: “body”), el que le dice al navegador la parte del documento que se verá afectada por la norma;
  2. la hacienda (en el ejemplo, ‘color’ asГ­ como ‘background-color’ son ambas caracterГ­sticas), las cuales especifican quГ© apariencia del bosquejo va a cambiarse;
  3. asГ­ como el tasaciГіn (‘purple’ y ‘#d8da3d’), el que da el tasaciГіn para la hacienda.

El modelo muestra que serГ­a probable combinar las reglas. Hemos establecido 2 caracterГ­sticas, debido a que podemos tener dos reglas separadas:

El final del elemento body serГЎ el fondo de al completo el documento. a las otros elementos (p, li, address…) nunca se les ha poliedro el menor final en particular, debido a que de maneras predeterminada nunca tendrГЎn ningГєn (o serГЎn transparentes). La casa ‘color’ establece el color de el texto que se halla en el aspecto body, pero las otros componentes que se encuentran dentro de body heredarГЎn ese color, a no ser que se especifique lo opuesto. (MГЎs delante aГ±adiremos mГЎs colores).