Урок 12. Дизайн сайта с использованием CSS стилей. Работа с текстом.
Среда, 17 августа 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 611
Подписаться на комментарии по RSS
На этом уроке мы начнём использовать на практике каскадные таблицы стилей.
Для этого нам понадобится файл index.html в нашем каталоге test, к примеру, такого вида:
<html> <head> <title>Заголовок</title> </head> <body> <p> Здесь просто текст</p> </body> </html>
Теперь в этом же каталоге создайте ещё один файл, который назовите style.css. Это будет наша страница стилей. Оставьте её пока пустой.
Для того, чтобы стили в style.css влияли на нашу html страницу, их необходимо подключить, для этого в HTML существует тэг <link>.
Вернемся к файлу index.html и подключим к нему нашу таблицу стилей.
<html> <head> <title>Заголовок</title> <link rel="stylesheet" type="text/css" href="style.css"><!—подключаем таблицу стилей--> </head> <body> <p>Здесь просто текст</p> </body></html>
Существуют и другие способы подключения css к html страницам:
1) Внутренние таблицы стилей – таблица стилей, заданная внутри элемента HTML, при помощи атрибута style.
<h1 style="color:red">Это заголовок красного цвета</h1>
Недостаток этого способа: параметр style придется задавать каждому заголовку.
2) Встроенные таблицы стилей - таблица стилей встраивается в заголовок html-страницы. Для этого в HTML существуют теги <style></style>, с параметром type, который указывает, что подключается именно таблица стилей CSS.
<style type="text/css">
h1{
color:red
}
</style>Недостаток этого способа также очевиден: таблицу стилей придется создавать для каждой страницы.
По вышеперечисленным причинам способ подключения с помощью тэга <link> будем считать оптимальным. Вы же можете использовать любой из приведённых выше способов.
Все содержимое наших страницы теперь будет форматироваться с помощью стилей заданных в таблице style.css.
Для начала давайте научимся работать со шрифтами.
Как Вы помните все шрифты можно условно разделить на группы:
Serif - шрифты с засечками;
Sans-serif - шрифты рубленные, без засечек;
Monospace - моноширинные шрифты;
Cursive - курсивные шрифты;
Fantasy - декоративные шрифты;
Теперь попробуем задать шрифт для текста абзаца на нашей странице. В файле style.css пропишем следующий код:
p {
font-family: Fantasy;
}Сохраните файл slyle.css и откройте в браузере файл index.html. Текст, содержащийся в тэге абзаца <p></p> будет выглядеть так:
Попробуем заменить шрифт для тэга абзаца в файле style.css так:
p {
font-family: Monospace;
}Теперь наш текст будет выглядеть так:
Думаем с видом шрифта всё понятно. Теперь попробуем сделать наш текст еще и курсивным:
p {
font-family: Serif ;
font-style:italic;
}Теперь наш текст будет выглядеть так:
Теперь зададим еще и толщину нашему шрифту:
p {
font-family: Serif ;
font-style:italic;
font-weight:bold;
}После этого наша страница будет выглядеть так:
Разницу видно сразу, не так ли? К тому же данный стиль будет применяться ко всем тэгам абзаца на нашей странице:
<html> <head> <title>Заголовок</title> <link rel="stylesheet" type="text/css" href="style.css"><!—подключаем таблицу стилей--> </head> <body> <p>Здесь просто текст</p> <p>А это другой тэг абзаца</p> А так будет выглядеть просто текст, вне тэга абзаца </body> </html>
Результат у нас будет такой:
Можно еще задать размер нашему тэгу абзаца:
p {
font-family: Serif ;
font-style:italic;
font-weight:bold;
font-size:30px;
}Тогда мы получим такой результат:
Впечатляет? А ведь это только начало!!!
В качестве домашнего задания попробуйте разные варианты стиля, размера и шрифта для нашего текста. Опыт – залог успешного обучения и лучшего усвоения материала! Поэтому практикуйтесь!
На этом наш урок закончен. Всем удачи! До встречи на следующем уроке!
- Урок 9. Дизайн сайта с использованием CSS стилей. Теория.
- Урок 10. Дизайн сайта с использованием CSS стилей. Теория. Часть 2.
- Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.
- Урок 12. Дизайн сайта с использованием CSS стилей. Работа с текстом.
- Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
- Урок 14. Создаём кнопку в CSS.
Урок прикольный.Многому научил.Спасибо большое.
Урок действительно классный.Как раз научился что не умел
Урок правда интересный, т.к. таблиц каскадных стилей содержат набор свойств для описания внешнего вида любых HTML документов. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы, что проще и гораздо функциональнее использования обычного набора HTML тегов.
мне понравилось в этом уроке то, что показано несколько способов подключение css к хтмл и описаны недостатки, ну и в целом урок хорошо и граматно написан, а главное доступно для начинающих