Últimos temas
» [SKIN] Hello? how are you
por Unity Vie Ene 06, 2017 11:55 pm

» Pack 1 de html (personaje + firma)
por Rose Jue Ene 05, 2017 5:19 pm

» [FIRMA] Mikagura Suite
por Natty Mar Dic 27, 2016 9:57 am

» [SKIN] Attack No Titan
por Flowman Jue Dic 15, 2016 8:51 pm

» Owari no seraph's
por Cool Skelleton_95 Mar Nov 15, 2016 2:04 pm

» Simple flutter
por Amaranth Miér Oct 26, 2016 8:54 am

» Duda sobre sorteo de skin
por SS Jue Sep 15, 2016 8:22 pm

» [MOVIL] [ FA ] Haikyuu
por Sarisha Mar Ago 30, 2016 6:07 am

» Pedido grafico
por DangerStRichard Dom Ago 28, 2016 7:09 pm


{TUTORIAL HTML} Simplificar HTML

Ver el tema anterior Ver el tema siguiente Ir abajo

{TUTORIAL HTML} Simplificar HTML

Mensaje por Mikae el Jue Jul 09, 2015 10:43 am

Traducción del HTML a CSS
Nombre del tutorial: Traducción del HTML a CSS
Dificultad: Básica
Tiempo de lectura: 10 minutos.
Creador del tutorial: Mikae
Si está dedicado a alguien en particular: Todo aquel que lo lea .  

Bases y Recordatorios

Empezamos
Primero que nada, debemos saber que para traducir existen dos clases, como muchos conoceran siempre es de uso el div style, pero aparte de ese existen el div id y el div class, procedere a dar una pequeña itroduccion y diferencia de cada cosa.

Div id: permite establecer un identificador único para el bloque. Así podremos referirnos al bloque de forma inequívoca. Su sintexis en css es
Código:
#nombre {propiedades del id;}
y en html
Código:
<div id="nombre"></div>

Div class es similar a id, pero con la ventaja de que se puede repetir; así que podemos tener varios div diferentes con la misma clase. Su sintexis en css es
Código:
.nombre {propiedades del id;}
y en html
Código:
<div class="nombre"></div>


Manos a la obra

Primero armamos nuestro cuerpo html de la tablilla utilizado el style, cuando tienen listo su tablilla.
Código:
<div style="background-color: #D4C69B;color: #768765;font-size: 50px;text-align: center;font-family: La Belle Aurore;padding: 10px;letter-spacing: 2px;border-right: 20px solid #768765;height: 50px;">Holi</div>

Luego, copiamos todas las propiedades que elaboramos, que vendría a ser estas (en mi caso):
Código:
background-color: #D4C69B;color: #768765;font-size: 50px;text-align: center;font-family: La Belle Aurore;padding: 10px;letter-spacing: 2px;border-right: 20px solid #768765;height: 50px;
Vamos al css de nuestro foro o del code pen. Escribimos la sintaxis de css, dependiendo si escoges id o class.  El .nombre lo puedes cambiar solo el nombre por otro que desees, recuerda no eliminar el punto.
Código:
.TituloEni {propiedades;}
Donde dice propiedades pegas en donde dice propiedades:
Código:
.TituloEni { background-color: #D4C69B;color: #768765;font-size: 50px;text-align: center;font-family: La Belle Aurore;padding: 10px;letter-spacing: 2px;border-right: 20px solid #768765;height: 50px; }

Van de nuevo a su código html, le borran las propiedades.
Código:
<div style="">Holi</div>
Ahora cambian el style por la id o class segun lo elegido. Y dentro de las comillas el nombre otorgado.
Código:
<div class="TituloEni">Holi</div>

Si lo quieren poner en un post que no es su foro. El css lo colocan dentro de:
  y el html al lado.

Así:
Código:
<style type="text/css">.TituloEni { background-color: #D4C69B;color: #768765;font-size: 50px;text-align: center;font-family: La Belle Aurore;padding: 10px;letter-spacing: 2px;border-right: 20px solid #768765;height: 50px; }</style><div class="TituloEni">Holi</div>

mikae © 2016


Última edición por Mikae el Dom Jul 31, 2016 7:46 pm, editado 2 veces
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Re: {TUTORIAL HTML} Simplificar HTML

Mensaje por ❥wazowski el Miér Ago 26, 2015 10:48 pm

Te amé. Muchas gracias, no tienes idea de lo mucho que me ayudó tu tutorial<3.
avatar
❥wazowski

Mensajes : 6

Ver perfil de usuario

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.