Октябрь 22, 2019 Запись была обновлена
Урок 1. Что такое CSS?
Здравствуй, уважаемый читатель.
Это первый урок изучения CSS. Я уверен что данная технология вам очень понравится. Благодаря ей, можно раскрасить html страницу, придать ей привлекательный вид. После изучения всех уроков по CSS вы будете хорошо понимать как задается оформление на странице, как создаются шаблоны, а также начнете понимать как верстаются шаблоны из простой картинки.
Перед изучением CSS обязательно необходимо знать и понимать что такое html. Без знания html в css не о чем разговаривать. Поэтому ОБЯЗАТЕЛЬНО пройдите уроки по html:
Урок 1. Что такое html?
Урок 2. Параграфы, заголовки
Урок 3. Списки
Урок 4. Изображения Урок 5. Ссылки. Часть 1 Урок 5. Ссылки. Часть 2 Урок 6. Атрибуты Урок 7. Таблицы Урок 8. Выделения текста Урок 9. Формы. Часть 1 Урок 9. Формы. Часть 2 Урок 10. Метатеги Урок 11. Комментарии Урок 12. Теги div и span
Теория и практика
Что же такое CSS? CSS используется для задания цветов, шрифтов, расположения блоков и других аспектов представления внешнего вида веб-страниц. Как и в уроках HTML в CSS мы изучим только основные свойства. Потому что свойств очень много. Но для редактирования шаблонов, а также создания сайтов нет необходимости держать в памяти все свойства и тем более их значения. Мы рассмотрим только основные. Начнем с подключения CSS файла в HTML страницу:
1 2 3 4 5 6 7 8 9 10 | <html> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Первый урок изучения CSS</p> </body> </html> |
Как вы заметили файл со стилями подключается с помощью тега , который находится между тегами . Атрибут определяет отношения между текущим документом и документом, на который ведет ссылка, заданная атрибутом href. Атрибут определяет где находится файл с таблицей стилей. Ну и атрибут определяет тип данных.
Также в той же директории с html страницей создайте файл с расширением CSS. Рекомендую также для редактирования CSS использовать редактор Notepad++. Скачать его можно по ссылке Скачать Notepad++
1 2 3 | body{ background-color:#C1BAFF; } |
Создайте эти два файла. Они будут необходимы для следующих уроков. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.
Больше практикуйтесь!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Юрий,случайно заскочила к Вам в блог и увидела много полезного для себя.Очень хочется изучить функции CSS. Оказывается при помощи ее можно очень многое делать на своем сайте.Буду учиться по Вашим урокам.Правда я еще пока не такая продвинутая,но стараюсь ухватить многое.Спасибо!
Римма, всё у Вас получится. Как и в любом навыке — главное практика!
В уроках CSS у вас почему то нет навигации(( Я имею в виду "Следующий урок" / "Предыдущий урок"
вероятно не предусмотрели разработчики сайта, в поиске вбиваете "урок css" и там легко находите
Добрый день! Добавил навигацию по урокам CSS, сейчас можно также быстро переходить к следующему/предыдущему уроку. Навигация, как в уроках по HTML, расположена в конце каждой статьи.