Creación de Páginas de Web M.C. Luis Zarza. CSS: Hoja de estilos en cascada Fue desarrollado por el W3 Consortium para permitir la separación entre documentos.

Presentación del tema: "Creación de Páginas de Web M.C. Luis Zarza. CSS: Hoja de estilos en cascada Fue desarrollado por el W3 Consortium para permitir la separación entre documentos."— Transcripción de la presentación:

1 Creación de Páginas de Web M.C. Luis Zarza

2 CSS: Hoja de estilos en cascada Fue desarrollado por el W3 Consortium para permitir la separación entre documentos de contenido y documentos de estilo.

3 CSS: Marca referencial Mi pagina <link rel=“…. <link rel="stylesheet" href="estilo.css" type="text/css“ media=“projection”>

4 Descriptores de medios Screen tty Projection Tv Handheld Print Braille Aural All

5 CSS: Definición interna La definición de estilos puede estar en la misma página en HTML: <!-- H1 { color: red } P { color: blue} -->

6 CSS: Ejemplo body { background: #3333aa; font-size: 10pt; color: #99ff00; font-family: verdana,arial,geneva,sans-serif } p { color: #99ff00; font-size: 12pt; font-family: Verdana,Arial,Helvetica } a { color: #ffffff } h1 { font-size: 18pt; color:#cc3333 } h2 { font-size: 14pt } h3 { font-size: 10pt } td { font-size: 10pt; color: #99ff00; font-family: verdana,arial,geneva,sans-serif }

7 CSS: Ejemplo 2 body { background: white; color: black} a:link { color: red } a:visited { color: maroon } a:active { color: fuchsia }

8 CCS: Principios Agrupando H1,H2,H3 { color: purple; } Selector de clase.pato { color: brown; } Ejemplo h1 { font-size: 30pt }.rojo { color: red }.azul { color: blue } Selector de id (único por elemento) #i5 { color="brown"; } Ejemplo

9 CSS: Principios Selector contextual h1 em { color: red; } Esto es rojo Esto no es rojo Comentario /* Este es un comentario */

10 CSS: Pseudo clases y pseudo elementos anchor Se aplica a hiperligas pero no a etiquetas first-line Se aplica a la primera línea p:first-line { color: red; } La primera linea en rojo... bla bla bla first-letter Se aplica a la primera letra

11 CSS: Propiedades de tipografía font-family p { font-family: Helvetica,sans-serif; } font-style (italics, oblique, normal) font-variant (small-caps) font-weight (700,bold) font-size (200%, 36pt, +4) font ({font-style font-variant font-weight font- size/line-height font-family;}) p {font: bold 12pt/14pt Helvetica,sans-serif;}

12 CSS: Propiedades de color color background-color background-image body { backgroun-image: url(pato.gif); } background-repeat (no-repeat) background-attachment ( scroll,fixed ) background-position (top, botton, center, left, right) background body {background: white url(bg41.gif) fixed center;}

13 CSS: propiedades de texto word-spacing p: { word-spacing: 0.5em; } letter-spacing text-decoration (underline, line-through) vertical-alignt (super, 50%) text-transform (uppercase, capitalize,lowercase) text-align (justify, center, left, right) text-indent (5em, -25px) line-height (18pt, 200%)

14 CSS: Propiedades de caja margin-top (0.5in, 3em, 30px, 2ex) margin-right margin-bottom margin-left margin padding-top, padding-bottom, etc border-top-width, border-bottom-width, etc

15 CSS: Propiedades de caja border-color border-style (solid) border-top, border-bottom, etc. ul {border-top: 0.5in solid black;} width table { width=80% } float img { float: left }

16 CSS: Propiedades de clasificación white-space (nowrap, pre) list-style-type (square, lower-roman) list-style-image ul { list-style-image: url(bala.gif); }

17 CSS: Unidades Longitud width: 50px; margin-left: 2em; Porcentaje width: 50%; Unidades de color color: #FF00FF; color: rgb( 100%, 0%, 100% ); URLs url( foto.gif); url( http://www.utm.mx/Z/foto.jpg );