Buenos dias PWG, ahora tenemos que saber los conceptos (width,height,margin y padding) , eso si , primero habremos tenido que ver el Tutorial 1 CSS:Primeros conceptos
El curso intentará ser progresivo , así que mejor comenzar desde el primero y no saltarse ningún capítulo, ya que tampoco es excesivamente complicado.
Lo primero es saber las definiciones de cada uno de los atributos con los que vamos a trabajar.
-width:Indicará lo largo del elemento <id> o <class>
-height:Indicará la altura del elemento <id> o <class>
-margin:Es la separación entre un elemento y otro
-border:Permite crear varios tipos de bordes en elementos de la página
-padding: Es el relleno, la separación entre un elemento y aquel que lo contiene
Ahora veamos un ejemplo práctico
Código: <div id="diseño">
Diseño básico
</div>
<div id="margin">
Margin
</div>
A continuación el código CSS
Código: #diseño{
width:200px;
background-color:blue;
}
#margin {
padding:10px;
width:200px;
margin:10px;
background-color:red;
}
Ahora vayamos a probar la propiedad border.
Código: <div id="border">
Border
</div>
Código css
Código: #border{
border: 4px double #000000;
width:100px;
}
Ahora después de haber leído esto es el momento de decir que tanto en la propiedad margin,padding y border podemos utilizar los atributos top,bottom,left y right de la manera siguiente
Código: border-right:5px;
Y así con cualquier elemento , también podemos poner todo esto en una línia , por ejemplo así:
Código: margin: 10px 5px 20px 0
Esto se leería de la siguiente manera 10 píxeles arriba, 5 a la derecha, 20 abajo y 0 a la izquierda.
------
- ¿El tutorial esta caducado o ya no funciona? Por favor de aviso a algun moderador haciendo click aqui
Ultima edición por cursopwg el Mie Feb 13, 2013 9:45 am; editado 1 vez
|
