Использование 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

Какие преимущества кликандерной рекламы?

1. Даже малопосещаемые сайты могут заработать, чего трудно достичь баннерами и ссылками.
2. Страницы сайта остаются чистыми и никак не страдают.
3. Высокая оплата.
4. Низкая комиссия системы.
5. Нет никаких проблем со встраиванием в дизайн как у баннеров.
6. Рекламный сайт покажется посетителю только один раз и не будет надоедать, при этом его не обязательно смотреть и легко закрыть как обычную страничку.

Есть конечно и недостатки:

1. Посетитель не выбирает рекламу, она ему насаждается.
2. Если быть неосторожным, поисковики могут заметить, что на сайте есть такая реклама, и могут наложить санкции на сайт. Чтобы поисковику не удалось распознать код рекламы, есть возможность пользоваться “криптованным” кодом. Однако это не спасет Ваш сайт в случае, если какой-либо пользователь обратится с жалобой в поисковик.
3. Если в панели управления не отключить “взрослую” рекламу, то велик шанс показа эротических и порно сайтов, но это можно назвать и плюсом, т.к. заработок тогда гораздо выше.
4. Посетителям неприятно, что какие-то сайты нежелательного содержания открываются без их разрешения.

Недостатки конечно существенные, но частично избавиться от них можно путем выбора нужных категорий (тем) рекламы. Например можно запретить эротику. Можно вообще оставить только рекламу на тему “сад и огород”, если хонечно Ваш сайт тематически соответствует. В этом случае посетитель может даже отнестись к появившемуся окну как к совету или “полезному бонусу”.

Существует много сервисов, предлагающих кликандер. Если Вы решились на такой вид рекламы, то могу предложить этот сервис – в отличие от других, там всегда много рекламодателей. Есть еще один сервис, там довольно приятная панель и нормальная оплата, хорошая служба поддержки, однако иногда нет рекламодателей.

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

Какие преимущества такой рекламы для вебмастеров?

1. Посетители гораздо больше интересуются изображением, чем текстом.

2. Читая текст рядом с картинкой, посетители подтверждают то что их заинтересовало.

3. Больше шанс, что хотябы одна из картинок заинтересует.

4. Красивые и яркие картинки делают страницы живее, но не надоедают.

5. Текст может быть в любом месте. Реклама хорошо настраивается, выбираются цвета, отступы и всё остальное. Есть фильтры по категориям, словам, отключение “взрослой” рекламы, и ручная модерация списка доступной рекламы. Всё это видно даже на моем примере вверху, я специально настроил вид тизеров под дизайн сайта.

6. Количество кликов намного больше, а соответственно и получаемый доход выше чем у ссылок или баннеров.

Какие преимущества для рекламодателей?

1. Клиенты заинтересованы именно в Ваших товарах и услугах, т.е. качественный трафик.

2. Трафик с тизерных систем обычно хорошо конвертируется.

3. Цены Вы назначаете сами.

4. Вы платите за уникальных целевых посетителей, а не за клики. К тому же, можно выбирать регион показа объявлений.

5. Качественная статистика поможет рассчитать оптимальные цены и оптимизировать объявления.

Важно понимать, что лучшее размещение для тизеров – это центр взгляда посетителя, то есть в середине или немного выше на странице, над или под названием статьи или поста. Другие размещения – в виджетах, в меню слева или справа – не дают хорошего результата, т.к. никто там не будет обращать внимания на рекламу. С тизерами внизу дело обстоит двояко: с одной стороны они не видны в начале просмотра, с другой – при окончании чтения поста пользователь может увлечься новой информацией, которой могут быть тизеры. Главное здесь – умело разместить и рассчитать внимание посетителей.

Еще отмечу, что количество кликов пропорционально посещаемости. Если посещаемость очень низкая (меньше 50 чел. в сутки), то как бы Вы ни крутились, заработка почти не будет, и Вы очень долго будете ждать порога вывода денег. Если посещаемость около пары сотен, то тут при правильном и открытом размещении (как я говорил выше), заработка хватит на оплату хостинга и домена (при условии что хостинг взят не дорогой). При болшей посещаемости соответственно больше возможностей получить прибыль. Но количество прибыли зависит не только от посещаемости, но и от тематики Вашего сайта. Если тематика слишком узкая и рассчитана на аудиторию, которой не интересны всякие-разные новости, новинки и интересные сервисы, то прибыль от такой аудитории будет минимальной. Разнообразная аудитория, например на сайтах знакомств, на новостных сайтах или на сайтах развлечений – дает гораздо больше прибыли.

Вот лучший тизерный сервис, в котором я пока не разочарован.

После того, как зарегистрируетесь, нужно естественно добавить свой сайт, ну или несколько сайтов. Затем сайт будет быстро проверен модератором (у меня проверили за полчаса), и станут доступны коды для установки тизеров на страницу. Иногда бывает, что коды в системе изменились, тогда нужно изменить их и у себя на страницах. В общем за системой нужно следить хотя бы пару раз в неделю. Еще очень полезно модерировать тизеры – убирать нежелательные от показа. Редкие системы могут похвастаться этой возможностью. Но у многих на крайний случай есть выбор категорий, которые надо запретить, например “эротика” (кстати фильтры категорий на многих сайтах не работают несмотря на их наличие).

Кроме тизеров, указанный мной сайт предлагает и другие виды рекламы – контекстную, баннеры, кликандер и прочие. У них высокая оплата с низким порогом вывода денег WebMoney, хорошая служба поддержки (можно спрашивать всё!) и простой механизм работы. Рекламу можно поставить на любой сайт, блог, даже с бесплатным хостингом. Для размещения любой рекламы в блогах WordPress, я советую плагин  Shylock Adsense.

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

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

Почему формат EXE? Потому что так любой, кто немного работал в средах типа Delphi и т.п., может написать своё дополнение, не задумываясь про dll. Дополнение будет выглядеть как хочет  автор и это будет сделать также просто как утилитку.

Также, дополнение может быть и в виде серверных скриптов (PHP и т.п.), но в этом случае их использование будет требовать наличия локального сервера Apache, и новичкам будут недоступны.

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

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