Cascading Style Sheet CSS felipe@ift3225 Hiver 2020 Faits CSS1 en - - PowerPoint PPT Presentation
Cascading Style Sheet CSS felipe@ift3225 Hiver 2020 Faits CSS1 en 1996 (W3C) CSS2 en 1998 (pas adopte) CSS2.1 (2004-2011) CSS3 (depuis 2009) dcoup en modules qui voluent indpendamment HTML = contenu CSS =
felipe@ift3225 Hiver 2020
HTML = contenu CSS = présentation
Séparer les deux:
font-weight p ul color: red Commentaires en CSS: /* … */
<head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head>
<head> <link href="path/to/file.css" rel="stylesheet" type="text/css"> </head>
crédit
MDN
@namespace url(http://www.w3.org/1999/xhtml); @namespace svg url(http://www.w3.org/2000/svg); /* This matches all XHTML (default namespace) <a> elements */ a {} /* This matches all SVG <a> elements */ svg|a {} /* This matches both XHTML and SVG <a> elements */ *|a {}
[att] Represents an element with the att attribute, whatever the value
[att=val] Represents an element with the att attribute whose value is exactly "val". [att~=val] Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything. [att|=val] Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.
W3C
[att^=val] Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything. [att$=val] Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything. [att*=val] Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.
W3C
MDN si une erreur se cache dans un sélecteur regroupé, alors la règle au complet est ignorée
h1, h2..foo, h3 { font-family: sans-serif }
MDN
MDN
a.external:visited
device, but does not necessarily activate it.
W3C
such elements have a corresponding disabled state.
disabled state; such elements have a corresponding enabled state.
html|*:not(:link):not(:visited)
Propriétés non spécifiées par le marquage ::before ::after ::first-line ::first-letter
p::first-line { text-transform: uppercase } p::first-letter { color: green; font-size: 200% }
p { font-family: "Times New Roman", Times, serif; }
souhaitée générique (défaut)
Chaque élément, string dans le document HTML est associé à une boîte qui permet son placement sur la fenêtre.
notez la date du document !
The following code demonstrates some possible margin declarations.
body { margin: 2em } /* all margins set to 2em */ body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
The last rule of the example above is equivalent to the example below:
body { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* copied from opposite side (right) */ }
La propriété box-sizing a 3 valeurs: content-box padding-box Border-box
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
Reset
Pour des sites fluides Défaut
https://css-tricks.com/box-sizing/
https://css-tricks.com/international-box-sizing-awareness-day/
.outer { border: 5px solid black; } .box { padding: 10px; width: calc(90% - 30px); background-color: rebeccapurple; color: white; } .foo {
width: var(--widthC); }
<length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer>
Les règles proviennent:
plus important moins important Les règles s’appliquant à un élément sont triées:
sélecteurs:
classes (:hover)
Le sélecteur universel, la négation (pas son contenu) ne comptent pas dans le calcul de la spécificité
https://specifishity.com
#someElement p { color: blue; } p.awesome { color: red; }
le gagnant
p.awesome { color: red !important; }
mauvaise pratique <div id="someElement"> <p class="awesome"> halo </p> </div>
https://css-tricks.com/precedence-css-order-css-matters/ À spécificité égale, l’ordre compte:
@media print { body { font-size: 10pt; } } @media screen { body { font-size: 13px; } } @media screen, print { body { line-height: 1.2; } } @media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) { body { line-height: 1.4; } }
screen speech print all
// Extra small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
On parle souvent de breakpoint.
Variables
SASS: Syntactically Awesome
Imbrication
Opérateurs
Inbrication
Mixins
Définit ici une macro transform que l’on peut par la suite utiliser pour éviter la duplication de code css
Héritage
Préprocesseur
sass --watch input.scss output.css
Dans votre terminal: pour une transformation à la demande
sass --watch app/sass:public/stylesheets
transformation lors de changements dans les s(a|c)ss