Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a Introducción CSS
Similar a Introducción CSS (20)
Más de Carlos A. Iglesias
Más de Carlos A. Iglesias (20)
Último
Último (20)
Introducción CSS
- 1. Tecnologías Web de Cliente CSS
- 2. Profesores Carlos A. Iglesias Mercedes Garijo Puedes contactarme en cif@gsi.dit.upm.es - Despacho C-211 2
- 3. 1. Principios Para qué vale 3
- 4. Aspecto de la página web Lenguaje de marcas para definir el aspecto de un documento HTML 4
- 5. 5 CSS y HTML HTMLCSS JavaScript presentación contenido conducta
- 6. 6
- 12. 2. Lenguaje CSS básico En qué consiste CSS 12
- 13. Sin CSS - Sólo HTML 13
- 14. Con HTML y CSS 14
- 15. Cosas que hay que saber de CSS Siglas Cascading Style Sheets - Hojas de estilo Navegador web El navegador web procesa código HTML, código CSS y código JS Extensión Los ficheros css terminan en . css Cascada Orden en que se aplican las reglas de estilo CSS para definir el valor de una propiedad de un elemento HTML. Editor Es un fichero de texto plano. Lo editamos con un editor de texto (notepad, gedit, …) o un IDE (Integrated Development Environment) Referencias Un fichero CSS puede estar referenciado por varios ficheros HTML (o incluido por otros ficheros CSS) 15
- 16. Sintaxis regla CSS 16 h1 {color: green; font-family: Verdana;} Declaración propiedad Selector valor propiedad valor Regla CSS
- 18. Combinando HTML y CSS <!DOCTYPE html> <html> ... <body> <p>¡Hola!</p> </body> </html> Título ¡Hola! 18 p {color: red;}
- 19. Regla CSS selector {propiedad: valor;} 19
- 20. 3. Selectores CSS Cómo seleccionar nodos HTML en las reglas CSS 20
- 21. 21 Selector CSS Escoger un elemento del árbol DOM
- 23. Selector Etiqueta 23 li { color: green; } Para indicar cualquier elemento usamos * Ej. * {background-color: red;}
- 24. Selector AND 24 li, h1 { color: green; }
- 25. Selector repetido 25 li, h1 { color: green; } h1 { color: red;}
- 26. Selector ‘ruta’ (descendants) 26 ul ul li { color: green; } body h1 h2 p ul li li li ul li li p
- 27. Selector hijos directos (children) 27 body > p { color: green; } body h1 h2 p ul li li li ul li li p
- 28. Selector hermano predecesor adyacente (adjacent sibling) 28 h1 + h2 { color: green; } body h1 h2 h2 ul li li li ul li li p
- 29. Selector hermanos con predecesor (general sibling) 29 h1 〜 h2 { color: green; } body h1 h2 h2 ul li li li ul li li p
- 30. Revisión 30
- 31. Revisión 31
- 32. Revisión 32
- 33. Seleccionar elementos concretos 33 ▣ Metemos una marca en el HTML para poder seleccionarlos en CSS □ class: marcamos todos los elementos de un mismo tipo □ id: marcamos un elemento único (id) en esa página ▣ En CSS □ .nombre-clase : {} □ #nombre-id : {}
- 34. Ejemplo id - class 34 http://jsfiddle.net/cif2cif/ygaejfmy/4/
- 35. Seleccionar tipo y clase (I) 35
- 36. Seleccionar tipo y clase (II) 36
- 38. Pseudo-elementos - partes de un doc 38 Pseudo elemento Explicación p::first-letter Selecciona primera letra del elemento p::first-line Selecciona primera línea del elemento p::before{content: “texto”;} Añade texto antes del elemento p::after{content: “texto”;} Añade contenido después del elemento p::selection Texto seleccionado por el usuario con ratón o teclado
- 40. Pseudo-clases -estado especial 40 Pseudo elemento Explicación a:link, a:visited, a:active selecciona enlace no visitado, visitado o activo h1:hover elemento por el que se pasa el ratón por encima input:focus, input:checked, input: disabled, input:valid, input:invalid, input:in-range, input:out-of-range, input:required, input:optional input que tiene el foco, radio/checkbox seleccionados, entrada deshabilitada, entradas válidas, entradas inválidas, entradas numéricas con rango válido o fuera de rango, entradas obligatorias o no obligatorias p:first-child, p:last-child, p:nth- child(n), p:nth-last-child(n), p:nth- of-type(n), p:nth-last-of-type(n) Primer hijo de un elemento padre, último hijo, hijo número n desde el ppio, hijo número n desde el final
- 42. Prueba: Depurar con Chrome 42
- 44. Elementos div y span para flujo ▣ div: contenedor de otros elementos HTML □ normalmente usado para cambiar el estilo □ solemos usar dos atributos de div ■ id: identifica un div en una página (debe ser único por página) ■ class: identifica un tipo de div (puede haber varios) ▣ span: cambia el estilo de un contenido sin crear una nueva línea. Suele combinarse con class. 44
- 45. Reglas CSS en un fichero HTML En línea Definimos la regla de estilo en el elemento HTML 45 Hoja empotrada Definimos el estilo en la cabecera Hoja externa Hacemos un enlace a un fichero css en la cabecera <body> ... <p style=”color: red;"> ... </body> <head> … <style type=" text/css"> p {color: red;} </style> .. </head> <head> ... <link rel=" stylesheet" type="text/css"" href="p.css"> … </head>
- 46. Orden de la cascada 46
- 47. Cascada 47
- 49. “un #id tiene el peso de un inline” 49
- 50. Herencia 50
- 51. 51 Diseño web adaptable (Responsive web design)
- 52. Selector de medios (Media Query) 52 ▣ Nos permiten distinguir css por dispositivo ▣ Podemos distinguir □ al importar un fichero CSS con @import o <link> □ al definir una regla CSS ▣ Sintaxis ‘media query’ ▣ Tipo de medios: print, screen, handheld, tv, all, … ▣ Rasgos: width, min-width, max-width, height, min-height, max-height, orientation, color, @media [<media>] [and] [<expresión>]
- 54. @import 54 Enlazar CSS en HTML Importar CSS desde CSS <link rel= "stylesheet" media="print"href="f.css"> @import url(‘f.css’) @import url("f1.css") print @import url(‘f2.css’) screen, tv
- 56. Propiedades CSS 56 Listado completo: http://meiert.com/en/indices/css-properties/
- 57. 57
- 58. Unidades de medida 58 ▣ Medidas absolutas □ cm, mm, in (1 in = 2.5cm), px (1px = 1/ 96 in), pt (1 pt = 1/72 in, pc (1 pc = 12pt) ▣ Medida relativa: % ▣ Medidas relativas en fuentes □ em, ex, ch, rem ▣ Medidas relativas en viewport □ vw (1% viewport width), vh (1% viewport height, vmin (min(vw,vh)), vmax (max(vw,vh)) *nuevas en CSS3 Fuente: http://www.w3.org/Style/Examples/007/units.en.html#units
- 59. px: medidas absolutas ▣ Pixel: □ Pixel hardware □ Pixel CSS : normalmente 360px el ancho de ‘cualquier dispositivo’, relación entre densidad de pixels del dispositivo (devicePixelRatio) y zoom ▣ 1 px= 1 / 96 in ≠ 1 px físico 59
- 60. em: medida relativa ▣ 1 em = tamaño de la fuente actual ▣ 1.2 em = 1.2 veces el tamaño de la fuente actual ▣ Ej. fuente actual: 16px 60 html { font-size: 75%; // 12px } body { font-size: 1em; // 12px } h1 { font-size: 2em; // 24px } html { font-size: 100%; // 16px } body { font-size: 0.75em; // 12px } h1 { font-size: 2em; // 24px }
- 61. Medida em 61 html { font-size: 200%; // 32px } body { font-size: 1em; // 32px } li { font-size: 0.5em; // 16px } Medida em Cuidado con lo anidamientos y cascada
- 62. Medida rem (root ‘em’) - sin anidar 62
- 63. Tipografía 63 Propiedad Valores font-family serif, sans-serif, monospace, ... font-size 100%, 10px, 10pt, ... font-weight bold, bolder, lighter, normal font-style normal, italic, oblique font-variant small-caps, normal font [<font-weight>] [<font-style>] [<font-variant>] <font-size> <font-family>
- 64. Tipografía 64
- 65. 65
- 67. Web fonts 67 Formatos de fonts ▣ WOFF/WOFF2 Web Open Font Format □ Soportado en todos los navegadores ▣ SVG/SGVZ (iOs Safari 3.2-4.1) ▣ EOT (IE <= 8.0) ▣ TrueType Fonts (Android )
- 68. Dónde conseguir fuentes ▣ Font Squirrel http://www.fontsquirrel.com ▣ Google fonts http://www.google.com/fonts □ se incluyen con @import, genera el código 68
- 70. Propiedades de textos 70 Propiedad Valores color Valor color como en HTML text-indent long. positiva o negativa. Ej. 4em letter-spacing long. positiva o negativa. Ej. 4em word-spacing long. positiva o negativa. Ej. 4em text-decoration none, underline, overline, strikethrough text-align left, right, center, justify line-height Valor numérico. Ej. 1.5 text-transform uppercase, lowercase, capitalize, none vertical-align valor numérico, sub, sup, top, middle, bottom
- 71. Ejemplo (I) 71
- 72. Ejemplo (II) 72
- 73. Ejemplo (III) 73
- 74. 5. Posicionamiento Cómo se disponen los elementos HTML en la página 74
- 75. El modelo de caja (Box model) 75 Modelo de caja: Los elementos HTML son cajas rectangulares
- 76. Tipos de caja: display Ya vimos en HTML que los elementos se visualizaban de dos formas: ▣ Elementos de bloque: div, p, ul, ol, li, br, h1-h6, body, table, blockquote, section, aside, header, footer, article, nav ▣ Elementos de línea: span, a, b, i, img, label Podemos cambiar el tipo con la propiedad CSS display 76
- 78. 78 MODELO DE CAJA - Fuente: http://farm7.staticflickr.com/6022/5910326877_4e1ec3edb9_b.jpg
- 80. Elementos de la caja 80 Fuente: http://dabrook.org/assets/images/uploads/Box-Model.png
- 81. Ej. atributos de la caja 81
- 82. Bordes redondeados: border-radius 82 Probar: http://jsfiddle.net/cif2cif/wrez7/9/
- 83. Bordes con sombra: border-shadow 83 Probar en http://jsfiddle.net/cif2cif/zp7Ta/10/
- 85. Tamaño de la caja 85 Fuente: http://learn.shayhowe.com/html-css/opening-the-box-model/
- 86. Posición de la caja 86 ▣ static: por defecto – coloca el párrafo a continuación del anterior ▣ relative: se mueve respecto de su posición (static) pero mantiene el espacio que ocuparía (con valores negativos se mueve a la izda y arriba) ▣ absolute: mueve el párrafo respecto de su elemento superior (body), sin dejar el espacio que ocuparía si fuera static. ▣ fixed: como absolute pero la referencia es la ventana del navegador, no body. Retiene la posición incluso con scroll.
- 87. Posición: static y relative 87
- 88. Posición: absolute y fixed 88
- 90. Clear 90 Fuente: http://css-tricks.com/all-about-floats/ #content {float: left;} #sidebar {float: right;} #footer {clear: both;}
- 91. float y clear 91 Float ▣ hace que el siguiente elemento se sitúe al lado si hay sitio ▣ sólo se puede flotar left o right (no center) ▣ un elemento que flota no añade altura a su contenedor Clear obligamos a que un elemento deje de flotar
- 92. Problemas habituales con float 92 Solución: añadir un div vacío que haga que deje de flotar y así el bloque se adapta <div style=”clear: both”></div>
- 93. Ejemplo 93 img {float: right;} Fuente: http://designshack.net/articles/css/everything-you-never-knew-about-css- floats/
- 94. Fondo de la caja 94 Fuente: https://www.goshen.edu/physix/326/cssbox.php
- 95. Fotos de fondo 95 #principal{border:3px solid #F33; background-image:url(./avatar_chico.jpg);
- 96. Repetir foto de fondo 96 div { border: 3px solid #F33; background-image: url(./avatar_chico.jpg); } #primero{ background-repeat: repeat-x; } #segundo{ background-repeat: repeat-y; } #tercero{ background-repeat: no-repeat; }
- 97. Background position 97 h1 {background-image:url(./mini_avatar_chico.jpg); height:45px; padding-left: 50px; background-repeat: no-repeat; background-position: top left; border:3px solid #F33;} h2 {background-image:url(./mini_avatar_chica.jpg); height:35px; padding-right: 50px; background-repeat: no-repeat; background-position: top right;border:3px solid #F33;}
- 98. Tamaño fondo: background-size 98 ▣ Tamaño foto original: □ background-size: auto auto /* ancho alto */ ▣ Tamaño fijo o relativo □ background-size: auto 25% ▣ Que se ajuste al tamaño de la ventana □ background-size: contain (rellena la parte que cabe y no rellena la parte que no cabe) □ background-size: cover (se recorta para ajustarse al fondo)
- 100. Varias imágenes de fondo 100
- 102. Listas 102 list-style-type: decimal; list-style-type: upper-roman; list-style-type: lower-roman; list-style-position: upper-alpha; list-style-position: lower-alpha;
- 103. Ejemplos 103
- 104. 6. Pasos generales para realizar una web Cómo aplicar CSS y HTML para realizar una web 104
- 105. Pasos para diseñar una web 105 Decidir qué hacer (mockup, wireframe) Decidir disposición (layout) de cada página Diseñar elementos de estilo generales y de cada elemento Codificar
- 106. 106
- 108. 108 Sabemos los principios de CSS, pero luego usaremos un framework que simplificará su uso
- 109. Conclusiones 109 GRÁFICOS DISEÑO DISPOSICIÓN COLOR HTML CSS JS AJAX SQL PHP Node.js JavaEE .NET
- 110. ‘’ 110 “Good artists copy, great artists steal” Pablo Picasso “The secret to creativity is knowing how to hide your sources” Albert Einstein
- 112. Referencias ▣ Especificación W3C □ http://www.w3.org/Style/CSS/ ▣ Tutoriales HTML □ http://www.w3schools.com/css □ http://www.html-5-tutorial.com/ □ http://librosweb.es/css_avanzado/ ▣ CSS Zen Garden □ http://www.csszengarden.com/ ▣ Chrome Web Developer Tools □ https://developer.chrome.com/devtools ▣ Libro Head first HTML & CSS □ http://proquest.safaribooksonline. com/book/web-design-and- development/9781449324469 112
- 113. Referencias ▣ Cuatro estrategias para elegir fuentes □ http://www.typography. com/email/2010_03/index_tw.htm ▣ Web fundamentals de Google □ https://developers.google. com/web/fundamentals/ 113
- 114. Créditos Gracias a todos los que han publicado estos recursos de forma gratuita: ▣ Minicons de Webalys ▣ Plantilla de la presentación de SlidesCarnival ▣ Fotos de Unsplash y Wix 114