Le nom complet de CSS est Feuille de style en cascade. Feuilles de style en cascade.
1. Quatre méthodes d'implémentation de CSS :
1. Type intégré :
2. Type de lien externe :
3. Type importé
4. Type d'attribut :
2. Définition CSS :
Sélectionnez l'objet {attribut 1 : valeur 1 ; attribut 2 : valeur 2 ; attribut 3 : valeur 3 : valeur n...}
comme:
td{font-size:12px;couleur:#FFFF00}
.monnom{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
Trois quatre objets de sélection.
1.Sélecteur HTML (TagName)
2.sélecteur de classe (.NAME)
3.Sélecteur d'ID (#IDname)
4. Objets spéciaux (a:hover a:link a:visited a:active)
1.Sélecteur HTML
Le sélecteur HTML est le caractère de balisage du HTML, tel que : DIV, TD, H1. La portée du sélecteur HTML couvre toutes les balises de toutes les pages auxquelles le style est appliqué.
exemple:
td
{
couleur : #FF0000 ;
}
-->
Remarque : La fonction du code est de rendre automatiquement le texte des cellules du tableau rouge.
2.sélecteur de classe
Pour définir un sélecteur de classe, vous devez ajouter un point "." à son nom. Tel que « .classname ». La portée du sélecteur de classe couvre toutes les balises contenant "class="classname"".
exemple:
.fontRed
{
couleur : #FF0000 ;
}
-->
Remarque : Il n'y a pas de "class="fontRed"" dans le second, donc le texte ne devient pas rouge.
3.Sélecteur d'ID
Pour définir un sélecteur d'ID, vous devez ajouter un point "#" à son nom. Tel que "#IDname". La portée du sélecteur d'ID couvre toutes les balises contenant "ID="classname"".
Exemple :
#fontRed
{
couleur : #FF0000 ;
}
-->
Remarque : Il n'y a pas de "ID="fontRed"" dans le second, donc le texte ne devient pas rouge.
4. Objets spéciaux Il existe quatre types d'objets spéciaux définis pour les objets liés :
a: survolez le lien hypertexte lorsque la souris est déplacée
a:link lien hypertexte régulier et non accessible
a : visité lien hypertexte visité
La portée de l'objet spécial a:active hyperlink lorsque l'on clique sur la souris est tous les marqueurs (cette phrase est sujette à discussion, car il y aura bientôt une méthode pour renverser le mot « tout »).
exemple:
a: survol
{
couleur : #0000FF ;
décoration de texte : souligner ;
}
-->
Faites attention à ce qui suit, c'est très utile ! ! !
a.classname: survol
a#IDname : survoler
Ces deux méthodes d'écriture sont utilisées respectivement avec .classname et #IDname. Sa portée devient toutes les balises contenant "class="classname"" ou "ID="IDname"". Cette méthode d'écriture peut vous aider à obtenir plusieurs effets a:hover sur la même page. Vous pouvez jeter un œil à la différence entre le texte de la barre de navigation sur la page d'accueil de Yiwang et le titre de l'article ordinaire lorsque vous passez la souris dessus.
4. Demande :
1. Appliquer automatiquement des marqueurs
2. Classe spéciale class="NOM"
3.ID ID="IDnom"
4. Les objets spéciaux s'appliquent automatiquement 5. Propriétés CSS
Il existe de nombreuses propriétés CSS, comme la couleur, qui est la plus utilisée ci-dessus, indiquant la couleur du texte. background-color représente la couleur d'arrière-plan. C’est le plus important, mais comme ce n’est pas difficile, il suffit de se référer au manuel correspondant.
Propriétés des balises CSS/Référence des propriétés Voici une liste des propriétés des balises de feuille de style (CSS) actuellement prises en charge.
Attributs/attributs de balise CSS
Attributs de comportement Comportement
Police et direction des attributs de texte
direction [di?rek??n] guider
fonte
famille de polices
taille de la police
style de police
variante de police-variante [?v??ri?nt]
poids de la police [weit] poids
mode ime [m?ud]
layout-grid [?leiaut] composition de mise en page [ɡrid] grille
layout-grid-char [t?ɑ:](brûler..)
disposition-grille-ligne
mode grille de mise en page
type de grille de mise en page
espacement des lettres [?let?] espacement des lettres [?speisi?]
saut de ligne [breik] saut
hauteur de ligne [hait] hauteur
hauteur min
rubis-aligner [?ru:bi] rubis
le surplomb de rubis [??uv??hæ?] dépasse
positionnement rubis-position [p??zi??n]
aligner le texte
text-autospace [speis] espacement automatique
texte-décoration [?dek??rei??n] décoration
text-indent [in?dent] composition du retrait
texte-justifier l'alignement [?d??stifai]
texte-kashida-espace
débordement de texte [??uv??fl?u] débordement
transformation de texte [træns?f?:m] changement
position de soulignement du texte
unicode-bidi [?bi:di]
aligner verticalement
espace blanc
coupure de mots
retour à la ligne
du mode d'écriture
et pièce jointe d'arrière-plan
couleur d'arrière-plan
image d'arrière-plan
position d'arrière-plan
position-arrière-plan-x
arrière-plan-position-y
répétition en arrière-plan
bordure d'attribut de disposition
de couleur
bordure inférieure
couleur de la bordure inférieure
style bordure inférieure
bordure-bas-largeur
effondrement des frontières*
couleur de la bordure
bordure gauche
couleur de la bordure gauche
style bordure gauche
bordure-gauche-largeur
frontière droite
couleur de la bordure droite
style bordure droite
bordure-largeur-droite
style bordure
bordure supérieure
couleur de la bordure supérieure
style bordure supérieure
bordure-largeur-supérieure
largeur de bordure
clair
flotter
flux de mise en page
marge
marge inférieure
marge gauche
marge droite
marge supérieure
rembourrage
fond de rembourrage
rembourrage-gauche
rembourrage à droite
dessus de rembourrage
barre de défilement-3dlight-color
couleur de la flèche de la barre de défilement
couleur de base de la barre de défilement
barre de défilement-darkshadow-couleur
couleur du visage de la barre de défilement
couleur de surbrillance de la barre de défilement
couleur de l'ombre de la barre de défilement
disposition du tableau
Style de liste
d'affichage des attributs de classification
de zoom
image de style de liste
position-style-liste
clip
inférieur de l'attribut de positionnement
de type style de liste
hauteur
gauche
débordement
débordement-x
débordement-y
position
droite
haut
visibilité
largeur
Page d'attribut d'impression
z-index
pageBreakAfter
pageBreakBefore
attribut de filtre filtre
pseudo-classe et autres attributs : actif
@charset
curseur
:première lettre
:première ligne
@font-face
:flotter
@importer
!important
:lien
@médias
@page
:visité
manières principales d'obtenir des effets de bordure d'image CSS
. La méthode la plus simple consiste à définir directement la bordure (bordure) pour img dans le fichier CSS. Par exemple, je l'ai définie en CSS :
img.framed {
remplissage : 6 px ;
bordure : 1px solide #CCCCCC ;
couleur d'arrière-plan : #FFFFFF ;
Ensuite, dans le fichier HTML, ou lors de la mise à jour de la page Web, l'utilisation de class="framed" pour la définition de l'image intégrée aura l'effet de bordure correspondant.
L'avantage de la méthode ci-dessus est qu'elle est relativement simple, mais l'effet obtenu est relativement monotone et ne permet pas nécessairement d'obtenir des résultats satisfaisants ni certains effets spéciaux, tels que des ombres, des changements de couleur, etc. Cela peut être très bien fait en utilisant la substitution d'image et la traduction de positionnement. Je n'entrerai pas dans les détails ici. Je pense qu'une fois que vous aurez appris le CSS de base, il ne sera pas difficile de défier des effets CSS plus avancés.
Trier la syntaxe CSS pour les bordures de tableaux.
Nous savons que Dreamweaver fait un excellent travail dans la création de tableaux, mais à un moment donné, il doit encore être combiné avec CSS pour obtenir certains effets spécifiques. Commençons par trier la syntaxe CSS pour les bordures de tableaux. puis présentez-le séparément. Comment embellir la bordure d'un tableau en utilisant CSS.
Lasyntaxe CSS spécifique aux bordures de tableau
comprend : largeur de bordure supérieure, largeur de bordure droite, largeur de bordure inférieure, largeur de bordure gauche, largeur de bordure, couleur de bordure, style de bordure, bordure supérieure, bordure inférieure, bordure gauche, bordure droite, bordure, largeur, hauteur, étiquettes associées, etc.
1.
Syntaxe de largeur de bordure supérieure : border-top-width : <valeur>
Valeurs autorisées : fine | moyenne | épaisse <longueur>
Valeur initiale : moyenne
Applicable à : Tous les objets
Compatibilité descendante : Non
L'attribut de largeur de bordure supérieure est utilisé pour spécifier a La largeur de la bordure supérieure de l'élément. La valeur peut être l'un des trois mots-clés, dont aucun n'est affecté par la taille ou la longueur de la police, et peut être utilisée pour implémenter des largeurs proportionnelles. Les valeurs négatives ne sont pas autorisées. Il peut également être utilisé pour abréger la bordure supérieure, la largeur de la bordure ou les propriétés de la bordure.
2. Syntaxe de largeur de bordure droite
: border-right-width : <valeur>
Valeurs autorisées : fine | moyenne | épaisse <longueur>
Valeur initiale : moyenne
Applicable à : Tous les objets
Compatibilité descendante : Non
L'attribut de largeur de bordure droite est utilisé pour spécifier l'élément La largeur de la bordure droite. La valeur peut être l'un des trois mots-clés, dont aucun n'est affecté par la taille ou la longueur de la police, et peut être utilisée pour implémenter des largeurs proportionnelles. Les valeurs négatives ne sont pas autorisées. Peut également être utilisé pour abréger la bordure droite, la largeur de la bordure ou les propriétés de la bordure.
3.
Syntaxe de largeur de bordure inférieure : border-bottom-width : <valeur>
Valeurs autorisées : fine | moyenne | épaisse <longueur>
Valeur initiale : moyenne
Applicable à : tous les objets
Compatibilité descendante : non
L'attribut de largeur de bordure inférieure est utilisé pour spécifier l'élément La largeur de la bordure inférieure. La valeur peut être l'un des trois mots-clés, dont aucun n'est affecté par la taille ou la longueur de la police, et peut être utilisée pour implémenter des largeurs proportionnelles. Les valeurs négatives ne sont pas autorisées. Il peut également être utilisé pour abréger la bordure inférieure, la largeur de la bordure ou les propriétés de la bordure.
4.
Syntaxe de largeur de bordure gauche : border-left-width : <valeur>
Valeurs autorisées : fine | moyenne | épaisse <longueur>
Valeur initiale : moyenne
Applicable à : Tous les objets
Compatibilité descendante : Non
L'attribut de largeur de bordure gauche est utilisé pour spécifier l'élément La largeur de la bordure gauche. La valeur peut être l'un des trois mots-clés, dont aucun n'est affecté par la taille ou la longueur de la police, et peut être utilisée pour implémenter des largeurs proportionnelles. Les valeurs négatives ne sont pas autorisées. Il peut également être utilisé pour abréger la bordure gauche, la largeur de la bordure ou les propriétés de la bordure.
5.
Syntaxe de largeur de bordure : border-width : <value>
Valeurs autorisées : [thin | Thick | medium <length> ]{1,4}
Valeur initiale : non définie
Applicable à : tous les objets
Compatibilité descendante : aucun
attribut de largeur de bordure Définit la limites de l'élément avec une à quatre valeurs, où la valeur est un mot-clé ou une longueur. Les longueurs négatives ne sont pas autorisées. Si les quatre valeurs sont données, elles s'appliquent respectivement aux styles de bordure supérieure, droite, inférieure et gauche. Si une valeur est donnée, elle sera appliquée à chaque arête. Si deux ou trois valeurs sont données, la valeur omise est égale au côté opposé. Cette propriété est un raccourci pour les propriétés haut, droite, bas et gauche. Vous pouvez également utiliser l'attribut border abrégé.
6.
Syntaxe de couleur de bordure : border-color : <value>
Valeurs autorisées : <color>{1,4}
Valeur initiale : La valeur de l'attribut color
est applicable à : Tous les objets
Compatibilité descendante : Non
L'attribut border color définit la bordure couleur d'un élément. Vous pouvez utiliser un à quatre mots-clés. Si les quatre valeurs sont données, elles s'appliquent respectivement aux styles de bordure supérieure, droite, inférieure et gauche. Si une valeur est donnée, elle sera appliquée à chaque arête. Si deux ou trois valeurs sont données, la valeur omise est égale au côté opposé. Vous pouvez également utiliser l'attribut border abrégé.
7. Syntaxe du style de bordure
: border-style : <valeur>
Valeurs autorisées : [aucun
| pointillé | double rainure | inset
|
avec : Non
La propriété border-style est utilisée pour définir le style de la bordure d'un élément. Cette propriété doit être utilisée pour spécifier une bordure visible. Vous pouvez utiliser un à quatre mots-clés. Si les quatre valeurs sont données, elles s'appliquent respectivement aux styles de bordure supérieure, droite, inférieure et gauche. Si une valeur est donnée, elle sera appliquée à chaque arête. Si deux ou trois valeurs sont données, la valeur omise est égale au côté opposé. Vous pouvez également utiliser l'attribut border abrégé.
aucun : aucun style ;
pointillé : ligne pointillée ;
pointillé : ligne pointillée ;
plein : ligne continue ;
double : double ligne ;
rainure : ligne de rainure ;
crête : crête ;
encart : concave ;
Début : convexe.
8.
Syntaxe de la bordure supérieure : border-top : <valeur>
Valeurs autorisées : <largeur de la bordure supérieure> || <style de bordure> ||
Valeur initiale : non définie
Applicable à : tous les objets
Compatibilité descendante : aucun
attribut de bordure supérieure est un raccourci pour définir la largeur, le style et la couleur de la bordure d'un élément. Notez qu’un seul style de bordure peut être donné. Vous pouvez également utiliser l'attribut border abrégé.
9. Syntaxe de la bordure droite
: border-right : <valeur>
Valeurs autorisées : <largeur de la bordure droite> || <style de bordure> ||
Valeur initiale : non définie
Applicable à : tous les objets
Compatibilité descendante : aucun
attribut de bordure droite est un raccourci pour définir la largeur, le style et la couleur de la bordure droite d'un élément. Notez qu’un seul style de bordure peut être donné. Vous pouvez également utiliser l'attribut border abrégé.
10.
Syntaxe de la bordure inférieure : border-bottom : <valeur>
Valeurs autorisées : <Largeur de la bordure inférieure> || <Style de bordure> || <Couleur>
Valeur initiale : Non défini
Applicable à : Tous les objets
Compatibilité descendante : Aucun
attribut de bordure inférieure Est un raccourci pour définir la largeur, le style et la couleur de la bordure inférieure d'un élément. Notez qu’un seul style de bordure peut être donné. Vous pouvez également utiliser l'attribut border abrégé.
11.
Syntaxe de la bordure gauche : border-left : <valeur>
Valeurs autorisées : <largeur de la bordure gauche> || <style de bordure> || <couleur>
Valeur initiale : non définie
Applicable à : tous les objets
Compatibilité descendante : aucune
propriété de bordure gauche est une raccourci pour définir la largeur, le style et la couleur de la bordure gauche d'un élément. Notez qu’un seul style de bordure peut être donné. Vous pouvez également utiliser l'attribut border abrégé.
12.
Syntaxe de bordure : border : <value>
Valeurs autorisées : <border width> || <border style> || <color>
Valeur initiale : non définie
Applicable à : tous les objets
Compatibilité descendante : non
La propriété border est un paramètre Un raccourci pour la largeur, le style et la couleur de la bordure d'un élément.
Exemples de déclarations de bordure :
H2 { border: groove 3em }
A: lien { bordure : bleu uni }
A: visité { bordure : pointillé fin #800080 }
A:active { border: Thick double red }
L'attribut border ne peut définir que quatre types de bordures ; il ne peut donner que la largeur et le style d'un ensemble de bordures. Afin de donner des valeurs différentes aux quatre bordures d'un élément, les créateurs de pages Web doivent utiliser un ou plusieurs attributs, tels que : bordure supérieure, bordure droite, bordure inférieure, bordure gauche, couleur de bordure, largeur de bordure, style de bordure, Largeur de bordure supérieure, largeur de bordure droite, largeur de bordure inférieure ou largeur de bordure gauche.
13.
Syntaxe de largeur : width : <value>
Valeurs autorisées : <length> | <percent> auto
Valeur initiale : auto
Applicable à : Niveau de bloc et éléments de remplacement
Compatibilité descendante : Non
La valeur initiale de l'attribut width est "auto", c'est-à-dire la largeur d'origine de l'élément (il y a la largeur de l'élément lui-même). Le pourcentage fait référence à la largeur de l'élément parent. Les valeurs de longueur négatives ne sont pas autorisées.
14.
Syntaxe de hauteur : height : <value>
Valeurs autorisées : <length> | auto
Valeur initiale : auto
Applicable à : Niveau de bloc et éléments de remplacement
Compatibilité descendante : Non
La valeur initiale de l'attribut height est "auto", qui est celle de l'élément. La hauteur d'origine (il y a la hauteur de l'élément lui-même). Le pourcentage fait référence à la largeur de l'élément parent. Les valeurs de longueur négatives ne sont pas autorisées.
15. Concernant l'
étiquette du tableau d'étiquettes, la définition de l'ensemble du style du tableau doit être placée dans le tableau ;
Étiquette de cellule td, la définition du style de cellule doit être placée dans td.
BODY est l'élément principal du document Web. Toutes les plages visibles se trouvent dans l'élément <BODY>.
BOUTON Le bouton du champ du formulaire peut être sous la forme de « soumettre », « réinitialiser », etc.
DIV définit une zone sur la page Web. La hauteur, la largeur ou la position absolue de cette zone sont connues par.
Élément d'image IMG, précisez la source de l'image en spécifiant l'attribut "src"
Champ du formulaire de saisie INPUT
Effet de sous-titre mobile MARQUEE
SPAN définit une zone sur la page Web. La hauteur, la largeur ou la position absolue de cette zone sont connues par.
Zone de texte TEXTAREA
Zone de texte de saisie multiligne TFOOT
Cellule d'en-tête du tableau TH
Titre de la table THEAD
Ligne du tableau TR