Доброго времени суток уважаемые подписчики.
В этом выпуске продолжим изучение каскадных таблиц стилей (CSS).
Расширим наши знания по свойствам таблиц стилей. Посмотрим на возможности управления ссылками из CSS. Начнем говорить о блоках.
Итак, давайте рассмотрим несколько свойств, связанных с форматированием текста.
font-family — названия применяемого шрифта.
Пример:
|
1 2 3 |
body{ font-family:Arial, Helvetica, sans-serif; } |
Можно указать несколько шрифтов через запятую, это означает, что если на компьютере пользователя нет первого шрифта (Arial), то применится второй (Helvetica), если нет второго, то применится третий, и т.д.
font-style — задает стиль шрифта.
Значения:
italic — курсив
normal — обычный
Пример:
|
1 |
p {font-style:italic;} |
font-weight — задает толщину шрифта
Значения:
normal — обычный
bold — полужирный
bolder — несколько жирнее, чем в родительском элементе
lighter — несколько тоньше, чем в родительском элементе
число — числовое значение(допестимы следующие значения: 100, 200, 300, 400, 500, 600, 700, 800,900.)
Пример:
|
1 |
p { font-weight: 700;} |
font-size — задает размер шрифта.
Значения:
larger/smaller — на 1 больше/меньше чем у окружающих
число — значение в пунктах
число — значение в пикселях
Пример:
|
1 |
p { font-size: 12px;} |
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 пишем:
|
1 2 3 4 |
body{ font-family:Arial, Helvetica, sans-serif; font-size:14px; } |
Для заголовков зададим красный цвет, шрифт — курсивный.
|
1 2 3 4 |
h2{ color: #FF0000; font-style:italic; } |
Выделим какой-нибудь абзац жирным шрифтом, с размером шрифта 11px.
|
1 2 3 4 |
.paragraf1{ font-size:11px; font-weight:600; } |
(и для параграфа, к которому мы хотим это применить, укажем p class="paragraf1").
Выделим какой-нибудь абзац курсивом, с темно-серым цветом, с серым цветом фона.
|
1 2 3 4 |
.paragraf2{ color:#333434; background-color:#CCCCCC; } |
(и для параграфа, к которому мы хотим это применить, укажем p class="paragraf2").
Принцип, надеюсь, понятен.
Теперь рассмотрим управление ссылками.
В CSS есть 3 типа ссылок:
a:link — не посещенная ссылка
a:visited — посещенная ссылка
a:active — активная ссылка
a:hover — ссылка, над которой расположен курсор мыши
В принципе это есть отдельные классы, применяемые исключительно для ссылок.
Создадим ссылку в начале документе. Для ссылок, в таблице стилей укажем следующие правила:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
a:link{ color:blue; } a:visited { color:red; } a:active { color: black; } a:hover { color:aqua; } |
Это у нас для всех ссылок в документе.
Пришло время познакомиться еще с одним способом задания класса.
Можно задавать стиль форматирования для элемента, находящегося внутри другого элемента. Это означает, что, если у нас (в данном случае) ссылка находится внутри тега <p> с классом .paragraf1, то она будет синего цвета без подчеркивания, а при наведении станет подчеркнутой. Если данное условие не выполняется (ссылка не находится внутри <p> со стилем .paragraf1), то она будет отображена со стилем, определенном для всех ссылок в документе.
Синтаксис этого следующий:
|
1 2 3 4 5 6 7 8 |
.paragraf1 a{ color:blue; text-decoration:none; } .paragraf1 a:hover{ color:blue; text-decoration:underline; } |
Давайте сделаем ссылку внутри <p>с классом .paragraf2 белого цвета на синем фоне, а при наведении желтого цвета на черном фоне.
|
1 2 3 4 5 6 7 8 9 10 |
.paragraf2 a{ color:#ffffff; background-color:#000099; text-decoration:none; } .paragraf2 a:hover{ color:#FFFF00; background-color:#000000; text-decoration:none; } |
Думаю понятно, как работают ссылки и как для них задавать свойства через CSS. Попробуйте сами задавать различные свойства ссылкам.
Теперь давайте познакомимся еще с парой тегов. Это тег <div>…</div> и тег <span> …</span>.
Эти теги применяются, если надо выделить какой-нибудь фрагмент на странице не обозначенный никаким другим тегом. То есть, если нам нужно выделить какое-нибудь предложение в абзаце красным, то мы его заключаем в тег <span> наше предложение </span> и применяем к нему стиль.
Пример:
|
1 2 3 4 5 6 7 8 |
<span class="red"> "Чего ты так голову повесила да бродишь тут одинешенька?" - "Ах, - отвечала лошадь, - на свете так ведется, что скупость и верность не могут ужиться в одном доме: мой господин забыл, сколько я ему услуг оказывала в течение моей долгой службы, и вот из-за того, что я теперь не могу так же хорошо пахать, как прежде, <a href="#">он мне и корму давать не хочет</a> и выгнал меня из стойла" </span> |
А для класса .red укажем:
|
1 2 3 |
.red{ color: red; } |
Чем же различаются эти два тега?
Тег <span> — строчный, внутри него может быть только текст, а тег <div> — блочного типа, внутри него могут располагаться любые другие теги(картинки, абзацы, списки, таблицы и т.д.).
На этом завершим данный выпуск, если возникли вопросы, пишите.
Просьба присылать с вопросом ваш код того, что вы делаете. Так будет проще и мне понять, что у вас не получилось и дать вам четкий ответ, и вам меньше объяснять в письме, что у вас не выходит.
Обязательно скачайте себе html и css документы в качестве результата данного урока по ссылке:
И проработайте урок, поглядывая на результат.
Успехов в учебе!
Комментарии (29)