html и css для начинающих

кнопка удаления
кнопка удаления
кнопка меню

Блоки в CSS


CSS (Cascading Style Sheets — каскадные таблицы стилей) обращается с каждым НТМL-элементом так, как будто он заключен в блок. Используя свойства CSS, можно конролировать размеры блока, отображать и скрывать блоки, контролировать границы, поля и отступы вокруг блока и т.п.

Размеры блока. Свойства width и height


По умолчанию размер блока задается так, чтобы он был способен вместить контент.
Чтобы установить иные размеры используются свойства height (высота) и width (ширина).
Размер блока указывается в пикселах, процентах или единицах em, так же можно использовать единицы vw и vh.
Пикселы позволяют точно контролировать размер.
При использовании процентов размер блока задается относительно размера окна браузера или блока, в который он заключен.
При использовании единиц em размер блока зависит от размера содержащегося в нем текста.
Проценты и единицы vw/vh удобны при создании гибких дизайнов, предусматривающих доступ с устройств с разным размерами экранов.

Ограничения ширины. Свойства min-width и max-width


Это очень полезные свойства, позволяющие гарантировать удобочитаемость страниц, особенно на маленьких экранах портативных устройств.
Cвойство min-width определяет наименьшую ширину блока при уменьшении окна браузера, а свойство max-width - наибольшую ширину блока при увеличении.

Ограничения высоты.
Свойства min-height, max-height и overflow


Так же как и ширину блока, можно ограничить его высоту.
Это достигается с помощью свойств min-height и max-height. Если блок недостаточно велик, чтобы вместить контент, тот выходит за его пределы, чтобы решить эту проблему, можно использовать свойство overflow.

Свойство overflow сообщает браузеру, что делать, если объем контента блока превышает его размер. Это свойство может принимать одно из двух значений:

Свойство overflow особенно удобно, поскольку некоторые браузеры позволяют пользователям настраивать размер шрифта.

Отступы, поля и границы


block

Свойство padding


Свойство padding позволяет указать, сколько места должно быть между содержимым элемента и его границами. Значение этого свойства чаще всего указывается в пикселах, но можно использовать проценты или единицы em

attention

Можно задать различные значения для каждой стороны блока, используя свойства:

Можно использовать стенографическое свойство, где значения перечисляются по часовой стрелке: верх, правая сторона, низ, левая сторона:

padding

Значение свойства padding не наследуется дочерними элементами, поэтому нужно указывать величину отступов для каждого элемента, которому они необходимы.

Свойство margin


Свойство margin определяет интервал между блоками. Его значение обычно задается в пикселах, но можно использовать проценты или единицы em.
Если один блок располагается поверх другого, то будут использоваться поля, имеющие наибольшее значение.

margin

Можно указать значения для каждой стороны блока, используя свойства:

Можно использовать стенографическое свойство, где значения перечисляются по часовой стрелке: верх, право, низ, лево:

margin

Центрирование контента


Если нужно поместить блок в центре страницы (или в центре элемента, в котором он находится), можно присвоить значение auto свойствам margin-left и margin-right. Обязательно укажите ширину блока (width), в противном случае он займет всю ширину страницы.

Превращение встроенных элементов в блочные и наоборот. Свойство display


Свойство display позволяет превратить встроенный элемент в блочный и наоборот, а также может использоваться для скрытия элемента на странице.
Принимает следующие значения:

display

Эта техника часто используется для создания меню навигации.

Сокрытие блоков. Свойство visibility


Свойство visibility позволяет скрывать блоки, но при этом оставлять пустое пространство на месте элемента. Данное свойство может принимать два значения:

Чтобы избежать появления пустого пространства, нужно использовать свойство display со значением none.

Границы блока

Толщина границ. Свойство border-width


Свойство border-width управляет толщиной границ. Значения указываются в пикселах или ключевых словах:

Для этого свойства нельзя задавать значение в процентах.

Можно устанавливать размер отдельных границ, используя следующие четыре свойства:

borderwidht

Стиль границы. Свойство border-style


Можно настраивать стиль границ, используя свойство border-style.Оно принимает следующие значения:

Можно изменить стиль отдельных границ, используя следующие свойства:

Цвет границы. Свойство border-color


Свойство border-color позволяет управлять цветом границ блока. Используются значения RGB, шестнадцатеричные коды или имена цветов.

bordercolor

Цветами отдельных границ блока можно управлять с помощью следующих свойств:

bordercolorall

Стенографическое свойство border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом.

border

CSS3 Декоративные границы

Свойство border-image


Свойство border-image применяет к границам блока изображение. Это сокращенная форма свойства, определяющая источник, образец нарезки, ширину и повторение границы:

  1. border-image-source - предоставляет местоположение изображения, применяемого в качестве изображения границы элемента.
  2. border-image-slice - определяет "расстояния нарезки", т.е. смещения от верхнего, правого, нижнего и левого краев изображения границы. Эта часть выражения может иметь от одного до четырех значений, специфицируются они в следующем порядке: top right bottom left.
  3. order-image-width, - определяет ширину изображения границы по каждой из его четырех сторон.
  4. border-image-outset - определяет расстояние, на которое изображение границы может простираться за пределы области границы элемента.
  5. border- imagerepeat - определяет образец повторения (или его отсутствие) по сторонам изображения границы.допустимые значения могут быть следующими:
    • stretc – растягивает изображение;
    • repeat - повторяет изображение;
    • round - своего рода комбинация repeat и stretch – означает, что изображение будет повторяться целое количество раз, а остаток пространства будет заполнен за счет растягивания этих кусочк

Свойство border-image всегда определяет заданное изображение в соответствующие углы контейнера, а третья часть выражения объясняет браузеру как обходиться со средней секцией.

Чесно говоря, для меня это свойство оказалось сложным для понимания, я запуталась в "нарезке" изображения. Но, если долго мучиться, что-нибудь получится. Пока получается вот такое безобразие, есть над чем работать:

image imageborder

Свойство box-shadow


Свойство box-shadow позволяет добавить тень вокруг блока. Оно работает так же, как свойство text-shadow. Данное свойство должно использовать следующие значения:

  1. Горизонтальное смещение (смещение по оси x). Отрицательные значения позиционируют тень слева от блока. Обязательный параметр.
  2. Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
  3. Размытие. Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
  4. Растяжение. Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
  5. Цвет
  6. none. Отменяет добавление тени.
  7. inset. Тень выводится внутри элемента. Необязательный параметр.

Браузеры Chrome, Firefox и Safari поддерживают данный эффект с помощью свойств -moz-box-shadow и -webkit-box-shadow.

boxshadowcss boxshadow

Закругленные углы. Свойство border-radius


Свойство border-radius позвоялет создать закругленные углы у блока.
Значение указывает радиус в пикселах.
Свойства -moz-border-radius и –webkit-border-radius обеспечивает работоспособность данного стиля в браузерах Chrome, Firefox и Safari.
Можно указать различные значения для каждого угла блока следующим образом:

Если рамка не задана, то скругление также происходит и с фоном.

borderradius borderradiuscssborderradiuspic

Эллиптические формы


Для создания более сложных форм можно задать различные расстояния для горизонтальных и вертикальных частей округлых углов.

elipscss elips

Для одновременной настройки всех углов также существует стенографическое свойство: сначала указывается четыре горизонтальных значения, а затем четыре вертикальных. Можно создать круг, взяв за основу квадрат и задав его высоту в качестве значения свойства border-radius.

ringcss ring