Définissez vos propres styles

Nous allons créer et définir un style adapté au travail que nous voulons faire.

Nous avons vu les précédents tutoriels, comment appliquer un style à une certaine étiquette et que le défaut serait d'appliquer ces mêmes étiquettes. Nous l'avons fait avec les liens et le texte, mais nous pourrions faire avec eux tous, mais bien sûr, nous avons vu que, dans chaque paragraphe, aurait le même style, tous les liens ont le même décor, texte, etc ..

Ainsi, alors que cela a l'avantage qui sera appliquée automatiquement lors de l'insertion du texte, ou des liens, il est préférable de créer un style et le définir comme nous le souhaitons et nous appliquer.

Htm va ouvrir une nouvelle (tout blanc) et enregistrer avec un nom:

* Remarque: Normalement, c'est la façon dont nous allons commencer la conception d'un site Web, ce document, je garderais 'plantilladisenio' le nom par exemple. Ou quelqu'un d'autre qui deviendra plus tard le modèle Web réel.

Activez la fenêtre volet de style / Styles CSS

Cliquez sur l'icône pour créer la nouvelle règle:

1

Nous avons marqué Avancé et sélectionnez les balises body, td

* Remarque: on peut mettre plusieurs sur chaque règle de style, séparés par des virgules. Nous définissons dans cette règle, la police, la taille, la couleur .. et s'appliquent automatiquement à tous les documents que nous faisons dans ce style.

Rappelez-vous que cette feuille de style, nous avons lié avec le document qui, plus tard (en théorie, de construire un site web) va faire le modèle. ;)

Nous commençons avec:

2

Ici, nous allons demander à ce que nous conservons:

3

Vous pouvez avoir dans un même lieu plus d'une feuille de style, juste assez pour se souvenir et savoir quels documents est liée à un seul et avec lequel une ou plusieurs autres ;)

Nous définissons la police, la couleur de ce fait, la taille .. etc:

4

Maintenant, les marges du document. Il est important d'avoir tout l'espace possible de commencer à concevoir. Donc, score de 0 à tous:

6

Nous acceptons et toutes ces valeurs sont automatiquement appliquées à chaque fois, une fois transformé en un modèle réel, ouvrez un nouveau document. Créer une autre règle de style, seulement à la balise body:

corps

Catégorie Fonds:

5

nous avons mis la couleur de fond et à accepter.

Pour définir les styles de liens, nous procédons de la même comme nous l'avions fait dans le tutoriel précédent.

* Remarque: Et je vous dis un truc que je fais et il me permet de gagner du temps.

J'ai l'habitude de définir tous ces styles lorsque je crée un nouveau document de l'inspecteur de la propriété, Comme vous le savez, ces modèles sont insérés dans le code même document. Ainsi, copier, supprimer les étiquettes:

<stylo> et </ stylo>.

Je pense que d'une feuille en cascade nouveau style, qui ne définissent pas n'importe quel style, une fois que nous a frappé ouvrir le document que vous créez dans htm, de l'inspecteur des propriétés. Je garde la lame et je trouve plus rapide et plus confortable ;)

Mais c'est une astuce, ce qu'il ferait si juste que je l'ai indiqué plus tôt. Cela fait, nous allons commencer à créer des styles que nous allons être l'insertion et qui nous convient.

Nouvelle règle de style:

7

noter que le nom du style est précédée d'une période (.) et puis j'ai mis un nom à reconnaître plus tard. Je définis la couleur de fond:

8

et accepter.

el ancho, la alineación: Htm dans le document, créer une nouvelle table, dans lequel, comme d'habitude nous avons mis la largeur, l'alignement:

9

Nous plaçons le curseur de la souris dans le tableau et cliquez sur l'étiquette qui apparaît juste au-dessus de l'inspecteur

10

rester en bonne santé est sélectionné et nous allons appliquer le style que nous avons créé:

11

nous voyons que la couleur de fond de la table va changer à notre choix.

De cette façon, nous allons appliquer les styles à partir de maintenant. Pour supprimer un style, vous voyez que la première option sera toujours «non» parce que, dans la même manière que nous avons appliqué avant, sélectionnez Aucun et de s'en aller maintenant, ou appuyez sur n'importe quelle autre changement de style au fond de la table.

De même on peut définir le fond d'un td. Tout d'abord, de l'inspecteur, nous définissons l'alignement de la cellule, et la Nouvelle-une règle de style / Catégorie de fonds:

12

Et étant donné un fonds pour la cellule:

13

Pour appliquer un style de cellule, le premier clic sur l'étiquette, comme le tableau suivant:

14

Insérer une image de fond:

y desde examinar, busco una imagen en la carpeta imágenes del Sitio en el cual estoy trabajando: Nouvelle règle de style: comme je l'ai mis le nom du style Fondotabla2 et de l'examen, je regarde une photo dans le dossier Images dans le site, je travaille sur.:

16

Nous créons maintenant le style Fondoimgtd et de mettre ces valeurs.:

17

Voir ici par exemple

Nous pouvons faire des combinaisons différentes de ces valeurs, alors essayez et d'enquêter sur jusqu'à ce que vous trouverez ce que vous aimez est une valeur de plus? Une autre façon d'appliquer des styles sont les suivantes:

15

Mmm .... vous trouvez la même chose aujourd'hui serait plus facile pour créer le portail non? Insertion des couleurs des fonds des tableaux et des cellules, avec un style, non?

Car si chiquis, mais ce que nous avons appris ensuite .. mais devrait nous coûter ... nous aurions perdu ;) Et maintenant, tout ce qui va émerger et nous serons beaucoup plus facile

Et que je l'ai sauter toutes directement de la source hein? : P Nous économisons la feuille de style et est monté sur le serveur avec d'autres documents et images.

ni espacios en blanco . Rappelez-vous que le nom des styles, peut être n'importe quoi, mais il doit y avoir une période (.) Au début d'entre eux, n'ont pas de caractères spéciaux ou des espaces.

Enfin, dans la colonne de panneaux qui sont gauche, nous voyons reflète les styles que nous créons dans l'ordre que nous faisons:

styles

Pour les modifier, sélectionnez-le et cliquez sur l'icône de crayon, puis la fenêtre apparaît dans laquelle vous pouvez modifier les valeurs. Automatiquement être appliquée, c'est à dire que nous pouvons changer les couleurs de fond des tableaux, les cellules, le formatage du texte, la couleur du texte, etc ... pour sauver les styles du document, l'envoyer et de tout le monde aura nouvelle page styles ;)

Répondre