Жирный текст CSS. Пример работы CSS языка 08.02.2013

Здравствуйте, уважаемый читатель! Сегодня будем разбирать на практике суть CSS языка. Как это работает. И поможет нам в этом разобраться простой пример — жирный текст CSS. Моим первым достижением в CSS языке было то, что каким то чудесным образом, и местами для меня же самого не понятным, сделал красную рамочку вокруг кнопочек соц. сетей на одном из своих сайтов. Вот как это выглядит до сих пор:

Когда это у меня получилось, помню я испытал массу эмоций от того что я это сделал сам! Но увы разобраться с тем почему это так работает у меня тогда терпения не хватило... Я наверно час с этой рамкой возился, если не больше. :)

Ну а сегодня я хочу вам помочь на примере жирного текста CSS, не решить конкретно техническую задачу, а объяснить суть того как можно воздействовать на HTML документы по средствам CSS языка.

Для начала скачайте ИСХОДНИКИ, которые я для вас подготовил.

Итак, распаковав скачанный архив вы увидите в нем 3 файла:

  1. index.html;
  2. style.css;
  3. как подключить css файл к сайту.txt.

Вот как это должно выглядеть у Вас:

Кликнете два раза по index.html. Перед нами открылся прекрасный стих Федора Ивановича Тютчева, который в полной мере отображает менталитет нашего Русского народа. Теперь возвратимся в нашу папку и откроем наш index.html с помощью notepad++ (как его скачать и установить я рассказывал тут>>) Ну думаю вы и так уже с ним знакомы. Мы видим в нашем индексном документе обычный html каркас страницы. Собственно, каждый каркас у нас будет так и выглядеть, ничего сложного.

Поставим перед собой задачу сделать жирный текст на CSS для всех параграфов нашего текста (это тег <p></p>, кто забыл).

Открываем файл - как подключить css файл к сайту.txt и выполняем инструкцию которая там написана. Все, теперь наш style.css подключен к index.html и мы можем воздействовать на index.html по средствам правил прописанных в style.css. Далее открываем stiye.css, с помощью все того же notepad++,  и видим там всего лишь несколько строк текста:

body {
padding: 0;
margin: 0;
}

Они обозначают что все отступы у нашего тела сайта мы убираем (некоторые браузеры любят делать свои отступы от границ экрана, чтобы все смотрелось идентично и во всех браузерах, мы убираем эти отступы).

Как видите body — это наш тег в который заключено все видимое содержимое сайта в html каркасе (index.html) мы этого тег писали вот так — <body></body> А чтобы воздействовать на него по средствам CSS мы просто прописали названия этого тега и фигурные скобки, после него. И в фигурных скобках прописали определенные правила, тем самым дали понять браузер что его отступы нам не нужны.

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

Теперь в style.css добавляем следующее:

p {
font-weight:bold;
}

Вот так выглядит команда для того чтобы сделать наш текст жирным. Добавили эту команду и сохранили наш style.css. Теперь идем в браузер, где открыт наш сайт со стишком, обновляем и видим что весь наш текст заключенный в параграфы стал жирным. Задача выполнена!

Надеюсь объяснил все понятно. Ну а вот на сколько хватило фантазии у меня оформить этот стих:

Поверьте, в этом нет ничего сложного :) Вот, скачайте исходник моего варианта оформления стиха и попробуйте в нем разобраться — скачать.

Сегодня, на этом все. Подписывайтесь на обновления моего блога, следите за следующими уроками. Пишите в комментариях, если что то было не понятно. Будем вмести разбираться. Ставьте лайки, если статья оказалась для вас полезной. Спасибо за внимание!

До встречи на Sayt-Stroy.com

Метки: ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

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

ВКонтакте