Рубрики

Как добавить правило CSS на вашей веб-странице

css

Посетитель спросил меня, как он может вставить правило CSS в свою веб-страницу. 

Программное обеспечение

Поскольку мой посетитель не указал программное обеспечение, которое он использовал, я постараюсь сделать мой ответ пригодным для использования независимо от того, используете ли вы визуальный веб-редактор, такой как Expression Web или BlueGriffon, или простой текстовый редактор, такой как Блокнот или TextEdit.

Если вы используете визуальный веб-редактор, откройте в нем веб-страницу и переключитесь в представление «Код» или «Исходный код» программного обеспечения. Вот как это сделать для трех часто используемых редакторов:

  • Expression Web

    Если вы используете Expression Web, поищите в нижней части вкладки с надписями «Дизайн», «Разделить» и «Код». Нажмите на вкладку «Код».
  • BlueGriffon

    Если вы используете BlueGriffon, внизу есть несколько кнопок с надписью «Двойное представление», «Wysiwyg», «Источник» и «Предварительный просмотр». Нажмите кнопку «Источник».
  • Dreamweaver

    Если вы используете Dreamweaver, нажмите «Вид» в строке меню, а затем «Код» в раскрывающемся меню.

Если вы используете простой текстовый редактор, такой как Блокнот, TextEdit или один из множества других бесплатных , просто откройте страницу в нем, и вы уже сможете увидеть исходный HTML-код.

Если правило CSS предназначено только для одной страницы

Если вы хотите, чтобы правило CSS влияло только на одну страницу вашего сайта, добавьте его в раздел HEAD.

Допустим, вы хотите вставить CSS из моей статьи о том, как создать рамку на веб-странице :

.boxed { 
  border: 1px solid green; 
}

Прокрутите до верхней части веб-страницы в редакторе. Если вы посмотрите на строки, которые образуют начало страницы, вы сможете найти строку текста с надписью « <head>». Это <head>тег " ", и он отмечает начало раздела HEAD веб-страницы.

Конец секции HEAD обозначен </head>тегом " ". (Обратите внимание на «/» непосредственно перед словом «голова».) Все строки между « <head>» и « </head>являются частью этого раздела.

Добавьте следующие две строки чуть выше закрывающей </head>строки тега " ":

<style type = «text / css»> 
</ style>

Затем вставьте код CSS между этими двумя строками.

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

<style type = «text / css»> 
.boxed { 
  border: 1px solid green; 

</ style> 
</ head>

В зависимости от используемого вами CSS-кода, могут возникнуть другие изменения, которые необходимо внести на веб-страницу. Например, приведенный выше код просто создает класс CSS с именем « boxed„. Это не заставляет коробки волшебным образом появляться в случайных местах на странице. Вам нужно будет вставить другой HTML-код для стилизации одного или нескольких элементов на странице с помощью этого boxedкласса “ », чтобы он был полезен. Поскольку такой дополнительный код специфичен для задачи, которую вы пытаетесь выполнить, я не могу описать ее в общем виде здесь. 

Если правило CSS для нескольких страниц

Если у вас есть несколько страниц, которым нужно использовать определенное правило, у вас есть как минимум 2 варианта.

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

Внешняя таблица стилей — это простой текстовый файл, содержащий только правила CSS. В нем нет HTML. То есть он не имеет никаких строк " <head>" или « <style>„ или вообще никаких HTML-тегов. Вы можете записать несколько правил CSS в этот файл. Если вы не уверены, как выглядит такой файл, перейдите к мастеру макетов веб-сайта и сгенерируйте код для любого из предоставленных макетов. Созданный styles.cssфайл “ » является примером внешней таблицы стилей.

Так как это обычный текстовый файл, вам нужно будет создать его с помощью простого текстового редактора, такого как Notepad или TextEdit. Если вы используете визуальный веб-редактор, переключите его в представление «Код» или «Исходный код». Какой бы редактор вы ни использовали, начните с полностью пустой страницы и вставьте в нее правило CSS. Затем сохраните файл и закройте его. Вы сделали с файлом.

Примечание: при сохранении файла дайте ему имя, заканчивающееся .cssрасширением " ". Очевидно, что не используйте имя файла, которое уже используется другим CSS-файлом на вашем сайте, иначе вы перезаписаете другой файл и испортите свой дизайн. Как НЕ использовать текстовый процессор, как Microsoft Word, LibreOffice, Wordpad, писать или что - нибудь подобное. Используйте только текстовый редактор или веб-редактор, который знает, как обрабатывать файлы CSS.

После сохранения внешней таблицы стилей измените веб-страницу, добавив в нее строку, подобную приведенной ниже, в разделе HEAD. Поместите его сразу над "</head>строкой, если вы не уверены, куда его вставить.

<link rel = «stylesheet» type = «text / css» href = «boxes.css»>

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

Если ваша страница использует XHTML, а не HTML5 или HTML 4.01, добавьте пробел и косую черту непосредственно перед последним " >", чтобы это выглядело так:

<link rel = «stylesheet» type = «text / css» href = «boxes.css» />

Если вы не знаете, использует ли ваша страница XHTML, HTML5 или HTML 4.01, игнорируйте то, что я только что сказал, и используйте любое из вышеперечисленного (с или без «/»). На самом деле не имеет значения, какой вы используете на практике, поскольку все браузеры будут правильно обрабатывать любой фрагмент кода. Это важно, только если вы хотите проверить страницу в валидаторе и получить отчет «0 ошибок».

Также читают

Понравилась статья? Поделись с другом!!!

Оставить комментарий

 ;-)  :|  :x  :twisted:  :smile:  :shock:  :sad:  :roll:  :razz:  :oops:  :o  :lol:  :idea:  :grin:  :evil:  :cry:  :cool:  :???:

семнадцать − 12 =