Styles personnalisés avec CSS

, Author

Vue d’ensemble

Bases du CSS

Crochets HTML de Lighthouse pour CSS

Vue d’ensemble

Les CSS (feuilles de style en cascade) personnalisés peuvent être utilisés dans tout Lighthouse Studio pour modifier l’aspect de l’enquête.

Par défaut, les paramètres de style dans tout Lighthouse Studio sont vides. Par exemple, si vous créez une nouvelle question et cliquez sur l’icône Pinceau pour l’en-tête 1, aucune taille de police n’est spécifiée. Si aucune taille de police n’est spécifiée au niveau de la question, la taille de police spécifiée à un niveau supérieur est utilisée. Les CSS présentent des niveaux de priorité en cascade. Une taille de police peut être spécifiée pour tout le texte d’une enquête ou pour une question particulière. Une taille de police définie pour une question particulière prévaut sur la taille de police définie au niveau de l’étude.

Lighthouse Studio a intégré le CSS qui contrôle les styles d’enquête. Le diagramme ci-dessous permet d’illustrer la façon dont le CSS est utilisé dans Lighthouse Studio, en démontrant les différents niveaux de priorité de Style. Les styles définis au niveau de la question remplacent les styles définis dans le style de l’enquête. Les styles définis dans le style de l’enquête remplacent les styles définis dans la feuille de style de base ssi_style.css.

style_flow

Bases du CSS

CSS est l’abréviation de Cascading Style Sheets. CSS permet de modifier le style (couleur de fond, style de police, espacement, etc.) du HTML des pages web. Le CSS permet de séparer le style de la structure d’une page web.

Le CSS peut être défini au sein des éléments HTML. Par exemple :

<p style= »color : green ; »>

Veuillez répondre aux questions ci-dessous.

</p>

Le CSS « color : green ; » change la couleur du texte à l’intérieur de la balise <p> en vert. Ce style peut être séparé de la balise <p>. Les instructions suivantes:

<style type= »text/css »>

p

{

color : vert;

}

</style>

<p>

Veuillez répondre aux questions ci-dessous.

</p>

Changer tout le texte à l’intérieur des balises <p> sur la page en vert.

Supposons que vous avez plusieurs pages web et que vous voulez que le texte à l’intérieur de toutes les balises <p> pour toutes les pages soit vert. Vous pouvez créer un fichier texte séparé nommé « mystyle.css » qui inclut le CSS suivant:

p

{

color : green;

}

En haut de chaque page web à l’intérieur de la balise <head>, vous incluriez alors:

<link rel= »stylesheet » type= »text/css » href= »mystyle.css »>

Ceci permet de contrôler le style de toutes les pages web à partir d’un seul fichier. Pour changer la couleur du vert au bleu, il suffit de modifier mystyle.css. En utilisant le CSS de cette manière, il est beaucoup plus facile de modifier le style de toutes vos pages Web que de le définir sur chaque page individuelle. Les styles définis dans un fichier externe ont une priorité inférieure à celle des styles définis dans une balise <style> sur la page Web. Les styles définis dans le HTML à l’intérieur d’un attribut « style » ont une priorité plus élevée que les styles définis dans la balise <style>.

Le CSS se compose de diverses « règles » de style qui définissent comment modifier l’apparence du HTML. Dans la règle CSS ci-dessous, le « p » est le sélecteur et la « couleur : vert » est la déclaration.

p

{

color : green;

}

Le sélecteur identifie la partie du HTML qui sera affectée par la déclaration. La déclaration se compose d’une propriété et d’une valeur séparées par un deux-points. Les déclarations multiples sont séparées par des points-virgules. Par exemple :

p

{

color : green;

font-size : 18px;

padding : 10px;

}

Le sélecteur peut être le nom de n’importe quel élément HTML. Par exemple : p, div, span, table, tr, td, etc. Plusieurs éléments peuvent être ajoutés à la règle, séparés par des virgules. Par exemple :

div, p, td

{

color : green;

}

Le CSS ci-dessus change le texte à l’intérieur des balises <div>, <p> et <td> en vert. Vous pouvez également spécifier que seules les balises <p> à l’intérieur des balises <div> doivent être sélectionnées:

div p

{

color : green ; /*Transformer le texte en vert*/

}

Notez qu’il y a un espace séparant « div » de « p ». Cela indique que seules les balises <p> à l’intérieur des balises <div> sont concernées. Remarquez également le commentaire « Tourner le texte en vert ». Les commentaires CSS sont contenus entre /* et */. Tout texte compris entre /* et */ n’affectera pas le CSS.

Un sélecteur de classe est un moyen par lequel vous pouvez identifier des éléments HTML spécifiques. Supposons que vous ayez le HTML suivant :

<div class= »header1″>

Quel âge avez-vous ?

</div>

Le <div> ci-dessus a un attribut nommé « class » avec une valeur de « header1 ». Vous identifiez une classe en CSS en plaçant un « . » devant son nom. Par exemple

.header1

{

color : green;

}

Le CSS ci-dessus fait en sorte que le texte à l’intérieur des balises avec la classe « header1 » soit vert. Lighthouse Studio utilise beaucoup les sélecteurs de classe. Les classes sont conçues pour identifier un ou plusieurs éléments sur la page Web. S’il existe un élément unique identifié par un « id », alors un signe « # » est utilisé à la place d’un « . ». Par exemple :

<div>

Quel âge avez-vous ?

</div>

La CSS suivante pourrait être utilisée pour sélectionner cette <div>:

#Q1_div

{

color : vert;

}

Lighthouse Studio inclut de nombreuses classes et ID dans le HTML qu’il crée pour vous aider à identifier des zones spécifiques de la page. Vous pouvez ensuite utiliser ces noms de « classe » et d' »id » dans votre CSS.

Plus d’informations sur le CSS peuvent être trouvées à http://www.w3schools.com/css.

Lighthouse HTML « Hooks » for CSS

Lighthouse Studio génère le HTML de votre enquête en fonction des différents types de questions et des paramètres que vous configurez dans le logiciel. Le HTML contient des attributs « class » et « id » dans un grand nombre de ses balises. Par exemple, le HTML pour l’en-tête 1 ressemble à ceci :

<div class= »header1″> Texte de l’en-tête 1 </div>

L’attribut « class » dans la balise <div> ci-dessus identifie l’en-tête 1. La CSS suivante peut alors être utilisée pour modifier la couleur du texte de l’en-tête 1 dans l’ensemble de l’enquête :

.header1

{

color : green;

}

Le diagramme ci-dessous montre certaines des principales classes présentes dans le HTML de Lighthouse.

csshooks

Des classes et des ids supplémentaires peuvent être examinés en visualisant le HTML de Lighthouse. Cela peut être fait en utilisant « View Source » dans votre navigateur web.

Certains éléments HTML de Lighthouse Studio contiennent plusieurs classes et un id. Divers moyens ont été prévus pour permettre au CSS de manipuler la présentation ou le style de l’enquête. Le HTML pour une question sélective nommée « Q1 » ressemble à ceci:

<div class= »question select »>

</div>

Notez que deux classes « question » et « select » ont été affectées à cette balise <div>.

La CSS suivante modifie le style de l’en-tête 1 pour la question 1. Aucune autre question n’est affectée.

#Q1_div .header1

{

color : blue;

}

Le signe # ci-dessus identifie la balise HTML avec l’id « Q1_div ». Après « #Q1_div », il y a un espace puis « .header1 ». Cette règle CSS change le texte de l’en-tête 1 en bleu à l’intérieur de la question Q1. Ce qui suit dessine une bordure noire autour de toutes les questions :

.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.