Здесь вы найдете много полезной информации о том как построить собственный сайт, как правильно верстать Web страницы, а также освоите множество приемов и трюков которые можно выполнить при помощи CSS, без использования Java-скриптов. Данный сайт будет полезен как новичку, так и опытному Web Мастеру.
Наверняка вы часто видили, как на сайтах, в списках, типа меню, построенных на тегах ul и li стоят не некрасивые кружки, а какие то симпотичные иконочки. Сейчас я расскажу как вы можете легко и быстро изменить некрасивый кружок (либо просто спрятать его вовсе). Напишем стандартный код:
Code
<ul> <li>Пункт 1</li> <li>Пункт 2</li> </ul>
Эти самые кружки меняются очень просто: В ваш файл с CSS пишем следующее:
Здравствуйте, уважаемые посетители Школы HTML и CSS! Наша очередная статья по CSS будет посвящена довольно важному для валидации и корректной работы вопросу CSS и HTML – отличиям между атрибутами class и id.
Начнем с определений. Id – уникальный определитель объекта. Это значит, что несколько элементов на странице не должны иметь одинаковый id. В HTML записывается, например, так:
Содержание блока
В CSS, стили для id, записываются так:
Code
#test {font: 12px Arial;}
Class – определитель стиля объекта, или группы объектов на странице. Его часто применяют для повторяющихся конст
... Читать дальше »/div>
В этом уроке, я расскажу Вам о том, как прижать footer ("подвал" сайта) к низу страницы, чтобы при малом количестве контента не терялась целостность страницы. В ваш файл CSS добавляем следующее (файл должен называться style.css):
Code
html, body { margin: 0; padding: 0; height: 100%; /* не забываем это свойство для html и body */ }
Если вам нужно прижать подвал на какой то конкретной странице, то напишите следующий код прямо на странице:
Может определить величину полей внутри всего элемента или для каждой стороны в отдельности.
Свойства:
padding - определяет величину полей. Значения задаются любыми способами измерения принятыми в CSS. В одной строке можно указать 4 размера одновременно, они будут действовать для каждой стороны в последовательности: (верхний правый нижний левый). Также можно указать величину поля только для одной стороны. Примеры:
Code
padding: 10px; // Поле со всех сторон элемента 10 пикселей
Может определить величину отступа вокруг всего элемента или для каждой стороны в отдельности.
Свойства:
margin - определяет величину отступов. Значения задаются любыми способами измерения принятыми в CSS. В одной строке можно указать 4 размера одновременно, они будут действовать для каждой стороны в последовательности: (верхний правый нижний левый). Также можно указать величину отступа только для одной стороны. Примеры:
Code
margin: 10px; // Отступ от всех сторон элемента 10 пикселей
Дает возможность размещения элементов не по расположению их в коде, а конкретными координатами относительно родительского контейнера или всей страницы.
Свойства:
position - устанавливает откуда брать точки отсчета при позиционировании. Данный атрибут обязательно должен быть указан, иначе все нижеперечисленные в этой статье свойства не будут работать. Примеры:
Code
position: absolute; // Отсчет берется относительно всей страницы
Здесь описаны свойства, позволяющие установить ширину и высоту элемента, расположение элемента относительно родительского контейнера, запретить полное или частичное обтекание элемента другими или полностью скрыть его из вида.
Свойства:
width - определяет ширину элемента. Значение указывается всеми величинами, принятыми в CSS. Пример:
Code
width: 200px; // Ширина элемента 200 пикселей
Значение по умолчанию - auto
height - определяет высоту элемента. Значение указывается всеми величинами, принятыми в CS
... Читать дальше »/div>
С помощью этого параметра можно установить стиль, цвет и толщину рамок вокруг элемента, будь то изображение или отдельные блоки.
Свойства:
border-width - определяет ширину рамки. Значения устанавливаются в пикселях. Пример:
Code
border-width: 3px; // Ширина рамки 3 пикселя
В одной строке также можно установить ширину для всех четырех сторон рамки. Первый размер указывается для верхней стороны, потом по часовой стрелке. Пример:
