11.07.2015 Views

el tutorial de Dreamweaver

el tutorial de Dreamweaver

el tutorial de Dreamweaver

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Unidad 17. Estilos CSS Avanzado (XII)17.12Controles <strong>de</strong> <strong>el</strong>ementos <strong>de</strong>bloque y en líneaAhora veremos cómo posicionar los <strong>el</strong>ementos y darles <strong>el</strong> tamaño que nos convenga pararepresentarlos.Antes <strong>de</strong> empezar <strong>de</strong>beríamos hacer una distinción entre las etiquetas HTML.Las hay <strong>de</strong> 2 tipos: <strong>de</strong> bloque o en línea.Las etiquetas <strong>de</strong> bloque son aqu<strong>el</strong>las que causan un salto <strong>de</strong> línea antes y <strong>de</strong>spués <strong>de</strong> <strong>el</strong>los,como por ejemplo las etiquetas p, div, table, br, etc...Sin embargo luego encontramos otro tipo <strong>de</strong> etiquetas (en línea) que no producen saltos en <strong>el</strong> flujo<strong>de</strong> la página, como pue<strong>de</strong>n ser las etiquetas a, b, i, span, etc...Teniendo esto siempre en mente verás que es más sencillo trabajar y mol<strong>de</strong>ar las páginasutilizando CSS.Primero veremos las propieda<strong>de</strong>s <strong>de</strong> tamaño height (altura) y width (anchura).Pue<strong>de</strong>s especificarlas en cualquier <strong>el</strong>emento <strong>de</strong> bloque y establecerán su alto y su ancho enpíx<strong>el</strong>es o porcentaje.300x50#contenedor {width: 300px;height: 50px;}©Luego encontramos la propiedad float, que permite que cualquier <strong>el</strong>emento flote en un lado<strong>de</strong>terminado <strong>de</strong> la pantalla mientras <strong>el</strong> resto sigue <strong>el</strong> flujo natural.Observa estos ejemplos:Este texto tiene un <strong>el</strong>emento flotante a la izquierda.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!