Este corto tutorial esta disenado para aquellas individuos que desean empezar an utilizar CSS desplazandolo hacia el pelo De ningun modo han escrito la hoja de clases CSS.
Nunca explica abundante acerca de CSS. Se centra en como crear un archivo HTML, un archivo CSS y no ha transpirado como realizar que las dos funcionen juntos. Una oportunidad finalizado este tutorial, podreis leer cualquiera sobre los otros tutoriales Con El Fin De darle mas moda a los archivos HTML y no ha transpirado CSS. Tambien podreis usar un editor de HTML o CSS, para ejecutar sitios Web mas avanzados.
Al final del tutorial habras hecho un archivo HTML igual que este:
El resultado sera una pagina HTML, con colores desplazandolo hacia el pelo formato, todo desarrollado con CSS.
Ten en cuenta que no deseo declarar que sea bonita O
Las secciones igual que esta son opcionales. Contienen explicaciones extras de el codigo HTML y CSS de el ejemplo. El simbolo de “peligro”, situado al fundamentos, indica que se prostitucion sobre un material mas avanzado que el resto.
Paso 1: Escribir el codigo HTML
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 vez comprendido lo elemental, posiblemente se deseen utilizar herramientas mas complicadas, o incluso programas comerciales igual que Style Master, Dreamweaver o GoLive. Sin embargo para el desarrollo sobre una primera hoja sobre estilos, seria preferiblemente nunca distraerse con caracteristicas avanzadas sobre otras herramientas.
No uses procesadores sobre texto igual que Microsoft Word u OpenOffice. Con ellos, generalmente se generan archivos que las navegadores no podran interpretar. Con el fin de HTML asi como CSS, lo unico que necesitamos son archivos en texto plano.
El paso 1 estriba en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees), iniciar con la ventana vacia desplazandolo hacia el pelo redactar lo sub siguiente:
Realmente, no seria necesario redactar el codigo: puedes copiarlo desplazandolo hacia el pelo pegarlo directamente en un editor.
Durante la reciente camino que aparece en el archivo HTML, le dice al navegador el clase de HTML (DOCTYPE obliga DOCument TYPE – en espanol: ARQUETIPO sobre DOCumento). En este caso, se trata de la version 4.01 de HTML.
Las palabras que podemos encontrar dentro de se llaman etiquetas (tags) y no ha transpirado, igual que puedes ver, el documento esta dentro de las etiquetas y . Entre y no ha transpirado Tenemos lugar para distintas clases de informacion que nunca apareceran en la pantalla. Hasta Hoy, el documento solo contiene el titulo sin embargo posteriormente igualmente se anadira la hoja sobre clases sobre CSS.
El es donde se situa el texto de el documento. En un principio, todo cosa que se coloque alla sera mostrado, salvo el escrito que este en el interior de las siguientes etiquetas , las cuales muestran el contenido situado en ese sitio igual que un critica de referencia para nosotros mismos. El navegador la ignorara.
De estas etiquetas del modelo,
-
crea la “lista desordenada”, en otras palabras, la relacion en la cual las componentes nunca estan numerados. La etiqueta
indica el comienzo sobre un “elemento lista”.
Editor mostrando el codigo HTML.
Si te gustaria conocer lo que significan los nombres que se encuentran entre , un buen sitio para empezar es Comenzando con HTML . Realizare determinados comentarios acerca de la configuracion de la pagina HTML que estamos usando de ej.
- “ul” representa la lista con un hipervinculo por cada elemento. Lo cual mostrara nuestro “menu de navegacion del sitio” con enlaces an otras paginas (ficticias) del sitio Web. Supuestamente, todas las paginas sobre el lugar Web poseen un menu similar.
- Las componentes “title” y no ha transpirado “p” componen el unico contenido sobre esta pagina, mientras que la casa al final (“address”) sera la misma para todas las paginas de el sitio.
Observa que nunca he cerrado los componentes “li” y “p”. En HTML (aunque nunca en XHTML), se pueden suprimir las etiquetas asi como
, que fue lo que hice aqui, precisamente de elaborar el escrito mas sencillo sobre leer. Sin embargo si se prefiere podran ser anadidas.
Vamos a suponer que va a ser una pagina sobre un sitio Web que tendran varias paginas similares. Como es usual en paginas Web, esta goza de un menu con enlaces a diferentes paginas en el lugar ficticio, un contenido unico y no ha transpirado una firma.
En la actualidad, selecciona “Guardar como…” de el menu Archivo, ve hasta un directorio/carpeta a donde desees proteger el documento (el escritorio puede ser una alternativa) y no ha transpirado guarda el archivo como “mipagina.html”. No cierres aun el editor, lo necesitaras otra ocasion.
Despues, abre el archivo en un navegador de la sub siguiente maneras: haya el archivo con tu gerente sobre archivos (Windows Explorer, Finder o Firefox) desplazandolo hacia el pelo haz clic, o copia clic, sobre el archivo “mipagina.html”. El archivo HTML deberia abrirse en tu navegador predeterminado. (En caso de que se abre el documento, abre el navegador y no ha transpirado arrastra el archivo acerca de el novio).
Como puedes ver, la pagina posee un matiz bastante aburrido.
Paso 2: Anadir algunos colores
Seguramente estes viendo texto negro sobre un extremo blando, aunque lo cual va a depender de como este tu navegador configurado. Con el fin de que la pagina tenga una cosa mas de encanto podemos anadir varios colores. (permite el navegador abierto, lo utilizaremos mas tarde).
Comenzaremos con la hoja sobre garbo interna en el archivo HTML. Mas el frente del manillar, pondremos el HTML y no ha transpirado el CSS en archivos variados. La separacion sobre dichos archivos seria conveniente porque favorece la manejo de la misma hoja sobre garbo Con El Fin De distintas archivos HTML: solo debes escribir la hoja de moda una ocasion. Pero en este camino, vamos a dejarlo al completo en el identico archivo.
Necesitamos anadir un elemento [etc.]
Las lineas que debes anadir estan marcadas en colorado. Durante la reciente linea 
dice que eso resulta una hoja de estilo y no ha transpirado que esta escrita en CSS (“text/css”). La segunda camino indica que hemos anadido Modalidad al elemento “body”. La tercera camino establece el color de el escrito igual que morado y no ha transpirado la siguiente linea lo que hace es darle al extremo una especie de gualdo verdoso.
Las hojas de moda en CSS se encuentran compuestas de reglas. Cada regla goza de 3 partes:
- el selector (en el ejemplo seria: “body”), el cual le dice al navegador la parte del documento que se vera afectada por la regla;
- la pertenencia (en el modelo, ‘color’ asi como ‘background-color’ son ambas prestaciones), las cuales especifican que apariencia de el esquema va a cambiarse;
- asi como el tasacion (‘purple’ y no ha transpirado ‘#d8da3d’), el que da el valor Con El Fin De la patrimonio.
El ej muestra que seria probable coordinar las reglas. Hemos establecido 2 caracteristicas, por lo que podriamos tener 2 reglas separadas:
El extremo de el aspecto body sera el extremo Con El Fin De al completo el documento. a los otros componentes (p, li, address…) nunca se les ha hexaedro ningun final en particular, por lo que de forma predeterminada no tendran ninguno (o seran transparentes). La hacienda ‘color’ establece el color del escrito que se localiza en el elemento body, sin embargo los otros componentes que podemos encontrar en el interior sobre body heredaran ese color, a no acontecer que se especifique lo opuesto. (Mas adelante anadiremos mas colores).