1 / 69

CSS Cascade Style Sheet

CSS Cascade Style Sheet. DISEÑO WEB. HTML. CSS. SINTAXIS CSS. P { color:blue; font-size:16px; }. 1. 2. Declaraciones. Selector. PROPIEDAD. :. VALOR. COLOR. (BLUE). AZUL. :. ID & CLASS. ID. #miobjeto { color: red }. <p id= "miobjeto" > </p>. Selector. Class.

jenis
Download Presentation

CSS Cascade Style Sheet

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS Cascade Style Sheet

  2. DISEÑO WEB HTML CSS

  3. SINTAXIS CSS P { color:blue; font-size:16px; } 1 2 Declaraciones Selector PROPIEDAD : VALOR COLOR (BLUE) AZUL :

  4. ID & CLASS ID #miobjeto { color:red} <p id="miobjeto" ></p> Selector Class .miclase { color:red} <p class="miclase" ></p> <h1 class="miclase" ></h1> Selector

  5. Formas de Insertar CSS EXTERNA <style rel="stylesheet" href="hojaestilo.css"/> <style type="text/css"> color:blue </style> INTERNA EN EL ELEMENTO HTML <p style="color:blue"></p>

  6. Background -CSS Las propiedades de Fondo de CSS son usadas para definir un efecto de Fondo en un elemento HTML PROPIEDADES

  7. Background -CSS

  8. Background -CSS No repetir (no-repeat) Repetir en Y (repeat-y) Repetir en X (repet-x)

  9. Background -CSS X Y TOP IMAGEN DE FONDO LEFT RIGHT BOTTOM

  10. Background -CSS X Y TOP IMAGEN DE FONDO LEFT RIGHT BOTTOM

  11. Background -CSS X Y TOP LEFT RIGHT IMAGEN DE FONDO BOTTOM

  12. Background -CSS X Y left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom

  13. Background -CSS X Y Px Px % %

  14. Background -CSS 10px 10px

  15. Background -CSS -10px -10px

  16. Background -CSS

  17. PRACTICA DE SINTAXIS CSS PRACTICA DE BACKGROUND IMAGE • CREAR UNA PAGINA CON UN FONDO DE COLOR, UTILIZAR COLOR EN EL TEXTO. • CREAR UN FONDO DEGRADADO CON UNA IMAGEN (UTILIZAR REPEAT-X) • LLENAR EL RESTO CON UN FONDO DE COLOR.

  18. CSS Text

  19. CSS Text color Text-decoration Text-align Text-transform Text-indent

  20. CSS Font Font Size Font-family Font-Style Font-Size

  21. CSS Links Enlaces también pueden tener propiedades. Los cuatro tipo de status para los enlaces pueden ser: a:link – Un enlace normal sin visitar a:visited– Un enlace que un usuario ha visitado a:hover– Un enlace con un puntero situado encima a:active–Un enlace que se realizo un click.

  22. CSS Listas Propiedades para listas UL and OL: I. a.

  23. CSS Tablas Se puede mejorar la parte visual en una tabla usando CSS Tabla Borders Collapse Borders Table Width and Height

  24. CSS Tablas Se puede mejorar la parte visual en una tabla usando CSS Table Text Alignment Table padding Table Color

  25. REALIZAR LA SIGUIENTE TABLA DECORADA..

  26. REALIZAR LA SIGUIENTE TABLA DECORADA..

  27. CSS Box model El modelo de caja CSS es esencialmente una caja que se envuelve alrededor de los elementos HTML, y se compone de: márgenes, bordes, el relleno y el contenido real. El modelo de caja nos permite colocar un borde alrededor de los elementos y los elementos del espacio en relación con otros elementos. La imagen siguiente muestra el modelo de caja:

  28. CSS Box model Explicación de las diferentes partes: Margen - Borra un área alrededor de la frontera. El margen no tiene un color de fondo, es completamente transparente Border - Un borde que va alrededor del relleno y contenido. La frontera se ve afectado por el color de fondo de la caja Relleno - Borra un área alrededor del contenido. El relleno se ve afectado por el color de fondo de la caja Contenido - El contenido de la caja, en la que aparecen el texto y las imágenes

  29. CSS Box model Ancho y Alto de un elemento Importante: Al configurar el ancho y alto de un elemento con CSS, que acaba de establecer la anchura y la altura del área de contenido. Para calcular el tamaño de un elemento, también debe agregar el relleno, bordes y márgenes. La anchura total del elemento en el ejemplo siguiente es 300px: 250px (anchura) + 20px (izquierdo + padding derecho) + 10px (izquierdo + borde derecho) + 20px (margen izquierdo + derecho) = 300px 220px (anchura) + 20px (izquierdo + padding derecho) + 10px (izquierdo + borde derecho) + 0px (margen izquierdo + derecho) = 250px

  30. CSS Border Propiedades de Bordes en CSS Las propiedades de bordes CSS permiten especificar el estilo y el color del borde de un elemento. Border Style Border Width Border Color Border Individual - Sides

  31. CSS Border Propiedades de Bordes en CSS Las propiedades de bordes CSS permiten especificar el estilo y el color del borde de un elemento. border: 5px solid red; Estilo Color Tamaño

  32. CSS Margin Propiedades de Bordes en CSS El margen despeja un área alrededor de un elemento (fuera de la frontera). El margen no tiene un color de fondo, y es completamente transparente. El margensuperior, derecho, inferior e izquierdo se puede cambiar de forma independiente utilizando propiedades separadas. Una propiedad margen también se puede utilizar, para cambiar todos los márgenes a la vez.

  33. CSS Margin Propiedades de Bordes en CSS Margin: TOP RIGHT BOTTOM LEFT

  34. CSS Margin Propiedades de Bordes en CSS Márgenes individuales.

  35. CSS Padding Las propiedades de relleno CSS definen el espacio entre el borde del elemento y el contenido del elemento. • El relleno de borra un área alrededor de los contenidos (en el interior de la frontera) de un elemento. • El relleno se ve afectado por el color de fondo del elemento. • - La parte superior, derecho, inferior e izquierdo padding puede cambiarse de forma independiente utilizando propiedades separadas. Una propiedad padding también se puede utilizar, para cambiar todos los rellenos a la vez.

  36. Agrupación de Selectores En las hojas de estilo a menudo hay elementos con el mismo estilo. h1{color:green;}h2{color:green;}p{color:green;} h1,h2,p{color:green;} =

  37. Agrupación de Selectores Height and Width

  38. CSS Display and Visibility La propiedad display especifica cómo se muestra un elemento, y la propiedad de visibilidad especifica si un elemento debe ser visible u oculto. DISPLAY VISIBILITY NONE HIDDEN BLOCK VISIBLE INLINE OCUPA ESPACIO NO OCUPA ESPACIO Ej

  39. CSSPosition POSITION: STATIC FIXED RELATIVE

  40. CSSPosition SOBRE POSICIÓN BLOQUE 1 z-index BLOQUE 1 EJ

  41. CSSPosition SOBRE POSICIÓN BLOQUE 1 z-index BLOQUE 1

  42. CSSPosition Z-INDEX

  43. CSSFlotantes ELEMENTOS FLOTANTES NONE LEFT RIGHT ELEMENTOS NO FLOTANTES CLEAR: LEFT RIGHT BOTH

  44. Pseudo-Clases & Pseudo-elementos Las Pseudo-clases nos permiten referirnos a un elemento por su estado Hover Active Focus Las Pseudo-elementos son elementos de una pagina los cuales nos podemos referir como elementos normales. First-line After First-letter Before First-child

  45. Pseudo-Clases Hover

  46. Pseudo-Clases Active

  47. Pseudo-Clases Focus

  48. Pseudo-elementos First-line ELEMENTO PRIMERA LINEA

  49. Pseudo-elementos First-line

  50. Pseudo-elementos First-letter

More Related