SlideShare una empresa de Scribd logo
LUIS CORREA
  3RO «BI»
Las Hojas de Estilo en Cascada se escriben dentro del código HTML
de la página web, solo en casos avanzados se pueden escribir en un
archivo a parte y enlazar la página con ese archivo. En un principio
vamos a utilizar la manera más directa de aplicar estilos a los
elementos de la página, mas adelante veremos la declaración en
archivos externos. Para ello, y esto es la primera lección de este
artículo, vamos a conocer un nuevo atributo que se puede utilizar en
casi todas las etiquetas HTML: style.
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.

No todas las versiones de los navegadores las soportan. Si consideramos
los dos principales Netscape es capaz de utilizarlas desde la versión 4.0 y
Explorer desde la 3.0
¿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.



También debemos de tener en cuenta que se establece un orden de
prioridad para la aplicación de las normas en caso de que resulten
contradictorias. El orden de preferencia para aplicar una norma es el
siguiente:

- 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
Vinculación a una hoja de estilo externa

Para crear un vínculo a una hoja de estilo externa, insertamos una
etiqueta <link> como en el ejemplo siguiente:

<head>
   <title>Hoja de estilo vinculada</title>
   <link href="estilo.css" rel="stylesheet" type="text/css">
</head>

               Pseudo clases


a:link
a:visited
a:hover
a:active

Como hemos visto, podemos combinar estos selectores y clases. Así tenemos
la posibilidad de crear múltiples estilos, por ejemplo para un enlace:

a.principal:link
a.pie:link
Reglas, declaraciones, propiedades


body {

         font-family: Arial, sans-serif;
         color: blue;

     }

Una hoja de estilo contiene al menos una regla y puede contener tantas como
necesites.

                  Grupo de selectores


h1, h2, h3 {font-family: Arial, sans-serfi;}
Selectores ID




Son similares a los selectores de clase. Se diferencia en la semántica y en el
comportamiento.

Sintaxis:

#cabecera

<div id="cabecera">Contenido de cabecera</div>


Esto no sería correcto:

#barra

<div id="barra">Bienvenidos</div>
<div id="barra">Esto es una prueba de diseño web </div>
BIBLIOGRAFÍA
•   http://www.chesco.info/curso/css.htm

Más contenido relacionado

La actualidad más candente

Capítulo 2 css
Capítulo 2 cssCapítulo 2 css
Capítulo 2 css
Arturo Cruz
 
Maquetacion
MaquetacionMaquetacion
Maquetacion
iConstruye
 
Paginas web css
Paginas web cssPaginas web css
Paginas web css
axel lopez
 
Css
CssCss
Estilos cascadas
Estilos cascadasEstilos cascadas
Estilos cascadas
Mabeciita Ayala
 
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?
Juan Pernia (juanrules)
 
Tags en html
Tags en htmlTags en html
web css
 web css web css
web css
Libnimerab
 
SINTAXIS DE UNA PAGINA WEB CSS
SINTAXIS DE UNA PAGINA WEB CSSSINTAXIS DE UNA PAGINA WEB CSS
SINTAXIS DE UNA PAGINA WEB CSS
Libnimerab
 
Tutor javawebparte2
Tutor javawebparte2Tutor javawebparte2
Tutor javawebparte2
MiguelDz Diaz
 
Que es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSSQue es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSS
josuew2013
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
iConstruye
 
Css básico
Css básicoCss básico
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
Diseñática disenatica.com
 
Css
CssCss
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
juan flores méndez
 
Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)
Juan Rodríguez
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
Krolina Agui
 

La actualidad más candente (18)

Capítulo 2 css
Capítulo 2 cssCapítulo 2 css
Capítulo 2 css
 
Maquetacion
MaquetacionMaquetacion
Maquetacion
 
Paginas web css
Paginas web cssPaginas web css
Paginas web css
 
Css
CssCss
Css
 
Estilos cascadas
Estilos cascadasEstilos cascadas
Estilos cascadas
 
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?
 
Tags en html
Tags en htmlTags en html
Tags en html
 
web css
 web css web css
web css
 
SINTAXIS DE UNA PAGINA WEB CSS
SINTAXIS DE UNA PAGINA WEB CSSSINTAXIS DE UNA PAGINA WEB CSS
SINTAXIS DE UNA PAGINA WEB CSS
 
Tutor javawebparte2
Tutor javawebparte2Tutor javawebparte2
Tutor javawebparte2
 
Que es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSSQue es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSS
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Css básico
Css básicoCss básico
Css básico
 
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
 
Css
CssCss
Css
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
 
Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
 

Destacado

Introduccion xhtml
Introduccion xhtmlIntroduccion xhtml
Introduccion xhtml
nomarlo
 
Instructivo moodle cursos virtuales
Instructivo moodle cursos virtualesInstructivo moodle cursos virtuales
Instructivo moodle cursos virtuales
lebv
 
Manual Del Taller Wordpress
Manual Del Taller WordpressManual Del Taller Wordpress
Manual Del Taller Wordpress
Juan Antonio Barrera Gómez
 
Voip2Day 2008 - Asterisk en Entornos Corporativos
Voip2Day 2008 - Asterisk en Entornos CorporativosVoip2Day 2008 - Asterisk en Entornos Corporativos
Voip2Day 2008 - Asterisk en Entornos Corporativos
EuropeSIP Communications SL
 
4 q12 arezzo_apresentacao_call eng
4 q12 arezzo_apresentacao_call eng4 q12 arezzo_apresentacao_call eng
4 q12 arezzo_apresentacao_call eng
Arezzori
 
105254466 soalan-t2b1
105254466 soalan-t2b1105254466 soalan-t2b1
105254466 soalan-t2b1sukizasukiza
 
2.ganiyu rafiu adesina 14 21
2.ganiyu rafiu adesina 14 212.ganiyu rafiu adesina 14 21
2.ganiyu rafiu adesina 14 21
Alexander Decker
 
Cap 3 español
Cap 3 españolCap 3 español
Cap 3 españolyexia
 
Manual Administrativo IMES
Manual Administrativo IMESManual Administrativo IMES
Manual Administrativo IMES
imes2011
 
Sesion 9
Sesion 9Sesion 9
Sesion 9
stv1214
 
Etiquetas de formularios
Etiquetas de formulariosEtiquetas de formularios
Etiquetas de formularios
Ing. Efrain Ricardo Forero Mendoza
 
200405 - Aplicaciones Web
200405 - Aplicaciones Web200405 - Aplicaciones Web
200405 - Aplicaciones Web
Javier Gonzalez-Sanchez
 
orientação e técnica para o uso da fotografia como instrumento de pesquisa em...
orientação e técnica para o uso da fotografia como instrumento de pesquisa em...orientação e técnica para o uso da fotografia como instrumento de pesquisa em...
orientação e técnica para o uso da fotografia como instrumento de pesquisa em...
Carlos Recuero
 
Grupo 4 e-learning
Grupo 4   e-learningGrupo 4   e-learning
Grupo 4 e-learning
Silvina Castro
 
Grupo Inditex
Grupo InditexGrupo Inditex
Grupo Inditex
fenomenozara
 
Trabajo de ntics_unidad_3
Trabajo de ntics_unidad_3Trabajo de ntics_unidad_3
Trabajo de ntics_unidad_3
tererobalino2012
 
ww.nic.cl
ww.nic.clww.nic.cl
ww.nic.cl
grupo13
 
Ф.И. Тютчев
Ф.И. ТютчевФ.И. Тютчев
Ф.И. Тютчев
LestovkinaO
 
La revolución de las redes sociales
La revolución de las redes socialesLa revolución de las redes sociales
La revolución de las redes sociales
Ministerio de Educacion
 

Destacado (20)

Introduccion xhtml
Introduccion xhtmlIntroduccion xhtml
Introduccion xhtml
 
Instructivo moodle cursos virtuales
Instructivo moodle cursos virtualesInstructivo moodle cursos virtuales
Instructivo moodle cursos virtuales
 
Manual Del Taller Wordpress
Manual Del Taller WordpressManual Del Taller Wordpress
Manual Del Taller Wordpress
 
Voip2Day 2008 - Asterisk en Entornos Corporativos
Voip2Day 2008 - Asterisk en Entornos CorporativosVoip2Day 2008 - Asterisk en Entornos Corporativos
Voip2Day 2008 - Asterisk en Entornos Corporativos
 
Manifiesto Foro de Emprendedores de ADEGI
Manifiesto Foro de Emprendedores de ADEGIManifiesto Foro de Emprendedores de ADEGI
Manifiesto Foro de Emprendedores de ADEGI
 
4 q12 arezzo_apresentacao_call eng
4 q12 arezzo_apresentacao_call eng4 q12 arezzo_apresentacao_call eng
4 q12 arezzo_apresentacao_call eng
 
105254466 soalan-t2b1
105254466 soalan-t2b1105254466 soalan-t2b1
105254466 soalan-t2b1
 
2.ganiyu rafiu adesina 14 21
2.ganiyu rafiu adesina 14 212.ganiyu rafiu adesina 14 21
2.ganiyu rafiu adesina 14 21
 
Cap 3 español
Cap 3 españolCap 3 español
Cap 3 español
 
Manual Administrativo IMES
Manual Administrativo IMESManual Administrativo IMES
Manual Administrativo IMES
 
Sesion 9
Sesion 9Sesion 9
Sesion 9
 
Etiquetas de formularios
Etiquetas de formulariosEtiquetas de formularios
Etiquetas de formularios
 
200405 - Aplicaciones Web
200405 - Aplicaciones Web200405 - Aplicaciones Web
200405 - Aplicaciones Web
 
orientação e técnica para o uso da fotografia como instrumento de pesquisa em...
orientação e técnica para o uso da fotografia como instrumento de pesquisa em...orientação e técnica para o uso da fotografia como instrumento de pesquisa em...
orientação e técnica para o uso da fotografia como instrumento de pesquisa em...
 
Grupo 4 e-learning
Grupo 4   e-learningGrupo 4   e-learning
Grupo 4 e-learning
 
Grupo Inditex
Grupo InditexGrupo Inditex
Grupo Inditex
 
Trabajo de ntics_unidad_3
Trabajo de ntics_unidad_3Trabajo de ntics_unidad_3
Trabajo de ntics_unidad_3
 
ww.nic.cl
ww.nic.clww.nic.cl
ww.nic.cl
 
Ф.И. Тютчев
Ф.И. ТютчевФ.И. Тютчев
Ф.И. Тютчев
 
La revolución de las redes sociales
La revolución de las redes socialesLa revolución de las redes sociales
La revolución de las redes sociales
 

Similar a Presentación de css

manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
YolitaGaona
 
Manual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSSManual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSS
ssuseraf13d4
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
NostromoMX
 
Esilo css
Esilo cssEsilo css
Esilo css
lgarcias
 
Guia de css para principiantes
Guia de css para principiantesGuia de css para principiantes
Guia de css para principiantes
Pedro Antonio Villalta (Pavillalta)
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
Juan Carlos Medrano
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
Caro Duran
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
Caro Duran
 
Gordo
GordoGordo
programacion
programacionprogramacion
programacion
Gordo Villa
 
TUTORIAL CSS
TUTORIAL  CSSTUTORIAL  CSS
TUTORIAL CSS
Hairol Lucas G.
 
Tutorial css
Tutorial cssTutorial css
Tutorial css
Pablo Pereira
 
Css
CssCss
Curso CSS Avanzado
Curso CSS AvanzadoCurso CSS Avanzado
Curso CSS Avanzado
Irontec
 
Css1
Css1Css1
Css1
Css1Css1
Introducción a CSS3
Introducción a CSS3Introducción a CSS3
Introducción a CSS3
Mayra Zurita
 
Lenguaje HTML y CSS
Lenguaje HTML y CSSLenguaje HTML y CSS
Lenguaje HTML y CSS
Gemardrgz
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?
nereasanchezz
 
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
andreajose13
 

Similar a Presentación de css (20)

manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
 
Manual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSSManual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSS
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
 
Esilo css
Esilo cssEsilo css
Esilo css
 
Guia de css para principiantes
Guia de css para principiantesGuia de css para principiantes
Guia de css para principiantes
 
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
 
Gordo
GordoGordo
Gordo
 
programacion
programacionprogramacion
programacion
 
TUTORIAL CSS
TUTORIAL  CSSTUTORIAL  CSS
TUTORIAL CSS
 
Tutorial css
Tutorial cssTutorial css
Tutorial css
 
Css
CssCss
Css
 
Curso CSS Avanzado
Curso CSS AvanzadoCurso CSS Avanzado
Curso CSS Avanzado
 
Css1
Css1Css1
Css1
 
Css1
Css1Css1
Css1
 
Introducción a CSS3
Introducción a CSS3Introducción a CSS3
Introducción a CSS3
 
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?
 
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
 

Más de Luis Correa

Portafolio ntics LUIS CORREA
Portafolio ntics LUIS CORREAPortafolio ntics LUIS CORREA
Portafolio ntics LUIS CORREA
Luis Correa
 
Mi primer documento compartido
Mi primer documento compartidoMi primer documento compartido
Mi primer documento compartido
Luis Correa
 
ANALISIS DE LA OBRA LITERARIA "LA METAMORFOSIS"
ANALISIS DE LA OBRA LITERARIA "LA METAMORFOSIS"ANALISIS DE LA OBRA LITERARIA "LA METAMORFOSIS"
ANALISIS DE LA OBRA LITERARIA "LA METAMORFOSIS"
Luis Correa
 
LA DEVASTACIÓN DE LA CIUDAD DE ORÁN A PARTIR DE LA ENFERMEDAD
 LA DEVASTACIÓN DE LA CIUDAD DE ORÁN A PARTIR DE LA ENFERMEDAD LA DEVASTACIÓN DE LA CIUDAD DE ORÁN A PARTIR DE LA ENFERMEDAD
LA DEVASTACIÓN DE LA CIUDAD DE ORÁN A PARTIR DE LA ENFERMEDAD
Luis Correa
 
PROYECTO DE AULA: ADITIVO QUÍMICO OBTENIDO DE SALES CUATERNARIAS EMPLEADO PAR...
PROYECTO DE AULA: ADITIVO QUÍMICO OBTENIDO DE SALES CUATERNARIAS EMPLEADO PAR...PROYECTO DE AULA: ADITIVO QUÍMICO OBTENIDO DE SALES CUATERNARIAS EMPLEADO PAR...
PROYECTO DE AULA: ADITIVO QUÍMICO OBTENIDO DE SALES CUATERNARIAS EMPLEADO PAR...
Luis Correa
 
PORTAFOLIO INTRODUCCIÓN A LA COMUNICACIÓN CIENTÍFICA
PORTAFOLIO INTRODUCCIÓN A LA COMUNICACIÓN CIENTÍFICAPORTAFOLIO INTRODUCCIÓN A LA COMUNICACIÓN CIENTÍFICA
PORTAFOLIO INTRODUCCIÓN A LA COMUNICACIÓN CIENTÍFICA
Luis Correa
 
Presentación de css
Presentación de cssPresentación de css
Presentación de css
Luis Correa
 
Index
IndexIndex
Aplicación de etiquetas html
Aplicación de etiquetas htmlAplicación de etiquetas html
Aplicación de etiquetas html
Luis Correa
 
Musica e imagenes con derecho de reproducción libre y creative commons
Musica e imagenes con derecho de reproducción libre y creative commonsMusica e imagenes con derecho de reproducción libre y creative commons
Musica e imagenes con derecho de reproducción libre y creative commons
Luis Correa
 

Más de Luis Correa (10)

Portafolio ntics LUIS CORREA
Portafolio ntics LUIS CORREAPortafolio ntics LUIS CORREA
Portafolio ntics LUIS CORREA
 
Mi primer documento compartido
Mi primer documento compartidoMi primer documento compartido
Mi primer documento compartido
 
ANALISIS DE LA OBRA LITERARIA "LA METAMORFOSIS"
ANALISIS DE LA OBRA LITERARIA "LA METAMORFOSIS"ANALISIS DE LA OBRA LITERARIA "LA METAMORFOSIS"
ANALISIS DE LA OBRA LITERARIA "LA METAMORFOSIS"
 
LA DEVASTACIÓN DE LA CIUDAD DE ORÁN A PARTIR DE LA ENFERMEDAD
 LA DEVASTACIÓN DE LA CIUDAD DE ORÁN A PARTIR DE LA ENFERMEDAD LA DEVASTACIÓN DE LA CIUDAD DE ORÁN A PARTIR DE LA ENFERMEDAD
LA DEVASTACIÓN DE LA CIUDAD DE ORÁN A PARTIR DE LA ENFERMEDAD
 
PROYECTO DE AULA: ADITIVO QUÍMICO OBTENIDO DE SALES CUATERNARIAS EMPLEADO PAR...
PROYECTO DE AULA: ADITIVO QUÍMICO OBTENIDO DE SALES CUATERNARIAS EMPLEADO PAR...PROYECTO DE AULA: ADITIVO QUÍMICO OBTENIDO DE SALES CUATERNARIAS EMPLEADO PAR...
PROYECTO DE AULA: ADITIVO QUÍMICO OBTENIDO DE SALES CUATERNARIAS EMPLEADO PAR...
 
PORTAFOLIO INTRODUCCIÓN A LA COMUNICACIÓN CIENTÍFICA
PORTAFOLIO INTRODUCCIÓN A LA COMUNICACIÓN CIENTÍFICAPORTAFOLIO INTRODUCCIÓN A LA COMUNICACIÓN CIENTÍFICA
PORTAFOLIO INTRODUCCIÓN A LA COMUNICACIÓN CIENTÍFICA
 
Presentación de css
Presentación de cssPresentación de css
Presentación de css
 
Index
IndexIndex
Index
 
Aplicación de etiquetas html
Aplicación de etiquetas htmlAplicación de etiquetas html
Aplicación de etiquetas html
 
Musica e imagenes con derecho de reproducción libre y creative commons
Musica e imagenes con derecho de reproducción libre y creative commonsMusica e imagenes con derecho de reproducción libre y creative commons
Musica e imagenes con derecho de reproducción libre y creative commons
 

Último

Manual Web soporte y mantenimiento de equipo de computo
Manual Web soporte y mantenimiento de equipo de computoManual Web soporte y mantenimiento de equipo de computo
Manual Web soporte y mantenimiento de equipo de computo
mantenimientocarbra6
 
Gabinete, puertos y dispositivos que se conectan al case
Gabinete,  puertos y  dispositivos que se conectan al caseGabinete,  puertos y  dispositivos que se conectan al case
Gabinete, puertos y dispositivos que se conectan al case
JuanaNT7
 
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfqedublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
larapalaciosmonzon28
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
JimmyTejadaSalizar
 
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdfProjecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Festibity
 
Informació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdfInformació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdf
Festibity
 
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
bendezuperezjimena
 
Informe DATA & IA 2024 Primera encuesta sobre el uso de IA en las empresas pe...
Informe DATA & IA 2024 Primera encuesta sobre el uso de IA en las empresas pe...Informe DATA & IA 2024 Primera encuesta sobre el uso de IA en las empresas pe...
Informe DATA & IA 2024 Primera encuesta sobre el uso de IA en las empresas pe...
alejandromanuelve
 
IA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticulturaIA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticultura
Miguel Rebollo
 
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor OficialCatalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
AMADO SALVADOR
 
Informació Projecte Iniciativa TIC SOPRA STERIA.pdf
Informació Projecte Iniciativa TIC SOPRA STERIA.pdfInformació Projecte Iniciativa TIC SOPRA STERIA.pdf
Informació Projecte Iniciativa TIC SOPRA STERIA.pdf
Festibity
 
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
CesarPazosQuispe
 
Catalogo general Ariston Amado Salvador distribuidor oficial Valencia
Catalogo general Ariston Amado Salvador distribuidor oficial ValenciaCatalogo general Ariston Amado Salvador distribuidor oficial Valencia
Catalogo general Ariston Amado Salvador distribuidor oficial Valencia
AMADO SALVADOR
 
herramientas de sitio web 3.0 2024
herramientas de sitio web 3.0  2024herramientas de sitio web 3.0  2024
herramientas de sitio web 3.0 2024
julio05042006
 
computacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADOcomputacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADO
YaniEscobar2
 
mantenimiento de chasis y carroceria1.pptx
mantenimiento de chasis y carroceria1.pptxmantenimiento de chasis y carroceria1.pptx
mantenimiento de chasis y carroceria1.pptx
MiguelAtencio10
 
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial ValenciaCatalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
AMADO SALVADOR
 
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVATECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
LilibethEstupian
 
Presentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The CleanPresentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The Clean
juanchogame18
 
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
AMADO SALVADOR
 

Último (20)

Manual Web soporte y mantenimiento de equipo de computo
Manual Web soporte y mantenimiento de equipo de computoManual Web soporte y mantenimiento de equipo de computo
Manual Web soporte y mantenimiento de equipo de computo
 
Gabinete, puertos y dispositivos que se conectan al case
Gabinete,  puertos y  dispositivos que se conectan al caseGabinete,  puertos y  dispositivos que se conectan al case
Gabinete, puertos y dispositivos que se conectan al case
 
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfqedublogs info.docx asdasfasfsawqrdqwfqwfqwfq
edublogs info.docx asdasfasfsawqrdqwfqwfqwfq
 
maestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdfmaestria-motores-combustion-interna-alternativos (1).pdf
maestria-motores-combustion-interna-alternativos (1).pdf
 
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdfProjecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
Projecte Iniciativa TIC 2024 KAWARU CONSULTING. inCV.pdf
 
Informació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdfInformació Projecte Iniciativa TIC HPE.pdf
Informació Projecte Iniciativa TIC HPE.pdf
 
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
TODO SOBRE LA INFORMÁTICA, HISTORIA, ¿QUE ES?, IMPORTANCIA Y CARACTERISTICAS....
 
Informe DATA & IA 2024 Primera encuesta sobre el uso de IA en las empresas pe...
Informe DATA & IA 2024 Primera encuesta sobre el uso de IA en las empresas pe...Informe DATA & IA 2024 Primera encuesta sobre el uso de IA en las empresas pe...
Informe DATA & IA 2024 Primera encuesta sobre el uso de IA en las empresas pe...
 
IA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticulturaIA en entornos rurales aplicada a la viticultura
IA en entornos rurales aplicada a la viticultura
 
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor OficialCatalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
Catalogo Cajas Fuertes BTV Amado Salvador Distribuidor Oficial
 
Informació Projecte Iniciativa TIC SOPRA STERIA.pdf
Informació Projecte Iniciativa TIC SOPRA STERIA.pdfInformació Projecte Iniciativa TIC SOPRA STERIA.pdf
Informació Projecte Iniciativa TIC SOPRA STERIA.pdf
 
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
Semana 10_MATRIZ IPER_UPN_ADM_03.06.2024
 
Catalogo general Ariston Amado Salvador distribuidor oficial Valencia
Catalogo general Ariston Amado Salvador distribuidor oficial ValenciaCatalogo general Ariston Amado Salvador distribuidor oficial Valencia
Catalogo general Ariston Amado Salvador distribuidor oficial Valencia
 
herramientas de sitio web 3.0 2024
herramientas de sitio web 3.0  2024herramientas de sitio web 3.0  2024
herramientas de sitio web 3.0 2024
 
computacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADOcomputacion global 3.pdf pARA TERCER GRADO
computacion global 3.pdf pARA TERCER GRADO
 
mantenimiento de chasis y carroceria1.pptx
mantenimiento de chasis y carroceria1.pptxmantenimiento de chasis y carroceria1.pptx
mantenimiento de chasis y carroceria1.pptx
 
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial ValenciaCatalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
Catalogo Buzones BTV Amado Salvador Distribuidor Oficial Valencia
 
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVATECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
TECLADO ERGONÓMICO Y PANTALLAS TACTILES - GESTIÓN INTEGRAL EDUCATIVA
 
Presentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The CleanPresentacion de Estado del Arte del The Clean
Presentacion de Estado del Arte del The Clean
 
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
Catalogo General Electrodomesticos Teka Distribuidor Oficial Amado Salvador V...
 

Presentación de css

  • 1. LUIS CORREA 3RO «BI»
  • 2. Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web, solo en casos avanzados se pueden escribir en un archivo a parte y enlazar la página con ese archivo. En un principio vamos a utilizar la manera más directa de aplicar estilos a los elementos de la página, mas adelante veremos la declaración en archivos externos. Para ello, y esto es la primera lección de este artículo, vamos a conocer un nuevo atributo que se puede utilizar en casi todas las etiquetas HTML: style.
  • 3. 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. No todas las versiones de los navegadores las soportan. Si consideramos los dos principales Netscape es capaz de utilizarlas desde la versión 4.0 y Explorer desde la 3.0
  • 4. ¿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.
  • 5. ¿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. También debemos de tener en cuenta que se establece un orden de prioridad para la aplicación de las normas en caso de que resulten contradictorias. El orden de preferencia para aplicar una norma es el siguiente: - 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.
  • 7. Vinculación a una hoja de estilo externa Para crear un vínculo a una hoja de estilo externa, insertamos una etiqueta <link> como en el ejemplo siguiente: <head> <title>Hoja de estilo vinculada</title> <link href="estilo.css" rel="stylesheet" type="text/css"> </head> Pseudo clases a:link a:visited a:hover a:active Como hemos visto, podemos combinar estos selectores y clases. Así tenemos la posibilidad de crear múltiples estilos, por ejemplo para un enlace: a.principal:link a.pie:link
  • 8. Reglas, declaraciones, propiedades body { font-family: Arial, sans-serif; color: blue; } Una hoja de estilo contiene al menos una regla y puede contener tantas como necesites. Grupo de selectores h1, h2, h3 {font-family: Arial, sans-serfi;}
  • 9. Selectores ID Son similares a los selectores de clase. Se diferencia en la semántica y en el comportamiento. Sintaxis: #cabecera <div id="cabecera">Contenido de cabecera</div> Esto no sería correcto: #barra <div id="barra">Bienvenidos</div> <div id="barra">Esto es una prueba de diseño web </div>
  • 10. BIBLIOGRAFÍA • http://www.chesco.info/curso/css.htm