Уроки css


или изучаем уроки CSS для чайников самостоятельно

Вы стремитесь работать только на себя, иметь собственный бизнес в сети интернет? Хотите создать интернет-сайт, который будет приносить вам деньги? — Хорошо! CSS уроки помогут сделать сайт привлекательным для ваших потенциальных клиентов.

Каскадные таблицы стилей (Cascading Style Sheets) — это технология управления дизайном web-страницы, которая существенно увеличивает диапазон возможностей описания внешнего вида страницы и упрощает сам процесс редактирования и форматирования ее содержимого.

Разработкой и стандартизацией CSS занимается W3C (World Wide Web Consortium) с 1996 года, когда была принята первая версия. Вторая созданна в 1998 году, на базе первой с некоторыми доработками. В настоящее время консорциумом рекомендована версия CSS 3 → и материал соответствует новой 3-й версии CSS, которая еще дополняется.

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

  • Уроки CSS – это современные уроки манипулирования элементами веб-страницы.
  • Уроки CSS – вторая ступень на пути освоения разработки интернет-сайтов.
  • Уроки CSS должны быть выучены прежде, чем уроки дизайна с использованием Фотошоп.

Вся прелесть использования Каскадных таблиц стилей вам откроется в процессе обучения. Вот пример: представьте на минуточку, что ваш сайт содержит пару сотен страниц и, в очередной раз, вы решили сменить фон, цвет текста и размер заголовков каждого документа… Используя CSS, это можно сделать за несколько секунд, изменив значения соответствующих атрибутов во внешнем .css файле. Ответ на вопрос: Как это сделать? – Ищите в последующих уроках CSS самоучителя.

Прежде, чем начать изучать уроки CSS, получите базовый уровень знаний в HTML или XHTML.

Если вы планируете стать достойным web-мастером и создавать приличные проекты — пользуйтесь текстовыми редакторами с подсветкой кода и проверкой синтаксиса — не позволяйте графическим делать за вас кропотливую, но очень важную работу — написание кода.

Новые уроки CSS для чайников | Пример CSS кода

Ниже показан знакомый нам из HTML код неупорядоченного списка:

<ul>
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
<li>Toshiba</li>
</ul>

Результат:

  • Sony
  • Asus
  • Dell
  • Toshiba

Внедрим Каскадные таблицы стилей:

<title>Современные уроки CSS</title>
<style type="text/css">
ul li {list-style:none; display:inline; background-color:#99ccff; padding:2px}
</style>

</head>
<body>
<ul>
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
<li>Toshiba</li>
</ul>
</body>

Результат:

Уроки CSS - Пример

Посмотреть в новом окне: СЃРїРёСЃРѕРє, отформатированный РїСЂРё помощи CSS

Ничего особенного, но если над кодом немного поработать, можно получить горизонтальное меню — подробности в 17-ом СѓСЂРѕРєРµ.

РЈСЂРѕРєРё HTML и СѓСЂРѕРєРё CSS являются основой сайтостроения. Отделив достаточно времени на их изучение, вы научитесь создавать свои первые web-страницы. Уроки Photoshop дадут необходимые знания в области web-дизайна.

Дата публикации: Октябрь 2009 | Обновление: Август 2018

Уроки CSS для начинающих  


Уроки css РЈСЂРѕРєРё CSS для чайников | РЈСЂРѕРє 1. CSS подключение

ab-w.net

css верстка

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

1. Сделайте css код доступным для чтения

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

При написании CSS, большинство разработчиков, относятся к одной из двух групп.


Группа 1: Все на одной строке

Группа 2: Каждый стиль получает свою собственную строчку

Обе эти практики являются вполне приемлемыми, хотя в целом считается, что вторая группа презирает первую! Просто помните — выбирайте метод, который выглядит лучше ДЛЯ ВАС. Это все, что имеет значение.

2. Держите свой css код в соответствии

Убедитесь, что CSS является последовательным. Вы должны начать разрабатывать собственный «суб-язык» CSS, что позволяет быстро давать имена. Есть определенные классы, которые я создаю почти в каждой теме, и использую то же имя каждый раз, при создании новой работы. Я, например, использую » .caption-right» Float изображения, которые содержат подпись с правой стороны.

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

3. Начните с Framework

Некоторые дизайн — пуристы, решив поиздеваться, начали использовать Framework CSS в каждом дизайне, но я считаю, что если кто-то уже создал инструмент, который ускоряет производство, то зачем изобретать колесо? Я знаю, Framework, не должны использоваться в каждом конкретном случае, но в большинстве случаев они могут помочь.

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


css верстка

Я не согласен. CSS Framework — фантастический инструмент… для тех, кто умеет им пользоваться.
Это не вопрос изобретения колеса, а скорее вопрос понимания, как работает колесо.

Если вы только знакомитесь с CSS, я лично рекомендую, чтобы вы оставались в стороне от этих Framework по меньшей мере год. В противном случае, вы будете только путать себя. Учиться CSS … затем срезать углы!

4. Используйте Сброс

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

MeyerWeb является популярным сбросом вместе с разработчиком сбросов Yahoo. Или вы всегда можете создать собственный сброс.

5. Организуйте стиль с нисходящей структурой

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


Не забывайте комментировать каждый раздел!

6. Смешивайте элементы

Элементы стиля иногда имеют одинаковые свойства. Вместо переписывания предыдущего кода, почему бы не объединить их? Например, ваш H1, H2 и Н3 элементы имеют одни и те же шрифт и цвет:

Мы могли бы добавить уникальные характеристики каждому из этих заголовков стилями, если мы хотим (т.е. h1 { size: 2.1em}) в конце таблицы стилей.

7. Создайте сначала HTML код макета

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

8. Используйте нескольких классов

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

Вы можете добавить сколько угодно классов (разделенных пробелами) в любой декларации.

Будьте очень осторожны при использовании имен классов «right» и «left». Я буду их использовать, но только для таких вещей, как блог. Как же так? Давайте представим, что дальше вы решите, что лучше видеть поле всплывающим слева. В этом случае, вам придется вернуться на HTML и изменить имя класса — все для того, чтобы изменить дизайн на этой странице. Это бессмысленно. Помните — HTML для разметки и содержания. CSS — для оформления.


Если вам необходимо вернуться к HTML, чтобы изменить дизайн на этой странице, то Вы делаете ошибку!

9. Используйте правильный тип документа

Декларация типа документа (doctype) имеет значение в вопросах наличия или отсутствия разметки и CSS. В самом деле, весь внешний вид вашего сайта может сильно измениться в зависимости от DOCTYPE, который вы заявляете.

Узнайте больше о том, какие типы документа используются на List Apart.

css верстка

10. Используйте сокращения

Вы можете уменьшить ваш код с помощью Значительных сокращений. Для таких элементов, как padding, margin, font и некоторых других, вы можете сочетать стили в одной строке. Например, Div этих стилей:

Вы можете комбинировать эти стили в одной строке, например так:

Если вам нужна дополнительная помощь, вот всеобъемлющее руководство по свойствам CSS сокращений.

11. Оставляйте Ваши комментарии в CSS коде.

Как в любом другом языке, это замечательная идея комментировать свой код в секции. Чтобы добавить комментарий, просто добавьте / * комментарий, и * /, чтобы закрыть его, вот так:


12. Понимайте разницу между блочными и строчными элементами

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

Вот списки элементов, которые могут быть строчными или блочными:

И блочные элементы:

13. Отсортируйте свойства в алфавитном порядке.

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

Э-эх … жертвовать скоростью для лучшей читабельности? Я бы не стал- но решайте сами!

14. Используйте CSS Компрессоры

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

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

css верстка

15. Исползуйте классы Generic

Вы обнаружите, что существуют определенные стили, которые Вы применяете снова и снова. Вместо того, чтобы добавлять особый стиль для каждого ID, Вы можете создать общие классы и добавить их идентификаторы или другие классы CSS (с использованием совета № 8).


Например, я считаю, что я использую Float: right и Float:left снова и снова в моей конструкции. Поэтому я просто добавляю классы .left и .right в мой стиль, и ссылаюсь на них в элементах.

Таким образом, вам не нужно постоянно добавлять «float: left», чтобы все элементы, которые необходимы, всплыли.

16. Используйте «Margin: 0 auto» для центрирования

Многие новички в CSS не могут понять, почему вы не можете просто использовать Float: center для достижения центра влияния на блочные элементы. Если бы все было так просто! К сожалению, вы должны будете использовать

для центровки Div-а абзацев и других элементов в макете.

17. Не всегда оборачивайте элементы в DIV

Когда вы начинаете, есть соблазн обернуть элемент в Div, создать для него стиль

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

Тогда вы сможете легко добавлять стиле h1, вместо родительского Div.

18. Используйте Firebug

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


css верстка

19. Меньше Hack

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

20. Умеренно используйте абсолютное позиционирование

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

21. Используйте Text-transform

Text-transform является весьма полезным свойством-CSS, что помогает «стандартизированно» форматировать текст на вашем сайте. Например, Вы желаете создать некоторые заголовки, которые прописываются только строчными буквами. Просто добавьте text-transform в заголовок стиля вот так:

Теперь все буквы в заголовке будут строчными по умолчанию. text-transform позволяет вам изменить ваш текст (первая буква заглавной, все буквы заглавной или строчными буквами).

22. Не используйте отрицательные поля, чтобы скрыть h1

Часто люди используют свое изображение для текста заголовка, а затем используют display:none или отрицательный margin для выравниванияh1 на странице. Matt Cutts, глава Webspam команды Google, официально заявил, что это плохая идея, Так как Google может подумать, что это спам.

г-Cutts прямо просит избегать скрытия текста Вашего логотипа из CSS. Просто используйте Alt тега. Хотя многие утверждают, что вы все еще можете использовать CSS, чтобы скрыть тег H1 пока h1 тоже, что и текст логотипа, я предпочитаю подстраховаться на всякий случай.

23. Проверьте Ваш CSS и XHTML

Проверка Вашего CSS и XHTML поможет вам быстро найти место ошибки в коде. Если вы работаете над дизайном, и почему-то некоторые вещи не выглядят так, как нужно, попробуйте HTML и CSS валидатор и посмотрите, какие ошибки всплывают. Как правило, вы обнаружите, что вы забыли закрыть Div где-нибудь или пропустили запятую в свойстве CSS.

24. Ems против Пикселей

Всегда были упорные обсуждения, будет ли лучше использовать пиксели (px) или емы (em) при определении размеров шрифта. Пиксели — более статичный способ определения размеров шрифта, емы более масштабируемое, с различными размерами. С появлением различных типов просмотра веб-страниц (ноутбук, мобильный и т.д.), емы, все чаще становятся по умолчанию для измерения размера шрифта, поскольку они допускают наибольшую гибкость формы. Вы можете узнать больше о том, почему вы должны использовать em для размеров шрифта в этой ветке форума вдумчиво. About.com также имеет большую статью о различиях между измерениями размеров.

25. Не стоит недооценивать Список

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

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

Вы часто будете видеть навигационные ссылки так:

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

26. Избегайте дополнительных Селекторов

Можно легко добавить дополнительные неосознанные селекторы в CSS, что мешает нашим стилям. Один общий пример добавления дополнительных селекторов со списками.

В этом случае, просто .someclass li работали бы нормально.

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

27. Добавьте Поля и отступы для всего

Различные браузеры представляют элементы по-разному. IE делает определенные элементы иначе, чем Firefox. IE 6 представляет элементы иначе, чем IE 7 и IE 8. Хотя браузеры начинают более четко соблюдать стандарты W3C, они все еще не совершенны.

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

Теперь для всех элементов padding и margin нуль, если не определен другой стиль в таблице стилей.

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

28. Когда все готово, попробуйте объектно-ориентировать CSS

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

Если вы новичок в CSS / XHTML играх, OOCSS может быть немного сложным в начале. Но необходимо больше понять принципы для объектно-ориентированного программирования в целом.

29. Используйте несколько таблиц стилей

В зависимости от сложности конструкции и размера участка, иногда проще сделать несколько меньших CSS-файлов вместо одного гигантского.

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

Однако, будьте уверены, что рассмотрение вопроса о числе запросов HTTP, предпринимаются. Многие дизайнеры предпочитают развивать несколько стилей, а затем объединить их в один файл. Это позволяет сократить количество запросов HTTP до одного. Кроме того, весь файл будет храниться в кэше на компьютере пользователя.

30. Проверьте, Закрыты ли Элементы перед началом отладки

Если вы заметили, что ваш проект выглядит немного шатким, есть вероятность, что это потому, что вы забыли закрыть тег

webformyself.com

Теория и практика

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

Как вы заметили файл со стилями подключается с помощью тега <link>, который находится между тегами <head></head>. Атрибут rel="stylesheet" определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href. Атрибут href="style.css" определяет где находится файл с таблицей стилей. Ну и атрибут type="text/css" определяет тип данных.

Также в той же директории с html страницей создайте файл с расширением CSS. Рекомендую также для редактирования CSS использовать редактор Notepad++. Скачать его можно по ссылке Скачать Notepad++

Создайте эти два файла. Они будут необходимы для следующих уроков. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.

Больше практикуйтесь!

Понравилась статья — расскажи друзьям! 🙂

www.sitehere.ru

  • Главная»
  • Уроки»
  • CSS учебник, бесплатные уроки CSS для начинающих

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

  • Уроки css

    Забавные эффекты для букв

    Небольшой эффект с интерактивной анимацией букв.

  • Уроки css

    Реализация забавных подсказок

    Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

  • Уроки css

    Анимированные буквы

    Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

  • Уроки css

    Солнцезащитные очки от первого лица

    Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

  • Уроки css

    Раскрывающаяся навигация

    Экспериментальный скрипт раскрывающейся навигации.

  • Уроки css

    Анимация фона при прокрутке страницы

    Анимируем SVG фигуры при прокрутке страницы.

  • Уроки css

    Пример 3D помещения выставки

    Экспериментальная 3D проекция помещения галереи.

ruseller.com


Что такое CSS?

Как вы знаете, при создании сайта мы формируем его содержимое при помощи языка гипертекстовой разметки — HTML(Hypretext Markup Language). С помощью него мы создаем навигационные блоки, наполняем  веб-страницу текстовым, аудио/видео-контентом. В общем, создаем структуру сайта.

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

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

Наглядный пример

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

что-будем-рисовать
Содержание будущей картины

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

пейзаж-финал
Итоговая картина

Подобная ситуация обстоит с HTML, при помощи которого мы формируем содержание веб-страницы.

сайт-на-голом-html
Сайт на голом HTML, без CSS

 

 

Далее, при помощи CSS мы определяем цвета, размеры и расположение элементов на веб-странице, то есть занимаемся внешним оформлением сайта.

сайт-с-подключенным-CSS-файлом
Тот же сайт с подключенными таблицами стилей

Для большей наглядности, давайте перейдем на какой-нибудь веб-сайт, например, facebook.com. Следующим шагом нам потребуется установить расширение для браузера под названием WEbDeveloper. Я его уже установил, ну а вам будет достаточно ввести в поисковике фразу WEbDeveloper, перейти по ссылке и в открывшемся окне кликнуть по кнопке «Установить».

У меня это расширение установлено и управляется при помощи иконки с шестеренкой в правой верхней части экрана. Я предлагаю на сайте faceboook.com отключить таблицы стилей и посмотреть только на ее содержимое. Для этого мы переходим в раздел CSS и нажимаем на Disable All Styles. Стили отключаются и мы видим как невзрачно выглядит содержимое данной веб-страницы без оформления.

сайт-без-таблицы-стилей
Внешний вид социальной сети без подключенных CSS файлов

То есть сейчас мы видим сайт на голом HTML. Чтобы включить css файлы этой страницы мы возвращаемся к WEbDeveloper и снимаем галочку с Disable All Styles.

Таблица стилей снова подключилась и мы видим содержимое веб-страницы с оформлением.

сайт-с-таблицей-стилей
Соц. сеть с подключенными CSS файлами

Как работает CSS?

Все правила оформления сайта хранятся в файле с расширением css, который в свою очередь загружается на веб-страницу через тег <link>.

Во время загрузки html страницы, через тег <link> загружается и CSS файл, после чего браузер начинает его обработку и сайт отображается согласно правилам, заданным в этом файле. В нем описаны свойства отображения элементов веб-страницы.

Например, через селектор ‘p’ мы задаем тип, размер и цвета шрифтов в абзацах. Для настройки шрифтов заголовка первого уровня мы используем селектор ‘h1’.

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

Зачем изучать CSS?

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

С ее актуализацией многие теги HTML 4 уже не используются. В основном это теги, которые отвечали за оформление веб-страниц. И здесь нет ничего удивительного, ведь за это теперь уже отвечают CSS свойства. Если вы уже владеете азами HTML, следующим логическим шагом будет изучение CSS. Это тот этап, который не получится перепрыгнуть, если вы хотите научиться верстке сайтов. Тем более что это не займет много времени.

Плюсы CSS

  • С использованием CSS стилей, код HTML значительно сокращается. Порой в несколько раз. Это положительно влияет на скорость загрузки сайта, что в свою очередь облегчает его продвижение в поисковых системах;
  • При обновлении дизайна сайта, больше нет необходимости править каждый тег отдельно на всех веб-страницах. Достаточно изменить пару строк в таблице стилей;
  • CSS открывает перед вами широкие возможности в оформлении и разметке ваших сайтов;
  • Отпадает необходимость использовать устаревшие теги. Многие поисковики не любят их, и использование устаревших тегов считается моветоном;
  • Используя CSS вы идете в ногу с временем.

site4business.net


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.