Урок 4. Знакомство с CSS ????


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

B

p>Начнём с того, что CSS расшифровывается, как Cascading Style Sheets, что означает каскадные таблицы стилей. То есть если HTML - язык разметки, с помощью которого описывается содержимое страницы, то CSS описывает внешний вид страницы.

Чаще всего для оформления страницы создается отдельный файл (или несколько отдельных файлов) с расширением .css. Но можно код CSS использовать и в самом файле HTML между тегами ˂style˃.


Правила CSS определяют стиль элемента или группы элементов. Выглядит это так:

селектор {
  свойство:значение;
  свойство: значение;
  свойство: значение;
}

Такие пары свойство: значение; называются декларациями.Декларации между собой разделяются точкой с запятой. Селектор определяет на какие элементы будут распространяться правила. Разберем следующие правила:


p {
   color: blue;
   font-family: Helvetica;
   font-size: 10pt;
  }


Это правило говорит о том, что текст во всех параграфах (т.е. содержащийся между тегами ˂p˃) должен быть синего цвета, размер текста должен быть 10 точек, а в качестве шрифта нужно использовать шрифт Helvetica.


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

Если описания внешнего вида вашей страницы вы выносите в отдельный css-файл, то его необходимо подключить в файле с разметкой. Это делается в "голове" страницы с помощью тега link:


˂link rel="stylesheet" href="путь к вашему css-файлу"˃




В прошлый раз мы с вами сделали простенькую страничку, на которой отображается "Привет, Голос!". Давайте её немного украсим. Изменим цвет фона на любой какой вам нравится (коды разных цветов можно найти, например, здесь) и изменим шрифт заголовка. Можете, конечно, еще сами поэкспериментировать, испытать возможности этой парочки: HTML и CSS.

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

В следующем уроке я расскажу о классах, идентификаторах и о том, как их использовать в CSS.




















Comments 4


Замечательно расписываете!

26.12.2016 18:39
0

Спасибо огромное ) такие комментарии очень вдохновляют! ?

27.12.2016 04:00
0

Как мне нравится такая подача:)

26.12.2016 18:43
0

Наташа, спасибо )) Очень приятно! ?

27.12.2016 04:00
0

просто класс
а как всё запомнить это в дальнейшем... голова кругом))
главное интересно что из чего сделано

26.12.2016 22:32
0

Спасибо!

а как всё запомнить это в дальнейшем... голова кругом))

Оно запоминается буквально после пары раз применения того или иного тега. С опытом ) Учить здесь даже ничего не нужно, просто понимать и знать где лежит справочная информация. Я думаю, ни один специалист не знает все теги и все свойства CSS по памяти ?.

27.12.2016 04:06
0

главное знать что оно есть и где его найти)))) А найти с гуглом не проблема

27.12.2016 10:42
0
My pageSettingsLogout
Cancel Confirm
100%
Cancel Confirm
Cancel Confirm