Почему CSS так сложно выучить? Метод важен!

Привет всем, яноль один. Некоторое время назад я наткнулся на этот вопрос на Zhihu:Почему CSS так сложно выучить?

Увидев этот вопрос, я тщательно обдумал его. CSS кажется очень трудным для изучения. Кажется, что он не имеет такого систематического плана обучения, как JavaScript. Люди обычно не используют весь CSS. Кроме того, есть несколько часто используемых свойств, и даже вводные учебные видеоролики многих учебных заведений научат вас только некоторым часто используемым CSS (иначе, как вы можете думать, что несколько часов обучающих видеороликов помогут вам быстро начать работу с CSS?)

Обычно люди отвечают вам, что CSS легко изучить, потому что он использует только те часто используемые свойства, и он, вероятно, не имеет глубокого понимания этого. Если немного утрировать, CSS также следует рассматривать как небольшой язык, и если вы изучите его глубоко, у вас будет много знаний. Если мы не специализируемся на CSS, нам не нужно разбираться в использовании всех свойств CSS и синтаксисе всех последующих новых фич, мы можем учиться по мере необходимости по сценарию работы, но убедитесь, что свойства, которые вы учиться достаточно глубоко~

Итак, как именно мы изучаем CSS?С этой целью я сделал простой набросок, и я хочу поговорить об этих моментах.

1. Книги, статьи сообщества

Это, наверное, самый распространенный способ изучения CSS (и я тоже). Существуют следующие сценарии:

сцена первая: Во время разработки при возникновении требования «отображать с многоточием (...) после превышения количества текстовых символов» откройте поиск Baidu:css字数过多用省略号展示, э~ нашел!ctrl+c、ctrl+v, учеба окончена, закончена!

сцена вторая: Однажды утром я пошел к техническому сообществу и увидел статью о CSS, я увидел, что в заголовке есть свойство CSS под названиемresize,resizeЧто за атрибут, почему я его не использовал? Кликайте и читайте с удовольствием~ через две минуты~ Ой, оказывается, есть еще этот атрибут, он так используется, и поза вверх!

сцена третья: Решил, хочу хорошо выучить CSS, открываю сайт покупок и ищу:CSS书籍, быстрее оформляйте заказ! Когда книга прибудет, начните читать и заниматься каждый день. Конечно, в это время есть несколько ситуаций, а именно:

• Я прочитал книгу только в первый день, когда я ее получил, и с тех пор она запылилась.
• Я прочитал часть, но мне было лень набирать код, и в конце концов я бросил чтение из-за скуки.
• Я внимательно прочитал книгу, следовал коду в книге, сделал много заметок и, наконец, многому научился.

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

• Блог Чжан Синьсюй
• учитель пустыниW3Cplus
• кокосовый боссiCSS

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

2. Помните о типах данных CSS

Еще один момент, по которому CSS сложен для изучения, вероятно, потому, что в CSS слишком много свойств, и значение каждого свойства поддерживает множество способов записи, поэтому почти невозможно легко запомнить все способы написания каждого свойства. Недавно, когда я просматривал блог, я обнаружил, что в CSS тоже есть свой тип данных, вот цитата из Zhang Xinxu.Документация по типам значений CSS, для вашего удобства

Вот краткое введение в типы данных CSS:

используется на рисунке<>Скобки обозначают тип данных CSS. Давайте представим несколько типов на рисунке:

• <number>: указывает, что значение может быть числом
• <length>: указывает размерную длину элемента, например3px,33em,34rem
• <percentage>: Представляет процент на основе родительского элемента, например.33%
• <number-percentage>: указывает, что значение может быть либо<number>,так же может быть<percentage>
• <position>: Указывает положение элемента. значение может быть<length>,<percentage>,left/right/top/bottom

Давайте посмотрим на два свойства CSS:

• первыйwidth, документация сообщит вам, что поддерживаемые типы данных для этого свойства:<length>а также<percentage>, то мы знаем, что есть несколько способов записать этот атрибут:width: 1px,width: 3rem,width: 33em,width: 33%
• Второе свойствоbackground-position, документация сообщит вам, что поддерживаемые типы данных для этого свойства:<position>, то мы знаем, что есть несколько способов записать этот атрибут:background-position: left,background-position: right ,background-position: top,background-position: bottom,background-position: 30%,background-position: 3rem

Из этого примера мы видим, что для запоминания как можно большего количества свойств CSS вы можете начать с запоминания типов данных CSS (сейчас существует почти 40+ типов данных), чтобы каждый раз, когда вы изучаете новые свойства CSS, мышление изменится, как показано ниже

Я не помню типы данных CSS:

Запоминание типов данных CSS:

Я не знаю, найдете ли вы это, если документ только говорит вамbackground-positionслужба поддержки<position>Тип данных, вы уверены, что знаете полное использование этого свойства? Вы знаете, что атрибут поддерживаетbackground-position: 3remнаписано так, потому что вы знаете<position>тип данных содержит<length>тип данных, но вы знаете, что он также поддерживаетbackground-position: bottom 50px right 100px;Это так написано? Почему можно записать четыре значения и разделить их пробелами? Кто вам сказал, это?

Это требует от нас пониманияСинтаксис CSSДа, внимательно прочитайте следующий раздел

3. Разберитесь с синтаксисом CSS

Раньше мне нужно было использовать эффект обрезки в стиле, поэтому я готов узнать об этомCSSсерединаclip-pathКак использовать атрибут, поэтому я запросил более авторитетныйclip-path MDN, глядя на, я нашел это

Я только что понял, что я даже не понимаю синтаксис CSS. Честно говоря, в прошлом, независимо от того, изучали ли вы CSS в первый раз или временно искали применение определенному свойству CSS, вы могли мгновенно найти нужный ответ (например, учебник для новичков), но это время,Я действительно глуп!из-за себяclip-pathЭто свойство более сложное и поддерживает больше грамматик. Вы не можете понять все использование и значение этого свойства, просто взглянув на пример кода, предоставленный вам MDN (учебник для новичков не может полностью научить вас).

Поэтому я пошел в Интернет, чтобы узнать.Синтаксис CSSЗначение некоторых символов в , помогите мне лучше понять грамматику

Поскольку знание синтаксической нотации CSS находится вСинтаксис определения значения свойства CSS MDNВыше есть очень подробное введение (Рекомендуется сначала прочитать эту статью на MDN! ! очень легко понять), поэтому больше объяснять не буду, вот лишь несколько сводных таблиц

символ комбинации свойств

комбинация свойств: Указывает комбинацию написания нескольких значений атрибутов. Например, вborder: 1px solid #000середина,1pxможет иsolidпоменять местами,#000Можно ли его опустить и т.д., это все комбинации атрибутов

символ	имя	эффект
пространство	Приложение	Порядок атрибутов слева и справа от пробела нельзя поменять местами.
,	запятая (разделитель)	Свойства по обе стороны от запятой должны быть разделены запятыми
/	косая черта (разделитель)	Свойства по обе стороны от косой черты должны быть разделены косой чертой.
&&	комбинатор "и"	Атрибуты по обе стороны от комбинатора «и» должны стоять в любом порядке.
||	комбинатор "или"	По крайней мере один из атрибутов по обе стороны от комбинатора «или» появляется в любом порядке.
|	"взаимоисключающий" комбинатор	Появляется ровно один из атрибутов по обе стороны от «взаимоисключающего» комбинатора.
[]	квадратные скобки	Содержимое, заключенное в квадратные скобки, представляет собой единое целое, которое можно рассматривать как скобки () в математике.

приоритет комбинатора

Комбинатор «и», комбинатор «или» и комбинатор «взаимное исключение» предназначены для указания появления значений свойств, но между ними существует приоритет. Напримерbold | thin || <length>, где комбинатор «или» имеет приоритет над «взаимоисключающим» комбинатором, поэтому это эквивалентноbold | [thin || <length>]

символ	имя	Приоритет (чем выше число, тем выше приоритет)
пространство	Приложение	4
&&	комбинатор "и"	3
||	комбинатор "или"	2
|	"взаимоисключающий" комбинатор	1

символ повторения атрибута

дублирование атрибутов: указывает количество вхождений одного или нескольких атрибутов. Например, вrgba(0, 0, 0, 1), равно ли число цифр 3 и может ли последняя цифра обозначать процент. Это чем-то похоже на обычный символ повторения

символ	имя	эффект
без	не пишите символы	По умолчанию. Не пишите символ, указывающий, что этот атрибут встречается только один раз.
+	плюс	Одно или несколько вхождений атрибута или целого слева от знака плюс
?	вопросительный знак	ноль или одно вхождение атрибута или целое слева от вопросительного знака
*	Звездочка	ноль или одно или несколько вхождений атрибута или все слева от звездочки
#	Хэштег	Атрибут или целое слева от знака фунта появляется один или несколько раз, и ему предшествует запятая (,) разделенный
{A, B}	большие скобки	Атрибут или целое слева от фигурных скобок появляется не менее A раз и не более B раз.
!	восклицательный знак	Атрибут должен появиться в целом слева от восклицательного знака, даже если все атрибуты в целом объявлены, чтобы появиться нулевые раз

Расшифровка синтаксиса CSS

Возьмите этот разделclip-pathГрамматика , в качестве примера, кратко интерпретируем один из атрибутов (интерпретироваться будет только его часть, т.к. читать их все будет очень долго)

Первый взгляд на общую структуру

Всего он разделен на четыре части в порядке сверху вниз.whereподключить, а это значит, чтоwhereСледующий раздел является дополнительным объяснением предыдущего раздела.

①: Значит этоclip-pathЭто свойство поддерживает метод записи: или не только писать<clip-source>Значение типа данных или, по крайней мере, из<basic-shape>а также<geometry-box>Выберите тип значения между двумя для записи или запишите его какnone.

②: Мы узнаем, что в ①<basic-shape>Поддерживаемые методы записи типа данных:inset(),circle(),ellipse(),polygon(),path()эти 5 функций

③: Потому что мы хотим знатьcircle()Конкретное использование этой функции, так что сначала посмотрите на это. мы изучилиcircle()Поддержка аргументов для функций<shape-radius>а также<position>Две структуры данных, и обе доступны для записи или нет, но если вы хотите написать<position>, которому должен предшествоватьat

④: см. сначала<shape-radius>Поддерживаемые свойства:<length-percentage>(Это то, что следует из названия<length>а также<percentage>),closest-side,farthest-side. а также<position>Синтаксис типа данных кажется более сложным, разберем его отдельно, т. к. он действительно очень длинный, буду<position>Отформатируйте и украсьте его, чтобы вам было удобно его читать (я также советую, если вы столкнетесь с таким длинным введением в грамматику при изучении грамматики определенного атрибута, отформатируйте его, как я, чтобы вам было легко читать и понимать)

Как показано на рисунке, целое разделено на три части, и эти три части являются взаимоисключающими, то есть может появиться только одна из этих трех частей, и тогда по изученным нами ранее символам грамматики CSS мы можем знать как им пользоваться, а то здесь слишком много поддерживаемых способов написания, давайте сразу перечислю таблицу (на самом деле это перестановка и комбинация)! Если вы все еще не понимаете, вы можете внимательно прочитать введение в грамматику MDN или оставить сообщение в области комментариев, чтобы спросить меня, я отвечу, как только увижу это!

Тип поддерживает запись

первая часть	Вторая часть	третья часть
left	left	left 30px top 30pxилиtop 30px left 30px
center	center	left 30px top 30%илиtop 30% left 30px
right	right	left 30px bottom 30pxилиbottom 30px left 30px
top	30%	left 30px bottom 30%илиbottom 30% left 30px
bottom	3pxили3emили3remЗначение равной длины	left 30% top 30pxилиtop 30px left 30%
left topилиtop left	left top	left 30% top 30%илиtop 30% left 30%
left centerилиcenter left	left center	left 30% bottom 30pxилиbottom 30px left 30%
left bottomилиbottom left	left bottom	left 30% bottom 30%илиbottom 30% left 30%
center center	left 30%	right 30px top 30pxилиtop 30px right 30px
right topилиtop right	left 30px	right 30px top 30%илиtop 30% right 30px
right centerилиcenter right	center top	right 30px bottom 30pxилиbottom 30px right 30px
right bottomилиbottom right	center center	right 30px bottom 30%илиbottom 30% right 30px
	center bottom	right 30% top 30pxилиtop 30px right 30%
	center 30%	right 30% top 30%илиtop 30% right 30%
	center 30px	right 30% bottom 30pxилиbottom 30px right 30%
	right top	right 30% bottom 30%илиbottom 30% right 30%
	right center
	right bottom
	right 30%
	right 30px
	30% top
	30% center
	30% bottom
	30% 30%
	30% 30px
	30px top
	30px center
	30px bottom
	30px 30%
	30px 30px

хо! Я устал, слишком много способов поддержать это!

В-четвертых, попробуйте больше

В предыдущем разделе мы изучалиclip-pathПосле синтаксиса атрибута мы знаем, какое отсечение круга нам нужно (circle()) как написать грамматику, значит ты ее точно знаешь? Может быть, вы читали пример, который дал вам MDN, и знаетеcircle(40%)Эффект существенно достигнут, как на картинке ниже.

Как я уже говорил, MDN только перечисляет их для вас.circle()Это самый простой способ написать эту функцию, но мы только что изучили ее синтаксис и знаем, что есть и другие способы ее записи (например,circle(40% at left)), а документация MDN только говорит вам, какие синтаксисы поддерживаются, и не говорит вам четко, какой синтаксис что делает и какой эффект он может достичь.

Теперь нам нужно попробовать это самим

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尝试clip-path的circle()的使用</title>
    <style>
        #zero2one {
            width: 100px;
            height: 100px;
            background-color: ;
            clip-path: circle(40%);   <!-- 等会就在这一行改来改去,反复尝试！ -->
        }
    </style>
</head>
<body>
    <div id="zero2one"></div>
</body>
</html>

Взгляните на эффект, ну, он такой же, как показал MDN

Измените значение еще разclip-path: circle(60%), увидеть эффект

С паттерном вроде разобрался, вроде бы центр элемента и есть точка отсчета,60%Это означает нарисовать круг от центра до 60% длины края в качестве радиуса и обрезать содержимое за пределами круга. Они не упоминаются в документе MDN, и я проверил это на собственном опыте.

Далее, давайте попробуем другие синтаксисы~

Попробуйте изменить значение наclip-path: circle(40% at top)

А? Это потрясающе! Почему так становится, вроде правил не нашел, а потом попробовать изменить значениеclip-path: circle(80% at top)

Создается впечатление, что центр окружности перемещается в верхнюю середину элемента, а затем рисуется окружность радиусом 80% длины от центра до нижнего края для вырезания. Пока мы, кажется, понимаемcircle()в грамматикеatНазад<position>Для чего нужен тип данных? Вероятно, он используется для управления положением центра круга, нарисованного при кадрировании.

Остальное время у вас остается на то, чтобы протестировать все грамматики одну за другой, а потом привести простой пример, типа попробуйте еще разclip-path: circle(40% at 30px), вам должно быть интересно, что это значит, давайте посмотрим на эффект

Интуитивно вся окружность сместилась на некоторое расстояние влево, и когда мы не устанавливалиat 30px, центр круга был в центре элемента, а теперь как бы смещен вправо, смелая догадкаat 30pxЭто означает, что абсцисса центра круга составляет 30 пикселей от крайнего левого края элемента.

Далее проверяем наше предположение и продолжаем изменять его значениеclip-path: circle(40% at 0)

Очевидно, что центр круга в это время находится в средней части крайнего левого угла, что должно подтверждать нашу догадку, так почему бы не проверить ординату еще раз? Продолжайте изменять значениеclip-path: circle(40% at 0 0)

Да, очень гладко,at 0 0второй0Это означает, что расстояние между ординатой центра окружности и вершиной равно 0. Тогда можно смело делать вывод на данный момент.30px,33emТакой<length>Значение типа данных, соответствующие ему координаты показаны на рисунке.

Что ж, эта статья уже очень длинная, поэтому я не буду продолжать знакомить с использованием других грамматик, я просто использовал ее в качестве примера, потому что мы не представляем эту статью.circle()Используя учебник, заинтересованные читатели могут спуститься и попрактиковаться самостоятельно ~

Так что практика очень важна! !Документация MDN не дает вам списка эффектов каждого синтаксиса, потому что каждый из них указан, а документация выглядит запутанной, так что решать вам. Помнится, Чжан Синьсюй сказал в прямом эфире, что на опробование возможностей CSS, которые он освоил, ушло много времени, и он не мог понять их, просто просматривая документы. эта статья могла быть исследована в течение нескольких часов или даже дюжины часов.

Многие функции CSS будут иметь проблемы с совместимостью, потому что на рынке есть много производителей браузеров, и они поддерживают разные степени, и мы обычно понимаем совместимость определенного атрибута CSS, который выглядит следующим образом:

Просмотр совместимости браузера для свойства MDN

пройти черезCan I Useчтобы найти совместимость браузера для свойства

Все это правильно, но иногда браузерная совместимость некоторых свойств CSS может быть недоступна по этим двум каналам, так что же мне делать?Вручную проверьте, поддерживается ли эффект этого атрибута в каждом браузере.(Босс Синьсю сказал, что сделает это раньше), я не буду приводить пример этого, каждый должен быть в состоянии понять

☀️ Наконец-то

На самом деле, каждый босс CSS не успешен из-за некоторых быстрых путей обучения.Они полагаются на постоянные попытки, запись и обобщение различных знаний CSS, и они часто будут использовать знания CSS, которые они узнали, чтобы создать новый.Небольшая демонстрация Несколько месяцев назад я добавил друга г-на Да Мо. Я часто вижу демо-код и статьи о новых функциях CSS в кругу его друзей (я действительно восхищаюсь этим). Боссы Коко тоже, и они часто публикуют некоторые крутые спецэффекты, которые просто реализованы с помощью CSS (говорят, что нет спецэффектов, которых он не смог бы добиться~)

Кроме того, если вы хотите углубиться, вы также можете обратить внимание на спецификацию CSS, авторитетной из которых является W3C.CSS Working GroupДа, в нем много документов со спецификацией CSS.

Итак, давайте порекомендуем несколько книг, признанных в отрасли достаточно хорошими, например, «Полное руководство по CSS», «Демистификация CSS», «Мир CSS», «Новый мир CSS» и так далее…

Наконец для "Как выучить CSS?«Эта тема, у вас есть вопросы или вы думаете, что это хороший способ узнать? Добро пожаловать, чтобы оставить сообщение в области комментариев, чтобы обсудить~

Рекомендуемые статьи в прошлом

• План дизайна, я знаю только, как аромат, когда я пишу его 728 + 👍🏻
• Я оптимизировал индикатор выполнения, и производительность страницы увеличилась на 70% 850+👍🏻
• Эта статья покажет вам, как устранить застревание страниц, вызванное утечкой памяти.

яноль один, поделись технологией, а не только фронтендом, если понравилось, поставь баллотличный👍🏻吧，感谢你们的支持！ !

Фронтальное впечатление, если вам нужно перепечатать, пожалуйста, свяжитесь со мной, спасибо!