Table des matières
 
然而,有些时候,不希望每个元素都继承样式。
但是,还好,浏览器总会使用更特定的规则
总是有些段落要特殊点的
不是吗?所以,有了类的存在,就像俱乐部
结果:
Maison interface Web tutoriel HTML CSS入门_html/css_WEB-ITnose

CSS入门_html/css_WEB-ITnose

Jun 24, 2016 am 11:34 AM

 

 

选择器

 

1 <!--这个样式用在p元素中-->2     p{3       color: maroon;4     }
Copier après la connexion

把CSS放入HTML中

 1 <!-- 放入style元素中,但不建议文件多的时候这样做 --> 2 <head> 3   <meta charset="utf-8"> 4   <title> HEAD FIRST CSS</title> 5   <style> 6     p{ 7       color: maroon; 8     } 9   </style>10 </head>
Copier après la connexion

为一个或多个页面增加样式:

步骤:

  1. 取出html文件中的样式规则,把他们放在一个后缀名为.css的文件中。
  2. 从每个html文件创建一个到css文件的外部链接
  3. 做好测试

 1 <!--这个样式在一个index.css文件中--> 2     p{ 3       color: maroon; 4     } 5  6  7 <!-- 在html文件中 --> 8 <head> 9   10   <meta charset = "utf-8">11   <title>head first Lounge</title>12     13    <!-- 链接到外部样式表的HTML -->14   <link rel="stylesheet" href="index.css">15 16 </head>
Copier après la connexion

样式的继承

只能对体中的元素增加样式,所以元素不用作讨论

上图注释:

  • 如果设置所有

    元素,就会影响到下面阴影部分的所有元素。

  • img元素也是段落的子元素,不过他没有任何文本,故不受影响
  • 长江后浪推前浪,覆盖继承

    然而,有些时候,不希望每个元素都继承样式。

    但是,还好,浏览器总会使用更特定的规则

    1 body{2         font-family:sans-serif;3     }4     5     /* 覆盖掉了从body继承的font-family属性 */6     em{7       font - family:serif;8     }
    Copier après la connexion

    单独为某些段落设置样式

    总是有些段落要特殊点的

    不是吗?所以,有了类的存在,就像俱乐部

    1 <!-- 在html文件中 -->2 <p class="specil">3   this is a specil people/class;4 </p>5 <p>6   this is 平常的 p;7 </p>
    Copier après la connexion

    1 /*这个样式在一个index.css文件中*/2  p{3         font-family:sans-serif;4     }5  /*specil类的p ,覆盖掉了从p继承的样式,多个元素同属一个类时,为了一次设置多个元素,可以省略类前的元素名*/6   p.specil{7          color:green;8     }
    Copier après la connexion

    谁是赢家?

    什么?一个元素加入了多个俱乐部?

    没事,选择器总是会选最特定(特定等级相同时选最后的)的样式

    1 <!-- 在html文件中 -->2 <p class="specil big small">3   this is a specil people/class;4 </p>
    Copier après la connexion

     1 /*选择所有段落*/ 2 p{ 3  4   color:black; 5 } 6 /*选择specil类所有成员,比上一个特定点*/ 7 .specil{ 8   color:green; 9 }10 /*这个规则只选specil类中段落,比前一个更特定*/11 p.specil{12   color:green;13 }14 p.specil{15   color:blue;16 }
    Copier après la connexion

    结果:

  • 如果一个元素属于多个类,选择器会选择特定等级最高的。
  • 如果特定程度都相同,选择器总会选择最后出现的规则。
  • 上面的代码最后的玩家是蓝色。
  • 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

    Video Face Swap

    Video Face Swap

    Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

    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)

    HTML est-il facile à apprendre pour les débutants? HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

    HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

    Les rôles de HTML, CSS et JavaScript: responsabilités de base Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

    HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

    Quel est un exemple d'une balise de départ dans HTML? Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

    Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

    Comprendre HTML, CSS et JavaScript: un guide pour débutant Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

    WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

    Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Apr 04, 2025 pm 11:30 PM

    L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

    Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

    GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

    Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Apr 05, 2025 am 06:15 AM

    Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

    HTML, CSS et JavaScript: outils essentiels pour les développeurs Web HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

    HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

    See all articles