• доступно о веб-разработке
07.10.2012 CSS, Технологии

Каскадные листы стилей

Каскадные листы стилей

Разобравшись со скелетом(HTML) и мускулатурой(JavaScript) сайта, мы плавно переходим к не менее важной компоненте — каскадным листам стилей. Сокращенно их называют CSS от англ. Cascade Style Sheets. Для чего они нужны? Чтобы внести разнообразие во внешний облик сайта. С целью заставить его играть новыми красками.

Все, что вы видите — цвета, размер и выравнивание текста, отступы между элементами и их положение, задний фон — все это сделано при помощи CSS.

Откройте файл из предыдущих упражнений.

В head вставьте тег:

<style>

h1 {

color: red;

}

</style>

Сохраните, и снова откройте страницу в браузере.

Вот, что вы увидите:

Тот текст, что находится перед фигурными скобками называется «селектором». Он выбирает элементы, на которые действуют правила внутри скобок.

Соответственно, между скобками указываются в виде «свойство: значение;» правила.

К примеру, указывая просто «h1» в виде селектора, я говорю, что все элементы типа h1 будут у меня, в данном случае, красными.

Можно через запятую указать несколько элементов, на которые будут действовать одни и те же правила:

h1,h2,h3 {

color: red;

}

Можно даже иногда (сейчас это уже признак дурного тона) прописать стиль как атрибут тега:

<h1 style=»color:red;»>Текст красным</h1>

Почему? Опять-таки, потому что отдельный стиль может действовать на большое количество элементов. А в указанном строкой выше — только на один.

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

Подключаются они специальным тегом:

<link rel=»stylesheet» href=»http://codemotion.ru/wp-content/themes/codemotion/style.css» type=»text/css» media=»screen» />

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

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

Есть еще два важных понятия в стилях.

Класс и идентификатор.

Разница между ними в том, что класс — для многих, идентификатор — для одного.

Выглядит это так:

<p class=»text»  id=»text1″>Текст 1</p>

<p class=»text»>Текст 2</p>

<style>

.text{

    color: red;

}

#text1 {

  font-size: 120%;

}

</style>

Как видите, класс обозначается точкой в листах стилей, а идентификатор — решеткой.

В результате отработке данного кода браузер покажет оба абзаца красным, но первый будет отображен еще и  на 120% более крупным шрифтом.

Начать более углубленное изучение CSS рекомендую здесь:

http://www.intuit.ru/department/internet/css/1/

Вопрос к вам — стоит ли более детально останавливаться на разжевывании основ или можно вот так вот отправлять на освоение внешних источников информации?

 

Поделиться

Комментарии Правила дискуссии

Читайте ранее:
Скрипты
Скрипты — основа динамики

Ознакомившись с предыдущим уроком вы, уверен, осознали, что HTML-разметка — это скелет любой страницы любого сайта. Но здесь надо отдавать себе...

Закрыть