Maison > interface Web > tutoriel CSS > 26 questions d'entretien CSS à collecter pour améliorer vos bases CSS !

26 questions d'entretien CSS à collecter pour améliorer vos bases CSS !

青灯夜游
Libérer: 2021-07-08 10:06:17
avant
2476 Les gens l'ont consulté

CSS est très populaire dans la conception Web pour réduire la complexité et la répétition du contenu structurel. Cet article partage avec vous 26 questions d'entretien basées sur CSS, qui peuvent améliorer vos bases CSS. Venez apprendre.

26 questions d'entretien CSS à collecter pour améliorer vos bases CSS !

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

CSS est l'abréviation de Cascading Style Sheets, un langage de feuille de style utilisé pour décrire les langages de balisage tels que HTML La mise en page du document en cours d'écriture . C'est l'un des trois mousquetaires utilisés pour concevoir des pages web, les deux autres étant HTML et Javascript. HTMLJavascript

CSS 的设计目的是使样式和内容分离,包括布局、颜色和字体。这种分离可以提高内容的可访问性,在样式特征的规范中提供更多的灵活性和控制,通过在一个单独的. .css 文件中指定相关的 CSS,使多个 web 页面能够共享格式,并减少结构内容中的复杂性和重复。

它具有简单的语法,并使用大量的英文关键字来指定各种样式属性的名称。

既然我们已经讨论了CSS的基础知识,让我们来观察一下基于CSS的重要面试问题。

问题1:什么是 CSS?

CSS(层叠样式表)是一种样式语言,对于 HTML 元素来说足够简单。 它在网页设计中非常流行,其应用在XHTML中也很常见。

问题2:为什么要开发CSS?

CSS是在1997年开发的,作为一种web开发人员设计他们正在创建的web页面布局的方法。它的目的是让开发者将网站代码的内容和结构从视觉设计中分离出来。

这种结构和设计的分离允许HTML执行比原来更多的功能。

问题3:CSS的主要版本有哪些?

CSS的不同版本:

  • CSS1

  • CSS2

  • CSS2.1

  • CSS3

问题4:CSS样式的组成部分是什么?

一个样式规则由三部分组成:

  • 选择器–选择器是 HTML 标记,用于选择要设置样式的内容。 它根据其ID,类和名称选择 HTML元素。

  • 属性–属性是 HTML 标签的一种属性。 简而言之,所有 HTML 属性都转换为 CSS 属性。

  • – CSS中的值定义CSS属性的一组有效值。

问题 5:有多少种方法可以将 CSS 集成为 web 页面

CSS 可以集成为三种方式

内联:直接在HTML元素上使用

<p style=”colour:skyblue;”>hello world</p>
Copier après la connexion

外部:在工作空间中创建单独的CSS文件,然后在创建的每个web页面中链接它们

<head>

<link rel="text/css" href="your_CSS_file_location"/>

</head>
Copier après la connexion

内部: web 页面的 head 元素在其中实现了内部 CSS。

<head>
     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>
</head>
Copier après la connexion

问题 6:谁在维护 CSS 规范?

万维网协会维护 CSS规范。

问题 7:伪元素是什么意思?

伪元素是添加到选择器的关键字,它允许一种样式,即所选元素的特定部分。CSS用于在HTML标记中应用样式,它允许在不影响实际文档的情况下对文档进行额外标记。它可以用来:

  • 为第一个字母、行或元素设置样式。

  • 插入内容

语法:

Selector: :pseudo-element{
Property1 :value;
Property2 :value;
}
Copier après la connexion

问题 8:CSS有什么优势?

CSS的优点是:

  • 一致性 – CSS有助于构建一致的框架,设计人员可以使用该框架来构建其他站点。 因此,网页设计师的效率也提高了。

  • 易于使用 – CSS 是非常容易学习和简化网站开发。所有代码都放在一个页面上,这意味着对代码行进行改进或编辑不需要重复修改多个页面.

  • *网站速度 *– 通常,一个网站使用的代码最多可以达到 2 页或更多。但是对于CSS,这不是问题。它只需要2-3

    CSS est conçu pour séparer le style et le contenu, y compris la mise en page, les couleurs et les polices. Cette séparation peut améliorer l'accessibilité du contenu, offrir plus de flexibilité et de contrôle dans la spécification des fonctionnalités de style et permettre à plusieurs pages Web de partager des formats et de réduire la complexité et la duplication du contenu structuré.
  • Il a une syntaxe simple et utilise un grand nombre de mots-clés anglais pour spécifier les noms de divers attributs de style.

    Maintenant que nous avons discuté des bases du CSS, observons les questions d'entretien importantes basées sur CSS.

    Question 1 : Qu'est-ce que CSS ?

  • CSS (Cascading Style Sheets) est un langage de style assez simple pour les éléments HTML. Il est très populaire dans la conception Web et son application est également courante en XHTML.

    Question 2 : Pourquoi développer du CSS ? 🎜

    🎜🎜CSS🎜 a été développé en 1997 pour permettre aux développeurs Web de concevoir la mise en page des pages Web qu'ils créaient. Son objectif est de permettre aux développeurs de séparer le contenu et la structure du code du site Web de la conception visuelle. 🎜🎜Cette séparation de la structure et de la conception permet au HTML de remplir plus de fonctions qu'il ne le pouvait à l'origine. 🎜

    🎜Question 3 : Quelles sont les versions majeures de CSS ? 🎜

    🎜 Différentes versions de CSS : 🎜
      🎜🎜CSS1🎜🎜🎜🎜CSS2🎜🎜🎜🎜CSS2.1🎜🎜🎜🎜CSS3🎜🎜< /ul>

      🎜Question 4 : Quels sont les composants des styles CSS ? 🎜

      🎜Une règle de style se compose de trois parties : 🎜
        🎜🎜🎜Selector🎜 – Le sélecteur est une balise HTML utilisée pour sélectionner le style à définir . contenu. Il sélectionne les éléments HTML en fonction de leur ID, de leur classe et de leur nom. 🎜🎜🎜🎜🎜Attributs🎜 – Un attribut est un attribut d'une balise HTML. Bref, toutes les propriétés HTML sont converties en propriétés CSS. 🎜🎜🎜🎜🎜Valeurs🎜 – Les valeurs en CSS définissent un ensemble de valeurs valides pour une propriété CSS. 🎜🎜

      🎜Question 5 : Combien de façons existe-t-il d'intégrer du CSS dans une page Web 🎜

      🎜Le CSS peut être intégré de trois manières🎜🎜🎜en ligne🎜 : utilisé directement sur des éléments HTML ? 🎜
      //物理元素
      <b>我想用b标签加粗</b>
       
      //逻辑元素
      <strong>我想用strong标签加粗</strong>
       
      //两段文字都加粗了,而且视觉效果完全一样
      Copier après la connexion
      Copier après la connexion
      🎜🎜Externe🎜 : créez des fichiers CSS séparés dans l'espace de travail, puis liez-les dans chaque page Web que vous créez. 🎜
      selector:pseudo-class{property:value;}
      Copier après la connexion
      Copier après la connexion
      🎜🎜Interne🎜 : l'élément principal de la page Web contient du CSS interne implémenté. 🎜rrreee

      🎜Question 6 : Qui maintient la spécification CSS ? 🎜

      🎜Le World Wide Web Consortium maintient les spécifications CSS. 🎜

      🎜Question 7 : Que signifie pseudo-élément ? 🎜

      🎜Les pseudo-éléments sont des mots-clés ajoutés à un sélecteur qui permettent un style d'une partie spécifique de l'élément sélectionné. CSS est utilisé pour appliquer des styles dans le balisage HTML, ce qui permet un balisage supplémentaire au document sans affecter le document lui-même. Il peut être utilisé pour : 🎜
        🎜🎜Définir les styles pour la première lettre, ligne ou élément. 🎜🎜🎜🎜Insérer du contenu🎜🎜
      🎜Syntaxe : 🎜rrreee

      🎜Question 8 : Quels sont les avantages du CSS ? 🎜

      🎜 Les avantages du CSS sont : 🎜
        🎜🎜🎜Cohérence🎜 – CSS aide à créer un cadre cohérent que les concepteurs peuvent utiliser pour créer d'autres sites. En conséquence, l’efficacité des concepteurs de sites Web augmente également. 🎜🎜🎜🎜🎜Facile à utiliser🎜 – CSS est très facile à apprendre et simplifie le développement de sites Web. Tout le code est placé sur une seule page, ce qui signifie que les améliorations ou les modifications apportées aux lignes de code n'ont pas besoin d'être répétées sur plusieurs pages 🎜🎜🎜🎜*Vitesse du site* – Généralement, le code utilisé par. un site Web peut contenir jusqu'à 2 pages ou plus. Mais avec CSS, ce n'est pas un problème. Il ne nécessite que 2-3 lignes de code. Par conséquent, la base de données du site Web reste propre et élimine tout problème de chargement du site Web. 🎜🎜🎜🎜🎜Compatibilité des appareils🎜 – Étant donné que les gens utilisent différents types d'appareils intelligents pour accéder à Internet, une conception Web réactive est nécessaire. Le rôle du CSS ici est de rendre les pages Web plus réactives afin qu'elles s'affichent de la même manière sur tous les appareils. 🎜🎜🎜🎜🎜Prise en charge multi-navigateurs🎜 – CSS bénéficie d'une prise en charge multi-navigateurs et est compatible avec tous les principaux navigateurs Internet. 🎜
      • Repositionnement – CSS vous permet de définir des changements dans la position des éléments Web sur la page. Sa mise en œuvre permet aux développeurs de placer les éléments HTML où ils le souhaitent, en fonction de l'esthétique de la page ou d'autres considérations.

      Question 9 : Qu'est-ce que le dégradé CSS ?

      Le dégradé est le processus par lequel nous créons un cadre intermédiaire entre deux images pour obtenir l'apparence de la première image puis nous développons vers la deuxième image, il est principalement utilisé pour créer des animations.

      Question 10 : Qu'est-ce que la spécificité CSS ?

      La spécificité CSS est un score ou un niveau qui détermine quelle déclaration de style un élément doit utiliser. Il existe quatre catégories en CSS qui peuvent accorder des niveaux spécifiques de sélecteurs :

      • Styles en ligne

      • ID

      • Classes, attributs et pseudo-classes

      • Éléments et pseudo-éléments

      Questions 12 : Quels sont les inconvénients du CSS

      Les inconvénients du CSS sont :

      • Trop de versions – Par rapport à d'autres paramètres comme HTML ou Javascript, CSS a de nombreuses versions - CSS1, CSS2, CSS2.1, CSS3. En conséquence, CSS devient très déroutant, surtout pour les débutants.

      • Manque de sécurité - Puisque CSS est un système ouvert basé sur du texte, il n'a pas de système de sécurité intégré pour empêcher son écrasement. Avec un accès en lecture/écriture, n'importe qui peut modifier le fichier CSS et modifier les liens.

      • Fragmentation - En utilisant CSS, cela peut ne pas fonctionner d'un navigateur à l'autre. Par conséquent, avant la mise en ligne d’un site Web, les développeurs Web doivent tester la compatibilité en exécutant le programme sur plusieurs navigateurs.

      • Complexité – L'utilisation de logiciels tiers comme Microsoft FrontPage peut rendre le CSS complexe.

      Question 13 : Qu'est-ce que RWD (Responsive Web Design) ?

      La technologie RWD (Responsive Web Design) est utilisée pour fonctionner parfaitement sur toutes les tailles d'écran et tous les appareils comme les mobiles, les tablettes, les ordinateurs de bureau et les ordinateurs portables. Afficher les pages de conception de manière à nous n'avons pas besoin de créer des pages différentes pour chaque appareil.

      Question 14 : Quels sont les avantages des sprites CSS ?

      Les avantages des sprites CSS sont :

      • Réduit le temps de chargement des pages Web en combinant diverses petites images en une seule image.

      • Réduisez les requêtes HTTP, réduisant ainsi les temps de chargement.

      Question 15 : Qu'est-ce qu'un sélecteur de contexte CSS ?

      Le sélecteur de contexte, à proprement parler, est appelé sélecteur combiné descendant, qui est un ensemble de noms de balises séparés par des espaces. Utilisé pour sélectionner les balises qui sont les descendants de l'élément ancêtre spécifié. Tant qu'une balise possède un tel ancêtre "en amont" dans sa hiérarchie, la balise sera sélectionnée. Le nombre de niveaux entre la balise et le contexte qui en est l'ancêtre n'a pas d'importance.

      Question 16 : Qu'est-ce que l'amélioration progressive et la dégradation en douceur ?

      Le concept d'amélioration progressive fait référence à partir de la convivialité la plus élémentaire, sur la base de la garantie de la convivialité et de l'accessibilité des pages du site dans les navigateurs de bas niveau. , en ajoutant progressivement des fonctions et en améliorant l'expérience utilisateur. Essentiellement, certaines de nos habitudes de développement quotidiennes, comme utiliser d'abord un langage de balisage pour écrire des pages, puis contrôler le style de la page via des feuilles de style, appartiennent toutes au concept d'amélioration progressive. D'autres comportements plus évidents incluent l'utilisation de nouvelles technologies telles que ; HTML5 et CSS3, pour les navigateurs avancés pour améliorer la richesse de l'expérience utilisateur des pages.

      Le concept de dégradation en douceur fait référence à l'utilisation d'abord des dernières technologies pour créer les fonctions et l'expérience utilisateur les plus puissantes pour les navigateurs avancés, puis à l'atténuation progressive de ces fonctions et expériences non prises en charge en fonction des limitations des navigateurs de bas niveau dans notre quotidien ; life Dans le développement d'IE, un exemple typique de dégradation en douceur consiste à écrire d'abord le code de la page pour Chrome, puis à corriger les exceptions dans IE ou à supprimer les fonctionnalités qui ne peuvent pas être implémentées pour IE

      Ainsi, ces deux méthodes conceptuelles ont. En fait, ils coexistent depuis longtemps. Dans notre travail quotidien de développement, les termes « amélioration progressive » et « dégradation progressive » n'ont commencé à être popularisés que ces dernières années. Dans notre application pratique actuelle de HTML5 et CSS3, ces deux concepts sont particulièrement importants. Comment garantir que les nouvelles technologies en constante évolution sont utilisées pour créer un site offrant une convivialité de base sous les navigateurs grand public et pour améliorer l'expérience des navigateurs avancés ? Ce sont les idées sur lesquelles nous devons être clairs pendant le processus de développement.

      Question 17 : Comment ajouter des icônes aux pages Web ?

      Nous pouvons utiliser des bibliothèques d'icônes telles que font-awesome ou iconfont d'Alibaba pour ajouter des icônes aux pages Web HTML. Nous devons ajouter le nom de la classe d'icônes donnée à n'importe quel élément HTML en ligne. (<i> ou <span>). Les icônes de la bibliothèque d'icônes sont des vecteurs évolutifs et peuvent être personnalisées à l'aide de CSS. font-awesome或者阿里的 iconfont 之类的图标库将图标添加到HTML网页。 我们必须将给定图标类的名称添加到任何内联HTML元素中。 (<i><span>)。 图标库中的图标是可缩放的矢量,可以使用CSS进行自定义。

      问题 18:哪个属性指定边框的宽度?

      border-width

      🎜Question 18 : Quel attribut précise la largeur de la bordure ? 🎜🎜🎜border-width spécifie la largeur de la bordure. 🎜

      问题 19:如何区分物理标签和逻辑标签?

      物理标签被称为表示标记,而逻辑标签对于外观是无用的。物理标签是较新的版本,而逻辑标签是旧的并且专注于内容。

      如题,我们的标签元素写上后,浏览器就会渲染出结果,但不仅仅是这么简单

      //物理元素
      <b>我想用b标签加粗</b>
       
      //逻辑元素
      <strong>我想用strong标签加粗</strong>
       
      //两段文字都加粗了,而且视觉效果完全一样
      Copier après la connexion
      Copier après la connexion

      确实,文字加粗了,两者都达到了我们想要的目的,但是我们忽略了一个问题,既然b标签可以加粗,那么strong这个标签同样是加粗,存在的 意义又是什么呢?既然W3C定义了两个,它们之间的不同点是什么呢?它们之间的相同点又是什么呢?

      物理元素

      物理元素,又叫实体标签,它所做的是一种物理行为,比如上面我把一段文字用b标签加粗了,它所传达的给浏览器,告诉浏览器 我要加粗这段文字,从单词Bold中也可以看出来,英文中仅仅是加粗的意思,并没有其他作用。总结来说就是一句话: 物理元素就是告诉浏览器该怎么显示出来。

      逻辑元素

      逻辑元素,从英文字面上Strong就可以看出它是强调的意思,所以我们用这个逻辑元素(如上strong)来向浏览器传达 一个强调某段文字重要性的消息,说明此文字较为重要,也有利于搜索引擎收录。

      Web标准主张XHTML不涉及具体的表现形式,“强调”可以用加粗来强调,也可以用别的方式强调,也可以通过css来改变strong的具体表现 ,还有就是并不是有了strong逻辑标签,就不用b标签来表示字体加粗了,b标签和strong标签默认情况下强调的效果一致,strong完全可以定义成别的样式,用来强调 效果,但是最好符合W3C标准,它更提倡内容与样式分离,所以单纯为了达到加粗而使用b标签不建议这样做, 从XHTML文档有意义性及用户体验角度来说,strong逻辑标签更加合适,而SEO方面,则针对优化情况而定。

      问题 20:如何在CSS中定义一个伪类?它们是用来干什么的

      CSS伪类是用来添加一些选择器的特殊效果。伪类的语法

      selector:pseudo-class{property:value;}
      Copier après la connexion
      Copier après la connexion

      问题 21:CSS和SCSS有什么区别?

      CSSSCSS 之间的区别如下:

      • CSS是一种用于设计web页面的样式语言,而SCSS用于为浏览器组合CSS样式表。

      • SCSS 提供了一些变量,可以使用这些变量来缩短代码,这是与 CSS 相比的一大优势。

      问题 22:嵌入式样式表的优缺点是什么?

      嵌入式样式表的优点:

      • 可以在一个文档中创建多种标签类型。

      • 在复杂情况下,可以使用选择器和分组方法来应用样式。

      • 无需额外下载。

      嵌入式样式表的缺点:

      无法控制多个文档。

      问题 23:列出使用的各种媒体类型。

      不同的介质不区分大小写,因此它们具有不同的属性。 他们是:

      • aural - 用于语音和音频合成器

      • print - 用于打印机

      • projection - 用于方案展示,比如幻灯片

      • handheld -     用于小的手持的设备

      • screen -  用于电脑显示器

      问题 24:font 的属性有哪些?

      • Font-style

      • Font-variant

      • Font-weight

      • Font-size/line-weight

      • Font-family

      问题 25:“规则集”是什么意思?

      该指令告诉浏览器如何在HTML页面上渲染特定元素。 它由一个选择器和一个遵循规则集的声明块组成。 选择器可以附加到其他选择器,以通过规则集进行标识。

      问题 26:什么是 CSS 框架?

      CSS 框架是一个库,它允许使用CSS语言进行更轻松,更符合标准的Web设计。 这些框架中的大多数至少包含一个网格以及更多功能和其他基于Javascript的功能。 一些著名的CSS框架有:ACSS,Bulma,YAML,Foundation等。

      英文原文地址:https://codersera.com/blog/top-css-interview-questions-and-answers/

      更多编程相关知识,请访问:编程入门!!

      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:segmentfault.com
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