О CSS новичку

{"document": [{"text": [{"type": "string", "attributes": {}, "string": "О Каскадных Таблицах Стилей для новичков-энтузиастов. CSS - технология старая, обкатанная, меняющаяся крайне медленно. Курсов по CSS создано бесконечное количество. И знаете, что самое интересное? Почти все эти курсы качественные, интересные и полезные. Но они не отвечают на самый главный вопрос: нужен ли CSS именно Вам? Если Вы в поисках, куда бы приложить свои силы и таланты, то прочитайте эту короткую статейку. Может быть, она поможет Вам определиться."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "title_00016.jpg", "filesize": 89116, "height": 450, "pic_id": 744858, "url": "/files/article_image/2023/11/04/title_00016.jpeg", "width": 900}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "*** Нужен ли CSS именно Вам? ***"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Помню, когда учился в школе, с нами, старшеклассниками, провели такой эксперимент. Нам организовали экскурсию в морг. Результаты оказались впечатляющими. Несколько экскурсантов упали в обморок, зато двое или трое стали потом профессиональными врачами. Вот такой блестящий пример профориентации. "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Примерно так и мы поступим сейчас для определения, нужно ли вам работать в области фронтенда (HTML+CSS+JS), конкретно стать специалистом CSS."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "*** Подсмотрим за CSS мастером, что он там делает? ***"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "CSS специалист получает в виде полуфабриката некий готовый HTML макет с подготовленными блоками и контентом, а заодно получает задание как-то это все сделать красивым или хотя бы просто читабельным."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Пример HTML кода, который получил CSS специалист."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<div id= «div1» >"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<h2>Я очень сильно <span id= «span1» >❤</span> CSS</h2>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p id= «p1» >И эта любовь так сильна, что ее невозможно выразить словами. </p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "<p id= «p2» >Я готов все дни и ночи напролет колдовать над стилями, чтобы добиться максимального эффекта. </p>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "</div>"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Все это будет работать и без CSS."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Но это слишком скучно, хотя и понятно. И вот за дело берется специалист CSS и предлагает для обсуждения версию номер 1."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "div1.png", "filesize": 12134, "height": 140, "pic_id": 744861, "url": "/files/article_image/2023/11/04/div1.jpeg", "width": 640}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Начальник посмотрел на это творение и сказал так."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "- Э-э-э... Как-то это все слишком уж... Э-э-э... Просто, что ли... Хочется, чего-то такого, - начальник пощелкал пальцами, - ну, ты меня понимаешь."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Фронтендер (так часто называют специалистов HTML + CSS + JS), конечно, сразу все понял и предложил версию номер 2."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "div2.png", "filesize": 23586, "height": 140, "pic_id": 744863, "url": "/files/article_image/2023/11/04/div2.jpeg", "width": 660}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "- Вот это совсем другое дело! - обрадовался начальник, посмотрев на версию 2, - можешь ведь, когда хочешь!"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Конечно, это вовсе не какое-то «другое дело», а то же самое. Просто стили CSS слегка изменены."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Важно. Если, даже получив одобрение руководства, Вы не останавливаетесь на достигнутом, а продолжаете даже в свободное от работы время изобретать новые версии не денег ради, а просто из любви к искусству, то это добрый признак. Вполне возможно, что CSS - Ваше призвание."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Например, Вам может прийти в голову идея реализовать что-то такое вроде «Версия 3. Под мухой»."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "div3.png", "filesize": 29912, "height": 140, "pic_id": 744865, "url": "/files/article_image/2023/11/04/div3.jpeg", "width": 660}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Практическая ценность этой версии в том, что она демонстрирует возможности работы CSS с маленькими графическими файлами, в т. ч. и передвижения их по документу."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Затем, вдоволь наигравшись с мухой (а может и с другими насекомыми), возможно, в голову придет другая идея, например, почему бы не посмотреть на все это дело изнутри (т. е. с другой стороны монитора, планшета, смартфона и т. д.)"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Получится примерно так."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "div4.png", "filesize": 23930, "height": 140, "pic_id": 744867, "url": "/files/article_image/2023/11/04/div4.jpeg", "width": 660}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Это вроде как послание тем загадочным существам, которые, возможно, живут по ту сторону экрана."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "*** Вы почувствовали себя энтузиастом CSS? ***"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вот мы потихонечку подошли к самому главному принципиальному вопросу."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Если все эти простейшие штучки вас интересуют, забавляют, развлекают, значит, возможно, вам реально надо заняться CSS."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Собственно, работа CSS дизайнера в этом и заключается, чтобы придумать как максимально эффективно и даже эффектно преподнести пользователю ту или иную информацию."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Вы почувствовали себя энтузиастом CSS?"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Это очень важно. Если у Вас есть внутренняя тяга к этому виду творчества, то вы обязательно и работу найдете в этой области, и удовольствие будете получать от процесса, да еще и будете хорошо зарабатывать."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Беседа с рекрутером при приеме на работу для Вас будет выглядеть не как попытка убедить и что-то доказать, а как разговор двух равноправных участников, которые обожают CSS. Это, конечно, значительно повышает Ваши шансы."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Информации выше вполне достаточно для внутреннего понимания, есть ли для Вас смысл глубже погрузиться в CSS."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Первоисточник здесь: "}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": ""}, {"type": "string", "attributes": {"href": "https://wpvi.ru/pages/story/00016/"}, "string": "https: //wpvi. ru/pages/story/00016/"}, {"type": "string", "attributes": {}, "string": " - Здесь реализация на чистом CSS (в тексте выше просто скрины). Можно скачать файл CSS и получить дополнительные пояснения. Бесплатно, без СМС, без регистрации."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "#############"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "### Конец ###"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "#############"}], "attributes": []}], "selectedRange": [4067, 4101]}