Tutorial sobre CSS Comenzando con HTML + CSS

Tutorial sobre CSS Comenzando con HTML + CSS

Este corto tutorial esta disenado Con El Fin De aquellas seres que quieren empezar an usar CSS desplazandolo hacia el pelo Jamas han escrito la hoja de clases CSS.

Nunca explica bastante en CSS. Se centra en como fabricar un archivo HTML, sugardaddyforme ordenador un archivo CSS y como realizar que las dos funcionen juntos. La vez finalizado este tutorial, podreis leer cualquier de las otros tutoriales Con El Fin De darle mas moda a los archivos HTML y CSS. Ademas podreis utilizar un editor de HTML o CSS, Con El Fin De ejecutar sitios Web mas avanzados.

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

El consecuencia sera la pagina HTML, con colores asi como formato, todo desarrollado con CSS.

Ten en cuenta que no deseo decir que sea bonita O

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

Transito 1: redactar el codigo HTML

oprah life class dating

Con el fin de este tutorial, te sugiero que uses las herramientas mas simples. Como podria ser, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran razonable. Una ocasion comprendido lo esencial, probablemente se deseen utilizar herramientas mas complicadas, o incluso programas comerciales igual que Style Master, Dreamweaver o GoLive. Pero de el progreso sobre una primera hoja sobre estilos, es mejor nunca distraerse con caracteristicas avanzadas sobre diferentes herramientas.

Nunca emplees procesadores sobre escrito igual que Microsoft Word u OpenOffice. Con ellos, normalmente se generan archivos que las navegadores nunca podran interpretar. De HTML y no ha transpirado CSS, lo unico que necesitamos son archivos en escrito plano.

El camino 1 radica en abrir tu editor sobre texto (Notepad, TextEdit, HTML Kit o el que desees), iniciar con la ventana vacia y no ha transpirado escribir lo siguiente:

En realidad, nunca es necesario redactar el codigo: puedes copiarlo asi como pegarlo directamente en un editor.

Durante la reciente camino que aparece en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE quiere decir DOCument TYPE – en espanol: MODELO de DOCumento). En este caso, se intenta de la traduccion 4.01 de HTML.

Las palabras que podemos encontrar entre se llaman etiquetas (tags) y no ha transpirado, igual que puedes ver, el documento esta entre las etiquetas y no ha transpirado . Dentro de desplazandolo hacia el pelo hay lugar de variados clases sobre noticia que no apareceran en la monitor. Inclusive Actualmente, el documento solo contiene el titulo sin embargo posteriormente igualmente se anadira la hoja de estilos sobre CSS.

El es donde se situa el escrito de el documento. En un fundamentos, cualquier cosa que se Colocar ahi sera mostrado, excepto el escrito que este dentro de estas proximos etiquetas , las cuales muestran el contenido situado en ese sitio igual que un critica sobre relato Con El Fin De nosotros mismos. El navegador la ignorara.

De estas etiquetas del prototipo,

    genera la lista desordenada, es decir, una lista en la cual los componentes nunca se encuentran numerados. La etiqueta
    indica el principio de un elemento lista.

Editor mostrando el codigo HTML.

En caso de que te gustaria saber lo que significan los nombres que estan entre , un buen sitio para comendar seria Comenzando con HTML . Realizare ciertos comentarios en la organizacion de la pagina HTML que estamos usando sobre exponente.

  • ul representa una relacion con un hipervinculo por cada factor. Lo cual mostrara el menu de navegacion de el sitio con enlaces a diferentes paginas (ficticias) de el sitio Web. Supuestamente, todas las paginas de nuestro sitio Web poseen un menu similar.
  • Las componentes title asi como p componen el unico contenido de esta pagina, entretanto que la casa al final (address) sera la misma Con El Fin De la totalidad de las paginas de el lugar.

Observa que no he cerrado los componentes “li” asi como “p”. En HTML (aunque no en XHTML), se podrian silenciar las etiquetas y no ha transpirado

, que fue lo que hice aqui, precisamente Con El Fin De hacer el escrito mas discreto de leer. Aunque En Caso De Que se prefiere pueden acontecer anadidas.

Vamos a suponer que va an acontecer la pagina de un lugar Web que tendran varias paginas similares. Igual que es usual en paginas Web, esta posee un menu con enlaces a diferentes paginas en el sitio ficticio, un contenido unico desplazandolo hacia el pelo la casa.

Ahora, selecciona Guardar como del menu Archivo, percibe hasta un directorio/carpeta a donde quieras proteger el documento (el escritorio puede ser la posibilidad) y tiene el archivo como mipagina.html. Nunca cierres aun el editor, lo necesitaras otra oportunidad.

Luego, abre el archivo en un navegador sobre la siguiente forma: halla el archivo con tu gerente sobre archivos (Windows Explorer, Finder o Firefox) y no ha transpirado haz clic, o doble clic, en el archivo mipagina.html. El archivo HTML deberia abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador asi como arrastra el archivo en el novio).

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

Transito 2: Anadir ciertos colores

Posiblemente estes viendo escrito bruno acerca de un extremo blando, No obstante esto depende de como este tu navegador configurado. Con el fin de que la pagina tenga una cosa mas de encanto podemos anadir varios colores. (Deja el navegador abierto, lo utilizaremos mas tarde).

Comenzaremos con la hoja sobre Modalidad interna en el archivo HTML. Mas adelante, ex pondremos el HTML y el CSS en archivos distintas. La separacion de esos archivos es recomendable puesto que favorece la uso de la misma hoja sobre Modalidad Con El Fin De distintas archivos HTML: solo debes redactar la hoja sobre garbo una vez. Aunque en este camino, vamos a dejarlo cualquier en el identico archivo.

Necesitamos anadir un aspecto [etc.]

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

Las hojas de Modalidad en CSS estan compuestas sobre reglas. Cada regla posee tres zonas:

  1. el selector (en el exponente seria: body), el que le dice al navegador la zona de el documento que se vera afectada por la indicacion;
  2. la hacienda (en el ejemplo, ‘color’ desplazandolo hacia el pelo ‘background-color’ son ambas caracteristicas), las cuales especifican que apariencia del diseno va a cambiarse;
  3. y el valor (‘purple’ desplazandolo hacia el pelo ‘#d8da3d’), el que da el valor para la casa.

El ej muestra que seria posible juntar las reglas. Hemos establecido dos caracteristicas, debido a que podemos tener dos reglas separadas:

El extremo de el elemento body sera el fondo Con El Fin De al completo el documento. a los otros puntos (p, li, address) nunca se les ha cubo el menor final en concreto, por lo que de forma predeterminada no tendran nadie (o seran transparentes). La propiedad ‘color’ establece el color del texto que se encuentra en el aspecto body, No obstante los otros puntos que se encuentran dentro sobre body heredaran ese color, a no ser que se especifique lo contrario. (Mas el frente del manillar anadiremos mas colores).

返事

メールアドレスが公開されることはありません。