26.02.2012, 21:46

CSS. Первые шаги



В этой статье я расскажу вам о структуре css документа, подключение таблиц стилей.
CSS - Cascading Style Sheets, каскадные таблицы стилей.
Зачем нужен css?
Зачем же нужен css? Приведем два примера страниц.
Без использования css:

С использованием css:

Как вы уже поняли по этим примерам, css нужен для изменения вида страниц. Согласитесь, использование css намного улучшает внешний вид страниц.
Структура css документа.
Code

p{
color: #93aabc; /*Цвет букв*/
margin: 3px; /*Внешний отступ*/
border: 1px solid #111111; /*Рамка */
}

Селектор{
свойство: значение свойства;
свойство2: значение свойства;
свойство3: значения свойства;
}
Селектор - элемент, к которому будут применятся свойства, в нашем случае p.
Свойство - показывает какие изменения будут применены к селектору, в нашем случае color; margin; border;
Значение свойства - какой параметр будет у свойства, у нас #93aabc; 3px; 1px solid #111111;
Все свойства заключаются в фигурные скобки, а их значение начинается после двоеточия, после значения каждого свойства ставится точка с запятой, после значения последнего свойства точка с запятой не обязательны, то есть после border: 1px ставить не обязательно.
Примеры написания кода css.
Вариант 1:
Code

p{
color: #93aabc;
margin: 3px;
border: 1px solid #111111;
}

Вариант 2:
Code

p{ color: #93aabc; margin: 3px border: 1px solid #111111; }

Все два варианта считаются правильными и ошибок в них нет, каким вариантом написания пользоваться, выбирать вам!
Способы связи html документа с таблицами стилей (css).
Вариантов существует три:
• Таблицы связных стилей
• Таблицы глобальных стилей
• Таблицы внутренних стилей

Таблицы связных стилей
Этот вариант очень часто используется в связи. В этом варианте стили находятся в отдельном фале с расширением .css Для связи таблиц стилей с html документом этим способом нам надо воспользоваться тегом <link>, его надо прописать между тегами <head> и </head>.
Вот код: <link rel="stylesheet" type="text/css" href="site.css">
Атрибуты тега rel и type остаются неизменными в любом случае, а значение атрибута href- это ссылка на файл с расширением .css, в котором находятся стили.
Пример использования данного варианта:
Code
  
<html>
  <head>
  <title>Cascading Style Sheets</title>
  <link rel="stylesheet" type="text/css" href="my.css">
  </head>
  <body>
  <h1>InfoScript</h1>
  <p>Проект, котрый был создан для того, чтобы облегчить процесс создания сайтов. На нем вы сможете найти: скрипты для системы ucoz (такие как мини-профиль для ucoz, или меню для сайта ucoz), которая на сегодняшний день является одной из самых популярных систем для создания как небольших сайтов-визиток, так и достаточно серьезных проектов; средненькую базу javascript скриптов с их описаниями и пояснениями настроек и установки (кстати, их можно использовать и на ucoz); и небольшую, зато бесплатную базу php скриптов с прямыми ссылками для их скачивания; а также, шаблоны для ucoz, dle шаблоны, html шаблоны, большое количество различных иконок для сайта и программ, необходимых каждому вебмастеру.</p>
  </body>
</html>

Таблицы глобальных стилей
Этот вариант тоже часто используется, но хотелось бы отметить, что по сравнению с предыдущим вариантом, этот вариант увеличивает вес веб-страницы, тем самым её загрузка идёт дольше. И так, что бы воспользоваться этим вариантом, надо вставить контейнер <style> между тегами <head> и </head> , как и в предыдущем варианте, а стили будут находится внутри этого контейнера.
Пример использования данного варианта:
Code

<html>
  <head>
  <title>Cascading Style Sheets</title>
  <style type="text/css">
  body {
  background: f4f4f4;
}
  h1 {  
  color: #93aabc;  
  }
  p {
  color: #93aabc;
  padding: 5px;
  border: 1px solid #111111;
}
  </style>
  </head>
  <body>
  <h1>InfoScript</h1>
  <p>Проект, котрый был создан для того, чтобы облегчить процесс создания сайтов. На нем вы сможете найти: скрипты для системы ucoz (такие как мини-профиль для ucoz, или меню для сайта ucoz), которая на сегодняшний день является одной из самых популярных систем для создания как небольших сайтов-визиток, так и достаточно серьезных проектов; средненькую базу javascript скриптов с их описаниями и пояснениями настроек и установки (кстати, их можно использовать и на ucoz); и небольшую, зато бесплатную базу php скриптов с прямыми ссылками для их скачивания; а также, шаблоны для ucoz, dle шаблоны, html шаблоны, большое количество различных иконок для сайта и программ, необходимых каждому вебмастеру.</p>
  </body>
</html>

Таблицы внутренних стилей
Третий вариант связи таблицы стилей- это добавление атрибута style в тег, который надо изменить. Этот вариант, как и предыдущий увеличивает вес веб-страницы.
Пример использования данного варианта:
Code

<html>
  <head>
  <title>Cascading Style Sheets</title>
  </head>
  <body style="background: f4f4f4;">
  <h1 style="color: #93aabc;">InfoScript</h1>
  <p style="color: #93aabc;padding: 5px;border: 1px solid #111111;">Проект, который был создан для того, чтобы облегчить процесс создания сайтов. На нем вы сможете найти: скрипты для системы ucoz (такие как мини-профиль для ucoz, или меню для сайта ucoz), которая на сегодняшний день является одной из самых популярных систем для создания как небольших сайтов-визиток, так и достаточно серьезных проектов; средненькую базу javascript скриптов с их описаниями и пояснениями настроек и установки (кстати, их можно использовать и на ucoz); и небольшую, зато бесплатную базу php скриптов с прямыми ссылками для их скачивания; а также, шаблоны для ucoz, dle шаблоны, html шаблоны, большое количество различных иконок для сайта и программ, необходимых каждому вебмастеру.</p>  
  </body>
</html>

После применения всех вариантов связи таблицы стилей с html документом получается один и тот же результат, вот он:


Источник/Автор: infoscript.ru | Danil | Silver

Категория: Прочее | Добавил: Danil (26.02.2012) Просмотров: 1486 | Рейтинг: 4.6/5
Всего комментариев: 3
-2  
1 Voker -Infoscript Team-  (01.03.2012 14:05) [Материал]
Аватар пользователя
уникальность 0 взято из интернета полностью!

+2  
2 antisept -Infoscript Team-  (01.03.2012 15:14) [Материал]
Аватар пользователя
откуда инфа? по Адвего, статья уникальная

-1  
3 Voker -Infoscript Team-  (01.03.2012 18:15) [Материал]
Аватар пользователя
сорри извиняюсь не заметил что источние данного файла инфоскрипт!

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]