Tutorial de CSS Comenzando con HTML + CSS

Tutorial de CSS Comenzando con HTML + CSS

Este breve tutorial esta disenado para esas personas que quieren comenzar an utilizar CSS y Jamas han texto la hoja de estilos CSS.

No explica demasiado sobre CSS. Se centra en como generar un archivo HTML, un archivo CSS asi como como realizar que las dos funcionen juntos. Una ocasion finalizado este tutorial, podreis leer alguno de los otros tutoriales de darle mas Modalidad a las archivos HTML y CSS. Asimismo podreis usar un editor sobre HTML o CSS, Con El Fin De acrecentar sitios Web mas avanzados.

Al final del tutorial habras hecho un archivo HTML como este:

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

Ten en cuenta que no quiero declarar que sea bonita O

Las secciones como esta son opcionales. Contienen explicaciones extras del codigo HTML y CSS del ej. El signo sobre peligro, situado al fundamentos, indica que se intenta de un material mas avanzado que el resto.

Transito 1: redactar el codigo HTML

dhaka girls dating

De este tutorial, te sugiero que utilices las herramientas mas sencillas. Como podria ser, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran suficiente. Una vez comprendido lo elemental, posiblemente se deseen usar herramientas mas complicadas, o tambien programas comerciales igual que Style Master, Dreamweaver o GoLive. Sin embargo de el incremento de una primera hoja de estilos, seria conveniente no distraerse con caracteristicas avanzadas sobre otras herramientas.

Nunca emplees procesadores de escrito como Microsoft Word u OpenOffice. Con ellos, habitualmente se generan archivos que las navegadores nunca podrian interpretar. Con el fin de HTML y no ha transpirado CSS, lo unico que necesitamos son archivos en escrito plano.

El camino 1 estriba en abrir tu editor sobre escrito (Notepad, TextEdit, HTML Kit o el que desees), iniciar con una ventana vacia asi como escribir lo sub siguiente:

Realmente, no es indispensable escribir el codigo: puedes copiarlo asi como pegarlo directamente en un editor.

La primera camino que aparece en el archivo HTML, le dice al navegador el prototipo de HTML (DOCTYPE implica DOCument TYPE – en castellano: MODELO sobre DOCumento). En este caso, se prostitucion de la version 4.01 de HTML.

Las terminos que se encuentran entre se llaman etiquetas (tags) desplazandolo hacia el pelo, como puedes ver, el documento esta https://datingmentor.org/es/swinging-heaven-review/ entre las etiquetas desplazandolo hacia el pelo . Dentro de desplazandolo hacia el pelo Tenemos espacio de variados clases de referencia que nunca apareceran en la pantalla. Incluso Hoy, el documento solo contiene el titulo pero posteriormente tambien se anadira la hoja sobre estilos de CSS.

El seria donde se situa el escrito de el documento. En un principio, todo cosa que se coloque ahi sera mostrado, excepto el texto que este adentro de las proximos etiquetas , las cuales muestran el contenido situado en ese lugar como un parecer de referencia para nosotros mismos. El navegador la ignorara.

De estas etiquetas del exponente,

    produce una lista desordenada, es decir, la lista en la que las elementos nunca estan numerados. La epiteto
    indica el comienzo sobre un elemento lista.

Editor mostrando el codigo HTML.

Si quieres saber lo que significan las nombres que estan entre , un buen lugar para emprender seria Comenzando con HTML . Realizare determinados comentarios referente a la configuracion de la pagina HTML que estamos utilizando sobre exponente.

  • ul representa una relacion 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, la totalidad de las paginas sobre nuestro sitio Web tienen un menu similar.
  • Los puntos title desplazandolo hacia el pelo p componen el unico contenido de esta pagina, mientras que la firma al final (address) sera la misma para todas las paginas de el lugar.

Observa que no he cerrado los componentes “li” y no ha transpirado “p”. En HTML (pero nunca en XHTML), se podrian suprimir las etiquetas desplazandolo hacia el pelo

, que fue lo que hice aqui, precisamente Con El Fin De realizar el escrito mas facil sobre leer. Pero En Caso De Que se prefiere podrian ser anadidas.

Vamos an implicar que va a ser una pagina sobre un sitio Web que tendran varias paginas similares. Como es habitual en paginas Web, esta goza de un menu con enlaces a diferentes paginas en el sitio ficticio, un contenido unico y una firma.

Ahora, selecciona Guardar como del menu Archivo, ve inclusive un directorio/carpeta donde desees guardar el documento (el escritorio puede ser una opcion) desplazandolo hacia el pelo tiene el archivo igual que mipagina.html. Nunca cierres todavia el editor, lo necesitaras una diferente oportunidad.

Luego, abre el archivo en un navegador de la sub siguiente manera: halla el archivo con tu gerente sobre 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 asi como arrastra el archivo sobre el).

Como puedes ver, la pagina dispone de un matiz harto aburrido.

Camino 2: Anadir varios colores

Seguramente estes viendo escrito oscuro acerca de un final blando, aunque esto dependera de como este tu navegador configurado. Para que la pagina tenga una cosa mas sobre encanto podemos anadir varios colores. (Deja el navegador abierto, lo utilizaremos mas tarde).

Comenzaremos con la hoja de moda interna en el archivo HTML. Mas delante, pondremos el HTML y el CSS en archivos variados. La separacion de todos estos archivos seria apropiado puesto que favorece la utilizacion de la misma hoja sobre moda para diferentes archivos HTML: solo debes escribir la hoja sobre garbo la oportunidad. Pero en este transito, vamos a dejarlo al completo en el igual archivo.

Necesitamos anadir un factor [etc.]

Las lineas que debes anadir se encuentran marcadas en colorado. La primera camino dice que eso resulta una hoja sobre moda desplazandolo hacia el pelo que esta escrita en CSS (“text/css”). La segunda camino indica que hemos anadido moda al aspecto “body”. La tercera camino establece el color del texto igual que morado y la sub siguiente linea lo que realiza seria darle al fondo la especie sobre amarillento verdoso.

Las hojas de moda en CSS estan compuestas sobre reglas. Cada regla dispone de 3 zonas:

  1. el selector (en el ejemplo es: body), el cual le dice al navegador la parte del documento que se vera afectada por la regla;
  2. la dominio (en el ej, ‘color’ asi como ‘background-color’ son ambas prestaciones), las cuales especifican que matiz del esquema va a cambiarse;
  3. y el tasacion (‘purple’ asi como ‘#d8da3d’), el que da el precio para la patrimonio.

El exponente muestra que es viable armonizar las reglas. Hemos establecido 2 propiedades, debido a que podemos tener dos reglas separadas:

El final del factor body sera el extremo de todo el documento. a los otros puntos (p, li, address) nunca se les ha cubo el menor fondo en concreto, debido a que de forma predeterminada nunca tendran ningun (o seran transparentes). La propiedad ‘color’ establece el color de el texto que se encuentra en el factor body, sin embargo las otros componentes que se encuentran adentro sobre body heredaran ese color, a no ser que se especifique lo opuesto. (Mas adelante anadiremos mas colores).

Leave a comment

Your email address will not be published. Required fields are marked *