Referencia CSS :: Comunidad Ulfix

Inicio

Diseño Web

CSS

Referencia CSS

CSS

Referencia CSS

Diseño Web - Cascading Style Sheets

Escrito por Alejandro López Hernández

Miércoles 28 de Enero de 2004 09:15

(Basada en la referencia MSDN y WC3 CSS)

Propiedades de fuente

Propiedad	Valores Validos	Ejemplo	¿Hereditario?
font-family	[tipo o nombre de la fuente]	font-family: Verdana, Arial;	S
font-style	normal \| italic	font-style:italic;	S
font-variant	normal \| small-caps	font-variant:small-caps;	S
font-weight	normal \| bold	font-weight:bold;	S
font-size	[ xx-large \| x-large \| large \| medium \| small \| x-small \| xx-small ] \| [ larger \| smaller ] \| percentage \| length	font-size:12pt;	S
font	[ font-style \|\| font-variant \|\| font-weight ] ? font-size [ / line-height ] ? font-family	font: bold 12pt Arial;	S

Propiedades de color y de fondo

Propiedad	Valores Validos	Ejemplo	¿Hereditario?
color	color	color: red	S
background-color	color \| transparent	background-color: yellow	N*
background-image	url \| none	background-image: url('/house.jpg')	N*
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat	background-repeat: no-repeat	N*
background-attachment	scroll \| fixed	background-attachment: fixed	N*
background-position	[ position \| length ] \| {1,2} \| [ top \| center \| bottom ] \|\| [ left \| center \| right ]	background-position: top center	N*
background	transparent \| color \|\| url \|\| repeat \|\| scroll \|\| position	background: silver url('/house.jpg') repeat-y	N*

* A partir de CSS2, las propiedades indicadas arriba son hereditarias.

Propiedades de texto

Propiedad	Valores Validos	Ejemplo	¿Hereditario?
letter-spacing	normal \| length	letter-spacing:5pt	S
text-decoration	none \| underline \| overline \| line-through	text-decoration:underline	N
vertical-align	sub \| super \|	vertical-align:sub	N
text-transform	capitalize \| uppercase \| lowercase \| none	text-transform:lowercase	N
text-align	left \| right \| center \| justify	text-align:center	N
text-indent	length \| percentage	text-indent:25px	N
line-height	normal \| number \| length \| percentage	line-height:15pt	N

Propiedades de bloque

Propiedad	Valores Validos	Ejemplo	¿Hereditario?
margin-top	length \| percentage \| auto	margin-top:5px	N
margin-right	length \| percentage \| auto	margin-right:5px	N
margin-bottom	length \| percentage \| auto	margin-bottom:1em	N
margin-left	length \| percentage \| auto	margin-left:5pt	N
margin	length \| percentage \| auto {1,4}	margin: 10px 5px 10px 5px	N
padding-top	length \| percentage	padding-top:10%	N
padding-right	length \| percentage	padding-right:15px	N
padding-bottom	length \| percentage	padding-bottom:1.2em	N
padding-left	length \| percentage	padding-left:10pt; }	N
padding	length \| percentage {1,4}	padding: 10px 10px 10px 15px	N
border-top-width	thin \| medium \| thick \| length	border-top-width:thin	N
border-right-width	thin \| medium \| thick \| length	border-right-width:medium	N
border-bottom-width	thin \| medium \| thick \| length	border-bottom-width:thick	N
border-left-width	thin \| medium \| thick \| length	border-left-width:15px	N
border-width	thin \| medium \| thick \| length {1,4}	border-width: 3px 5px 3px 5px	N
border-top-color	color	border-top-color:navajowhite	N
border-right-color	color	border-right-color:whitesmoke	N
border-bottom-color	color	border-bottom-color:black	N
border-left-color	color	border-left-color:#C0C0C0	N
border-color	color {1,4}	border-color: green red white blue; }	N
border-top-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-top-style:solid	N
border-right-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-right-style:double	N
border-bottom-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-bottom-style:groove	N
border-left-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-left-style:none	N
border-style	none \| solid \| double \| groove \| ridge \| inset \| outset	border-style:ridge; }	N
border-top	border-width \| border-style \| border-color	border-top: medium outset red	N
border-right	border-width \| border-style \| border-color	border-right: thick inset maroon	N
border-bottom	border-width \| border-style \| border-color	border-bottom: 10px ridge gray	N
border-left	border-width \| border-style \| border-color	border-left: 1px groove red	N
border	border-width \| border-style \| border-color	border: thin solid blue	N
float	none \| left \| right	float:none	N
clear	none \| left \| right \| both	clear:left	N

Propiedades de Clasificación

Propiedad	Valores Validos	Ejemplo	¿Hereditario?
display	none \| block \| inline \| list-item	display:none	N
list-style-type	disk \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha \| none	list-style-type:upper-alpha	S
list-style-image	url \| none	list-style-image:url('/icFile.gif')	S
list-style-position	inside \| outside	list-style-position:inside	S
list-style	keyword \|\| position \|\| url	list-style: square outside url('/icFolder.gif')	S

Propiedades de Posicionamiento

Propiedad	Valores Validos	Ejemplo	Applies to	¿Hereditario?
clip	shape \| auto	clip:rect(0px 200px 200px 0px)	all elements	N
height	length \| auto	height:200px	DIV, SPAN and replaced elements	N
left	length \| percentage \| auto	left:0px	absolutely and relatively positioned elements	N
overflow	visible \| hidden \| scroll \| auto	overflow:scroll	all elements	N
position	absolute\| relative \| static	position:absolute	all elements	N
top	length \| percentage \| auto	top:0px	absolutely and relatively positioned elements	N
visibility	visible \| hidden \| inherit	visibility:visible	all elements	N
width	length \| percentage \| auto	width:80%	DIV, SPAN and replaced elements	N
z-index	auto \| integer	z-index:-1	absolutely and relatively positioned elements	N

Propiedades de Impresión

Propiedad	Valores Validos	Ejemplo	¿Hereditario?
page-break-before	auto \| always \|\| left \| right	page-break-before:always	N
page-break-after	auto \| always \|\| left \| right	page-break-before:auto	N

Clases Pseudo

Propiedad	Valores Validos	Ejemplo	¿Hereditario?
cursor	auto \| crosshair \| default \| hand \| move \| e-resize \| ne-resize \| nw-resize \| n-resize \| se-resize \| sw-resize \| s-resize \| w-resize \| text \| wait \| help	{ cursor:hand; }	S
active, hover, link, visited	n/d	a:hover { color:red; }	S
first-letter, first-line	any font manipulating declaration	p:first-letter{ float:left;color:blue }	N