Основы работы с CSS для начинающих. Урок 1



Мы начали две новых рубрики об основах работы с html и css. Их можно изучать по отдельности, но нужно не забывать, что они взаимосвязаны и дополняют друг друга.

Напомним, для создания  интернет-страниц чаще всего используется два языка — html и css. Первый отвечает за структуру, а второй за оформление и внешний вид.

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

Синтаксис css

Перейдем к сути.

Все свойства через css задаются следующим образом:

«свойство:значение;»

Вот пример обычного кода с использованием css, чтобы задать тексту красный цвет:

<p style=»color: red»> — где style — это атрибут, а вот color — свойство, red — значение.

Так можно задавать свойства только вручную для каждого отдельного кусочка текста, каждый раз настраивая всё заново.

Но, подключать стили можно и другими способами.

Например, с помощью классов.

Селекторы и классы в css

Сейчас объясним. Всё дело в том, что при написании стилей используются так называемые «селекторы».

То есть, пишется определенный набор свойств и их значений, которые должны быть применимы к конкретному участку в тексте, например, к заголовкам. В этом случае, весь этот набор берется в специальные фигурные скобки ({}), а перед ними ставиться соответствующий селектор. Если говорить об заголовках, это может быть h1.

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

Пример, тот же красный цвет для всех абзацев можно задать так:

p { color: #FF0000; } — p — селектор, color — свойство, #FF0000- значение.

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

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

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

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

<p class=»first-subparagraph»>, а затем создаете .first-subparagraph { color: #FF0000; }.

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

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

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

Свойства и значения стилей

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

Здесь нужно понять одно — их очень уж много.

И если со свойствами еще более-менее понятно, для тех знает английский язык (они произошли от него), то их значения бывают самыми разными.

Условно значения в css можно поделить на несколько типов в зависимости от использования букв и цифр.

Например, только в нашей статье мы привела уже два из самых распространенных вариантов значений: буквенный — словами («red» — тут опять же всё завязано на английский язык), и символьный — буквами и цифрами («#FF0000» — вот здесь всё несколько сложнее).

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

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

Следите за обновлениями.

По любым вопросах относительно основ css (и не только основ) — пишите в комментарии.

 

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

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

  bigmir)net TOP 100  - .  E-mail: sitesnulyaru@gmail.com