HTML+CSS Débuter facilement avec des connaissances de base en CSS
Maintenant, nous commen?ons à expliquer les connaissances de base du CSS?:
Avant de parler des connaissances de base, nous devons savoir comment rédiger des commentaires en CSS
/*Contenu des commentaires*/
Police?: police
Quelles opérations avons-nous sur les polices?:
Couleur de la police Taille de la police taille de la police style font-family Italic font-style font-weight underline text-decoration line-height
Expliquons à travers des exemples?:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font-size: 20px; /*字體大小*/ color: red; /*字體顏色*/ font-weight: bold; /*字體粗細*/ font-style: oblique; /*italic:斜體。對于沒有斜體變量的特殊字體,將應(yīng)用 oblique normal:默認值。正常的字體 oblique傾斜的字體 */ text-decoration:none; /*none : 默認值。無裝飾 blink : 閃爍 underline : 下劃線 line-through : 貫穿線 overline : 上劃線 */ font-family:隸書; /*什么樣的字體。宋體,隸書等*/ } </style> </head> <body> 中華名族偉大復(fù)興 </body> </html>
Texte texte
Alignement du texte text-align
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ text-align:center; } </style> </head> <body> 中華名族偉大復(fù)興 </body> </html>
Arrière-plan
Arrière-plan couleur background-color Image d'arrière-plan background-image
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background-color:red; background-image:url("1.jpg"); } </style> </head> <body> 中華名族偉大復(fù)興 </body> </html>
Taille
largeur largeur Hauteur height
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ background-color: red; width: 100px; height:100px; } </style> </head> <body> <div></div> </body> </html>
margin and padding
l'attribut raccourci margin définit toutes les marges dans une seule propriété d'instruction. Cet attribut peut avoir de 1 à 4 valeurs. <<>
La distance supérieure est de 10px
>
La marge inférieure est 15px La marge gauche est de 20pxla propriété raccourcie de remplissage définit toutes les propriétés de remplissage dans une seule instruction. Cet attribut peut avoir de 1 à 4 valeurs. remplissage?: 10px 5px 15px 20px?; ??>Le remplissage gauche est de 20pxRemarque?: si aucun des 4 paramètres n'est écrit, la valeur par défaut est 0pxborder borderDéfinir l'épaisseur et la couleur de la bordureborder:1px solid red La ligne de bordure est une ligne continue de 1 pixel, et la ligne est rouge<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } div{ margin-left:50px; margin-top:50px; background-color:#ccc; width:150px; height:150px; border:1px solid red; } </style> </head> <body> <div>測試</div> </body> </html>Après avoir couru comme ?a, les mots sont dans Comment déplacer le texte dans le coin supérieur gauche du div vers le milieu Ajoutez simplement deux styles au CSS du div text-align: center; line-height: 150px;.