2 часть тут
25 июля 2023 года. Я вернулась к изучению html. Сегодня на повестке дня пройти раздел № 3 и разобраться что такое CSS.
Как всегда в начале главы меня встречает комикс и первое появление героини, которая представляет собой ту самую CSS -таблицу стилей. В данном случае CSS-колдунья!
Вот уж теперь точно никогда не забуду, что CSS отвечает за стиль!
Оказывается css стили пришли к нам из мира журналистики. Таблицы стилей были способом оформления журнальных страниц в программах для издательской вёрстки. Вот уж за что им спасибо!
Чтобы подключить к своей html странице css, нужно сначала этот css файл создать, а затем в теге <head> подключить его.
<link href="styles.css" rel="stylesheet">
Это всё, что нужно, чтобы работать с нашей таблицей стилей. Обычно файл со стилями располагается в корневом каталоге, чтобы у всех страничек сайта был к нему доступ. Так будет легче вносить правки, если все странички или хотя бы часть использует один css файл.
Чуть не забыла, чтобы из дочерних страничек был доступ к таблице стилей, которая лежит в корне, пишут "/" перед названием файла. Выглядит это таким образом:
<link href="/styles.css" rel="stylesheet">
Дальше по заданию из книги в созданном файле таблиц стилей я прописала вот такую строчку:
p{
font-family: Helvetica, Arial, sans-serif;
}
Это означает, что ко всем тегам <p>, будет применён данный стиль. Шрифт Helvetica, если такого шрифта у пользователя, зашедшего на сайт нет, то будет использоваться второй шрифт в списке Arial, ну а если и его нет, то будет использоваться любой другой шрифт без засечек.
Сохранив файл с html и css, я обновляю сайт и посмотрите, что получилось! Слева было до подключения стилей, а справа после:
А теперь про основные правила языка css
Первым делом, чтобы добавить новое свойство в таблицу стилей, нужно указать селектор. Селектор - это идентификатор, который указывает на фрагменты html, которые подлежат изменению. В нашем случае это был тег <p>. Груба говоря у этого тега мы меняем его свойства.
Сами свойства нужно задавать в фигурных скобках. Таким образом font-family и есть наше свойство, которое мы хотим поменять, а после двоеточия мы указываем нужные нам значения.
Вот ещё пример:
p{
font-size: 16 px;
}
Где font-size это свойство, а 16 px это значение.
Вроде просто, а не всё так просто! Это как с английским языком, ты выучил вначале 50 слов и думаешь, что сможешь говорить на простые темы, но нет, ты не можешь, а всё потому, что в языке ещё куча незнакомых слов, которые ты не понимаешь и из-за этого теряешь смысл сказанного, да ещё и правила грамматики вносят свои 20 кг харда... Всё тоже самое относится и к html с css.
Вот мой первый, казалось бы очень простенький сайт. Но и тут возникли проблемы практически на ровном месте :)
Не смогла отрегулировать картинку в левой колонке по центру, да и вся вёрстка шла коту под хвост, когда я добавляла что-нибудь связанное с размерами :D В книге не описано как это настраивается, а лишь совсем верхушки, которые позволяют создать примитивную страницу, но и это неплохо :) Надо же с чего то начинать )
А это код html страницы:
А тут код css:
Вот и пройдена третья глава книги, дальше нас ждёт WorldPress.