Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Feuilles de style en cascade CSS dans Dreamweaver

 

Ce tutoriel présente l'utilisation de feuilles de style en cascade dans Dreamweaver CS .

Les feuilles de style en cascade (CSS) ont révolutionné la mise en forme des pages Web.

Ils sont une collection de règles de formatage qui contrôlent tous les aspects de l'apparence d'une page Web. Ils fonctionnent sur tous les aspects de la mise en forme, y compris le texte et la mise en formedu paragraphe. Les feuilles de style sont portables et flexibles.

La structure des feuilles de style en cascade, c'est qu'il y a un sélecteur, une propriété et une valeur. Une déclaration typique CSS ressemble à ceci:

body {background-color: # 00FF00;}

Ce qui explique pour le sélecteur body (c'est à dire le corps de la page), la propriété (sa couleur d'arrière-plan) a une valeur de n ° 00FF00 (qui est vert).

Avec cette structure de base il ya trois façons d'appliquer CSS par la suite:

1. En utilisant une étiquette d'attribut HTML

Tout d'abord, vous pouvez l'appliquer à l'aide de la balise attribut HTML. Dans ce cas, dans le corps d'une page web le code pourrait ressembler à ceci.

<html>
Style de corps <= "background-color: # 00FF00;"}
<p> Ceci est le texte dans la page avec le fond vert </ p>
</ Body>
</ Html>

Les balises <html> et </ html> indiquent le début et la fin du code HTML. Le body et </ body> indiquer le début et la fin du corps de la page.

En effet, ce style est "codé en dur" dans la page et nous l'avons déclaré spécifiquement pour être vert. Pour obtenir le même résultat ailleurs nous ferions la même chose.

2. Utilisez un style Tag

Deuxièmement, nous pouvons créer un style Tag. Dans cet exemple, nous avons effectivement changer ce que la balise body elle-même fait pour rendre le fond vert.

<html>
<head>
<style type="text/css">
body {background-color: # 00FF00;}
</ Style>
</ Head>
<body>
<p> Ceci est le texte dans la page avec le fond vert </ p>
</ Body>
</ Html>

Cela signifie que chaque fois que la balise body est utilisé dans le document actif, il aura son attribut background-color au vert.

3. Utiliser les styles externes

C'est le moyen le plus pratique d'utiliser des CSS, et le principal moyen que nous allons utiliser.

La démarche consiste à réunir l'ensemble des informations de mise en forme dans une feuille de style et de garder cette feuille de style comme une entité distincte. Il peut ensuite être attachée (appliquée) à n'importe quelle page Web.

En supposant que nous avons une feuille de style appelée Test1.css, le code HTML nécessaire dans une page à utiliser cette feuille de style devrait ressembler à ceci.

<html>
<head>
<link rel="stylesheet" type="text/css" /> href="css/Test1.css"
</ Head>
<body>
<p> Ceci est le texte dans la page avec le fond vert </ p>
</ Body>
</ Html>

bien que cela ne fera que rendre le fond de la page vert si la feuille de style contient en fait la commande qui rend le corps vert.

Enfin, nous allons examiner quatre types de styles, dont chacune a ses usages. Voici une brève description de chacun.

1. Une classe est un style personnalisé que vous pouvez appliquer à une plage ou un bloc de texte. Une classe a un nom qui commence par un point.

2. Une ID est un style qui est attaché à une balise HTML en cours. Les noms des ID commencent par un #.

3. Un style Tag redéfinit un style actuel et l'attacha à une balise HTML en cours (comme dans l'exemple ci-dessus couleur d'arrière-plan).

4. Un style composé est utilisé pour le formatage d'une combinaison particulière de balises.

Ne vous inquiétez pas si vous ne comprenez pas encore toutes ces définitions que nous couvrirons dans les sections suivantes:

- Créer une page web avec un gabarit CSS

- Créer une feuille de style

- Appliquer des règles de style

- Attacher une feuille de style externe

- Supprimer les styles intérieurs

- Utiliser le panneau des styles CSS

- Configurer les propriétés CSS

- Travailler avec les règles CSS

- Travailler avec sélecteurs d'ID

- Créer et appliquer un sélecteur d'ID

- Formatter le code CSS

 

 

   

 

 

Chaîne YouTube

 

Extras Dreamweaver

Autres fonctions Dreamweaver

Référencement de site