20 вересня о 18:00Вебінар: Numicon (Нумікон): проста математика для всіх

Зовнішні таблиці стилів CSS.

Про матеріал
Розробка уроку з інформатики для учнів 9-11класів на тему "Використання стилів в HTML. Стилі CSS"
Перегляд файлу

Урок №61

Стилі HTML - CSS

Стилізація HTML за допомогою CSS

CSS описує, як елементи HTML повинні відображатися на екрані, папері або в інших носіях .

CSS економить багато роботи. Він може керувати розташуванням декількох веб-сторінок одночасно.

CSS можна додати до елементів HTML у три способи:

  • лінійний - за допомогою атрибута style у HTML-елементах
  • Внутрішній - за допомогою <style> елемента в <head>розділі
  • Зовнішній - за допомогою зовнішнього файлу CSS

 

Найпоширенішим способом додавання CSS є збереження стилів у окремих файлах CSS. 

Порада: Ви можете дізнатися більше про CSS у нашому підручнику CSS .


Вбудований CSS

Вбудований CSS використовується для застосування унікального стилю до одного елемента HTML.

Вбудований CSS використовує атрибут style елемента HTML.

Цей приклад встановлює синій колір тексту <h1>елемента:

Приклад

<h1 style="color:blue;">This is a Blue Heading</h1>

Спробуйте самі »



Внутрішній CSS

Внутрішній CSS використовується для визначення стилю для однієї сторінки HTML.

Внутрішній CSS визначається в <head>розділі HTML-сторінки в межах <style>елемента:

Приклад

<!DOCTYPE html>
<html>
      <head>
          <style>
               body {background-color: powderblue;}
               h1   {color: blue;}
               p    {color: red;}
        </style>
    </head>
<body>

  <h1>This is a heading</h1>
   <p>This is a paragraph.</p>

</body>

</html>

Спробуйте самі »


Зовнішній CSS

Для визначення стилю для багатьох сторінок HTML використовується зовнішня таблиця стилів.

За допомогою зовнішньої таблиці стилів ви можете змінити вигляд всього веб-сайту, змінивши один файл!

Щоб використовувати зовнішню таблицю стилів, додайте посилання на неї в <head> розділі HTML-сторінки:

Приклад

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
   <body>

      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>

  </body>
</html>

Спробуйте самі »

В будь-якому текстовому редакторі можна записати зовнішню таблицю стилів. Файл не повинен містити жодного HTML-коду і повинен бути збережений з розширенням .css.

Ось як виглядає "styles.css":

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}


Шрифти CSS

Color - Властивість CSS визначає колір тексту, який буде використовуватися.

font-family - Властивість CSS визначає використовуваний шрифт.

font-size  - Властивість CSS визначає розмір тексту, який буде використовуватися.

Приклад

<!DOCTYPE html>
<html>
  <head>

    <style>

         h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
    }
  p  {
    color: red;
    font-family: courier;
    font-size: 160%;
   }

         </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Спробуйте самі »


 

Межі рамок CSS

Border - Властивість CSS визначає межу навколо елемента HTML:

 

Приклад

p {
  border: 1px solid powderblue;
}
 

Спробуйте самі »


Padding CSS

Padding - Властивість CSS визначає внутрішній відступ (пробіл) між текстом і межею:

Приклад

p {
  border: 1px solid powderblue;
  padding: 30px;
}

Спробуйте самі »

 

margin CSS

margin - властивість CSS визначає зовнішній відступ (пробіл) елемента від іншого елемента:

Приклад

p {
  border: 1px solid powderblue;
  margin: 50px;
}

Спробуйте самі »


Атрибут ідентифікатора

Щоб визначити певний стиль для одного спеціального елемента, додайте до нього 

id - атрибут:

<p id="p01">I am different</p>

потім визначити стиль для елемента з певним ідентифікатором:

Приклад

#p01 {
  color: blue;
}

Спробуйте самі »

Примітка: Ідентифікатор елемента повинен бути унікальним у межах сторінки, тому селектор ідентифікаторів використовується для вибору одного унікального елемента!


Клас Атрибут

Щоб визначити стиль для спеціальних типів елементів, додайте class - до елемента атрибут:

<p class="error">I am different</p>

потім визначити стиль для елементів з певним класом:

Приклад

p.error {
  color: red;
}

Спробуйте самі »


Зовнішні посилання

На зовнішні таблиці стилів можна посилатися з повним URL-адресою або шляхом, пов'язаним з поточною веб-сторінкою.

Цей приклад використовує повну URL-адресу для посилання на таблицю стилів:

Приклад

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Спробуйте самі »

 

Цей приклад посилається на таблицю стилів, розташовану в папці html на поточному веб-сайті:

Приклад

<link rel="stylesheet" href="/html/styles.css">

Спробуйте самі »

Цей приклад посилається на таблицю стилів, розташовану в тій же папці, що й поточна сторінка:

Приклад

<link rel="stylesheet" href="styles.css">

Спробуйте самі »

Докладніше про шляхи файлів ви можете прочитати в розділі Шляхи HTML файлів .


Резюме розділу

  • Використовуйте  style атрибут HTML для вбудованого стилю
  • Використовуйте <style> елемент HTML для визначення внутрішніх CSS
  • Використовуйте <link> елемент HTML, щоб посилатися на зовнішній файл CSS
  • Використовуйте <head> елемент HTML для зберігання елементів <style> і <link>
  • Використовуйте color властивість CSS для кольорів тексту
  • Використовуйте font-family властивість CSS для текстових шрифтів
  • Використовуйте font-size властивість CSS для розмірів тексту
  • Використовуйте border властивість CSS для меж
  • Використовуйте padding властивість CSS для простору всередині блоку
  • Використовуйте margin властивість CSS для простору за межами границі

Практична частина

Вправа 5.1

Оформимо веб-сторінку за допомогою зовнішньої таблиці стилів. 

1.Відкрийте Notped++, створіть новий документ і збережіть його у папку «Урок№61» з назвою mystyle.css і введіть таке визна­чення тегу <Р>:

 

https://lh6.googleusercontent.com/-6xKdqG1vOyEKRZwfKHQCqZ5pOJrD2RQ0VJC6R-umBL6ApW9FUakSP0tAqvbWZojxt1XJVEw0uBPdBwI0Vr3SBrejZWUqZwf9vuPqn5RaVUs7z-g1X-sOx7nGboHmDAlQlZ0iPBw

2. Збережіть файл

3. В Notped++ створіть новий документ і збережіть його у папку «Урок№61» з назвою pryklad1.html:

https://lh3.googleusercontent.com/Wy13QZ6lTkbe2cT0mSF3O799sicT4KCnhYhgVZr365A0C2CmNFJwML3pR6FjX-ccDh68_uUP185-BDCg_-wNi9l8thTHDNsUodaetjpWTb-Ge4yrBpovThq-LMnm8CUxOXwxaq48

Увага! Збережіть цей файл з іменем pryklad1.html у тій самій папці, що і mystyle.css.

5. Відкрийте файл pryklad1.html у вікні браузера (рис. 5.1). Як бачите, хоча в цьому документі не задано жодних параметрів для тегу <Р>...</Р>, текст абзацу набув нових властивостей, які описані в зовнішній таблиці стилів mystyle.css.

https://lh5.googleusercontent.com/Lt2p855tR8pp_88XbVnL4WUJ_cFu4vg2lgiyxF1bTAZbuhN9seGOswfcOxmVCwWkhC2xJo9V8Vjnt24PYa2zMJOHL85sFLLKPxtKgckzKHPdXMfMqIlRPUjSmNbPg7IdCyi7mWe5

 

Вправа 5.2

Визначимо стилі заголовків першого та другого рівнів із викори­станням тегу <STYLE>.

https://lh6.googleusercontent.com/KpP-R9-u1GywLUE9podpHXlXuGGkF-p01MQ1siJUwfiYKemg6xp0EY3igVTRmJcJURYRnasqZ7kfO7pGNfntGgGfJbShXIZZGay8A9jFGPo5f8TcrcNMALXEMYrKBfzV-h1dF1ld

У цьому описі стилю змінено оформлення заголовків Н1 та Н2. Зокрема, для першого призначено розмір 48 пунктів і червоний колір, а для другого — розмір 20 пунктів і синій колір. У вікні браузера цей документ матиме вигляд, як на рис. нижче

https://lh5.googleusercontent.com/20LdrWVC14UuwtHFbZEXncwmnscw6tVdcnQjXd4gzrmmJD477mQmjl8-ZW-8gqxOVowMg21_V3oDnVfRpDv0vv4lCcVUQboVANKUE_aYmYeIhnWVKQ5yOobIeasOPVX5DKiXTp1N

 

Вправа 5.3

Застосовуючи атрибут CLASS тегу </Р>, задамо для двох абзаців різні стилі: першому надамо розмір шрифту 38 пунк­тів, білий колір символів і оливковий колір тла, другому — роз­мір шрифту 46 пунктів, фіолетовий колір символів і рожевий колір тла.

https://lh4.googleusercontent.com/Dkiln6Hdxk900JghMBv0q-tItHvnN8_VyJqS5AmARCmWB9BLCbql8o15K3Q0EwbD4u6iyX6qEL32R9wFFnpv0_K17nFVKEAT_jMp-Sr8F8BheceiGJ3jMogai0Y12PGrj_N8dW52

Який вигляд має цей документ у вікні браузера, показано на рис. 5.3.

https://lh4.googleusercontent.com/pfXdN12ZgaJPXBEsf1mL2LTSJ0UAup5iGXFtd2QnwmER1ryMhkZejm-c0Sg3oiUBkCczfBZ3nqG0pIV-RCeBKWYTSX3FI7H0WLtlt95c25RhLBMyi2ObgOUnUl-QQdOW35-Uedcn

 

 

Стилі дають змогу сформувати сторінку з цікавими ефектами, які інакше можна створити лише за допомогою графіки. Це, наприк­лад, ефект об'ємного тексту або накладання (часткового перекрит­тя) фрагментів сторінки.

Стилі дають змогу сформувати сторінку з цікавими ефектами, які інакше можна створити лише за допомогою графіки. Це, наприк­лад, ефект об'ємного тексту або накладання (часткового перекрит­тя) фрагментів сторінки.


Вправа 5.4

Створення текстових ефектів за допомогою стилів

Визначимо для тегу <BODY> такий стиль: шрифт Arial чорного кольору розміром 16 пунктів. Внаслідок цього весь текст, що міс­титься між тегами <BODY> та </BODY>, буде автоматично відформа­тований відповідно до цих властивостей. Тепер визначимо стилі з іменами тінь, основа, шар1 і шар2. Текст запишемо в шарах, які накладаються. Спочатку відображатиметься шар тінь, а на нього накладатимуться шари основа, шарі та шар2. Порядок накладан­ня задано розташуванням фрагментів тексту в HTML-документі.

Буде застосовано такі властивості:

  • margin-top — відступ згори (за від'ємних значень можна забезпечити накладання фрагментів);
  • color — колір;
  • font-size — розмір шрифту;
  • font-family — сімейство шрифтів (гарнітура);
  • line-height — висота рядка.

Визначені в документі стилі мають такі параметри:

  • .tin — колір зі значенням #DBDBDB (світло-сірий), вирів­нювання по центру, відступ згори — 30 пікселів, розмір шриф­ту — 80 пікселів, висота рядка — 270 пікселів, гарнітура — Times;
  • .osnova — червоний колір шрифту, відступ згори — -230 пікселів, розмір — 70 пікселів, висота рядка — 250 пікселів, гарнітура — Times;
  • .shar1 — чорний колір шрифту, відступ згори-------------------- 100 піксе­лів, розмір шрифту — 50 пікселів, висота рядка 65 пікселів, гарнітура — Arial;
  • .shar2 — зелений колір шрифту, відступ згори — 30 пікселів, розмір шрифту — 35 пікселів, висота рядка — 45 пікселів, гарнітура — Arial.

Для виділення частини HTML-документа використовують тег <DIV>. Він нічого не форматує, а лише відзначає фрагмент тек­сту, який виступає як окремий об'єкт. Атрибут CLASS цього тегу дає змогу посилатися на стилі внутрішньої таблиці й тим самим задавати стиль подання тексту, розташованого між тегами <DIV CLASS...> та </DIV>.

https://lh3.googleusercontent.com/2s3J1fRpKgksfXpJu08bVY8-2J_uhdouDFGcZSoI2jQx7laQleivymtqyc8CvK98DUq1j2ZdRx3yDolQhqFhRmuHuq0iJtx6IhJDetNkZEsHpqf4WHCLOY_ipv2xwc1EKIM_LxcD

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

https://lh3.googleusercontent.com/KO33w2rn3CCuuTAKWeQWtyne3-L_3_SqSMp7dJbDTlyzV04lSznV2cjYMw7BlGrIaefEaZ8O7ILdy_qRkE33kxoHkdk-8tbtYMaBHTJNuXcr1X7OqEBIBnULXCYJvQlYisTMh7JF

Завдання 1

Для цього завдання вам знадобиться веб-сторінка «ЗНО-2019», яку ви створювали на Уроці№58.

Відкрийте за допомогою Notpad++ веб-сторінку «ЗНО-2019», яка міститься у папці «Уроцк№58» з назвою файла index.html.

Перезбережіть даний файл з іменам indexstyle1.html.

Перенесіть всі стилі оформлення елементів веб-сторінки в заголовок, можна для окремих стилів використати ідентифікатор id або class

Наприклад такий вид документа

<!DOCTYPE html>

<html>

 

<head>

    <title>ЗНО 2019</title>

<style>

    body {

      background-image:url('img/11.jpg'); 

    }

    h1 {

      background-color:yellow;

       color:green; text-align:center;

       font-size: 100px;

      font-famili: 'Arial';

      font-style:italic;

       border:2px solid Tomato;

       border-radius:25px;

    }

 

    .pic{

      float:left;height:115px;

      border:0; border-radius:25px;  

    }

    .matem {

      background-color:#FF7F50;

      color:#ffffff;

      text-align:center;

       font-famili: 'Arial';

        border:2px solid #4682B4;

      border-radius:25px;

    }

    #mat{

     font-size: 45px;

     font-style:italic;      

    }

    #mat1{

     font-size:25px;

     font-style:bold;

      }

    .picmat{

      float:right;height:115px;

     width:155px;

      border:2px solid #4682B4;

      border-radius:25px;

       margin-right: 25px; 

    }

    button {

      background-color:#ffffff;

       color:#800000;

       font-size:18px;

      border:2px solid #4682B4;

       border-radius:5px;

      }

    </style>

</head>

 

<body >

    <h1>

        <img src="img/znoo.jpg" alt="zno-2019" class="pic" >

        ЗНО - 2019

    </h1>

      <hr>

     <div class="matem" >

        <h2 id="mat">

            Математика

            <img src="img/mat.jpeg" alt="математика" class="picmat" >

        </h2>

        <p id="mat1">

            21 травня

            <a href="http://zno.academia.in.ua/course/view.php?id=5">

                <button> Підготуватися  </button>

            </a>

        </p>

    </div>

   <hr>

 

Замість такого

Початок веб-сторінки

https://lh4.googleusercontent.com/6Cgm7cAVJ_SmIlElyF1_65wdnmkZCnyOtBy8kv5Vro_Cly6N4UHCSOPXvvJyy1zekeq239vQdJxKkfn41wcNwvlu13DNAPpNl4si4ZS7G6yMgD8g2plJS8_osdBRoMRNcumFPLW-0Ofhy9BWEw

Заголовок веб-сторінки

https://lh4.googleusercontent.com/6Cgm7cAVJ_SmIlElyF1_65wdnmkZCnyOtBy8kv5Vro_Cly6N4UHCSOPXvvJyy1zekeq239vQdJxKkfn41wcNwvlu13DNAPpNl4si4ZS7G6yMgD8g2plJS8_osdBRoMRNcumFPLW-0Ofhy9BWEw

Оформлення інформації для математики

https://lh4.googleusercontent.com/N56hGLz0jncVN4GbhMmheM9LbjQgxgFCaGL3YMGHJilzoEN5DvEBVagGWqLFO91awNHMHL5swLF5lHxZRlamCoGImme8ju3SIiz0Nqc1umtsBT8ReJlP2r76pJMJJVPprUNRWm9BY1OY5XgkOw

Завдання 2

Використовуючи створений веб-документ в завданні 1 , створіть окремий документ з назвою style.css, який збережіть у туж папку, що і документ indexstyle1.html.

Виріжте з документа чистину, що знаходиться між тегами <style></style>

і вставте в документ style.css, збережіть зміни.

В документі indexstyle1.html. замість блоку <style>…..</style>

Вставте тег з посиланням на створену таблицю стилів style.css:

<link rel="stylesheet" href="style.css">

Збережіть зміни і перегляньте результат.

docx
Додано
18 лютого
Переглядів
536
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку