Maison > interface Web > tutoriel CSS > Quels types de propriétés CSS existe-t-il ?

Quels types de propriétés CSS existe-t-il ?

coldplay.xixi
Libérer: 2023-01-03 09:31:18
original
5953 Les gens l'ont consulté

css属性类型有:1、html标签;2、CSS文字属性;3、CSS符号属性;4、CSS背景样式;5、CSS表单运用;6、CSS边界样式。

Quels types de propriétés CSS existe-t-il ?

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css属性类型有:

、html标签

  • 1

    ...

    文字格式化

  • ......
    Conteneur de bloc de colonnes

  • Changement de taille de policeLe mot que vous souhaitez saisir

  • Couleur de police Le mot que vous souhaitez saisir

  • La police devient grasseLe mot que vous souhaitez saisir

  • La police devient italiqueLe mot que vous souhaitez saisir

  • La police est soulignéeLe mot que vous souhaitez saisir

  • Aligner sur la syntaxe centrale

    Content

  • Aligner la syntaxe à gauche

    content

  • Aligner la syntaxe à droite

    content< ;/p>

  • Police barréeLe mot que vous souhaitez saisir

  • Paramètre de la police =" Nom de la police">Le mot que vous souhaitez saisir

  • Police de machine à écrireLe mot que vous souhaitez saisir

  • Mot en exposant

  • Mot d'indiceLe mot que vous souhaitez saisir

  • Ligne horizontale


  • Enroulez la ligne et saisissez le mot que vous souhaitez saisir
    Le mot que vous souhaitez saisir

  • Lien hypertexteLe nom du lien

  • Tapez les mots que vous souhaitez afficher iciÉtiquette Webmail

  • Image

  • Marquee (boucle) Mots que vous souhaitez saisir

Balise de format d'importation de fichier externe

Format d'import externe CSS :

1

<link rel="stylesheet" type="text/css" href="/css.css" />

Copier après la connexion

Référence directe :

1

2

3

4

5

<style type="text/css">

<!--

id{...}

-->

</style>

Copier après la connexion

javascript - Charger le fichier indépendant .js externe :

1

<script type="text/javascript" src="/script.js"></script>

Copier après la connexion

2. Attributs de texte CSS :

color : #999999; /*text color*/

font-family : 宋体,sans-serif; -size : 9pt; /*Taille du texte*/

font-style:itelic; /*Texte italique*/

font-variant:small-caps; 🎜>

espacement des lettres : 1 pt ; /*Distance entre les mots*/

hauteur de la ligne : 200 % ; /*Définir la hauteur de la ligne*/

police -poids : gras ; /*Texte en gras*/

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; 🎜>text-decoration:none; /*remove link underline*/

text-transform : majuscule; /*capitaliser le premier mot*/

text-transform : majuscule /*anglais; majuscule*/

text-transform : minuscule; /*Anglais minuscule*/

text-align:right /*Texte aligné à droite* /

text-align; :left; /*Text-align left*/

text-align:center; /*Text-align:center*/

text-align:justify ;

attribut vertical-align

vertical-align:top; /*Aligner verticalement vers le haut*/

vertical-align:bottom; >

vertical-align:middle; /*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*/

3. Attributs du symbole CSS :

list-style-type:aucun; *Aucun numéro*/

list-style-type:decimal; /*Chiffres arabes*/

list-style-type:lower-roman /*Chiffres romains minuscules*/

list-style-type:upper-roman; /*Chiffres romains majuscules*/

list-style-type:lower-alpha /*Lettres anglaises minuscules*/

list-style-type:upper-alpha; /*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); /*Symbole d'image*/

list-style-position:outside /*Ligne convexe*/

list-style-position :inside /*Indent*/

4. Style d'arrière-plan CSS :

couleur d'arrière-plan : #F5E2EC ; Arrière-plan en perspective*/

background-image : url(/image/bg.gif); /*Image d'arrière-plan*/

background-attachment : corrigé /*Filigrane d'arrière-plan fixe*/

background-repeat : répéter; /*Répéter l'arrangement - page Web par défaut*/

background-repeat : no-repeat; / *Ne pas répéter l'arrangement*/

background-repeat : répéter-x; /*Répéter la disposition sur l'axe des x*/

background-repeat : répéter-y /*Répéter la disposition sur l'axe des y */

Spécifiez la position de l'arrière-plan

background-position : 90% 90% /*La position des axes x et y de l'image d'arrière-plan*/

background -position : top; /*Align up*/

background-position : bottom; /*Align down*/

background-position : left /*Align left*/

background-position : right; /*Align right*/

background-position : center; /*Align center*/

5 , propriétés de connexion CSS :

a /*Tous les hyperliens*/

a:lien /*Format du texte du lien hypertexte*/

a:visité /*Format du texte du lien consulté*/

a:active /*Format du lien pressé*/

a:hover /*Souris pour lier*/

Style du curseur de la souris :

CURSEUR de doigt de lien : main

Curseur à flèche croisée :réticule

Curseur fléché vers le bas :s-resize

Curseur à flèche croisée :déplacer

Flèche vers le curseur droit: déplacer

Ajouter un point d'interrogation curseur:aider

Flèche vers le curseur gauche:w-resize

Flèche vers le curseur vers le haut:n-resize

Flèche pointant vers le haut et vers le curseur droit : ne-resize

Flèche pointant vers le haut et vers le curseur gauche :nw-resize

Curseur de type I de texte :text

Flèche inclinée vers le bas et curseur droit :se-resize

Flèche en diagonale du curseur inférieur gauche :sw-resize

Curseur en entonnoir :attendre

Motif de curseur (IE6) p {curseur : url("cursor file name .cur"),text;}

6. Liste des bordures CSS :

border-top : 1px solide #6699cc; /* Bordure supérieure*/

bordure-bas : 1px solide #6699cc; /*Bordure inférieure*/

bordure-gauche : 1px solide #6699cc; */

border-right : 1px solid #6699cc; /*right border line*/

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 de bordure supérieure*/

Autres styles de bordure

solide /*Bordure pleine*/

pointillé /*cadre pointillé*/

double /*cadre double*/

rainure /*cadre convexe tridimensionnel*/

crête /*cadre en relief tridimensionnel*/

encart /*cadre concave*/

début /*cadre convexe*/

7. Application de formulaire CSS :

  • Zone de texte

  • Bouton< input type="submit" value="submit" name="B1">

  • case à cocher

  • Bouton de sélection

  • Multi -zone de texte en ligne< ;textarea rows="1" name="S1" cols="15">

  • Menu déroulant

8. Style de bordure CSS :

margin-top:10px; /*bordure supérieure*/

margin-right:10px /*bordure droite; valeur*/

margin-bottom:10px; /*valeur de marge inférieure*/

margin-left:10px /*valeur de marge gauche*/

9 , bordure CSS vide :

padding-top:10px; /*Laisser la bordure supérieure vide*/

padding-right:10px; bordure droite vierge* /

padding-bottom:10px; /*Laissez la bordure inférieure vide*/

padding-left:10px /*Laissez la bordure gauche vide*/

Tutoriels associés recommandés : Tutoriel vidéo CSS

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal