На днях меня спросили, почему мне нравятся каскадные таблицы стилей (CSS) и что делает CSS таким замечательным. Вот мой ответ на эти вопросы.
Святой Грааль CSS — это полное отделение содержимого веб-страницы от инструкций, управляющих ее внешним видом. Если это будет достигнуто, различным устройствам будет намного проще правильно отображать веб-страницу. Например, одна и та же страница будет корректно отображаться в стандартном веб-браузере (Internet Explorer, FireFox, Opera, Netscape и т. д.), на устройствах, используемых людьми с ограниченными возможностями, на мобильных телефонах и в еще не разработанных интерфейсах. Дизайнеру веб-сайта также не придется создавать отдельные страницы для некоторых из этих устройств. Однако реальность совсем другая, и здесь, в реальном мире, CSS еще не делает всех этих вещей. Но у него есть достаточно положительных преимуществ, чтобы узнать, как он работает, и включить его в свои веб-страницы.
Существуют разные способы управления тем, как все выглядит на веб-странице. Например, цвет, размер и шрифт, используемые для заголовка, или цвет, размер и шрифт для абзаца текста можно определить с помощью встроенных стилей и тегов. Встроенное означает, что эти команды форматирования для управления цветом, размером и шрифтом смешаны с содержимым. Это значительно затрудняет чтение и изменение исходного кода страницы, когда вы хотите изменить его или устранить проблему. Кроме того, поскольку вы снова и снова повторяете одни и те же команды на странице, размер файла на странице становится все больше и больше и становится менее эффективным (медленнее) для тех, кто просматривает ваш сайт.
CSS не повторяется по всей странице. CSS можно определить в заголовке HTML-страницы или поместить в отдельный файл, на который можно ссылаться со страницы HTML, или даже сделать и то, и другое. CSS состоит из определений того, как компонент страницы должен выглядеть на странице или устройстве. Например, вы можете определить, что заголовок должен быть красным, 26 пунктов, текст с выравниванием по правому краю, а абзац должен быть черным, 10 пунктов, текст с выравниванием по левому краю. Любые обычные теги абзацев HTML или теги заголовков будут использовать эти определения при отображении.
Таким образом можно определить практически все обычные объекты HTML; цвет фона, фоновое изображение, положение фонового изображения, таблицы, ячейки, изображения, элементы div и т. д. Это убирает беспорядок из вашего HTML-кода и значительно облегчает его чтение. Но подождите, это еще не все! Если у вас есть веб-сайт с более чем одной страницей, и вы используете CSS и помещаете все свои определения CSS в отдельный файл, у вас есть только одно место, где можно изменить внешний вид всех страниц вашего сайта. Если у вас 50-страничный сайт и вы узнали, что размер вашего текста слишком мал или вы использовали неправильный цвет, чтобы максимизировать продажи: вместо того, чтобы редактировать 50 страниц и менять определение каждого тега абзаца, вы просто редактируете CSS. файл и все готово!
Вы можете спросить, как заставить один абзац или набор абзацев выглядеть иначе, чем по умолчанию? Один из способов — определить класс для этого элемента. Если у вас есть правый столбец, в котором вы показываете рекламу, в вашем CSS вы должны создать класс и дать ему имя, например «.rcol». Вы должны определить необходимые элементы для класса, которым хотите управлять (теги абзацев или заголовков). «.rcol p» будет использоваться для управления отображением тега абзаца. Чтобы связать класс с объектом, просто добавьте «class=rcol» к тегу абзаца или тегу таблицы, если он находится в таблице, или тегу div, если он находится в элементе div и т. д. Именно здесь используется термин «каскадирование» в CSS. получает свое: определения по умолчанию каскадно передаются в класс до тех пор, пока класс не содержит чего-то, что переопределяет значение по умолчанию. Это означает, что в нашем примере текст, отображаемый в теге абзаца, для класса rcol выглядит по-другому. Однако, поскольку это единственное, что мы определили для rcol, все остальное будет выглядеть так же, как и остальная часть страницы.
Вы также можете определить размер и расположение объектов в CSS. Это то место, где мы довольно сильно ударились о реальный мир CSS. Не все браузеры одинаково поддерживают команды размера и положения. Это приводит к хакам, которые определяют позицию, а затем используют известную команду, например, чтобы заставить Internet Explorer выйти из CSS, после этой строки вы используете команду позиции, которую понимает, например, Netscape. CSS использует последнее определение объекта, поэтому эту технику можно использовать для «обмануть» или «взломать».
CSS стал работать в большем количестве браузеров, чем обычно. Я не рекомендую этого делать. Одна из причин в том, что это беспорядочно и легко забыть, почему вы что-то сделали. Другая причина заключается в том, что по мере обновления браузеров или подключения новых устройств они могут не следовать этим неписаным и неподдерживаемым хакам, и ваши страницы могут оказаться испорченными. Чтобы обойти эту проблему, я обычно использую CSS настолько, насколько это возможно, а затем использую таблицы и встроенные определения для управления позиционированием и размером. Некоторые люди пойдут на все, чтобы использовать CSS для всего, даже заменив все таблицы, но здесь, в реальном мире, вам нужно создать страницу, которая будет функционировать и иметь форму, которую можно будет надежно использовать на как можно большем количестве платформ.
Не все пакеты программного обеспечения для веб-сайтов, такие как Microsoft Front Page, Dreamweaver или Adobe GoLive и т. д., полностью поддерживают CSS.
Вам придется внести код вручную. Не волнуйтесь, это не так уж сложно. У меня есть онлайн-курс, который может научить вас этому, просто перейдите по ссылке в конце этой статьи.
Потратьте время на изучение и понимание CSS. Внедрите это на свои веб-страницы. Это будет время, проведенное с пользой.
Изучение каскадных таблиц стилей (CSS) улучшает веб-страницы
Каскадные таблицы стилей (CSS) играют решающую роль в создании визуально привлекательных и удобных для пользователя веб-страниц. CSS позволяет веб-разработчикам отделять содержимое веб-страницы от ее представления, предоставляя многочисленные преимущества и упрощая создание согласованного и профессионально выглядящего дизайна на разных устройствах и платформах. Хотя CSS, возможно, еще не выполняет свою задачу полного разделения, он предлагает достаточно преимуществ, чтобы его стоило изучить и включить в свой репертуар веб-разработки.
Одним из основных преимуществ CSS является его способность централизовать и упростить управление внешним видом веб-страницы. Вместо того, чтобы загромождать HTML-код встроенными стилями и тегами, CSS позволяет разработчикам определять инструкции по стилизации в отдельном файле или в заголовке HTML-страницы. Такое разделение повышает читаемость и удобство обслуживания кода, поскольку команды форматирования не смешиваются с содержимым. Уменьшая избыточность кода, CSS также оптимизирует размеры файлов, что приводит к ускорению загрузки веб-страниц.
CSS предоставляет широкий спектр вариантов стилизации для различных элементов HTML, включая заголовки, абзацы, таблицы, изображения и элементы div. С помощью CSS вы можете, среди прочего, определить такие свойства, как цвет, размер, шрифт, цвет фона и положение фонового изображения. Объединив эти определения в отдельном файле CSS, вы получаете возможность легко изменять внешний вид всего веб-сайта, внося изменения в одном месте. Эта эффективность особенно ценна для крупных веб-сайтов с несколькими страницами, поскольку она экономит время и усилия, которые в противном случае были бы потрачены на обновление каждой отдельной страницы вручную.
Чтобы настроить определенные элементы иначе, чем стили по умолчанию, CSS предлагает концепцию классов. Определив класс в CSS, вы можете указать уникальные стили для абзацев, заголовков или других тегов HTML. Например, вы можете создать класс «.rcol» для управления внешним видом абзацев в правом столбце. Чтобы связать класс с нужными элементами, вы просто добавляете атрибут «class=rcol» к соответствующим тегам HTML. Каскадная природа CSS гарантирует, что стили по умолчанию применяются, если они не переопределены стилями, специфичными для класса. Этот подход дает разработчикам возможность добиться целевого стиля, сохраняя при этом единообразие во всей остальной части страницы.
CSS также позволяет управлять размером и расположением объектов на веб-странице. Однако важно отметить, что разные браузеры могут по-разному интерпретировать команды размера и положения, что приводит к проблемам совместимости. Хотя некоторые разработчики прибегают к хакам и обходным путям для достижения единообразного рендеринга в браузерах, обычно рекомендуется как можно больше использовать CSS и использовать таблицы и встроенные определения для точного управления, когда это необходимо. Стремление к кроссбраузерной совместимости и адаптивности к различным платформам должно быть приоритетом при реальной реализации CSS.
Хотя популярные пакеты программного обеспечения для веб-разработки, такие как Microsoft Front Page, Dreamweaver или Adobe GoLive, предлагают некоторый уровень поддержки CSS, для достижения желаемых результатов часто необходимо вручную кодировать CSS. Освоение CSS от веб-разработчика может потребовать некоторых начальных усилий, но преимущества намного перевешивают время обучения. Освоив CSS, вы сможете создавать визуально привлекательные, эффективные и адаптируемые веб-страницы, которыми смогут пользоваться пользователи на разных устройствах и платформах.
В заключение, изучение каскадных таблиц стилей (CSS) необходимо для создания лучших веб-страниц. CSS обеспечивает разделение контента и представления, упрощает управление внешним видом веб-страницы, уменьшает избыточность кода и облегчает легкое и эффективное изменение стилей на всем веб-сайте. Используя классы и каскадную природу CSS, разработчики могут добиться целевого стиля, сохраняя при этом общую согласованность. Несмотря на существование проблем, таких как совместимость браузеров, использование CSS и его принципов в конечном итоге приведет к созданию визуально привлекательных и удобных для пользователя веб-страниц, которые можно будет адаптировать к различным платформам. Потратьте время на изучение и понимание CSS, внедрите его в свои проекты веб-разработки и пожинайте плоды хорошо продуманных и привлекательных веб-сайтов.
-
Подключитесь К Wi-Fi
19 Oct, 24 -
Типы Струйных Картриджей Lexmark
19 Oct, 24 -
Спутниковый Телефон
19 Oct, 24 -
Между Windows И Unix-Хостингом
19 Oct, 24 -
Dc Ruby На Рельса?
19 Oct, 24
