Este breve tutorial esta pensado para aquellas gente que quieren comenzar an emplear CSS desplazandolo hacia el pelo De ningun modo han escrito una hoja de clases CSS.
No explica demasiado acerca de CSS. Se centra en como crear un archivo HTML, un archivo CSS desplazandolo hacia el pelo como efectuar que los dos funcionen juntos. La ocasion finalizado este tutorial, podreis leer alguno de los otros tutoriales Con El Fin De darle mas moda a las archivos HTML y no ha transpirado CSS. Tambien podreis usar un editor sobre HTML o CSS, de prosperar sitios Web mas avanzados.
Al final de el tutorial habras hecho un archivo HTML igual que este:
El efecto sera la pagina HTML, con colores y formato, todo desarrollado con CSS.
Ten en cuenta que no deseo declarar que sea bonita O
Las secciones como esta son opcionales. Contienen explicaciones extras de el codigo HTML asi como CSS de el ej. El representacion de peligro, situado al comienzo, indica que se trata sobre un material mas avanzado que el resto.
Camino 1: redactar el codigo HTML
Para este tutorial, te sugiero que utilices las herramientas mas simples. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran razonable. Una ocasion comprendido lo fundamental, probablemente se quieran emplear herramientas mas complicadas, o tambien programas comerciales como Style Master, Dreamweaver o GoLive. Sin embargo para el desarrollo de una primera hoja sobre clases, seria mejor nunca distraerse con caracteristicas avanzadas sobre otras herramientas.
No uses procesadores sobre escrito igual que Microsoft Word u OpenOffice. Con ellos, habitualmente se generan archivos que las navegadores no podran entender. Con el fin de HTML desplazandolo hacia el pelo CSS, lo unico que necesitamos son archivos en texto plano.
El paso 1 radica en abrir tu editor sobre texto (Notepad, TextEdit, HTML Kit o el que desees), empezar con una ventana vacia y no ha transpirado escribir lo sub siguiente:
En realidad, no es necesario redactar el codigo: puedes copiarlo asi como pegarlo sin intermediarios en un editor.
Durante la reciente camino que Se Muestra en el archivo HTML, le dice al navegador el tipo sobre HTML (DOCTYPE implica DOCument TYPE – en castellano: ARQUETIPO sobre DOCumento). En este caso, se alcahueteria sobre la interpretacion 4.01 de HTML.
Las terminos que podemos encontrar entre se llaman etiquetas (tags) y, igual que puedes ver, el documento esta entre las etiquetas y . Dentro de desplazandolo hacia el pelo hay lugar Con El Fin De diversos clases sobre referencia que no apareceran en la pantalla. Hasta En seguida, el documento solo contiene el titulo pero posteriormente ademas se anadira la hoja sobre clases de CSS.
El es en que lugar se situa el escrito del documento. En un comienzo, todo cosa que se coloque ahi sera mostrado, salvo el texto que este dentro de estas siguientes etiquetas , las cuales muestran el contenido situado en ese sitio igual que un opinion de relato Con El Fin De nosotros mismos. El navegador la ignorara.
De las etiquetas de el ej,
-
crea una lista desordenada, es decir, una lista en la que las puntos no estan numerados. La etiqueta
indica el comienzo de un elemento lista.
Editor mostrando el codigo HTML.
En caso de que quieres conocer lo que significan los nombres que estan entre , un buen sitio de iniciar es Comenzando con HTML . Realizare determinados comentarios sobre la estructura de la pagina HTML que estamos usando de exponente.
- ul representa una relacion con un hipervinculo por cada factor. Esto mostrara nuestro menu sobre navegacion de el sitio con enlaces an otras paginas (ficticias) de el lugar Web. Supuestamente, todas las paginas sobre nuestro sitio Web deben un menu similar.
- Los elementos title y no ha transpirado p componen el unico contenido de esta pagina, mientras que la firma al final (address) sera la misma Con El Fin De todas las paginas del lugar.
Observa que nunca he cerrado las puntos “li” asi como “p”. En HTML (No obstante no en XHTML), se pueden silenciar las etiquetas y
, que fue lo que hice aca, precisamente Con El Fin De efectuar el texto mas discreto de leer. No obstante si se prefiere pueden ser anadidas.
Vamos a suponer que va a ser una pagina de un sitio Web que tendran varias paginas similares. Igual que es asiduo en paginas Web, esta posee un menu con enlaces a diferentes paginas en el sitio ficticio, un contenido unico y no ha transpirado la firma.
Hoy, elige Guardar como de el menu Archivo, ve inclusive un directorio/carpeta donde desees guardar el documento (el escritorio puede ser la alternativa) y posee el archivo igual que mipagina.html. No cierres aun el editor, lo necesitaras otra vez.
Despues, abre el archivo en un navegador sobre la siguiente manera: encuentra el archivo con tu gerente de archivos (Windows Explorer, Finder o Firefox) asi como haz clic, o copia clic, referente a el archivo mipagina.html. El archivo HTML debe abrirse en tu navegador predeterminado. (En caso de que se abre el documento, abre el navegador desplazandolo hacia el pelo arrastra el archivo referente a el).
Como puedes ver, la pagina goza de un porte muy aburrido.
Transito 2: Anadir ciertos colores
Probablemente estes observando escrito oscuro en un final blando, No obstante esto dependera sobre 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 estilo interna en el archivo HTML. Mas adelante, pondremos el HTML y el CSS en archivos variados. La separacion de esos archivos es apropiado ya que facilita la aplicacion de la misma hoja de garbo Con El Fin De variados archivos HTML: solo debes escribir la hoja sobre moda una ocasion. Pero en este transito, vamos a dejarlo cualquier en el mismo archivo.
Necesitamos anadir un elemento [etc.]
Las lineas que debes anadir estan marcadas en rojo. La primera linea dice que eso es una hoja de Modalidad asi como que esta escrita en CSS (“text/css”). La segunda linea indica que hemos anadido Modalidad al factor “body”. La tercera camino establece el color del escrito igual que morado desplazandolo hacia el pelo la sub siguiente camino lo que realiza seria darle al extremo la especie sobre amarillo verdoso.
Las hojas de muzmatch no funciona estilo en CSS estan compuestas sobre reglas. Cada regla goza de 3 partes:
- el selector (en el prototipo es: body), el que le dice al navegador la zona del documento que se vera afectada por la indicacion;
- la pertenencia (en el modelo, ‘color’ y no ha transpirado ‘background-color’ son ambas prestaciones), las cuales especifican que semblante de el esquema va a cambiarse;
- asi como el tasacion (‘purple’ y ‘#d8da3d’), el que da el valor de la propiedad.
El ej muestra que seria factible combinar las reglas. Hemos establecido dos caracteristicas, debido a que podriamos tener 2 reglas separadas:
El final de el aspecto body sera el extremo para cualquier el documento. a las otros elementos (p, li, address) no se les ha hexaedro el menor fondo en concreto, debido a que de manera predeterminada no tendran nadie (o seran transparentes). La hacienda ‘color’ establece el color del escrito que se halla en el elemento body, pero las otros elementos que podemos encontrar en el interior sobre body heredaran ese color, a no ser que se especifique lo opuesto. (Mas el frente del manillar anadiremos mas colores).
Leave a Reply