1. CSS: посетил селектор псевдоклассов Memoirs of the Secret Past
В основном он представляет селектор псевдокласса CSS :visited.Из-за ограничений безопасности многие свойства CSS, которые, по вашему мнению, можно использовать, не могут быть использованы здесь, в :visited.Конечно, есть много, много других странных функций. Если вы заинтересованы, вы можетекликните сюдаПрочитайте исходный текст.
2. CSS прокрутка и плавная прокрутка страницы
В этой статье в основном рассказывается о том, что путем добавления простого атрибута поведения прокрутки позиционирование страницы при прокрутке можно сделать плавным, можно использовать атрибут прогрессивного улучшения, фактический проект, он очень подходит для навигации по точкам привязки и функции возвращение на вершину. Если вы заинтересованы, вы можетекликните сюдаПрочитайте исходный текст.
3. Кто-то задал мне вопрос по CSS
Кто-то задал мне вопрос, связанный с вёрсткой CSS, мне он показался очень интересным, поэтому я взял его и поделился им. Если вы хотите испытать себя, вы можетеПосетите здесь.
4. В чем разница между CSS margin-inline и margin-block?
Посмотрите на название, кажется, отличается.На самом деле, это введение двух новых свойств CSS Margin-INLINE и Margin-Block, и первое сравнение формально вводит атрибут логики CSS. В CSS3 оба встроенных блока являются областью логических атрибутов, которые могут представлять направления x, а также возможно представлять направление Y, связанное с направлением потока документа, желание понять связанные знания, можеткликните сюдаПрочитайте исходный текст.
5. ДИСПЛЕЙ: Учебное пособие по макету FLEX для себя
Если это означает отображение: гибкий макет, весь текст в стиле атрибутов производительности, вы можете видеть производительность в реальном времени через операцию, а не статическое изображение, чтобы быть более интуитивно понятным. В то же время, многие из правил, описанных в собственности, чем существующее множество статей, должны быть более подробными описаниями для начинающих, должно быть, очень хорошим учебным пособием. Если вы не изучили display: flex layout, вы можетекликните сюдаПосмотрите, все ли в порядке.
6. Учебник по разметке display:grid, написанный для меня
В статье о макете display:grid стиль каждого значения атрибута также является предварительным просмотром в реальном времени. Макет display:grid на 40% сложнее, чем макет display:flex.Кто-то прокомментировал мою статью, что они наконец поняли макет display:grid здесь. Обратите внимание, что, условно говоря, содержание учебника относительно легко понять. Макет display:grid можно назвать двумерным макетом, который больше подходит для реализации большой основной структуры. Есть много атрибутов, чтобы умело их использовать, требуется много практики. Если вы заинтересованы, вы можетекликните сюдаПосмотрим, сможешь ли ты научиться писать.
7. Как установить переменные CSS3 var в тегах HTML и JS
Эта статья не просто статья о CSS, а в основном о переменных CSS3 var. Легко использовать собственные переменные CSS в файлах CSS или синтаксисе CSS, но многие люди не знают, как динамически создавать или изменять значения переменных CSS с помощью кода JS. Нужно использовать API, который обычно не используется, что это такое, вы можетекликните сюдаПрочитайте эту короткую статью.
8. CSS-фильтр: фильтр hue-rotate для быстрого копирования кнопок
Традиционные кнопки окрашиваются определенными цветовыми значениями, но существует большой объем кода, высокие затраты на разработку и обслуживание, а также различия в насыщенности и яркости между цветовыми значениями. Есть ли простой способ быстро генерировать кнопки разных цветов в пакетах? имеют! Это с помощью CSS-фильтра: фильтр поворота оттенка-цвета. Если вас интересуют детали реализации, вы можетекликните сюдаПрочитайте исходный текст.
9. Введение в технологию автоматического сопоставления цветов переднего плана и фона CSS
Эта статья интересна и дает CSS вкус языка программирования.
С помощью функций границ CSS3 и переменных CSS3 стало возможным отображать разные цвета переднего плана для сопоставления с разными цветами фона. То есть автоматический светлый фон использует темный текст, темный фон использует светлый текст, а граница также может автоматически отображаться в цвете. Те, кто интересуется этой технологией, могуткликните сюдаПрочитайте исходный текст.
10. Исследование изменения цвета значков в любом формате с помощью чистого CSS.
Поскольку фильтр CSS: hue-rotate может копировать кнопку, изменяя оттенок, можно ли использовать фильтр фильтра, чтобы превратить значки различных форматов в любой цвет? Из-за этой идеи я изучил, как использовать чистый CSS, чтобы изменить значок PNG значка SVG на указанный цвет, и записал это в этой статье, которая содержит множество методов, я верю, что вы что-то получите,кликните сюдаПрочитайте исходный текст.
11. Введение в CSS Paint API
Это мой первый раз, когда я представляю знания, связанные с CSS Houdini, в виде статьи. CSS Paint API является частью CSS Houdini, одним из наиболее широко используемых API, его можно рассматривать как чертежную доску CSS. Люди, прочитавшие эту статью, согласны с тем, что CSS становится все более и более интересным. Эта статья проведет вас через простой случай, чтобы быстро понять CSS Paint API.Эта статья относится к изучению широты фронтенд-технологии и хорошо информирована и хорошо осведомлена. Если вы хотите расширить свои знания CSS, студенты, которые находятся на переднем крае технологий CSS, могуткликните сюдапроверить это.
12. 5 минут, чтобы быстро разобраться в свойстве CSS color-adjust.
Даже если у color-adjust нет проблем с совместимостью, в будущем он не будет широко использоваться. Это полезное, но редко используемое свойство CSS. Это свойство было добавлено в спецификацию CSS Color 4. Оно связано с цветопередачей. Это свойство CSS, которое ближе к пользовательскому опыту. Для чего именно это свойство? хаха дакликните сюдаБыстро поймите, что это займет до 5 минут вашего времени, поэтому вы не сможете использовать его в дальнейшем.
13. Хотите узнать о CSS Scroll Snap?
CSS Scroll Snap — это независимый модуль в CSS, который содержит несколько свойств CSS, таких как scroll-snap-type, scroll-snap-align и т. д. Это свойство CSS, связанное с прокруткой, хотя упомянутое выше свойство CSS scroll-behavior — Это также связано с прокруткой, но их позиционирование сильно отличается.Scroll Snap по сути является позиционированием, но, кстати, при позиционировании оно плавное, тогда как scroll-behavior представляет собой чисто плавную прокрутку.
CSS Scroll Snap может автоматически и плавно определять указанную позицию указанного элемента, когда прокрутка веб-контейнера останавливается. С помощью этого CSS можно добиться эффекта многоэкранного H5 или переключения слайдов. Больше знаний можеткликните сюдачтобы получить.
14. Поговорим о позиции: липкая
Я по глупости думал, что position:sticky представляет собой комбинацию position:relative и position:fixed. Затем, после некоторых исследований, я обнаружил, что position:sticky по-прежнему имеет много характеристик, которые отличаются от того, что я думал. Если вы этого не понимаете , вы обязательно столкнетесь с проблемой «почему sticky не действует»; более того, с помощью position: sticky можно добиться очень тонких интерактивных эффектов макета, которые представлены в этой статье, но редко встречаются в других местах.
Кроме того, Chrome на какое-то время прекратил поддержку position:sticky, так что мне все равно на это утверждение, и недавно я наткнулся, черт возьми, Chrome снова поддерживает его. Похоже, что в будущем это утверждение станет стандартом, поэтому каждый может с уверенностью изучить его и не беспокоиться о том, что оно окажется бесполезным в будущем. научись, пожалуйстапосетите здесь.
15. Приложение CSS egg pain: отчеты о данных и проверка HTML
В этой статье представлены два приложения CSS, которые я считаю болезненными, но интересными: одно — чистый CSS для реализации отчетов о данных и отслеживания поведения пользователей, другое — чистый CSS для реализации проверки HTML и подсказок на странице. У меня больше мозгов и идей.Хотя считается, что они не будут использоваться в будущем, новые идеи могут быть очень полезны для нас, чтобы расширить наши горизонты. Если интересно, пожалуйстакликните сюдаПрочитайте исходный текст.
16. Полное введение в CSS font-feature-settings 50+ значений атрибутов ключевых слов
Эта статья очень длинная. В ней представлено свойство CSS font-feature-settings. Хотя свойство CSS font-feature-settings считается относительно совместимым свойством, кажется, что все меньше его видят и меньше используют. Почему? Свойство font-feature-settings может сделать набор шрифтов OpenType более красивым и более соответствующим фактическим потребностям разработки.Однако часто требуется поддержка пользовательских шрифтов.Для английского языка стоимость создания собственного шрифта слишком низкая, и доступно бесчисленное множество шрифтов. , Однако для китайского языка, tsk tsk, общие упрощенные китайские иероглифы составляют несколько тысяч, и стоимость этого шрифта очень высока. Без этих шрифтов со встроенными функциями шрифта естественное свойство CSS font-feature-settings не имеет никакого эффекта, что является одной из причин, по которой CSS font-feature-settings мало используется.
Тем не менее, в нашей повседневной разработке нам все еще приходится иметь дело с цифрами и буквами, поэтому по-прежнему важно понимать настройки шрифтов CSS.Эта статья больше похожа на популяризацию науки CSS, которая полностью показывает более 50 шрифтов. теги функций, которые в настоящее время поддерживаются браузерами. Производительность функций и стилей.Посмотреть здесь ".
Наконец, не могу не похвалить себя, работа этой статьи font-feature-settings огромна, и ей не суждено стать популярным свойством CSS, для меня это на самом деле вещь с низким вводом-выводом. Определенно более выгодно иметь эту энергию для написания буклетов о Наггетс для платного чтения. Однако, если я не разберусь в этой статье, то информации в этой области будет действительно мало.Перед тем, как написать эту статью, я поискал, и очень мало статей на китайском, знакомящих с настройками шрифтов-функций. идите к черту, кто идет в ад, пока я могу помочь некоторым людям, даже небольшой группе людей в отрасли, это очень ценно.
(Конец этой статьи)