Зовнішні таблиці стилів 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 і введіть таке визначення тегу <Р>:

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

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

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

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

Вправа 5.2

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

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

Вправа 5.3

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

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

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

Вправа 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>.

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

Завдання 1

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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<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>

Математика

</h2>

21 травня

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

</a>

</p>

</div>

<hr>

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

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

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

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

Завдання 2

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

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

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

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

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

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

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

Середня оцінка розробки

Структурованість

5.0

Оригінальність викладу

5.0

Відповідність темі

5.0

Загальна:

5.0

Всього відгуків: 3

Оцінки та відгуки

Пучковська Тетяна 23.02.2023 в 12:02

Загальна:

5.0

Структурованість

5.0

Оригінальність викладу

5.0

Відповідність темі

5.0
Лайбіда Галина Михайлівна 24.09.2022 в 21:35

Дякую! Дуже допомогла мені ваша розробка.

Загальна:

5.0

Структурованість

5.0

Оригінальність викладу

5.0

Відповідність темі

5.0
Ковальчук Наталія Вікторівна 04.11.2020 в 01:36

Загальна:

5.0

Структурованість

5.0

Оригінальність викладу

5.0

Відповідність темі

5.0