Este breve tutorial esta pensado Con El Fin De esas usuarios que quieren iniciar an emplear CSS y De ningun modo han texto una hoja de estilos CSS.
No explica bastante acerca de CSS. Se centra en como producir un archivo HTML, un archivo CSS desplazandolo hacia el pelo como hacer que los dos funcionen juntos. Una ocasion finalizado este tutorial, podreis leer cualquiera de los otros tutoriales Con El Fin De darle mas Modalidad a las archivos HTML asi como CSS. Tambien podreis utilizar un editor sobre HTML o CSS, Con El Fin De progresar lugares Web mas avanzados.
Al final de el tutorial habras hecho un archivo HTML igual que este:
El efecto sera una pagina HTML, con colores y no ha transpirado formato, al completo desarrollado con CSS.
Ten en cuenta que nunca quiero aseverar que sea bonita O
Las secciones igual que esta son opcionales. Contienen explicaciones extras del codigo HTML asi como CSS de el ejemplo. El simbolo de “peligro”, situado al comienzo, indica que se trata de un material mas avanzado que el resto.
Paso 1: Escribir el codigo HTML
Con el fin de este tutorial, te sugiero que emplees las herramientas mas sencillas. Como podria ser, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran bastante. Una ocasion comprendido lo elemental, posiblemente se deseen emplear herramientas mas complicadas, o hasta programas comerciales como Style Master, Dreamweaver o GoLive. No obstante para el progreso sobre una primera hoja sobre estilos, seria superior nunca distraerse con caracteristicas avanzadas de otras herramientas.
No utilices procesadores de texto como Microsoft Word u OpenOffice. Con ellos, normalmente se generan archivos que los navegadores nunca pueden interpretar. De HTML desplazandolo hacia el pelo CSS, lo unico que necesitamos son archivos en escrito ВїcГіmo funciona el outpersonals aspecto.
El paso 1 estriba en abrir tu editor de escrito (Notepad, TextEdit, HTML Kit o el que desees), empezar con la ventana vacia desplazandolo hacia el pelo escribir lo siguiente:
Realmente, no es obligatorio redactar el codigo: puedes copiarlo desplazandolo hacia el pelo pegarlo sin intermediarios en un editor.
Durante la reciente camino que Se Muestra en el archivo HTML, le dice al navegador el arquetipo de HTML (DOCTYPE significa DOCument TYPE – en castellano: ARQUETIPO sobre DOCumento). En este caso, se alcahueteria de la interpretacion 4.01 sobre HTML.
Las terminos que se encuentran dentro de se llaman etiquetas (tags) y no ha transpirado, igual que puedes ver, el documento esta entre las etiquetas desplazandolo hacia el pelo . Entre y no ha transpirado hay lugar para diversos clases de noticia que no apareceran en la pantalla. Inclusive Actualmente, el documento solo contiene el titulo No obstante posteriormente Ademas se anadira la hoja de estilos de CSS.
El es donde se situa el escrito de el documento. En un comienzo, todo cosa que se coloque alli sera mostrado, salvo el escrito que este adentro de las siguientes etiquetas , las cuales muestran el contenido situado en ese sitio como un interpretacion de referencia Con El Fin De nosotros mismos. El navegador la ignorara.
De estas etiquetas del prototipo,
-
genera una “lista desordenada”, en otras palabras, una lista en la cual los elementos no estan numerados. La epiteto
indica el principio de un “elemento lista”.
Editor mostrando el codigo HTML.
Si quieres conocer lo que significan los nombres que estan dentro de , un buen lugar de empezar seria Comenzando con HTML . Realizare determinados comentarios acerca de la estructura de la pagina HTML que estamos utilizando sobre ejemplo.
- “ul” representa la lista con un hipervinculo por cada aspecto. Lo cual mostrara el “menu de navegacion de el sitio” con enlaces an otras paginas (ficticias) de el lugar Web. Supuestamente, todas las paginas sobre nuestro sitio Web tienen un menu similar.
- Las componentes “title” asi como “p” componen el unico contenido sobre esta pagina, entretanto que la firma al final (“address”) sera la misma para todas las paginas de el lugar.
Observa que no he cerrado los elementos „li“ asi como „p“. En HTML (pero no en XHTML), se podran suprimir las etiquetas asi como
, que fue lo que hice aca, precisamente de efectuar el escrito mas simple sobre leer. Aunque si se prefiere podrian acontecer anadidas.
Vamos an implicar que va a ser la pagina de un sitio Web que tendran varias paginas similares. Como es frecuente en paginas Web, esta dispone de un menu con enlaces a diferentes paginas en el sitio ficticio, un contenido unico y la firma.
Hoy por hoy, selecciona “Guardar como…” de el menu Archivo, percibe Incluso un directorio/carpeta a donde desees guardar el documento (el escritorio puede ser la decision) asi como guarda el archivo como “mipagina.html”. Nunca cierres aun el editor, lo necesitaras otra oportunidad.
Luego, abre el archivo en un navegador de la siguiente manera: localiza el archivo con tu administrador sobre archivos (Windows Explorer, Finder o Firefox) asi como haz clic, o doble clic, acerca de el archivo “mipagina.html”. El archivo HTML deberia abrirse en tu navegador predeterminado. (En caso de que se abre el documento, abre el navegador asi como arrastra el archivo referente a el).
Igual que puedes ver, la pagina tiene un aspecto harto aburrido.
Transito 2: Anadir ciertos colores
Probablemente estes viendo texto bruno sobre un final blando, pero esto va a depender de como este tu navegador configurado. Con el fin de que la pagina tenga alguna cosa mas de encanto podemos anadir ciertos colores. (permite el navegador abierto, lo utilizaremos mas tarde).
Comenzaremos con una hoja de garbo interna en el archivo HTML. Mas el frente del manillar, pondremos el HTML y el CSS en archivos distintas. La separacion sobre dichos archivos seria aconsejable ya que facilita la utilizacion sobre la misma hoja de moda Con El Fin De diversos archivos HTML: solo tienes que redactar la hoja sobre moda una ocasion. Sin embargo en este paso, vamos a dejarlo cualquier en el igual archivo.
Necesitamos anadir un aspecto [etc.]
Las lineas que debes anadir estan marcadas en colorado. Durante la reciente camino dice que eso resulta una hoja sobre garbo y que esta escrita en CSS („text/css“). La segunda linea indica que hemos anadido garbo al elemento „body“. La tercera linea establece el color del texto como morado y no ha transpirado la sub siguiente camino lo que realiza es darle al extremo la clase de amarillo verdoso.
Las hojas de Modalidad en CSS se encuentran compuestas sobre reglas. Cada regla goza de tres partes:
- el selector (en el modelo seria: “body”), el cual le dice al navegador la zona de el documento que se vera afectada por la regla;
- la casa (en el ej, ‚color‘ y ‚background-color‘ son ambas prestaciones), las cuales especifican que semblante de el esbozo va a cambiarse;
- y no ha transpirado el tasacion (‚purple‘ desplazandolo hacia el pelo ‚#d8da3d‘), el que da el precio Con El Fin De la propiedad.
El ejemplo muestra que es factible juntar las reglas. Hemos establecido dos prestaciones, por lo que podemos tener dos reglas separadas:
El fondo del elemento body sera el final para cualquier el documento. a los otros elementos (p, li, address…) no se les ha dado el menor extremo en concreto, por lo que de manera predeterminada no tendran ningun (o seran transparentes). La dominio ‚color‘ establece el color de el escrito que se encuentra en el factor body, aunque los otros elementos que podemos encontrar adentro de body heredaran ese color, a no ser que se especifique lo opuesto. (Mas el frente del manillar anadiremos mas colores).