Здесь может быть ваша реклама...
1000
участников
5500 читателей

Введение в CSS

  Основа CSS - стиль. Иными словами - это комбинация правил форматирования и оформления. Он применяется к разным элементам страницы. Для присвоения какому-то элементу данных свойств (к примеру: положение на странице, размер, цвет  и так далее) для любого встречающегося тэга в стандартном HTML описывать эти свойства приходится каждый раз. И даже в том случае, если 10 или 110 однотипных элементов находятся на одной страничке. Величина файла и количество времени, которое требуется для загрузки на компьютер просматривающего его пользователя,  в данном случае увеличивается.

  Чтобы какому-то элементу присвоить определенные характеристики, нужно всего лишь один раз описать данный элемент, определив данное описание как стиль. Дальше можно только указывать, что элемент, который нужно оформить соответственным образом, обязан принять те свойства стиля, которые были описаны ранее. 

  Описание стиля можно сохранить в индивидуальном файле, а не в тексте страницы. Описание стиля в этом случае может использоваться на любом количестве WEB-страниц. Есть еще преимущество - оформление любого количества страниц можно изменить, только в одном  файле исправив описание стиля.
  Кроме того, CSS позволяет функционировать со шрифтовым оформлением веб-страниц на более
высоком уровне, чем HTML. При этом страницы графикой излишне не утяжеляются.


Освоение CSS



  Итак, информация о стилях может находиться в отдельном файле, так и прямо в коде веб-страницы.
Если намечается применение этих стилей не к одной, а к большему числу количеству страниц, то
использование отдельного файла имеет смысл. В этом случае следует сформировать обычный
текстовый файл; при помощи языка CSS описать нужные стили; поместить данный файл на веб-
сервере; в коде веб-страниц, которые из данного файла будут использовать описанные стили,  на этот
файл необходимо сделать ссылку - с помощью тэга <link>, который находится внутри тэга <body>
созданных веб-страниц:

<link REL=stylesheet href="URL "type="text/css">
  Первые два параметра этого тэга - это сохраненные имена, которые необходимы для того, чтобы сообщить веб-браузеру, что CSS будет использоваться на данной странице. Параметр - href= «URL» - указывает непосредственно на файл с описанием стилей.  Если параметр находится на том веб-сервере, что и документ, при помощи которого к нему обращаются, он должен содержать или относительный путь к файлу, или полный URL («http://...»), если файл со стилями - на  ином сервере.
  
    2-ой вариант, в процессе которого описание стилей располагается внутри тэга <body>, в тэге <style type="text/css">... </style> в коде страницы. В данном случае можно использовать данные стили для элементов, которые располагаются в пределах страницы. type="text/css" является обязательным параметром, служит для указания Web-браузеру использовать CSS.

  3-й вариант, когда описание стиля расположено внутри тэга элемента, который описывается.  Осуществляется это при помощи параметра style, который используется при применении CSS с большим количеством стандартных тэгов HTML. Данный метод очень нежелателен,
потому что сводит к минимуму одно из главных преимуществ CSS - возможности непосредственного отделения информации от фактического описания оформления информации. Но, если существует необходимость описать один лишь элемент, то данный вариант расположения описания стилей, может быть применим.
  Итак, давайте рассмотрим механизм, при помощи которого стили присваиваются элементам страниц. Вот самый простой случай присвоения:

НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;},

  НАЗВАНИЕ_ЭЛЕМЕНТА - это имя тэга HTML (h1, TD, P и так далее), а параметры, расположенные в фигурных скобках - это список свойств элемента, а так же присвоенных им значений.


Пример:

h1 {font-size: 50pt; color: red;}

  Всем заголовкам, расположенным на странице, которые оформлены тегом Н1, присваивается шрифт, размером 50 пунктов и красный цвет.

   Созданные с использованием CSS элементы страниц тоже используют механизм наследования.  Это означает: если расположить изображение внутри тэга <p>...</p>, который оформлен с участием CSS, с отступами, и таким образом, чтобы параграф помещался лишь на определенной части ширины страницы, изображение тоже получит значения отступов, которые отмечены для данного параграфа.
  CSS может присваивать стили не только всем равным элементам страницы, но и избирательно. Для этих целей применяется идентификатор ID=«имя элемента», либо параметр CLASS = "имя класса". Они  присваиваются всякому элементу страницы.


  Рассмотрим данные возможности подробнее.

  CLASS применяется, если нужно создать одинаковый (идентичный) стиль для нескольких элементов страницы, но не всех (разных или одинаковых).
   Таким образом, Вы имеете возможность присвоить описанный стиль любым элементам текста. Необходимо обратить внимание, на такой взаимосвязанный момент, что в процессе написания названия классов нужно учитывать регистр символов, относительно того, как Вы в описании стиля назвали класс!

  Если названному идентификатору на странице соответствует лишь один элемент, стили присваиваются с помощью идентификаторов. Однако, если в наличии несколько элементов, которым нужно такой стиль присвоить, -  то это уже класс.

Развитие и монетизация сайта
Начинающему
веб-мастеру
Введение и знакомство с HTML
Бесплатно создаем собственный сайт
Основы поисковой оптимизации
Что такое ТИЦ и PR и как их увеличить
Как раскрутить собственный сайт
Зарабатываем на собственном сайте
Помощь в выборе хостинг-провайдера
Загружаем сайт на хостинг
Полезные сайты
Полезная литература
Информация

Все о CSS
Самый простой курс
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Бесплатно создаем сайт
Полезная литература по созданию сайта
Основы HTML
Структура HTML-документов
Основные и вспомогательные тэги тела документа
Тэги списков
Гипертекстовые ссылки
Оформляем фон html-страницы
Графика в HTML
Web оптимизация графики
Стили оформления HTML-документа
Escape-
последовательности
Таблицы HTML
Структура таблицы
Заголовок, тело, подвал, строки и ячейки таблицы
Формы HTML, синтаксис форм
Элементы управления
Меню выбора
Оформляем HTML-формы
Фреймы HTML, синтаксис фрэймов
Тэг frameset
Тэги frame, noframes
Взаимодействия между фрэймами (планирование)
Карты изображений
Описание CGI интерфейса, разбираем данные HTML-форм
CGI-файл данных
Прямой возврат, обработка результата
Введение в CSS
Практическое освоение
Свойства элементов, которые управляются CSS
Прописываем мета-тэги и готовим web-страницы к публикации

®
Поделитесь информацией с друзьями: