Урок 11. CSS с нуля

CSS расшифровывается как Cascading Style Sheets, а переводится как каскадные таблицы стилей. Рассмотрим CSS с нуля.

Стили — это свойства форматирования элементов html-документа. Любой элемент имеет стили, заданные по умолчаюнию, которые можно изменить при помощи правил CSS.

Выберите и купите себе книгу по теме HTML и CSS

C op y r i g h t © a r u l . ru
Многие стили могут передаваться по наследству от родительских элементов к дочерним, например, наследуются font, color. При этом основным принципом стилей является заменяемость. Стили, указанные в правилах, заменяют стили унаследованные, присвоенные по умолчанию или в предыдущих правилах. Существуют определенные приоритеты при замене стилей, которыми я не буду вас загружать, потому что их легче понять на практике.
 

Существует несколько способов описания стилей.

Создание отдельного css-файла (файла с расширением css)
В этом случае стили подключаются с помощью тэга <link>
<link rel="stylesheet" type="text/css" href="style.css" />;
Создание тэга <style> внутри html-документа
  <style type="text/css">
    .. стили ..
  </style>
Свойство style в тэге элемента
  <div style=" .. стили ..">; .. текст .. </div>

 
Стили обрабатываются в определенной последовательности.
Первыми присваиваются свойства по умолчанию. Их перекрывают некоторые свойства родительских элементов. Затем эти свойства заменяются теми, которые перечислены в заголовке html-документа (в т.ч. css-файлах).
В последнюю очередь обрабатываются стили, непосредственно указанные в атрибуте тэга.
 

C op y r i g h t © a r u l . ru
Правила CSS имеют определенный формат

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

На первом месте стоит селектор (или несколько селекторов через запятую). Следом в фигурных скобках идет перечисление стилей в формате свойство: значение, разделенных точкой с запятой.

Примеры селекторов:

  span - название тэга
  div.urlura - название тэга-точка-название класса
  table#azrzuzl - название тэга-решетка-id элемента
  .urlura - точка-название класса
  #azrzuzl - решетка-id элемента

C op y r i g h t © a r u l . ru
Стиль можно задать, например, для всех элементов с тэгом UL. В этом случае селектором является название тэга, например:

  ul {font-size: 15px;} 

Селектор может указывать на конкретный элемент с определенным id. В этом случае используется решетка #.

  div#laurrual {text-align: center;}

Это означает, что для элемента DIV, у которого id="laurrual", стиль text-align: center.
 

Мы можем указать стиль для всех элементов класса, например, class="lur-a". Тогда используется точка, и не нужно указывать название тэга, например:

  .lur-a {color: brown;}

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

  li, #A_rul, .classname {font-family: sans-serif;}

Здесь перечислены элементы с тэгом LI, элемент, у которого id="A_rul", все элементы, у которых class="classname".

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

  div.tiny span {font-size: small;}

Это означает, что для всех элементов с тэгом SPAN, которые находятся внутри элементов DIV класса tiny используется стиль font-size: small;
 

C op y r i g h t © a r u l . ru
Комментарии в css-файле и внутри тэга style заключены
между символами /* и */;

  /* .. (здесь комментарий) .. */

 
C op y r i g h t © a r u l . ru
Примеры:

<style type="text/css">
  /* цвет шрифта = зеленый  для  всех элементов с тэгом P */
  p {
    color: green;
  }
  /* цвет фона = светло-желтый для элемента, у которого id="laurrual" */
  #laurrual {
    background-color: lightyellow;
  }
  /* размер шрифта = 30px для элементов класса "big-font" */
  .big-font {
    font-size: 30px;
  }
</style>

<!-- рамка вокруг элемента -->
<div style="border:1px solid;"> ... </div>

C op y r i g h t © a r u l . ru
 

Задания:

1. Скачайте и установите себе редактор Notepad++, если вы этого не сделали на прошлом занятии.

2. Зайдите на сайт webref.ru, изучите css-стили

  display, background, color, font, 
  width, height, padding, margin, 
  text-align, vertical-align, border, position

Разберите примеры, постарайтесь понять. Для каждого примера нажмите кнопку «Посмотреть в новом окне».

Используя заготовку html-документа из прошлого урока, или создайте новый файл с расширением html, скопируйте в него пример, сохраните и запустите в браузере.
Меняйте различные стили, смотрите, что получается (последовательность действий: изменить — сохранить — открыть браузером, потом изменить — сохранить — обновить в браузере F5).

C op y r i g h t © a r u l . ru — CSS с нуля

 

  •  
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Оставить комментарий