PDF de programación - CSS: Cascading Style Sheets

Imágen de pdf CSS: Cascading Style Sheets

CSS: Cascading Style Sheetsgráfica de visualizaciones

Publicado el 12 de Octubre del 2018
741 visualizaciones desde el 12 de Octubre del 2018
430,0 KB
40 paginas
Creado hace 2a (06/02/2018)
CSS: Cascading Style Sheets

Escuela Técnica Superior de Ingeniería de Telecomunicación

Universidad Rey Juan Carlos

gsyc-profes (arroba) gsyc.urjc.es

Febrero de 2018

GSyC - 2018

CSS

1

Las transparencias del tema “CSS - Hojas de estilo”
están basadas en el libro de librosweb.es
disponible en http://www.librosweb.es/css/
Se ha pedido explícitamente autorización al autor original
para realizar esta obra derivada con fines educativos.
©Javier Eguiluz - Librosweb.es

Derivado a partir de material de
Jesús M. González-Barahona y Gregorio Robles.
El original está disponible en
http://cursosweb.github.io
Algunos derechos reservados.
Este trabajo se distribuye bajo la licencia
Creative Commons Attribution Share-Alike 4.0

GSyC - 2018

CSS

2

¿Qué es CSS?

Hojas de estilo CSS

CSS, Cascading Style Sheets es un lenguaje de hojas de estilos
creado para controlar el aspecto o presentación de los
documentos electrónicos definidos con HTML
Es la mejor forma de separar los contenidos y su
presentación y es imprescindible para crear páginas web
complejas

Obliga a crear documentos HTML bien definidos y con
significado completo (también llamados documentos
semánticos)
Mejora la accesibilidad del documento
Reduce la complejidad de su mantenimiento
Permite visualizar el mismo documento en infinidad de
dispositivos diferentes

GSyC - 2018

CSS

3

Antes del CSS

Hojas de estilo CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Ejemplo de estilos sin CSS</title>
</head>

<body>
<h1><font color="red" face="Arial" size="5">

Titular de la página

</font></h1>
<p><font color="gray" face="Verdana" size="2">

Un párrafo de texto no muy largo.

</font></p>
</body>
</html>

GSyC - 2018

CSS

4

Con CSS

Hojas de estilo CSS

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>Ejemplo de estilos con CSS</title>
<style>

h1 { color: red;
p

}
{ color: gray; font-family: Verdana; font-size: medium; }

font-family: Arial;

font-size: large;

</style>

</head>

<body>

</body>
</html>

<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>

GSyC - 2018

CSS

5

CSS en un documento HTML

Hojas de estilo CSS

Se pueden integrar instrucciones CSS de varias maneras en un
documento HTML:

Incluir CSS en el mismo documento HTML

1
2 Definir CSS en un archivo externo
3

Incluir CSS en los elementos HTML

GSyC - 2018

CSS

6

Glosario Básico (I)

Hojas de estilo CSS

Regla: cada uno de los estilos que componen una hoja de
estilos CSS. Cada regla está compuesta de una parte de
“selectores”, un símbolo de “llave de apertura” ({), otra parte
denominada “declaración” y por último, un símbolo de “llave
de cierre” (}).
Selector: indica el elemento o elementos HTML a los que se
aplica la regla CSS.

GSyC - 2018

CSS

7

Glosario Básico (y II)

Hojas de estilo CSS

Declaración: especifica los estilos que se aplican a los
elementos. Está compuesta por una o más atributos CSS.
Atributo: característica que se modifica en el elemento
seleccionado, como por ejemplo su tamaño de letra, su color
de fondo, etc.
Valor: establece el nuevo valor de la característica modificada
en el elemento.

CSS 2.1 define 115 atributos, mientras que CSS 3 define 239
atributos.

CSS

GSyC - 2018

8

Selectores

Hojas de estilo CSS

A un mismo elemento HTML se le pueden aplicar varias reglas
Cada regla puede aplicarse a un número ilimitado de
elementos
Cuando el selector de dos o más reglas CSS es idéntico, se
pueden agrupar las declaraciones de las reglas para hacer las
hojas de estilos más eficientes
Cuando se establece el valor de un atributo CSS en un
elemento, sus elementos descendientes heredan de forma
automática el valor de ese atributo

GSyC - 2018

CSS

9

Hojas de estilo CSS

CSS 2.1 incluye una docena de tipos diferentes de selectores,
que permiten seleccionar de forma muy precisa elementos
individuales o conjuntos de elementos dentro de una página
web.
Los selectores de CSS tienen mucha utilidad porque también
son usados en JQuery

GSyC - 2018

CSS

10

Selectores básicos

Hojas de estilo CSS

1 Selector universal
2 Selector de tipo o etiqueta
3 Selector descendente
4 Selector de clase
5 Selector de identidad

GSyC - 2018

CSS

11

Selector Universal

Hojas de estilo CSS

No se utiliza habitualmente
Generalmente es equivalente para poner estilo a < body >
Se suele combinar con otros selectores y además, forma parte
de algunos hacks muy utilizados

* {

}

margin: 0;
padding: 0;

GSyC - 2018

CSS

12

Selector de tipo o etiqueta

Hojas de estilo CSS

Selecciona todos los elementos de la página cuya etiqueta
HTML coincide con el valor del selector
Se pueden agrupar todas las reglas individuales en una sola
regla con un selector múltiple.
Buena práctica: agrupar los atributos comunes de varios
elementos en una única regla CSS y posteriormente definir los
atributos específicos de esos mismos elementos

h1, h2, h3 {

color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;

}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

GSyC - 2018

CSS

13

Selector descendente

Hojas de estilo CSS

Selecciona los elementos contenidos dentro de otros
elementos.

Ejemplo: elementos span contenidos dentro de elementos p
p span { color: red; }
[...]
<p>

...
<span>Texto1</span>
<a href="">...<span>Texto2</span></a>
...
</p>

Texto 1 evidentemente cumple la regla.
Texto 2 es un elemento span contenido dentro de un enlace
contenido dentro de un elemento p. Por tanto, Texto 2 están
contenido dentro de un p. Aunque no sea descendente directo, es
descendente y la regla se aplica.

GSyC - 2018

CSS

14

Ejercicio

Hojas de estilo CSS

¿Qué elementos se seleccionarían con estos tipos de selectores?

p a span em { text-decoration: underline; }
p, a, span, em { text-decoration: underline; }
p a { color: red; }
p * a { color: red; }

GSyC - 2018

CSS

15

Selector de clase

Hojas de estilo CSS

Se utiliza el atributo class de HTML sobre ese elemento para
indicar directamente la regla CSS que se le debe aplicar
Se crea en el archivo CSS una nueva regla llamada destacado
con todos los estilos que se van a aplicar al elemento
Se prefija el valor del atributo class con un punto (.)

.destacado { color: red; }
[...]
<p class="destacado">

Lorem ipsum dolor sit amet...

</p>
<p>Nunc sed lacus et

<a href="#" class="destacado">est adipiscing</a>

</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em>
</p>

Esta regla se aplica a cualquier elemento de clase destacado

GSyC - 2018

CSS

16

Hojas de estilo CSS

El atributo clase puede tener varios valores, separados por espacios

<style>
.comentario {color : blue;}
.noticia {color : red;}
.obsoleto {text-decoration : line-through;}
</style>
[...]
<body>

<p class="comentario"> Lorem ipsum dolor sit amet<p>
<p class="comentario obsoleto"> consectetur adipisicing elit, </p>
<p class="noticia "> sed do eiusmod tempor incididunt </p>
<p class="noticia obsoleto"> ut labore et dolore magna aliqua.</p>

</body>

Ejemplo:
http://ortuno.es/ej000_clases.html

GSyC - 2018

CSS

17

Selector de clase más específico

Hojas de estilo CSS

Combinando el selector de tipo y el selector de clase, se
obtiene un selector mucho más específico.

p.destacado { color: red }
[...]
<p class="destacado">

Lorem ipsum dolor sit amet...

</p>
<p>Nunc sed lacus et

<a href="#" class="destacado">est adipiscing</a>

</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em>
</p>

Esta regla se aplica a los elementos de tipo párrafo, que además
sean de clase destacado. (En este ejemplo, solo una vez)

GSyC - 2018

CSS

18

Ejercicio

Hojas de estilo CSS

¿Qué elementos se seleccionarían con estos tipos de selectores?

p.aviso { ... }
p .aviso { ... }
p, .aviso { ... }
*.aviso { ... }

GSyC - 2018

CSS

19

Selectores de identificador

Hojas de estilo CSS

Aplica estilos CSS a un único elemento de la página
El valor del atributo id no se puede repetir en dos elementos
diferentes de una misma página

#destacado { color: red; }

<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>

GSyC - 2018

CSS

20

Ejercicio

Hojas de estilo CSS

¿Qué elementos se seleccionarían con estos tipos de selectores?

p#aviso { ... }
p #aviso { ... }
p, #aviso { ... }
*#aviso { ... }

GSyC - 2018

CSS

21

Ejercicio: Combinación de selectores

Hojas de estilo CSS

¿Qué elementos se seleccionarían con estos tipos de selectores?

.aviso .especial { ... }
div.aviso span.especial { ... }
ul#menuPrincipal li.destacado a#inicio { ... }

GSyC - 2018

CSS

22

Colisión de estilos (simplificado)

Hojas de estilo CSS

1 Cuanto más específico sea un selector, más importancia tiene

su regla asociada.

2 A igual especificidad, se considera la última regla indicada.

GSyC - 2018

CSS

23

Otros selectores

Hojas de estilo CSS

Concatenación de clases
.clase1.clase2 {atributo:valor;}
La regla se aplica a los elementos cuyo atributo class
contengan tanto clase1 como clase2
Selector hijo directo
p > span {atributo:valor;}
Elementos span directamente contendidos dentro de un
elemento p
Selector adayacente
h2 + h3 {atributo:valor;}
Elemento h3 inmediatamente después de un elemento h2

GSyC - 2018

CSS

24

Selector de atributos

Hojas de estilo CSS

div[class] { atributo: valor;}
Elementos div que tengan establecido un atributo con nombre
class
div[class="nacional"] { atributo: valor;}
Elementos div que tengan establecido un atributo con nombre
class y valor nacional
div[class˜="nacional"] { atributo: valor;}
Elementos div que tengan establecido un atributo con nombre
class y al menos uno de sus valores sea nacional

GSyC - 2018

CSS

25

Unidades de medida

Hojas de estilo CSS

Unidades absolutas

in, cm, mm, pt, pc

Unidades relativas

em, ex, px

Porcentajes

En general, se
  • Links de descarga
http://lwp-l.com/pdf13842

Comentarios de: CSS: Cascading Style Sheets (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad