Использование CSS внутри тега

Преимуществом такого метода является быстрое написание стиля для отдельного тега. Например можно задать тексту красный цвет, не отвлекаясь от редактирования кода. Для этого в теге шрифта (”<span>”) можно просто прописать CSS-стиль. Пример:

<span style=”color:red;”>красное_слово</span>

По правилам CSS не важно, в каком теге Вы напишете  style=”color:red;” – всё равно текст внутри этого тега станет красным. Например, напишем тоже самое в теге картинки. И что это даст? То, что текст, который виден до загрузки картинки (параметр alt), будет естественно красным. В итоге мы получаем, что если какой-то тег имеет в себе текст в любом виде, то цвет этого текста можно задавать одинаковым правилом style=”color:цвет;” .

У многих новичков могут возникнуть по крайней мере 7 вопросов:

1.  Какие кавычки использовать, одинарные или двойные? – используйте любые, главное чтобы не было логической путаницы. К примеру если начинаете с двойных, то и заканчивайте ими: style=”color:red;” , а не так: style=’color:red;” . Многие параметры CSS имеют строковое значение, например путь к файлу для фона элемента: style=”background: URL(’img/kartinka.jpg’) ;” – так вот, в таких случаях внутреннюю строку пишите в других кавычках. Тоже самое к примеру с именем шрифта: style=”font-family:’Arial’,'Verdana’,'Tahoma’;” .

2. Нужны ли вообще кавычки внутри параметров CSS? – на ваше усмотрение. Саму “заготовку” вида style=”" пишите всегда с кавычками. А внутренние параметры можно без кавычек. Например: style=”font-family:Verdana;” – здесь я написал название шрифта без кавычек. То же самое и с путем к картинке, можно писать без кавычек. НО! Если имя шрифта, или путь, или любая другая строчка внутри CSS параметра содержит пробелы или особенные символы типа запятой, то ее обязательно нужно писать в кавычках. Пример с фоном: style=”background: URL(’img/moia kartinka.jpg’) ;” – здесь в пути к файлу есть пробел, поэтому пишется в кавычках. Замечу, что пробел в любых параметрах HTML и CSS, которые обозначают путь к файлу, нужно писать как %20 (процент-двадцать) – это специальное обозначение пробела чтобы не разрывать строку.

3. Как ставить пробелы в параметрах, и нужны ли они вообще? – я имею ввиду как правильно писать: style=”color: red ;” или style=”color:red;” или style=” color : red ; “. На самом деле без разницы как писать, как Вам удобно. Главное чтобы в специальных строчных параметрах типа имени шрифта, или пути к файлу, не возникли лишние пробелы или не исчезли имеющиеся. Например чтобы имя шрифта “Segoe UI” не стало “SegoeUI”, или файл “kartinka.jpg” не стал ” kartinka.jpg “.

4. Как разделять параметры? – когда параметров несколько, то разделяйте их точкой с запятой: style=”color:red;font-family:Verdana;height:30px;” . Из этого следует одно пожелание – не пишите несколько раз style=”…” в одном теге

5. Когда параметр всего один, нужна ли точка с запятой в конце? – на ваше усмотрение. Например нет разницы style=”color:red” или style=”color:red;” . Однако ставить ”;” в конце одиночного параметра можно для удобства – а вдруг Вы допишете что-то еще, так уменьшается шанс, что вы упустите “;”.

6. Есть ли разница между большими буквами и малыми? – параметры всегда пишутся малыми буквами. С большой буквы можно писать строчные параметры – например имя шрифта “Arial”.

7. Как задавать цвет? – цвет можно написать тремя способами – именем цвета по-английски, например “red” или “yellow”. Также можно писать шестнадцатеричный код цвета, например “#FFFF00″ означает желтый цвет, а “#FF0000″ – красный цвет. Третий способ – те же коды цветов, но в сокращенном виде: “#FF0″ – желтый, “#F00″ – красный. Ну и для примера, как это делается: <font style=”color:#666;”>серый_шрифт</font>. Кавычки для обозначения цвета не нужны. Коды или английские названия цветов для HTML и CSS можно найти в интернете, обычно они представлены в виде удобной таблицы. Еще есть специальные программки, которые выдают код после выбора цвета в палитре – очень удобно. Предложу даже мою программку, когда-то делал для себя

Как я уже говорил в посту “Зачем нужен CSS“, найти справочник параметров CSS легко. Запомнить раз и навсегда несколько основных параметров тоже очень просто. Остальные можно подсматривать по необходимости в справочниках, в которых всё обычно понятно, типа: цвет фона – background-color, отступ слева – margin-left, высота строки – line-height…

Использование CSS вне тегов

Писать стиль CSS вне тегов тоже очень просто. Правила те же, что и для “внутреннего” стиля. Преимущества – возможность задать стиль для множества тегов сразу, тем самым сокращая размер HTML странички. Более того, можно задать стиль для множества страниц, вынеся его во внешний файл стилей, так называемую CSS-таблицу.

Теперь обо всём по порядку.

Создать стиль для нескольких тегов легко. Для этого вверху HTML кода страницы, между <head> и закрывающим </head>, нужно создать тег <style>, Пример:

<style>

</style>

Между <style> и </style> и будем писать стили для тегов. Но чтобы задать какому-то тегу стиль, сначала нужно как-то обратиться к этому тегу, то есть написать для какого тега создаем стиль.

Для этого в CSS придумано несколько способов:

1. В каждом теге можно написать его класс: class=”имя_класса”. Например: <font class=”krasn”></font>. Класс можно написать в любых тегах, и сколько угодно раз на странице. Класс всегда пишется на английском и без пробелов.

2. В тегах страницы можно написать уникальное имя, называемое идентификатором: id=”имя”. Например: <p id=”verh_podpis”></p>. Идентификатор не может повторяться на странице, но можно написать несколько разных идентификаторов, например на странице может быть один “верхний_заголовок”, одно “правое_поле” или одна “панель_картинок”. Идентификатор всегда пишется на английском и без пробелов.

Теперь расскажу как же всё-таки сделать рабочий стиль. Пример:

В <head> пишем как я говорил:

<style>
</style>

Внутрь пишем обращение к тегу. Например обращение по классу:

<style>
.moi_klass
</style>

Точку перед “moi_klass” я поставил потому, что к классу обращаются через точку. Теперь напишем, что-же за стиль мы хотим сделать у тега. Например красный цвет букв (color:red):

<style>
.moi_klass { color:red }
</style>

Вы уже поняли, что стиль для класса нужно писать в фигурных скобках. Давайте разберем, как это всё повлияет на документ. На самом деле пока никак. Ведь мы не прописали в нужных нам тегах класс “moi_klass”. А как только пропишете, всё будет работать. Напишу для ясности всю картину кода HTML + CSS.

<html>
<head>
<style>
.moi_klass { color:red }
</style>
</head>
<body>
<span class=”moi_klass“>красные буквы</span>
<span class=”moi_klass“>тоже красные буквы</span>
</body>
</html>

По идентификатору обращаться также легко, только вместо точки нужно использовать решетку:

<style>
#moi_id { color:red }
</style>

Внутри тега <style> можно писать много разных стилей, например:

<style>
#moi_id { color:red }
.moi_klass { color:red }
.levoe_menu { height: 30px }
</style>

Также внутри фигурных скобок можно писать много CSS-параметров:

<style>
#moi_id { color: red; font-family: Verdana; }
.moi_klass { color: red; height: 18px; width: 200px; }
.levoe_menu { height: 30px; font-size: 24px; }
</style>

Кроме обращения по классу и идентификатору, есть обращение по названию тега. Например к div, table, td и так далее. Такое обращение пишется без всяких начальных символов:

<style>
span { color:red }
div { height: 100px }
</style>

При обращении по названию тега, все соответственные теги страницы примут описанный стиль. Это особенно удобно например при написании заглавия статьи, просто нужно создать стиль для H1 или возможно для H3, и все заглавия могут принять один цвет букв, один размер и шрифт.

Бывают частые ситуации, когда нужно задать стиль вложенных тегов. Например нужно, чтобы все ссылки (<a></a>) внутри параграфа (<p></p>) были черными. Попробуем в стилях обратиться к ссылкам и задать им черный цвет шрифта:

<style>
a { color: black }
</style>

В описанном стиле получается, что все ссылки страницы станут черными. А нам нужно, чтобы только ссылки параграфов (абзацев) были черными, а остальные, например ссылки меню, остались прежними. Для этого в стилях нужно учесть вложенность (иерархию). Делается это так:

<style>
p a { color: black }
</style>

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

<div>
<p>
<span><a href=”pixpaint.com”>Уроки</a></span>
</p>
</div>

Теперь через CSS-стили сделаем ссылку черной:

<style>
div p span a { color: black }
</style>

То есть я думаю понятно, что вложенность просто пишем в строчку по порядку, от старшего к вложенному.

Здесь я описал обращение по названиям тегов, но не забываем что есть идентификаторы и классы. Опять наглядный пример:

<div id=”text_content”>
<p>
<span class=”zagolovok”><a href=”pixpaint.com” class=”caption”>Мой сайт</a></span>
</p>
</div>

Стиль черной ссылки будет такой:

<style>
#text_content p #zagolovok .caption { color: black }
</style>

У вас может возникнуть вопрос, почему в CSS я не пишу просто обращение к классу ссылки “.caption”. Да, это можно сделать, но когда важно изменение стиля именно той ссылки, а не всех ссылок которые имеют класс “.caption”, то мой пример становится актуальным. Другими словами, в CSS Вы можете написать, что ссылки с классом “.caption” синие, но ниже добавить, что однако ссылки с тем же классом “.caption” расположенные в меню должны быть красными. Делается примерно так (допустим что у меню задан идентификатор id=”#menu”):

<style>
.caption { color: blue }
#menu .caption { color: red }
</style>

Внешние CSS-таблицы

Ну пока хватит дрессироваться на правилах CSS, расскажу лучше про внешние таблицы стилей, которые можно прикрепить к страничкам всего сайта. Например есть 10 страниц, и у них нужен примерно одинаковый дизайн, т.е. определенные элементы имеют одинаковый стиль. Примером может служить любой профессиональный сайт, ну или простой блог.

Задача одинакового стиля страниц решается не одинаковой записью в теге <style>…</style> в коде каждой страницы, и уж тем более не обычным HTML кодом с его параметрами в тегах. Для этой задачи создается общий CSS файл (расширение .css), а в нем без всяких тегов пишутся стили. Например создается файл abc.css, а в нем пишутся голые стили:

.caption { color: blue; padding: 10px; }
#menu .caption { color: red; }
p { margin-top: 10px; font: 12px/18px Verdana; }

… ну и так далее. Потом этот файл нужно включить в странички. Делается это в теге <head>…</head>, а именно так:

<head>
<link rel=”stylesheet” type=”text/css” href=”путь_к_файлу_css“>
</head>

Путь к файлу CSS можно писать относительный, например просто “abc.css” если он лежит в той же папке, что и странички. Замечу, что эти файлы не подгружаются каждый раз при вызове страницы, а хранятся в кэше браузера. Поэтому можно загрузить одну страницу сайта, и стили всего сайта уже будут в памяти компьютера – это дает прирост скорости загрузки страниц, т.к. их стилевая часть уже загружена.

Всё, все странички лаконично написаны, их HTML код короткий и понятный, а сайт быстро грузится. Надеюсь, что помог Вам ознакомиться с основными моментами использования CSS, желаю удачи. Оригинал статьи на neonhtml.pixpaint.com.

Post from: NeonHTML - редактор HTML и CSS

CSS – это то, что дает почти полный контроль над стилем, дизайном, отображением страниц. Вспомните, как часто Вам не хватало простых тегов и их параметров для выражения Вашей идеи. Насколько удобно было пользоваться тегами для графики?

Каждый, кто уже освоил мало-мальские азы HTML, понимает, что его недостаточно для хорошего вида сайта. Что же нам предлагает CSS? Являясь специальным языком для стиля страницы и её элементов, CSS предлагает свои параметры для элементов (тегов) и более понятную и упорядоченную схему написания этих самых параметров.

Вспомним, как мы задаем размер картинки на странице. Для этого в теге картинки (<img>) нужно прописать параметры width=”" и height=”". А помните ли Вы, как задавать размеры любого тега? Тоже width и height, или по-другому? Или например, сразу ли Вы вспомните, какие теги имеют параметр, при котором весь внутренний текст станет жирным, или будет центрироваться?

Так вот, используя язык CSS, можно не задумываться над этими вопросами. За редким исключением, стиль CSS для всех элементов страницы одинаков. И даже если по логике вещей, текст в теге <b> всегда должен стать жирным, можно задать параметр, при котором текст не будет жирным. То есть перед CSS все теги равны, все они ему подчиняются, и притом подчиняются на одинаковых условиях и с примерно одинаковым эффектом.

Еще один пример для ясности всемогущества CSS. Представьте картинку. Как Вы думаете, есть ли у тега картинки фон, или есть только собственно изображение? Обычно конечно мы не видим фона картинки, а он есть. И находится под изображением, как и фон любого элемента находится под его содержимым. Какой от этого толк? Когда картинка еще не загружена, показывается её фон – это может быть просто сплошной цвет, изображение, или даже анимация с мигающей надписью “лодинг”. И прописать в теге это также просто, как задать фон любого элемента – страницы, таблицы или блока (div). Даже для ссылки можно задать анимированный фон.

Многие начинают изучать JavaScript и прочие языки, не освоив CSS. Я считаю это неправильным и нерациональным обучением. Прежде чем учить динамику и супер-навороченные возможности подобных языков программирования, сначала нужно выучить возможности стиля, поэкспериментировать с огромными возможностями отступов, внутренних отступов, рамок, полных настроек текста вплоть до высоты строки или расстояния между буквами. При этом половина потребностей в JavaScript может отпасть сама собой. Пример – появление различных полупрозрачных элементов или подсказок при наведении мыши на ссылку, или подсветка картинок яркими цветами при наведении, или смена картинок одна на другую при наведении мыши – не нуждаются в JavaScript !

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

Я не буду учить Вас всем параметрам этого языка, для этого есть множество сайтов. Моя идея – донести до Вас удобство и простоту. Все основные параметры можно раз и навсегда выучить – они в CSS одинаковы для всех тегов, и получается что это намного проще, чем досконально учить HTML.

Напоследок тыкну в хорошие ссылки: моя статья Как применять CSS, и чужой справочник Параметров CSS

Оригинал статьи на neonhtml.pixpaint.com

Post from: NeonHTML - редактор HTML и CSS