Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

03 - CSS3 (I)

No description
by

Alex Rios

on 19 September 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of 03 - CSS3 (I)

Llenguatges de Marques
Videojocs i Oci Digital
CSS3 (I)
Index
Introducció
Fitxers
Regles
Selectors
Classes

Introducció
Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Inicialment HTML només tenia contingut que es volia compartir
Es van crear nous tags per a donar format (color, mida del text...): font, u, center, b
Tant el format com el contingut es poden emmagatzemar en el mateix fitxer HTML:
Planes web més pesades
Codi repetit
No reusabilitat
Modificar el format implica modificar moltes planes







Al 1996 apareix CSS1 (Cascading Style Sheets)
Separació format-contingut.
Actualment CSS3 (encara no és una recomanació.)
Alguns navegadors no suporten totes les característiques de CSS3
http://www.csszengarden.com

tots els elements del mateix tipus
un element del fitxer HTML
un element que es troba dins d'un altre element
tots els elements d'una mateixa classe
un element d'una determinada classe
...
CSS dóna format al contingut.
Fitxers separats.
Reutilització i compartició de format.
Planes web més lleugeres.
Per a reformatejar un grup de planes web només cal modificar els fitxers CSS.
CSS es guarda en fitxers amb extensió .css
Cal connectar HTML i CSS amb el tag "link".

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mi first HTML web page </title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<header><h1>Las razas de El señor de los Anillos</h1></header>
...
Fitxer CSS

Els fitxers CSS tenen extensió .css
Un sol fitxer css es pot compartir entre moltes planes web
Un fitxer CSS conté un conjunt de regles que defineixen l'estil dels tags de l'HTML.

La forma general d'una regla és





selector
{
    atribut: valor;
    atribut: valor;
    ...
}
El selector es el nom del tag, un grup de tags, un ID...
"atribut" és la propietat que es vol assignar al selector (color del text, color del background, posició ...)
"valor" és el valor que se li dóna a l'atribut (red, 100, #FF0000 ...)
Exemples
Tots els <div> d'un fitxer HTML5

div
{
background-color:yellow;
}
Un element amb id


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mi first HTML web page </title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<header><h1>Las razas de El señor de los Anillos</h1></header>
<nav>
<ul>
<li>Elfos</li>
<li>Enanos</li>
<li>Orcos</li>
</ul>
</nav>
<section>
<h3>Razas</h3>
<div>
<div id="elfa">
<img src="Elfa.jpg" alt="elfa" /><br />
Los elfos son criaturas de la mitología nórdica y germánica. Originalmente se trataba de una raza menor de la fertilidad y representados como hombres y mujeres jóvenes, de gran belleza, que viven en bosques, cuevas o fuentes. Se les consideraba como seres de larga vida o inmortales y con poderes de vida.1
</div>
<div>
<img src="enano.jpg" alt="enano" /><br />
Los enanos son una raza fantástica humanoide ficticia que fue adoptada por J. R. R. Tolkien en sus obras desde la mitología. Este autor les dio también el nombre de Khazâd en la propia lengua enana, el khuzdul, y los de Naugrim, menguados, y Gonnhirrim, maestros de la piedra, en élfico.
</div>
<div>
<img src="orco.jpg" alt="orco" /><br />
Son seres o monstruos antropomorfos cuya piel suele tener tonos verdosos.
</div>
</div>
</section>
<footer>
Todos los derechos reservados
</footer>
</body>
</html>
#elfa
{
color:blue;
}
un grup d'elements

h1, h3
{
color:green;
}

un element que es troba dins d'un altre element

ul li
{
color:red;
}
Tots els elements d'una classe
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mi first HTML web page </title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<header><h1>Las razas de El señor de los Anillos</h1></header>
<nav>
<ul>
<li>Elfos</li>
<li>Enanos</li>
<li>Orcos</li>
</ul>
</nav>
<section>
<h3>Razas</h3>
<div>
<div class="raza" id="elfa">
<img src="Elfa.jpg" alt="elfa" /><br />
Los elfos son criaturas de la mitología nórdica y germánica. Originalmente se trataba de una raza menor de la fertilidad y representados como hombres y mujeres jóvenes, de gran belleza, que viven en bosques, cuevas o fuentes. Se les consideraba como seres de larga vida o inmortales y con poderes de vida.1
</div>
<div class="raza">
<img src="enano.jpg" alt="enano" /><br />
Los enanos son una raza fantástica humanoide ficticia que fue adoptada por J. R. R. Tolkien en sus obras desde la mitología. Este autor les dio también el nombre de Khazâd en la propia lengua enana, el khuzdul, y los de Naugrim, menguados, y Gonnhirrim, maestros de la piedra, en élfico.
</div>
<div class="raza">
<img src="orco.jpg" alt="orco" /><br />
Son seres o monstruos antropomorfos cuya piel suele tener tonos verdosos.
</div>
</div>
<div>
«Tres Anillos para los Reyes Elfos bajo el cielo.
Siete para los Señores Enanos en palacios de piedra.
Nueve para los Hombres Mortales condenados a morir.
Uno para el Señor Oscuro, sobre el trono oscuro
en la Tierra de Mordor donde se extienden las Sombras.
Un Anillo para gobernarlos a todos. Un Anillo para encontrarlos,
un Anillo para atraerlos a todos y atarlos en las tinieblas
en la Tierra de Mordor donde se extienden las Sombras».
</div>
</section>
<footer>
Todos los derechos reservados
</footer>
</body>
</html>
.raza
{
background-color:red;
}

tots els elements amb l'atribut
class="raza" es posaran en vermell

una classe agrupa diferents elements sota un mateix nom
es pot crear una regla al CSS per a una classe
a tots els elements que tinguin la classe se'ls aplicarà la regla
un element pot tenir més d'una classe
Classes
Un element d'una classe determinada
<!DOCTYPE html>
<html>
<head>
<style>
img.normal {
height: auto;
}

img.big {
height: 120px;
}

p.ex {
height: 100px;
width: 100px;
border: 3px solid #8AC007;
}
</style>
</head>
<body>

<img class="normal" src="smiley.gif" width="32" height="32"><br>
<img class="big" src="smiley.gif" width="32" height="32">
<p class="ex">The height and width of this paragraph is 100px.</p>
<span class="ex">This is also a paragraph with no height and width specified.</p>

</body>
</html>
p.ex {
height: 100px;
width: 100px;
border: 3px solid #8AC007;
}

només a l'element 'p' amb l'atribut
class="ex" se li aplicarà la regla.
Accumulant classes
<!DOCTYPE html>
<html>
<head>
<style>
img.normal {
height: auto;
}

img.big {
height: 120px;
}

p.ex {
height: 100px;
width: 100px;
border: 3px solid #8AC007;
}

.red {
color:red
}

</style>
</head>
<body>

<img class="normal" src="smiley.gif" width="32" height="32"><br>
<img class="big" src="smiley.gif" width="32" height="32">
<p class="ex">The height and width of this paragraph is 100px.</p>
<span class="ex red">This is also a paragraph with no height and width specified.</p>

</body>
</html>
.ex {
height: 100px;
width: 100px;
border: 3px solid #8AC007;
}

.red {
color:red
}

a l'element span que té l'atribut
class="ex red" se li aplicaran les dues regles
Introducció
Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Fitxers
Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Regles
Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Selectors
Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Exemples
Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Exemples
Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Exemples
Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Exemples
Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Exemples
Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Exemples
Llenguatges de marques: CSS3
Introducció
Fitxers
Regles
Selectors
Classes

Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Autor: Àlex Ríos
alex.rios.jerez@gmail.com
Full transcript