Top Banner

Click here to load reader

HTML 5/CSS 3/Javascript beurton/Enseignement/PI/CSS-en.pdf · PDF file CSS Dé nition (CSS) CSS( Cascading Style Sheets , isa language allowing description of HTML page presentation.

Oct 19, 2020

ReportDownload

Documents

others

  • Université de Bordeaux International Track - Informatics Unit.

    Initiation au développement Web

    HTML 5/CSS 3/Javascript

    Florent Grélard, Marie Beurton-Aimar (Étienne André) [email protected]

    http://dept-info.labri.fr/~beurton

    Version : 15 avril 2019 (diapositives de présentation)

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 1 / 24

    [email protected] http://dept-info.labri.fr/~beurton

  • CSS

    Dé�nition (CSS)

    CSS (Cascading Style Sheets, is a language allowing description of HTML page presentation.

    Standard developped by the W3C.

    CSS is updated by level and not by version.

    Level 3 reuses and extends the 1 and 2 levels.

    Di�erent from HTML !

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 2 / 24

  • CSS

    Dé�nition (CSS)

    CSS (Cascading Style Sheets, is a language allowing description of HTML page presentation.

    Standard developped by the W3C.

    CSS is updated by level and not by version.

    Level 3 reuses and extends the 1 and 2 levels.

    Di�erent from HTML !

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 2 / 24

  • Principle : format and content are separated.

    Principle

    The principle is to separate the content (HTML) to the format (CSS).

    A CSS style sheet build the format of the HTML page.

    Good practice

    An HTML site well designed has to not contain any style information inside the HTML documents.

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 3 / 24

  • CSS3 Syntax - simple Example

    Page HTML :

    . . . Happy Together

    Wong Kar−Wai movie r e a l i z e d i n 1997

    . . .

    Style sheet :

    body { c o l o r : #000080;

    }

    h1 { font−we ight : bo ld ; font−s t y l e : i t a l i c ; c o l o r : r ed ; font−s i z e : 24px ;

    }

    Displaying :

    Happy Together

    Wong Kar-Wai Movie realized in 1997

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 4 / 24

  • CSS3 Syntax - simple Example

    Page HTML :

    . . . Happy Together

    Wong Kar−Wai movie r e a l i z e d i n 1997

    . . .

    Style sheet :

    body { c o l o r : #000080;

    }

    h1 { font−we ight : bo ld ; font−s t y l e : i t a l i c ; c o l o r : r ed ; font−s i z e : 24px ;

    }

    Displaying :

    Happy Together

    Wong Kar-Wai Movie realized in 1997

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 4 / 24

  • Main Syntax of the CSS sheet

    Selecting︷︸︸︷ h1 {

    font-weight︸ ︷︷ ︸ Property

    : bold︸︷︷︸ Values

    ;

    font-family︸ ︷︷ ︸ Property

    : Times New Roman, Times, serif︸ ︷︷ ︸ Values

    ;

    }

    Remarques :

    Extending .css

    No head part or bottom in a CSS �le.

    Syntax no sensible to the space or end of line. I BUT indentation is strongly recommanded !

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 5 / 24

  • Style included or separeted ? (1/2)

    Bad :

    Happy Together

    A little bit better :

    . . .

    h1 { c o l o r : r ed ; }

    . . .

    Happy Together

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 6 / 24

  • Style included or separeted ? (2/2)

    Godd :

    . . . < l i n k r e l=" s t y l e s h e e t " type=" t e x t / c s s "

    media=" s c r e e n " h r e f="mys ty l e . c s s " /> . . .

    Happy Together

    . . .where mystyle.css is a separeted �le de�ning the properties of (and of the others tags).

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 7 / 24

  • Comments

    Comments are CSS code which is not executed, so not taken into account by the browser. Syntax : /* Text in comments */

    body { c o l o r : #000080; /∗ the c o l o r ∗/ /∗ t ex t−d e c o r a t i o n : l i n e−th rough ; ∗/ }

    Attention

    Comments stay visible in the source style sheet, which is visible from the client part.

    DO NOT leave inside con�dential information !

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 8 / 24

  • Comments

    Comments are CSS code which is not executed, so not taken into account by the browser. Syntax : /* Text in comments */

    body { c o l o r : #000080; /∗ the c o l o r ∗/ /∗ t ex t−d e c o r a t i o n : l i n e−th rough ; ∗/ }

    Attention

    Comments stay visible in the source style sheet, which is visible from the client part.

    DO NOT leave inside con�dential information !

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 8 / 24

  • Displaying text

    Properties : styles

    Property font-size : police size I Constant predefined values : xx-small, x-small, medium, large,

    x-large, xx-large I Relative predefined values : smaller, larger I Numeric values : x units, where unit ∈ {pt, px, em, %}

    Property font-weight : thickness of the police I Predefined values : lighter, normal, bold, bolder I Numeric values : x ∈ [0; 1000] (1000 is the most thick)

    Property font-style : tilting of the police I Predefined values : normal, italic, oblique

    Property text-decoration : decoration (underline, overline) I Predefined values : underline, overline, line-through, none

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 9 / 24

  • Displaying text

    Properties : police

    Property font-family : families of font polices I Major families : serif, sans-serif, mono, monospace I Police name : Arial, Courier New, Courier, Helvetica, Times New

    Roman, Times, and more ...

    vif zephyr vif zephyr vif zephyr serif sans-serif monospace

    Good practices for typography

    1 Titles are most often with sans-serif, and body with serif.

    2 It is recommended to not mix font families into the same document.

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 10 / 24

  • Displaying text

    Properties : colors

    Property color : police colors

    I Predefined colors : red, blue, green, orange, etc. F See examples at web-color.aliasdmc.fr/

    I Users values : F Hexadecimal : #RRVVBB F RVB : rgb(r, g, b) with values from 0 to 255 F RVB : rgb(r%, g%, b%) with values from 0 to 100 F RVB + transparency : rgba(r, g, b, a) with values from 0 to 255,

    and transparency (a) between 0 and 1 F HSL (color / saturation / light) : hsl and hsla

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 11 / 24

    web-color.aliasdmc.fr/

  • Displaying text

    Format - Identi�ants and classes

    Identi�ants

    Syntax HTML :

    Syntax CSS : h1 #title { ... }

    Usage unic (only one id=title in the HTML page.)

    Classes

    Syntax HTML :

    Syntax CSS : h1 .title { ... }

    Usage multiple (several class=title autorized in the HTML page.)

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 12 / 24

  • Displaying text

    Identi�ants and classes : example

    Page HTML :

    As Tears Go By Nos annees sauvage s Les Cendres du temps Chungking Exp r e s s Les Anges dechus

    Style sheet :

    h2 { font−s t y l e : i t a l i c ;

    } #pr em i e r {

    c o l o r : r ed ; } . b l e u {

    c o l o r : b l u e ; }

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 13 / 24

  • Displaying text

    Identi�ants and classes : example (displaying)

    As Tears Go By

    Nos annees sauvages

    Les Cendres du temps

    Chungking Express

    Les Anges dechus

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 14 / 24

  • Displaying text

    Inheritance

    CSS properties inherit from parent properties.

    Inheritance specialisation of property :

    h2 #first inherits from h2

    h2 .blue inherits from h2 (but not from h2 #first)

    Inheritance by property semantically parented :

    h2 inherits from body

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 15 / 24

  • Displaying text

    Margins and edges

    All HTML element is considered as contained in a box, de�ned with :

    internal surface (background)

    internal space (padding)

    edge (border)

    external margin (margin)

    margin

    border

    padding

    background

    Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.