css |

22 mayo, 2019

Añadir barra horizontal hr con html y css

Para añadir una barra horizontal de separación haremos lo siguiente: En el head pondremos: Y el codigo html de la barra o barras serán: Fuente: http://www.mclibre.org/consultar/htmlcss/css/css-hr.html

15 abril, 2015

Content Delivery Network (CDN): Qué es, para qué sirve

Pero, ¿qué es un CDN? Es el nombre que recibe un grupo de servidores repartidos por todo el mundo en puntos estratégicos y pensados para la distribución de ficheros. Hay varios CDN’s gratuitos, entre ellos el de Google, el de Microsoft y el de Edgecast. Tambien hay CDN’s de pago. Algunos puede que te suenen como Akamai o Amazon…

12 enero, 2015

Resetear stilos css

Pese a ser algo básico y imprescindible todavía me encuentro gente que no lo conoce (ni por lo tanto utiliza) esta gran cosa. ¿Qué es resetear los estilos css? Los estilos css que se aplican a una pagina le vienen de 3 sitios: Nuestra hoja de estilos del sitio (La que creamos nosotros) Estilos que…

28 septiembre, 2014

Centrar Div Horizontalmente con CSS

&lt;style type="text/css"&gt;
 .centrada {margin: 0 auto; width: 800px;}
&lt;/style&gt;

&lt;div class="centrada"&gt;
 &lt;p&gt;Este contenido está en una DIV centrada&lt;/p&gt;
&lt;/div&gt;

1

2

3

4

5

6

7

.centrada {margin: 0 auto; width: 800px;}

</style>

<p>Este contenido está en una DIV centrada</p>

</div>

25 junio, 2014

Hacer que los videos youtube embebidos sean responsive

.contenedor-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.contenedor-video iframe,
.contenedor-video object,
.contenedor-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.contenedor-video {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px; height: 0; overflow: hidden;

}

.contenedor-video iframe,

.contenedor-video object,

.contenedor-video embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

Lo siguiente que haremos será copiar el código para embeber el vídeo, igual que hemos hecho otras veces, aunque para indicarle que el div será responsive, hemos de editar nuestro blog en formato texto (no visual) para añadir el HTML necesario, en este caso un div…

25 junio, 2014

Formas de Cargar Estilos

Hay diferentes formas de cargar estilos en nuestra web: Cargar los estilos en el head de la misma página

<HEAD>
 <STYLE type="text/css">
   H1.miclase {border-width: 1px; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="miclase"> Este H1 está afectado por nuestro estilo </H1>
 <H1> Este no está afectado por nuestro estilo </H1>
</BODY>

1

2

3

4

5

6

7

8

9

<HEAD>

H1.miclase {border-width: 1px; border: solid; text-align: center}

</STYLE>

</HEAD>

<BODY>

<H1 class="miclase"> Este H1 está afectado por nuestro estilo </H1>

<H1> Este no está afectado por nuestro estilo </H1>

</BODY>

Cargar los estilos en el head desde un archivo .css externo

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

1	<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Cargar los estilos en línea

<h3 style="color: rgb(217, 83, 79);">Texto al que se aplicará el estilo</h3>

1	<h3 style="color: rgb(217, 83, 79);">Texto al que se aplicará el estilo</h3>

15 mayo, 2014

Imágenes Responsive Desing con CSS

Para hacer que una imagen se adapte a distintos anchos o alto de pantalla (o de contendedor en el que se encuentra) debemos de usar varias de las propiedades CSS y podemos hacerlo de dos formas, la siguiente es en la que establecemos el ancho de la imagen: Debemos de usar primero width o height…

5 mayo, 2014

Evitar Cacheo de Imagenes

Planteamiento del problema Cuando se actualiza una aplicación web, de cara al usuario final pueden existir cambios tanto en el html de la página como en los ficheros que la complementan, típicamente css, js e imágenes. Puesto que los navegadores suelen cachear este tipo de ficheros, puede ocurrir lo siguiente: El usuario Pepito navega tranquilamente…