Ayuda:Manual:Style
De GuildWiki2.es
|
El parámetro Style se puede colocar dentro de las etiquetas <div>...</div> o <span>...</span>. También puede encontrarse dentro de las tablas.
Uso y sintaxis
Su sintaxis será style= seguido de comillas (") cada aspecto a modificar irá seguidos de dos puntos (:) y separado del resto por un punto y coma (;), para finalizar es ;"
Borde
| Código | Ejemplo | Resultado |
|---|---|---|
border: tamañopx color formato |
<div style="border:1px blue solid;">Ejemplo</div> |
Ejemplo
|
- tamañopx → indicará en píxeles lo ancho del borde
- color → Puede ir en formato RGB (i.e.:#000000 para el negro) o con el nombre dado si procede
- formato → formato del borde
| Código | Ejemplo | Resultado | Expliación |
|---|---|---|---|
solid |
<div style="border:1px blue solid;">Ejemplo</div> |
Ejemplo |
Linea completa |
dotted |
<div style="border:1px blue dotted;">Ejemplo</div> |
Ejemplo |
Puntitos |
dashed |
<div style="border:1px blue dashed;">Ejemplo</div> |
Ejemplo |
Rayitas |
groove |
<div style="border:1px blue groove;">Ejemplo</div> |
Ejemplo |
dos lineas de borde degradadas (los bordes tienen que ser mayores de 1px) |
double |
<div style="border:1px blue double;">Ejemplo</div> |
Ejemplo |
dos lineas de borde |
ridge |
<div style="border:1px blue ridge;">Ejemplo</div> |
Ejemplo |
Al contrario de "groove" |
inset |
<div style="border:1px blue inset;">Ejemplo</div> |
Ejemplo |
|
outset |
<div style="border:1px blue outset;">Ejemplo</div> |
Ejemplo |
Tamaño
| Código | Ejemplo | Resultado |
|---|---|---|
width: tamañopx |
<div style="width:100px;">Ejemplo</div> |
Ejemplo
|
width: porcentaje |
<div style="width:50%;">Ejemplo</div> |
Ejemplo
|
height: tamañopx |
<div style="height:80px;">Ejemplo</div> |
Ejemplo
|
El borde sale por el codigo de "border:1px solid blue".
Alineación
Del texto
| Código | Ejemplo | Resultado | Explicación |
|---|---|---|---|
text-align:posición |
<div style="text-align:right;">Ejemplo</div> |
Ejemplo |
Alinea el texto a la derecha dentro del div |
<div style="text-align:center;">Ejemplo</div> |
Ejemplo |
Alinea el texto a la izquierda dentro del div | |
<div style="text-align:left;">Ejemplo</div> |
Ejemplo |
Centra el texto dentro del div |
Del div
| Código | Ejemplo | Resultado | Explicación |
|---|---|---|---|
float:posición |
<div style="float:right;">Ejemplo</div> |
Ejemplo |
Alinea el div a la derecha |
<div style="float:left;">Ejemplo</div> |
Ejemplo |
Alinea el div a la izquierda | |
<div style="margin:%;">Ejemplo</div> |
<div style="margin:10%;">Ejemplo</div> |
Ejemplo |
Deja un margen porcentual entre el div y el final de la pantalla |
<div style="margin:px;">Ejemplo</div> |
<div style="margin:5px%;">Ejemplo</div> |
Ejemplo |
Deja un margen en tamaño de píxeles entre el div y el final de la pantalla |
- Para trabajar con margin el div no puede tener el 100% de ancho, así que es obligatorio trabajar también con el parámetro width.
Fondo
| Código | Ejemplo | Resultado |
|---|---|---|
background: color |
<div style="background:aliceblue;">Ejemplo</div> |
Ejemplo
|
- color → Puede ir en formato RGB (i.e.:#000000 para el negro) o con el nombre dado si procede
Fuente
| Código | Ejemplo | Resultado |
|---|---|---|
font-size: tamañopx |
<div style="font-size:25px;">Ejemplo</div> |
Ejemplo
|
font-size: porcentaje |
<div style="font-size:60%;">Ejemplo</div> |
Ejemplo
|
color: color |
<div style="color:Dodgerblue;">Ejemplo</div> |
Ejemplo
|
font-weight: normal/bold |
<div style="font-weight:bold;">Ejemplo</div> |
Ejemplo
|
font-style: normal/italic/... |
<div style="font-style:italic;">Ejemplo</div> |
Ejemplo
|
font-family: fuente |
<div style="font-family:Verdana;">Ejemplo</div> |
Texto en harrington
|
- color → Puede ir en formato RGB (i.e.:#000000 para el negro) o con el nombre dado si procede.
- family → El usuario final debe tener "instalada" la fuente en su pc para ver la que se indica.
| |||||||||||||||||||
