Wondershare EdrawMind
Galeria de mapas mentais HTML-CSS
- 37
HTML-CSS
Base commune du HTML et du CSS, le CSS est constitué de feuilles de style en cascade et le HTML est un langage de balisage hypertexte.
Editado em 2023-08-22 15:01:32
- Recomendado para você
- Descrição
Résumé des points de connaissances en matière de développement CSS, JS et HTML front-end
- 5
- 1
HTML-CSS
Notions CSS
feuilles de style en cascade
Feuilles de style en cascade
Syntaxe CSS
Commentaire
/* */
Sélecteur {propriété : valeur de propriété ; propriété : valeur de propriété ; propriété : valeur de propriété ;...propriété : valeur de propriété ;}
Sélecteurs CSS courants
Basique
Étiquette
nom de la balise{}
IDENTIFIANT
Caractéristiques
unicité
#boîte{}
classe
Caractéristiques
un à plusieurs
plusieurs contre un
.rouge{}
Pseudo-classe
:flotter
:lien
:actif
:a visité
Caractère générique
*
complexe
groupe
Sélecteur 1, Sélecteur 2,....{}
Inclure
Sélecteur 1 Sélecteur 2 ...{}
Spécifier
Sélecteur 1 Sélecteur 2...{}
Propriétés CSS courantes
texte
taille de police
couleur
hauteur de la ligne
aligner le texte
poids de la police
audacieux
normale
plus léger
plus audacieux
le style de police
normale
italique
famille de polices
variante de police
normale
en minuscule
retrait du texte
décoration de texte
souligner
surligner
ligne à travers
aucun
transformation de texte
majuscule
minuscule
capitaliser
débordement de texte
l'espacement des lettres
espacement des mots
modèle de boîte
marge
Prise en charge de la méthode à quatre valeurs
Prise en charge de la définition d'une seule direction
Prend en charge les valeurs négatives
Les images d'arrière-plan ne sont pas prises en charge
Fusion adjacente verticalement
Débordement de la boîte parent : masqué
flotteur de sous-boîte
frontière
Caractéristiques
Image d'arrière-plan prise en charge
Prend en charge une seule direction
La méthode à quatre valeurs n'est pas prise en charge
coin de frontière
Triangle
bordure : 100 px solide transparent ;
couleur de la bordure supérieure : rouge ;
hauteur : 0 ;
largeur:0;
Les attributs
largeur de la bordure
style de bordure
solide
ligne continue
en pointillé
ligne pointillée
pointé
ligne pointillée
double
Double ligne
couleur de la bordure
rembourrage
Prise en charge de la méthode à quatre valeurs
Prend en charge une seule direction
Image d'arrière-plan prise en charge
Les valeurs négatives ne sont pas prises en charge
La largeur et la hauteur correspondantes doivent être réduites (la boîte bizarre n'en a pas besoin)
contenu
largeur
hauteur
flotter
flotter
gauche
droite
aucun
clair
gauche
droite
aucun
les deux
Placez-le sur une boîte que vous ne voulez pas voir flottante
position
relativement
relatif
Caractéristiques
Pas d'occupation d'espace hors AMM
position par rapport à soi
Peut être utilisé pour de petits mouvements de position
Objets de référence pouvant être utilisés pour le positionnement absolu
absolu
absolu
Caractéristiques
Hors AMM, aucun espace occupé
Positionnement par rapport au bloc contenant
N'écrivez pas les coordonnées et laissez-les en place
Le fils est complètement différent du père
fixé
fixé
Caractéristiques
Positionnement relatif de la fenêtre
Hors AMM, aucun espace occupé
N'écrivez pas les coordonnées et laissez-les en place
viscosité
collant
Caractéristiques
Doit être utilisé en combinaison avec les coordonnées
Équivalent à une combinaison de positionnement relatif et de positionnement fixe
Pas d'occupation d'espace hors AMM
statique
statique
Caractéristiques
Pas d'occupation d'espace hors AMM
Les attributs de coordonnées ne sont pas pris en charge
Les attributs hiérarchiques ne sont pas pris en charge
type d'élément
Classification
niveau de bloc
ligne exclusive
Largeur et hauteur configurables
La hauteur de la rangée peut supporter la hauteur
Après avoir flotté, il sera disposé horizontalement
en ligne
afficher sur une seule ligne
Impossible de définir la largeur et la hauteur
La hauteur de la rangée ne peut pas supporter la hauteur
Vous pouvez définir la largeur et la hauteur après avoir flotté
l'indentation du texte n'est pas prise en charge
Les attributs liés au modèle de boîte ne sont pas pris en charge et ne sont pas valides dans le sens vertical.
Convertir
afficher
bloc
bloc en ligne
en ligne
aucun
élément caché
élément de liste
type de liste
cellule de table
type de cellule
application
Navigation à largeur variable centrée horizontalement
ul{text-align:center}
li {display:inline-block;}
Une seule ligne centrée, plusieurs lignes à gauche
.all {text-align:center;}
.all p {display:inline-block;text-align-left} ;
écart d'image
img{affichage:bloc ;
img{alignement-vertical:haut/milieu/bas;}
.all{font-size:0;}
Centrer l'image verticalement
méthode 1
.all {hauteur : 400 px ; hauteur de ligne : 400 px ;}
img{alignement-vertical:milieu;}
Méthode 2
img{alignement-vertical:milieu;}
span{vertical-align:middle;width:0;height:100%;display:inline-block}
Tableau lié
espacement des bordures
espace de lunette
frontière-effondrement
fusion des frontières
disposition du tableau
Disposition de table fixe
valeur
fixé
Disposition de table fixe
auto
Disposition automatique des tables
cellules vides
Cellules sans contenu affiché
valeur
cacher
Masquer les cellules sans contenu
montrer
Pas d'affichage de cellule pour ce jour
Contexte lié
Couleur de l'arrière plan
image de fond
URL();
Répétition du fond
répéter
pas de répétition
répéter-x
répéter
position d'arrière-plan
Horizontal et vertical
px
%
en haut à droite en bas à gauche
pièce jointe d'arrière-plan
faire défiler
boîte relative
fixé
fenêtre relative
Liste associée
style de liste : aucun
css3
Sélecteur
Basique
Étiquette
IDENTIFIANT
classe
*
Hiérarchie
Descendance
(espace)
progéniture
>
frères voisins
Universel
~
Pseudo-classe
Pseudo-classe dynamique
:flotter
:lien
:actif
:a visité
:se concentrer
Pseudo-classe structurelle
série pour enfants
:ntième-enfant()
:premier enfant
:dernier enfant
:fils unique
:ntième-dernier-enfant()
Série fils
:ntième-de-type()
:premier du type
:dernier-du-type
:uniquement de type
:ntième-dernier-de-type()
:racine
:vide
:pas()
nier la pseudo-classe
:pas
Pseudo-classe de langage
:langue
Pseudo-classe cible
:cible
Doit être utilisé conjointement avec des liens d’ancrage
mettre sur la cible
Celui avec l'identifiant est la cible
Pseudo-classe d'état d'élément d'interface utilisateur
:désactivé
:activé
:lecture seulement
:lire écrire
:vérifié
Les attributs
[attr]
[attr=val]
[attr^=val]
[attr$=val]
[attr*=val]
[attr~=val]
[attr|=val]
Pseudo-éléments (en ligne)
::après {content:""}
::avant {content:""}
::Première ligne
::première lettre
::sélection
Poids
*
0,1
Étiquette
1
classe
dix
Pseudo-classe
dix
Les attributs
dix
IDENTIFIANT
100
en ligne
1000
!important
10000
Les attributs
rayon de coin
rayon de frontière
boîte ombre
boîte ombre
encart
ombre intérieure
À droite
vers le bas
degré d'ambiguïté
degré d'expansion
couleur de l'ombre
ombre de texte
ombre de texte
À droite
vers le bas
degré d'ambiguïté
déformation
transformation (2D)
traduire()
tourner()
échelle()
fausser()
transformer (3D)
Définir la profondeur de champ
perspective
Définir le type de déformation
style de transformation : préserver-3d ;
Déformation 3D
traduire3d
rotationx
rotation
faites pivoter
échelle3d
Définir le point de départ de la déformation
transformation-origine
transition
transition
Pente
gradient linéaire
arrière-plan : dégradé linéaire (0deg, #000, #000)
gradient radial
background:radial-gradient (rayon à la position, #000, #000)
Rayon : majeur/mineur
Position : x/y
Carrelage dégradé linéaire
arrière-plan : dégradé linéaire répété (0deg, #000 5px, #000 10px)
Carrelage à dégradé radial
arrière-plan : dégradé radial répétitif (rayon à la position, #000 5px, #000 10px)
animation
déclaration d'animation
@nom des images clés{}
appel d'animation
animation : nom .5s linéaire 0s alerte infinie avant-mots
Mise en page
Disposition de la boîte flexible
récipient
affichage:flexible
direction flexible
colonne
rangée
colonne inversée
ligne inversée
emballage flexible
envelopper
sans emballage
wrap-reverse
justifier-contenu
démarrage flexible
extrémité flexible
centre
l'espace entre
espace autour
uniformément dans l'espace
aligner les éléments
extensible
démarrage flexible
extrémité flexible
centre
ligne de base
contenu alegn
extensible
démarrage flexible
extrémité flexible
centre
l'espace entre
espace autour
uniformément dans l'espace
projet
fléchir
flex-rétrécissement
croissance flexible
base flexible
s'aligner
extensible
démarrage flexible
extrémité flexible
centre
ligne de base
commande
disposition de la grille
récipient
affichage:grille
colonnes-modèle-de-grille
200px 200px 200px
20% 50% 30%
répéter (3 200 px)
répéter (remplissage automatique, 20 %)
1fr 1fr 1fr
1fr 1frr 1minmax(200px,1fr)
lignes de modèle de grille
200px 200px 200px
20% 50% 30%
répéter (3 200 px)
répéter (remplissage automatique, 20 %)
écart de grille
espacement des rangées
espacement des colonnes
zones de modèle de grille
justifier-contenu
aligner le contenu
justifier les éléments
aligner les éléments
projet
zone de grille
colonne-grille
début de colonne de grille
fin de colonne de grille
ligne de grille
début de ligne de grille
fin de ligne de grille
disposition multi-colonnes
Colonnes
colonnes : 5 200 px ;
nombre de colonnes
largeur de colonne
espacement des colonnes
règle de colonne
travée de colonne
remplissage de colonne
Demandes des médias
<link mate="écran et (min-width:960px) et (max-width:1200px)">
Écran @media et (largeur min : 960 px) et (largeur max : 1 200 px)
modèle de boîte
dimensionnement de la boîte
bordure-boîte
modèle de boîte bizarre
Caractéristiques
bordure de rembourrage dans la largeur et la hauteur
boîte de contenu
modèle de boîte standard
Caractéristiques
la largeur et la hauteur n'incluent pas la bordure de remplissage
compatible
contenu
Trident
Gecko
Kit Web
Clignoter
Presto
préfixe
-moz-
-MS-
-kit Web-
-o-
le terme
amélioration progressive
D'abord bas puis haut, en se concentrant sur la mise en œuvre des fonctions de la version basse et en ajoutant des effets sympas à la version haute
Rétrogradation gracieuse
D'abord haut, puis bas, en se concentrant sur les effets des fonctions de version haute et en tenant compte de la compatibilité des versions basses
autre
Icône de police
http://www.iconfont.cn
lien d'ancrage
<a href="#one"></a>
Saut
<a name="un"></a>
<div id="un"></div>
Méthode de centrage
position
méthode 1
boîte parent
position : relative ;
sous-boîte
position : absolue ;
haut : 50 % ;
gauche : 50 % ;
marge gauche : demi-largeur ;
margin-top : -demi-hauteur ;
marge:auto
Méthode 2
boîte parent
position : relative ;
sous-boîte
position : absolue ;
haut : 0 ;
bas : 0 ;
gauche : 0 ;
à droite : 0 ;
marge:auto
Méthode 3
boîte parent
position : relative ;
sous-boîte
position : absolue ;
top:calc(50% - moitié plus haut);
left:calc(50% - la moitié de la largeur);
Méthode 4
boîte parent
position : relative ;
sous-boîte
position : absolue ;
haut : 50 % ;
gauche : 50 % ;
traduire(-50%,-50%);
Boîte flexible
méthode 1
boîte parent
affichage:flex;
sous-boîte
marge:auto;
Méthode 2
boîte parent
affichageflex;
justifier-content:center;
align-items:center;
Méthode 3
boîte parent
affichage:flex;
justifier-content:center;
sous-boîte
align-self:center
grille
méthode 1
boîte parent
affichage:grille;
justifier-content:center;
align-content:center;
Méthode 2
boîte parent
affichage:grille;
sous-boîte
marge:auto;
bloc de transfert intra-ligne
méthode 1
boîte parent
hauteur de ligne : élevée ;
texte-align:centre;
boîte parent
display:bloc en ligne ;
alignement vertical : milieu ;
hauteur de ligne : haute ;
Méthode 2
boîte parent
texte-align:centre;
sous-boîte
display:bloc en ligne ;
alignement vertical : milieu ;
Pseudo-élément de la boîte parent ::after
contenu:"";
display:bloc en ligne ;
alignement vertical : milieu ;
largeur:0;
hauteur : 100 % ;
Méthode 3
boîte parent
texte-align:centre;
alignement vertical : milieu ;
display:table-cellule;
sous-boîte
display:bloc en ligne ;
Centrer verticalement le texte multiligne
boîte parent
alignement vertical : milieu ;
display:table-cellule;
segment de code
Ellipse
largeur fixe
largeur
Aucun saut de ligne
espace blanc:nowrap;
débordement caché
débordement caché
Ellipse
débordement de texte : points de suspension
Disposition mobile
fenêtre
Fenêtre d'affichage, la valeur par défaut pour mobile est 980
dpr
Rapport de pixels de l'appareil
Mise en page
Disposition en pourcentage
Disposition à l'échelle
unité
em
Un multiple de lui-même ou de la taille de police de la boîte parent
Rem
Multiple de la taille de police racine (html)
VW
Un pour cent de la largeur de la fenêtre
vh
Un pour cent de la hauteur de la fenêtre
vmin
un pour cent du côté court
vmax
Un pour cent du côté long
BFC
Propriétés déclenchables
flotter
gauche
droite
débordement
caché
faire défiler
auto
position
absolu
fixé
afficher
bloc en ligne
cellule de table
légende du tableau
fléchir
application
problème de pénétration de la marge supérieure
problème d'effondrement en hauteur
Largeur et hauteur adaptatives
Contenu adaptable à la largeur
flotter
position
bloc en ligne
Contenu hautement adaptatif
très effondré
La boîte enfant flotte et la hauteur de la boîte parent est 0.
résoudre
hauteur fixe
avantage
Simple
défaut
Incapable de s'adapter
Ajouter un débordement : caché à la boîte parent
avantage
Adaptable
défaut
débordement caché
Ajoutez une case vide sous le flotteur et définissez clear:both;
avantage
Peut être adaptatif
Cacher sans débordement
défaut
Besoin de charger une boîte supplémentaire
Méthode universelle clear float, add::after{content:"";display:block;clear:both;} à la boîte parent
avantage
Adaptable
problème de débordement masqué
Pas besoin de charger une boîte supplémentaire
fenêtre adaptative en hauteur
html,corps{hauteur :100 %;}
HTML5
Caractéristiques
La structure de base est plus simple
relaxation grammaticale
Sémantique des étiquettes
Même sans styles, une structure claire peut être présentée
Facile pour le référencement
Facilite le travail d’équipe et la modification du code après maintenance
accessibilité
fonctionnalités futures
Ajouter des balises sémantiques
grande sémantique
entête
bas de page
principal
navigation
section
article
de côté
petite sémantique
chiffre
figlégende
marque
toile
vidéo
Les attributs
contrôles
lecture automatique
en sourdine
boucle
src
Formats pris en charge
mp4
ogg
webm
largeur
hauteur
l'audio
Les attributs
contrôles
lecture automatique
en sourdine
boucle
src
Formats pris en charge
mp3
ogg
wav
détails
résumé
source
formulaire intelligent
Ajouter de nouveaux attributs
requis
Champs obligatoires
mise au point automatique
mise au point automatique
espace réservé
Espace réservé
Saisie automatique
S'il faut activer l'enregistrement de l'historique
valeur
sur
désactivé
modèle
Vérification régulière
Ajouter un nouveau contrôle
tél.
URL
nombre
min
maximum
étape
gamme
min
maximum
étape
couleur
recherche
date
mois
semaine
temps
datatime-local
balises html communes
Classe de texte
titre
h1
Généralement utilisé pour placer des logos
h2
Généralement utilisé pour mettre des titres de colonnes
h3
h4
h5
h6
paragraphe
p
Classe de modification
Audacieux
b
fort
Une sémantique forte
inclinaison
je
em
Une sémantique forte
Souligner
toi
ins
Une sémantique forte
barré
s
del
Une sémantique forte
exposant et indice
souper
exposant
sous
indice
Classe de table
Étiquette
tableau
tr
td
ème
En-tête de colonne
légende
titre du tableau
regroupement de lignes
la tête
le corps
pied
regroupement de colonnes
groupe de collaboration
Les attributs
règles
Ligne de démarcation du groupe
valeur
tous
cols
Lignes
aucun
groupes
largeur
hauteur
frontière
couleurbg
aligner
alignement horizontal
valeur
gauche
droite
centre
valider
alignement vertical
valeur
haut
milieu
bas
ligne de base
Colpan
envergure
espacement des cellules
rembourrage cellulaire
Classe de formulaire
champs de formulaire
formulaire
méthode
Méthode de soumission
valeur
obtenir
pas sécurisé
Partageable
Traiter les données de moins de 2 Ko
Affecté par la longueur de la barre d'adresse
efficace
Le processus d'obtention des données
poste
Le processus de transfert de données
Aucune limite de taille
relativement sûr
faible efficacité
Non partageable
action
adresse cible
valeur
(adresse sautée)
nom
cible
Méthode ouverte
valeur
_vide
ouvrir dans une nouvelle fenêtre
_soi
La fenêtre actuelle est ouverte
contrôle de formulaire (type)
texte
texte
mot de passe
mot de passe
Choix unique
radio
Chaque groupe doit avoir la même valeur d'attribut de nom
Choix multiple
case à cocher
dérouler
sélectionner>option
champ de texte
zone de texte
bouton
image
bouton
soumettre
réinitialiser
déposer
Propriétés associées
nom
nom
valeur
valeur
plusieurs
Choix multiple
vérifié
Coché par défaut
choisi
Menu déroulant coché par défaut
lecture seulement
lecture seulement
désactivé
Désactiver
Classe de liste
ordonné
ol>li
Les attributs
taper
valeur
1
un
UN
je
je
commencer
désordre
ul>li
Les attributs
taper
valeur
cercle
disque
carré
aucun
Personnaliser
dl>dt jj
dépendant du chemin
image
img
Les attributs
scr
titre
alt
largeur
hauteur
Lien hypertexte
un
Les attributs
href
titre
cible
chemin
relativement
Même niveau
./
Écrivez directement
niveau supérieur
../
niveau suivant
dossier
document
absolu
À partir de la lettre de lecteur
D:\......
utilisé à partir de pages Web
https://img….
la différence
relativement
Il y a une référence
Impossible de croiser les lettres de lecteur
absolu
aucune référence
Les chemins locaux ne peuvent pas s'étendre sur les ordinateurs (sauf si les chemins sur les ordinateurs sont les mêmes)
autre
br
forcer le saut de ligne
heure
ligne horizontale
div
portée
entité de personnage
>
<
©
®
grammaire
double étiquette
<nom de la balise attribut="valeur de l'attribut"></nom de la balise>
étiquette unique
<nom de la balise attribut="valeur de l'attribut" />
étiquette, marque, élément
structure de base HTML
En-tête de déclaration du document
Dites au navigateur que mon type de document est HTML
Encodage de caractère
jeu de caractères = "utf-8"
titre de la page
titre
notion HTML
Langage Signalétique Hyper Text
Langage Signalétique Hyper Text