Советы вебмастеру. Добавление CSS

08.07.2019

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

Существует несколько вариантов осуществления данной операции: использование таблиц вложенных стилей , таблиц внешних стилей и встроенный стиль.

Сегодня мы поговорим именно о последнем способе.

Внедрения стиля в тег HTML

Суть данного способа заключается в том, что необходимое оформление мы внедряем внутрь тега. Для этого создан отдельный атрибут - style . Данный атрибут может быть применен к любому тегу, однако только в рамках тела сайта, то есть в границах body . Значением этого атрибута выступают операторы тех стилей, которые необходимо применить к заданному элементу.

Для примера зададим разные размеры шрифта для двух разных абзацев текста:

< p style= "font-size:25px;" > Задаем этому отрезку текста высоту букв в 25 пикселей. < p style= "font-size:15px; color:#2400ff;" > А этот текст будет с буквами, высотой 15 пикселей, причем еще и подкрасим его синим, чтобы продемонстрировать применение нескольких стилей одновременно.

Недостатки

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

Также можно отметить еще парочку недостатков применения данной методики стилизации. Первым из них можно назвать разброс стиля по всему документу, что в перспективе редактирования усложнит процесс в разы.

Также возникнет трудность в оформлении больших объемов текста. Думаю, никого не радует перспектива прописывать для каждого абзаца размер шрифта, особенно если таких абзацев штук 40.

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

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

Для наглядности посмотрим на пример ниже:

< div style= "font-family: "Roboto Condensed", sans-serif" > Запись корректна. < div style= "font-family: " Roboto Condensed ", sans-serif" > Так тоже правильно. < div style= "font-family: " Roboto Condensed ", sans-serif" > Это не корректная запись. < div style= "font-family: " Roboto Condensed ", sans-serif" > И это тоже не верно

Глядя на выкладки, предоставленные выше, напрашивается логический вывод, что применение встроенных стилей связаны с рядом существенных осложнений и неудобств.

Когда стоит использовать встроенный стиль

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

< div id= "productRate" > < div style= "width: 40%" >

Запись нужной ширины для этого блока будет простейшей операцией.

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

< div style= "background:url(fon.jpg)" >

Также программисты частенько обращаются к встроенным стилям в процессе верстки всплывающих окон. Зачастую этот процесс проходит следующим образом: блоку, над оформлением которого идет работа, прописывается display:block, а остальные окна скрываются посредством display:none, чтобы они визуально не мешали работе программиста. Вот пример:

< div class = "element" style= "display:block" > Всплывающее окно, которое оформляется в данный момент

Итог

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

Существует четыре способа задания CSS стиля для тегов HTML .

1) Inline-стиль .

2) Внедрённый стиль

3) Импортированный стиль.

4) Стиль из файла .

И в этой статье мы разберём все четыре способа.

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

текст

В данном случае мы задали, чтобы элемент "текст " будет размером в 150% и выравнен по центру . Это пример inline-стиля .

Второй способ - это внедрённый CSS стиль , то есть стиль, который задаётся в голове документа, в теге . Например, так:



Здесь будет происходить следующее: для всех элементов внутри тега

будет сделано следующее: их цвет будет красным и отступ сверху будет 100 пикселей.

Третий способ задания CSS стиля - это импортированные стили . Они также, как и внедрённые задаются в голове документа, но уже из файла. Вот пример:



Здесь ко всей странице будут применяться стили из файла "my.css ".

И последние вид CSS стилей - это стили из файла. Данный способ является самым частым, и заключается он в подключении файла стиля через тег в голове документа. Например, таким образом:



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

Взгляните на пример, ниже к нему будут комментарии.




Тег style



Всё о слонах


На этом сайте Вы найдёте любую информацию о слонах.


Купить слона


У нас Вы можете по выгодным ценам приобрести лучших слонов!!


Взять слона на прокат


Только у нас Вы можете взять любых слонов на прокат!!




Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки

,

- будут синими а параграфы

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

Теперь обещанные комментарии:

Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

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

CSS в отдельном внешнем файле.

Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

Body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}

О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.

Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

Тег имеет атрибуты:

href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.
  • shortcut icon - Определяет, что подключаемый файл является .
  • stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
  • application/rss+xml - Файл в формате XML для описания ленты новостей.
type - MIME тип данных подключаемого файла.

Так как мы подключаем в качестве внешнего файла каскадную таблицу стилей, то наша служебная ссылка приобретает следующий вид:

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

Файл mystyle.css
body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
Файл index.html



каскадная таблица стилей



Меню:


Всё о слонах.
Купить слона.
Взять слона на прокат.

Всё о слонах


На этом сайте Вы найдёте любую информацию о слонах.




Файл elephant.html



каскадная таблица стилей



Меню:


Всё о слонах.
Купить слона.
Взять слона на прокат.

Купить слона


У нас Вы можете по выгодным ценам приобрести лучших слонов!!




Файл elephant1.html



каскадная таблица стилей



Меню:


Всё о слонах.
Купить слона.
Взять слона на прокат.

Взять слона на прокат


Только у нас Вы можете взять любых слонов на прокат!!




В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?

  • Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
  • Используйте тег

    Если написать такой код между тегами ... , то все заголовки первого уровня будут синими. При этом способе стили задаются при помощи тегов . Также тегу , но не сайта в целом.

  • Внешние таблицы стилей . Задаются в отдельном файле и подключаются к html-документу при помощи тега , который размещается между тегами ... . Рассмотрим более подробно этот случай. Набираем в блокноте такой вот код и сохраняем его как html-файл.



    Заголовки в html-документе.



    Заголовок первого уровня


    Заголовок третьего уровня, расположенный по центру html-документа


    Заголовок шестого уровня, выравненный по правому краю веб-страницы


    После этого создаём новый файл такого содержания:

    H1 {color:blue;}
    H3 {color:red;}
    H6 {color:green;}

    И сохраняем его как style с расширением *css . Результат смотри . Это наш html-файл с заголовками. Разберём теперь как работает эта конструкция. В html-документе с заголовками мы между тегами ... написали такую строчку:

    Здесь при помощи тега мы подключаем таблицы стилей к html-документу. Атрибут href ссылается на место, где размещён файл со стилями, это обязательный атрибут. Атрибут type мы уже знаем, он указывает тип таблицы стилей. Атрибут rel указывает отношение подключаемого файла к данному html-документу. В нашем случае значение атрибута rel="stylesheet" обозначает, что мы добавили основную таблицу стилей. Плюс такого метода задания таблиц стилей заключается в том, что ели захочется поменять дизайн сайта в целом, достаточно изменить только один файл с таблицами стилей.



    • Похожие статьи
Типы
  • Роутеры
  • Жесткие диски
  • Не включается
  • Принтеры
  • Тормозит
  • Зависает
  • Вирусы
  • Планшеты
Популярные статьи
Новые статьи