Porcentajes
EX - Exe
PC - Picas
PX - Pixeles
PT - Puntos
IN - Pulgadas
% - Percentages
EM - Puntos de letra
Se pueden poner varios
selectores separandolos por comas
body, p, table, h1, h2, h3, h4, h5, h6, etc
Ejemplo:
<STYLE>
TABLE, TR, DT, {background: gold}
<STYLE>
Poner un fondo oro en el
contenido de la etiketas TABLE, TR, DT,
FILTROS
Filtros de opacidad
filter: alpha(opacity=80);
(Pone la opacidad de 80 en una imagen)
filter: shadow(color:black);
(Pone una estela negra en un texto)
filter: shadow; color: orange;
(Pone la opacidad en un texto)
Ejemplo:
p {filter: alpha(opacity=25);
-moz-opacity:.25;opacity:.25;}
(La segunda linea fuciona solo en Mozilla).
BORDER
Especifica la clase de borde de una caja
BORDER: [clase de borde] [grosor] [color];
border: ridge 6px red;
border: dotted 6px aqua;
border: dashed 6px Navy;
border: solid 6px maroon;
border: groove 6px Chocolate;
border: double 1em Black;
border: inset 1em #ff0000;
border: outset 1em #006600;
border-color: #CCC #666 #666 #000
COLOR
Define el color de texto
color: beige;
color: #004380px;
font-color: beige;
font-color: #004380px;
Ejemplo:
B {font-color: #004380px}
Evita la ruptura de un bloque de texto
page-break-after: avoid;
LINE-HEIGHT:
Especifica la altura entre lineas
line-height: 200%;
line-height: 1.5em;
line-height: 24.0pt;
line-height: exactly;
Ejemplo:
B { line-height: 22px}
P { line-height: 200%}
LETTER-SPACING
Define espacios en blanco
entre letras
letter-spacing: normal;
letter-spacing: .5pt;
letter-spacing: 9px;
letter-spacing: .9cm;
letter-spacing: 0.1em;
letter-spacing: -.06em;
letter-spacing: -0.1em;
letter-spacing: -0.12em;
letter-spacing: 0.00em;
Ejemplo:
H1 { letter-spacing: 0.1em }
P.nota { letter-spacing: -0.1em }
WORD-SPACING
Define espacios en blanco entre palabras.
word-spacing: 0.4em;
word-spacing: -0.2em;
word-spacing: -.46em;
Ejemplo:
tt {word-spacing: -.46em;}
WHITE-SPACE
Define espacios en blanco
entre palabras o lineas de texto.
white-space: pre;
white-space: normal;
white-space: nowrap;
white-space: 3px;
Ejemplo:
em { white-space: 3px;}
FONT-
Clases de fuentes de texto
font-size: 1em;
font-style: italic;
font-family: serif;
font-weight: bold;
En su lugar se puede poner
Font: bold 1em italic arial
Ejemplos:
B {font-family: Helvetica, "Arial black"}
cite {font-family: tahoma,helvetica, arial"}
Para poner el codigo en una pagina
<HTML>
<HEAD>
<TITLE>
Ejemplo:
</TITLE>
<STYLE TYPE="TXT/CSS">
H1 {
color: green;
font-style: italic;
font-family: arial;
}
</HEAD><BODY>
<h1>TEXTO DE LA PAGINA</h1>
Tambien se puede poner en un archivo.css
</HTML></BODY>
MARGIN
Espacia fuera del borde (caja, etc)
margin: auto; /*por defecto*/
margin: 0in;
margin: 9px;
margin: 0 3% 0;
margin: 9px 0in;
margin: 0px auto;
margin-left: 0in;
margin-left: 9px;
margin-left: 50%;
margin-right: 9px;
margin-top: 9px;
margin-bottom: 9px;
Ejemplos:
dt { margin-bottom: 3em }
address { margin-left: 50% }
p.mitad { margin-right: 50% }
BODY { margin-top: 0 }
/*Kita el margen superior de una pagina */
BODY { margin: 2in }
Todod los margenes tienen 2pulgadas
P { margin: 2em 4em }
Los márgenes superior e inferior
tienen 2em y lo márgenes izquierdo
y derecho tienen 4em
DIV { margin: 1em 2em 3em 4em }
El margen superior tiene 1em,
el margen derecho tiene 2em,
el margen inferior tiene 3em,
el margen izquierdo tiene 4em
De izquierda a derecha
como las agujas de un reloj.
PADDING
Espacia dentro del borde
padding:3%;
Los 4 lados con margenes de 3%
padding: 1in;
Los 4 lados con margenes de 1in
padding-top: 7px;
Lado superior con 7px
padding-left: 3pc;
Lado izquierdo con 3pc
padding-right: 4em;
Lado derecho con 4em
padding-bottom: 2in;
Lado inferior con 2in
PADDING: 0 6px 6px 0;
Borde de arriba 0
Borde derecho 16
Borde de abajo 16
Borde de izquierdo 0
De izquierda a derecha
como las agujas de un reloj.
VERTICAL-ALIGN
Alinea en vertical texto e imagenes
vertical-align: sub 4px; /*subíndice*/
vertical-align: super 1em; /*superíndice*/
vertical-align: top 1pc; /*Elemento arriba*/
vertical-align: text-top 1in; /*texto arriba*/
vertical-align:middle 1cm; /*elemento al medio*/
vertical-align: text-bottom 1pt; /*texto al fondo*/
vertical-align:bottom -1mm; /*Elemento al fondo*/
vertical-align: baseline; /*Por defecto, predifinido*/
Ejemplos:
IMG { vertical-align: 50% } /* Al centro*/
IMG.mitad {vertical-align:middle } /*A la mitad*/
.arriba { vertical-align: super } /*Parte de arriba*/
DISPLAY
Define una celda, tabla, bloque, etc
display: cell; /* celda */
display: table; /* tabla */
display: table-cell; /*celda de una tabla*/
display: none; /*por defecto, predifinida*/
display: block;
/*Ruptura de una linea antes
y despues de un elemento*/
display: inline;
*/No ruptura de una linea antes
y despues de un elemento*/
display: list-item;
/*parecido a block excepto que
se añade una marca de lista*/
Dos ejemplos:
P {display: table-cell;
vertical-align: middle;}
DIV {
height: 100%;
width: 100%;
display: table;
position: fixed;
}
POSITION
Definir la posicion de un elemento
position: fixed; /*posicion fija*/
position: static; /*posicion estatica*/
position: relative; /*posicion relativa*/
position: justify; /*posicion justificada*/
position: absolute; /*posicion absoluta*/
position: relative; top: 0px; left: 0px;
position: absolute; top: 1px; left: 2px;
position: relative; left = 35%; top = 20%
HEIGHT.
Define la altura de un elemento
height: auto; /* prefijada */
height: 300; /* altura de 300 */
height: 10px; * altura de 10 pixeles */
height: 50%; /* altura con 50 por ciento */
WIDTH.
Define la longitud de un elemento
width: 300; /* longitud de 300 */
width: 50%;/* longitud con 50 por ciento */
Etiquetas para alineaciones
top: 1px; /* arriba */
left: -2px; /* izquierda */
right: 5px; /* derecha */
bottom: -225px; /* abajo */
CLEAR
Hace que el texto se separe de un
elemento por el lado especificado
clear: right; /*separa por la derecha*/
clear: left; /*separa por la izquierda*/
clear: both; /*separa por ambos lados*/
clear: none; /*no separa (por defecto)*/
FLOAT
Alineacion de imagenes y texto
float: left; /*alineacion a la izquierda*/
float: right: /*alineacion a la derecha*/
float: none; /*sin alineacion (por defecto)*/
TEXT-ALIGN
Alineacion para bloques de texto
text-align: left;
text-align: right;
text-align: center;
text-align: justify; /*lineas del mismo largo*/
Ejemplos:
H1 { text-align: center }
P.justificacion {text-align: justify}
TEXT-DECORATION
text-decoration:blink;/*parpadea*/
text-decoration:overline;/*subrayado superior*/
text-decoration:underline;/*subrayado inferior*/
text-decoration:line-through;tachadura de texto
text-decoration: none;
Quita el subrayado de los enlaces
TEXT-TRANSFORM
Transforma caracteres en
mayusculas y minusculas
text-transform: none;
/*
Valor inicial, por defecto, predeterminado*/
text-transform: lowercase;
/*Convierte todas la letras en minusculas*/
text-transform: uppercase;
/*Convierte todas la letras en mayusculas*/
text-transform: capitalize;
/*Primera letra de una palabra en mayusculas*/
TEXT-INDENT
Espacia el principio de una linea
text-indent: 5em;
text-indent: -25px;
text-indent: 12.25pt;
Ejemplos:
P { text-indent: 5em }
Se usa en bloques de texto
para
hacer sangrias (espaciar lineas).
Se suele emplear con P
y
longitudes tales como 6em o 7px;
o con porcentajes como 13%, etc
Ejemplos.
P { text-indent: 2em; font-size: 24px;}
P { text-indent: .75in; text-align= right}
Ejemplo en un pagina.
<HTML> <HEAD>
<TITLE>Ejemplo de text-indent</TITLE>
<STYLE>
H3 {font-size: 24px; text-indent: 9pc;}
</STYLE>
</HEAD><BODY>
<H3>
Visita Portonovo, pueblo marinero
y turistico, con fantasticas playas
y calas de arena blanca y fina
</H3>
</BODY></HTML>
Css
Visita Portonovo, pueblo marinero
y turistico, con fantasticas playas
y calas de arena blanca y fina
