Visualizaci

1
Visualización de documentos XML con CSS
2
plantilla CSS articulo.css
tituloP displayblock font-size20pt
font-familyVerdana colorgreen text-alignleft
autor displayblock font-size12pt
font-familyVerdana colorred text-alignright
intro displayblock font-familyVerdana
font-size10pt font-styleitalic tituloA
displayblock font-familyArial
text-alignleft font-size14pt colorblue
comentarioF displayblock font-styleitalic
text-aligncenter text-size10pt p
displayblock font-familyVerdana
font-size10pt text-alignjustify
3
propiedades
Display Indica cómo visualizar el contenido.
Cuando su valor es block se trata como un
bloque y se termina con un punto y
aparte. Font-family Indica el tipo de letra que
se debe aplicar a su contenido. Verdana es uno
de los más utilizados en la red Font-size Tamañ
o de letra. Si la unidad es pt, el tamaño se
fija en puntos tipográficos Color Color.
Descripciones por nombre o decimales Text-align a
lineación del texto Font-style Estilo de letra.
italic cursiva
4
reglas de estilo

• Descripciones de los formatos de las etiquetas
• Una regla de estilo se compone de dos partes
  principales
• el selector (en primer lugar a la izquierda)
• la declaración (a la derecha del selector entre
  
• La declaración simple se compone de una pareja
  de entidades (la propiedad y el valor, situadas a
  derecha e izquierda del signo dos puntos
• Los selectores se pueden agrupar en listas
  separados por el signo coma
• Las declaraciones también se pueden agrupar
  separadas por el signo punto y coma
• Lo más normal es encontrar los selectores
  aislados con sus declaraciones agrupadas.

5
cajas o bloques
CONTENIDO
6
cajas o bloques

• padding
• padding-left
• border
• border-top
• margin
• margin-right
• Grosores
• -width
• Estilos
• -style
• Colores
• -color

• Posicionamiento
• positionabsolute
• positionnormal
• positionrelative
• floatleft
• z-index

NOTA padding20px border-left-widththin borde
r-left-colorblack border-left-styledotted bor
der-top-widthmedium border-top-colorblue bord
er-top-styledouble border-right-widththick
border-right-colorgreen border-right-stylesoli
d border-bottom-width2px border-bottom-colorr
ed border-bottom-stylegroove margin45px
7
unidades de medida
Relativas

• em se refiere al tamaño de las mayúsculas (letra
  M) del tipo de letra aue se toma como referencia)
• ex se refiere al tamaño de las minúsculas (letra
  x) del tipo de letra que se toma como referencia
• px se refiere a los puntos de la pantalla
  (píxeles) con la resolución que está en activo
• se refiere al porcentaje del valor dependiente
  del contexto

NOTA font-size10 line-height1.5em TITULO
font-size18 letter-spacing1ex SUBTITULO
font-size14 word-spacing200 PARRAFO
font-size12 margin-left25px

• Absolutas
• in pulgadas. 1 pulgada2,54 cm
• cm centímetros
• mm milímetros
• pt puntos tipográficos. 1 pulgada72pt.
  1pt1/72in
• pc picas. 1pc12pt

8

• colores
• descripción por nombre (aqua, black, blue,
  fuchsia, gray, green, lime, maroon, navy, olive,
  purple, red, silver, teal, white, yellow
• descripción RGB
• TITULO colorrgb(255,33,120)
• TITULO color 3366FF
• TITULO color 36F

comentarios TITULO colorred /los títulos
aparecen en rojo /

• control de texto
• tipo de letra NOMBRE font-familyVerdana,
  Arial, Tahoma, sans-serif
• tamaño de texto
• estilo
• alineación

imágenes CUADRO background-image
url(http//www.ugr.es/f01