|
CSS en MBC |
|
|
|
|
CSS en MBC |
|
|
CSS en MBC
|
CSS en MBC |
|
|
|
|
CSS en MBC |
|
|
Estas son algunas de las cláusulas CSS más habitualmente utilizadas en la definición de campos y formularios.
Adicionalmente puede forzar a cargar una hoja CSS dentro del código del módulo utilizando una llamada desde la configuración.
Nota importante: recuerde poner al final de cada propiedad de estilo un punto y coma (;) que indica el final de la propiedad.
Recomendamos a los usuarios de nivel bajo/medio que se documenten con cualquier libro que describa de forma general las CSS o bien que consulte la web de W3C
Modelo de cajas en CSS
Margen=Margin Borde=border Relleno=padding Ancho=width Alto=height Contenido=espacio al que afectan los anteriores
CSS |
EJEMPLO |
DESCRIPCIÓN |
|---|---|---|
font-family |
font-family: Verdana, Arial, Helvetica, sans-serif, "Times New Roman", Times; |
tipografía que deseamos utilizar |
font-style |
font-style:italic; |
estilo asignado a la tipografía (italica por ejemplo = italic), puede usar normal, oblique, inherit, italic |
font-weight |
font-weight:bold; |
Densidad del texto (negrita por ejemplo = bold) |
font-size |
font-size:14px; |
Tamaño del texto en pixel o em |
font |
font:large italic bold Arial, Helvetica, sans-serif; |
Permite el uso simultáneo de los valores anteriores |
text-indent |
text-indent:inherit; |
Indentación del texto |
text-align |
text-align:justify; |
Alineado del texto |
text-transform |
text-transform:capitalize; |
Conversión del texto (mayúsculas, minúsculas, capitalizar, heredar, nada) lowercase, uppercase, capitalize, inherit, none |
word-spacing |
word-spacing:normal; |
Espaciado entre palabras |
letter-spacing |
letter-spacing:normal; |
Espaciado entre letras |
color |
color:#FF00FF; |
Color del texto, use el formato de RRGGBB precedido del signo # |
background-color |
background-color:#CC3366; |
Color del fondo, use el formato de RRGGBB precedido del signo # |
background-image |
background-image:url(ruta/archivo.ext); |
Imagen de fondo, es necesario indicar la ruta y nombre del archivo, así como la extensión de este |
background-repeat |
background-repeat:repeat-x; |
Repetir imagen, puede utilizarse horizontal (x) o vertical (y) |
background-position |
background-position:top right; |
Posición de la imagen, utilice top/bottom left/right para indicar que posición asume, puede utilizar dos al tiempo (top left o botom right) |
background |
background:top left #096 repeat-x url(ruta/archivo.ext); |
Permite el uso simultáneo de los valores anteriores |
padding-left |
padding-left:0px; |
Espaciado interno por la izquierda |
padding-right |
padding-right:20px; |
Espaciado interno por la derecha |
padding-top |
padding-top:10px; |
Espaciado interno superior |
padding-bottom |
padding-bottom:30px |
Espaciado interno inferior |
padding |
padding:10px 20px 30px 0px; |
Permite el uso simultáneo de los valores anteriores, los valores separados por espacio, indique los px y en orden top/right/bottom/left |
margin-left |
margin-left: 0px; |
Espaciado externo vacío por la izquierda |
margin-right |
margin-right:20px; |
Espaciado externo vacío por la derecha |
margin-top |
margin-top:10px; |
Espaciado externo vacío por arriba |
margin-bottom |
margin-bottom:30px; |
Espaciado externo vacío por abajo |
margin |
margin:10px 20px 30px 0px; |
Permite el uso simultáneo de los valores anteriores, los valores separados por espacio, indique los px y en orden top/right/bottom/left |
border-color |
border-color:#FA1864; |
Color del borde |
border-style |
border-style:solid; |
Estilo del borde |
border-width |
border-width:2px; |
Grosor del borde |
border-left |
border-left:1px; |
Borde izquierdo |
border-right |
border-right:3px; |
Borde derecho |
border-top |
border-top:2px; |
Borde superior |
border-bottom |
border-bottom:4px; |
Borde inferior |
border |
border:2px solid #CCC; |
Permite el uso simultáneo de los valores anteriores |
#RRGGBB |
#18F2A7 |
Notación RGB de 6 valores hexadecimales (habitualmente la notación utilizada) |
#RGB |
#F26 |
Notación simplificada de RRGGBB siempre que los números de cada sean iguales CCFFAA=CFA |
rgb(R,G,B) |
rgb(16,26,158) |
Notación de tres colores de valores 0 a 255 |
rgb (R%,G%,B%) |
rgb(30%,18%,80%) |
Notación de tres colores de valores porcentuales |
cursor |
cursor:move; |
Especifica el curso sobre el elemento [ [http://.../cursor.ico,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] |
Los colores en formato RGB pueden ser escritos como #FF00FF es decir en pares de valores hexadecimales o bien si son repetidos con una sola letra #F0F como sería el caso para este ejemplo.
En los valores de top/right/bottom/left podemos utilizar también normas como todos iguales con un solo valor así en lugar de 2px 2px 2px 2px podemos poner 2px, de la misma forma podemos hacer pares top/bottom right/left y poner 2px 3px que equivale a 2px 3px 2px 3px.