Автор:WebForMySelf
Видеокурс по CSS для начинающих.
При верстке веб-страниц HTML отвечает за разметку страницы, то есть за ее построение. А за оформление страницы, то есть за ее дизайн и внешний вид, отвечает CSS. Используя css свойства и их значения, мы назначаем шрифт, размер текста и его начертания, указываем фоновые цвета либо изображения для блоков, назначаем внешний вид границ элементов, их размеры и отступы, управляем видимостью блоков и их позиционированием, и многое-многое другое, что связано с оформлением внешнего вида страницы.
В учебнике по основам CSS для начинающих мы с вами будем изучать css свойства и их значения.
СSS свойств достаточно много и еще больше у них значений. Но особенностью данного курса является то, что мы не будем в нем рассматривать детально все css свойства. Поверьте, мне за почти 10-летний опыт разработки некоторые из них приходилось использовать всего несколько раз, а некоторые в реальных проектах вообще ни разу. Поэтому я не вижу смысла подробно рассматривать все свойства со всеми значениями, некоторые из которых вы, возможно, никогда не примените.
В учебнике по основам CSS для начинающих мы подробно рассмотрим необходимые для создания сайтов css свойства. Изученных свойств вам будет вполне достаточно для создания сайтов практически любой сложности, и при этом количество свойств будет приемлемо для качественного усвоения и запоминания. В курсе предусмотрены задания для самостоятельного выполнения, что помогает лучше освоить css на практике.
Урок 1. Способы подключения
Как мы уже с вами знаем, за внешний вид страницы отвечает css. И для того, чтобы назначать стили для страницы необходимо либо подключить стили css к странице, либо встроить их в страницу. О том, как это можно сделать, какие есть способы подключения стилей к странице, достоинства и недостатки каждого способа, а так же все нюансы, связанные с приоритетом способов подключения, мы с вами разберем в данном уроке.
Урок 2. Назначение классов и id
Для того, чтобы назначить стили для какого-либо блока на странице, необходимо ему назначить класс или id, и затем в css перечислить все необходимые для данного класса свойства с нужными значениями. В данном уроке мы с вами научимся создавать классы и id, поговорим о том, какие классы бывают, чем отличаются id от классов и что в каких случаях лучше.
Урок 3. Свойства шрифта
Именно за информацией посетители приходят на ваш сайт. И наиболее распространенным способом представления информации на странице является текст. Текст должен быть хорошо читаемым, при чтении длинных текстов не должно снижаться внимание и восприимчивость текста. Это все достигается путем правильного оформления текста, подбора шрифта, выделения заголовков и т.д. В данном уроке мы с вами начнем изучать свойства, которые оформляют текст.
Урок 4. Свойства текста
В данном уроке мы с вами продолжим изучать свойства, которые оформляют текст на странице. Кроме шрифта, его размеров и начертания можно назначать для текста выравнивание, межстрочный интервал. Текст можно делать перечеркнутым или подчеркнутым, что используется в ссылках. Все это и многое другое мы с вами научимся делать, изучив данный.
Урок 5. Фон
Фон играет очень большое значение на большинстве сайтов. Задавая фоновый цвет, фоновые градиенты или фоновые изображения оформляется и описывается дизайн веб-страниц. Фоновые изображения можно позиционировать, они могут повторяться, при чем могут повторяться как по вертикали, так и по горизонтали. Устанавливая фоном для различных блоков хорошо нарезанные изображения, можно добиться интересных эффектов на странице. В данном уроке мы рассмотрим все свойства, необходимые для работы с фоном.
Урок 6. Ширина, высота. Тег Div и Span
Как мы уже знаем, классы задаются тегам. Но при верстке веб-страниц постоянно возникает необходимость оформить или как-то выделить несколько элементов или выделить несколько слов в предложении, которые не находятся ни в каком теге. В данном случае нам могут помочь теги div и span. О том, что это за теги, как и в каких случаях их нужно использовать, мы с вами поговорим в данном уроке.
Урок 7. Рамка
Задавая border, мы можем выделить границу блока. Так же есть возможность выделять не всю границу, только одну из сторон блока: нижнюю, верхнюю, левую или правую. Очень часто граница используется в дизайне, при оформлении внешнего вида страниц, как разделитель. Например, указав для блока нижнюю границу, можно отделить друг от друга вертикально идущие блоки. А задавая левую границу, можно визуально разделить блоки, стоящие в одном ряду. В данном уроке мы с вами рассмотрим все, что касается границ элемента.
Урок 8. Отступы
Практически на каждой странице, практически для каждого блока задаются отступы. Для того, чтобы сайт выглядел хорошо и им можно было удобно пользоваться, все логические блоки на странице находятся друг от друга на определенном расстоянии, между абзацами, между заголовками так же присутствует свободное пространство. Достигается это путем задания отступов для блока. Отступы могут быть внутренние и внешние. Обо всем этом мы поговорим в данном уроке.
Урок 9. Основы CSS. Float, Clear, Display
Итак, мы продолжаем цикл уроков "Основы CSS". Как вы уже успели заметить, все блоки на странице располагаются друг под другом. И чтобы «заставить» размещаться блоки в один ряд, нам может помочь свойство float. Область применения данного свойства очень широка: горизонтальные меню, двухколоночные, трехколоночные макеты сайтов можно создавать, используя float. В данном уроке мы рассмотрим все, что связанно с float, а так же рассмотрим свойство display, которое позволяет управлять видимостью блоков и способом их отображения на странице.
Урок 10. Основы CSS. Свойство position
Мы продолжаем цикл уроков основы CSS для начинающих. В уроке Основы CSS: position рассмотрим еще одно css свойство, которое приходится использовать при верстке страниц достаточно часто – это position. Данное свойство управляет позиционированием блоков на странице. Очень часто используется при центрировании блоков, или, например, в случаях, когда необходимо расположить какой-либо блок в правом нижнем углу другого блока, независимо от его размеров и содержимого. В этом уроке мы с вами подробно разберем свойство position.
Было полезно? Ставь лайк
#css #html #разработкавеб-сайтов #версткасайтов #программированиеснуля
