Css

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
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
La Web
En la web no sólo se accede
desde un navegador
(ordenador) sino de cualquier
dispositivo

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
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
CSS
Se define por un conjunto de reglas
Selectores: h1, body, html
Declaración: bloque de estilos

8
CSS
W3c: vela por el correcto desarrollo de la web

10
Acoplamiento
Evitar el acoplamiento
Existe un acoplamiento entre
ambas tecnologías hay que
reducir este acoplamiento
entre estas dos tecnologías

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

12
Acoplamiento: atributo style
Es un atributo que se puede aplicar a casi todos los elementos de html

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

15
Acoplamiento: etiqueta <style>
<head>
<meta charset="utf-8"/>
<title>Curriculum Edwin Guamán</title>
<style type="text/css">
body{
background-color: #ccc;
color:#333;
}
h1, h2{
font-family: Georgia
}
h1{
font-size: 2em
}
h2{
font-size: 3em
}
</style>
</head>

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

20
Selectores de tipo
Selectores de tipo: hacer referencia a etiquetas del mismo tipo.

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
Selectores de clase
Este tipo de selector se aplicará a todas las etiquetas cuyo atributo
<class> lo incluyan

23
Selectores de clase
En las etiquetas se pueden agregar un conjunto de reglas por clase
separándolas por espacios

24
Selectores de clase
Se puede realizar combinacion de selectores
Se puede combinar un selector por tipo y por clase

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

26
Selectores de etiquetas anidadas

27

28

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
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
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
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
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
puede tomar valores entre 0% y 100%
p {
color: rgb(27%, 38%, 99%);
}

35
Colores
RGB hexadecimal
puede tomar valores entre 0 a 9 y A a F
p {
color: #4762B0
}
body {
background-color: #FFF; color: #000;
}

36
Margen
.destacado {
margin-left: 2em;
}
<p class="destacado">
Es un párrafo ….
</p>
Margin-top
Margin-bottom
Margin-left
Margin-right

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

56
Transacciones y animaciones de CSS3

57

58

59

60

61

62

63

64

65

66
¿Cómo usar nth-child en CSS?

67

68

72
Otros selectores
Se utiliza a enlaces que son pulsados

74
Cŕeditos
• Transparencias basadas por:
• Sergio Lojan Mora, La web, Idesweb UA:
https://www.youtube.com/watch?v=7aAsXtFzNH8

Networking académico:
Correo electrónico: rguaman@unl.edu.ec
Twitter: @rene5254
SlideShare: https://es.slideshare.net/rene5254
75
Gracias

Css

Más contenido relacionado

Similar a Css (20)

Más de Rene Guaman-Quinche (20)

Último (6)

Css