1. Что такое каскадные таблицы стилей css?
Итак, что же такое каскадные таблицы стилей css?
css (англ. Cascading Style Sheets — каскадные таблицы стилей) - язык описания внешнего вида документа, написанного с использованием языка разметки. Что бы было проще понять новичку - каскадные таблицы стилей css предназначены для создания красивого, легкого в редактировании дизайна html страничек сайтов.
Впервые каскадные таблицы стилей стали использовать в 90-х годах прошлого столетия. Но поначалу они не были столь популярны как сейчас, потому, что разные браузеры по разному воспринимали и выводили html странички, в которых использовались css.
Спустя некоторое время, для упрощения работы сайтостроителям, браузеры стали "подгонять" под одни стандарты. На сегодняшний день практически все программы, используемые для просмотра интернет страничек, одинаково воспроизводят сайты, на которых используются каскадные таблицы стилей css.
Мои наблюдения!!! По моим личным наблюдениям, такие последние версии браузеров, как Opera, Mazilla ForeFox, Maxthon, Google Chrome и Internet Explorer практически одинаково покапоказывают странички, в которых используются каскадные таблицы стилей, но если браузеры не последних поколений, то и сами странички сайтов будут выглядеть по другому. И для того, что бы Ваш сайт выглядел одинаково практически во всех браузерах, есть специальные технологии задания каскадных таблиц стилей.
Итак, давайте приступим к созданию новой таблицы стилей и подключим ее к нашему документу.
2. Как создать каскадную таблицу стилей css?
В этой части статьи мы создадим и подключим каскадную таблицу стилей к самой простой html страничке.
Итак, делаем так:
1. Создаем папку, в которой будут наша html страничка, и каскадная таблица стилей. Пусть, моя папка будет называться "css"
2. Создаем простую html страничку (index.html). Как это делается можете прочитать здесь.
3. Теперь создаем простой текстовый документ (аналогично созданию html странички), только называем его style.css.
В результате у Вас должно получиться вот что:
Все, файл который будет содержать в себе стили css готов.
Теперь давайт подключим созданную стаблицу стилей к файлу index.html.
3. Как подключить каскадную таблицу стилей css?
Итак, для того что бы подключить таблицу стилей к html страничке, необходимо в файле index.html в теге <head> прописать тег:
<link href="style.css" rel="stylesheet" type="text/css">
Здесь, в атрибуте href="style.css" прописан путь к самому файлу со стилями css. В этом случае файл css и index.html находится в одной папке.
Например, если наш файл index.html будет иметь такой код:
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Изучаем каскадные таблицы стилей css</title> <meta name="description" content="Каскадные таблицы стилей"> <meta name="keywords" content="стили, таблицы, css"> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <h2>Страничка для изучения каскадных таблиц стилей css.</h2> </body> </html> |
Важно!!! Кстати, не забудьте при сохранении в блокноте файла index.html поставить кодировку 1251 (ANSI-кириллица). Так как если это не сделать и файл сохранить в другой кодировке, то браузер вместо текстов покажет Вам "каракули".
Если же все будет сделано и сохранено правильно, то в браузере Вы увидете следующее:
Вот и все, файл index.html создан, а так же к нему подключены таблицы стилей css.
Теперь давайте проверим работу таблиц стилей css.
Итак, начнем с самого простого, и зададим тегу <body> новый стиль, определяющий фоновое изображение html странички, цвет фона странички (если изображения в браузере посетителя странички отключены), верхние и нижние отступы, шрифт по умолчанию, его размер и цвет.
Для того, что бы установить фоновое изображение, его нужно разметить в папке с нашими файлами.
Скачайте архив bg.zip, разархивируйте его и поместите файл bg.jpg в папку css. У Вас должно быть так:
Теперь, что бы установить стиль для тега <body> html документа, в таблице стилей нужно записать следующее:
|
body { background-image:url(bg.jpg); background-color:#f6f6f6; margin-top:0px; margin-bottom:0px; font-family:Verdana; font-size:12px; color:#000066; } |
Здесь:
body {...} - задание стилей css для тега <body>
background-image:url(bg.jpg); - фоновое изображение, где в параметре url(...jpg) указывается полный путь к изображению, которое будет фоновым
background-color:#f6f6f6; - фон тела документа (тега <body>). Этот атрибут включается в тех случаях, если в браузере посетителя отключены изображения
margin-top:0px; - расстояние от тела документа до верхней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 px.
margin-bottom:0px; - расстояние от тела документа до нижней части браузера. В этом случает каскадные таблицы стилей css задают расстояние 0 пикселей
font-family:Verdana; - установка шрифта для документа по умолчанию
font-size:12px; - размер шрифта документа 12 пикселей
color:#000000; - цвет текста. В этом случае таблицы стилей css задают цвет шрифта - темно синий.
После того, как Вы сохраните файл style.css, в браузере Вы увидите следующее:
|
|
|
Введение в CSS. Стили Способы применения стилей: Внутренние стили Глобальный стили Связанные/внешние стили
Вы приступили к изучению каскадных таблиц стилей 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> <head> <meta http-...> <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> <head> <meta http-...> <title> Внешние стили </title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p> Для абзацев и заголовков второго уровня </p> <h2> Задано стилевое оформление. </h2> <p> Стили описаны в файле style.css, </p> <h2> который связан с данным файлом с помощью тега <link>. </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-код одного файла. Что очень удобно! |
О
технологии CSS. Стили CSS 
