Propriétés spécifiques, commentaires et requêtes @media

L'outil crayon fonctionne de trois manières selon que le sélecteur est un commentaire ou non, ou qu'il s'agit d'une requêtes @media.

Saisie de propriétés spécifiques pour un sélecteur courant

Vous pouvez placer au moyen du crayon des propriétés spécifiques : leur syntaxe n'est pas vérifiée.

propriétés css spécifiques, overflow-y, overflow-x

Les propriétés saisies s'ajouteront aux autres propriétés.

propriété spécifique

Import d'une feuille de styles

Si vous importez une feuille de styles et qu'elle contient des propriétés non gérées en standard par HTML Styles, vous obtenez le message suivant :

Saisie de commentaires

Pour insérer un commentaire, créez un sélecteur commençant par le caractère "!" :ce qui suit ce caractère n'est pas repris dans la feuille de styles.

création d’un commentaire

Entrez votre commentaire, sur une ou plusieurs lignes sans vous préoccuper des balises de commentaire usuelles ( <!-- ou /*)

saisie commentaires

Effacer réinitialiser les réglages de styles

Cliquez ce bouton pour effacer les réglages présents.

exemple de feuille générée avec mise en gras de ce qui a été saisi dans le crayon

<style type="text/css">
<!-- feuille de styles modifiée pour FireFox 3.6
prise en compte transparence alpha des couleurs -->

body { font-size:1em; color:#434020; margin:0; padding:0; font-family:Verdana,Arial,Helvetica,sans-serif; }
.tmenubody { text-align:left; background-color:transparent; border:  none; margin:0; padding:0; }
.thumbs { width:1600px; overflow:hidden; display:list-item; overflow-y:auto; overflow-x:hidden; }
.thumbs img { background-color:white; border: 1px solid white; }
.tframe { border:  none; margin:0; padding:0; height:122px; width:99%; }
</style>

<!-- feuille de styles CSS générée le 20/02/21 depuis le groupe de styles : essai.grps avec le Freeware LiveCode 'HTML Styles 4.07' © JP.Costa. Accessible à l'adresse : http://orchfuture.free.fr/Revolution/CSS2/index.html -->


Saisie de requêtes @media

Une requête media permet de modifier, dans le cadre d'un design « flexible », certaines propriétés pour les adapter à la largeur du media utilisé (tablette, desktop…).

saisie d’une requête css media

Insérez un nouveau sélecteur « @media » puis cliquez sur l'outil crayon. L'écran vous permet de préciser une requête adaptée à vos besoins.
Vous entrerez les propriétés modifiées par la requête sous forme de sélecteurs placés entre les sélecteurs «@media» et «media-fin@»