Html 5 y CSS 3 en tus post!

por **Kuroki** Dom Ago 09, 2015 2:56 pm

Código:: Saludos~ Si el texto se ve demasiado grande, es porque uso los estilos por defecto de la web Como aún estoy pendiente de revisión y me estoy aburriendo a saco en clase, estrenaré esta sección con un pequeño “tutorial” (¿Debería llamarlo así?) de como usar html y css en vuestros post. Obviamente usar el propio editor que te da el foro es lo más rápido y directo a la hora de postear, pero si en algún momento te da por personalizar más tus post o si quieres que google muestre primero tus post frente a otros cuando buscas este foro (ya que google entiende de lenguaje html, pero no texto humano… si al final google tampoco lo sabe todo(?)), pues puede que te interese usar estas reglas e intentare explicarlo de la forma más sencilla. Pero antes que nada, ¿qué es html y css? Bueno, wikipedia es la respuesta de todo, así que si quieres una respuesta desarrollada, bastaría con buscarlo ahí. Si por otro lado prefieres una versión reducida y que entiendas aún desconociendo el mundillo que resulta ser el diseño web: html: código en etiquetas que dan significado a todo el contenido de la página. A los humanos que podemos interpretar todo según el contexto nos da igual, pero la máquina como no sabe tenemos que ir diciendole que es cada cosa. css: es la hoja de estilo en cascada. Por así decirlo, es quien se ocupa de vestir todo el código html, vamos que lo decora. Lamentablemente, si lo que quieres es decorar solamente, no puedes saltarte el html, porque css depende directamente de los contenidos ofrecidos por este para pintar cosillas. Yo por lo general solo uso estas reglas cuando me aburro, pero los post los hago con el editor ignorando el html y css :yao: Etiquetas Html Introducción Las etiquetas se caracteriza principalmente nada más y nada menos porque estan rodeados por “<” y “>” Código:SELECCIONAR TODO EL CONTENIDO <apertura>Contenido que le vayas a meter si lo tuviera</cierre> Cabe mencionar que los cierres tienen un "/" para diferenciarla de una apertura. No tienes que aprenderlo de memoria BÁSICOS Etiquetas de párrafos Etiquetas para textos, no tiene ningún secreto. La diferencia con escribirla con el editor es que el editor no te las genera, con lo que todo texto sin estas etiquetas es como texto “fantasma” Código:SELECCIONAR TODO EL CONTENIDO <p>El texto a añadir</p> Etiquetas de enlaces (a) Etiquetas para crear hiper-enlaces. Podrías usar el del editor que te los genera igualmente Código:SELECCIONAR TODO EL CONTENIDO <a href=”Url de la página destino”>El texto a añadir al enlace</a> Etiquetas de imagenes (img) La diferencia con las del editor es que aquí puedes añadirle un texto descriptivo por si no se carga la imagen Código:SELECCIONAR TODO EL CONTENIDO <img src="URL de la imagen" alt="Descripción de la imagen"></img> Etiquetas de listas Para crear listas, no mucho más que explicar. Salvo que existen dos tipos. Lista desordenada (con puntitos) Código:SELECCIONAR TODO EL CONTENIDO <ul> <li>Primero</li> <li>Segundo</li> <li>Los que quieras</li> </ul> Lista ordenada (con números) Código:SELECCIONAR TODO EL CONTENIDO <ol> <li>Primero</li> <li>Segundo</li> <li>Los que quieras</li> </ol> Existen muchos más, pero no sé si querrias usar el resto INTERESANTES Etiquetas sin significado semantico (div y span) Estas etiquetas no aportan ningun tipo de significado al html, asi que tienen su utilidad para crear decoración sin necesidad de depender del contenido Código:SELECCIONAR TODO EL CONTENIDO <div>Contenido</div> <span>Contenido</span> La diferencia entre ambos es que div se pinta en bloque (como una caja y depende del contenido o dimensiones que le des) mientras que span se pinta en linea (no tiene dimensiones y se expande según quien lo contenga) Ejemplo: Etiquetas CSS Introducción CSS es la hoja de estilos en cascadas. Se ocupa de decorar todo el html para dejarlo más bonito e incluso hacer la navegación más práctica Como no podemos recurrir al CSS del propio foro, la única forma de implementar nuestro CSS a nuestros post es básicamente añadiendo directamente a nuestras etiquetas html los estilos que queramos (aunque esto no es recomendado, es nuestra única forma) Código:SELECCIONAR TODO EL CONTENIDO <p style=”Los estilos que le vayamos a añadir”>Un texto cualquiera</p> BÁSICOS Colores Podemos cambiar el color de los textos. Deberás saber un poco de códificación en rgb. Pero… ¿Cual es la diferencia con el que nos aporta el editor? Pues quizás usar el rgba (con canal alpha) para añadir transparencias Código:SELECCIONAR TODO EL CONTENIDO <p style='color:#ff0000'>Es un texto en color rojo</p> <p style='color:rgb(255,0,0)'>Este es tambien un texto en color rojo</p> <p style='color:rgba(255,0,0,0.5)'>este es un texto en color rojo al 50% de transparencia</p> Ejemplo: Anchos y altos (width y height) Permite cambiar las dimensiones de todo aquello que se exprese en cajas. ¿Recueras el "div" del hmtl? Pues puedes cambiarle las dimensiones con estas propiedades. Las etiquetas de enlace (a), tambien puedes darle tamaños (aunque es preferible usar otros métodos para este). Estos pueden ir en px,%, em o rem (no explicare las diferencias, basicamente probad o tirad por px y ya(?)) Código:SELECCIONAR TODO EL CONTENIDO <div style="height: 150px; width:300px;></div> <div style="width:20px; height:5px"></div> Background Esta regla css es muy cañera, porque puedes darle muchos valores según guste url(dirección de una imagen) = Añadirle una imagen de fondo rgb()/rgba() = aplica lo mismo que color para texto pero para backgrounds (si vais a usar imagenes, obviamente no useis esto) no-repeat = por si no quieres que la imagen se repita si el ancho del contenedor es mayor que la imagen left = si quieres que la imagen comience a mostrarse a la izquierda (o right si es por la derecha, pero no a la vez) top = lo mismo, pero para comenzar desde arriba (o bottom por abajo, no es combinable con top -> Pero sí es combinable con left o right) Center = Centrado (pero no combinable con las cuatro anteriores) Código:SELECCIONAR TODO EL CONTENIDO <div style="height: 150px; width:300px; background: rgb(255,0,0)"></div> Ejemplo: No tienes porque seguir este orden, es lo bueno del background, que puedes poner primero la imagen si quieres... o si se repite, etc INTERESANTES Background-size Esta regla css esta separada del background porque es un tanto especial y sirve para redimensionar los tamaños de imagen según el contenedor cover= cubre toda el area posible, pudiendo eliminar partes de la imagen contain= la imagen se intenta mostrar lo máximo posible Código:SELECCIONAR TODO EL CONTENIDO <div style="height: 150px; width:200px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repeat; background-size:contain;"><p>Contain</p></div> <div style="height: 150px; width:200px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repeat; background-size:cover;"><p>Cover</p></div> Ejemplo: Border Le proporciona a todo elemento un bordeado. Pueden ser varios tipos, pero los mas populares suelen ser solid(linea), dotted(puntos),dashed(lineas discontinuas), double(dobles lineas) y algunos más que encontrareis en google. Código:SELECCIONAR TODO EL CONTENIDO <div style="border: anchura(px) estilo(solid) color;"></div> <div style="height: 150px; width:200px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repeat; background-size:cover; border: 5px dotted #ff0000;"><p>Puntos rojos</p></div> <div style="height: 150px; width:200px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repeat; background-size:contain; border: 1px solid #0000ff;"><p>Linea recta azul</p></div> <p style="border: 2px dashed #00ff00">Un texto con bordeados discontinuos</p> Ejemplos: Border-radius Esta propiedad CSS es posiblemente una de las favoritas en el mundillo de estilos. Proporciona un redondeado a las esquinas, que pueden ser o no combinadas con la regla anterior para bordes (de no usarlas, simplemente redondea los bordes) Código:SELECCIONAR TODO EL CONTENIDO <div style="border-radius: grado de radio(px)"></div> <div style="height: 150px; width:200px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repeat; background-size:cover; border: 5px solid #f00; border-radius: 15px"><p>Bordeado en 15px y con linea recta</p></div> <div style="height:150px; width:150px; background: url(http://oi62.tinypic.com/2qsmmpi.jpg) no-repea top center; background-size:cover; border-radius: 50%;"><p>Bordeado al 50% y con dimenciones en ancho y alto iguales para recrear circulos (sin borde)</p></div> <p style="width: 100%; height:auto; border: 5px dotted #f00; border-radius: 15px;">Radio de 15px y con borde de puntos</p> ejemplos: Text-Shadow / Box-Shadow Tal y como describe su nombre, se trata de una propiedad que proporciona sombreado al texto/cajas. No tiene demasiado misterio cuando se entiende Código:SELECCIONAR TODO EL CONTENIDO <p style="text-shadow: ejeX(px) ejeY(px) radio de difuminado(px) color"></p> <div style="box-shadow: ejeX(px) ejeY(px) radio de difuminado(px) color"></p> <p style="text-shadow: 0px 0px 5px #ff0000, 5px 0px 5px #00ff00, 0px 5px 5px #0000ff">Puedes repetir esa propiedad separado por comas para que se vayan superponiendo</p> <div style="border: solid 1px #000000; text-shadow: 0px 0px 5px #ff0000, 5px 0px 5px #00ff00, 0px 5px 5px #0000ff"><p>Lo mismo, pero con un divisor con bordes, sin embargo solo se aplica al texto</p></div> <div style="box-shadow: 0px 0px 10px #000000;"><p>En este caso se aplica el box-shadow a la caja solamente</div>

» Leer Más ALYSSWonderful Girl	» Leer Más KANONWonderful Boy
» Leer Más SIR MÖRDERISHWonderful User	»SSSSs BLEHWonderful Scene