Использование CSS для веб-презентации

CSS (Cascading Style Sheets, каскадные листы стилей) упрощают создание страниц за счет небольшого начального обучения. Это файл, включенный на каждую веб-страницу и содержащий атрибуты расположения и стиля содержимого.
Формат CSS существует с 1994 года, но получил широкое распространение в 2000 году с полной поддержкой в Internet Explorer 5 (теперь I.E. заменён на Edge).
Таблицу стилей можно связать с XML-документом. В этом случае свойства назначаются элементам (тегам) документа.

Почему таблицы стилей

?

Самый распространенный интерес - создание нескольких текстовых колонок, говорится в презентации газеты.
CSS имеют следующие преимущества:

Основания

Листы стилей служат в основном:

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

Элементы и свойства

CSS сводятся к двум вещам: и элементам, и их свойствам. Элементы - это HTML-теги или класс, определенный в таблице стилей.

Для разделения и расположения частей страницы используется тег с именем «div».

Общий формат объявления стиля выглядит следующим образом:

nom 
 {
    ...liste de propriétés...
 }
Название может иметь три фигуры, как подробно описано ниже.
Свойства имеют форму :
 attribut : valeur ;
Например, некоторые атрибуты, такие как «граница», могут содержать список значений, разделенных пробелом (а не запятой).

Объявления CSS

В файле CSS есть три типа операторов:

Идентификаторы и классы требуют атрибута в HTML-коде. Это будет иметь следующую форму, например, с тегом div:

Вставить таблицу стилей

В разделе <head> размещается следующая строка:

<link type = «text/css» href = «mafeuille.css» rel = «stylesheet»>

- тип означает тип отображения.
- Значение href - файл, содержащий определения стилей.
- rel = «stylesheet» указывает тип связи.

Позиционирование

Части страницы вырезаются тегом div, с которым связан идентификатор. Примеры:

  <div id="logo"> </div>
  <div id="menu"> </div>
  <div id="contenu"> </div>
Эти элементы включены в таблицу стилей в следующем формате: 
#logo  { }         
#menu
{  
    top: 60px; 
}
#contenu
{ 
    left: 120px;
}

Затем достаточно задать атрибуты позиции.
Меню будет иметь атрибут: top: 60px; для размещения 60 пикселей под частью логотипа.
Содержимое будет иметь атрибут: left: 120px; для размещения 120 пикселей слева для меню .

Правило: каскадные свойства

Не стоит упускать из виду, что CSS иерархичны - все заданные тобой свойства относятся к элементу, в котором ты находишься. Например, уменьшенный до 80% шрифт внутри элемента, в котором шрифт увеличен до 120%, возвращается к шрифту стандартного размера.

Кстати, можно точно нацелить элемент внутри другого элемента со следующим синтаксисом:

#selecteur selecteurinterne
{
     ...attributs...
}

Exemple:

#table a
{
    color:green;
}

Ссылки будут зелеными, но только в таблицах. Сведения о свойствах CSS см. в следующих ссылках.

Ресурсы и учебники

Некоторые учебники и ссылки, чтобы научиться использовать CSS с примерами и инструментами.