Notice: Undefined index: cat_id in /var/www/user/data/www/webmaster.timediplom.com/templ/articles.php on line 5

Notice: Undefined index: list_id in /var/www/user/data/www/webmaster.timediplom.com/templ/articles.php on line 6

Notice: Undefined variable: content in /var/www/user/data/www/webmaster.timediplom.com/templ/articles.php on line 32

Notice: Use of undefined constant name - assumed 'name' in /var/www/user/data/www/webmaster.timediplom.com/templ/articles.php on line 137

Notice: Undefined variable: content_one_page in /var/www/user/data/www/webmaster.timediplom.com/templ/forms/content.php on line 67

Notice: Undefined variable: content_two_page in /var/www/user/data/www/webmaster.timediplom.com/templ/forms/content.php on line 70
CSS » Подробнее о стилях
 
Студия написания качественных web-сайтов
Фразы дня
- Не клади голову на трансформатор - мозги размагнитишь ...
Загрузка...
Главная
Контакты
Статьи
Блог
Портфолио
Обратная связь
Сервисы



CSS/

Подробнее о стилях

Настроение хорошее, желание бурлит потоком - тогда вперед, к постиганию css!

В предыдущей статье мы ознакомились с ключевыми понятиями и терминами для освоения каскадных таблиц стилей. В этой же будут полноценные примеры, "как в жизни".

Итак, первый пункт плана. Как сделать ссылку на css-файл? Смотрите наглядную иллюстрацию ниже:

Ссылки (на css, JavaScript) лучше делать из головы (head), так удобнее. Но, это лишь мое мнение.

Сейчас мы создадим простой html-файл, в котором будет заголовок и несколько блоков, использующих стили. Причем стили будут хранится в отдельном файле. В первую очередь, нужно создать структуру страницы. Кстати, даже если страница без основных тегов, то браузер все равно поймет код, правда, код не будет соответствовать принятым стандартам. Учитесь писать правильно! А сейчас - создание структуры страницы. Если не получается, то смотрите на рисунок ниже.

Костяк сделан. Приступаем к добавлению информации. В тело запишем несколько div с информацией внутри, предварительно назначив классы (это ключи для того, чтобы браузер знал, какой класс подключать), как на рисунке:

После всего сделанного создаем файл css. У меня он будет "лежать" в одной папке. Открываем css-файл и записываем такие строки:

В файле css мы обозначили два класса, это info и date. Описание классов всегда начинается с точки, то есть точка->название->параметры. Все назначаемые стилю параметры всегда записываются в теле фигурных скобок, только фигурных.

Теперь посмотрим результат: открываем файл html через браузер, смотрим. У меня получился такой вывод:

Нечего не заметили? Указанный нами шрифт не применен, дата не "стала курсивом". Все дело в том, что путь к css-файлу не правильно прописан. Я привык писать полностью: хост, путь и название файла, а тут, как ученик, растерялся и прописал неверный путь. Но, это не беда. Исправим это: в файле html, в голове, теги link заменим данные параметры href на названия файла, то есть "style.css". Теперь результат налицо:

Я намеренно улучшил качество последнего изображения, дабы показать, как красиво смотрится со стилями. Но, вы можете еще потренироваться, добавив в параметры классов цвета, например:

 

И результат приукрасится:

Нечего сложного, как может сначала показаться, лишь усердие и тренировка.

Отзывы пишите в каментах, удачи!

2011-07-18




Яндекс.Метрика
Яндекс цитирования