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

css

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

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

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

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

Пример:

body{
font-family:Arial, Helvetica, sans-serif;
}

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

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

Значения:

italic — курсив

normal — обычный

Пример:

p {font-style:italic;}

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

Значения:

normal — обычный

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

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

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

Пример:

p { font-weight: 700;}

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

Значения:

larger/smaller — на 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 пишем:

body{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

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

h2{
color: #FF0000;
font-style:italic;
}

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

.paragraf1{
font-size:11px;
font-weight:600;
} 

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

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

.paragraf2{
color:#333434;
background-color:#CCCCCC;
}

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

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

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

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

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

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

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

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

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

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

a:link{
color:blue;
}
a:visited {
color:red;
}
a:active {
color: black;
}
a:hover {
color:aqua;
}

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

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

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

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

.paragraf1 a{
color:blue;
text-decoration:none;
}
.paragraf1 a:hover{
color:blue;
text-decoration:underline;
} 

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

.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> и применяем к нему стиль.

Пример:

<span class="red">
"Чего ты так голову повесила да бродишь тут одинешенька?" -
"Ах, - отвечала лошадь, - на свете так ведется,
что скупость и верность не могут ужиться в одном доме:
мой господин забыл, сколько я ему услуг оказывала в течение моей долгой службы,
и вот из-за того, что я теперь не могу так же хорошо пахать, как прежде,
<a href="#">он мне и корму давать не хочет</a> и выгнал меня из стойла"
</span>

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

.red{
color: red;
} 

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

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

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

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

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

Архив 7 урока

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

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

Комментарии Facebook:

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

  1. Андрей

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

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

    Здесь вы ошиблись и вместо тега написали и не обьяснили чем они между собой отличаються — блочный элемент, а — строчный, что евляеться одним из вопросов на собеседовании при приемке на роботу HTML — верстальщиков.

    • Александр

      Для первого комментатора Андрея. Извините за корректировку. Быть может Вы грамотно поправили автора урока в своём комментарии, но надо ещё проверять свой личный текст на орфографию… Несколько грубейших грамматических ошибок в двух строчках.!!!..
      Не «евляеться», а «является». Проверка — Явка. Вопросительная и неопределённая форма глагола «Что делать? Что сделать? «- на конце стоит мягкий знак. Значит и слово «явиться, являться» пишется с мягким знаком — явиться. А если без мягкого знака в настоящем времени ( Что делает? — является), тогда и слово «является» — без мягкого знака.
      Слово — робота… Очень режет зрение и слух. Нет такого слова в русском языке. Самое известное проверочное слово — РАБ! А значит — Работа.
      Извините, но это тоже очень важно!

      • Сергей

        А ведь по сути Андрей прав… (хот и с ошибками написано)

      • Людмила

        Да, конечно, приятно читать грамотно составленные сообщения.
        Но мое личное мнение: если тема собщения не касается грамматики и орфографии, самое главное — суть.
        И первый комментарий очень даже в тему был сказан.
        О различии упомянутых тегов действительно во многих источниках забывают сказать, а оно очень существенное.
        =============================================
        * есть такое явление как элементарные опечатки;
        * некоторые люди, хорошо разбирающиеся в точных науках, могут быть абсолютно безграмотными, так как их мышление очень далеко ушло от всего гуманитарного :) )
        но самое главное — захотеть их понять! ^-^ ))

      • Александр

        Вы меня конечно простите сударь, но вы являетесь социальным роботом и скрупулёзным мудаком, придираясь к орфографии человека, запнувшего вас по успеху! Займитесь верой в себя вместо разжигания гнусной зависти и вражды… Тьфу на вас! Надеюсь не допустил ошибок, отрезающих ваших ушей. А на дисках Андрея, я очень быстро вырос, поскольку это прекрасный человек, доступно поясняющий синтаксис. Жму ему руку, а на вас ещё раз тьфу!!!

        • Виктор Рог

          По спокойнее. Каждый имеет право на свое мнение!

          • Баночкин Сергей

            Согласен с Михаилом Алексеевичем, Давайте любить РУССКИЙ ЯЗЫК.
            И нечего обижаться, — один талантлив в одном: он нас этому учит, а другой в другом, — и он тут же учит первого, а мы читающие получаем сразу два урока. Так, в чем тут обиды?
            Грамотнее становиться просто полезно и приятно самому. — при чем тут зависть?
            = Баночкин С. =

  2. артем

    Спасибо! Все понятно и доступно, особенно после практического применения.

  3. Ярослав

    чет у меня не получилось. ни с параграфами ни фоном ни с цветом

  4. Елена

    Андрей Спасибо большое! У меня все получилось! Все доступно и понятно написано! Спасибо, что Вы создаете уроки для людей разных профессий, не для программистов!!! СПАСИБО!!!

  5. Женя

    Хорошо изложено. Материал полезный. Спасибо.

  6. Анна

    спасибо за урок, жду следующий)

  7. Иммагинатор

    Познавательно!

  8. Tanuxa

    Спасибо, за урок!
    Но у меня почему-то никак не получается сделать ссылку A:ACTIVE, как я не старалась — не получается. Все работают — одна она не хочет. Сто раз проверила, всё правильно записано в коде CSS и архив с уроком скачала. Между прочим A:ACTIVE и в уроке архива не работает!!!
    И LINE-THOUGH (перечеркнутый текст) — не работает!!! Я сначала думала что его на ссылки нельзя, но он и на простом тексте не работает.!? Ни в одном браузере! :)
    А так всё получилось!:)
    Может у вас есть другой адресочек, чтобы можно было письмо вам отослать? Пожалуйста!!!

  9. Николай

    Спасибо за урок!

  10. Сергей Петрович

    Кто о чём, а я о русском языке:

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

    «форматирование» в сознании начинающего юзера это «очистка», «удаление».
    В данном случае речь идёт о создании текста, значит по-русски будет «формирование», а не «форматирование»

    • Andrey Bernacki

      Это у вас ассоциации с форматированием жесткого диска? Если это «очистка», «удаление» как вы говорите, то чем оно отличается от обычного удаления??? Зачем форматировать?
      Для пытливых умов вот статья про форматирование жесткого дика http://ru.wikipedia.org/wiki/%D0%A4%D0%BE%D1%80%D0%BC%D0%B0%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B8%D1%81%D0%BA%D0%B0
      Если до конца с русским разбираться, то синонимы слова форматировать:
      исправлять|по(д)правлять|в(ы)правлять|править|чинить|зачинять|починять|штопать|ремонтировать|производить ремонт|подновлять|реставрировать|подтягивать|подсвежать|(пре)образовывать|реформировать|совершенствовать|перерабатывать|перестраивать|улучшать|приводить в (цветущее) состояние|ладить|улаживать|налаживать|настраивать|упорядочивать|регламентировать|регулировать|очищать|устранять ошибки|корректировать|выравнивать|гладить|заглаживать|чистить|утрясать|распахтывать|укладывать|перемалывать|приспосабливать|подправлять|форматировать|вносить правку|исполнять|делать ремонт|выправлять|поправлять|переправлять|редактировать|вносить исправления|вносить поправки

      А вообще, когда люди видят фразу форматирование текста, то понимают, что это связано с типографикой (преобразование текста, состоящее в формировании заголовков, абзацев, строк)

  11. Михаил Алексеевич

    Желательно,бы,смотреть на видео,как урок№1.Но и на этом — спасибо.Молодец! Человек делает добро для других-бесплатно.

  12. Роза

    Спасибо всё понятно.

  13. Галина

    Уважаемые Господа. Меня задело за живое ваше оживленное обсуждение русского языка. Вам не кажется, что обсуждение не совсем корректное. Помните кота Леопольда? «Ребята, давайте жить дружно.» Ценность данного курса – бесспорная. Владеть грамотно русским языком тоже,казалось бы, факт бесспорный. Но увы! Кроме того, в информационном пространстве существует много терминов, слов и выражений не всегда совпадающих с тем значением, которе дается в толковых словарях. Есть ещё такое понятие,например, в русском литературном – так принято говорить. В языке информатики тоже сформировался свой язык. Да, он не всегда понятен широкой аудитории, но тот, кто хочет, будет учиться. Я преподаватель такой дисциплины – Русский язык и культура речи. В интернете давно, но как сайтовладелец – новичок. Предлагаю свою помощь. Могу проконсультировать, проверить какой-либо текст. Вот адрес моего блога.lakshmi.tmweb.ru Это конечно же не в качестве рекламы сайта. Просто искреннее желание помочь. Желаю всем доброго взаимоотношения со всеми.
    Отправила вторично. в первом есть две опечатки.

  14. Радик

    Здраствуйте! Объясните пожалуйста, как вставить в качестве фона ссылки картинку и чтобы при наведении курсора картинка менялась на другую…покажите пожалуйста на примере, как будет выглядеть код здесь:
    a:link{
    color:blue;
    }

    a:visited {
    color:red;
    }

    a:active {
    color: black;
    }

    a:hover {
    color:green;
    }

    • Андрей Кудлай

      Здравствуйте!
      У нас есть форум, где решаются все подобные вопросы, связанные с кодом. Обращайтесь, пожалуйста, туда.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree