Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • (Cascading Style Sheets) : Programmation Web2.0: Chapitre1-Les Feuilles de Style Css

    Загружено:

    Anouar Kacem
    120 просмотров19 страниц

    Оригинальное название

    Css

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    120 просмотров19 страниц

    (Cascading Style Sheets) : Programmation Web2.0: Chapitre1-Les Feuilles de Style Css

    Загружено:

    Anouar Kacem

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 19

    PROGRAMMATION WEB2.

    0: CHAPITRE1-LES FEUILLES DE STYLE CSS

    Institut Suprieur dInformatique de Mahdia

    (CASCADING STYLE SHEETS)


    Enseignants Responsable: Gargouri Fahmi Haddar Nahla Kaouthar Hila Branches: LAI1 & LARI1

    PLAN
    1. 2. 3. 4. 5. 6. 7. Les feuilles de style CSS Style dans la page Du HTML au CSS Cration de style Les feuilles de style externes Proprits hrites d'un parent Les proprits de style

    LES FEUILLES DE STYLE CSS


    o

    o o

    Le World Wide Web a introduit les feuilles de styles en cascade pour complter la langage HTML. Les CSS permettent de grer l'apparence des documents. Les feuilles indiquent aux balises HTML leur comportement ou style.

    STYLE DANS LA PAGE


    <HTML><HEA <style type="text/css"> D> body { margin: 10px ; text-align: center ; } </style> </HEAD> <BODY> Ici le corps de la page </BODY></HTML>
    4

    DU HTML AU CSS : PRINCIPE


    .HTML <HTML> <HEAD> <TITLE>Le CSS</TITLE>

    <link rel="stylesheet" type= "text/css" href= "fichier.css"> <link rel="stylesheet" type= "text/css" href= "fichier.css">
    </HEAD> <BODY> <H1>Introduction</H1> ... </BODY> </HTML> Le Rsultat Introduction

    H1 { color : red ; } Fichier.CSS

    CRATION DE STYLE
    1) Modifier le style des balises existantes: Consiste modifier le style dune ou plusieurs balise qui existent dans le corps du document HTML.
    Slecteur HTML <HTML><HEAD> <STYLE> TD, P {font-family : arial ; font-size : 12pt} </STYLE> </HEAD> <BODY> <TABLE> <TR> <TD> CELLULE 1</TD> <TD> CELLULE 2 </TD> </TR> </TABLE> <P>TEXTE</P> </BODY></HTML> Ici, toutes les cellules TD et P auront comme style par dfaut Arial 12pt. On peut modifier ainsi toutes les balises existantes.
    6

    Proprit

    Valeur

    Dfinition

    CRATION DE STYLE
    Le cas particulier de la balise de lien A La balise <A> est particulire, car elle peut tre drive selon l'action du visiteur. On obtient ainsi 3 balises A.
    A:hover

    {color:gray} A:active {color:red} A:visited {color:green}


    Avec

    cette dclaration, le texte de lien :

    devient

    gris au passage de la souris, devient rouge sur un clic, reste vert pour indiquer que ce lien a t visit.

    CRATION DE STYLE
    2) Cration de classes
    Une classe est un style indpendant que l'on peut appliquer toute balises HTML. Par exemple dans cette page, les parties de code sont en courier new vert, grce la classe de style "code" qui est dclare ainsi :
    Slecteur de Classe Proprit Valeur

    <HTML><HEAD> <STYLE TYPE="TEXT/CSS" > .code {font-family:courrier ; color:green} </STYLE> </HEAD> Le point devant code indique la cration d'une nouvelle classe appele code. Pour affecter ce style une portion de texte, on crit : <P class="code">texte mis en forme</P> . Pour donner le style courier new vert une cellule de tableau, on crit : <TD class="code">cellule en police courrier vert</TD>
    8

    Dfinition

    CRATION DE STYLE
    3) Cration de ID
    utile pour spcifier des rgles qui ne s'appliquent qu' un lment avec un ID unique donn dfini par l'attribut id en HTML.
    Pas Trs

    plus d'un lment ne doit avoir un ID donn. .HTML Le Rsultat

    <BODY>

    <div id="bloc_unique"> Bloc A </div> </BODY>


    Le slecteur id

    Bloc A

    #bloc_unique

    { background-color:black; color:white ; }

    .CSS

    Llment devient unique, il est utilis une seule fois dans la page.
    9

    CRATION DE STYLE
    3) Affecter l'attribut style

    n'est pas indispensable de crer une classe de style pour affecter un style un objet.
    Par

    Il

    exemple :

    <div style="font-family: courier ; color:green"> Texte mis en forme </div>

    style d'une balise reoit les proprits de style. Il est toutefois prfrable de dclarer une classe pour regrouper la mise en forme.
    10

    L'attribut

    LES FEUILLES DE STYLE EXTERNES


    d'un fichier de feuille de style est toujours .css Le fichier CSS contient uniquement l'intrieur des balises <STYLE>.
    L'extension

    Voici un exemple de fichier de style appel style.css :

    /* Ceci est un commentaire */ TD {font-family:arial;font-size:12pt} .code {font-family:courrier;color:green} fichier style.css ne contient pas les balises <STYLE>.
    Les Le

    commentaires sont marqus par /* */.


    11

    PROPRITS HRITES D'UN PARENT


    Toutes balises ont un parent : une balise conteneur qui les encadre. Les balises HTML s'approprient gnralement les styles des balises imbriques dans leur parent : c'est l'hritage de style

    <body> /* style caractre par dfaut est times*/ <b style="color:red" > /* style=times+bold*/ <i> Denis Style=times+bold+italique </i> </b> </body>
    12

    LES PROPRITS DE STYLE


    Nous avons vu comment dclarer les styles dans une page. La norme CSS a prvu de nombreuses proprits pour les diffrents objets HTML. Toutes ces proprits ne sont pas prises en compte dans tous les navigateurs. Netscape 4.X en particulier est assez en retard par rapport Internet Explorer 4 et 5, qui lui-mme ne respecte pas toutes les normes.
    Les proprits de police
    Normes respectes par Internet Explorer et Netscape.

    Proprit font-size

    Signification Hauteur de police en points ou pixels

    Valeurs possibles font-size:12px font-size:10pt font-family:arial,verdana font-family:sans serif font-weight:bold font-weight:normal font-style:italic font-style:normal color:green color:#FFCC00

    font-family

    Nom de police

    font-weight font-style color

    paisseur de la police (gras) Style de police (italic) Couleur de police

    13

    Les proprits de texte


    Normes respectes par Internet Explorer et Netscape.

    Proprit

    Signification

    Valeurs possibles

    text-height

    Hauteur de ligne en points ou pixels

    text-height:12px

    text-decoration

    Attribut de soulignement

    text-decoration:overline text-decoration:line-through text-decoration:underline text-decoration:none text-align:left text-align:right text-align:center text-indent:25px text-indent:-15px text-transform:capitalize text-transform:uppercase text-transform:lowercase

    text-align

    Alignement de paragraphe (balise P)

    text-indent

    Indentation de paragraphe (balise P)

    text-transform

    Transformation des majuscules

    14

    Les proprits d'arrire-plan


    Seul Internet Explorer 4 et 5 .. permet de choisir une image d'arrire plan.

    Proprit background

    Signification Image d'arrire-plan

    Valeurs possibles background:image.gif

    background-color

    Couleur d'arrire-plan

    background-color:black

    15

    Les proprits de positionnement


    Netscape 4.X a un gestion particulire des proprits de positionnement.

    Proprit clip width height top left overflow

    Signification Clipping Largeur de la zone Hauteur de la zone Ordonne du coin suprieur gauche Abscisse du coin suprieur gauche Recouvrement

    Valeurs possibles clip:auto width:auto width:150 height:auto height:100 top:10 left:400 overflow:clip overflow:scroll overflow:none position:absolute position:relative position:static visibility:hidden visibility:visible 16

    position visibility

    Type de positionnement Visibilit

    Les proprits d'encadrement (1) Aucune de ces proprits n'est reconnue par Netscape 4.X. Internet Explorer respecte presque compltement l'affichage de ces proprits.

    Proprit margin-top

    Signification Marge du haut en pixels

    Valeurs possibles margin-top:10

    margin-right

    Marge du bas en pixels

    margin-right:15

    marginbottom

    Marge du haut en pixels

    margin-bottom:15

    margin-left

    Marge de gauche en pixels

    margin-left:10

    margin

    Groupement des 4 marges haute, droite, bas et gauche

    margin:10,15,15,10

    17

    Les proprits d'encadrement (2)

    padding-top

    Espacement en haut

    padding-top:10

    padding-right

    Espacement droite

    padding-right:10

    paddingbottom

    Espacement en bas

    padding-bottom:10

    padding-left

    Espacement gauche

    padding-left:10

    padding

    Groupement des espacements en haut, droite, en bas et gauche

    padding:10,10,10,10

    18

    Les proprits d'encadrement (3) border-style Style de contour none, solid, double, groove, ridge, inset, outset border-color:red border-width:3px thin, medium, thick border-left-width:thin

    border-color

    Couleur de contour

    border-width border-leftwidth border-rightwidth border-topwidth borderbottom-width

    Largeur de contour

    Epaisseur du trait de contour gauche

    Epaisseur du trait de contour droit

    border-right-width:medium

    Epaisseur du trait de contour haut

    border-top-width:thick

    Epaisseur du trait de contour bas

    border-bottom-width:0px 19

    float

    Flottaison du bloc A viter

    float:right float:left

    Вам также может понравиться