Здесь рассказывается о том, как происходит наследование свойств классов и стилей в CSS. Наследование в CSS заключается в том, что при задании определенных свойств элементам HTML страницы, например, через класс или указание стиля напрямую через атрибут style, часть этих свойств распространяется и на другие элементы (потомки), которые находятся внутри главного элемента – родителя или предка. Если изучить и грамотно воспользоваться принципом наследования, то можно значительно сократить записи в файле таблицы стилей CSS. Например, можно указать шрифт, который будет распространяться на всю страницу сайта, а не делать это для каждого заголовка и абзаца. Для того чтобы это сделать, необходимо определить шрифт для какого-то родительского блока, например - body. Но распространяются эти свойства не на все элементы, т.е. есть и исключения. Это зависит от самого свойства и от вида элемента. Так, тег заголовка не наследует размер шрифта текста от родительского блока, а ссылки не наследуют цвет текста, хотя сам шрифт наследуется. Свойство border, которое задает рамку, вообще не наследуется. Для того, чтобы узнать какие свойства наследуются, а какие нет, нужно посмотреть спецификацию CSS. Видео урок «Наследование свойств классов и стилей в CSS» вы можете смотреть онлайн абсолютно бесплатно в любое время. Успехов!
Приоритет стилей в CSS, каскадность. Как отменить наследование свойств
Видео урок «Приоритет стилей в CSS, каскадность. Как отменить наследование свойств» посвящен вопросу о том, что такое каскадность в CSS, как рассчитать приоритет стилей и как отменить наследование свойств от родительских элементов. Часто у новичков, при создании сайта возникают проблемы с пониманием каскадности в CSS. Например, при написании стиля в CSS c заданием конкретного свойства элементу, выясняется, что оно не работает. Дело в том, что на один тег в HTML странице может влиять сразу несколько стилей. Помимо стиля для самого элемента, это может быть стиль, заданный для тега body или еще какого-либо родительского тега. Таким образом, собирается целый каскад стилей, влияющих на элемент. И здесь нужно уметь определять приоритет каждого из стилей и в случае необходимости увеличивать приоритет нужного стиля. Если свойство передается несколькими родителями, то оно будет унаследовано от ближайшего родителя, или от самого элемента, если данное свойство задано ещё и напрямую для него. Но бывают и более сложные случаи, в которых стили для одного тега задаются разными способами, например, через id, class, style или для самого тега. В этом случае включается балльная система оценки приоритета. Стиль, заданный через селектор тега имеет 1 балл, селектор классов – 10, id-селектор – 100, встроенный стиль -1000 баллов… Бесплатный видео урок «Приоритет стилей в CSS, каскадность. Как отменить наследование свойств» вы можете смотреть онлайн в любое время. Удачи Вам!
Блочная модель, отступы в CSS. Свойства margin и padding
В этом онлайн уроке рассказывается о том, как устроена блочная модель HTML страницы, а также как в CSS сделать или убрать отступ от края блока (сверху, снизу, слева, справа) - свойства margin и padding. Дело в том, что для браузера, каждый тег HTML страницы сайта представляется как блок, причем по умолчанию этот блок занимает всё доступное ему пространство по ширине. Это будет хорошо видно, если задать для каждого тега рамку. В каждом блоке имеется содержимое, где будет находиться текст или другие элементы. Далее идет внутренний отступ, который можно изменить CSS свойством padding. Затем идет рамка – border и внешний отступ – margin. По умолчанию браузер присваивает определенные отступы для элементов. Причем каждый браузер может присвоить свой отступ, поэтому их лучше изначально убирать, т.е. сбрасывать в ноль для всех элементов страницы, а потом задавать по мере необходимости требуемые поля для конкретных тегов. Для того чтобы сделать отступ с конкретной стороны, нужно добавить к соответствующему свойству через дефис название стороны - top,right, bottom, left (сверху, справа, снизу и слева). Например, за внутренний отступ сверху отвечает свойство padding- top… Видео урок «Блочная модель, отступы в CSS. Свойства margin и padding» вы можете смотреть онлайн совершенно бесплатно в любое время. Успехов!
Размеры блока в CSS - ширина и высота блока, выравнивание. Свойства width и height Это видео посвящено вопросу о том, как в CSS задается ширина и высота блока, т.е. его размеры - свойства width и height, а также как выравнивать блок по центру при помощи свойства margin. Для изменения ширины блока предназначено свойство width, которое указывается в пикселях или в процентах от свободного пространства, т.е. в этом случае ширина родительского блока берется за 100 процентов. За высоту блока отвечает свойство height и задается оно в пикселях. Здесь стоит отметить то, что размеры блока, т.е. ширина и высота задает размеры содержимого блока, а все отступы и рамки считаются отдельно. Еще одним моментом является перенос текста на следующую строку в случае, если он не помещается по ширине. При этом если высота блока не задана, то она будет увеличиваться автоматически, а если её указать, то контент блока будет выходить за рамки блока, а его высота останется неизменной. Чтобы этого не происходило, в CSS предусмотрено свойство overflow, сообщающее браузеру, как отображать контент в блоке, который в него не влезает. Значение hidden – будет обрезать контент, avto – появятся полосы прокрутки в случае превышения высоты блока, scroll – полосы прокрутки будут в любом случае. Для выравнивания блока по центру нужно указать свойство margin по бокам в значение auto… Видео урок «Размеры блока в CSS - ширина и высота блока, выравнивание. Свойства width и height» вы можете смотреть онлайн совершенно бесплатно. Удачи Вам!
Конфликты полей блоков, особенности работы с отступами margin в CSS Онлайн урок «Конфликты полей блоков, особенности работы с отступами margin в CSS» посвящен вопросу о том, какие проблемы могут возникнуть при работе с отступами и как их решить. Конфликты полей возникают в том случае, если для двух соседних блоков заданы разные внешние отступы. Приведем пример. Имеются два блока – верхний и нижний. У верхнего блока, при помощи свойства margin-bottom, задан внешний отступ снизу – 20 пикселей. А у нижнего блока задан верхний внешний отступ - margin-top в значении 30 пикселей. И здесь для браузера возникает вопрос, какой из отступов выбрать и на каком расстоянии друг от друга расположить блоки. В этом случае расстояние между блоками будет равно максимальному значению из отступов, а меньший отступ будет игнорироваться. В нашем случае между блоками будет 30 пикселей. Вторая особенность при работе с отступами возникает в случае, когда один блок вложен в другой и у них заданы верхние внешние отступы. В этом случае внешний отступ внутреннего блока будет выходить за рамки внешнего, но если блокам добавить рамки, то все будет работать нормально… Видео урок «Конфликты полей блоков, особенности работы с отступами margin в CSS» вы можете смотреть онлайн абсолютно бесплатно. Успехов!
Блочные и встроенные элементы в CSS. Свойство display
В этом видео уроке рассказывается о том, что такое блочные и встроенные элементы, чем они отличаются и как с ними работать в CSS. А также как из блочного элемента сделать встроенный и наоборот. Блочные элементы отличается от встроенных тем, что они всегда начинаются с новой строки, например тег div, p, h и т.д. Встроенные элементы (теги span, a, b, strong, I, em и т.д.) не разрывает строку, и используются в основном для выделения части текста каким-либо стилем. Внутри одного встроенного элемента можно помещать текст и другие встроенные элементы, но нельзя помещать блочные. А блочные элементы позволяют включать в себя и те и другие. Еще одним принципиальным отличием является то, что встроенные элементы не имеют отступов сверху и снизу, т.е. свойства margin-top, margin-bottom, padding-top и padding –bottom для них не доступны и браузер их игнорирует. Для того чтобы переопределить один элемент в другой, т.е. из блочного сделать встроенный, нужно для свойства display присвоить значение inline. А значение block для свойства display, наоборот, из встроенного элемента сделает блочный… Видео урок «Блочные и встроенные элементы в CSS. Свойство display» вы можете смотреть онлайн в любое время совершенно бесплатно. Удачи Вам!
Как в CSS сделать прозрачный фон, фоновый цвет или картинку Видео «Как в CSS сделать прозрачный фон, фоновый цвет или картинку» посвящено вопросу о том, как на HTML странице сайта при помощи стилей CSS сделать прозрачный фон, поменять фоновый цвет или установить произвольную картинку, подключив файл с фоновым изображением. Каждый элемент на HTML странице сайта может иметь свой фон. По умолчанию он не установлен, т.е. все элементы имеют прозрачный фон, и только элемент body изначально отображается белым цветом. Цвет фона в CSS задается свойством background-color и распространяется на содержимое блока и на внутренние отступы. Для установки картинки в качестве фона, необходимо воспользоваться CSS свойством background-image и в качестве значения указать файл с фоновым изображением. Конечно, в некоторых случаях, картинку можно вставить в блок при помощи тега img. Но в этом случае изображение будет занимать определенное место, и Вы не сможете поместить туда текст или другой элемент. Т.е. для верстки сайта лучше использовать CSS, а для размещения статьи или другого контента лучше использовать вставку изображения при помощи тега img… Видео урок «Как в CSS сделать прозрачный фон, фоновый цвет или картинку» вы можете смотреть онлайн в любое время абсолютно бесплатно. Успехов!
Повтор фонового изображения в CSS. Свойство background-repeat
В этом онлайн уроке рассказывается о том, как настроить повтор фонового изображения в CSS. Дело в том, что при установке картинки в качестве фонового изображения на HTML странице сайта часто возникают проблемы. Связано это с размером картинки, которые обычно не совпадают с размерами блока. И если картинка меньше блока, то при установке её на фон, браузер начинает её повторять по горизонтали и по вертикали до границ блока. Иногда так и нужно делать, ведь получается, что из маленькой однородной картинки мы можем сделать фон для всей страницы сайта. Но бывают случаи, когда картинку совсем не нужно размножать на фоне блока, или повтор делать только по горизонтали или только по вертикали. За повторение фоновых изображений в CSS отвечает свойство background-repeat. По умолчанию его значение – repeat, т.е. повторять по всем направлениям. Если свойству background-repeat поставить значение no-repeat, то картинка не будет повторяться на фоне блока. Для повтора изображения только по горизонтали используется значение repeat-x, а по вертикали - repeat-y… Видео урок «Повтор фонового изображения в CSS. Свойство background-repeat» вы можете смотреть онлайн в любое удобное время совершенно бесплатно. Успехов!
Позиционирование фоновой картинки в CSS. Свойство background-position
Урок «Позиционирование фоновой картинки в CSS. Свойство background-position» посвящен вопросу о том, как задать положение изображению, установленного в качестве фона. В CSS для позиционирования фона предназначено свойство background-position, в котором указываются координаты нового положения картинки. По умолчанию эти координаты сброшены в ноль, что соответствует верхнему левому углу блока, на фон которого установлена картинка. Значение свойства background-position можно установить несколькими способами. Это можно сделать словами и цифрами. Первое значение соответствует положению фона по горизонтали, второе – по вертикали. В качестве слов можно использовать left, center, right – для установки горизонтального положения и top, center, bottom - для задания положения фонового изображения по вертикали. Цифрами можно указать более точные координаты точки, в которой будет начинаться картинка. Значения в этом случае указываются в пикселях, т.е. первое значение будет определять отступ от левой границы блока, а второе значение – от верхней границы… Видео урок «Позиционирование фоновой картинки в CSS. Свойство background-position» вы можете смотреть онлайн в любое удобное время абсолютно бесплатно. Удачи Вам!
В этом видео рассказывается о том, как на HTHL странице сайта при помощи CSS сделать неподвижный (фиксированный) фон. Т.е. при прокрутке страницы сайта фоновая картинка будет всегда отображаться на одном и том же месте. Этот способ фиксации изображения обычно используют для отображения на сайте контактных данных организации, номера телефонов и т.д. Итак, чтобы зафиксировать фоновую картинку, необходимо воспользоваться специальным CSS свойством background-attachment и присвоить ему значение fixed. Такая запись в CSS файле сообщит браузеру, что данное изображение фона необходимо закрепить на одном месте и не прокручивать вместе с остальным контентом страницы сайта. Здесь стоит отметить то, что координаты положения картинки, при установке свойства background-attachment в значение fixed, необходимо задавать от окна браузера, а не от блока в котором она установлена на фон… Видео урок «Как сделать фиксированный (неподвижный) фон в CSS» вы можете смотреть онлайн абсолютно бесплатно в любое удобное время. Успехов!
Сокращенная запись свойств фона в CSS. Свойство background
Здесь рассказывается о том, как использовать CSS свойство background для записи параметров фона в сокращенном виде. В тех случаях, когда для установки фоновых параметров используется несколько CSS свойств, становится целесообразнее использовать более короткую запись. Сделать это можно при помощи всего лишь одного свойства background, которое объединяет в себе все параметры отображения фона. В сокращенной записи все или некоторые значения таких параметров перечисляются через пробел в определенной последовательности. А именно, сначала указывается цвет фона (background-color), затем путь к фоновому изображению (background-image), повтор фонового изображения (background-repeat), фиксация фона (background-attachment) и позиционирование фоновой картинки (background-position). Таким образом, вместо пяти строк в файле CSS, мы можем записать всего одну. Если Вы только учитесь CSS, то возможно Вам будет более понятно работать с обычной записью. Просто имейте в виду, что сокращенная запись тоже имеется… Видео урок «Сокращенная запись свойств фона в CSS. Свойство background» вы можете смотреть онлайн абсолютно бесплатно в любое время. Успехов!
Оформление таблицы в CSS. Рамка, границы ячеек, фон, выравнивание
Видео урок «Оформление таблицы в CSS. Рамка, границы ячеек, фон, выравнивание» посвящен вопросу о том, как с помощью стилей можно управлять внешним видом таблиц. Для определения границ таблицы и ячеек используется свойство border, в котором указывается размер рамки, её стиль и цвет. Размеры таблицы задаются при помощи свойств width и height (ширина и высота). Для установки отступов внутри ячеек предназначено свойство padding. Чтобы выровнять текст в ячейках таблицы, например по центру, необходимо воспользоваться параметром text-align, в нашем случае со значением center. Параметр border-collapse используется для указания браузеру как отображать границы ячеек таблицы. По умолчанию они отображаются раздельно, т.е. получаются двойные границы. Чтобы этого избежать, нужно установить для border-collapse значение collapse. Таким образом, рамки ячеек будут объединены и будут отображаться в виде одинарных линий. Для изменения фона можно воспользоваться свойством background-color, указам цвет или background-image для установки фоновой картинки. Для таблиц также можно определить правило вертикального выравнивания внутри ячейки. Сделать это можно используя параметр vertical-align… Бесплатный видео урок «Оформление таблицы в CSS. Рамка, границы ячеек, фон, выравнивание» вы можете смотреть онлайн в любое время. Удачи Вам!
В этом онлайн уроке рассказывается о том, как с помощью CSS стилей выполнить оформление формы на HTML странице сайта. Для изменения шрифта и его размера используется свойство font, а цвет текста определяется через значение параметра color. Размеры, а точнее ширину формы можно задать через свойство width для тега div, в который для удобства можно поместить форму. Чтобы выделить жирным текст вопросов над полями формы, можно в HTML присвоить им определенный класс, а в CSS прописать для этого класса стиль со свойством font-weight и значением bold. Тегам fieldset можно задать рамку через свойство border и отступы, используя margin (внешний отступ) и padding (внутренний отступ). Чтобы изменить цвет фона, необходимо воспользоваться параметром background-color. При работе с классами часто возникают случаи, когда для одного тега уже задан один атрибут class и требуется присвоить ему ещё один или несколько классов. В этом случае можно просто перечислить их через пробел в значении атрибута class… Видео урок «Оформление формы и её элементов через CSS стили» вы можете смотреть онлайн совершенно бесплатно в любое время. Успехов!
Как в CSS сделать красивое оформление элементов input в формах
Это видео посвящено вопросу о том, как в CSS сделать красивое оформление элементов input в формах. Для начала необходимо присвоить для тегов input, предназначенных для ввода имени и пароля, определенный класс, через который мы будем определять свойства, влияя на внешний вид элементов формы. Теперь в файле CSS можно установить для них рамку через свойство border и ширину - width. После этого, с помощью параметра background-image, поставим на фон элементов input изображение в виде градиента. Повтор картинки установим только по горизонтали. С этой целью присвоим свойству background-repeat значение repeat-x. Таким образом, элементы формы для ввода имени и пароля стали значительно красивее. Теперь нужно сделать так, чтобы при щелчке внутри одного из полей, его внешний вид менялся. А именно - пропадало фоновое изображение поля, цвет фона становился белый, а толщина рамки увеличивалась. Для реализации этой задумки нужно использовать псевдоселектор focus. Т.е. в момент получения фокуса полем, будут использоваться новые правила оформления... Видео урок «Как в CSS сделать красивое оформление элементов input в формах» вы можете смотреть онлайн совершенно бесплатно. Удачи Вам!
CSS свойство float. Выравнивание и обтекание блока или картинки текстом
Онлайн урок «CSS свойство float. Выравнивание и обтекание блока или картинки текстом» посвящен вопросу о том, для чего предназначено свойство float и как его использовать на практике при создании сайтов. По умолчанию все блочные элементы не дают себя обтекать, т.е. каждый из них начинается с новой строки. При помощи параметра float можно создавать плавающие элементы, т.е. картинки или блоки div, которые может обтекать текст или другие элементы HTML страницы. В качестве значения для float необходимо указать сторону, по которой будет выравниваться элемент и соответственно с другой его стороны будет возможно его обтекание, например, текстом. Присвоим через стиль CSS для картинки, находящейся на HTML странице, свойство float со значением right. В результате, изображение должно прижаться к правому краю страницы, а с левой стороны картинки будет выполняться обтекание текстом. Свойство float часто используют при верстке сайтов, т.е. при создании каркаса сайта, а также для создания горизонтальных меню и т.д.… Видео урок «CSS свойство float. Выравнивание и обтекание блока или картинки текстом» вы можете смотреть онлайн абсолютно бесплатно. Успехов!
Вся информация предоставленная на данном сайте взята из открытых источников и носит информационный характер,для ознакомления и тестирования данного материала. Администрация данного ресурса не несет ответственности за содержание материалов,всю предоставленную информацию взятую с данного сайта Вы используете на свой страх и риск. Если Вы являетесь правообладателем материала выставленного на сайте,форуме без Вашего ведома,обратитесь к администратору и материал будет немедленно удален.
