|
|
|
|
В этом уроке мы с вами рассмотрим способы применения CSS-кода к веб-странице. Способы применения CSS-кода Существует три способа применения CSS-кода к Web-странице. Первый способ Первый способ заключается в использовании атрибута style. Например, рассмотрим следующую строчку: <p>Это моя первая веб-страница</p> В данном примере создается абзац с помощью тегов <p> </p>. Здесь <p> - это начальный тег, а </p> - конечный тег. Между этими тегами размещается строка «Это моя первая веб-страница». Значит, эта строка является абзацем. Теперь изменим строку кода так: <p style="font-weight:bold">Это моя первая веб-страница</p> Как Вы уже заметили, отличается данная строка от предыдущей тем, что к тегу <p> добавлен атрибут style. «Что же это дает?», - скажете Вы. Сейчас объясню. В последнем примере строка «Это моя первая веб-страница» будет отображаться жирным шрифтом в отличие от предыдущего примера. Для того чтобы увидеть результат, создайте новый документ в обычном текстовом редакторе, например, в Блокноте, внесите следующий HTML-код и сохраните файл как index.html: <html> <head> <title>Это моя первая веб-страница</title> </head> <body> <p style="font-weight:bold">Это моя первая веб-страница</p> </body> </html> Второй способ Второй способ заключается в использовании тега <style> в html-коде страницы. Вот пример: <html> <head> <title>Это моя первая веб-страница</title> <style> p{ font-weight: bold; } </style> </head> <body> <p>Это моя первая веб-страница</p> </body> </html> В данном примере все абзацы (строки между тегами <p> </p>) будут отображаться в окне браузера жирным шрифтом. Третий способ Третий способ заключается в создании внешнего файла с расширением *.css. Этот внешний файл можно подключить к Web-странице. Рассмотрим пример: <html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>Это моя первая веб-страница</title> </head> <body> <p>Это моя первая веб-страница</p> </body> </html> В файле style.css нужно написать следующее: p{ font-weight: bold; } В данном примере между тегами <head></head> расположен тег <link>, который используется для создания ссылки на внешний файл (в данном случае на файл style.css ). Обратите внимание на значения атрибутов rel и type и не делайте ошибок в их написании. Если файл находится в другой папке, например, в папке style, то нужно написать так: <link rel="stylesheet" href="style/style.css" type="text/css" /> Вот мы и рассмотрели все три способа применения CSS-кода к Web-странице. Конечно, чаще всего выбирают последний (третий) способ, потому, что один и тот же файл стилей может использоваться сразу всеми страницами сайта. И если вам нужно сделать какое-то изменение в оформлении всех страниц, то вам достаточно сделать это изменение во внешней таблице стилей. В результате изменение будет применено для всех страниц сайта. Что ж, перейдем к следующему уроку! |
|
|