2. CSS
René Guamán-Quinche
Facultad de la Energía, las Industrias y los Recursos Naturales No Renovables
Carrera de Ingeniería en Sistemas/Computación
Mayo, 2020
Loja, Ecuador
3. 3
1. CSS
2. Acoplamiento
3. Selectores
4. Unidades de Medida
5. Colores, margenes, relleno, bordes, fondos, textos, enlaces
6. Transacciones y animaciones de CSS3
7. ¿Cómo usar nth-child en CSS?
8. Otros selectores
Agenda
4. 4
La Web
En la web no sólo se accede
desde un navegador
(ordenador) sino de cualquier
dispositivo
5. 5
La Web
En un diseño adaptable, la
visualización de la página se ajusta
de forma dinámica a las
características de cada dispositivo.
6. 6
CSS
Un diseño adaptable se basa en emplear, de forma bastante
ingeniosa, ciertas características de css que no eran muy
conocidas
Cascading Style Sheets
7. 7
CSS
Se define por un conjunto de reglas
Selectores: h1, body, html
Declaración: bloque de estilos
11. 11
Acoplamiento
Evitar el acoplamiento
En html se puede indicar que queremos aplicar unas
reglas Css
existen tres formas:
Atributo style
Etiqueta <style>
Etiqueta <link>
Al usar el atributo style haremos que exista una
máximo
acoplama entre html y css
13. 13
Acoplamiento: atributo style
Ejemplo:
<body style=”color:#333; background-color:#ccc;”>
<h1 style=”font-family:Georgia; font-size:3em;”> es un párrafo</h1>
Con el atributo style se establece un alto acoplamienta entre html y css
Se recomienda evitar este tipo de acoplamiento
14. 14
Acoplamiento: etiqueta <style>
Reduce un poco el acoplamiento entre html y css
Pero el código css sigue estando en el código html
Se la declara dentro de la etiqueta <head>
Con la etiqueta style se establece un
acoplamiento medio entre html y css
Se recomienda evitar este tipo de
acoplamiento
16. 16
Acoplamiento: etiqueta <link>
Reduce el acoplamiento entre html y css al máximo
El código css y html se encuentren en archivos separados
Con estos diferentes fichero html usen el mismo fichero css
Se la declara dentro de la etiqueta <head>
Atributos
href = indica la ruta del fichero de la hoja de estilo
rel="stylesheet" que indica que es una hoja de estilo
17. 17
Acoplamiento: etiqueta <link>
Se crea un archivo .css
Agregamos un conjunto de reglas
body{
background-color: #ccc;
color:#333;
}
h1, h2{
font-family: Georgia
}
h1{
font-size: 2em
}
h2{
font-size: 3em
}
18. 18
Acoplamiento: etiqueta <link>
Luego agregamos el enlace en la página html
<head>
<meta charset="utf-8"/>
<title>Curriculum Edwin Guamán</title>
<link href ="estilo.css" rel ="stylesheet" type="text/css"/>
</style>
</head>
19. 19
Selectores
Los selectores css se los usa en javascript, jquery, dom
Se utiliza para seleccionar todos los elementos de la página
o Selectores de tipo
o Selectores por clases
o Selectores por identificador
21. 21
Selectores de clase
Selectores por clase: atributo class, común en todas las etiquetas html,
permite definir las clases que se aplicarán a una determinada etiqueta
En css los nombre de las clases vienen precedidos por el caracter “.”
22. 22
Selectores de clase
Este tipo de selector se aplicará a todas las etiquetas cuyo atributo
<class> lo incluyan
23. 23
Selectores de clase
En las etiquetas se pueden agregar un conjunto de reglas por clase
separándolas por espacios
24. 24
Selectores de clase
Se puede realizar combinacion de selectores
Se puede combinar un selector por tipo y por clase
25. 25
Selectores por identificador
El caracter inicial en css es # (en lugar de .)
Se aplicará a todas las etiquetas cuyo atributo id coincidan con el texto
tras la #
Se supone que el atributo id es único en html
29. 29
Unidades de Medida
Unidades absolutas
in, pulgadas ("inches", en inglés). Una pulgada equivale a
2.54 centímetros.
cm, centímetros.
mm, milímetros.
pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos
0.35 milímetros.
pc, picas. Una pica equivale a 12 puntos, es decir, unos
4.23 milímetros.
30. 30
Unidades de Medida
Unidades absolutas
body { margin: 0.5in; }
/* Los elementos <h1> deben mostrar un interlineado de 2
centímetros */
h1 { line-height: 2cm; }
/* Las palabras de todos los párrafos deben estar separadas 4
milímetros entre si */
p { word-spacing: 4mm; }
a { font-size: 12pt }
span { font-size: 1pc }
31. 31
Unidades de Medida
Unidades relativas
em, (no confundir con la etiqueta <em> de HTML) relativa
respecto del tamaño de letra del elemento.
ex, relativa respecto de la altura de la letra x ("equis
minúscula") del tipo y tamaño de letra del elemento.
px, (píxel) relativa respecto de la resolución de la pantalla
del dispositivo en el que se visualiza la página HTML.
32. 32
Unidades de Medida
Unidades relativas
p { margin: 1em; }
p { font-size: 32px; margin: 1em; }
p { font-size: 32px; margin: 0.5em; }
Porcentaje: también es una unidad de medida relativa
h1 { font-size: 200%; }
h2 { font-size: 150%; }
34. 34
Colores
RGB decimal
R rojo G verde y B azul
Pueden tomar valores de 0 a 255
p {
color: rgb(71, 98, 176);
}
RGB porcentual
R rojo G verde y B azul
puede tomar valores entre 0% y 100%
p {
color: rgb(27%, 38%, 99%);
}
35. 35
Colores
RGB hexadecimal
R rojo G verde y B azul
puede tomar valores entre 0 a 9 y A a F
p {
color: #4762B0
}
body {
background-color: #FFF; color: #000;
}
37. 37
Relleno
body {padding: 2em}
body {padding: 1em 2em}
body {padding: 1em 2em 3em}
body {padding: 1em 2em 3em 4em}
Establece la separación entre el contenido y los bordes laterales de la
caja del elemento
38. 38
Relleno
/* Todos los rellenos valen 2em */
body {padding: 2em}
/* Superior e inferior = 1em, Izquierdo y derecho = 2em */
body {padding: 1em 2em}
/* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 2em */
body {padding: 1em 2em 3em}
/* Superior = 1em, derecho = 2em, inferior = 3em, izquierdo = 4em
body {padding: 1em 2em 3em 4em}