Maison > Article > interface Web > Tutoriel CSS (5) Comment utiliser DW4 pour créer du CSS
Tutoriel CSS (5) Comment utiliser DW4 pour créer du CSS
- 巴扎黑original
- 2017-04-01 14:03:142367parcourir
1. Panneau de styles CSS Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Après avoir étudié les chapitres précédents, je pense que tout le monde a une certaine compréhension du CSS. Dans ce chapitre, nous expliquerons comment utiliser Dreamweaver4 pour créer du CSS. Exécutez d'abord Dreamweaver4. Après le démarrage, sélectionnez Windows->Styles CSS dans le menu (ou appuyez sur Shitf+F11). Le système affiche le panneau de gestion des styles CSS, comme indiqué ci-dessous :
s'affiche dans les styles CSS. panneau Tous les styles CSS personnalisés (c'est-à-dire les sélecteurs de classe commençant par un point mentionnés ci-dessus, Dreamweaver4 utilise ces sélecteurs de classe commençant par un point comme styles personnalisés), vous pouvez utiliser le bouton Appliquer pour appliquer ces styles CSS à la page à volonté. Une zone de texte ou de document dans .
Remarque : il y a une case à cocher devant le bouton Appliquer. Lorsqu'il est sélectionné, le bouton sera gris et indisponible, indiquant une application automatique. Tant que la souris clique, le style CSS personnalisé sera automatiquement appliqué à. l'élément actuel dans la page ; si la case à cocher n'est pas cochée et que le bouton Appliquer est disponible. Vous devez cliquer sur le bouton Appliquer lors de l'application. Lorsqu'un style personnalisé est appliqué à un objet, cela équivaut à ajouter class="..." après la balise HTML actuelle. De plus, il y a un symbole en forme de « S » devant le style, qui indique un style défini en interne ; s'il s'agit d'un symbole, il indique que ce style est lié à un fichier de feuille de style externe ;
Remarque : le panneau de styles CSS affiche uniquement les styles CSS personnalisés (de classe) ; les balises HTML redéfinies et les autres styles de sélecteur CSS n'apparaissent pas dans le panneau de styles CSS car ils peuvent être automatiquement appliqués à ceux-ci. balises. (La redéfinition des balises HTML fait référence au style CSS dont le sélecteur est une seule balise HTML. On l'appelle redéfinition car elle redéfinit et modifie le style de la balise HTML d'origine.)
Il y a 4 petits boutons en bas à droite corner , voici les commandes les plus couramment utilisées :
Attacher une feuille de style : (Lien vers la feuille de style) Après avoir cliqué, une boîte de dialogue de sélection de feuille de style apparaîtra. Sélectionnez la feuille de style externe précédemment créée et cliquez sur OK pour. lien Ajout de cette feuille de style externe. Lorsque vous ajoutez des feuilles de style externes, veillez à utiliser des chemins relatifs autant que possible. Nouveau style : (Nouveau style) Généralement nous utilisons ce bouton pour créer une feuille de style CSS.
Modifier la feuille de style : (Modifier la feuille de style) Après avoir cliqué, la boîte de dialogue de modification de la feuille de style apparaîtra, affichant toutes les feuilles de style internes et externes existantes. Vous pouvez créer, modifier et supprimer des styles dans cette boîte de dialogue. .
Supprimer : (Supprimer le style) Sélectionnez d'abord le style CSS personnalisé à supprimer, puis cliquez sur ce bouton et le style sera supprimé.
Cliquez sur le petit triangle ci-dessus ou cliquez sur le bouton droit de la souris pour faire apparaître un menu. Les fonctions du menu sont les suivantes :
Modifier : (Modifier) Modifiez votre style CSS personnalisé actuellement sélectionné. . Cliquez pour accéder à la boîte de dialogue de définition de style pour modifier ce style de classe CSS.
Dupliquer : (Copier) Dupliquez la classe de style CSS personnalisée actuellement sélectionnée.
Supprimer : (Supprimer) Supprimer le style CSS personnalisé actuellement sélectionné, qui a le même effet qu'un bouton.
Appliquer : (Application) fait référence à l'application de la classe CSS sélectionnée à l'élément actuel de la page. Identique au bouton Appliquer.
Nouveau style : (Nouveau style) équivaut à un bouton.
Modifier la feuille de style : (Modifier la feuille de style) est équivalent au bouton.
Joindre une feuille de style : (Lien vers une feuille de style externe) Équivalent au bouton.
Exporter une feuille de style : (Exporter une feuille de style) Exportez la feuille de style interne de cette page vers un fichier de feuille de style externe. Remarque : En plus d'utiliser cette méthode pour exporter des feuilles de style dans Dreamweaver4, vous pouvez également utiliser Fichier->Exporter->Exporter les styles CSS dans le menu principal.
2. Types de création de feuilles de style. Avant de créer une feuille de style, nous présentons d'abord les trois types de feuilles de style de Dreamweaver4. Cliquez sur le bouton dans le panneau des styles CSS (ou sur Nouveau style dans le menu du panneau des styles CSS). pour faire apparaître la boîte de dialogue du nouveau style, comme indiqué ci-dessous :
Dans Définir, vous pouvez choisir une feuille de style externe ou une feuille de style interne :
l Sélectionnez Nouveau fichier de feuille de style (nouveau fichier de feuille de style), le système vous laissera d'abord enregistrer ce fichier de feuille de style puis définir ce fichier de feuille de style. Le style de la page entière suivra le fichier de feuille de style que vous avez créé, et vous pourrez ensuite lier ce fichier de feuille de style externe à d'autres pages, afin qu'un fichier de feuille de style puisse contrôler plusieurs pages.
l Si vous sélectionnez Ce document uniquement (seul ce document existe), vous créerez une feuille de style interne et Dreamweaver4 placera automatiquement le contenu de la feuille de style que vous avez créée dans le
Il existe trois types de feuilles de style parmi lesquels choisir dans Type :
l Créer un style personnalisé (classe) : (Créer un style personnalisé) Personnaliser un style, qui peut être appliqué à la page comme un milieu d'attribut de classe.
l Redéfinir la balise HTML : (Redéfinir la balise HTML) Redéfinir le format par défaut de la balise HTML spécifiée.
l Utiliser le sélecteur CSS : (Utiliser le sélecteur CSS) Définition du format pour une combinaison spécifique de balises ou toutes les balises contenant l'attribut ID spécifié.
Avant de définir CSS, il faut d'abord réfléchir clairement, où sera utilisé le style défini ? Quels effets doivent être obtenus ? Est-il défini sur une seule page ou contrôle-t-il le style de plusieurs pages ? Définissez ensuite la feuille de style appropriée en fonction de vos besoins.
3. Créez des styles personnalisés
Sur la page, nous souhaitons parfois rendre certains textes ou contenus importants accrocheurs. Nous devons définir un style distinct pour ces textes ou contenus importants afin de distinguer le texte général. Nous pouvons définir le CSS pour le contenu important séparément en créant un style personnalisé. style. Supposons que nous exigeions que la couleur du texte et du contenu importants soit définie en rouge et en gras pour atteindre des objectifs accrocheurs.
Cliquez sur Nouveau style, une nouvelle boîte de dialogue apparaîtra. Dans la boîte de dialogue Nouveau style, sélectionnez Créer un style personnalisé (classe) comme type de feuille de style, sélectionnez Ce document uniquement. , puis dans ce qui précède, entrez le nom du style que vous avez défini dans la liste déroulante Nom. Nous entrons ".emphases" et appuyons sur OK, comme indiqué ci-dessous :
Remarque : le nom du style personnalisé. peut être réglé à volonté. Généralement, il est nommé en fonction de son effet de style. Il doit y avoir un point avant le nom. Si vous le manquez, le système le remplira automatiquement pour vous.
La boîte de dialogue de définition du style apparaît, sélectionnez Type dans la catégorie, puis définissez la couleur sur rouge, Poids en gras et appuyez sur OK, comme indiqué dans l'image :
Ajoutez ensuite plus dans le panneau de styles CSS Un style personnalisé nommé emphases est créé de cette façon, nous avons défini un nouveau style :
Jetons un coup d'œil à la partie de code originale. Nous pouvons voir que la feuille de style suivante est ajoutée. la zone Code :
Après avoir défini le style, nous pouvons maintenant appliquer ce style personnalisé si nécessaire, sur la page Web Sélectionnez le texte et cliquez sur le style d'emphase dans le panneau Styles. Voyez si c'est l'effet que vous souhaitez.
Remarque : si le contenu que nous sélectionnons est un tableau ou un paragraphe, alors le texte de l'ensemble du tableau ou du paragraphe est défini avec un style d'emphase. À partir du code d'origine, nous pouvons voir qu'il est dans
......
ou
……
Lorsque nous ajoutons des styles au texte sélectionné, le texte lui-même est pas entouré de balises HTML, donc les balises seront automatiquement ajoutées, par exemple :
……Points clés……
Remarque : la balise span elle-même n'a en aucun cas spécifié la plage de sélection de la feuille de style, et p spécifie également la zone de la feuille de style.
4. Créer une feuille de style de redéfinition
Une feuille de style de redéfinition redéfinit le format d'une balise HTML. Par exemple, nous souhaitons reformater les paragraphes de la page, laisser deux espaces avant chaque paragraphe et définir la taille et l'interligne du texte du paragraphe.
Cliquez sur Nouveau style pour afficher la boîte de dialogue Nouveau style. Dans la boîte de dialogue Nouveau style, sélectionnez Redéfinir la balise HTML comme type de feuille de style. Nous créons toujours une feuille de style interne et sélectionnons Ce document uniquement. Lorsque le type de feuille de style sélectionne Redéfinir la balise HTML, le nom de la liste déroulante ci-dessus devient Balise, indiquant que le contenu d'entrée est une balise HTML. Cliquez sur le bouton déroulant et nous pouvons voir que toutes les balises HTML sont présentes. la liste déroulante Balise. Ici, nous sélectionnons Marque de paragraphe P :
Après OK, entrez dans la boîte de dialogue de définition de style. Dans Type, nous définissons la taille de la police à 12 pixels et l'interligne à 150 %. taille du texte, comme indiqué ci-dessous :
Dans la section Bloc, nous définissons l'indentation du texte. Puisque la taille du texte est de 12 pixels, l'espace entre les deux mots est de 24 pixels :
Après avoir appuyé sur. OK, la redéfinition du style est terminée. À l'heure actuelle, la taille du texte de chaque paragraphe de la page est de 12 pixels et l'interligne est de 150 %. Cependant, nous ne pouvons pas voir l'effet d'indentation dans l'éditeur Dreamweaver. Cela n'a pas d'importance, enregistrez simplement le fichier et ouvrez-le. avec un navigateur. Voyez l'effet. À l'heure actuelle, le code original de la feuille de style CSS est :
5. Créez une feuille de style de lien dynamique
Créons un ensemble de styles de lien dans différents états. Cliquez sur Nouveau style pour afficher la boîte de dialogue Nouveau style. Dans la boîte de dialogue Nouveau style, sélectionnez Utiliser le sélecteur CSS pour le type de feuille de style. Nous créons toujours une feuille de style interne et sélectionnons Ce document uniquement. Lorsque Utiliser le sélecteur CSS est sélectionné comme type de feuille de style, le nom de la liste déroulante ci-dessus devient Sélecteur, indiquant que le contenu d'entrée est un sélecteur CSS. Cliquez sur le bouton déroulant et vous pouvez voir les 4 états du. lien dynamique :
l a :active Sélectionnez l'état du lien hypertexte
l a:hover Déplacez le curseur sur l'état de l'hyperlien
l a:link L'état normal de l'hyperlien, lorsqu'il n'est aucune action
l a:visited Statut du lien hypertexte visité
Ensuite, nous définissons ces statuts respectivement. Tout d'abord, sélectionnez a:link, et la boîte de dialogue de définition de style apparaît après OK. souligner et la couleur est orange, comme suit Image :
Nous utilisons la même méthode pour définir a:visited, ne définir aucun soulignement, jaune, comme indiqué ci-dessous :
Ensuite, définissez a:hover, avec soulignement et surlignement, la couleur est orange, et définissez l'arrière-plan sur jaune dans Background :
Ici, nous ne définissons pas a:active, selon les règles en cascade a:active Le le style suivra automatiquement a:hover. De cette façon, nous avons défini les effets de tous les liens dynamiques. Faites attention à l'ordre de configuration. Dans le navigateur, nous pouvons voir : les liens non visités sur cette page ne sont pas soulignés et sont orange ; les liens visités ne sont pas soulignés et sont jaunes ; lorsque la souris pointe sur le lien, il y a des hauts et des soulignés, orange, et le fond est jaune ; . Le code original de la feuille de style est :
Lors de la définition de liens dynamiques comme celui-ci, l'effet de lien de la page entière changera. Si je veux Comment définir plus de deux groupes d’effets de lien ? N'a-t-on pas dit au chapitre 4 que mélanger classes et pseudo-classes pouvait produire différents effets de liens sur une même page ? Cliquez sur Nouveau style, et dans la liste déroulante du sélecteur, nous entrons a.link2:link (bien sûr, vous pouvez d'abord sélectionner a:link puis le modifier), comme indiqué ci-dessous :
De cette façon, nous créons une nouvelle classe .link2, nous définissons le style pour a.link2:link, rouge, souligné :
Selon la méthode ci-dessus, nous continuons à définir a.link2:visited et a.link2:hover , nous définissons a.link2:visited comme le rouge est souligné, a.link2:hover est rouge sans soulignement et l'arrière-plan est blanc. Il existe un style personnalisé supplémentaire nommé link2 dans le panneau des styles CSS. Appliquez ensuite ce style à un lien dynamique. Après l'avoir enregistré et ouvert avec un navigateur, nous pouvons voir deux styles de liens complètement différents. Tous les codes CSS sont les suivants :
Articles Liés
Voir plus