Cet article partagera avec vous 29 points de connaissances sur les entretiens CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
CSS est l'abréviation de Cascading Style Sheets. C'est un langage de feuille de style utilisé pour décrire le balisage tel que HTML La mise en page des documents écrits. une langue. C'est l'un des trois hackers utilisés pour concevoir des pages web, les deux autres hackers sont HTML et Javascript.
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, permettre à plusieurs pages Web de partager le formatage en spécifiant le CSS associé dans un fichier .css distinct, et réduire la complexité et la duplication du contenu structurel.
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, examinons les questions d'entretien importantes basées sur 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.
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.
[Tutoriel recommandé : Tutoriel vidéo CSS]
Différentes versions de CSS :
CSS1
CSS2
CSS2.1
CSS3
Une règle de style se compose de trois parties :
Sélecteur – Le sélecteur est une balise HTML utilisée pour sélectionner le style à définir le contenu. Il sélectionne les éléments HTML en fonction de leur ID, classe et 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.
Valeur – La valeur en CSS définit un ensemble de valeurs valides pour une propriété CSS.
Le CSS peut être intégré de trois manières
1. Inline : utilisez
<p>hello world</p>
directement sur l'élément HTML 2. Externe : créez un fichier CSS distinct dans l'espace de travail, puis ajoutez-le à chacun Liez-les dans une page Web
<link>
3 Interne : L'élément head de la page Web y implémente le CSS interne.
<style>
P{
color : lime;
background-color:black;
}
</style>
Le World Wide Web Consortium maintient la spécification CSS.
Les pseudo-éléments sont des mots-clés ajoutés au 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 :
Styliser la première lettre, ligne ou élément.
Insérer du contenu
Syntaxe :
Selector: :pseudo-element
{Property1 :value;
Property2 :value;}Les avantages du CSS sont :
Cohérence – CSS aide à créer un cadre cohérent avec lequel les concepteurs peuvent travailler 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. En règle générale, un site Web peut utiliser jusqu'à
pages ou plus de code. Mais avec CSS, ce n'est pas un problème. Il ne nécessite que2Compatibilité des appareils 2-3 – Comme les gens utilisent différents types d'appareils intelligents pour accéder à Internet, une conception Web réactive est requise. 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 de plusieurs navigateurs – CSS bénéficie d'une prise en charge de plusieurs 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.
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 dans la deuxième image, il est principalement utilisé pour créer des animations.
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 autoriser des niveaux de spécificité de sélecteur :
Styles en ligne
ID
Classes, attributs et pseudo-classes
Éléments et pseudo-éléments
Les inconvénients du CSS sont :
Trop de versions – CSS a de nombreuses versions par rapport à d'autres paramètres comme HTML ou Javascript - 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.
La technologie RWD (Responsive Web Design) est utilisée sur toutes les tailles d'écran et affichez parfaitement la page de conception sur les appareils tels que les mobiles, les tablettes, les ordinateurs de bureau et les ordinateurs portables, éliminant ainsi le besoin de créer des pages différentes pour chaque appareil.
Les avantages des sprites CSS sont :
En combinant diverses petites images sont combinées en une seule image, réduisant ainsi le temps de chargement des pages Web.
Réduisez les requêtes HTTP, réduisant ainsi les temps de chargement.
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.
Le concept d'amélioration progressive signifie partir de la convivialité la plus élémentaire, tout en garantissant Les pages du site s'appuient sur leur convivialité et leur accessibilité dans les navigateurs de bas niveau, ajoutant progressivement des fonctionnalités et 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 performantes pour les navigateurs avancés, puis à l'atténuation progressive de celles qui ne peuvent pas être prises en charge en fonction des limitations de navigateurs de bas niveau, fonction et expérience ; dans notre développement quotidien, 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 fonctionnelles qui ne peuvent pas être implémentées pour IE.
Ainsi, ces deux méthodes conceptuelles existent depuis longtemps dans notre travail quotidien de développement, mais les termes « amélioration progressive » et « dégradation douce » 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.
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></i> ou <span></span>). Les icônes de la bibliothèque d'icônes sont des vecteurs évolutifs et peuvent être personnalisées à l'aide de CSS.
border-widthSpécifie la largeur de la bordure.
物理标签被称为表示标记，而逻辑标签对于外观是无用的。物理标签是较新的版本，而逻辑标签是旧的并且专注于内容。
如题，我们的标签元素写上后，浏览器就会渲染出结果，但不仅仅是这么简单
//物理元素 <b>我想用b标签加粗</b> //逻辑元素 <strong>我想用strong标签加粗</strong> //两段文字都加粗了，而且视觉效果完全一样
确实，文字加粗了，两者都达到了我们想要的目的，但是我们忽略了一个问题，既然b标签可以加粗，那么strong这个标签同样是加粗，存在的 意义又是什么呢？既然W3C定义了两个，它们之间的不同点是什么呢？它们之间的相同点又是什么呢？
物理元素
物理元素，又叫实体标签，它所做的是一种物理行为，比如上面我把一段文字用b标签加粗了，它所传达的给浏览器，告诉浏览器 我要加粗这段文字，从单词Bold中也可以看出来，英文中仅仅是加粗的意思，并没有其他作用。总结来说就是一句话： 物理元素就是告诉浏览器该怎么显示出来。
逻辑元素
逻辑元素，从英文字面上Strong就可以看出它是强调的意思，所以我们用这个逻辑元素(如上strong)来向浏览器传达 一个强调某段文字重要性的消息，说明此文字较为重要，也有利于搜索引擎收录。
Web标准主张XHTML不涉及具体的表现形式，“强调”可以用加粗来强调，也可以用别的方式强调，也可以通过css来改变strong的具体表现 ，还有就是并不是有了strong逻辑标签，就不用b标签来表示字体加粗了，b标签和strong标签默认情况下强调的效果一致，strong完全可以定义成别的样式，用来强调 效果，但是最好符合W3C标准，它更提倡内容与样式分离，所以单纯为了达到加粗而使用b标签不建议这样做， 从XHTML文档有意义性及用户体验角度来说，strong逻辑标签更加合适，而SEO方面，则针对优化情况而定。
CSS伪类是用来添加一些选择器的特殊效果。伪类的语法
selector:pseudo-class{property:value;}CSS 和 SCSS 之间的区别如下：
CSS是一种用于设计web页面的样式语言，而SCSS用于为浏览器组合CSS样式表。
SCSS 提供了一些变量，可以使用这些变量来缩短代码，这是与 CSS 相比的一大优势。
嵌入式样式表的优点:
可以在一个文档中创建多种标签类型。
在复杂情况下，可以使用选择器和分组方法来应用样式。
无需额外下载。
嵌入式样式表的缺点：
无法控制多个文档。
不同的介质不区分大小写，因此它们具有不同的属性。 他们是：
aural - 用于语音和音频合成器
print - 用于打印机
projection - 用于方案展示，比如幻灯片
handheld - 用于小的手持的设备
screen - 用于电脑显示器
Font-style
Font-variant
Font-weight
Font-size/line-weight
Font-family
该指令告诉浏览器如何在HTML页面上渲染特定元素。 它由一个选择器和一个遵循规则集的声明块组成。 选择器可以附加到其他选择器，以通过规则集进行标识。
CSS 框架是一个库，它允许使用CSS语言进行更轻松，更符合标准的Web设计。 这些框架中的大多数至少包含一个网格以及更多功能和其他基于Javascript的功能。 一些著名的CSS框架有：ACSS，Bulma，YAML，Foundation等。
L'encodage base64 est un format de traitement d'image qui utilise un algorithme spécifique pour encoder l'image dans une longue chaîne Lorsqu'elle est affichée sur la page, la chaîne peut être utilisée pour remplacer le
de l'image. attribut .url.
Les avantages de l'utilisation de base64 sont :
(1) Réduire la requête HTTP pour une image
Les inconvénients de l'utilisation de base64 sont :
(1) Selon le principe d'encodage de base64, la taille encodée sera plus grand que le fichier original. La taille est 1/3 plus grande. Si vous encodez de grandes images en HTML/CSS, cela augmentera non seulement la taille du fichier et affectera la vitesse de chargement du fichier, mais augmentera également le temps nécessaire à son chargement. le navigateur pour analyser et restituer le fichier HTML ou CSS.
(2) Base64 ne peut pas être mis en cache directement. Pour mettre en cache, vous ne pouvez mettre en cache que les fichiers contenant du base64, tels que HTML ou CSS. C'est
bien pire que la mise en cache directe des images par le domaine.
(3) Problèmes de compatibilité, les navigateurs antérieurs à ie8 ne sont pas pris en charge.
Généralement, les petites icônes de certains sites Web peuvent être introduites à l'aide d'images base64.
Affecte l'interne. éléments dans BFC. Un BFC est comme une zone isolée et n’a aucune influence sur les autres zones.
De manière générale, l'élément racine est une zone BFC. Les éléments flottants et positionnés de manière absolue formeront également un BFC qui sera également créé lorsque la valeur de l'attribut display est un attribut inline-block, flex ou autre
. De plus, BFC sera créé lorsque la valeur de débordement de l'élément n'est pas visible.
(1) Les cases à l'intérieur du contexte au niveau de la ligne seront placées les unes après les autres à l'horizontale direction.
(2) Lorsqu'une ligne ne suffit pas, elle passe automatiquement à la ligne suivante.
(3) La hauteur du contexte au niveau de la ligne est déterminée par la hauteur de la boîte en ligne la plus haute à l'intérieur.
Performances de chargement :
(1) Compression CSS : L'emballage et la compression du CSS écrit peuvent réduire considérablement le volume.
(2) Style CSS unique : lorsque les marges inférieure et gauche sont requises, margin:top 0 bottom 0; est souvent choisi, mais margin-bottom:bot
tom;margin-left:left est exécuté plus efficacement; .
(3) Réduisez l'utilisation de @import, et il est recommandé d'utiliser le lien, car ce dernier est chargé ensemble lorsque la page est chargée, et le premier attend que la page soit chargée avant de se charger.
Performance du sélecteur :
(1) Sélecteur à clé. La dernière partie du sélecteur est le sélecteur clé (c'est-à-dire la partie utilisée pour faire correspondre l'élément cible). Les sélecteurs CSS correspondent de droite à
gauche. Lors de l'utilisation de sélecteurs descendants, le navigateur parcourra tous les éléments enfants pour déterminer s'il s'agit de l'élément spécifié, etc.
(2) Si la règle a un sélecteur d'ID comme sélecteur de clé, n'ajoutez pas de balises à la règle. Filtrez les règles non pertinentes (afin que le système de style ne perde pas de temps à les faire correspondre).
(3) Évitez d'utiliser des règles génériques, telles que *{}, le nombre de calculs est incroyable ! Sélectionnez uniquement les éléments que vous devez utiliser.
(4) Essayez de sélectionner le moins de balises possible, utilisez plutôt des classes.
(5) Utilisez le moins possible les sélecteurs descendants et réduisez le poids du sélecteur. Le coût des sélecteurs descendants est le plus élevé. Essayez de réduire la profondeur du sélecteur au minimum. Le maximum ne doit pas dépasser
trois niveaux.
(6) Comprenez quels attributs peuvent être hérités, puis évitez de spécifier à plusieurs reprises des règles pour ces attributs.
Performances de rendu :
(1) Utilisez soigneusement les attributs hautes performances : flottement et positionnement.
(2) Minimisez le réarrangement et le redessinage des pages.
(3) Supprimez les règles vides : {}. La raison des règles vides est généralement de réserver des styles. La suppression de ces règles vides réduira sans aucun doute la taille du document CSS.
(4) Lorsque la valeur de l'attribut est 0, aucune unité n'est ajoutée.
(5) La valeur de l'attribut est un 0 décimal flottant.**, et le 0 avant le point décimal peut être omis.
(6) Standardiser les différents préfixes de navigateur : ceux avec des préfixes de navigateur passent en premier. Les propriétés standard suivent.
(7) N'utilisez pas le préfixe @import, cela affectera la vitesse de chargement des CSS.
(8) Optimisez l'imbrication des sélecteurs et essayez d'éviter les niveaux trop profonds.
(9) L'image de sprite CSS, une petite icône dans une partie similaire de la même page, est pratique à utiliser et réduit le nombre de requêtes de page, mais en même temps l'image elle-même deviendra plus grande lors de son utilisation, Considérez clairement les avantages et les inconvénients
avant de l'utiliser.
(10) Utilisez correctement l'attribut display En raison du rôle de l'affichage, certaines combinaisons de styles ne seront pas valides, ce qui ne fera qu'augmenter la taille du style et affectera également les performances d'analyse.
(11) N'abusez pas des polices Web. Les WebFonts ne sont peut-être pas connues des sites Web chinois, mais elles sont très populaires à l’étranger. Les polices Web sont généralement de grande taille et certains navigateurs bloquent le rendu des pages et nuisent aux performances lors du téléchargement des polices Web.
Maintenabilité et robustesse :
(1) Extraire les styles avec les mêmes attributs, les intégrer et les utiliser dans la page à travers des classes pour améliorer la maintenabilité du CSS.
(2) Séparation du style et du contenu : définir le code CSS en CSS externe.
Pour plus de connaissances liées à la programmation, veuillez visiter :Vidéos de programmation
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
