В категории CSS собраны бесплатные видео уроки по этой технологии. CSS (Cascading Style Sheets, в переводе с английского - каскадные таблицы стилей) - это формальный язык описания внешнего вида документа, написанного при помощи языка разметки. Используется для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида веб-страниц. Т.е. язык разметки, например HTML, применяется для описания логической структуры веб-страницы, а формальный язык CSS - для описания внешнего вида этой веб-страницы. Изучение CSS по видео урокам онлайн будет полезно как для начинающих, так и для более опытных программистов. Видео уроки из рубрики CSS Вы можете смотреть бесплатно в любое удобное время. К некоторым онлайн видеоурокам по CSS Вы сможете скачать дополнительные материалы для обучения. Удачи Вам!
Учебник по CSS для начинающих - бесплатный курс. Установка софта
В этом видео уроке рассказывается о том, что такое CSS, как создавать HTML сайты с использованием этой технологии. Это первый урок бесплатного обучающего курса по CSS для начинающих. Данный видео учебник будет полезен не только новичкам. Многие опытные Веб-мастера наверняка смогут найти для себя что-то новое. Здесь мы рассмотрим и установим программное обеспечение, которое нам пригодится для изучения CSS. Для начала скачайте архив с дополнительными материалами к данному курсу. Ссылка для скачивания находится ниже. Первое, что нам нужно установить, это расширения Web Developer и Firebug для браузера Firefox. Последние версии данных дополнении для Firefox Вы можете скачать с официального сайта данного браузера. После установки расширений, на панели инструментов появятся новые инструменты, которые мы будем использовать при изучении CSS. Кроме того, данные дополнения значительно облегчат Вам процесс создания и отладки сайтов в будущем. Они содержат инструменты для работы с CSS, HTML, javascript... Видео урок «Учебник по CSS для начинающих - бесплатный курс. Установка софта» вы можете смотреть онлайн в любое время совершенно бесплатно. Удачи Вам!
Видео «Основы по созданию сайта на HTML и CSS» посвящено вопросу о базовых принципах работы с CSS. Итак, разберем, как же работает эта технология. В коде страницы сайта, как правило, содержится HTML код. Причем все теги и атрибуты, связанные с оформлением, т.е. внешним видом страницы, уже считаются устаревшими и их практически никто не использует. Язык HTML используется для создания каркаса сайта, а CSS подключают дополнительно для того, чтобы задать определенный внешний вид сайту и свойства всем его блокам, размер, цвет текста и его шрифт, и многое другое. Таким образом, в файле HTML мы указываем что нужно отображать, а в CSS прописываем как именно это отображать. Благодаря этому принципу, можно не залезая в HTML код, полностью изменить дизайн всего сайта, заменив всего один файл стилей. Файл таблицы стилей имеет расширение .css. Его подключают к HTML страницы путем внесения в её код, специального тега, который прописывается в области head. Браузер, при загрузке страницы сайта, находит эту запись и считывает таблицу стилей по указанному там пути. В файле CSS находится определенные стили, т.е. указания браузеру для отображения содержимого сайта… Видео урок «Основы по созданию сайта на HTML и CSS» вы можете смотреть онлайн в любое время абсолютно бесплатно. Успехов!
Подключение файла стилей CSS к HTML. Виды селекторов - тег, class, id В этом онлайн уроке рассказывается о том, как подключить файл стилей CSS к HTML странице сайта, а также мы поговорим об основных видах селекторов, а именно о селекторе тегов, классов (class) и о селекторе идентификаторов (id). Для начала, создайте новый текстовый файл и сохраните его с именем style.css. Все файлы стилей обычно хранят в отдельной папке сайта. Теперь, для подключения этого файла к HTML документу, необходимо прописать в области head специальный тег link, указав в нем тип подключаемого документа через атрибут type. Кроме того, для тега link нужно обязательно указать атрибут href и присвоить ему путь к файлу со стилями. И последний атрибут, который обычно указывается для подключения CSS, это rel с значением stylesheet, т.е. мы таким образом сообщаем браузеру, что подключаем именно таблицу стилей. К одной HTML странице можно подключить несколько файлов CSS. Например, одна таблица стилей будет отвечать за каркас страницы, вторая за шрифты и оформление текста и т.д. Теперь разберёмся с тем, что из себя представляет конкретный стиль и из чего он состоит. А состоит он из селектора, по которому определяется область воздействия, и перечисления самих свойств и их значений… Видео урок «Подключение файла стилей CSS к HTML. Виды селекторов - тег, class, id» вы можете смотреть онлайн в любое удобное время совершенно бесплатно. Успехов!
Обучение по CSS для начинающих. Групповые селекторы Урок «Обучение по CSS для начинающих. Групповые селекторы» посвящен вопросу о том, как в одной записи CSS задать определенный набор свойств сразу нескольким группам элементов HTML страницы, например, нескольким тегам одновременно. Сделать это можно разными путями. Один из них заключается в том, что нужно создать определенный класс, т.е. значение атрибута class для тегов, и присвоить его всем нужным элементам страницы. Затем, при помощи селектора классов добавить запись в CSS файл с присвоением ему необходимых свойств. Но в некоторых случаях можно использовать более простой способ, который не требует создания классов. Этот метод основан на применении так называемых групповых селекторах. Суть групповых селекторов заключается в том, что селекторы всех необходимых элементов просто перечисляются через запятую и, таким образом, все указанные свойства будут применяться сразу для всех элементов. Такой подход очень часто используется при создании сайтов, т.к. это очень удобно и можно легко добавлять новые селекторы к группе… Видео урок «Обучение по CSS для начинающих. Групповые селекторы» вы можете смотреть онлайн в любое удобное время абсолютно бесплатно. Удачи Вам!
В этом видео рассказывается о том, как в CSS использовать, так называемые, селекторы потомков. Итак, разберемся, что же такое предок и потомок. Все дело в том, что для браузера HTML страница представляется в виде дерева, т.е. каждый элемент занимает своё место в иерархии тегов. Главным из них является тег html. Затем, на одном уровне идут блоки head и body. Видимая часть HTML страницы находится в теге body, в котором также имеется своя иерархия элементов. Например, тег списка ul является родителем (главным) для тега li, т.е. для элемента списка. А тег li является потомком тега ul. Таким образом, все теги, расположенные внутри блока html, являются его потомками. А все элементы в нутрии body, являются потомками тега body, и т.д. На этой системе основывается работа некоторых селекторов CSS, которые нужно учитывать и использовать при создании сайтов. Так, например, для создания селектора потомков для элементов списка, необходимо указать селектор тега списка ul, и через пробел указать селектор элемента списка li. Таким образом, указанные в такой записи свойства, будут распространяться на все элементы li, расположенные внутри списка ul… Видео урок «Изучение CSS. Селекторы потомков» вы можете смотреть онлайн абсолютно бесплатно в любое удобное время. Успехов!
Псевдоселекторы ссылок в CSS - a, link, visited, hover, active
Здесь рассказывается о том, как определить свойства ссылки в зависимости от её состояния. Например, как изменить цвет ссылки при наведении на неё курсора мыши или при клике на ней. При помощи псевдоселекторов в CSS можно задать определенный набор свойств для каждого состояния ссылки. Псевдоселектор ссылок состоит из селектора и состояния. Так, для тега a можно через двоеточие указать конкретное состояние ссылки. Причем делать это нужно в определенной последовательности. Псевдоселектор a:link отвечает за стандартное состояние ссылки и его нужно указывать в первую очередь. Для определения свойств посещенных пользователем ссылок используют запись - a:visited. Псевдоселектор a:hover включается при наведении на ссылку курсора мыши. Т.е. теперь вы легко справитесь с задачей – как изменить цвет ссылки при наведении. Изменение свойств при наведении, это, пожалуй, самый часто используемый приём. Также часто используют состояние при нажатии мышкой на ссылку, т.е. при клике. Определить значения свойств для этого состояния ссылки можно при помощи псевдоселектора a:active. Для определения свойств сразу для всех состояний ссылки, используют обычный селектор a, т.е. без указания через двоеточие конкретного состояния… Видео урок «Псевдоселекторы ссылок в CSS - a, link, visited, hover, active» вы можете смотреть онлайн абсолютно бесплатно в любое время. Успехов!
Видео урок «Как подключить шрифт в CSS. Свойство font-family» посвящен вопросу о том, как в CSS выполняется подключение того или иного шрифта для текста HTML страницы. Для того чтобы изменить стандартный шрифт текста на какой-то другой, используется свойство font-family, что означает семейство шрифтов. В качестве значения для этого свойства необходимо указать название того шрифта, который мы хотим использовать для селектора данного свойства. Но здесь есть одна особенность. Дело в том, что браузеры могут отображать текст HTML страницы только теми шрифтами, которые установлены в операционной системе компьютера посетителя сайта. Поэтому не стоит использовать на своём сайте какие-то редкие шрифты. Лучше выбирать такие шрифты, которые гарантированно присутствуют во всех популярных операционных системах. И здесь тоже есть из чего выбрать. Кроме того для свойства font-family можно указать сразу несколько шрифтов, перечислив их через запятую. И если в операционной системе не установлен первый шрифт из этого списка, сто будет работать следующий. Также можно указать не конкретные шрифты, а группы шрифтов, основных из которых две – это с засечками и без засечек… Бесплатный видео урок «Как подключить шрифт в CSS. Свойство font-family» вы можете смотреть онлайн в любое время. Удачи Вам!
Как изменить размер шрифта в CSS. Свойство font-size
В этом онлайн уроке рассказывается о том, как изменить размер шрифта в CSS. Делается это при помощи свойства font-size, в котором указывается размер шрифта в той или иной единице измерения. Размер шрифта, т.е. расстояние от базовой линии до верхней кегельной площадки, можно указывать в пикселях (px), пунктах (pt), процентах (%), в базовых единицах (em), а также при помощи ключевых слов – medium, small, large и т.д. Базовый размер шрифта, т.е. стандартный размер, который браузеры используют по умолчанию, для каждой единицы измерения, это 100%, 1em, 16px, 12pt и medium. Какие именно единицы измерения использовать для задания размера шрифта, каждый решает сам, т.е. кому как удобнее. Преимущество использовать проценты состоит в том, что при масштабировании страницы в браузере, отображение шрифта происходит более гладко. Т.е. это происходит в том случае, когда пользователь меняет масштаб просмотра в настройках браузера со стандартных 100 процентов на другой. Но в принципе, современные браузеры хорошо справляются с масштабированием и при указании размера шрифта в других единицах. Сейчас для задания размера шрифта чаще всего используют пиксели, т.е. это точка экрана компьютера… Видео урок «Как изменить размер шрифта в CSS. Свойство font-size» вы можете смотреть онлайн совершенно бесплатно в любое время. Успехов!
Жирный и курсивный шрифт текста в CSS. Свойства font-weight и font-style Это видео посвящено вопросу о том, как сделать жирный и курсивный шрифт текста в CSS. Для выделения текста курсивом, предназначено свойство font-style со значением italic. Чтобы выделить часть текста курсивным шрифтом, можно сначала в HTML коде страницы сайта обозначить его тегами span и задать атрибут class. Затем, в таблице стилей, при помощи селектора классов задать свойство font-style со значением italic. Таким образом, обозначенная часть текста будет выделена курсивом, а остальной текст не изменит свой вид. По такому же принципу делается выделение текста жирным шрифтом. Свойство, которое влияет на насыщенность или жирность текста обозначается как font-weight. Данное свойство имеет два основных значения, это normal, т.е. обычный текст и bold – полужирный. Также можно указать более точные значения для жирности шрифта текста при помощи цифр от 100 до 900 с шагом 100. Здесь число 400 соответствует значению normal, bold – это 700. Но жирность поддерживают не все шрифты, поэтому не все значения могут работать… Видео урок «Жирный и курсивный шрифт текста в CSS. Свойства font-weight и font-style» вы можете смотреть онлайн совершенно бесплатно. Удачи Вам!
Как сделать подчеркнутый и зачеркнутый текст в CSS. Свойство text-decoration Онлайн урок «Как сделать подчеркнутый и зачеркнутый текст в CSS. Свойство text-decoration» посвящен вопросу о том, как выделить текст подчёркиванием или перечёркиванием. За такое декоративное оформление текста в CSS отвечает свойство text-decoration. Оно имеет несколько значений. Первое из них это underline, что означает подчеркивание текста. Следующее значение overline ответственно за верхнее подчеркивание текста. И последнее значение line-through используется для перечеркивания текста. Подчеркнутым текстом часто выделяют ссылки как в обычном состоянии, либо при наведении на них курсора мыши. Зачеркивание можно использовать, например, для обозначения скидок на товары, указывая старую цену зачеркнутой, а новую – без зачеркивания. Такое оформление очень часто используется Интернет-магазинами. Верхнее подчеркивание используется достаточно редко, но возможно когда-нибудь это пригодится. Для избавления текста от декоративного оформления предназначено значение none, которое обычно используется для того, чтобы убрать подчеркивание со ссылок, т.к. многие браузеры по умолчанию делают их подчеркнутыми… Видео урок «Как сделать подчеркнутый и зачеркнутый текст в CSS. Свойство text-decoration» вы можете смотреть онлайн абсолютно бесплатно. Успехов!
Выравнивание текста и красная строка в CSS. Свойства text-align и text-indent
В этом видео уроке рассказывается о том, как в CSS сделать выравнивание текста и отступ абзаца от края (красная строка). Для этого в CSS предусмотрены два свойства, это text-align и text-indent. За выравнивание текста отвечает свойство text-align, которое может иметь четыре значения. По умолчанию браузер выравнивает все элементы HTML страницы по левому краю, это соответствует значению left. Чтобы выровнять текст по правому краю, нужно использовать – right, а по центру – center. Также часто возникает необходимость выровнять текст по всей ширине страницы сайта или блока. Для этого нужно использовать значение justify. Таким образом, браузер будет выравнивать текст одновременно и по левому краю и по правому за счет увеличения расстояния между словами. Теперь рассмотрим свойство text-indent. Оно предназначено для создания так называемой, красной строки, т.е. это отступ текста от края строки в абзаце (параграфе). Данному свойству можно присвоить расстояние в пикселях или в других единицах измерения… Видео урок «Выравнивание текста и красная строка в CSS. Свойства text-align и text-indent» вы можете смотреть онлайн в любое время совершенно бесплатно. Удачи Вам!
Высота строки, регистр текста, расстояние между словами и буквами в CSS Видео «Высота строки, регистр текста, расстояние между словами и буквами в CSS» посвящено вопросу о том, как в CSS задается межстрочный интервал, расстояние между словами и буквами, а также как оформить текст в нижнем или верхнем регистре. Межстрочный интервал – это расстояние между строками, а точнее между базовыми линиями строк текста. Для его определения предназначено свойство line-height, которое может иметь значение normal, что соответствует значению по умолчанию для данного шрифта. Также можно присваивать конкретное значение в пикселях, а также допускается использовать множители. В этом случае указывается число без указания единицы измерения. Таким образом, браузер будет умножать базовое расстояние на это число. Для изменения расстояния между словами используется свойство word-spacing, которое также может иметь значение normal и любое другое в конкретной единице измерения. Следующие свойство, которое мы изучим, это letter-spacing. Оно позволяет изменять расстояние между буквами. Свойство text-transform позволяет задать регистр текста. Возможные значения: uppercase, lowercase и capitalize, что соответствует заглавным буквам (верхний регистр), прописным буквам (нижний регистр) и выделение каждой первой буквы в слове заглавной… Видео урок «Высота строки, регистр текста, расстояние между словами и буквами в CSS» вы можете смотреть онлайн в любое время абсолютно бесплатно. Успехов!
Сокращенная запись в CSS для определения шрифта текста. Свойство font В этом онлайн уроке рассказывается о том, как в CSS задавать свойства шрифта текста, используя сокращенную запись. Для этого предназначено свойство font, с помощью которого можно записать все свойства текста в одной строке. Т.е. мы можем через пробел, в определенной последовательности, перечислить название шрифта, его размер, цвет, жирность и т.д. Это существенно сокращает запись в файле CSS, особенно в том случае, если изменяется много свойств текста. Теперь по подробней изучим последовательность, в которой нужно перечислять составляющие значения свойства font. Первым нужно указывать значение для font-style, затем font-variant, font-weight (жирность текста), font-size (размер шрифта), line-height (высота строки) и в конце указывается font-family, т.е. семейство шрифтов, в котором можно указать несколько значений через запятую. Первые три свойства в данном случае указывать не обязательно, а вот размер шрифта и семейство шрифтов нужно написать. Не обязательно указывать и высоту строки… Видео урок «Сокращенная запись в CSS для определения шрифта текста. Свойство font» вы можете смотреть онлайн в любое удобное время совершенно бесплатно. Успехов!
Как сделать, убрать рамку в CSS. Толщина, стили, цвет. Свойство border Урок «Как сделать, убрать рамку в CSS. Толщина, стили, цвет. Свойство border» посвящен вопросу о том, как делается рамка для HTML элементов – таблицы, вокруг текста, картинки и т.д. Для создания рамки в CSS предусмотрено три свойства. В свойстве border-width указывается толщина рамки в пикселях, а border-style отвечает за её стиль. Здесь можно указать следующие значения: dotted (точечная), dashed (пунктирная), solid (сплошная) и double (двойная). За цвет рамки отвечает свойство border-color. В CSS также имеется сокращенная запись для создания рамки. Это свойство border, в котором можно задать сразу все три параметра, записав их через пробел, т.е. толщина, стиль и цвет рамки. Еще можно сделать рамку только с одной стороны, например, только сверху или наоборот, снизу, слева и справа сделать, а сверху убрать и т.д. Для этого нужно к слову border через дефис добавить название стороны, которой задается свойство. Так, border-left – будет отвечать за левую сторону рамки, border-right – за правую сторону, border-top – верх, border-bottom – низ… Видео урок «Как сделать, убрать рамку в CSS. Толщина, стили, цвет. Свойство border» вы можете смотреть онлайн в любое удобное время абсолютно бесплатно. Удачи Вам!
Оформление списков в CSS, стили маркеров. Свойство list-style В этом видео рассказывается о том, как сделать оформление списков в CSS, например, сделать маркер списка в виде круга, диска (заполненного круга), квадрата, картинки (произвольное изображение), а также маркер в виде цифр, римских цифр, латинских букв и т.д. Одной из самых важных составляющих по оформлению внешнего вида списков, является выбор стиля маркеров. В CSS за оформление маркера списка отвечает свойство list-style-type, в котором прописывается стиль маркера. Для того чтобы убрать маркер, в качестве значения для свойства list-style-type записывают - none. Для ненумерованного списка маркер в виде круга записывается как disc, стиль square - квадрат, disc – заполненный круг. Для установки маркера в виде цифр (нумерованный список), используют стиль decimal. Прописные латинские буквы - lower-latin, а большие - upper-latin. Римские цифры – upper-alpha. Для того чтобы сделать маркеры списка в виде картинки используется свойство list-style-image, в значение которого прописывается путь к файлу с изображением картинки. Для сокращения записи по оформлению внешнего вида списков в CSS используется свойство list-style… Видео урок «Оформление списков в CSS, стили маркеров. Свойство list-style» вы можете смотреть онлайн абсолютно бесплатно в любое удобное время. Успехов!
Вся информация предоставленная на данном сайте взята из открытых источников и носит информационный характер,для ознакомления и тестирования данного материала. Администрация данного ресурса не несет ответственности за содержание материалов,всю предоставленную информацию взятую с данного сайта Вы используете на свой страх и риск. Если Вы являетесь правообладателем материала выставленного на сайте,форуме без Вашего ведома,обратитесь к администратору и материал будет немедленно удален.
