Serkronyx
3/7/2016 - 7:39 PM

Propiedades

Propiedades

Elementos Flotantes.md
content_copyfile_download
  • Rendered
  • Source

float

con esta propiedad los elementos se pueden hacer flotar a la derecha o a la izquierda segun lo necesites

HTML
<head>
        <title>Estilo Flotante</title>
        <meta charset="iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="float.css">
</head>

<body>
<h1>Imagen Flotante</h1>
<div id="imagen">
        <img src="fanny.jpg" alt="no me salio">     
</div>
____________________________________________
CSS
#imagen{
    float: left; //indica la posicion de la imagen
    width:1000px; //indica la posicion del texto
}

En el ejemplo anterior se muestra como se utiliza la propiedada float y vemos como le pusimos a la imagen un id para poder hacer las modificaciones que queremos desde una hoja de estilos y lo que hace es que manda la imagen a la izquierda y recorrer el texto a la derecha.

Pero tambien se puede utilizar en columnas con la siguiente sintaxis

#columna1{
  float:left;
  width: 33%;
}
#columna2{
  float:left;
  width: 33%;
}
#columna3{
  float:left;
  width: 33%;
}

clear

Esta propiedad se utiliza para controlar cómo se comportarán los elementos que siguen a los elementos que siguen a los elemtos flotantes de un documento.

En pocas palabras checa el comportamiento de los elementos flotantes y normalmente si ahi espacios en blanco recorre el texto para cubrir el mismo, pero si no queremos hacer esto podemos utilizar diferentes propiedes algunas de las mas usadas left,right,both o none

HTML

<p class="sinflotar">En la primavera los pajaros cantan y es una 
de estaciones mas bonitas del año...</p>
__________________________________________________
CSS

.sinflotar{
  clear:both;
}
Etiquetas_Comunes.md
content_copyfile_download
  • Rendered
  • Source

Las etiquetas mas comunes son estas:

#max-width Indica el tamaño maximo del ancho #min-width Indica el tamaño minimo del ancho #max-heigth Indica el tamaño maximo del alto #min-heingth Indica el tamaño minimo del alto

max-width: auto;
min-width:100px;
max-height:auto;
min-height:100px;

auto se ocupa para que podamos ampliar o reducir el tamaño del div con forme a lo que contenga