Archivo de la categoría: HTML / CSS

Apartado de la web para el mundo de la programación HTML o/y CSS

Plantilla ejemplo css responsive

Poner en el head:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

Ejemplos:

@media only screen and (min-width: 760px) and (max-width: 1020px) {
}
@media only screen and (min-width: 470px) and (max-width: 760px) {
}
@media only screen and (max-width: 470px) {
}

@media screen and (max-width:760px) {
}
@media screen and (max-width:1020px) {
}
@media screen and (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 300dpi) {
}

Plantilla HTML5 Básica

Plantilla HTML5 básica para comenzar a estructurar la web.

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Título de la web</title>
  <meta name="description" content="Descripción de la página web">
  <meta name="keywords" content="las, palabras, clave">
  <meta name="author" content="Mi nombre">
  <meta charset="utf-8" />
  <link rel="stylesheet" href="main.css" />
  <link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
    <header>
       <h1>Título de la web</h1>
       <p>Contenido del header</p>
    </header>
  
  	<nav>Menú de la web</nav>
  
    <section>
       <article>
           <h2>Título del contenido</h2>
           <p> Contenido</p>
       </article>
    </section>
  
    <aside>
       <h3>Título del contenido</h3>
           <p>Contenido</p>
    </aside>
  
    <footer>
        2015 © creado por ...
    </footer>
</body>
</html>

Importar fuentes css desde un archivo .otf (opentype)

Si lo que necesitamos es importar una nueva fuente para tu web, lo que debemos hacer es mediante la opción @font-face de css, importar la nueva fuente a utilizar. En el campo font-family indicaremos el nombre de la fuente y en el campo src la ubicación en nuestro servidor del archivo. Una vez realizado esto será tan sencillo como asignarle esta fuente donde queramos como haciamos con las otras.

@font-face{
	font-family: SassoonInfantStd;
	src: url(../fonts/SassoonInfantStd.otf) format("truetype");
}
h1, h2, h3, h4, h5, h6, #small-nav a {
	font-family: SassoonInfantStd !important;
}