Объяснение, почему стиль не должен выполняться непосредственно в HTML

ItamarG3 08/18/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

Недавно я заметил, что устарел из html в соответствии с этим сайтом . Из этого ответа на Stack Overflow замена шатра производится из CSS. Объяснение, данное изменению, заключается в том, что html относится к структуре документа, а макет, анимация и стиль и т. Д. Должны выполняться с помощью CSS.

Это заставило меня подумать:

Явным образом объяснял бы разницу между установкой атрибута style тега html и выполнением его с помощью CSS, который был бы полезен для повышения понимания учениками присоединения CSS и HTML?

Чтобы сузить его, я ищу примеры или объяснения того, как научить его явно облегчать студентам стиль своих веб-страниц . Предпочтительно объяснение.

«Явным образом преподаю», что я имею в виду, на самом деле посвятил урок с названием «Styling through .CSS» или что-то подобное.

В некоторых случаях, если это необходимо:

Студенты учатся базовому веб-дизайну: HTML, JavaScript (очень простой), JSP и SQL. Они изучают их в течение 1 года, и в конце года у них должен быть веб-сайт (для которого они получают оценки). Мне интересно, если урок полностью о CSS может в конечном итоге привести к созданию более перспективных веб-сайтов.

5 Comments
3 Puppy 07/30/2017
Основная проблема здесь заключается в том, что вы предполагаете, что стиль не должен выполняться непосредственно в HTML, а использование CSS лучше. Ни одна из этих вещей не верна.
ItamarG3 07/31/2017
@Puppy хорошо, часть вопроса заключается в том, следует ли мне преподавать это отдельно. Если я этого не сделаю, они не будут использовать таблицы стилей. Но вы думаете, что любой сайт в любом месте на самом деле жестко кодирует все это css в html? Every div имеет гору кода в атрибуте style ?
1 David Spence 07/31/2017
На этом сайте показана способность сохранять css отдельно. Csszengarden.com - та же структура, другая таблица стилей CSS.
ItamarG3 07/31/2017
@DavidSpence приятно. Я определенно буду использовать это
1 no comprende 07/31/2017
Независимо от того, что вы делаете, не показывайте им эту SO-почту о разборе HTML с помощью Regex . Могли бы дать им кошмары!

12 Answers


richard 07/30/2017.

Мне нравится идея создания нескольких таблиц стилей, а ученики применяют их к их HTML. Затем они могут видеть, что имеют отдельные таблицы стилей.

Затем они могут начать редактирование таблиц стилей и увидеть, что сила одного небольшого изменения может изменить каждый заголовок или каждый абзац и т. Д.

Я также в прошлом написал HTML-файл с набором кнопок внизу. Эти кнопки запускают другой загружаемый файл CSS. Это был очень простой JavaScript.

Чтобы ответить, следует ли их разделить

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

Чтобы ответить, вы должны посвятить урок отдельным файлам CSS.

Да. Если важно сохранить эти отдельные, какие есть, то вы должны научить учеников держать их отдельно. Экономьте время, не обучая их смешивать его с HTML (это позволит сэкономить время дважды, так как вам не нужно будет его учить).


Я сделал это только с одним или двумя людьми (а не с классом).

5 comments
ItamarG3 07/30/2017
Этот второй параграф особенно полезен. Но это не отвечает, должен ли я действительно посвятить урок тому, как и почему нужно писать таблицу стилей CSS, а не встроенные атрибуты style html.
richard 07/30/2017
Добавлен частичный ответ на If и почему посвятить ему урок.
1 Buffy 07/30/2017
Я согласен с тем, что не-преподавание является особенно расточительным использованием времени каждого человека. Лучше всего поймать неправильные представления, прежде чем плохие привычки будут построены и усилены.
1 richard 07/30/2017
@tim, это просто optimisation нагрузки. Концептуальность должна оставаться отдельной. Однако Google говорит, что он помещен в один файл. Они не говорят, что вы должны стилизовать каждый бит отдельно. Они говорят, что может быть в файле css и добавить его в раздел <style> html.
1 Darren 07/31/2017
Вместо того, чтобы давать студентам различные таблицы стилей, которые влияют на их код, я бы попробовал обратный подход. После обучения их встроенным стилям в HTML, дайте им страницу, которая опирается на документ CSS для своего стиля и попросит их создать для них свою собственную таблицу стилей (используя те же методы, которые они узнали из использования встроенного HTML), - это всего лишь вопрос маркировки стилей И объединение их в одном месте). Затем каждый в классе может сравнить свои таблицы стилей с общим тестом (тем, который вы предоставили) и увидеть возможности.

Buffy 07/30/2017.

Если вы хотите только создать страницу, которая является простой и ad-hoc, и никогда не изменится в будущем и будет видна только на одном устройстве, то, несомненно, создайте стиль непосредственно в html. Это то же самое, когда вы пишете программу, которая будет запускаться только один раз на одном устройстве, чтобы получить ответ, после чего программа станет устаревшей. Поэтому нет причин тщательно кодировать код. «Быстро и грязно» работает на такие вещи.

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

Итак, если вы хотите создавать сайты, которые важны и долговечны и которые должны поддерживаться в будущем, используйте CSS. Вероятно, вы бы не писали важную программу C в main , но, по крайней мере, должны были бы учитывать то, что должно быть одним и тем же, но повторно использоваться. В простом программировании на языке С мы определяем функции для этого. В html мы учитываем стиль. На более глубоком уровне серверная сторона также влияет на большую часть данных и т. Д. Это позволяет вещам, которые должны быть одинаковыми, оставаться неизменными и позволяет нам изменять один уровень дизайна независимо от других уровней.

Это не совсем то же самое, но посмотрите на основной код главной страницы Google. Я не знаю, что они используют, чтобы связать это и поддерживать, но я сомневаюсь, что это просто текстовый редактор. Обратите внимание, что их первая страница , хотя и невероятно простая в макете, часто меняется.

Note to the Instructor Когда вы готовитесь к изучению работы ученика, просмотрите его на разных устройствах с различными разрешениями экрана. Тем не менее, я не предлагаю, чтобы вы также обеспечивали их для каждого устройства css.

В этом случае просмотрите некоторые страницы StackExchange на рабочем столе и телефоне. И для шока, посмотрите как на исходные, так и на таблицы стилей некоторых страниц.

2 comments
1 Luke Sawczak 07/31/2017
Сравнение с функциями хорошо. Я предполагаю, что грех, о котором идет речь, напрямую предоставляет атрибуты стиля в исходном HTML. Если это так, его можно сравнить с тем, чтобы взять тело метода и просто придерживаться того, что вы собираетесь назвать методом. Контрпродуктивен в крайнем случае.
no comprende 08/01/2017
Для реального шокер, посмотрите на источник и таблицы стилей страниц Microsoft и Moodle! Они могут быть длиной в сотни строк. Первоначальная концепция HTML заключалась в том, что она будет работать на устройствах, которые «еще не существуют». И в настоящее время существует так много размеров экрана, что он может быть просто переменной.

AnoE 07/30/2017.

Чтобы они действительно понимали, что вы можете делать только с помощью CSS - only подставляя другой файл CSS - отправляйте их в CSS Zen Garden . С одним и тем же HTML для каждой страницы и заменяется only файл .css, вы получаете абсурдно дикие страницы. От безмятежного маленького невесомости до кубов 3D-прокрутки ...

Затем объясните им, что набор навыков, необходимый для создания HTML, и набор навыков для (особенно экстремальных, таких как) CSS значительно отличаются и что HTML функционирует только как носитель информации.

Еще одним хорошим вариантом было бы установить программу чтения с экрана (для слепых) - есть те, у кого ограниченное бесплатное использование, чтобы показать им, как один и тот же HTML «смотрит», когда произнесется вслух.

Также укажите, что эти инструменты для слабовидящих способны, например, извлекать тексты ссылок и т. Д. Из HTML, если они хорошо структурированы, и это также позволяет перемещаться по странице только с клавиатуры - что может быть полезно, если один Настолько склонна, даже если зрение в порядке.

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


thehayro 07/30/2017.

Чтобы сузить его, я ищу примеры или объяснения того, как научить его явно облегчать студентам стиль своих веб-страниц. Предпочтительно объяснение.

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

Например, вы можете позволить своим ученикам «почувствовать» преимущество разделения стиля на html. Это означает, что они дают им упражнение, где им нужно стилить некоторые элементы (например, цвет фона элемента) в их html. Затем пусть они меняют каждый элемент на другой цвет. Урок должен был дать им понять, что эта задача может быть намного менее трудоемкой, если вы отделите стиль от html. Затем вы можете продемонстрировать, как изменить одну строку в css, которая изменяет весь цвет фона элементов.

4 comments
thesecretmaster♦ 07/30/2017
HI thehayro! Добро пожаловать в учителей информатики !
Puppy 07/30/2017
В качестве альтернативы, они могут генерировать HTML-код через код, как разумный человек, и в этом случае тривиально изменять цвет каждого элемента без отдельных таблиц стилей.
1 thehayro 07/30/2017
Конечно. Это зависит от требований, в которых должна отображаться веб-страница (мобильный / рабочий стол). Но вопрос, насколько я понял, заключался в том, как объяснить, почему и как нужно разделять HTML и CSS.
no comprende 08/01/2017
Когда я изучал CSS, я поставил перед собой задачи создания повторно значимой шахматной доски и канонического трехстолбцового макета страницы с верхним и нижним колонтитулом.

SpiritBH 07/31/2017.

Хорошо спросите себя: почему мы отделяем что-либо в любом виде кода?

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

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

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

В конце концов, разделение CSS от HTML (или любого кода в этом отношении) является ориентированным на развитие; Его не о функционировании создания (лучше) о том, что разработчик имеет более и более легкий контроль над их созданием.

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

1 comments
ItamarG3 07/31/2017
Вы поднимаете некоторые очень интересные моменты. Благодаря! И приветствуем преподавателей информатики

gabe3886 07/31/2017.

Немного другой способ взглянуть на это может DRY введение DRY кода (Do not Repeat Yourself).

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

Чтобы украсть идею иллюстрации из W3 Schools , если вы хотите, скажем, абзацы иметь разные цвета фона, вы можете сделать это следующим образом:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

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

Если бы я сделал это в CSS, я могу сделать следующее:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

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

Помимо этого (поскольку CSS может быть встроен в HTML в теге head), разделение его на файл, и в том числе это означает, что мне не нужно повторять мой (теперь более разумный) CSS в различные файлы, вплоть до структуры папок для каждого Страницы у меня есть. Я включаю CSS-файл в заголовок, и стили вступают в силу. Теперь, если мне нужно внести изменения в цвета или добавить дополнительные стили, я получаю те же преимущества, которые вам не нужны, чтобы дублировать, что у меня было, не используя встроенные стили.

Еще одно преимущество от наличия отдельного файла, вдали от разделенных обязанностей, - это производительность. Браузеры очень хорошо разбираются в кешировании файлов, поэтому, если он должен загрузить один (идеально миниатюрный) CSS-файл для сайта, который он сможет повторно применить, это еще одна вещь для его загрузки для других страниц. Производительность всегда должна быть предметом рассмотрения для людей, особенно с увеличением количества мобильных браузеров. Если на веб-странице много CSS, то источник, естественно, большой. Это занимает больше времени, чтобы загрузить и / или стать пригодным для использования, что может привести к тому, что люди перестанут ждать, становится неприемлемым для них.


ncmathsadist 08/01/2017.

Мы учим, что на веб-странице есть три уровня: структура, внешний вид и поведение. Структура определяется DOM, которая создается с хорошо сформированной разметкой HTML5. Когда мы узнаем о HTML, мы сразу начинаем рисовать дерево документа, чтобы мы могли понять, как элементы на странице связаны друг с другом.

Внешний вид определяется CSS, который обращается к DOM для форматирования и стилизации страницы. Это хранится в отдельном файле, чтобы его можно было разделить с соответствующей группой страниц. HTML обрабатывает специальные ситуации с использованием id или class . Использование этих параметров упрощает обслуживание страниц, поскольку стиль элементов, несущих эти атрибуты, создается в one place в файле CSS.

Третий уровень - это поведение, которое должно появиться в файле JavaScript. JavaScript never должен появляться на странице, за исключением вызовов функций из кода обработки событий. Даже это может быть прикреплено в JS-файле. Удостоверьтесь, что ваши ученики знают о событиях load и onload раньше, поэтому они могут отсрочить вызов кода до тех пор, пока элементы страницы не будут существовать.

Если вы устанавливаете Node, вы можете запускать тесты JS-кода в командной строке и создавать тестовые пакеты для созданных вами функций.

Разделение трех слоев обеспечивает аккуратность вещей и максимизирует повторное использование кода.


user1639154 07/31/2017.

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

Первый для загрузки обычно является внешним листом в начале документа. Таблица стилей, связанная в заголовке документа, будет перечеркнута стилями, встроенными в тело html, а те, которые в свою очередь также будут переопределены стилями, расположенными непосредственно на элементе DOM. Важный тег можно использовать и для изменения этого поведения.

Большинство поместит все свои css в свой собственный файл, потому что его легче поддерживать и не потребует такой работы при обновлении / изменении.

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

5 comments
1 ItamarG3 07/31/2017
Вау. Добро пожаловать в преподавателей компьютерных наук . Это действительно то, что я не рассматривал. Мне бы это понравилось, если бы вы могли добавить несколько примеров или описание, которые показывают это. (Я can написать их сам, но меня больше интересует, что вы можете придумать). Это действительно интересный ответ :)
1 ItamarG3 07/31/2017
Несвязанный: почему бы вам не отправиться в тур ? Я уверен, что вы найдете это интересным.
user1639154 07/31/2017
Я получил это немного неправильно, его внешняя таблица стилей сначала, затем стили документов, а затем и на элемент, мой мозг никогда не был на 100% в понедельник утром. :)
ItamarG3 07/31/2017
прости и забудь ;). Вы можете отредактировать свой ответ. Рядом с вашим ответом есть кнопка edit \ ссылка. Пока вы на нем, хотите ли вы добавить пример, чтобы продемонстрировать, к чему обращается ваш ответ? На самом деле это даст гораздо лучший ответ: D
user1639154 07/31/2017
К сожалению, у меня нет времени прямо сейчас. Я просто хотел упомянуть о наследовании css, так как это важный аспект css.

rackandboneman 08/03/2017.

Сделайте проект, в результате которого получается ДВА совершенно разных представлений одного и того same document , например, версия, которая отлично смотрится на большом мониторе, а другая - отлично подходит для iPhone.

Используя не статическую веб-страницу, а компьютерные, обновляемые документы будут приводить в движение точку дома еще больше, поскольку информация о стиле встраивания в генераторе документов сделает ее заметно более сложной - единственными параметрами, связанными со стилем, будет либо изменение generator документа с помощью Все хлопоты или stylesheet которые именно вы намеревались. Еще лучше: назначьте two группы в отдельных углах комнаты для создания документа и частей таблицы стилей - и отрегулируйте, как спецификации передаются между ними.

4 comments
ItamarG3 08/03/2017
Это невероятно. Вау.
rackandboneman 08/03/2017
Ну, тогда сделайте это правдоподобным.
ItamarG3 08/03/2017
Это невероятно, потому что это решает проблему с обстоятельствами, которые я не могу раскрыть (школьные вещи), но это не exactly касается вопроса ...
1 rackandboneman 08/03/2017
О, и я вмешиваюсь в дискуссию, как не учитель, а профессионал в области ИТ. То, что я описал, - это то, что делаются на практике точно так же, как теория, которую вы хотите преподавать, говорит:

Chris M. 08/02/2017.

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

4 comments
ItamarG3 08/02/2017
Вау. Я не думал об этом. Не могли бы вы немного рассказать о том, как я могу объяснить это в отдельном уроке об использовании стилей CSS?
Chris M. 08/02/2017
Я бы использовал аналогию. Автомобильные инженеры не выбирают цвета автомобилей. Сценаристы обычно не создают костюмы.
ItamarG3 08/02/2017
Понимаю. Возможно, вы должны включить такие аналогии в свой ответ, отредактировав ответ.
1 Buffy 08/03/2017
На самом деле это хуже. В некоторых крупных компаниях с важным присутствием в сети есть команда стандартов, которая сидит над командами контента и макета. Если макет один пиксель от стандарта, вы делаете это. Один пиксель.

thesecretmaster 08/03/2017.

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

  
The Title
This is a super great article

В сравнении с:

  
The Title
This is a super great article

В дополнение к этому примеру без использования классов и идентификаторов вы делаете DOM намного сложнее манипулировать с помощью javascript, и вы не можете использовать псевдоэлементы и некоторые из действительно хороших селекторов CSS, таких как :nth-child() и :first-child , чтобы назвать несколько.


Puppy 07/31/2017.

Я бы полностью не согласился - стиль должен быть сделан непосредственно в HTML.

Основная проблема заключается в том, что стиль даже не удаленно не зависит от структуры HTML. Простое написание стилей в физически отдельном файле не меняет этого. Хорошим примером является поддержка мобильных устройств. Теоретически вы можете создать мобильный файл CSS. Но на самом деле вам, вероятно, нужен совершенно отдельный дизайн пользовательского интерфейса, чтобы создать хороший опыт на мобильном устройстве, а затем создать отдельную структуру HTML для поддержки этого, а затем отдельный набор стилей. «Сделать кнопку одинаковой, но немного меньше» работает только для самых маленьких.

Создание правильного пользовательского интерфейса предполагает создание структуры HTML, которая поддерживает стили, которые вам нужны. Поскольку эти двое на самом деле тесно связаны друг с другом, их размещение в них просто упрощает понимание и все в одном месте.

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

Наличие необработанного CSS чрезвычайно проблематично, поскольку стили полностью случайны и в глобальном масштабе, и их трудно повторно использовать. Вы делаете имя класса под надеждой, что никто его не использовал. Вы вставляете свои собственные классы внутри этого элемента, чтобы немного попытаться решить эту проблему, но теперь вы не можете повторно использовать эти классы в других местах, так как они не находятся в правильной структуре DOM. Затем вы узнаете, что какой-то случайный чувак в какой-то совершенно отдельной части вашей страницы использовал ваш класс, не предупредив вас, и теперь вы сломали его, изменив свои стили. И удачи, получая проверку типов, поддержку IDE и т. Д. Также сложно создать, например, параметризованные классы или глобально применять замены, например display: flex с display: flex и display: -webkit-flex для iOS.

Правильный способ справиться со стилями - иметь дело с ними, как с любым другим кодом, инкапсулировать их в некоторые функции.

5 comments
1 thesecretmaster♦ 07/31/2017
Привет щенок, добро пожаловать в преподавателей информатики ! Если вы хотите встретиться с другим щенком, вы можете сказать привет Баффи , который является бульдогом, в чате . Это интересный ответ, спасибо, что разделили свою точку зрения здесь!
2 richard 07/31/2017
Хотя я не согласен со всем, что вы говорите. Я вижу вашу точку зрения. Особенно последняя строка (я думаю, вы должны расширить это). Покажите нам, как вы думаете, что это нужно сделать. Даже если мы не согласны на 100%, мы можем чему-то научиться.
no comprende 08/01/2017
Ваш ответ напоминает мне о времени, когда я задал вопрос, и кто-то сказал: «Если вы читаете мессу на латыни». Есть много «правильных» способов сделать что-то, и с вашей точки зрения, с созданным HTML, в действительности это не имеет никакого значения. Но большинство инструкторов не обучают сгенерированному HTML, как и большинство программистов не учатся писать компиляторы. Слой, который мы добавляем, чтобы упростить обслуживание файлов HTML, излишне сбрасывает HTML. Мне тоже нравится генерировать вещи, но я в огромном меньшинстве. Может быть, мы когда-нибудь поговорим о доменах?
Puppy 08/01/2017
Инструкторы, которые не учат сгенерированный HTML, не учат полезному HTML.
ItamarG3 08/02/2017
@Puppy Это так?

Related questions

Hot questions

Language

Popular Tags