10 рекомендации для тех, кто начинает изучать CSS

10 рекомендации для тех, кто начинает изучать CSS

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

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

Базовые функции

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

1. Использование CSS

Когда дело доходит до рендеринга стилей CSS, браузеры, такие как Firefox и Internet Explorer, имеют разные способы их обработки. reset.css сбрасывает все основные стили, поэтому вы начинаете с настоящих пустых новых таблиц стилей.

2. Попробуйте Shorthand CSS

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

Вместо того, чтобы создавать CSS так:

header {

      background-color: #fff;

      background-image: url(image.gif);

      background-repeat: no-repeat;

      background-position: top left;

    }

Он может быть сокращен следующим образом:

header {

      background: #fff url(image.gif) no-repeat top left

    }

3. Различайте ID и Class

Это то самое, что запутывает почти всех новичков. Как правило, ID представлен знаком “#”, а Class – точкой. Основное различие между ID и классом заключается в том, что ID используется в уникальном стиле, в то время как класс может повторяться и использоваться более одного раза.

4. Забудьте про <table>, попробуйте <div>

Одним из самых больших преимуществ CSS является использование <div> для достижения полной гибкости с точки зрения стиля. <div> не похож на <table>, где содержимое ‘заблокировано’ в ячейке <td>. Можно с уверенностью сказать, что большинство макетов <table> достижимы с использованием <div> и правильного стиля, ну, может быть, за исключением массивного табличного содержимого.

5. Проверка инструментов отладки CSS

Получить мгновенный предварительный просмотр макета всегда удобно. Это помогает понять, какие изменения нужно внести и что нужно улучшить. Ознакомьтесь с этими бесплатными инструментами отладки CSS для различных браузеров: Firefox Web Developer, Firebug и Internet Explorer developer Toolbar.

6. Бесполезные селекторы – это то, чего стоит избегать

Вы можете приложить меньше усилий и написать более короткий код. Каким образом? Объяснения действительно просты: <li> может существовать только внутри <ol> или <ul>, в то же время <td> также будет работать только внутри <table> и <tr>. Как говорится, нет никакой необходимости вставлять их обратно.

7. Попробуйте изображения вместо текста

Вы можете легко заменить заголовок на основе заголовка изображением, text-indent:-9999px; уберет ваш заголовок с экрана и в то же время background: {…} заменит текстовый заголовок изображением с фиксированной высотой и шириной.

8. Команда !important

С пометкой !important буквально каждый стиль будет использоваться независимо от того, с правилом перезаписи под ним или без него. Но вы должны отметить, что существует высокая вероятность того, что он не будет работать в Internet Explorer.

9. <link> или CSS @import

Вы можете вызвать внешний CSS – файл двумя различными способами – с помощью <link> и с помощью @import. Эти два метода имеют почти одинаковые результаты, однако, если вы все еще не уверены, какой из них использовать, вот более подробная информация о них обоих.

10. Чистота кода CSS – это ваш путь к успеху

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


.

  • February 23, 2021