Выпуск №7. Продолжаем CSS

css

Доброго времени суток уважаемые подписчики.

В этом выпуске продолжим изучение каскадных таблиц стилей (CSS).
Расширим наши знания по свойствам таблиц стилей. Посмотрим на возможности управления ссылками из CSS. Начнем говорить о блоках.

Итак, давайте рассмотрим несколько свойств, связанных с форматированием текста.

font-family — названия применяемого шрифта.

Пример:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Можно указать несколько шрифтов через запятую, это означает, что если на компьютере пользователя нет первого шрифта (Arial), то применится второй (Helvetica), если нет второго, то применится третий, и т.д.

font-style — задает стиль шрифта.

Значения:

italic — курсив

normal — обычный

Пример:

font-weight — задает толщину шрифта

Значения:

normal — обычный

bold — полужирный

bolder — несколько жирнее, чем в родительском элементе

lighter — несколько тоньше, чем в родительском элементе
число — числовое значение(допестимы следующие значения: 100, 200, 300, 400, 500, 600, 700, 800,900.)

Пример:

font-size — задает размер шрифта.

Значения:

larger/smaller — на 1 больше/меньше чем у окружающих

число — значение в пунктах

число — значение в пикселях

Пример:

text-align — выравнивание текста

Значения:

left — по левому краю

right — по правому краю

center — по центру

justify — по ширине

text-decoration— задает оформление текста

Значения:

none — без оформления

underline — текст подчеркнутый

overline — черта сверху

line-though — текст перечеркнутый

Это, пожалуй, основные свойства работы с текстом. Теперь, давайте, их применим к странице.

Я рекомендую использовать 3-ий способ внедрения CSS в html документ(<link rel="stylesheet" type="text/css" href="mystyle.css" />).

Сохраните наш lesson2.html файл из урока № 2 в папку с 7-ым уроком под именем lesson7.html(там должно быть две сказки). Сейчас мы их начнем форматировать средствами CSS.

Создаем новый текстовый документ, сохраняем в папку с 7-ым уроком под названием style.css.
Подключаем его к lesson7.html(<link rel="stylesheet" type="text/css" href="style.css" />).

В файле style.css пишем:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Для заголовков зададим красный цвет, шрифт — курсивный.

Выделим какой-нибудь абзац жирным шрифтом, с размером шрифта 11px.

(и для параграфа, к которому мы хотим это применить, укажем p class="paragraf1").

Выделим какой-нибудь абзац курсивом, с темно-серым цветом, с серым цветом фона.

(и для параграфа, к которому мы хотим это применить, укажем p class="paragraf2").

Принцип, надеюсь, понятен.

Теперь рассмотрим управление ссылками.

В CSS есть 3 типа ссылок:

a:link — не посещенная ссылка

a:visited — посещенная ссылка

a:active — активная ссылка

a:hover — ссылка, над которой расположен курсор мыши

В принципе это есть отдельные классы, применяемые исключительно для ссылок.

Создадим ссылку в начале документе. Для ссылок, в таблице стилей укажем следующие правила:

Это у нас для всех ссылок в документе.

Пришло время познакомиться еще с одним способом задания класса.

Можно задавать стиль форматирования для элемента, находящегося внутри другого элемента. Это означает, что, если у нас (в данном случае) ссылка находится внутри тега <p> с классом .paragraf1, то она будет синего цвета без подчеркивания, а при наведении станет подчеркнутой. Если данное условие не выполняется (ссылка не находится внутри <p> со стилем .paragraf1), то она будет отображена со стилем, определенном для всех ссылок в документе.

Синтаксис этого следующий:

Давайте сделаем ссылку внутри <p>с классом .paragraf2 белого цвета на синем фоне, а при наведении желтого цвета на черном фоне.

Думаю понятно, как работают ссылки и как для них задавать свойства через CSS. Попробуйте сами задавать различные свойства ссылкам.

Теперь давайте познакомимся еще с парой тегов. Это тег <div></div> и тег <span> …</span>.

Эти теги применяются, если надо выделить какой-нибудь фрагмент на странице не обозначенный никаким другим тегом. То есть, если нам нужно выделить какое-нибудь предложение в абзаце красным, то мы его заключаем в тег <span> наше предложение </span> и применяем к нему стиль.

Пример:

А для класса .red укажем:

Чем же различаются эти два тега?

Тег <span> — строчный, внутри него может быть только текст, а тег <div> — блочного типа, внутри него могут располагаться любые другие теги(картинки, абзацы, списки, таблицы и т.д.).

На этом завершим данный выпуск, если возникли вопросы, пишите.

Просьба присылать с вопросом ваш код того, что вы делаете. Так будет проще и мне понять, что у вас не получилось и дать вам четкий ответ, и вам меньше объяснять в письме, что у вас не выходит.

Обязательно скачайте себе html и css документы в качестве результата данного урока по ссылке:

Архив 7 урока

И проработайте урок, поглядывая на результат.

Успехов в учебе!

киберсант-вебмастер

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии (29)