Introducción CSS

Tecnologías Web de Cliente
CSS

Profesores
Carlos A. Iglesias
Mercedes Garijo
Puedes contactarme en cif@gsi.dit.upm.es - Despacho C-211
2

1.
Principios Para qué vale
3

Aspecto de la
página web
Lenguaje de marcas para definir el aspecto de
un documento HTML
4

5
CSS y HTML
HTMLCSS JavaScript
presentación contenido conducta

Historia
CSS
CSS1
Fuente: https://visual.ly/css-interesting-facts-and-history
8

Historia
CSS
CSS2
9

Historia
CSS
CSS2
10

Historia
CSS
CSS3
11

2.
Lenguaje CSS
básico
En qué consiste
CSS
12

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

Sintaxis regla CSS
16
h1 {color: green; font-family: Verdana;}
Declaración
propiedad
Selector
valor propiedad valor
Regla CSS

Combinando HTML y CSS
<!DOCTYPE html>
<html>
...
<body>
<p>¡Hola!</p>
</body>
</html>
Título
¡Hola!
18
p {color: red;}

Regla CSS
selector {propiedad: valor;}
19

3.
Selectores CSS
Cómo
seleccionar
nodos HTML en
las reglas CSS
20

21
Selector CSS
Escoger un
elemento del
árbol DOM

Ejemplo
22
Fuente: http://dabrook.org/resources/posters/

Selector Etiqueta
23
li { color: green; }
Para indicar cualquier elemento usamos *
Ej. * {background-color: red;}

Selector AND
24
li, h1 { color: green; }

Selector repetido
25
li, h1 { color: green; }
h1 { color: red;}

Selector ‘ruta’ (descendants)
26
ul ul li { color: green; }
body
h1 h2 p ul
li li li
ul
li li
p

Selector hijos directos (children)
27
body > p { color: green; }
body
h1 h2 p ul
li li li
ul
li li
p

Selector hermano predecesor
adyacente (adjacent sibling)
28
h1 + h2 { color: green; }
body
h1 h2 h2 ul
li li li
ul
li li
p

Selector hermanos con predecesor
(general sibling)
29
h1 〜 h2 { color: green; }
body
h1 h2 h2 ul
li li li
ul
li li
p

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 : {}

Ejemplo id - class
34
http://jsfiddle.net/cif2cif/ygaejfmy/4/

Seleccionar tipo y clase (I)
35

Seleccionar tipo y clase (II)
36

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

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

3.
Cascada
Cómo
relacionar
HTML y CSS
43

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

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>

“un #id tiene el peso de un inline”
49

51
Diseño web adaptable
(Responsive web design)

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>]

@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

4.
Propiedades
Qué
propiedades de
estilo podemos
cambiar
55

Propiedades CSS
56
Listado completo: http://meiert.com/en/indices/css-properties/

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

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

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 }
body { font-size: 0.75em; // 12px }
h1 { font-size: 2em; // 24px }

Medida em
61
body { font-size: 1em; // 32px }
li { font-size: 0.5em; // 16px }
Medida em
Cuidado con lo
anidamientos y
cascada

Medida rem (root ‘em’) - sin anidar
62

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>

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 )

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

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

5.
Posicionamiento
Cómo se
disponen los
elementos
HTML en la
página
74

El modelo de caja (Box model)
75
Modelo de caja:
Los elementos
HTML son cajas
rectangulares

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
MODELO DE CAJA - Fuente: http://farm7.staticflickr.com/6022/5910326877_4e1ec3edb9_b.jpg

Elementos de la caja
80
Fuente: http://dabrook.org/assets/images/uploads/Box-Model.png

Bordes redondeados: border-radius
82
Probar: http://jsfiddle.net/cif2cif/wrez7/9/

Bordes con sombra: border-shadow
83
Probar en http://jsfiddle.net/cif2cif/zp7Ta/10/

Tamaño de la caja
85
Fuente: http://learn.shayhowe.com/html-css/opening-the-box-model/

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.

Posición: static y relative
87

Posición: absolute y fixed
88

float
89
Fuente: http://css-tricks.com/all-about-floats/

Clear
90
Fuente: http://css-tricks.com/all-about-floats/
#content {float: left;}
#sidebar {float: right;}
#footer {clear: both;}

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

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>

Ejemplo
93
img {float: right;}
Fuente: http://designshack.net/articles/css/everything-you-never-knew-about-css-
floats/

Fondo de la caja
94
Fuente: https://www.goshen.edu/physix/326/cssbox.php

Fotos de fondo
95
#principal{border:3px solid #F33;
background-image:url(./avatar_chico.jpg);

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;
}

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;}

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)

background-size
99
25%
height
background-size: auto 25%

Ejemplo: background-image
101
http://jsfiddle.net/cif2cif/CrNng/

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;

6.
Pasos generales
para realizar una
web
Cómo aplicar
CSS y HTML
para realizar
una web
104

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

7.
Conclusiones
Qué hemos
aprendido
107

108
Sabemos los principios de CSS, pero luego usaremos un
framework que simplificará su uso

Conclusiones
109
GRÁFICOS
DISEÑO
DISPOSICIÓN
COLOR
HTML
CSS
JS
AJAX
SQL
PHP
Node.js
JavaEE
.NET

‘’
110
“Good artists copy,
great artists steal”
Pablo Picasso
“The secret to creativity
is knowing how to hide
your sources”
Albert Einstein

¡Gracias!
¿Alguna pregunta?
cif@gsi.dit.upm.es
111

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

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

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

Introducción CSS

Recomendados

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