Создание сайта
Приветствую Вас, Гость · RSS Понедельник, 28.05.2018, 11:06



Главная » Статьи » Алгоритм

Шаг 6. Это страшное слово CSS
Прежде чем начать описание, хочу выразить Вам свою признательность и выдать медаль!
Раз вы уже дошли до этого раздела, значит, основные трудности позади.
Итак CSS.
Если на Вашем сайте нет CSS, считайте что Вам не повезло
(не относиться к сайтам на WordPress. И вообще, у кого сайт построен на WordPress, можно это не читать!)
CSS (Cascading Style Sheets) –  это таблицы каскадных стилей, дополнительное средство, при помощи которого вы можете управлять содержимым ваших страниц. «Увлекательное» путешествие по CSS можно посмотреть в видео уроках Евгения Попова
Здесь мы покажем, что можно редактировать, и как это влияет.

  1. Если у вас в шаблоне присутствует файл с расширением CSS (название файла.css), то переходим к его редактированию.
  2. Если нет, то создаем в «блокноте» файл «style.css» и едем читать учебник!
  3. Проверяем (на ВСЕХ страницах, если писали HTML вручную) в <HEAD> должна присутствовать строка: <link href="style.css" type="text/css" rel="stylesheet">
  4. Обзаводимся бесплатной программой редактирования CSS. Скачать ее можно здесь!
  5. Приступаем к редактированию. Что можно описать:
  • Общее форматирование страницы (BODY)
  • Шрифты
  • Форматирование текста
  • Параграф
  • Таблицы
  • Картинки
  • Ссылки
  • Списки
  • Блоки, div, span

  1. Общее форматирование страницы (BODY)
  • Color Устанавливает цвет шрифта.
  • background-color Устанавливает цвет фона. Не только документа. Можно установить цвет фона ссылки, блока, абзаца, заголовка и т.д.
  • background-image Определяет вставку фонового изображения.
  • background-repeat Назначает повтор фонового изображения. По умолчанию это свойство имеет значение repeat. Кроме того, оно может принимать значения: repeat-x (повторять только по горизонтали), repeat-y (повторять только по вертикали), no-repeat (вообще не повторять).
  • Background Если задан фоновый рисунок, то свойство background определит, прокручивать ли фон вместе с документом или нет. Свойство может принимать значения scroll (прокручивает фон) -- это значение по умолчанию, или fixed (не прокручивать фон, выглядит довольно симпатично).

  1. Шрифты
  • font-size Определяет размер шрифта Значение может быть абсолютным, относительным, и кроме этого размер можно задать с помощью размерных выражений: xx-small (сверхмелкий) x-small (очень мелкий) small (мелкий) medium (средний) large (крупный) x-large (очень крупный) xx-large (сверхкрупный) larger (крупнее) smaller (мельче)
  • font-style Задает стиль вывода символов. Значения могут быть следующими: normal (обычный), italic (курсив), oblique (наклонный)
  • font-weight Назначает вес (степень жирности) шрифта. В качестве значения можно использовать целые числа от 100 до 900 с шагом 100 единиц, но чаще всего используют ключевые слова: bold (жирный), bolder (более жирный), lighter (более тонкий).
  • font-variant Указывает вариант начертания текущего шрифта. Это свойство может иметь только два значения: small-caps (ОТОБРАЖЕНИЕ МАЛЫМИ ПРОПИСНЫМИ БУКВАМИ) и normal (не влияет на отображение)

  1. Форматирование текста
  • letter-spacing Устанавливает межсимвольный интервал (расстояние между буквами). Расстояние можно указывать в абсолютных величинах.
  • word-spacing расстояние между словами. Указывается в абсолютных величинах
  • text-indent Задает отступ первой строки абзаца. По умолчанию равно нулю. Если задать отрицательное значение, то первая строка будет выступать.
  • text-align Задает горизонтальное выравнивание. Может принимать значения: center (по центру), left (влево), right (вправо), justify (по ширине). По умолчанию текст выравнивается по левому краю.
  • vertical-align Устанавливает расположение содержимого документа по вертикали. Может принимать значения: baseline (по базовой линии) -- по умолчанию, sub (по линии нижнего индекса), super (по линии верхнего индекса).
  • line-height Межстрочный интервал. Значение можно задать в абсолютных единицах, в процентах, количеством строк (например, 3; 2.5)

  1. Ссылки
  • Link Просто определяет стиль ссылки, которая еще не посещалась.
  • Active Определяет стиль активной (т.е. гиперссылкам, на которых находится фокус ввода пользователя) ссылки.
  • Hover Определяет стиль ссылки при наведении указателя мыши.
  • Visited Определяет стиль посещенной ссылки.
  • Атрибуты могут быть:
Color – цвет ссылки
Text-decoration - задает специальное оформление текста: none; - отменяет любое специальное оформление  underline; - подчеркивает текст overline; - черта сверху текста; line-through; - зачеркивает blink; - мигание текста (отсутствует в IE)
  1. Списки
  • list-style-type - задает тип маркера или номер позиции списка disc; - (значение по умолчанию) отображает сплошной кружок; circle; - окружность; square; - сплошной квадрат; decimal; - нумерует позиции арабскими цифрами; lower-roman; - малыми римскими; upper-roman; - большими римскими; lower-alpha; - помечает позиции малыми латинскими буквами; upper-alpha; - большими латинскими; none; - вообще убирает маркер или нумерацию.
  • list-style-image Задает маркер в виде картинки
  • list-style-position Устанавливает позицию маркера в строке списка. Может принимать два значения: inside (маркер находится внутри области списка) и outside по умолчанию (маркер находится за пределами области строки списка).

  1. Блоки
  • Margin Задает поле вокруг блока. Можно задать поля отдельно: margin-top (верхнее поле), margin-right (правое поле), margin-left (левое поле), margin-bottom (нижнее поле).
  • Border Набор свойств для отображения границы элемента. Свойства border-color, border-width служат для задания цвета и ширины границы (для каждой границы можно задать отдельно: border-top-width, border-right-width, border-top-color, border-left-color и т.д.) Свойство border-style управляет выводом границы. Может принимать значения: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset (точками, пунктиром, сплошной линией, двойной линией и т.д.) Также можно задать для каждой границы отдельно (border-bottom-style и т.п.)
  • Padding Определяет просвет между содержимым блока и границей. Можно задать для каждой границы отдельно (padding-top, padding-left и т.д.)
  • width и height Определяет ширину и высоту.
  • Float Определяет размещение текущего элемента по горизонтали по отношению к внешнему элементу. Если это свойство задано для рисунка, за которым следует текстовый блок, то float будет задавать обтекание рисунка текстом. Может принимать значения left, right, none.
  • clear Отменяет действие свойства float. Если было задано размещение рисунка вдоль левой границы с обтеканием текстом, то clear: left отключит это обтекание.


  1. Вот и все, вкратце.

Да виден свет в конце тоннеля: Шаг 7. Меню

Категория: Алгоритм | Добавил: vsgroup321 (31.07.2009)
Просмотров: 606 | Комментарии: 5 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email *:
Код *:
Сайт управляется системой uCoz
Copyright VS Group © 2018