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

Weitere ähnliche Inhalte

Andere mochten auch

El posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosEl posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosYadith Gomez Nolasco
 
0.Indice de Contenidos (diseño web con CSS)
0.Indice de Contenidos (diseño web con CSS)0.Indice de Contenidos (diseño web con CSS)
0.Indice de Contenidos (diseño web con CSS)larasaregune
 
0.Indice De Contenidos
0.Indice De Contenidos0.Indice De Contenidos
0.Indice De Contenidoslarasaregune
 
4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)larasaregune
 
1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)larasaregune
 
1.Introduccion (diseño con CSS)
1.Introduccion (diseño con CSS)1.Introduccion (diseño con CSS)
1.Introduccion (diseño con CSS)larasaregune
 
0.Indice de Contenidos
0.Indice de Contenidos0.Indice de Contenidos
0.Indice de Contenidoslarasaregune
 
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modularrodboc
 
Formularios html
Formularios htmlFormularios html
Formularios htmlArtmio
 
Web Performance Optimization: Mejorando el proceso de carga
Web Performance Optimization: Mejorando el proceso de cargaWeb Performance Optimization: Mejorando el proceso de carga
Web Performance Optimization: Mejorando el proceso de cargaJesus Pernas Alonso
 
Las buenas prácticas oficiales para aplicaciones Symfony
Las buenas prácticas oficiales para aplicaciones SymfonyLas buenas prácticas oficiales para aplicaciones Symfony
Las buenas prácticas oficiales para aplicaciones Symfonysymfony_bcn
 
Haml y Sass: HTML y CSS dietéticos
Haml y Sass: HTML y CSS dietéticosHaml y Sass: HTML y CSS dietéticos
Haml y Sass: HTML y CSS dietéticosDAVID GRILLI
 
Curso Elaborando un Plan de Negocios
Curso Elaborando un Plan de NegociosCurso Elaborando un Plan de Negocios
Curso Elaborando un Plan de NegociosJulio Pari
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSSManuel Razzari
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño WebRebelBangarang
 

Andere mochten auch (20)

Paso apaso de html
Paso apaso de htmlPaso apaso de html
Paso apaso de html
 
El posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosEl posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasos
 
0.Indice de Contenidos (diseño web con CSS)
0.Indice de Contenidos (diseño web con CSS)0.Indice de Contenidos (diseño web con CSS)
0.Indice de Contenidos (diseño web con CSS)
 
0.Indice De Contenidos
0.Indice De Contenidos0.Indice De Contenidos
0.Indice De Contenidos
 
4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)
 
1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)
 
1.Introduccion (diseño con CSS)
1.Introduccion (diseño con CSS)1.Introduccion (diseño con CSS)
1.Introduccion (diseño con CSS)
 
0.Indice de Contenidos
0.Indice de Contenidos0.Indice de Contenidos
0.Indice de Contenidos
 
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modular
 
Formularios html
Formularios htmlFormularios html
Formularios html
 
Web Performance Optimization: Mejorando el proceso de carga
Web Performance Optimization: Mejorando el proceso de cargaWeb Performance Optimization: Mejorando el proceso de carga
Web Performance Optimization: Mejorando el proceso de carga
 
Las buenas prácticas oficiales para aplicaciones Symfony
Las buenas prácticas oficiales para aplicaciones SymfonyLas buenas prácticas oficiales para aplicaciones Symfony
Las buenas prácticas oficiales para aplicaciones Symfony
 
Haml y Sass: HTML y CSS dietéticos
Haml y Sass: HTML y CSS dietéticosHaml y Sass: HTML y CSS dietéticos
Haml y Sass: HTML y CSS dietéticos
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Curso Elaborando un Plan de Negocios
Curso Elaborando un Plan de NegociosCurso Elaborando un Plan de Negocios
Curso Elaborando un Plan de Negocios
 
Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2
 
Maquetación Web
Maquetación WebMaquetación Web
Maquetación Web
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSS
 
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño Web
 

Ähnlich wie 3.Propiedades (diseño con CSS)

Ähnlich wie 3.Propiedades (diseño con CSS) (20)

Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
u3
u3u3
u3
 
Cuadro atributos css
Cuadro atributos cssCuadro atributos css
Cuadro atributos css
 
CSS 5 - Unidades y Valores
CSS 5 - Unidades y ValoresCSS 5 - Unidades y Valores
CSS 5 - Unidades y Valores
 
Codigos de html mitzi inf 1
Codigos de html mitzi inf 1Codigos de html mitzi inf 1
Codigos de html mitzi inf 1
 
Cuadro dialogo fuente y parrafo
Cuadro dialogo fuente y parrafoCuadro dialogo fuente y parrafo
Cuadro dialogo fuente y parrafo
 
Atributos Css
Atributos CssAtributos Css
Atributos Css
 
Css
CssCss
Css
 
Trabajo manual Word
Trabajo manual WordTrabajo manual Word
Trabajo manual Word
 
Inf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_ValenzuelaInf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_Valenzuela
 
Cap3. unidades de medida y colores
Cap3. unidades de medida y coloresCap3. unidades de medida y colores
Cap3. unidades de medida y colores
 
20. practica html
20. practica html20. practica html
20. practica html
 
Html
HtmlHtml
Html
 
Guía rápida de comandos html
Guía rápida de comandos htmlGuía rápida de comandos html
Guía rápida de comandos html
 
TAREA DEL CSS
TAREA DEL CSSTAREA DEL CSS
TAREA DEL CSS
 
Box model carolina sanchez
Box model carolina sanchezBox model carolina sanchez
Box model carolina sanchez
 
Css
CssCss
Css
 
Resumen dreamweaver 8
Resumen dreamweaver 8Resumen dreamweaver 8
Resumen dreamweaver 8
 
Las tablas
Las tablasLas tablas
Las tablas
 

Kürzlich hochgeladen

Simuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosSimuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosErickOv
 
Catalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevanteCatalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevantesantiagovelez61
 
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...ORIETTA POLIFRONI
 
diseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxdiseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxlou lou
 
Espiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfEspiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfjpgaraglia03
 
elementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxelementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxlou lou
 
periodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfperiodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfacoellob
 

Kürzlich hochgeladen (7)

Simuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosSimuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito Electronicos
 
Catalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevanteCatalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevante
 
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
 
diseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxdiseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptx
 
Espiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfEspiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdf
 
elementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxelementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptx
 
periodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfperiodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdf
 

3.Propiedades (diseño con CSS)

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.