SlideShare una empresa de Scribd logo
1 de 14
¿Que es CSS?
• CSS es el acrónicmo de CascadingStyle Sheets
  (es decir, hojas de estilo en cascada).
• También es un lenguaje de estilo que define la
  presentación de los documentos HTML.
• En esta podemos hablar de fuentes relativas
  a, colores, márgenes, líneas, altura, anchura, i
  mágenes de fondo, posicionamiento avanzado
  y muchos otros temas.
¿Por qué se llaman hojas de estilo?
• Con las hojas de estilo podemos crear clases y
  pseudoclases. Éstas nos permiten modificar e
  indicarle al navegador la forma en la que tiene
  que presentar cualquier elemento HTML.
   ¿Por qué se llaman "en cascada"?
• Cuando creamos un estilo, las especificaciones
  que se realicen para un determinado elemento
  serán aplicables a todos aquellos elementos que
  se encuentren "por debajo" de él atendiendo a
  un criterio de herencia.
¿Qué diferencia entre CSS y HTML?
• CSS se usa para formatear el contenido
  previamente estructurado.




• HTML se usa para estructurar el contenido.
Tres tipos de Estilos

• La información CSS se puede proporcionar por
  varias fuentes, ya sea adjunto como un
  documento por separado o incorporado en el
  documento HTML, y dentro de estas
  posibilidades destacan tres formas de dar
  estilo a un documento web.
1.-Hoja de Estilo Externa


• La Hoja de Estilo Externa se almacena en un
  archivo diferente al del archivo con el código
  HTML al cal estar vinculado a través del
  elemento link, que debe ir situado en la
  secciónhead. Es la manera de programar ms
  eficiente, ya que separa completamente las
  reglas de formato para la página HTML de la
  estructura básica de la página.
2.-Hoja de Estilo Interna

• La Hoja de Estilo Interna est incorporada a un
  documento HTML, a través del
  elementostyle dentro de la sección head,
  consiguiendo de esta manera separar la
  información del estilo del código HTML.
3.-Estilo en Línea

• El Estilo en Línea sirve para insertar el lenguaje
  de estilo directamente dentro de la
  secciónbody con el elemento style. Sin
  embargo, este tipo de estilo no se recomienda
  pues se debe intentar siempre separar el
  contenido de la presentación.
Ejemplo:
• h2 {color: green;}
• h2 ---> es el selector
• {color: green;} ---> es la declaración
  – color ---> es la propiedad o atributo
  – green ---> es el valor
Selector
• El Selector especifica que elementos HTML
  van a estar afectados por esa declaración, de
  manera que hace de enlace entre la estructura
  del documento y la regla estilística en la hoja
  de estilo.
Declaración
• La Declaración que va entre corchetes es la
  información de estilo que indica cómo se va a
  ver el selector. En caso de que haya más de
  una declaración se usa punto y coma para
  separarlas.
Propiedad o Atributo y Valor
• Dentro de la
  declaración, la Propiedad o Atributo define la
  interpretación del elemento asignándosele un
  cierto Valor, que puede ser
  color, alineación, tipo de fuente, tamaño..., es
  decir, especifican qué aspecto del selector se
  va a cambiar.
Etiquetas en CSS
• 1. COLOR DE TEXTO: color: red;
• 2. COLOR DE FONDO: background-color: black;
• 3. REPETIR IMAGEN DE FONDO EN FORMA
  HORIZONTAL: background:
  url("/images/back.jpg") repeat-x;
• 4. REPETIR IMAGEN DE FONDO EN FORMA
  VERTICAL: background: url("/images/back.jpg")
  repeat-Y;
• 5. NEGRITA font-weight: bold;
Etiquetas en CSS
• 6. CURSIVA font-style: italic;
• 7. SUBRAYADO: text-decoration: underline;
• 8. PARRAFO EN MAYUSCULAS: text-transform:
  uppercase;
• 9. LETRA CAPITAL O TEXTO TIPO TITULO: 1.text-
  transform: capitalize;
• 10. ELIMINAR SUBRAYADO DE UN ENLACE: a {
•         text-decoration: none;
• }

Más contenido relacionado

La actualidad más candente (20)

css
csscss
css
 
Curso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSSCurso FPE Diseño Web. Módulo 4. CSS
Curso FPE Diseño Web. Módulo 4. CSS
 
Hojas de estilo cascada
Hojas de estilo cascadaHojas de estilo cascada
Hojas de estilo cascada
 
Diseño multimedia intro css
Diseño multimedia intro cssDiseño multimedia intro css
Diseño multimedia intro css
 
Css Introducción
Css IntroducciónCss Introducción
Css Introducción
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Identificación del lenguaje ccs
Identificación del lenguaje ccsIdentificación del lenguaje ccs
Identificación del lenguaje ccs
 
2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Presentación3
Presentación3Presentación3
Presentación3
 
HTML
HTMLHTML
HTML
 
T2 1-css
T2 1-cssT2 1-css
T2 1-css
 
Identificación del lenguaje de css
Identificación del lenguaje de cssIdentificación del lenguaje de css
Identificación del lenguaje de css
 
Css intro
Css introCss intro
Css intro
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Hojas de estilo css
Hojas de estilo cssHojas de estilo css
Hojas de estilo css
 
Maquetar pagina html con css
Maquetar pagina html con cssMaquetar pagina html con css
Maquetar pagina html con css
 
Las hojas de estilo (css)
Las hojas de estilo (css)Las hojas de estilo (css)
Las hojas de estilo (css)
 
Estilos cascadas
Estilos cascadasEstilos cascadas
Estilos cascadas
 

Destacado (7)

Atributos Css
Atributos CssAtributos Css
Atributos Css
 
CSS
CSSCSS
CSS
 
Proyecto técnico
Proyecto técnicoProyecto técnico
Proyecto técnico
 
10 tablas
10  tablas10  tablas
10 tablas
 
Leccion 5 - Empieza una nueva era de navegadores web
Leccion 5 - Empieza una nueva era de navegadores webLeccion 5 - Empieza una nueva era de navegadores web
Leccion 5 - Empieza una nueva era de navegadores web
 
Introducción CSS
Introducción CSSIntroducción CSS
Introducción CSS
 
Introduccion Css
Introduccion CssIntroduccion Css
Introduccion Css
 

Similar a Hablando de css (20)

Css: elementos básicos
Css: elementos básicosCss: elementos básicos
Css: elementos básicos
 
Identificacion
IdentificacionIdentificacion
Identificacion
 
Diseño web con css
Diseño web con cssDiseño web con css
Diseño web con css
 
TAREA DEL CSS
TAREA DEL CSSTAREA DEL CSS
TAREA DEL CSS
 
Manual de css hojas de estilo
Manual de css hojas de estiloManual de css hojas de estilo
Manual de css hojas de estilo
 
guia sintaxis css.pdf
guia sintaxis css.pdfguia sintaxis css.pdf
guia sintaxis css.pdf
 
Gordo
GordoGordo
Gordo
 
Manual de css......jpg
Manual de css......jpgManual de css......jpg
Manual de css......jpg
 
programacion
programacionprogramacion
programacion
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
Presentación
PresentaciónPresentación
Presentación
 
Presenpabo
PresenpaboPresenpabo
Presenpabo
 
Que es css
Que es cssQue es css
Que es css
 
Organización de contenido en dreamweaver
Organización de contenido en dreamweaverOrganización de contenido en dreamweaver
Organización de contenido en dreamweaver
 
Lenguaje HTML y CSS
Lenguaje HTML y CSSLenguaje HTML y CSS
Lenguaje HTML y CSS
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?
 
CSS EN HTML5
CSS EN HTML5CSS EN HTML5
CSS EN HTML5
 
Curso css
Curso   cssCurso   css
Curso css
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Html5+css3 02
Html5+css3 02Html5+css3 02
Html5+css3 02
 

Último

pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIhmpuellon
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxFederico Castellari
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativanicho110
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxMiguelAtencio10
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 

Último (12)

pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 

Hablando de css

  • 1.
  • 2. ¿Que es CSS? • CSS es el acrónicmo de CascadingStyle Sheets (es decir, hojas de estilo en cascada). • También es un lenguaje de estilo que define la presentación de los documentos HTML. • En esta podemos hablar de fuentes relativas a, colores, márgenes, líneas, altura, anchura, i mágenes de fondo, posicionamiento avanzado y muchos otros temas.
  • 3. ¿Por qué se llaman hojas de estilo? • Con las hojas de estilo podemos crear clases y pseudoclases. Éstas nos permiten modificar e indicarle al navegador la forma en la que tiene que presentar cualquier elemento HTML. ¿Por qué se llaman "en cascada"? • Cuando creamos un estilo, las especificaciones que se realicen para un determinado elemento serán aplicables a todos aquellos elementos que se encuentren "por debajo" de él atendiendo a un criterio de herencia.
  • 4. ¿Qué diferencia entre CSS y HTML? • CSS se usa para formatear el contenido previamente estructurado. • HTML se usa para estructurar el contenido.
  • 5. Tres tipos de Estilos • La información CSS se puede proporcionar por varias fuentes, ya sea adjunto como un documento por separado o incorporado en el documento HTML, y dentro de estas posibilidades destacan tres formas de dar estilo a un documento web.
  • 6. 1.-Hoja de Estilo Externa • La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo con el código HTML al cal estar vinculado a través del elemento link, que debe ir situado en la secciónhead. Es la manera de programar ms eficiente, ya que separa completamente las reglas de formato para la página HTML de la estructura básica de la página.
  • 7. 2.-Hoja de Estilo Interna • La Hoja de Estilo Interna est incorporada a un documento HTML, a través del elementostyle dentro de la sección head, consiguiendo de esta manera separar la información del estilo del código HTML.
  • 8. 3.-Estilo en Línea • El Estilo en Línea sirve para insertar el lenguaje de estilo directamente dentro de la secciónbody con el elemento style. Sin embargo, este tipo de estilo no se recomienda pues se debe intentar siempre separar el contenido de la presentación.
  • 9. Ejemplo: • h2 {color: green;} • h2 ---> es el selector • {color: green;} ---> es la declaración – color ---> es la propiedad o atributo – green ---> es el valor
  • 10. Selector • El Selector especifica que elementos HTML van a estar afectados por esa declaración, de manera que hace de enlace entre la estructura del documento y la regla estilística en la hoja de estilo.
  • 11. Declaración • La Declaración que va entre corchetes es la información de estilo que indica cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para separarlas.
  • 12. Propiedad o Atributo y Valor • Dentro de la declaración, la Propiedad o Atributo define la interpretación del elemento asignándosele un cierto Valor, que puede ser color, alineación, tipo de fuente, tamaño..., es decir, especifican qué aspecto del selector se va a cambiar.
  • 13. Etiquetas en CSS • 1. COLOR DE TEXTO: color: red; • 2. COLOR DE FONDO: background-color: black; • 3. REPETIR IMAGEN DE FONDO EN FORMA HORIZONTAL: background: url("/images/back.jpg") repeat-x; • 4. REPETIR IMAGEN DE FONDO EN FORMA VERTICAL: background: url("/images/back.jpg") repeat-Y; • 5. NEGRITA font-weight: bold;
  • 14. Etiquetas en CSS • 6. CURSIVA font-style: italic; • 7. SUBRAYADO: text-decoration: underline; • 8. PARRAFO EN MAYUSCULAS: text-transform: uppercase; • 9. LETRA CAPITAL O TEXTO TIPO TITULO: 1.text- transform: capitalize; • 10. ELIMINAR SUBRAYADO DE UN ENLACE: a { • text-decoration: none; • }