Помощник по CSS

Сайт:	Информатикс
Курс:	2086 9М Информатика
Книга:	Помощник по CSS

Напечатано::	Гость
Дата:	Суббота, 14 Март 2026, 09:13

1. Введение

Выбрать стиль можно 3 способами:
1. Указав файл со стилями внутри тега <link rel="stylesheet" href="название_файла.css"> (тег должен быть внутри тега <head>)
2. Создав тег <style> </style>, и указать стили внутри него
3. Для конкретного тега можно указать с помощью атрибута style (в таком случае селектор и фигурные скобки не требются)

Синтаксис:

Селектор Объявление Объявление

p { color: blue; font-size: 12px; }

Cелекторы бывают:

Выбирающие тег (как в примере выше)
Выбирающие по id (#id1, #text)
Выбирающие по классу (.class1, .text). Также можно указать класс внутри тега (p.text). Тогда селектор будет выбирать элементы соответствующего класса, которые находятся внутри параграфа.
Выбирающие всё! ( * )

Также разрешается указывать разные селекторы через запятую, к примеру:

p, h1, h2

Кроме того, что можно сослаться на названия тегов и атрибутов, можно сослаться на состояние элемента (к примеру, что на него навели мышкой). Делается это с помощью псевдо-классов, и выглядит следующим образом:

p:hover { ... }

Список всех псевдо-классов можно найти здесь: https://www.w3schools.com/css/css_pseudo_classes.asp
Список возможных объявлений можно найти по ссылке выше или здесь: https://cssreference.io/ https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line
Документация на русском: https://developer.mozilla.org/ru/docs/Web/CSS/background

2. Пример

<!DOCTYPE html>

<html>

<head>

<style>

p {
    color: blue;
    font-size: 14px;
}

</style>



<title> Это название страницы! </title>

</head>

<body>

<img src="123.jpg" width=500 height=500>
<h1> <a href="http://ya.ru"> <button> 123 </button> </a> </h1>
<h2> заголовок </h2>
<h3> заголовок </h3>
<p> Bla-bla </p>
<p> Bla-bla2 </p>

<table border=1>
    <tr>
        <td rowspan=2> 1 </td>
        <td> 2 </td>
        
    </tr>

    <tr>
        <td> 3 </td>
        <td> 4 </td>
        <td> 5 </td>
    </tr>
</table>



</body>

</html>

Помощник по CSS

Оглавление

1. Введение

2. Пример