• Save
Referencia css
Upcoming SlideShare
Loading in...5
×
 

Referencia css

on

  • 282 views

Referencia CSS

Referencia CSS

Statistics

Views

Total Views
282
Views on SlideShare
282
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Referencia css Referencia css Document Transcript

  • 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 ©
  • 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 ©
  • 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 ©
  • 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 ©
  • 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 ©
  • 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 ©
  • 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 ©
  • 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 ©