Your SlideShare is downloading. ×
3.Propiedades (diseño con CSS)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

3.Propiedades (diseño con CSS)

1,323
views

Published on

Principales propiedades CSS agrupadas por leemnetos: textos, imágenes, enlaces, etc.

Principales propiedades CSS agrupadas por leemnetos: textos, imágenes, enlaces, etc.

Published in: Design

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,323
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. PROPIEDADES
    TEMA 3
    www.laramarcos.com
  • 2. 3.1 texto
    color
    font (shorthand)
    font-size
    font-family
    font-style
    font-variant
    font-weight
    text-align
    line-height
    text-decoration
    www.laramarcos.com
  • 3. color
    Hay múltiples formas de establecer el valor del color
    Palabras clave, en inglés = 17 colores
    RGB = 16 millones de colores
    Propiedad que se hereda, a excepción de los enlaces
    Ejemplos:
    color: red;
    color: rgb (51, 204, 102);
    color: rgb (20%, 12%, 75%);
    color: #33CC66; EL MÁS UTILIZADO
    www.laramarcos.com
  • 4. FONT-SIZE
    El valor del tamaño de letra también se puede establecer de varias maneras
    Medidas relativas: LA MEJOR OPCIÓN (accesibildad y flexibilidad de medios)
    em (M mayúscula)
    ex (x minúscula)
    px (depende de la resolución de pantalla)
    % (depende del tamaño de un elemento superior)
    Medidas absolutas
    cm (centímetros)
    mm (milímetros)
    pt (puntos)
    www.laramarcos.com
  • 5. Font- family
    Al establecer el tipo de letra se recomienda indicar, al menos, tres alternativas
    2 nombres de tipos de letra, por ejemplo: Times New Roman o Courier New.
    Y el nombre de la familia tipográfica: serif, cursive, sans-serif, fantasy y monospace.
    Ejemplos más habituales:
    font-family: Arial, Helvetica, sans-serif;
    font-family: "Times New Roman", Times, serif;
    font-family: "Courier New", Courier, monospace;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    www.laramarcos.com
  • 6. Font-style
    El formato del texto puede tomar los siguientes valores
    normal (valor por defecto)
    italic (cursiva)
    oblique (casi en desuso)
    Font-variant
    • Estilo alternativo de la letra
    • 7. normal (valor por defecto)
    • 8. small-caps (mayúsculas pequeñas)
    www.laramarcos.com
  • 9. Font-weight
    Para cambiar la anchura de la letra
    Puede tomar múltiples valores pero los más útiles son:
    normal (valor por defecto)
    bold (negrita)
    Otros valores:
    400 = normal
    700 = bold
    lighter, bolder
    www.laramarcos.com
  • 10. font
    Regla shorthand que engloba las 5 anteriores
    En ESTE CASO, sigue un orden estricto
    Opcionalmente: font-style, font-variant y/o font-weight (uno, dos o los tres valores)
    Obligatoriamente: font-size
    Obligatoriamente: font-family
    www.laramarcos.com
  • 11. Text-align
    Alineación del CONTENIDO de un elemento
    No es únicamente para alinear texto
    Posibles valores
    left (valor por defecto)
    right
    center
    justify
    www.laramarcos.com
  • 12. Line-height
    Interlineado: altura de línea de los ELEMENTOS
    No funciona únicamente con el texto
    Posibles valores
    Cualquier tipo de medida
    Un número: funciona como múltiplo del tamaño de la propia letra
    www.laramarcos.com
  • 13. Text-decoration
    Adorno del texto
    Valores
    none (valor por defecto, excepto en los enlaces)
    underline (subrayado: puede parecer un enlace)
    overline
    line-through (tachado: habitual en los blogs)
    blink (parpadeante: poco recomendado)
    www.laramarcos.com
  • 14. 3.2 enlaces
    color
    font
    text-decoration
    Jugar con ellas para establecer diferencias según el estado del enlace
    link (aún sin visitar)
    visited (visitados anteriormente)
    hover (puntero encima)
    active (momento en el que se pincha)
    www.laramarcos.com
  • 15. 3.3 imágenes
    width
    height
    Los valores se expresan mediante cualquier tipo de medida (relativa, absoluta y %)
    No es recomendable deformar las proporciones de la imagen
    www.laramarcos.com
  • 16. 3.4 listas
    list-style (shorthand)
    list-style-type
    list-style-position
    list-style-image
    www.laramarcos.com
  • 17. List-style-type
    Marcado de la lista
    Valores
    disc (círculo relleno)
    circle (círculo vacío)
    square (cuadradito)
    decimal, decimal-leading-zero
    lower-roman, upper-roman (números romanos)
    lower-latin, upper-latin, lower-alpha,
    upper-alpha (alfabeto)
    Otros: armenian, georgian, lower-greek
    www.laramarcos.com
  • 18. List-style-position
    Posición del marcador respecto al texto (sólo se aprecia cuando ocupan más de una línea)
    Valores
    inside (la 2ª línea se coloca debajo
    del marcador)
    outside (la 2ª línea permanece alejado del marcador)
    www.laramarcos.com
  • 19. List-style-image
    Utilizar una pequeña imagen como marcador de las listas
    Valor
    url (“images/marcador1.png”)
    www.laramarcos.com
  • 20. 3.5 tablas
    border-spacing (separación entre celdas)
    Una medida (horizontal y vertical)
    Opcionalmente, una 2ª medida (la 1ª indica la horizontal y la 2ª la vertical)
    caption-side (posición vertical del caption)
    top (valor por defecto)
    bottom
    border-collapse (cómo se muestra el borde de las celdas)
    separate (valor por defecto)
    collapse
    www.laramarcos.com
  • 21. 3.6 formularios
    Jugar con:
    padding (para los input type=“text”)
    margin
    display (block)
    float
    etc.
    Y con la pseudo-clase :focus
    www.laramarcos.com

×