Your SlideShare is downloading. ×
0
PROPIEDADES<br />TEMA 3<br />www.laramarcos.com<br />
3.1 texto<br />color <br />font (shorthand)<br />font-size<br />font-family<br />font-style<br />font-variant<br />font-we...
color<br />Hay múltiples formas de establecer el valor del color<br />Palabras clave, en inglés = 17 colores<br />RGB = 16...
FONT-SIZE<br />El valor del tamaño de letra también se puede establecer de varias maneras<br />Medidas relativas: LA MEJOR...
Font- family<br />Al establecer el tipo de letra se recomienda indicar, al menos, tres alternativas<br />2 nombres de tipo...
Font-style<br />El formato del texto puede tomar los siguientes valores<br />normal (valor por defecto)<br />italic (cursi...
normal (valor por defecto)
small-caps (mayúsculas pequeñas)</li></ul>www.laramarcos.com<br />
Font-weight<br />Para cambiar la anchura de la letra<br />Puede tomar múltiples valores pero los más útiles son:<br />norm...
font<br />Regla shorthand que engloba las 5 anteriores<br />En ESTE CASO, sigue un orden estricto<br />Opcionalmente: font...
Text-align<br />Alineación del CONTENIDO de un elemento<br />No es únicamente para alinear texto<br />Posibles valores<br ...
Line-height<br />Interlineado: altura de línea de los ELEMENTOS<br />No funciona únicamente con el texto<br />Posibles val...
Text-decoration<br />Adorno del texto<br />Valores<br />none (valor por defecto, excepto en los enlaces)<br />underline (s...
3.2 enlaces<br />color <br />font<br />text-decoration<br />Jugar con ellas para establecer diferencias según el estado de...
3.3 imágenes<br />width<br />height<br />Los valores se expresan mediante cualquier tipo de medida (relativa, absoluta y %...
3.4 listas<br />list-style (shorthand)<br />list-style-type<br />list-style-position<br />list-style-image<br />www.larama...
List-style-type<br />Marcado de la lista<br />Valores<br />disc (círculo relleno)<br />circle (círculo vacío)<br />square ...
List-style-position<br />Posición del marcador respecto al texto (sólo se aprecia cuando ocupan más de una línea)<br />Val...
List-style-image<br />Utilizar una pequeña imagen como marcador de las listas<br />Valor<br />url (“images/marcador1.png”)...
Upcoming SlideShare
Loading in...5
×

3.Propiedades (diseño con CSS)

528

Published on

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

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
528
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "3.Propiedades (diseño con CSS)"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×