Поточний час:
Сьогодні 23 липня, понеділок 2018 рік
Zura-Blog 3 роки 7 місяців 4 дня

Ваш ip адрес:54.224.103.239

Доброго дня!
Ви обновили сторінку в 18 : 31
Статистика

Кількість публікацій на блозі: 376
Кількість коментарів на блозі: 107
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

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

В данной публикации будут полностью описаны способы подключения стилей CSS, и гораздо доступнее разъяснения чем в статье под названием “Включение CSS в документ HTML”

первый способ

Первый способ подключения стилей CSS называется “связки”  для данного способа используются внешние таблицы стилей. Открываем notepade ++ и создаем новый документ, сохраняем этот документ как  style.css , создаем папку с названием   сss и в данную папку помещается файл style.css, в папке  сss нам нужно размещать все файлы с расширением  сss . Наш файл style.css должен быть в данной папке. Следующие действия, теперь нам нужно этот файл подключить к   HTML документа .

Открываем наш  HTML документ с помощью текстового редактора notepade ++ , в области head подключается данный стиль  CSS , с помощью специального тега который называется “link” , это одинарный тег, в этот тег добавляется несколько атрибутов.

Первый атрибут “href”

Этот атрибут будет указывать браузеру где находятся файл   style.css он находится в папке CSS файл  style.css

следовательно перед закрывающим тегом </ head> прописываем тег  “link” <link к тегу  “link” добавляем атрибут  “href” в данном атрибуте выставляем равна где в кавычках указываем сначала где находится папка  CSS  потом ставим слэш и название файла style.css который находится в данной папке.

Второй атрибут который указывается после атрибута  “href” это атрибут “type”

Второй атрибут  “type”

Должны указать тип подключаемого документа, после href = “css / style.css” прописываем атрибут “type” дальше равна и в кавычках указываем тип документа, text  дальше слэш и  css

Следующий атрибут это атрибут “rel” означает “взаимосвязь”  дальше у нас равна, а в кавычках значение “stylesheet” .

Не имеет значения из атрибутов  “type” или “rel”  вы пропишите первым после атрибута  “href”

<Ссылка HREF = “CSS / style.css” отн = “таблица стилей” Тип = “текст / CSS”>

link href="css/style.css" rel="stylesheet" type="text/css" >

<p style=”text-align: justify;”><sup><span style=”font-family: verdana, geneva; font-size: 12pt;”>код выше осуществляет связь между каскадными таблицами стилей и <strong>html-страницей</strong> , когда браузер будет открывать <strong>html-страницу</strong> тогда благодаря данному коду он привяжите эту страницу с   <strong>html-кодом</strong> .</span></sup></p>
<p style=”text-align: justify;”><sup><span style=”font-family: verdana, geneva; font-size: 12pt;”>К одной  <strong>html-страницы</strong> можно подключать несколько кодов. После того как мы подключили таблицу стилей, открываем файл <strong>style.css</strong> с помощью <strong>notepad ++</strong> и заполняем файл дадаючы n-количество стилей.</span></sup></p>
<p style=”text-align: justify;”><sup><span style=”font-family: verdana, geneva; font-size: 12pt;”> К примеру:</span></sup></p>

body{
background-image:url(../images/70408.jpg);
}
p{
  font-family:verdana;
  font-size:12px;
  line-height:20px;
  text-indent:25px;
  color:#000000;
 }
 a:link{
  color:#FF6347;
   }
a:visited{
   color:#FFFAFA;
   }
a:hover{
  color:#00FF00;
  }
 a:active{
  color:#EE82EE;
  }

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

селектрор { властивість:значення властивість:значення властивість:значення }

второй способ

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

Чтобы использовать данный способ нужно сначала прописать теги <style> </ style> а затем в середине ци тегов, мы например можем взять все то, что прописали в первом спсоби, можем скопировать и прописать в другой способ, между тегами  <style> Итак стиле можно прописывать внутри страницы.

К примеру:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http–equiv= "Content–Type" content= text/html; charset=windows-1251″>
<title>Zura-syte</title>
<style>p{
  font-family:verdana;
  font-size:12px;
  line-height:20px;
  text-indent:25px;
  color:#000000;
 }
 a:link{
  color:#FF6347;
   }
a:visited{
   color:#FFFAFA;
   }
a:hover{
  color:#00FF00;
  }
 a:active{
  color:#EE82EE;
  }</style>

Третий способ.

Можно создать одну базовую таблицу, а затем внутрь таблицы с помощью команды import вставлять другие таблицы. Как это делается. Открываем файл  style.css и перед всеми селекторами добавляем собачка @import потом url в скобках указываем таблицу ( “”) . Если таблица стоит в той же папке тогда путь прописывать не нужно.

Но перед тии как прописать данные, нужно создать новый документ для другой таблицы стилей.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *