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 ?

Mar 25, 2021 pm 04:22 PM
propriétés CSS

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标签

  • ...
    文字格式化

  • ......
    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 :

<link rel="stylesheet" type="text/css" href="/css.css" />
Copier après la connexion

Référence directe :

<style type="text/css">
<!--
id{...}
-->
</style>
Copier après la connexion

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

<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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes Composants angulaires et leurs propriétés d'affichage : comprendre les valeurs par défaut non bloquantes Mar 15, 2024 pm 04:51 PM

Le comportement d'affichage par défaut des composants du framework Angular ne concerne pas les éléments au niveau du bloc. Ce choix de conception favorise l'encapsulation des styles de composants et encourage les développeurs à définir consciemment la manière dont chaque composant est affiché. En définissant explicitement l'affichage des propriétés CSS, l'affichage des composants angulaires peut être entièrement contrôlé pour obtenir la mise en page et la réactivité souhaitées.

Créez des effets d'arrière-plan dynamiques : utilisation flexible des propriétés CSS Créez des effets d'arrière-plan dynamiques : utilisation flexible des propriétés CSS Nov 18, 2023 pm 03:56 PM

Créer des effets d'arrière-plan dynamiques : L'utilisation flexible des attributs CSS dans la conception Web, les effets d'arrière-plan sont un élément très important, ils peuvent ajouter une atmosphère vivante au site Web et améliorer l'expérience utilisateur. En tant que langage clé pour la conception de styles de pages Web, CSS fait pleinement jouer la flexibilité et la diversité, et fournit une multitude d'attributs et de techniques pour créer divers effets d'arrière-plan dynamiques. Cet article utilisera des exemples de code spécifiques pour présenter l'utilisation flexible de certaines propriétés CSS courantes afin d'obtenir de merveilleux effets d'arrière-plan dynamiques. 1. Fond dégradé Un fond dégradé peut ajouter du charme à la page Web, la rendant

Que signifie groove en CSS Que signifie groove en CSS Apr 28, 2024 pm 04:12 PM

En CSS, groove représente un style de bordure qui crée un effet de type groove. L'application spécifique est la suivante : Utilisez la propriété CSS border-style: groove ; la bordure en forme de rainure a un bord intérieur concave, un bord extérieur surélevé et un effet d'ombre.

Comment définir une bordure pointillée HTML Comment définir une bordure pointillée HTML Apr 05, 2024 am 09:36 AM

En HTML, vous pouvez définir la bordure sur une ligne pointillée via l'attribut CSS border-style : déterminez l'élément sur lequel vous souhaitez définir une bordure en pointillé, par exemple, utilisez l'élément p pour représenter un paragraphe. Utilisez l'attribut border-style pour définir le style de ligne pointillée. Par exemple, pointillé représente une ligne pointillée et pointillé représente une courte ligne pointillée. Définissez d'autres propriétés de bordure, telles que border-width, border-color et border-position, pour contrôler la largeur, la couleur et la position de la bordure.

Comment définir l'image d'arrière-plan dans layui Comment définir l'image d'arrière-plan dans layui Apr 26, 2024 am 02:45 AM

Il existe deux manières de définir l'image d'arrière-plan dans layui : utilisez le style CSS : body { background-image: url("path/to/image.jpg" } utilisez l'API layui : layui.use('element', function( ) { element.addStyle('.layui-body{background-image: url("path/to/image.jpg");}') });

Comment utiliser les propriétés CSS3 pour obtenir l'effet d'habillage du texte d'une page Web ? Comment utiliser les propriétés CSS3 pour obtenir l'effet d'habillage du texte d'une page Web ? Sep 08, 2023 am 10:30 AM

Comment utiliser les propriétés CSS3 pour obtenir l'effet d'habillage du texte d'une page Web ? Dans la conception Web moderne, les effets d’habillage de texte constituent une méthode de présentation courante et intéressante. En utilisant les propriétés CSS3, nous pouvons facilement obtenir l'effet d'habillage du texte Web. Cet article présentera certaines propriétés CSS3 couramment utilisées et leur application pour obtenir des effets d'habillage de texte. 1. Attribut Float L'attribut float est un attribut utilisé en CSS pour définir le float d'un élément. En combinaison avec l'attribut clear, l'effet d'enroulement du texte autour de l'image peut être obtenu. Voici un exemple :&

Comment résoudre le problème de désalignement de l'en-tête du site WordPress ? Comment résoudre le problème de désalignement de l'en-tête du site WordPress ? Mar 01, 2024 am 09:54 AM

Comment résoudre le problème de désalignement de l’en-tête du site WordPress ? Lorsque vous rencontrez des problèmes de désalignement de la tête sur votre site WordPress, cela peut être déroutant et frustrant. Ce problème peut être dû à diverses raisons, telles que des erreurs de style CSS, des conflits Javascript, des problèmes de plug-in, etc. Dans cet article, nous verrons comment résoudre le problème de désalignement des en-têtes dans WordPress et fournirons des exemples de code spécifiques. 1. Vérifiez les styles CSS Tout d’abord, vérifiez la feuille de style CSS de votre thème pour détecter les erreurs ou les conflits.

Techniques de propriétés CSS pour obtenir des effets de défilement sympas Techniques de propriétés CSS pour obtenir des effets de défilement sympas Nov 18, 2023 am 09:08 AM

Les techniques de propriétés CSS pour obtenir des effets de défilement sympas nécessitent des exemples de code spécifiques. CSS est un élément indispensable de la conception Web. Divers effets peuvent être obtenus grâce à CSS pour améliorer l'expérience interactive des pages Web. Parmi eux, l'effet de défilement est un effet très courant et très intéressant, qui peut faire défiler les éléments d'une page Web vers une position spécifiée avec un effet d'animation fluide. Cet article présentera quelques techniques de propriétés CSS pour obtenir des effets de défilement sympas et fournira des exemples de code spécifiques. 1. Utilisez l'attribut CSS scroll-behavior pour obtenir un défilement fluide

See all articles