Урок №9. HTML. Стилі

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Стилі в HTML. Як зробити каскадну таблицю стилів (CSS) на веб-сайті?

Приклад:

I am Red

I am Blue

I am Big

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

HTML Атрибут style

Встановлення стилю HTML елемента може бути виконано з атрибутом style. Атрибут style в HTML має такий синтаксис:

Приклад:

<tagname style="property:value;">

Property - це властивість CSS. Value - це значення CSS.

Примітка: Докладніше про CSS ви дізнаєтеся пізніше в цьому посібнику.


HTML Background Color (колір фону)

Властивість background-color визначає колір фону для HTML елемента. В цьому прикладі для сторінки встановлено background color: powderblue (блакитний колір):

Приклад:

<body style="background-color:powderblue;">

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

</body>
Спробуйте самі! »

HTML Color (колір тексту)

Властивість color визначає колір тексту для HTML елемента:

Приклад:

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Спробуйте самі! »

HTML Font-family (сімейство шрифтів)

Властивість font-family визначає сімейство шрифту, який буде використовуватися для HTML елемента:

Приклад:

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Спробуйте самі! »

HTML Font-size (розмір тексту)

Властивість font-size визначає розмір тексту для HTML елемента:

Приклад:

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Спробуйте самі! »

HTML Text-align (вирівнювання тексту)

Властивість text-align визначає горизонтальне вирівнювання тексту для HTML елемента:

Приклад:

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Спробуйте самі! »

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


Перевірте себе вправами!


Довідник HTML тегів

Довідник HTML тегів W3Schools містить додаткову інформацію про елементи HTML та їх атрибути.

Примітка: Для отримання повного списку всіх доступних HTML тегів, відвідайте довідник HTML тегів.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.