«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Вы приступили к изучению каскадных таблиц стилей CSS. Значит Вы уже знакомы с языком разметки гипертекста HTML, так как приступать к CSS без знания HTML не имеет смысла.

CSS (Cascading Style Sheets - каскадные таблицы стилей) - технология, использующаяся для оформления веб-страниц с помощью стилей.

Основная идея CSS состоит в том, чтобы разделить структуру и содержание веб страниц от их оформления:

- c помощью HTML создается страница - ее каркас, а также вносится ее содержимое.
- с помощью CSS создается дизайн - задается оформление для элементов страницы.

Стили - это набор  правил форматирования, применяемых к элементам страницы для изменения их свойств и параметров представления на странице: в основном это касается их внешнего вида и занимаемого положения.

Стили представлены свойствами CSS. Каждое свойство по своему влияет на оформление того или иного элемента страницы. Некоторые свойства не применимы к некоторым элементам.

Элементы страницы - это теги HTML или их содержимое.

Существует три способа применения стилей к элементам страницы:



I способ - Внутренние стили

Стилевое оформление задается при помощи параметра style, который может быть добавлен к любому тегу HTML, влияя при этом на оформление только этого тега и его содержимого.

Фрагмент кода

<p style="font-size:20px; color:#3366CC;"> При помощи параметр style задано стилевой оформление для текста данного абзаца, установлен его размер и цвет. </p>

Результат

При помощи параметр style задано стилевое оформление для текста данного абзаца: установлен его размер и цвет.

Этот способ оформления элементов страницы применяется редко. Ведь, согласитесь, что задавать одно и тоже оформление, скажем, для каждого абзаца страницы, во-первых, трудоемко, а, во-вторых, не практично, так как с увеличением объема исходного кода, будет расти и время загрузки страницы.

II способ - Глобальные стили

Стилевое оформление задается при помощи тега <style>, который размещается в голове документа (тег <head>) и может быть использован несколько раз.

Этот способ назван глобальным не случайно. Дело в том, что оформление, заданное в голове документа для конкретного тега HTML, будет единым для всех аналогичных тегов (и их содержимого), встречающихся в текущем документе, если для них не задано иное оформление при помощи параметра style (см. I способ).

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Глобальные стили </title>

<style type="text/css">
p {font-size:16px; font-style:italic; color:#339999}
</style>

</head>
<body>

<p>
В голове документа задано единое стилевое оформление </p>
<p>
для всех абзацев текущей странички! </p>
<p style="font-size:
24px; font-style:italic; color:red;"> А для этого абзаца оформление задано индивидуально. </p>
<p>
Единое оформление. </p>

</body>
</html>

Результат

В голове документа задано единое стилевое оформление

для всех абзацев текущей странички!

А для этого абзаца оформление задано индивидуально.

Единое оформление.

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

III способ - Связанные или внешние стили

Стили описаны в отдельном файле с расширением .css, который может быть связан  как с одним, так и с несколькими  html-файлами, влияя при этом на их оформление.

Если Вы еще не знакомы с визуальным HTML-редактором Dreamweaver, то для создания css-файла можно воспользоваться простым текстовым редактором, который является частью ОС Windows - Блокнотом.

Например, мы имеем html-документ - файл index.html, к оформлению которого необходимо применить стили, описанные в файле style.css.

Для этого файлы index.html и style.css нужно связать. Связь осуществляется с помощью тега <link>, который располагается в голове документа index.html (между тегами <head> и </head>), и  в котором необходимо прописать следующее:

<link rel="stylesheet" type="text/css" href="style.css">.

Эта строка указывает на то, что правила оформления для файла index.html берутся из файла со стилями style.css.

С помощью атрибута href тега <link> делается ссылка на файл со стилями (указывается абсолютный или относительный путь к файлу (подробнее здесь...) . Таким образом к любому html-документу можно применить стили из файла, находящегося даже на другом сайте.

Фрагмент кода

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Внешние стили </title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>

<p>
Для абзацев и заголовков второго уровня </p>
<h2>
Задано стилевое оформление. </h2>
<p>
Стили описаны в файле style.css, </p>
<h2>
который связан с данным файлом с помощью тега &lt;link&gt;. </h2>

</body>
</html>

Фрагмент кода из файла со стилями

p {border:#FF0000 solid 2px; color:#33CC99; padding:5px}
h2 {
border:#33CC99 solid 2px; background-color:#FF0066; color:#FFFFFF; padding:5px}

Результат

Для абзацев и заголовков второго уровня

Задано стилевое оформление.

Стили описаны в файле style.css,

который связан с данным файлом с помощью тега <link>.

Применение этого способа позволяет связать файл со стилями style.css с любым количеством html-файлов и работать над их дизайном, редактируя лишь css-код одного файла. Что очень удобно!

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта