Referencia css

197 views

Published on

Referencia CSS

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
197
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Referencia css

  1. 1. Yusef Hassan MonteroFrancisco Jesús Martín FernándezReferencia CSSTodos los derechos reservadoswww.nosolousabilidad.comYusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
  2. 2. IntroducciónEste documento tiene por objetivo servir de material de apoyo yreferencia para la elaboración de hiperdocumentos formateadosmediante CSS (Cascading Style Sheets).Para más información visite http://www.w3.org/Style/CSS/.ÍndicePropiedades CSSTipografía (pág. 3)Alineación (pág. 4)Caja (pág. 5)Colores (pág. 6)Visualización (pág. 6)Listas (pág. 7)Apéndice (pág. 8)Unidades, Porcentaje, URLs, y valores para colores.Yusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
  3. 3. TipografíaFONT-FAMILYTipo de fuente.Valores:- Arial; Helvetiva; sans-serif; serif; Times New Roman; Times;Verdana; Georgia; Geneva; Courier; Corier New ...FONT-SIZETamaño de la fuente.Valores:- large; medium; small; x-large; x-small; xx-large; xx-small- unidades- porcentajeFONT-STYLEEstilo o efecto tipográfico de la fuente.Valores:- italic; normalFONT-VARIANTEstilo (ej. small-caps: ESTE TEXTO ESTÁ ESCRITO CON SMALL-CAPS).Valores:- normal; small-capsFONT-WEIGHTEnfatizado (negrita).Valores:- valores absolutos: 100, 200, 300 ... 900- bold; normalTEXT-DECORATIONEfectos tipográficos.Valores:- blinks (parpadeante); line-through (tachado); underline(subrayado); overline (‘sobrerayado’)TEXT-TRANSFORMTransformación del texto.Valores:- capitalize (convierte la primera letra de cada palabra amayúsculas); uppercase (todas a mayúsculas); lowercase (todasa minúsculas)Yusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
  4. 4. AlineaciónLETTER-SPACINGEspacio entre letras.Valores:- unidadesWORD-SPACINGEspacio entre palabras.Valores:- unidadesLINE-HEIGHTEspacio entre renglones.Valores:- unidades- porcentajeVERTICAL-ALIGNAlineación vertical respecto al contenedor.Valores:- baseline; bottom; middle; sub; super; text-top; text-bottom; topTEXT-ALIGNAlineación horizontal del texto.Valores:- left; rigth; center; justifyTEXT-INDENTSangrado.Valores:- unidades- porcentajeFLOATAlineación del elemento respecto a elementos contiguos.Valores:- left; right; noneYusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
  5. 5. CajaBORDER-STYLETipo de borde de la caja.Valores:- solid (solido); dashed (lineado); dotted (punteado); double (doslíneas); inset (efecto 3D); groove (efecto 3D); ridged (efecto 3D);none (sin borde)BORDER-WIDTHAncho del bordeValores:- valores absolutos- thin; medium; thickBORDER-LEFT, BORDER-RIGHT, BORDER-BOTTOM y BORDER-TOPTipo, ancho, color... de los diferentes bordes.Valores:- unidades- thin; medium; thick- nombre del color- valor del color- solid (solido); dashed (lineado); dotted (punteado); double (doslíneas); inset (efecto 3D); groove (efecto 3D); ridged (efecto 3D);none (sin borde)BORDER-LEFT-WIDTH, BORDER-RIGHT-WIDTH, BORDER-BOTTOM-WIDTH yBORDER-TOP-WIDTHAncho de los diferentes bordes.Valores:- unidades- thin; medium; thickWIDTH y HEIGHTAncho y alto de la caja.Valores:- unidades- porcentajePADDINGMargen interno de la caja.Valores:- unidades- porcentajeYusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
  6. 6. PADDING-TOP, PADDING-BOTTOM, PADDING-LEFT y PADDING-RIGHTMárgenes internos superior, inferior, izquierdo y derecho.Valores:- unidades- porcentajeMARGINMargen externo de la caja.Valores:- unidades- porcentajeMARGIN-TOP, MARGIN-BOTTOM, MARGIN-LEFT y MARGIN-RIGHTMárgenes externos superior, inferior, izquierdo y derecho.Valores:- unidades- porcentajeColoresBACKGROUND-COLORColor de fondo.Valores:- nombre del color- valor del color- transparentBORDER-COLORColor del borde de la caja.Valores:- nombre del color- valor del colorCOLORColor del elemento.Valores:- nombre del color- valor del colorVisualizaciónDISPLAYForma en que se va a mostrar el elemento.Valores:- inline; block; list-item; noneYusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
  7. 7. ListasLIST-STYLE-TYPEDefine el símbolo (listas sin orden) o tipo de numeración (listas ordenadas)que precede a cada elemento de una lista.Valores:- circle; disc; square; decimal; lower-alpha; lower-roman; upper-alpha; upper-roman; noneLIST-STYLE-IMAGEDefine la utilización de una imagen como marcador o símbolo de elementosde una lista.Valores:- url(localización de la imagen)- noneLIST-STYLE-POSITICONEn elementos de lista con varias líneas determina la forma de sangrado, conrespecto a la marca o símbolo de lista, de aquellas líneas que no son la primera.Valores:- inside; outsideYusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©
  8. 8. ApéndiceUnidadesLas unidades de medida en CSS pueden ser:PX: PixelsIN : Inches (pulgadas)MM: MilímetrosCM: CentímetrosPC: PicasPT: PuntosEX: x-heights (tipo medio, la altura de una letra minúscula que no tiene trazosascendentes ni descendentes)EM: m-lengths (tipo máximo, la altura de una letra mayúscula que no tiene trazosascendentes ni descendentes)Ejemplo: <DIV STYLE=”margin: 10px;”>Texto cualquiera</DIV>PorcentajeSe indica con el símbolo % y es una unidad de medida relativa.Ejemplo: <DIV STYLE=”margin: 10%;”>Texto cualquiera</DIV>Nombre del colorLos posibles valores de este tipo son: aqua; black; blue; fuchsia; gray;green; lime; maroon; navy; olive; purple; red; silver; teal; white; yellow;.Ejemplo: <DIV STYLE=”color: red;”>Texto cualquiera</DIV>Valor del colorEjemplo en hexadecimal:<DIV STYLE=”color: #ff0000;”>Texto cualquiera</DIV>Ejemplo en RGB (enteros):<DIV STYLE=”color: rgb(255,0,0);”>Texto</DIV>Ejemplo en RGB (porcentaje):<DIV STYLE=”color: rgb(100%,0%,0%);”>Texto</DIV>URLsEjemplo:<DIV STYLE=”background: url(http://www.bg.com/pinkish.gif);”Yusef Hassan Montero y Francisco Jesús Martín Fernández, 2003 ©

×