labo 7:cascading style sheets ou feuille de style part 2
TRANSCRIPT
LABO 7:CASCADING STYLE SHEETS OU FEUILLE DE STYLE
PART 2
Ruben Chambilla
INF2005 - 30 Programmation web Automne 2017
Groupe 1 : Vendredi De 18h00 à 20h00 - PK-S1530 | Campus de Montréal
UQAM – INF2005 Programmation web Automne 2017
CSS, RESPONSIVE DESIGN
https://webthemez.com/creative-free-responsive-html5-business-template/https://semantic-ui.com/
UQAM – INF2005 Programmation web Automne 2017
RÈGLES
UQAM – INF2005 Programmation web Automne 2017
CSS
/* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */
@media screen and (max-width: 1280px)
/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre
1024px et 1280px */
@media all and (min-width: 1024px) and (max-width: 1280px)
/* Sur les téléviseurs */
@media tv
/* Sur tous types d'écrans orientés verticalement */
@media all and (orientation: portrait)
UQAM – INF2005 Programmation web Automne 2017
En-tête <header> </header>
Menu <nav></nav> <li></li>
Contenu du page web<article>, <div><p>
<form><table>,<td>, <tr>
<img>, <b>
Colonne
<aside> </aside>
Bas de page<footer> </footer>
700
50
50
Sect
ion
<sec
tio
n><
/sec
tio
n
Contenu du page web<article>, <div><p>
<form><table>,<td>, <tr>
<img>, <b>
100
1200
300
500
20
20
20
20
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la
mise en page avant impression. Le Lorem Ipsum est le faux texte standard de
l'imprimerie depuis les années 1500,
Article
SectionLe Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500,
Margin Padding
UQAM – INF2005 Programmation web Automne 2017
LES SÉLECTEURS
Tout simplement à définir des styles particuliers que l'on voudra reproduire de façon ponctuelle ou récurrente dans les pages HTML.
Le sélecteur de type Le sélecteur class
Le nom du sélecteur class
est toujours précédé d'un
point.
Permettent de cibler des
éléments d'un document en
fonction du contenu de
l'attribut class de chaque
élément.
Ciblent des éléments en
fonction du nom de leur
nœud.
tous les nœuds avec ce
nom contenus dans le
document
Le nom du sélecteur est le
nom de la balise ou nœud
a { color: purple; } .nomdeclasse { déclarations }
Le sélecteur ID
Le nom du sélecteur class est
toujours précédé d’un #.
Cibler un élément grâce à
la valeur de son attribut id
Il faut que la valeur soit
exactement la même que
celle du sélecteur pour que
l'élément soit effectivement
ciblé.
#valeur_id { déclarations }
UQAM – INF2005 Programmation web Automne 2017
CSS - INITIAL
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><meta name="viewport" content="width=device-width, user-scalable=yes" /><title>HTML5 responsive site web</title><link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'/>
head>
/* ------- MEDIA -----*/
@media (max-width: 1000px) {
/* votre code ici, pour les écrans de taille <1000px */
}
@media (max-width: 800px) {
/* votre code ici */
}
@media (max-width: 400px) {
/* votre code ici */}
UQAM – INF2005 Programmation web Automne 2017
BOOSTRAP
UQAM – INF2005 Programmation web Automne 2017
SEMANTIC UI
UQAM – INF2005 Programmation web Automne 2017
EXERCISES
UQAM – INF2005 Programmation web Automne 2017
UQAM – INF2005 Programmation web Automne 2017
VERSION
UQAM – INF2005 Programmation web Automne 2017
INFORMATION SUR WEB
https://www.w3schools.com/css/css_rwd_intro.asp
https://www.w3schools.com/css/css_rwd_viewport.asp
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-
adaptative-avec-les-media-queries
Semantic UI
https://codepen.io/appsoa/pen/vNrVMP