HTML и CSS для начинающих и не только
Подписаться на эту рубрику по RSS
Урок 15. Универсальная кнопка в CSS.
Четверг, 15 сентября 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Просмотров: 1101
Подписаться на комментарии по RSS
На этом уроке мы создадим кнопку, которая будет расширяться и сужаться в зависимости от количества содержащегося в ней текста, её еще называют «резиновой».
Вам больше не придётся задавать параметры отдельно для каждой кнопки, содержащей разное количество текста! Теперь Вы сможете создать единый стиль для всех кнопок, и при этом имена для кнопок задавать самой разной длинны!!!
Наша кнопка будет автоматически растягиваться по горизонтали и вертикали, для вмещения любого количества текста любого объёма или текста, разделённого на некоторое количество строк. Так же мы сделаем эту кнопку ссылкой на какую-то страницу.
Приступим.
Урок 14. Создаём кнопку в CSS.
Вторник, 30 августа 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 751
Подписаться на комментарии по RSS
Создание кнопки с помощью CSS значительно увеличивает скорость загрузки веб-страницы, т.к. при использовании графических изображений ввиде кнопки во-первых, необходимо написать достаточно объёмный код для каждой кнопки и каждого её элемента, во-вторых, само графическое изображение имеет вес, который отягощает загрузку страницы.
Так зачем прибегать к столь сложным методам, если можно получить динамическую кнопку для сайта с меньшей затратой усилий и времени!
На этом уроке мы научимся делать простую динамическую кнопку для сайта, с изменением её внешнего вида при наведении курсора.
Урок 13. Дизайн сайта с использованием блочной модели CSS таблиц стилей.
Пятница, 19 августа 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 608
Подписаться на комментарии по RSS
В уроке 12 мы научились подключать таблицы стилей к нашей html странице и рассмотрели некоторые варианты работы с текстом на странице.
На этом уроке мы создадим первые страницы нашего сайта с использованием СSS!
Как Вы помните из урока 11, блочные элементы визуально создают самостоятельную структурную единицу – блок. Каждый элемент в дереве элементов документа представляет собой самостоятельный блок. Блоки имеют содержимое и отступы вокруг содержимого. Так же они имеют границы, которые можно показать, а можно скрыть, как в таблицах. Границы можно задать для каждой стороны блока: border-top - верхняя граница, border-right - правая граница, border-bottom - нижняя граница, border-left - левая граница. Ещё блок имеет поля (margin), которые задают дополнительное свободное пространство вокруг блока, и Padding (отступы) - позволяют отделить содержимое блока от границы.
Теперь давайте на практике посмотрим что из себя представляет блочный дизайн сайта!
Какого результата мы хотим достичь? Мы создадим три страницы, к которым подключим одну, общую таблицу стилей! Таким образом, мы избавимся от громоздкого кода на каждой странице нашего сайта, пример которого вы видели в уроке 8, при создании табличного дизайна сайта. Это была очень трудоёмкая работа, не так ли? Теперь всё будет гораздо быстрее и удобнее с помощью CSS!
Наши страницы будут иметь следующий вид:
Читать полностью »Урок 12. Дизайн сайта с использованием CSS стилей. Работа с текстом.
Среда, 17 августа 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 610
Подписаться на комментарии по 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>
Урок 11. Дизайн сайта с использованием CSS стилей. Теория. Часть 3.
Вторник, 16 августа 2011 г.Рубрика: Уроки Алёны Ляховой -> HTML и CSS для начинающих и не только
Метки: html
Просмотров: 558
Подписаться на комментарии по RSS
Да, да, да… Мы знаем, что вы уже устали от теории и хотите практики! Но Нам важно сейчас охватить максимально большой объем информации, поэтому поднапряжемся в последний раз, ведь у нас есть хорошая новость – это последний теоретический урок по CSS! Дальше мы займёмся практикой!
Но это совсем не значит, что тему этого урока можно пропустить – без неё вы не сможете разобраться в коде практических уроков и у Вас могут возникнуть осложнения… Так что собираемся с мыслями и продолжаем вводный теоретический курс!На этом уроке мы рассмотрим такие разделы CSS, как блоки и их виды, свойства и позиционирование!
Приступим!
