Среда, 27.11.2024, 18:51 | Вы вошли как Гость | Группа "Гости"

IFrameContainer

Alternative content

Get Adobe Flash player

Веб-мастерская

К сожалению, поддержка и обновление сайта прекращены! Приносим свои извинения за доставленные неудобства!

Предлагаем Вам посетить

Интернет-магазин самых

популярных товаров интернета:

http://www.avellis.ru/

Специально для наших посетителей

на http://www.avellis.ru/ действует

скидочный промо-код: WEBMASTER.

На http://www.avellis.ru/ вы сможете

найти множество уникальных

акций и уникальных предложений.

Интересные идеи подарков, и многое другое!

Информация об avellis.ru актуальна на Ноябрь 2015 г.

Главная
Меню сайта
Рекомендуем!

К сожалению, поддержка и обновление сайта прекращены! Приносим свои извинения за доставленные неудобства!

Предлагаем Вам посетить

Интернет-магазин самых

популярных товаров интернета:

http://www.avellis.ru/

Специально для наших посетителей

на http://www.avellis.ru/ действует

скидочный промо-код: WEBMASTER.

На http://www.avellis.ru/ вы сможете

найти множество уникальных

акций и уникальных предложений.

Интересные идеи подарков, и многое другое!

Информация об avellis.ru актуальна на Ноябрь 2015 г.

Категории раздела
Общее [35]
Облако тегов
Мини-чат
200
Главная » Статьи » HTML-технологии » Общее

УРОК "CSS: структура и код. Преимущества использования"

CSS-технологии

УРОК «CSS: структура и код. Преимущества использования»

Дорогие друзья!

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

Сравните 2 параграфа текста. Первый создан с использованием только HTML, а второй оформлен с помощью CSS. Приёмы, использованные во втором случае, нельзя реализовать только через HTML.

Этот текст оформлен
с использованием HTML.

А этот текст оформлен с использованием CSS.

Почему же в настоящее время преимущество в оформлении отдаётся именно CSS?

  1. Разграничение кода и оформления - при этом в документе содержатся только теги логического форматирования, а всё оформление (вид, цвет, размер) выносится в таблицу стилей. При этом, если сайт разрабатывается командой, разные люди могут заниматься дизайном и вёрсткой.
  2. Разное оформление для разных устройств - через CSS можно задать различное отображение страниц сайта для разных устройст вывода: компьютера, смартфона, печати и т.д. При этом есть возможность исключить определённые объекты для отображения на определённом устройстве, изменить шрифты и их размер для печати и др.
  3. Расширенные способы оформления элементов - в отличие от HTML у CSS гораздо больше возможностей для оформления и презентации материалов страниц.
  4. Ускорение загрузки сайта - это связано с явлением кэширования, при этом страница со стилями сохраняется в памяти компьютера и при последующем обращении к этому сайту запросы идут именно в кэш, избегая повторной загрузки. Это значительно ускоряет работу устройств.
  5. Единое стилевое оформление множества документов - это значит, что задавая один стиль для страниц сайта (расположение и оформление блоков), мы создаём преемственность и даём знать посетителям, что они находятся всё ещё на этом сайте, и облегчаем им восприятие информации. Кроме того, разработка единого стиля существенно облегчает работу разработчикам сайта.
  6. Централизованное хранение - как правило, для одного сайта используется одна или несколько таблиц стилей, путь к которым задаётся в начале документа. Поэтому очень удобно изменять стиль элементов в одном файле, а не модифицировать десятки и сотни отдельных страниц.

Теперь перейдём непосредственно к CSS. Как реализуется CSS?

А CSS реализуется через систему правил. Они определяют, какие элементы HTML и как именно должны быть представлены на странице, и в каждом правиле прописываются свойства (например, цвет, размер, позиционирование, поля и т.д.) этих элементов и их значения, которые будут для них заданы. Например, в каком-то свойстве может быть прописано, что все заголовки в этом тексте будут размером 20 пикселей, на оранжем фоне и отображаться шрифтом Arial.

Рассмотрим синтаксис CSS и расшифруем, что это всё значит:

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

  • селектор определяет элементы HTML, к которым будет применяться это правило. Они определяются реальным названием тега (body, h1, p) или другими средствами (значением класса и др.).
  • фигурные скобки заключают в себе пары свойство-значение, которые разделяются между собой точкой с запятой. Все свойства отделяются от соответствующих значений двоеточием.
  • свойства определяют, что вы хотите сделать с этими элементами, они очень разнообразны и могут задавать цвет, фон, отступы, шрифты и т.д.
  • значения - это значения, которые вы задаёте для каждого свойства выделенного элемента. Свойств могут измеряться в пикселях, em, процентах (или других единицах), обозначаться словами-символами.

А теперь практический пример. Посмотрите на правило CSS для блока в начале урока, в котором находятся параграфы, иллюстрирующие возможности CSS:

.lesResult {
border: 1px solid black;
background-color: #ffffe0;
padding: 5px 5px 0 10px;
}

Это правило будет применяться ко всем элементам HTML, которым присвоен класс lesResult (об этом подробно в другом уроке). При этом блок с этим классом будет иметь границу чёрного цвета в 1 пиксель, её стиль - сплошная линия. Фон этого блока имеет код #ffffe0, а содержимое будет отступать от границ блока на указанное в свойстве padding расстояние (о том, как задать отступ, будет написано в отдельном уроке).

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

Комментарий (ваши пояснения к коду) заключается внутрь символов /* текст комментария */ и может включать сколько угодно строк текста. Также, используя эти символы, вы можете изолировать часть свойств CSS, чтобы, например, проверить, как будет выглядеть элемент без их использования.

До встречи в следующем уроке!

Категория: Общее | Добавил: Шакти (17.05.2011) | Автор: Петренко Елена
Просмотров: 3252 | Теги: CSS, свойство, значение, селектор, таблица стилей | Рейтинг: 5.0/1

Вернуться к карте сайта

Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">

Имя *:
Email:
Код *:

IFrameContainer

Alternative content

Get Adobe Flash player


Форма входа
Личные данные
Приветствую Вас,
Гость

Ваш IP: 3.138.135.4
Сегодня 27.11.2024, Среда,
Нет аватара

У Вас непрочитанных ЛС:
Ваш профиль
Вы с нами уже день
Вы родились:
Ваш браузер:
Поиск
Статистика
Яндекс.Метрика
Онлайн всего: 3
Гостей: 3
Пользователей: 0
Наш опрос
Оцените мой сайт
Всего ответов: 222