Maison > Article > interface Web > Résumé et partage des bases de l'apprentissage des styles CSS
Résumé et partage des bases de l'apprentissage des styles CSS
- 高洛峰original
- 2017-03-10 10:33:371484parcourir
Il est impossible de faire une mise en page CSS sans connaissances de base suffisantes. Cet article fournit aux débutants un résumé de base de l'apprentissage des attributs CSS fréquemment utilisés, les amis intéressés peuvent s'y référer. Cela peut être utile. .
Introduction de base au CSS
La feuille de style en cascade (feuille de style en cascade) est appelée « CSS », généralement également appelée « feuille de style (feuille de style) », qui est utilisée à la conception de style Web. Par exemple, si vous souhaitez que le mot du lien soit bleu lorsqu'il n'est pas cliqué, puis devienne rouge et souligné lorsque la souris est déplacée dessus, il s'agit d'un style. En configurant une feuille de style, vous pouvez contrôler uniformément les attributs d'affichage de chaque marque en HTML. Les feuilles de style en cascade permettent aux utilisateurs de contrôler plus efficacement l'apparence des pages Web. À l'aide de feuilles de style en cascade, vous pouvez étendre votre capacité à spécifier avec précision la position et l'apparence des éléments de page Web et à créer des effets spéciaux.
CSS est l'abréviation de l'anglais CascadingStyle Sheets (Cascading Style Sheets). C'est un langage informatique utilisé pour exprimer des styles de fichiers tels que HTML ou XML. La dernière version de CSS est CSS3, un langage de conception de style capable de véritablement séparer les performances et le contenu des pages Web. Par rapport aux performances du HTML traditionnel, CSS peut effectuer un contrôle précis au niveau des pixels sur la position et la disposition des objets dans les pages Web, prend en charge presque tous les styles de taille de police, a la capacité de modifier les objets de page Web et les styles de modèle et peut effectuer des tâches préliminaires. interactions. Le design est actuellement le meilleur langage de conception expressif basé sur l’affichage de texte. CSS peut simplifier ou optimiser les méthodes d'écriture en fonction de la capacité de compréhension des différents utilisateurs, ce qui le rend hautement lisible pour tous les types de personnes.
2. Comment utiliser CSS
Il existe trois façons d'utiliser les feuilles de style sur les pages du site :
Styles externes : liez les pages Web à des feuilles de style externes.
Styles de page intérieure : créez des feuilles de style intégrées sur des pages Web.
Styles en ligne : appliquez des styles en ligne à des éléments de page Web individuels.
Chaque méthode a ses avantages et ses inconvénients :
Utilisez une feuille de style externe lorsque vous souhaitez appliquer le même style de manière cohérente sur tout ou partie des pages de votre site. Définir des styles dans une ou plusieurs feuilles de style externes et les lier à toutes les pages Web garantit une apparence cohérente sur toutes les pages Web. Si les gens décident de changer le style, ils n'ont qu'à le modifier une seule fois dans la feuille de style externe, et le changement sera répercuté sur toutes les pages liées à la feuille de style. Habituellement, les feuilles de style externes ont .css comme extension de fichier, comme le style commun Common.css dans le Brisbane News Release System. Ensuite, liez-le dans la page qui nécessite ce style, par exemple :
>
Lorsque les gens souhaitent simplement définir le style de la page Web actuelle, des feuilles de style intégrées peuvent être utilisées. Une feuille de style intégrée est une feuille de style en cascade « intégrée » dans la balise
Utilisez des styles en ligne pour appliquer des attributs de feuille de style en cascade aux éléments de la page Web. Par exemple :
Si la page Web est liée à une feuille de style externe, les styles en ligne ou intégrés créés pour la page Web étendront ou remplaceront les propriétés spécifiées dans la feuille de style externe.
Pour utiliser les styles d'une feuille de style externe sur une page Web, liez la page Web à la feuille de style à l'aide de la commande Lien vers la feuille de style du menu Format. Vous pouvez lier une ou plusieurs feuilles de style à la page Web actuelle en mode d'affichage de page Web, à une page Web sélectionnée dans une liste de dossiers ou à toutes les pages Web du site.
La zone Style répertorie les balises HTML standards, telles que les titres
1, ainsi que les sélections de classe ou d'ID contenues dans les feuilles de style intégrées ou les feuilles de style externes liées au périphérique de page Web. Pour appliquer un style à un élément de page Web, sélectionnez le style et cliquez sur le style ou le sélecteur dans la zone Style.
Dans Microsoft FrontPage 2000, certaines fonctionnalités de formatage sont automatiquement appliquées en tant que styles en ligne. Par exemple : Si vous utilisez la commande Bordures et ombres (dans le menu Format) pour appliquer un cadre autour d'un paragraphe normal, FrontPage écrit les informations de mise en forme en tant que propriétés de style en ligne de la marque de paragraphe (par exemple :
3. Attributs de texte CSS :
couleur : #999999 ; /*text color*/
font-family : Song Dynasty, sans- serif ; /*Police du texte*/
taille de la police : 9pt; /*Taille du texte*/
style de police:itelic;/*Texte italique*/
font -variant:small-caps;/*small font*/
espacement des lettres : 1pt ; /*espace entre les mots*/
hauteur de la ligne : 200 % ; hauteur */
font-weight:bold;/*text bold*/
vertical-align:sub;/*subscript*/
vertical-align:super;/*Superscript*/
text-decoration:line-through;/*Ajouter un barré*/
text-decoration:overline;/*Ajouter une ligne supérieure*/
text-decoration:underline;/*Ajouter un soulignement*/
text-decoration:none;/*Supprimer le soulignement du lien*/
text-transform: majuscule / *Mettre le premier mot en majuscule*/
text-transform : majuscule ; /*Majuscule anglaise*/
text-transform : minuscule /*Anglais minuscule*/
texte -align:right;/*Texte-aligné à droite*/
text-align:left;/*Texte-aligné à gauche*/
text-align:center;/ *Texte aligné au centre */
text-align:justify;/*Alignement dispersé du texte*/
attribut d'alignement vertical
alignement vertical:top ;/*Aligner verticalement vers le haut*/
alignement-vertical:bas;/*Aligner verticalement vers le bas*/
alignement-vertical:milieu;/*Aligner verticalement au centre*/
vertical-align:text -top;/*Aligner le texte verticalement vers le haut*/
vertical-align:text-bottom;/*Aligner le texte verticalement vers le bas*/
4. Attributs du symbole CSS :
list-style-type:aucun;/*Aucun numéro*/
list-style-type:decimal;/*Chiffres arabes*/
list- style-type:minuscule-roman;/*chiffres romains minuscules*/
list-style-type:majuscules-roman;/*chiffres romains majuscules*/
list-style-type: lower-alpha;/*lettres anglaises minuscules*/
list-style-type:alpha-majuscule;/*lettres anglaises majuscules*/
list- style-type:disc;/* Symbole de cercle plein*/
list-style-type:circle;/*Symbole de cercle creux*/
list-style-type:square;/* Symbole carré plein*/
list-style-image:url(/dot.gif);/*Picture-style symbol*/
list-style-position:outside;/*Convexe row*/
list-style-position:inside;/*indent*/
5. Style d'arrière-plan CSS :
couleur d'arrière-plan : #F5E2EC;/*Couleur d'arrière-plan*/
arrière-plan:transparent;/*Arrière-plan de perspective*/
image d'arrière-plan : url(/image/bg.gif /*Image d'arrière-plan*); /
background-attachment : corrigé ; /*Filigrane d'arrière-plan fixe*/
background-repeat : répéter ; /*Arrangement des répétitions - page Web par défaut*/
background- répéter: no-repeat; /*Ne pas répéter l'arrangement*/
background-repeat: répéter-x; /*Répéter l'arrangement sur l'axe des x*/
background-repeat : répéter-y; /*Répéter sur l'axe y Organiser*/
Spécifier la position de l'arrière-plan
background-position: 90% 90% /*La position du x et du y axes de l'image d'arrière-plan*/
background-position: top ; /*Align up*/
background-position: buttom /*Align down*/
background; -position : gauche ; /*Aligner à gauche*/
position d'arrière-plan : droite ; /*Aligner à droite*/
position d'arrière-plan : centre ;
6. Propriétés de connexion CSS :
a/*Tous les hyperliens*/
a:link/*Format de texte de l'hyperlien*/
a:visité/*Format du texte du lien visité*/
a:actif/*Format du lien pressé*/
a:survol/*Souris pour lier*/
Style du curseur de la souris :
Curseur de doigt de lien : main
Curseur en croix : réticule
Flèche pointant vers le bas curseur : s-resize
Curseur en forme de croix : déplacer
Flèche pointant vers le haut Curseur droit : déplacer
Ajouter un point d'interrogation curseur : aide
flèche vers le curseur gauche :w-redimensionner
flèche vers curseur vers le haut:n-resize
La flèche pointe vers le curseur supérieur droit:ne-resize
La flèche pointe vers le curseur supérieur gauche:nw-resize
Texte I tapez curseur:texte
La flèche pointe vers le curseur inférieur droit:se-resize
Flèche en diagonale du curseur inférieur gauche:sw-resize
Curseur en entonnoir:attendez
Motif de curseur (IE6) p {cursor:url("cursor file name.cur"), text ;}
7. Liste des bordures CSS :
bordure-haut : 1px solide #6699cc ; /*bordure supérieure*/
bordure -bas : 1px solide #6699cc /*bordure inférieure*/
bordure gauche : 1px solide # ; 6699cc; /*Bordure gauche*/
border-right: 1px solid # 6699cc; /*Ligne de bordure droite*/
Ce qui précède est la méthode d'écriture recommandée, mais vous pouvez également utiliser la méthode conventionnelle comme suit :
border-top-color: #369 /*Définir la couleur supérieure de la bordure supérieure*/
border-top-width:1px /*Définir la largeur supérieure de la bordure supérieure*/
border-top-style: solid/*Définir le style supérieur de la bordure supérieure*/
Autres styles de cadre
solid/*solid frame */
pointillé/*cadre pointillé*/
double/*cadre double* /
rainure/*cadre convexe intérieur tridimensionnel*/
crête/*cadre en relief tridimensionnel*/
encart/*cadre concave*/
début /*cadre convexe*/
8. application :
Zone de texte
Bouton
case à cocher
bouton de sélection
Zone de texte multiligneMenu déroulant 🎜>
9. Style de bordure CSS :
marge supérieure : 10 px ;/*bordure supérieure*/
marge droite :10 px;/*droite Valeur de la marge*/
marge-bas:10px;/*Valeur de la marge inférieure*/
marge-gauche:10px;/*Valeur de la marge gauche*/
10. Bordure CSS vierge
padding-top:10px;/*Laisser la bordure supérieure vide*/
padding-right:10px;/*Laisser la bordure droite vide*/
padding-bottom:10px;/*Laissez la bordure inférieure vide*/
padding-left:10px;/*Laissez la bordure gauche vide*/
Onze , Style de barre de défilement
Scrollbar-face-color:#f3f3f3;/*Couleur de la partie saillante de la barre de défilement*/
Scrollbar-highlight-color:#f1f1f1 /*Couleur de défilement de la partie ombre de la barre*/
Scrollbar-shadow-color:#fcfcfc/*Couleur de l'ombre de la barre de défilement tridimensionnelle*/
Scrollbar-3dlight-color : #fcfcfc/*Scroll bar bright edge Color*/
Scrollbar-arrow-color:#34837/*Couleur des flèches triangulaires sur les boutons haut et bas*/
Scrollbar-track- color:#fcfcfc/*Couleur d'arrière-plan de la barre de défilement */
Scrollbar-darkshadow-color:#66c0f4/*Barre de défilement tridimensionnelle couleur d'ombre forte*/
Scrollbar-base- color:#fcfcfc/*La couleur de base de la barre de défilement*/
Ce qui précède est une étude de base des styles CSS. Veuillez me pardonner s'il y a des divergences.
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!