SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Hojas de Estilo en
Cascada
CSS (Cascading Style Sheets)
CARLOS ANTONIO BARAJAS RAMIREZ
El lenguaje HTML es poco flexible a la hora de
controlar la apariencia de una página. Los
problemas aparecen en el momento en que
HTML empieza a utilizarse para crear "imagen
de marca".
Una característica esencial de las hojas de estilo en
cascada (CSS) es la posibilidad de separar los elementos
formales de los de contenido. De esta forma, sólo con
una pequeña modificación de la hoja de estilo es
posible cambiar el aspecto de todas las páginas en las
que se aplica esa hoja.
¿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. Por ejemplo, si especificamos un tipo de letra para el
elemento <body> todos aquellos elementos que puedan heredar las características se
presentarán con el mismo tipo de fuente. Así, el elemento <p> heredará el tipo de letra
salvo que especifiquemos lo contrario.
Formas de establecer el CSS
- Estilo especificado dentro de la etiqueta.
- Estilo especificado en la cabecera del documento.
- Estilo definido en un documento independiente al que se
enlaza nuestra página.
Sintaxis
background
background-attachment
background-coloR
background-image
background-position
background-repeat
OBJETOS MODIFICABLES
border
border-color
border-style
border-width
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-top
border-top-color
border-top-style
border-top-width
font
font-family
font-size
font-style
font-weight
font-variant
font-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-top
margin-right
margin-bottom
margin- left
padding
padding-top
padding-right
padding-bottom
padding-left
VENTAJAS DE CSS
Con una Hoja de Estilo podemos modificar la presentación de cada elemento sin modificar
el código HTML, ahorrando esfuerzo y tiempo de edición. Así, el mantenimiento del sitio
web se hace más sencillo.
El lenguaje CSS ofrece una amplia gama de herramientas de composición más potentes que
HTML.
Con CSS se evita tener que recurrir a “trucos” para conseguir algunos efectos.
Las Hojas de Estilo pueden usarse con otros lenguajes de programación (por ejemplo
JavaScript) para conseguir efectos dinámicos en las páginas.
Se pueden especificar Hojas de Estilo para distintos navegadores.
Los usuarios con alguna discapacidad pueden definir su propia Hoja de Estilo y la regla
!import obligará al navegador a suplantar la Hoja de Estilo del autor de la página.
DESVENTAJAS
Si hay problemas o limitaciones de
compatibilidades, el navegador aplicará el
formato predeterminado y nuestro trabajo de
composición habrá sido inútil.
Algunas propiedades de las CSS pueden
provocar que una parte del contenido de
nuestra página resulte inaccesible desde
algunos navegadores.

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Que es css
Que es cssQue es css
Que es css
 
Presenpabo
PresenpaboPresenpabo
Presenpabo
 
Qué es CSS y con qué se come?
Qué es CSS y con qué se come?Qué es CSS y con qué se come?
Qué es CSS y con qué se come?
 
Css intro
Css introCss intro
Css intro
 
Acá les dejo un pequeño power poin.
Acá les dejo un pequeño power poin.Acá les dejo un pequeño power poin.
Acá les dejo un pequeño power poin.
 
Presentaciones efectivas con Word
Presentaciones efectivas con WordPresentaciones efectivas con Word
Presentaciones efectivas con Word
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
 
Introduccion historia css
Introduccion historia cssIntroduccion historia css
Introduccion historia css
 
Presentación
PresentaciónPresentación
Presentación
 
Maquetar pagina html con css
Maquetar pagina html con cssMaquetar pagina html con css
Maquetar pagina html con css
 
Hojas de calculo CSS
Hojas de calculo CSSHojas de calculo CSS
Hojas de calculo CSS
 
TAREA DEL CSS
TAREA DEL CSSTAREA DEL CSS
TAREA DEL CSS
 
CSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en CascadaCSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en Cascada
 
Hojas de estilo cascada
Hojas de estilo cascadaHojas de estilo cascada
Hojas de estilo cascada
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Hojas de estilo
Hojas de estiloHojas de estilo
Hojas de estilo
 
Qué es css
Qué es cssQué es css
Qué es css
 
Estilos cascadas
Estilos cascadasEstilos cascadas
Estilos cascadas
 
Css Introducción
Css IntroducciónCss Introducción
Css Introducción
 
1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)
 

Ähnlich wie Css (20)

Gordo
GordoGordo
Gordo
 
programacion
programacionprogramacion
programacion
 
Presentación de css
Presentación de cssPresentación de css
Presentación de css
 
Presentación de css
Presentación de cssPresentación de css
Presentación de css
 
Diseño web con css
Diseño web con cssDiseño web con css
Diseño web con css
 
Hojas de estilo_css
Hojas de estilo_cssHojas de estilo_css
Hojas de estilo_css
 
Organigramas John Jayro
Organigramas John JayroOrganigramas John Jayro
Organigramas John Jayro
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
Dhtml
DhtmlDhtml
Dhtml
 
Esilo css
Esilo cssEsilo css
Esilo css
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
 
Diseño de Paginas Web modelo de caja y contenedores caja
Diseño de Paginas Web modelo de caja y contenedores cajaDiseño de Paginas Web modelo de caja y contenedores caja
Diseño de Paginas Web modelo de caja y contenedores caja
 
Conceptos básicos HTML
Conceptos básicos HTMLConceptos básicos HTML
Conceptos básicos HTML
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Semana 3 Introduccion CSS
Semana 3   Introduccion CSSSemana 3   Introduccion CSS
Semana 3 Introduccion CSS
 

Kürzlich hochgeladen

Cabeza ósea - Anatomía Veterinaria - UNRC
Cabeza ósea - Anatomía Veterinaria - UNRCCabeza ósea - Anatomía Veterinaria - UNRC
Cabeza ósea - Anatomía Veterinaria - UNRCspeckledpelt
 
Mapa-conceptual-de-la-Seguridad-y-Salud-en-el-Trabajo-3.pptx
Mapa-conceptual-de-la-Seguridad-y-Salud-en-el-Trabajo-3.pptxMapa-conceptual-de-la-Seguridad-y-Salud-en-el-Trabajo-3.pptx
Mapa-conceptual-de-la-Seguridad-y-Salud-en-el-Trabajo-3.pptxangietatianasanchezc
 
1890 –7 de junio - Henry Marmaduke Harris obtuvo una patente británica (Nº 88...
1890 –7 de junio - Henry Marmaduke Harris obtuvo una patente británica (Nº 88...1890 –7 de junio - Henry Marmaduke Harris obtuvo una patente británica (Nº 88...
1890 –7 de junio - Henry Marmaduke Harris obtuvo una patente británica (Nº 88...Champs Elysee Roldan
 
Gribbin, John. - Historia de la ciencia, 1543-2001 [EPL-FS] [2019].pdf
Gribbin, John. - Historia de la ciencia, 1543-2001 [EPL-FS] [2019].pdfGribbin, John. - Historia de la ciencia, 1543-2001 [EPL-FS] [2019].pdf
Gribbin, John. - Historia de la ciencia, 1543-2001 [EPL-FS] [2019].pdffrank0071
 
Ensayo ENRICH (sesión clínica, Servicio de Neurología HUCA)
Ensayo ENRICH (sesión clínica, Servicio de Neurología HUCA)Ensayo ENRICH (sesión clínica, Servicio de Neurología HUCA)
Ensayo ENRICH (sesión clínica, Servicio de Neurología HUCA)s.calleja
 
Matemáticas Aplicadas usando Python
Matemáticas Aplicadas   usando    PythonMatemáticas Aplicadas   usando    Python
Matemáticas Aplicadas usando PythonErnesto Crespo
 
Fresas y sistemas de pulido en odontología
Fresas y sistemas de pulido en odontologíaFresas y sistemas de pulido en odontología
Fresas y sistemas de pulido en odontologíaDanyAguayo1
 
TEST BETA III: APLICACIÓN E INTERPRETACIÓN.pptx
TEST BETA III: APLICACIÓN E INTERPRETACIÓN.pptxTEST BETA III: APLICACIÓN E INTERPRETACIÓN.pptx
TEST BETA III: APLICACIÓN E INTERPRETACIÓN.pptxXavierCrdenasGarca
 
Mapa Conceptual Modelos de Comunicación .pdf
Mapa Conceptual Modelos de Comunicación .pdfMapa Conceptual Modelos de Comunicación .pdf
Mapa Conceptual Modelos de Comunicación .pdfoliverjverde
 
Diario experiencias Quehacer Científico y tecnológico vf.docx
Diario experiencias Quehacer Científico y tecnológico vf.docxDiario experiencias Quehacer Científico y tecnológico vf.docx
Diario experiencias Quehacer Científico y tecnológico vf.docxJulieta624646
 
cgm medicina interna clinica delgado.pdf
cgm medicina interna clinica delgado.pdfcgm medicina interna clinica delgado.pdf
cgm medicina interna clinica delgado.pdfSergioSanto4
 
Terapia Cognitivo Conductual CAPITULO 2.
Terapia Cognitivo Conductual CAPITULO 2.Terapia Cognitivo Conductual CAPITULO 2.
Terapia Cognitivo Conductual CAPITULO 2.ChiquinquirMilagroTo
 
inspeccion del pescado.pdfMedicinaveteri
inspeccion del pescado.pdfMedicinaveteriinspeccion del pescado.pdfMedicinaveteri
inspeccion del pescado.pdfMedicinaveteriManrriquezLujanYasbe
 
Perfiles NEUROPSI Atención y Memoria 6 a 85 Años (AyM).pdf
Perfiles NEUROPSI Atención y Memoria 6 a 85 Años (AyM).pdfPerfiles NEUROPSI Atención y Memoria 6 a 85 Años (AyM).pdf
Perfiles NEUROPSI Atención y Memoria 6 a 85 Años (AyM).pdfPieroalex1
 
Un repaso de los ensayos recientes de historia de la ciencia y la tecnología ...
Un repaso de los ensayos recientes de historia de la ciencia y la tecnología ...Un repaso de los ensayos recientes de historia de la ciencia y la tecnología ...
Un repaso de los ensayos recientes de historia de la ciencia y la tecnología ...Juan Carlos Fonseca Mata
 
Harris, Marvin. - Caníbales y reyes. Los orígenes de la cultura [ocr] [1986].pdf
Harris, Marvin. - Caníbales y reyes. Los orígenes de la cultura [ocr] [1986].pdfHarris, Marvin. - Caníbales y reyes. Los orígenes de la cultura [ocr] [1986].pdf
Harris, Marvin. - Caníbales y reyes. Los orígenes de la cultura [ocr] [1986].pdffrank0071
 
PARES CRANEALES. ORIGEN REAL Y APARENTE, TRAYECTO E INERVACIÓN. CLASIFICACIÓN...
PARES CRANEALES. ORIGEN REAL Y APARENTE, TRAYECTO E INERVACIÓN. CLASIFICACIÓN...PARES CRANEALES. ORIGEN REAL Y APARENTE, TRAYECTO E INERVACIÓN. CLASIFICACIÓN...
PARES CRANEALES. ORIGEN REAL Y APARENTE, TRAYECTO E INERVACIÓN. CLASIFICACIÓN...ocanajuanpablo0
 
el amor en los tiempos del colera (resumen).pptx
el amor en los tiempos del colera (resumen).pptxel amor en los tiempos del colera (resumen).pptx
el amor en los tiempos del colera (resumen).pptxhectoralvarado79
 
Hobson, John A. - Estudio del imperialismo [ocr] [1902] [1981].pdf
Hobson, John A. - Estudio del imperialismo [ocr] [1902] [1981].pdfHobson, John A. - Estudio del imperialismo [ocr] [1902] [1981].pdf
Hobson, John A. - Estudio del imperialismo [ocr] [1902] [1981].pdffrank0071
 

Kürzlich hochgeladen (20)

Cabeza ósea - Anatomía Veterinaria - UNRC
Cabeza ósea - Anatomía Veterinaria - UNRCCabeza ósea - Anatomía Veterinaria - UNRC
Cabeza ósea - Anatomía Veterinaria - UNRC
 
Mapa-conceptual-de-la-Seguridad-y-Salud-en-el-Trabajo-3.pptx
Mapa-conceptual-de-la-Seguridad-y-Salud-en-el-Trabajo-3.pptxMapa-conceptual-de-la-Seguridad-y-Salud-en-el-Trabajo-3.pptx
Mapa-conceptual-de-la-Seguridad-y-Salud-en-el-Trabajo-3.pptx
 
1890 –7 de junio - Henry Marmaduke Harris obtuvo una patente británica (Nº 88...
1890 –7 de junio - Henry Marmaduke Harris obtuvo una patente británica (Nº 88...1890 –7 de junio - Henry Marmaduke Harris obtuvo una patente británica (Nº 88...
1890 –7 de junio - Henry Marmaduke Harris obtuvo una patente británica (Nº 88...
 
Gribbin, John. - Historia de la ciencia, 1543-2001 [EPL-FS] [2019].pdf
Gribbin, John. - Historia de la ciencia, 1543-2001 [EPL-FS] [2019].pdfGribbin, John. - Historia de la ciencia, 1543-2001 [EPL-FS] [2019].pdf
Gribbin, John. - Historia de la ciencia, 1543-2001 [EPL-FS] [2019].pdf
 
Ensayo ENRICH (sesión clínica, Servicio de Neurología HUCA)
Ensayo ENRICH (sesión clínica, Servicio de Neurología HUCA)Ensayo ENRICH (sesión clínica, Servicio de Neurología HUCA)
Ensayo ENRICH (sesión clínica, Servicio de Neurología HUCA)
 
Matemáticas Aplicadas usando Python
Matemáticas Aplicadas   usando    PythonMatemáticas Aplicadas   usando    Python
Matemáticas Aplicadas usando Python
 
Fresas y sistemas de pulido en odontología
Fresas y sistemas de pulido en odontologíaFresas y sistemas de pulido en odontología
Fresas y sistemas de pulido en odontología
 
TEST BETA III: APLICACIÓN E INTERPRETACIÓN.pptx
TEST BETA III: APLICACIÓN E INTERPRETACIÓN.pptxTEST BETA III: APLICACIÓN E INTERPRETACIÓN.pptx
TEST BETA III: APLICACIÓN E INTERPRETACIÓN.pptx
 
Mapa Conceptual Modelos de Comunicación .pdf
Mapa Conceptual Modelos de Comunicación .pdfMapa Conceptual Modelos de Comunicación .pdf
Mapa Conceptual Modelos de Comunicación .pdf
 
Diario experiencias Quehacer Científico y tecnológico vf.docx
Diario experiencias Quehacer Científico y tecnológico vf.docxDiario experiencias Quehacer Científico y tecnológico vf.docx
Diario experiencias Quehacer Científico y tecnológico vf.docx
 
cgm medicina interna clinica delgado.pdf
cgm medicina interna clinica delgado.pdfcgm medicina interna clinica delgado.pdf
cgm medicina interna clinica delgado.pdf
 
La biodiversidad de Guanajuato (resumen)
La biodiversidad de Guanajuato (resumen)La biodiversidad de Guanajuato (resumen)
La biodiversidad de Guanajuato (resumen)
 
Terapia Cognitivo Conductual CAPITULO 2.
Terapia Cognitivo Conductual CAPITULO 2.Terapia Cognitivo Conductual CAPITULO 2.
Terapia Cognitivo Conductual CAPITULO 2.
 
inspeccion del pescado.pdfMedicinaveteri
inspeccion del pescado.pdfMedicinaveteriinspeccion del pescado.pdfMedicinaveteri
inspeccion del pescado.pdfMedicinaveteri
 
Perfiles NEUROPSI Atención y Memoria 6 a 85 Años (AyM).pdf
Perfiles NEUROPSI Atención y Memoria 6 a 85 Años (AyM).pdfPerfiles NEUROPSI Atención y Memoria 6 a 85 Años (AyM).pdf
Perfiles NEUROPSI Atención y Memoria 6 a 85 Años (AyM).pdf
 
Un repaso de los ensayos recientes de historia de la ciencia y la tecnología ...
Un repaso de los ensayos recientes de historia de la ciencia y la tecnología ...Un repaso de los ensayos recientes de historia de la ciencia y la tecnología ...
Un repaso de los ensayos recientes de historia de la ciencia y la tecnología ...
 
Harris, Marvin. - Caníbales y reyes. Los orígenes de la cultura [ocr] [1986].pdf
Harris, Marvin. - Caníbales y reyes. Los orígenes de la cultura [ocr] [1986].pdfHarris, Marvin. - Caníbales y reyes. Los orígenes de la cultura [ocr] [1986].pdf
Harris, Marvin. - Caníbales y reyes. Los orígenes de la cultura [ocr] [1986].pdf
 
PARES CRANEALES. ORIGEN REAL Y APARENTE, TRAYECTO E INERVACIÓN. CLASIFICACIÓN...
PARES CRANEALES. ORIGEN REAL Y APARENTE, TRAYECTO E INERVACIÓN. CLASIFICACIÓN...PARES CRANEALES. ORIGEN REAL Y APARENTE, TRAYECTO E INERVACIÓN. CLASIFICACIÓN...
PARES CRANEALES. ORIGEN REAL Y APARENTE, TRAYECTO E INERVACIÓN. CLASIFICACIÓN...
 
el amor en los tiempos del colera (resumen).pptx
el amor en los tiempos del colera (resumen).pptxel amor en los tiempos del colera (resumen).pptx
el amor en los tiempos del colera (resumen).pptx
 
Hobson, John A. - Estudio del imperialismo [ocr] [1902] [1981].pdf
Hobson, John A. - Estudio del imperialismo [ocr] [1902] [1981].pdfHobson, John A. - Estudio del imperialismo [ocr] [1902] [1981].pdf
Hobson, John A. - Estudio del imperialismo [ocr] [1902] [1981].pdf
 

Css