• 29 сентября 2020
Как научиться использовать CSS. Советы новичку

У многих опытных программистов нередко возникают трудности, когда дело доходит до оформления стилей с помощью таблиц CSS. Что уж говорить нам – новичкам. Да, CSS – это своеобразный инструмент, мало похожий на типичные язык программирования. Соответственно и мыслить нужно по-другому. А как именно, разберем в этой статье.
Чтобы успешно начать изучать и использовать таблицы стилей, важно понять, что они делают. По своей сути, загружая таблицу, браузер начинает узнавать, какой элемент страницы как должен быть оформлен. И в соответствии с прочтенными CSS правилами, браузер формирует веб-страницу такой, как она описана в CCS файле.
А теперь давайте разберем некоторые отдельные моменты, понимание которых позволит избежать лишних трудностей при изучении стилевых таблиц.
Шаблонность кода. Весь CSS код по своей сути все время повторяется, создается впечатление его шаблонности. Так и есть. Вот основная конструкция, применяемая в CSS:
Селектор {
Свойство 1: значение 1;
Свойство 2: значение 2;
Свойство 3: значение 3;
Свойство 4: значение 4;
}

Селектор – это ссылка на элемент, к которому применяются CSS свойства, заключенные в фигурных скобках. Селектором может быть название элемента (span, div и т.д.), имя класса элементов (.events, .wrappers и т.д.) и наконец идентификатор элемента (#link, #string и т.д.).

Не стоит заучивать CSS свойства. Этого не стоит делать по причине того, что в голове может наступить каша. Программиста хорошим делает не объем информации в голове, а умение ее использовать. Поэтому сфокусируйтесь на понимании того, что делает конкретное свойство, которое используется в данный момент. Проанализируйте, какие значения может принимать данное CSS свойство, и в каких единицах эти значения измеряются. К слову сказать, некоторые свойства (такие, как text-align, display, font-weight) имеют вместо числовых параметров служебные слова. Например:

div {
text-align: center;
display: inline-block;
font-weight: bold;
}

Однако, существуют и такие свойства, которые принимают числовые параметры. В зависимости от выбранного свойства, будут и разные единицы измерения. Но стоит понимать, что один и тот же параметр можно измерять в разных единицах. В следующем примере можно увидеть, что ширина (width) и высота (height) могут быть измерены в разных единицах. В данном примере это пиксели (px) и проценты (%). В случае с процентами, то величина высчитывается от значения родительского элемента. Т.е. если речь идет о высоте, то данный div-блок займет 30% высоты родительского элемента (элемента, в который он был вложен).

div {
width :200px;
height:30%;
font-size:20pt;
}

Учитывайте типы элементов. В CSS бывает так, что одно и то-же свойство для каких то элементов действует, а для каких-то нет. Например, задать ширину и высоту можно только для блочных или блочно-строчных элементов. К первому типу относятся в первую очередь элементы div. Если попытаться задать высоту или ширину элементу span, то можно очень долго думать, почему же элемент не принимает введенные значения. Все дело в том, что span – это строчный элемент, и он не имеет таких свойств, как высота и ширина. По умолчанию его высота равняется высоте вводимых символов, а ширина – длине строки, заключенной внутри элемента. Но CSS можно и обмануть. Если необходимо наделить строчный элемент свойствами блочного, то достаточно применить свойство display (а значение: block.) Если же нужно комбинировать свойства и блока и строки, используйте inline-block в качестве параметра.

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

Нашли ошибку на сайте?
Заполните форму обратной связи и напишите свой вопрос