26 высокочастотных тестовых сайтов для CSS-интервью помогают золоту трем серебряным четырем

JavaScript CSS

Переводчик: Front-end Xiaozhi Источник: Кодерсера.

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние высоко оцененные статьи были засекречены, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

CSS, сокращение от Cascading Style Sheets, представляет собой язык таблиц стилей, используемый для описания макета документов, написанных на языках разметки, таких как HTML. Это один из трех мушкетеров, используемых для разработки веб-страниц, два других хокераHTMLа такжеJavascript.

CSS предназначен для разделения стиля и содержимого, включая макет, цвета и шрифты. Это разделение может улучшить доступность контента, обеспечивая большую гибкость и контроль в спецификации функций стиля за счет создания отдельного файла ..cssУказание соответствующего CSS в файле позволяет нескольким веб-страницам совместно использовать форматирование и снижает сложность и дублирование структурного содержимого.

Он имеет простой синтаксис и использует большое количество английских ключевых слов для указания имен различных свойств стиля.

Теперь, когда мы обсудили основы CSS, давайте рассмотрим важные вопросы интервью на основе CSS.

Вопрос 1: Что такое CSS?

**CSS (каскадные таблицы стилей)** — это язык стилей, который достаточно прост для элементов HTML. Он очень популярен в веб-дизайне, и его применение широко распространено в XHTML.

Вопрос 2: Зачем разрабатывать CSS?

CSSбыл разработан в 1997 году как способ для веб-разработчиков проектировать макет создаваемых ими веб-страниц. Его цель — позволить разработчикам отделить содержание и структуру кода веб-сайта от визуального оформления.

Такое разделение структуры и дизайна позволяет HTML выполнять больше функций, чем оригинал.

Вопрос 3: Каковы основные версии CSS?

Различные версии CSS:

  1. CSS1
  2. CSS2
  3. CSS2.1
  4. CSS3

Вопрос 4: Каковы компоненты стилей CSS?

Правило стиля состоит из трех частей:

  1. Селектор– Селекторы – это HTML-теги, используемые для выбора содержимого, подлежащего стилизации. это согласно егоID, класс и имя для выбора элементов HTML.

  2. Атрибуты–attribute — это атрибут тега HTML. Короче говоря, все свойства HTML преобразуются в свойства CSS.

  3. стоимость— Значения в CSS определяет набор допустимых значений для свойств CSS.

Вопрос 5: Сколько способов интегрировать CSS на веб-страницу

CSS может быть интегрирован тремя способами

  1. в линию: используется непосредственно в элементах HTML
<p style=”colour:skyblue;”>hello world</p>
  1. внешний: создавайте отдельные файлы CSS в рабочей области и связывайте их на каждой созданной веб-странице.
<head>

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

</head>
  • внутренний: в элементе head веб-страницы реализован внутренний CSS.
head>
     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>
</head>

Вопрос 6: Кто поддерживает спецификацию CSS?

Консорциум World Wide Web поддерживает спецификацию CSS.

Вопрос 7: Что означает псевдоэлемент?

Псевдоэлементы — это ключевые слова, добавленные к селекторам, которые позволяют задать стиль, определенную часть выбранного элемента. CSS используется для применения стилей в HTML-разметке, он позволяет добавлять в документ дополнительную разметку, не затрагивая сам документ. Его можно использовать для:

  1. Стиль первой буквы, строки или элемента.
  2. Вставить содержимое

грамматика:

Selector: :pseudo-element
{Property1 :value;
Property2 :value;}

Вопрос 8: CSS Каковы преимущества?

Преимущества CSS:

  1. последовательность– CSS помогает создать согласованную структуру, которую дизайнеры могут использовать для создания других сайтов. В результате повышается и эффективность веб-дизайнеров.

  2. легко использовать– CSS очень прост в освоении и упрощает разработку веб-сайтов. Весь код размещается на одной странице, что означает, что улучшения или изменения строк кода не требуют повторных изменений на нескольких страницах.

  3. *скорость сайта*– Обычно на сайте используются коды до2страниц или более. Но с CSS это не проблема. это просто нужно2-3Строки кода, поэтому база данных веб-сайта поддерживается в чистоте, что устраняет любые проблемы с загрузкой веб-сайта.

  4. Совместимость устройств– Поскольку люди используют различные типы интеллектуальных устройств для доступа в Интернет, необходим адаптивный веб-дизайн. Роль CSS здесь заключается в том, чтобы сделать веб-страницы более отзывчивыми, чтобы они одинаково отображались на всех устройствах.

  5. Поддержка нескольких браузеров- CSS поддерживает несколько браузеров и совместим со всеми основными интернет-браузерами.

  6. переместить– CSS позволяет определять изменения положения веб-элементов на странице. С его реализацией разработчики могут размещать элементы HTML там, где они хотят, чтобы они соответствовали эстетической привлекательности страницы или другим соображениям.

Вопрос 9: Что такое градиенты CSS?

Градиенты — это процесс, с помощью которого мы создаем промежуточные кадры между двумя изображениями, чтобы получить вид первого изображения, а затем превращаемся во второе изображение, и он в основном используется для создания анимации.

Вопрос 10: В чем специфика CSS?

Специфика CSS — это балл или рейтинг, который определяет, какое объявление стиля должен использовать элемент. В CSS есть четыре категории уровней специфичности, которые могут авторизовать селекторы:

  1. встроенный стиль
  2. ID
  3. Классы, свойства и псевдоклассы
  4. элементы и псевдоэлементы

Вопрос 12: Каковы недостатки CSS

К недостаткам CSS относятся:

  1. слишком много версий- По сравнению с другими параметрами, такими как HTML или Javascript, существует много версий CSS - CSS1, CSS2, CSS2.1, CSS3. Таким образом, CSS может быть очень запутанным, особенно для новичков.

  2. Отсутствие безопасности- Поскольку CSS представляет собой открытую текстовую систему, в ней нет встроенной системы защиты от перезаписи. Имея к нему доступ для чтения/записи, любой может изменять файлы CSS и изменять ссылки.

  3. Fragmentation- С CSS может не работать в одном браузере с другим. Поэтому перед запуском веб-сайта веб-разработчики должны проверить совместимость, запустив программу в нескольких браузерах.

  4. Сложность– Использование стороннего программного обеспечения, такого как Microsoft FrontPage, усложняет CSS.

Вопрос 13: Что такое RWD (отзывчивый веб-дизайн)?

Технология RWD (отзывчивый веб-дизайн) используется для идеального отображения страниц дизайна на экране любого размера и на таких устройствах, как мобильные устройства, планшеты, настольные компьютеры и ноутбуки, избавляя нас от необходимости создавать разные страницы для каждого устройства.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

Вопрос 14: Каковы преимущества спрайтов CSS?

Преимущества спрайтов CSS:

  1. Благодаря объединению различных небольших изображений в одно изображение сокращается время загрузки веб-страниц.

  2. Меньше HTTP-запросов, что сокращает время загрузки.

Вопрос 15: Что такое селекторы контекста CSS?

Селекторы контекста, строго говоря, называютсякомбинаторный селектор потомков, который представляет собой набор имен меток, разделенных пробелами. Метки, используемые для выбора потомков указанного элемента-предка. Всякий раз, когда метка имеет такого предка в своей иерархии, эта метка выбирается. Неважно, сколько уровней от метки до контекста, который является предком.

Вопрос 16: Что такое прогрессивное улучшение и плавное ухудшение?

прогрессивное улучшениеКонцепция относится к тому, чтобы начать с самого простого удобства использования и постепенно добавлять функции и улучшать взаимодействие с пользователем на основе обеспечения удобства использования и доступности страниц сайта в браузерах низкого уровня. По сути, некоторые из наших ежедневных привычек разработки, такие как сначала написание страниц на языках разметки, а затем управление стилями страниц с помощью таблиц стилей, — все это концепции прогрессивного улучшения; другие более очевидные модели поведения включают использование новых технологий, таких как HTML5 и CSS3. . , что повышает удобство работы пользователей со страницей для продвинутых браузеров.

плавная деградацияКонцепция заключается в том, чтобы сначала использовать новейшие технологии для создания самых сильных функций и взаимодействия с пользователем для продвинутых браузеров, а затем постепенно уменьшать те функции и возможности, которые не могут поддерживаться в соответствии с ограничениями низкоуровневых браузеров; в нашей повседневной разработке типичная Примером плавной деградации IE может быть сначала закодировать страницу для Chrome, а затем исправить исключение в IE или удалить функции для IE, которые не могут быть реализованы.

Поэтому эти два концептуальных метода уже существовали в нашей повседневной работе по разработке, но термины «прогрессивное улучшение» и «плавная деградация» стали популярными только в последние годы. В нашем нынешнем боевом использовании HTML5 и CSS3 эти две концепции особенно важны. мы должны быть ясны в процессе разработки.

Вопрос 17: Как добавить значок на веб-страницу?

Мы можем использовать что-то вродеfont-awesomeили АлиiconfontБиблиотеки значков, такие как добавление значков на веб-страницы HTML. Мы должны добавить имя данного класса значков к любому встроенному элементу HTML. (<i>или<span>). Библиотека иконок представляет собой масштабируемый вектор, который можно настраивать с помощью CSS.

Вопрос 18. Какое свойство определяет ширину границы?

border-widthОпределяет ширину границы.

Вопрос 19: Как отличить физические теги от логических тегов?

Физические метки называются презентационными метками, а логические метки бесполезны для внешнего вида. Физические теги — это более новые версии, в то время как логические теги устарели и ориентированы на контент.

Как следует из заголовка, после того, как наш элемент метки будет написан, браузер отобразит результат, но это не так просто

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

Действительно, текст выделен смелее, и оба добиваются цели, которую мы хотим, но мы упустили проблему. Поскольку бирка B может быть выделена жирным смелым, то сильная бирка также смелая, в чем смысл его существования? Теперь, когда W3C определяет оба, в чем разница между ними? Каковы сходства между ними?

физический элемент

Физические элементы, также известные как теги сущностей, выполняют физическое поведение. Например, я выделил фрагмент текста с помощью тега b выше и что он передает браузеру, сообщая браузеру, что я хочу выделить этот текст жирным шрифтом. Из слова Bold видно, что оно означает только жирный шрифт на английском языке и не имеет никакого другого значения. Подводя итог в одном предложении: физические элементы сообщают браузеру, как их отображать.

логический элемент

Логический элемент, от английского буквального Strong, видно, что он означает акцент, поэтому мы используем этот логический элемент (как указано выше strong), чтобы передать сообщение браузеру, которое подчеркивает важность определенного текста, указывая, что этот текст более важно, а также способствует индексации поисковыми системами.

Веб-стандарт утверждает, что XHTML не включает в себя определенные формы выражения, а «выделение» может быть выделено жирным шрифтом или другими способами, а конкретное выражение strong также может быть изменено с помощью css, и нет тега сильной логики. вам не нужен тег b для обозначения полужирного шрифта. Тег b и сильный тег по умолчанию имеют одинаковый эффект. Строгий можно определить как другой стиль, чтобы подчеркнуть эффект, но лучше всего соблюдать стандарт W3C, который продвигает контент. Он отделен от стиля, поэтому не рекомендуется использовать тег b только для того, чтобы добиться смелости. С точки зрения значимости XHTML-документа и взаимодействия с пользователем более подходит сильный логический тег, в то время как SEO основан на оптимизация.

Вопрос 20: Как определить псевдо класс в CSS? Что они используются для

Псевдоклассы CSS используются для добавления некоторых специальных эффектов к селекторам. Синтаксис псевдокласса

selector:pseudo-class{property:value;}

Вопрос 21: В чем разница между CSS и SCSS?

CSSа такжеSCSSРазличия заключаются в следующем:

  1. CSS — это язык стилей, используемый для разработки веб-страниц, а SCSS — для составления таблиц стилей CSS для браузеров.

  2. SCSS предоставляет переменные, которые можно использовать для сокращения кода, что является большим преимуществом по сравнению с CSS.

Вопрос 22: Каковы преимущества и недостатки встроенных таблиц стилей?

Преимущества встроенных таблиц стилей:

  1. В одном документе можно создать несколько типов тегов.
  2. В сложных случаях для применения стилей можно использовать селекторы и методы группировки.
  3. Никаких дополнительных загрузок не требуется.

Недостатки встроенных таблиц стилей:

Невозможно управлять несколькими документами.

Вопрос 23: Перечислите различные используемые типы носителей.

Различные носители нечувствительны к регистру, поэтому они имеют разные свойства. они есть:

  1. aural - для речи и звуковых синтезаторов
  2. печать - для принтера
  3. проекция - для презентаций проектов, таких как слайд-шоу
  4. портативный - для небольших портативных устройств
  5. экран - для компьютерных мониторов

Вопрос 24: Каковы свойства шрифта?

  1. Font-style
  2. Font-variant
  3. Font-weight
  4. Font-size/line-weight
  5. Font-family

Вопрос 25: Что означает «набор правил»?

Эта директива сообщает браузеру, как отображать определенный элемент на HTML-странице. Он состоит из селектора и блока объявления, который следует набору правил. Селекторы могут быть присоединены к другим селекторам, чтобы идентифицироваться наборами правил.

Вопрос 26: Что такое CSS-фреймворк?

CSS Framework — это библиотека, которая упрощает веб-дизайн и обеспечивает большее соответствие стандартам с использованием языка CSS. Большинство этих фреймворков содержат по крайней мере одну сетку и более, а также другие функции на основе Javascript. Вот некоторые известные CSS-фреймворки:ACSS，Bulma，YAML，FoundationЖдать.

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

оригинал:coders.com/blog/top - на данный момент...

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории