SergeAnt

нет никакой связи. К примеру, просто удаление пустой строки приводит к изменению подсветки синтаксиса. Добавим ту же строку - первоначальная подсветка не восстанавливается. Налицо ошибка, неужели никто, кроме меня, с ней не сталкивался?

Не совсем так. HTML идеологически описывает логическую структуру документа, а не его внешний вид. Языки программирования НЕ описывают функцию.Язык программирования - набор правил, позволяющий человеку однозначно сформулировать компьютеру задачу, обычно на хранение, обработку и отображение данных. Интерфейс между мыслью и машинными кодами конкретного процессора. Функции - лишь один из возможных инструментов, но не обязательный. Кроме функционального программирования, есть, например, логическое. Кстати, функции есть и в CSS. Отсутствие чёткой концепции CSS, на мой взгляд, - основная его проблема. Как следствие - вольная интерпретация браузерами и собственно, существование 100500 дискуссий "как реализовать кнопку". Несмотря на явную избыточность лексики CSS, функциональности постоянно не хватает, появляются новые уровни вложенности, фреймворки, JQuery и т.п. И в том числе а ведь они не эквивалентны. По-моему, не во всех случаях можно однозначно заменить универсальное свойство набором отдельных, ага. Спасибо за интересную дискуссию!

Рискуя получить люлей за офтопик, промолчать не могу. Безусловно, CSS - это средство программирования, язык программирования, инструмент программирования, не путайте с алгоритмическим языком. Используя CSS, мы программируем внешний вид и поведение интерфейса веб-страницы. CSS обладает как свойствами языка разметки, так и, между прочим, некоторыми качествами алгоритмического языка. И как любой инструмент, будь то хирургический, или столярный, или автомобиль, он может быть более или менее удобным. Как часто мы слышим "да, есть странности, но я привык". Приспособиться можно ко всему, но хотелось бы тратить меньше времени жизни на обучение и отладку, вызванную неочевидным для новичка результатом использования лексических конструкций. Хотя выбора, у нас, конечно, нет ;)

Может и не всё, но по крайней мере есть какая-то система, во всех более-менее известных алгоритмических языках, начиная с BASIC 😉 Здесь же, куда ни плюнь - костыли. Дискуссии, как мол выровнять блоки по вертикали, 100500 методов, один неочевиднее другого. Хотя ещё 20 лет назад это делалось на простом HTML таблицей. Несмотря на скромный лексический запас, нет уверенности, что CSS отработает именно так, как ожидаешь... Плюс к этому разнообразие реакций браузеров. Такое моё мнение, как новичка. Не вижу препятствий, чтобы не покрасить обои гладким цветом, по крайней мере частично. При нормальной типизации, разумеется. Как программист, я мог быпокрасить картину и поклеить на неё обои, ага 😉 Я имел в виду, что в каких-то случаях у меня и градиент пропадал, и фон. Возможно, при попытке расположить гладкий фон на втором месте. Оставались только граница и текст. Спасибо за помощь. Не вижу смысла спорить о концепциях, имеем то, что имеем, учиться нужно в любом случае, безусловно.

Вот именно, если ЗАЗУБРИТЬ и методом проб и ошибок убедиться, что работает, а что нет. Интуитивно для новичка не всегда понятно. К слову, я и использовал построение, в котором гладкий фон на последнем месте, но оно не работает: background: linear-gradient(to right, #361D10 0, #361D10 50%, #E04E39 50%, #E04E39 100%), white content-box;

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

Ага, спасибо. Я не настолько силён в CSS, многие вещи, несмотря на то, что работают, кажутся неочевидными, понять сложно, проще запомнить. Тем не менее, уже вижу, что 1й вариант не работает так, как требуется: пунктирная граница искажает рамку.. Смотрю 2й. 2й вариант вовсе не показывает рамку, это результат плохо структурированной лексики CSS 😞 Мой вариант получился проще. Я всего лишь заменил неработающую почему-то (см.первый тезис) однотонную заливку на однотонный же градиент. И всё! <style> div { display:table-cell; text-align: center; vertical-align: middle; height: 480px; width: 640px; border: 2em solid transparent; padding: 1em; margin: 3em; background: url("http://placekitten.com/50") right 1em bottom 1em no-repeat, linear-gradient(to left, white 0, white 100%) padding-box, linear-gradient(to right, #361D10 0, #361D10 50%, #E04E39 50%, #E04E39 100%) border-box; </style> </head> <body> <div>Какой-то текст</div><br> </body> 1. Рамка прозрачная 2. Заливка градиентная вместе с рамкой 3. Заливка градиентная однотонная внутри рамки 4. Рисунок в углу 5. Текст по центру. Осталась недосказанность, почему не работает простая заливка в п.3. Может всё же я что-то неправильно делал?

Да, я умею создать проблему на ровном месте. В данном случае требуется создать шаблон для объявления, состоящий из двухцветной рамки, белого поля для текста и логотипа в его правом нижнем углу (См.пример). Первое, что приходит на ум - создать DIV с фоном - первый уровень заливки с градиентом, на него наложить белый фон и на него уже в уголок - логотип. Например, использовать параметр border-box для градиентной заливки, padding-box для белой, а логотип - в правый нижний угол content-box. Но, конечно, я всё делаю неправильно и ничего не работает. Как я понимаю, именно заливка цветом ломает работу множественных фонов. А в принципе это возможно, или нужно усложнить конструкцию для получения результата? Хотелось бы обойтись одним DIVом. Знаю, что можно для фона использовать несколько картинок, но не уверен, что для каждой можно присваивать разные значения свойства background-clip: UPD: проверил, можно. Например - наложить градиент на градиент с разными параметрами background-clip: получается вполне. Проблема именно с плоским цветом. .test { height: 480px; width: 640px; border: 10px black dashed; padding: 1em; background-clip: border-box; margin: 3em; background: linear-gradient(to right, #361D10 0, #361D10 50%, #E04E39 50%, #E04E39 100%), white content-box; /* двухцветный градиент и попытка белого фона*/ } UPD2 "Цвет фона, если он есть, закрашивается под всеми остальными слоями." https://html5book.ru/css-background/#multiple-background Практически же получается, что цвет фона, если есть, должен располагаться только в конце многослойной конструкции, в противном случае его использование ломает всю конструкцию, и ни одного слоя фона отображаться не будет. Если цвет расположен на последнем месте, слои будут видны, кроме однотонной заливки, т.к. она будет внизу, перекрытая другими слоями. https://codepen.io/serge777/pen/jOBjZYJ Это странно и необъяснимо.

Правильно ли я понял, что эта конструкция сдвигает вправо только стрелку, которую я дописываю к слову "Подробнее"? У меня задача проще - сдвинуть вправо ссылку целиком вместе со стрелкой. Иными словами, Вы предлагаете вместо text-align: right; использовать position: absolute; right: 0; ? Мне кажется, это самый оптимальный вариант. Ну, это слишком очевидный и прямолинейный подход ;) Мы лёгких путей не ищем ;)

Notepad ++ 8.1 x64, но проблема существовала и в предыдущих версиях. В таблице стилей форматирование, условно говоря, первого абзаца, отличается от остального текста. Т.е. (см. скришнот) в первом селекторе подсвечиваются ЗНАЧЕНИЯ свойств, во втором - СВОЙСТВА, в третьем - и сам селектор. Причём если добавлять или убирать/добавлять селекторы, менять их местами в таблице, то эта условная граница "перемещается", т.е. она не привязана к какому-то конкретному участку кода. Мне кажется, что это баг (или фича) NPP++ и не стОит искать в этом поведении какой-то логики. Подсвечивает, и ладно. Но может всё же есть рациональное объяснение этому странному поведению? В частности, если заменить краткую запись номера цвета на полную или на название цвета, то это тоже вызывает изменение подсветки. В конце концов, как ДОЛЖНО быть?

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

Это понятно, но как это сделать? Как выбрать ячейку, в которой есть ссылка? Это возможно в принципе средствами CSS?

Пытаюсь отформатировать ссылку в ячейке таблицы (сдвинуть вправо, и т.п.). Дописать стрелку к надписи получается, но сдвинуть её - нет. Если я правильно понимаю, из-за того, что тэг <a> - строчный контейнер, и свойство надо бы применить к ячейке таблицы, но ищем мы гиперссылку. <tr> <td width="30%"><a href="/news/2948/">Подробнее&nbsp;</a></td> </tr> CSS: /* пририсовываем к надписи стрелочку, работает */ td a::after { content: '\A0\21D2'; } /* пытаемся выровнять по правому краю - не работает */ td>a:link { text-align: right; font-weight: bold; } Может есть какой-то способ отформатировать ячейку / ссылку? Вторая идея - искать элемент по его содержанию (т.е. слову "Подробнее"), тоже нереализуема? CSS ищет только по свойствам/атрибутам?

Разве не к BODY надо прикреплять? <style> body { background-image: url(images/help.png); /* Путь к фоновому изображению */ background-attachment: fixed; /* Фиксируем фон веб-страницы */ } </style> http://htmlbook.ru/css/background-attachment