css

450 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
450
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

css

  1. 1. Estilos CCSHojas de Estilo en CascadaMTI. Gabriel Martínez Mendoza
  2. 2. ¿ Que es CSS ? CSS significa Cascading Style Sheets Los estilos definen cómo mostrar los elementos HTML Los estilos se han añadido a HTML 4.0 para resolver un problema Hojas de estilo externas puede ahorrar un montón de trabajo Hojas de estilo externas se almacenan en archivos CSS
  3. 3. Estilos HTML nunca fue destinado a contener las etiquetas para dar formato a un documento. HTML fue la intención de definir el contenido de un documento, como:  <h1> Este es un encabezado </ h1>  <p> Este es un párrafo. </ p> Cuando las etiquetas como <font>, y los atributos de color se han añadido a la especificación HTML, que empezó una pesadilla para los desarrolladores web. Desarrollo de sitios web de gran tamaño, donde las fuentes y la información de color se han añadido a cada página, se convirtió en un proceso largo y costoso. Para resolver este problema, la World Wide Web Consortium (W3C), creado en CSS.
  4. 4. Estilos cont… En HTML 4.0, todo el formato podría ser removido del documento HTML, y se almacena en un archivo CSS independiente. Todos los navegadores soportan CSS en la actualidad. CSS ahorra mucho trabajo! CSS define cómo los elementos HTML que se mostrará. Los estilos se guardan normalmente en exteriores. Css. hojas de estilo externas le permiten cambiar la apariencia y el diseño de todas las páginas de un sitio Web, simplemente editando un solo archivo!
  5. 5. CSS : Sintaxis Una regla CSS consta de dos partes principales: un selector, y las declaraciones de uno o más: El selector es normalmente el elemento HTML que desee estilo. Cada declaración consta de una propiedad y un valor. La propiedad es el estilo de atributo que desea cambiar. Cada propiedad tiene un valor.
  6. 6. Ejemplo :Las declaraciones CSS siempre termina con un punto y coma, y ​los grupos dela declaración están rodeados de llaves:
  7. 7. Comentarios CSS
  8. 8. Selectores Id y ClassEl selector de IdentificaciónEl selector de ID se utiliza para especificar un estilo para un solo elemento, único.El selector de Identificación utiliza el atributo id del elemento HTML y se definecon un "#".La regla de estilo el cuadro siguiente se aplica al elemento con id = "para1":
  9. 9. Estructura en HTML : CSS con ID<html><head> < style type=“text/css><style type="text/css">#para1{ Selector ID # para1 y atributostext-align:center;color:red;} < /style ></style></head><body><p id="para1">HOLA MUNDO !</p><p>Este texto no esta afectado por estilo Aplicando el estilo.</p></body></html>
  10. 10. Selector Clase = ClassLa clase SelectorEl selector de clase se utiliza para especificar un estilo para un grupo deelementos. A diferencia de la selección de Identificación, el selector de clase esla más utilizada en varios elementos.Esto le permite definir un estilo particular para los elementos HTML con lamisma clase.El selector de clase utiliza el atributo class de HTML, y se define con un "."En el ejemplo siguiente, todos los elementos HTML con class = "centro" sealinea al centro:
  11. 11. Estructura en HTML : CSS con Class<html><head> < style type=“text/css><style type="text/css">p.center{text-align:center; Selector class p. center y atributos}</style></head> < /style ><body><h1 class="center">Este Parrafo no se ve afectado por elestilo</h1><p class="center">Este parrafo esta alineado y centrado.</p></body></html> Aplicando el estilo
  12. 12. Formas de Insertar Estilos Tres maneras de CSS Insertar Hay tres formas de insertar una hoja de estilos: •Hoja de estilos externa •Interior hoja de estilos •Estilo en línea
  13. 13. Hoja de estilos Externa Una hoja de estilos externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilos externa, puede cambiar el aspecto de un sitio Web completo al cambiar un archivo. Cada página debe enlazar con la hoja de estilos utilizando la etiqueta <link>. La etiqueta <link> va dentro de la sección de la encabezado: Una hoja de estilos externa se puede escribir en cualquier editor de texto. El archivo no debe contener ninguna etiqueta HTML. Su hoja de estilo debe ser guardado con una extensión de CSS.. Un ejemplo de un archivo de hoja de estilos se muestra a continuación:
  14. 14. Hoja de Estilos Interna Una hoja de estilo interna debe ser usado cuando un único documento tiene un estilo único. Para definir estilos internos en la sección principal de una página HTML, utilizando la etiqueta <style>, así:
  15. 15. Estilos de Línea Un estilo en línea pierde muchas de las ventajas de las hojas de estilo por el contenido de la mezcla con la presentación. Utilice este método con moderación! Para utilizar los estilos en línea se utiliza el atributo de estilo en la etiqueta correspondiente. El atributo de estilo puede contener cualquier propiedad CSS. El ejemplo muestra cómo cambiar el color y el margen izquierdo de un párrafo:
  16. 16. Fondos de Estilo CSS propiedades de fondo se utilizan para definir los efectos de fondo de un elemento. Las propiedades CSS utilizado para efectos de fondo: • background-color • background-image • background-repeat • background-attachment • background-position
  17. 17. Fondos de Estilo Cont…Color de fondoLa propiedad background-color especifica el color de fondo de un elemento.El color de fondo de una página se define en el selector de cuerpo:Otros Elementos como:
  18. 18. Fondos de Estilo Cont…Imagen de fondoLa propiedad background-image especifica una imagen para usar como fondo deun elemento.De forma predeterminada, la imagen se repite por lo que cubre todo el elemento.La imagen de fondo de una página se puede establecer de esta manera:
  19. 19. Fondos de Estilo Cont… background-imageImagen de fondo - Repetir horizontalmente o verticalmenteDe forma predeterminada, la propiedad background-image repite una imagentanto horizontal como verticalmente.Algunas de las imágenes se debe repetir sólo horizontal o verticalmente, o severá extraño, así: Si la imagen se repite sólo horizontalmente (repeat-x), el fondo se vea mejor:
  20. 20. Ejemplo Imagen : Atributo repeat-x <html> <head> <style type="text/css"> body { background-image:url(gradient2.png); background-repeat:repeat-x; } </style> </head> <body> <h1>Hola Mundo !!!!</h1> </body> </html>
  21. 21. Fondos de Estilo Cont… background-imageImagen de fondo - Establecer la posición y no se repita: <html> <head> <style type="text/css"> body { background-image:url(img_tree.png); background-repeat:no-repeat; background-position:right top; margin-right:200px; } </style> </head> <body> <h1>Hola Mundo !</h1> <p>Ejemplo del no-repeat en el fondo </p> <p>La imgen solo esta una vez y se colo a fuera del texto.... .</p> <p>En este ejemplo también hemos añadido un margen en el lado derecho , por lo que la imagen de fondo no se perturbe el texto.</p> </body> </html>
  22. 22. Fondos de Estilo Cont… background-image<html><head><style type="text/css">body{background:#909090 url(img_tree.png) no-repeat right top;margin-right:200px;}</style><body>..………..…</body></html>
  23. 23. Color del textoLa propiedad color se utiliza para establecer el color del texto. El colorpuede ser especificado por:• Nombre - nombre de un color, como “red"• RGB - un valor RGB, como "rgb (255,0,0)"• Direccional - un valor hexadecimal, como "# FF0000“El color por defecto de una página se define en el selector de cuerpo.
  24. 24. Estilos de Texto. Cont..Alineación del textoLa propiedad text-align se utiliza para establecer la alineación horizontal de un texto.El texto puede ser centrado o alineado a la izquierda o la derecha o justificado.Cuando text-align se ajusta a "justificar", cada línea se estira de manera que cadalínea tiene la misma anchura, y los márgenes izquierdo y derecho son rectos (comoen revistas y periódicos).
  25. 25. Ejemplo : Estilos Texto<html><head><style type="text/css">h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}</style></head><body><h1>CSS text-align Example</h1><p class="date">May, 2009</p><p class="main“> En mis años más jóvenes y más vulnerables mi padre me dio un consejo quehe estado dando vueltas en mi mente desde entonces . " Siempre que te sientas como criticara nadie , " me dijo , recuerda que todas las personas en este mundo no han tenido las ventajasque he tenido . ".</p><p><b>Note:</b> Cambiar el tamaño de la ventana del navegador para ver cómo el valor de "justificar ".</p></body></html>
  26. 26. Texto DecoraciónTexto TransformaciónSangria
  27. 27. Texto DecoraciónTexto Transformación
  28. 28. FuenteDiferencia entre Serif y fuentes Sans-serifCSS familias de fuentesEn CSS, hay dos tipos de nombres de familia de la fuente:Genérica de la familia - un grupo de familias de fuentes con un aspecto similar (como"Serif" o "Monoespacio")Familia de la fuente - una familia de fuentes específicas (como "New Times Roman" o"Arial")
  29. 29. Fuente Cont.…
  30. 30. Fuente Cont..Estilo de fuenteLa propiedad font-style se utiliza sobre todo para especificar el texto en cursiva.Esta propiedad tiene tres valores:normal - El texto se muestra normalmentecursiva - El texto se muestra en cursivaoblicua - El texto es "inclinarse" (oblicua es muy similar a la cursiva)
  31. 31. Fuente Cont..Tamaño de fuenteLa propiedad font-size establece el tamaño del texto.
  32. 32. EnlacesLos enlaces pueden ser de estilo con cualquier propiedad CSS (por ejemplo, color, font-family,fondo, etc.)Especial para los enlaces son que puede ser configurada diferente dependiendo del estado queestán adentroLos cuatro estados son los enlaces:a: link – estado normal antes de dar clica: visited - un enlace que el usuario ha visitadoa: hover - un enlace cuando el usuario desplaza el ratón sobre ela: active - un enlace el momento en que se hace clic en el
  33. 33. Enlaces : Ejemplo<html><head><style type="text/css">a:link {color:#FF0000;} /* Enlace no visitado = Rojo */a:visited {color:#00FF00;} /* Visto el enlace = Verde*/a:hover {color:#FF00FF;} /* Sobre el enlace = Rosa */a:active {color:#0000FF;} /* Enlace seleccionado = azul*/</style></head><body><p><b><a href="http://www.google.com" target="_blank"> Enlace a Google</a></b></p></body></html>
  34. 34. ListasEn HTML, hay dos tipos de listas:Listas no ordenadas : los elementos de lista están marcados con objetosListas ordenadas : los elementos de la lista están marcados con números o letras.Con CSS, las listas pueden ser de estilo más, y las imágenes se puede utilizar comomarcador elemento de la lista. Declaración de Estilo Aplicación del Estilo <head> <body> <style type="text/css"> <ul class="a"> ul.a {list-style-type:circle;} <li>Cafe</li> ul.b {list-style-type:square;} <li>Te</li> ol.c {list-style-type:upper-roman;} <li>Coca Cola</li> ol.d {list-style-type:lower-alpha;} </ul> </style> </body> </head>
  35. 35. Lista Cont.…Lista no numeradaLista numerada
  36. 36. TablasGenerar un Estilo para la Tabla en una Hoja Externa Matricula Nombre del Alumno Carrera 100234 Samanta Flores Rodríguez Lic. En Mercadotecnia 100456 Iván Genaro Tovar Delgado Ing. En Telemática 100909 Daniela Pozos Rostro Ing. En Sistemas Industriales 100567 Horacio Walis Reyna Lujan Lic. En Administración .tabla {border: 1px solid; width:400px; border-collapse:collapse;} .tabla td {text-align:center; border: 1px solid;} .tabla tr:hover {background-color:#0066FF; font-size:16px;} .tabla th {background-color:#000099;}

×