Maison >interface Web >js tutoriel >Classification CSS, attributs et sélecteurs

Classification CSS, attributs et sélecteurs

php中世界最好的语言original: 2018-03-19 13:51:081436parcourir

Cette fois je vais vous apporter la classification du Css, les attributs et les sélecteurs, la classification de l'utilisation du Css, quelles sont les précautions pour les attributs et les sélecteurs, ce qui suit est un cas pratique, jetons un oeil.

Css Widget de feuille de style en cascade pour embellir la page

Catégorie :

Inline (inline) à l'intérieur de la balise avec Presented sous forme d'attributs, le nom de l'attribut style

est présenté sous la forme d'une balise dans la balise head intégrée, et le nom de la balise est style

🎜>

balise de lien

<link rel="stylesheet" type="text/css" href="file:///D|/SSs/作业/3.12/图标.css" />

Insérer une icône (ajouter une icône, le chemin doit être absolu)

icône icône

<link rel="shortcut icon" href="xxx.ico" type="image/x-icon"/>

Sélecteur :

Utilisé pour rechercher des éléments et appliquer des styles aux étiquettes.

sélecteur de balises.p{}

　sélecteur d'identifiant #id{

} 　class selector.class{}

　Sélecteur parallèle (ajouter une virgule) 1, sélecteur 2

　Sélecteur parent parent et enfant (ajouter un espace)

Sélecteur enfant

　 *{}Pleine page

Attributs :

Texte :

　text-decoration décoration de texte (soulignement ou quelque chose comme ça) text-indent indent

Texte -shadow shadow 1px (position de l'ombre horizontale) 1px (vertical) 1px (distance floue) # (couleur de l'ombre)

Police de poids en gras

em Tableau taille d'un mot

Contexte :

bg-position

<head>
    <style>        
        #p{ 
        width:100%;
        height:111px;
        background-image:url();
            background-position:34% 0        }
    </style></head><body>
    <p id="p"></p></body>

background-size Taille de l'image Mise à l'échelle

background : Taille de la position de la tuile de l'image couleur

Résumé du problème :

1. L'attribut text-indent indent ne peut être utilisé que sur les balises de bloc telles que span ne peuvent pas être utilisées

Solution : Ajoutez l'attribut display:inline-block; à span pour le transformer en étiquette de bloc en ligne.

2. Le grand p définit le petit p Si le parent p ne définit pas la largeur et la hauteur, cela changera avec la position de l'enfant p. .

Si l'attribut margin float est écrit sur l'enfant p, le parent p bougera également.

Solution : Définir une bordure ou définir la largeur et la hauteur du parent p.

　3. Changer la couleur de

Annulez la bordure et définissez la couleur et la hauteur de l'arrière-plan.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Connaissance de base du HTML dans le front-end

Analyse du front-end de sites Web bien connus- mise en page finale

Connaissances de base sur le CSS front-end

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：

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

Article précédent：Quelle est la différence entre HTTP et HTTPArticle suivant：Quelle est la différence entre HTTP et HTTP

Articles Liés

Voir plus