SlideShare una empresa de Scribd logo
1 de 9
Hojas De Estilo CSS(Cascading Style Sheets) Mauricio Ángel López 82200811874
¿Qué es? Es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
¿Para qué sirve? CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo.
¿Cómo funciona? CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
¿Cómo funciona? 	h1 {color: red;}  	h1 es el selector 	{color: red;} es la declaración
¿Cómo funciona? El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.
Ejemplo <html>   <head>     <title>Ejemplo Hojas de estilo CSS</title> <styletype="text/css"> body { padding-left: 11em; font-family:"Times New Roman";         color: red; background-color: #d8da3d;  }       h1 { font-family: Comic Sans MS; color:green; } 	p1{ font-family: Arial; color:green;      }     </style>   </head>   <body>     <h1>Este Es un ejemplo de hojas de estilo CSS</h1> 	<p1>Hojas de estilo CSS</p1> 	<p>Hojas de estilo CSS</p>	   </body> </html>
Ejemplo
Bibliografia http://www.comocreartuweb.com/curso-de-estilo-css/css-leccion-ii-ejemploiv.html http://www.w3c.es/divulgacion/guiasbreves/hojasestilo#ejemplo

Más contenido relacionado

La actualidad más candente (19)

Presentación con dispositivas
Presentación con dispositivasPresentación con dispositivas
Presentación con dispositivas
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Las hojas de estilo (css)
Las hojas de estilo (css)Las hojas de estilo (css)
Las hojas de estilo (css)
 
Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Presentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwwwPresentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwww
 
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)
 
Investigacion 1.3 samanta
Investigacion 1.3 samantaInvestigacion 1.3 samanta
Investigacion 1.3 samanta
 
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)
 
Css
CssCss
Css
 
Presentación unidad tres
Presentación unidad tresPresentación unidad tres
Presentación unidad tres
 
Pres de po
Pres de poPres de po
Pres de po
 
Css
CssCss
Css
 
Hojas de estilo_css
Hojas de estilo_cssHojas de estilo_css
Hojas de estilo_css
 
Partes de word
Partes de wordPartes de word
Partes de word
 
Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4
 
Pestaña vista de word
Pestaña vista de wordPestaña vista de word
Pestaña vista de word
 
Documento numero 1
Documento numero 1Documento numero 1
Documento numero 1
 
Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2
 

Similar a Hojas de estilo css (20)

Estilos cascadas
Estilos cascadasEstilos cascadas
Estilos cascadas
 
Css básico
Css básicoCss básico
Css básico
 
Capítulo 2 css
Capítulo 2 cssCapítulo 2 css
Capítulo 2 css
 
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
 
C3 lenguaje de presentación.
C3 lenguaje de presentación.C3 lenguaje de presentación.
C3 lenguaje de presentación.
 
Paginas web css
Paginas web cssPaginas web css
Paginas web css
 
Introducción HTML y CSS
Introducción HTML y CSSIntroducción HTML y CSS
Introducción HTML y CSS
 
04_Estilos CSS y modelos de caja.pptx
04_Estilos CSS y modelos de caja.pptx04_Estilos CSS y modelos de caja.pptx
04_Estilos CSS y modelos de caja.pptx
 
Maquetacion
MaquetacionMaquetacion
Maquetacion
 
Html, Css y JavaScript
Html, Css y JavaScriptHtml, Css y JavaScript
Html, Css y JavaScript
 
Html
HtmlHtml
Html
 
Html y css
Html y cssHtml y css
Html y css
 
html y css
html y csshtml y css
html y css
 
Css
CssCss
Css
 
Html
HtmlHtml
Html
 
Guia de css para principiantes
Guia de css para principiantesGuia de css para principiantes
Guia de css para principiantes
 
Html
HtmlHtml
Html
 
Manual de introducción a CSS3
Manual de introducción a CSS3Manual de introducción a CSS3
Manual de introducción a CSS3
 

Hojas de estilo css

  • 1. Hojas De Estilo CSS(Cascading Style Sheets) Mauricio Ángel López 82200811874
  • 2. ¿Qué es? Es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
  • 3. ¿Para qué sirve? CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo.
  • 4. ¿Cómo funciona? CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
  • 5. ¿Cómo funciona? h1 {color: red;} h1 es el selector {color: red;} es la declaración
  • 6. ¿Cómo funciona? El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.
  • 7. Ejemplo <html> <head> <title>Ejemplo Hojas de estilo CSS</title> <styletype="text/css"> body { padding-left: 11em; font-family:"Times New Roman"; color: red; background-color: #d8da3d; } h1 { font-family: Comic Sans MS; color:green; } p1{ font-family: Arial; color:green; } </style> </head> <body> <h1>Este Es un ejemplo de hojas de estilo CSS</h1> <p1>Hojas de estilo CSS</p1> <p>Hojas de estilo CSS</p> </body> </html>