CSS свойства

border Это свойство позволяет определить все атрибуты рамки HTML элемента за одну декларацию
border-bottom Это свойство позволяет определить все атрибуты нижней рамки HTML элемента за одну декларацию
border-bottom-color Это свойство определяет цвет нижней стороны рамки HTML элемента
border-bottom-left-radius Устанавливает радиус скругления левого нижнего уголка рамки
border-bottom-right-radius Устанавливает радиус скругления правого нижнего уголка рамки
border-bottom-style Это свойство определяет стиль нижней стороны рамки HTML элемента
border-bottom-width Это свойство определяет толщину нижней стороны рамки HTML элемента
border-color Это свойство определяет цвет всех четырех сторон рамки HTML элемента
border-image Позволяет устанавливать изображение вместо обычной рамки вокруг элемента
border-image-outset Устанавливает отступ рамки-изображения за пределы границ элемента
border-image-repeat Устанавливает способ заполнения фоновым изображением пространства между углами рамки
border-image-slice Определяет размер частей изображения, используемых для оформления границ элемента
border-image-source Задаёт путь к изображению, которое будет использоваться в качестве рамки элемента
border-image-width Задаёт ширину изображения для рамки элемента
border-left Это свойство позволяет определить все атрибуты левой рамки HTML элемента за одну декларацию
border-left-color Это свойство определяет цвет левой стороны рамки HTML элемента
border-left-style Это свойство определяет стиль левой стороны рамки HTML элемента
border-left-width Это свойство определяет толщину левой стороны рамки HTML элемента
border-radius Устанавливает радиус скругления уголков рамки
border-right Это свойство позволяет определить все атрибуты правой рамки HTML элемента за одну декларацию
border-right-color
Это свойство определяет цвет правой стороны рамки HTML элемента
border-right-style Это свойство определяет стиль правой стороны рамки HTML элемента
border-right-width Это свойство определяет толщину правой стороны рамки HTML элемента
border-style Это свойство определяет стиль всей рамки вокруг элемента
border-top Это свойство позволяет определить все атрибуты верхней рамки HTML элемента за одну декларацию
border-top-color
Это свойство определяет цвет верхней стороны рамки HTML элемента
border-top-left-radius Устанавливает радиус скругления левого верхнего уголка рамки
border-top-right-radius Устанавливает радиус скругления правого верхнего уголка рамки
border-top-style Это свойство определяет стиль верхней стороны рамки HTML элемента
border-top-width Это свойство определяет толщину верхней стороны рамки HTML элемента
border-width Это свойство определяет толщину всех четырех сторон рамки HTML элемента
outline Универсальное свойство, которое устанавливает атрибуты контура элемента
outline-color Определяет цвет контура
outline-offset Задает величину отступа контура от элемента
outline-style Определяет стиль контура
outline-width Определяет толщину контура

msiter.ru

Таблица свойств CSS

Параметры

Возможные значения:

Применимо для

Описание

Примеры

Свойства font

font-family

 [1] любой шрифт

всех элементов

это свойство определяет используемый элементом шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя

font-family:Arial Black URL(‘arialblack.ttf’)

font-style

[1] normal — без изменений
[2] italic – курсив

всех элементов

стиль элемента. Курсивный или обычный

font-style:italic

font-variant

[1] normal — без изменений
[2] small-caps — заменяет все маленькие буквы на большие

всех элементов

варианты отображения шрифта. Нетскейп не поддерживает это свойство

font-variant:small-caps

font-weight

[1] normal — без изменений
[2] bold — жирный
[3] bolder — очень жирный (в MSIE не отличается от bold, в Нетскейпе от нормал)
[4] lighter — тонкий (не отличается от normal)
[5] любое значение от 100 до 900

всех элементов

выделение (жирность) элемента

font-weight:bold

font-size

[1] размер (+)
[2] xx-small, x-small, small, medium, large, x-large, xx-large — любое из этих значений
[3] smaller, larger — любое из этих значений

всех элементов

размер шрифта

font-size:30pt

font

 

[1] font-family
[2] font-style
[3] font-variant
[4] font-weight
[5] font-size

всех элементов

обобщает вышеперечисленные свойства

font: italic bolder Arial 12pt

Свойства Text

text-decoration

[1] none — нет
[2] underline — подчеркнутый
[3] overline — надчеркнутый (не поддерживается в Нетскейпе)
[4] line-through — перечеркнутый
[5] blink — мигающий (не поддерживается в IE)

всех элементов

«украшение» текста

text-decoration:line-through

letter-spacing

[1] длина (+)
[2] normal — без изменений

всех элементов

расстояние между буквами. Не работает в Нетскейпе

letter-spacing:100

vertical-align

[1] baseline
[2] sub
[3] super
[4] top-text
[5] top
[6] middle
[7] bottom
[8] bottom-text
[9] процент

inline элементов

позиционирование элементов по отношению к другим элементам стоящих в одном ряду. Не работает в Нетскейпе

vertical-align:top-text

Параметры

Возможные значения:

Применимо для

Описание

Примеры

text-transform

1] none — нет
[2] Capitalize — каждое слово начинается с большой буквы
[3] UPPERCASE — каждая буква текста становится заглавной
[4] lowercase — каждая буква текста становится маленькой

inline элементов

изменение текста. Не работает в Нетскейпе

text-transform:Capitalize

text-align

[1] left — текст слева
[2] right — текст справа
[3] center — текст по центру
[3] justify — текст по ширине

block-level элементов

положение текста

text-align:right

text-indent

[1] длина (+)
[2] процент (+)

block-level элементов

отступ

text-indent:30 em

line-height

[1] normal — без изменений
[2] длина (+)
[3] процент

всех элементов

междустрочный интервал

line-height:100%

Свойства Color и Background

Color

[1] цвет (+)

всех элементов

цвет элемента

color:#f00000

background-color

[1] цвет (+)

transparent

всех элементов

цвет фона элемента

background-color:#f00000

background-image

[1] none — нет
[2] URL (+)

всех элементов

фоновое изображение для элемента

background-image:URL(cool.gif)

background-repeat

[1] repeat — размножает фоновое изображение во всех направлениях
[2] repeat-x — размножает фоновое изображение горизонтально
[3] repeat-y — размножает фоновое изображение вертикально
[4] no-repeat — не повторяющиеся изображение

всех элементов

повторения фонового изображения

background-repeat:no-repeat

background-attachment

[1] scroll — фоновое изображение скроллится всесте с содержанием документа
[2] fixed — не скроллится. Фиксируется в одном месте. Не работает в Нетскейпе

всех элементов

возможность прокрутки фонового изображения

background-attachment:fixed

background-position

 

[1] процент от ширины + процент от высоты (+)
[2] top, middle, bottom — одно из значений
[3] left, center, right — одно из начений
[4] расстояние от левого края + расстояние от вершины

block-level и replaced элементов

положение фонового изображения (работает с background-repeat равным repeat-x, repeat-y или no-repeat)

background-position:50%0%

background

 

[1] background-color
[2] background-image
[3] backgroun-position
[4] background-attachment
[5] background-repeat

всех элементов

обобщает вышеперечисленные свойства

background:no-repeat black fixed 50%0%

Параметры

Возможные значения:

Применимо для

Описание

Примеры

Свойства Box

margin-top

[1] длина (+)
[2] процент (+)
[3] auto – автоматически

всех элементов

определяет отступ сверху

margin-top:100

margin-right

[1] длина (+)
[2] процент (+)
[3] auto – автоматически

всех элементов

определяет отступ справа

margin-right:100%

margin-bottom

[1] длина (+)
[2] процент (+)
[3] auto – автоматически

всех элементов

определяет отступ снизу

margin-bottom:100em

margin-left

[1] длина (+)
[2] процент (+)
[3] auto – автоматически

всех элементов

определяет отступ слева

margin-left:100pt

margin

 

[1] margin-top
[2] margin-right
[3] margin-left
[4] margin-bottom

всех элементов

обобщает все вышеперечисленные свойства

 

padding

[1] padding-top
[2] padding-right
[3] padding-left
[4] padding-bottom

[1] длина (+)
[2] процент (+)

всех элементов

отступ от верхнего border’а

отступ от правого border’а

отступ от левого border’а

отступ от нижнего border’а

padding-top:100pt

padding-right:100%

padding-left:100

padding-bottom:100em

border-width

[1] border-top-width
[2] border-right-width
[3] border-left-width
[4] border-bottom-width

[1] длина (+)
[2] thin, medium или thick

всех элементов

толщина верхнего border’а

толщина правого border’а

толщина левого border’а

толщина нижнего border’а

border-top-width:100pt

border-right-width:thick

border-left-width:medium

border-bottom-width:100em

border-color

[1] цвет (+)

всех элементов

Цвет border’а. Не работает в Нетскейпе

border-color:green

border-style

[1] none
[2] dotted — пунктирняя линия кружочками,

dashed — пунктирняя линия прямоугольниками,

solid — сплошная со срезанными углами,

double — двойная линия,

groove — затемненная,

ridge – двухцветная,

inset — двухцветная с затемнением снаружи,

outset - двухцветная с затемнениея снутри              

всех элементов

стиль border’ов. Можно задать несколько значений одновременно для разных border’ов. Если установлено одно значение — задается единый стиль для всех сторон, если два — то задаются различные стили для прилежащих сторон и т.д.

border-style: dotted groove

border

[1] border-width
[2] border-style
[3] border-color

всех элементов

обобщает вышеперечисленные свойства

border: thik black double

width

[1] длина (+)
[2] процент (+)

block-level и replaced элементов

ширина элемента

width:10%

height

[1] длина (+)
[2] процент (+)

block-level и replaced элементов

высота элемента

height:100pt

Параметры

Возможные значения:

Применимо для

Описание

Примеры

float

[1] left – слева
[2] right — справа
[3] none – по умолчанию

всех элементов

расположение элемента

float:right

clear

[1] left – слева
[2] right — справа
[3] both — c двух сторон
[4] none — по умолчанию

всех элементов

расположение других элементов вокруг данного

clear:both

Классификация

display

[1] none — не отображается
[2] block — разбивает строку до и после элемента (т.е. элемент не может находится на одной линии с другими элементами)
[3] inline — не разбивает строку
[4] list-item — разбивает линию строку до и после элемента + добавляет маркер как у list-item элементов

всех элементов

определяет, как будет отображаться элемент

display:none

list-style-type

[1] disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha
[2] none — никакой

элементов со значением display равным list-item

определяет вид list-item маркера. Если значение list-style-image равно none или не уточнено

list-style-type:lower-alpha

list-style-image

[1] none — нет
[2] URL (+)

элементов со значением display равным list-item

задает вид list-item маркера в виде картинки

list-style-image:URL(cool.gif)

list-style-position

[1] inside — при переносе следующие строки будут отображаться без отступа
[2] outside — по умолчанию

элементов со значением display равным list-item

определяет положение маркера в зависимости от list item элемента

list-style-position:inside

list-style

[1] list-style-type
[2] list-style-position
[3] list-style-image

элементов со значением display равным list-item

обобщает вышеперечисленные свойства

list-style:inside

in-internet.narod.ru

Параметры css width и height для задания размеров элементов html страницы : WEBCodius

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

width и height — ширина и высота элементов в css

С помощью атрибутов стиля width и height можно задавать соответственно ширину и высоту блочных элементов:

width: auto|<ширина>|inherit
height: auto|<ширина>|inherit

В качестве значений можно использовать любые доступные в css единицы измерения — например, пикселы (px), дюймы (in), пункты (pt) и др.:

p {width:200px; height:150px}

Кроме абсолютных единиц можно задавать относительное значение размера элементов в процентах. В этом случае ширина и высота элемента будет зависеть от ширины и высоты родительского элемента. Если родитель явно не указан, то размеры будут зависеть от окна браузера.

div {width:40%;}

Значение auto отдает управление размерами элемента веб-браузеру и является значением по умолчанию. В этом случае размеры элемента будут такие, чтобы в нем полностью поместилось все его содержимое.

Рассмотрим несколько примеров.

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>width and height</title>
<style>
.layer1 {
width: 300px;
height:300px;
background: #fc0;
border: 1px solid #ccc;
}
.layer2 {
background: #eee;
}
</style>
</head>
<body>
<div>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях, об их технических характеристиках и особенностях.</p>
</div>
</body>
</html>

Результат:

размеры css width и height

В этом примере мы создали блок div и вложили в него абзац p с текстом. Для div-а мы строго задали размеры 300 на 300 пикселей. У элемента p значения свойств width и height равны auto, поэтому как видно на скриншоте, его ширина установилась равной ширине родительского элемента, а высота стала такой, чтобы в нем поместился весь содержащийся в абзаце текст.

Теперь изменим css настройки для абзаца p и зададим фиксированные размеры:

.layer2 {
background: #eee;
width:250px;
}

Результат:

css width

Как видим ширина абзаца стала уже и равна 250 пикселей, а его высота увеличилась так, чтобы уместился текст, так как параметр height остался равным auto.

Теперь давайте зададим высоту и ширину абзаца в процентах:

.layer2 {
background: #eee;
width:50%;
height:50%;
}

Результат:

значения ширины и высоты в процентах

Как видно на картинке, ширина элемента p стала равна половине ширины элемента div. А высота увеличилась и стала равна 75 процентам высоты div.

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

Определить минимальную ширину и высоту можно с помощью атрибутов min-width и min-heigh:

min-width: <ширина>
min-height: <высота>

Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальные размеры:

max-width: <ширина>
max-height: <высота>

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

Стоит уточнить, что задание параметров height и width имеет смысл только для блочных тегов, так как для строчных элементов эти параметры браузером не обрабатываются.

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

Например, уменьшим размеры абзаца p из выше рассмотренных примеров до 100 пикселей:

.layer2 {
background: #eee;
width:100px;
height:100px;
}

Результат:

текст вышел за пределы элемента

Как видно, текст вышел за границы абзаца и выглядит это не очень красиво. Для избежания подобных ситуаций существует правило css — overflow.

Параметр переполнения overflow для скрытия (hidden, visible) или прокрутки (scroll, auto) контента

Переполнение контента может возникнуть, когда ограничивают и ширину и высоту элемента. Рассмотрим два абзаца:

<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>

Результат:

overflow

Так как ни ширина ни высота для абзацев не заданы, то браузер самостоятельно рассчитывает их исходя из своего собственного понимания значения auto. В результате абзацы по ширине заняли все доступное пространство, а по высоте в соответствии с содержащимся в них контентом.

Теперь у первого абзаца ограничим ширину:

<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>

Результат:

overflow

Ширина абзаца ожидаемо уменьшилась, а высота установилась такой, чтобы вместить в себя весь текст.

Ну а теперь ограничим у первого абзаца и высоту:

<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>

переполнение контента

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

overflow: visible|hidden|scroll|auto|inherit

По умолчанию overflow принимает значение visible, которое сообщает браузеру, чтобы он отображал содержимое не уместившееся в контейнере. Результат можно увидеть на примере выше.

Правило overflow:hidden скрывает все, что не помещается в контейнере:

overflow:hidden

Значение scroll отобразит в элементе по вертикали и горизонтали полосы прокрутки даже в том случае, если все содержимое умещается:

 <p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>

overflow:scroll

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

<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>

Результат:

overflow:auto

Для настройки полос прокрутки можно также использовать атрибуты стиля overflow-x и overflow-y, которые позволяют настраивать отображение прокрутки по отдельным осям. Таким образом overflow-x отвечает за горизонтальную ось, а overflow-y за вертикальную ось.

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

p{overflow-x:hidden;overflow-y:auto;}

И задача будет решена.

На этом все. До новых встреч. Не забудьте подписаться на обновления блога и буду благодарен если воспользуетесь кнопочками социальных сетей:

webcodius.ru

Что такое CSS, для чего нужны стили CSS

CSS – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML). Название происходит от английского Cascading Style Sheets, что означает «каскадные таблицы стилей».

Зачем используется CSS

Назначение CSS – отделять то, что задает внешний вид страницы, от ее содержания. Если документ создан только с использованием HTML, то в нем определяется не только каждый элемент, но и способ его отображения (цвет, шрифт, положение блока и т. д.). Если же подключены каскадные таблицы стилей, то HTML описывает только очередность объектов. А за все их свойства отвечает CSS. В HTML достаточно прописывать класс, не перечисляя все стили каждый раз.

Такая технология:

  • обеспечивает относительно простую и быструю разработку, потому что однажды созданное оформление можно применять ко многим страницам;
  • повышает гибкость и удобство редактирования – достаточно внести правку в CSS, чтобы оформление изменилось везде;
  • делает код более простым, снижая повторяемость элементов. Его проще читать программистам и поисковым ботам;
  • ускоряет время загрузки, потому что CSS может кэшироваться при первом открытии, а в последующих считываются только структура и данные;
  • увеличивает количество визуальных решений для представления содержимого;
  • обеспечивает возможность легко применять к одному документу разные стили (например, создавать адаптированную версию для мобильных устройств или специальные стили для слабовидящих).

То есть каскадные таблицы служат не только для воплощения дизайна, но и кардинально меняют подход к сайтостроению, упрощая труд разработчиков и обеспечивая гибкость реализации. Вот для чего нужен CSS.

Развитие CSS

Необходимость разработки CSS была признана консорциумом W3C в 1990-х годах. В 1996 году был принят стандарт CSS1, позволяющий изменять параметры шрифта, цвет, атрибуты текста, выравнивания и отступы. В 1998 году состоялся выход CSS2, добавивший возможности использования блочной верстки, звуковых таблиц, генерируемого содержания, указателей, страничных носителей. Версия CSS3 заметно увеличила возможности стилей: стало доступным создание анимированных элементов без использования JavaScript, появилась поддержка сглаживания, теней, градиентов и т. д. Спецификация была разделена на модули, каждый из которых стал развиваться обособленно. С 2011 года ведется разработка модулей CSS4. Возможности пока описаны в черновых вариантах.

Структура языка

CSS можно охарактеризовать простыми словами как набор правил, описывающих, как должен выглядеть элемент.

Правило состоит из селектора и блока объявлений.

css1.png

Селекторы

Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.). Если для тега нужно задать разные стили или применить один для отличных элементов, используются классы и запись вида «Тег.Класс {свойство: значение;}». Имя класса задается латиницей, может содержать подчеркивание или дефис. Если не указывать тег, а начинать запись с «.Класс», то можно использовать правило для любого тега. Если перечислять несколько классов для одного тега, к нему применятся все описанные стили. Идентификатор задает уникальное имя элемента для изменения стиля или обращения с помощью скрипта. Запись «#Идентификатор {свойство: значение;}». Название идентификатора состоит из букв латинского алфавита, допустимо использовать дефис и подчеркивание. Чтобы применить идентификатор к конкретному тегу, указывается его имя, потом без пробела и через знак решетки название идентификатора.

Блок объявлений

Блок объявлений состоит из пар «свойство: значение» (запись всегда черед двоеточие), размещенных в фигурных скобках. Записи заканчиваются точкой с запятой. CSS нечувствителен к табуляции, пробелам, регистру. Выбор способа записи (столбиком с отступами или просто в строчку) остается на усмотрение разработчика. Если для одного селектора прописаны разные значения для одного свойства, то приоритет отдается нижней записи.

Подключение CSS

CSS можно связать с HTML несколькими способами:

  • внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
  • добавить тег <style> с атрибутом type=»text/css»;
  • подключить внешнюю таблицу стилей: <link rel=»stylesheet» href=»путь до style.css» type=»text/css»/>.

Третий способ является наиболее популярным и рекомендуемым, потому что позволяет в полной мере пользоваться преимуществами разделения формы и содержания, обеспечиваемого с помощью CSS.

wiki.rookee.ru

Учебник CSS 3. Статья «Размеры блочных элементов в CSS»

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

При изучении блочной модели CSS мы разобрали, что свойства width и height устанавливают ширину и высоту внутренней области элемента (content area), которая может содержать текст, изображения и прочие элементы.

В блочной модели CSS существует разница между значениями ширины и высоты, которые вы задаете для элемента и размером пространства, которое браузер резервирует для его отображения. Общая ширина и высота элементов представляет собой область окна браузера, которая состоит из ширины и высоты внутренних отступов, границ и указанных для них пользовательских значений.

Рис. 99 Схема вычисления общей ширины и высоты элементов.

Общая ширина элемента вычисляется по формуле:

width (ширина) + padding-left (левый внутренний отступ) + padding-right (правый внутренний отступ) + border-left (левая граница) + border-right (правая граница).

Общая высота элемента вычисляется по формуле:

height (высота) + padding-top (верхний внутренний отступ) + padding-bottom (нижний внутренний отступ) + border-top (верхняя граница) + border-bottom (нижняя граница).

Допустим, у нас есть следующие стили для элемента <div>:

div {
	width: 150px; /* устанавливаем ширину элемента */
	height: 150px; /* устанавливаем высоту элемента */
	padding: 10px; /* устанавливаем внутренние отступы элемента */
	border: 5px; /* устанавливаем границы элемента */
}

Для размещения элемента <div> браузеру необходимо подготовить следующее пространство:

Общая ширина элемента:

150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 5 пикселей (левая граница) + 5 пикселей (правая граница) = 180 пикселей.

Общая высота элемента:

150 пикселей (пользовательское значение высоты) + 10 пикселей (нижний внутренний отступ) + 10 пикселей (верхний внутренний отступ) + 5 пикселей (нижняя граница) + 5 пикселей (верхняя граница) = 180 пикселей.

И так, мы с Вами рассмотрели, как классически происходит вычисление общей ширины и высоты элементов. Минусы этой модели заключаются в том, что вам необходимо проводить математические вычисления, чтобы понять какую действительно ширину, либо высоту имеет тот, или иной элемент. Удобно ли это?

Изменение модели вычисления ширины и высоты элементов

С выходом стандарта CSS 3 добавлено свойство box-sizing, оно позволяет изменить, применяемую по умолчанию CSS модель, с помощью которой вычисляются ширина и высота элементов.

Для того, чтобы понять стоит ли нам использовать альтернативные способы вычисления ширины и высоты элементов, давайте рассмотрим пример, в котором создадим четыре блока одной ширины, при этом мы будем использовать процентные значения:

<!DOCTYPE html>
<html>
<head>
	<title>Пример вычисления ширины и высоты элементов</title>
<style> 
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 25%; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
} 
.test {
background-color: red;  /* задаем цвет заднего фона */
}
.test2 {
background-color: green;  /* задаем цвет заднего фона */
}
.test3 {
background-color: blue;  /* задаем цвет заднего фона */
}
.test4 {
background-color: yellow;  /* задаем цвет заднего фона */
}
</style>
</head>
	<body>
		/* обязательно прочтите пояснение ниже */
		<div class = "test"></div><div class = "test2"></div><div class = "test3"></div><div class = "test4"></div> 
	</body>
</html>

Обратите внимание на важный момент — все четыре блока размещены в одну строчку.


Это очень тонкий момент, дело в том, что когда вы используете display: inline-block браузер расценивает переносы строки как пробельный символ, и как следствие, добавляет после каждого блока 3-4px пустого пространства в зависимости от браузера и шрифта пользователя. По сути это является междусловным интервалом, так как блок расценивается в данном случае как слово. Может на данном этапе этот момент для вас не до конца понятен, просто запомните его, чтобы в последствии случайно не потерять пару часов, когда у вас будет «съезжать» какой-то блок, или список в панели навигации из-за вдруг появившихся «не понятно откуда пикселей». Я человек простой: вижу непонятные пиксели при display: inline-block – пишу элементы в линейку без пробелов.


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

Рис.100 Пример вычисления ширины и высоты элементов.

А теперь техническое задание поменялось, и Вам необходимо к каждому нечетному блоку добавить сплошную границу справа размером 5px. Для этого мы создадим следующий стиль:

div:nth-child(odd) { /* выбираем каждый нечетный блок внутри родительского элемента */
border-right: 5px solid; /* добавляем сплошную границу справа размером 5px */
}

Теперь добавим стиль к нашему коду и посмотрим, что у нас из этого получится.

<!DOCTYPE html>
<html>
<head>
	<title>Пример вычисления ширины и высоты элементов в процентах</title>
<style> 
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 25%; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
}
div:nth-child(odd) { /* выбираем каждый нечетный блок внутри родительского элемента */
border-right: 5px solid; /* добавляем сплошную границу справа размером 5px */
}
.test {
background-color: red;  /* задаем цвет заднего фона */
}
.test2 {
background-color: green;  /* задаем цвет заднего фона */
} 
.test3 {
background-color: blue;  /* задаем цвет заднего фона */
}
.test4 {
background-color: yellow;  /* задаем цвет заднего фона */
}
</style>
</head>
	<body>
		<div class = "test"></div><div class = "test2"></div><div class = "test3"></div><div class = "test4"></div> 
	</body>
</html>

Как вы можете заметить на изображении ниже, нас ждет разочарование, так как наш макет «поплыл»:

Рис. 101 Пример вычисления ширины и высоты элементов в процентах.

Какие у нас есть варианты, чтобы исправить наш макет?

Варианта два:

  1. Первый – брать в руки калькулятор и высчитывать проценты, которые стали занимать элементы в нашем документе.
  2. Второй – использовать альтернативную модель вычисления ширины и высоты элементов.

В нашем случае я считаю, что необходимо выбрать второй вариант:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства box-sizing</title>
<style> 
div {
display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 25%; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
box-sizing: border-box; /* изменяем модель вычисления ширины и высоты элементов */
}
div:nth-child(odd) {
border-right: 5px solid; /* к каждому нечетному блоку добавляем сплошную границу справа черного цвета  размером 5px. */
}
.test {
background-color: red;  /* задаем цвет заднего фона */
}
.test2 {
background-color: green;  /* задаем цвет заднего фона */
}
.test3 {
background-color: blue;  /* задаем цвет заднего фона */
}
.test4 {
background-color: yellow;  /* задаем цвет заднего фона */
}
</style>
</head>
<body>
	<div class = "test"></div><div class = "test2"></div><div class = "test3"></div><div class = "test4"></div> 
</body>
</html>

Мы использовали CSS свойство box-sizing со значением border-box, что позволило нам изменить модель вычисления ширины и высоты элементов.


Отличительная особенность данной модели заключается в том, что значения свойства ширины (width) и высоты (height) включают в себя содержание элемента, границы (border) и внутренние отступы (padding).


В нашем случае это спасает ситуацию, и нам не придется производить каких-то вычислений, и в дальнейшем боятся каких-либо изменений, которые могут потребоваться для наших элементов. Оставим эти не нужные вычисления на стороне браузера и посмотрим на результат нашего примера:

Рис.102 Пример использования свойства box-sizing.

Для окончательного понимания этой модели вычисления ширины и высоты элементов, закрепим полученные знания на следующем примере:

<!DOCTYPE html>
<html>
<head>
	<title>Пример изменения модели вычисления ширины и высоты элементов</title>
<style> 
div {
display: inline-block;  /*  устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width: 150px; /* устанавливаем ширину блока */
height: 150px;  /* устанавливаем высоту блока */
margin: 10px;  /* устанавливаем внешний отступ для всех сторон */
padding: 10px;  /* устанавливаем внутренний отступ для всех сторон */
border: 10px solid orange;  /* устанавливаем сплошную границу 10px оранжевого цвета */
background: khaki;
} 
.test {
box-sizing: content-box; /* ширина и высота элемента включают в себя только содержание элемента (по умолчанию) */
}
.test2 {
box-sizing: border-box; /* ширина и высота элемента включают в себя содержание элемента, границы (border) и внутренние отступы (padding) */
}
</style>
</head>
	<body>
		<div class = "test">content-box</div><div class ="test2">border-box</div>
	</body>
</html>

Значение content-box свойства box-sizing является значением по умолчанию и производит расчёт общей ширины и высоты элемента по классической схеме. На примере ширины:

150 пикселей (пользовательское значение ширины) + 10 пикселей (левый внутренний отступ) + 10 пикселей (правый внутренний отступ) + 10 пикселей (левая граница) + 10 пикселей (правая граница) = 190 пикселей.

Что касается второго элемента, к которому мы применили свойство box-sizing со значением border-box, то пользовательское значение ширины и высоты элемента уже включают в себя содержание элемента, границы (border) и внутренние отступы (padding). В большинстве случаев применение свойства box-sizing со значением border-box предпочтительно на страницах, так как делает очевидным конечные размеры элемента и позволяет избежать некоторых непредвиденных ситуаций рассмотренных выше.

Результат нашего примера:

Рис. 103 Пример изменения модели вычисления ширины и высоты элементов (свойство box-sizing).

Управление переполнением блочных элементов

В процессе верстки у вас будут возникать такие ситуации, когда содержимое элемента будет отображаться за пределами границ элемента. По умолчанию браузер отображает такое содержимое (переполнение элемента отображается), что в некоторых случаях приводит к визуальным ошибкам. За такое поведение браузера отвечает CSS свойство overflow. Рассмотрим его возможные значения:

ЗначениеОписание
visibleПереполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию.
hiddenПереполнение обрезается (контент, который выходит за размеры будет невидимым).
scrollПереполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров.
autoЕсли переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров.

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
<title>Пример управления переполнением элемента</title>
<style> 
div {
display: inline-block;  /*  устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку)  */
width: 125px; /* устанавливаем ширину блока */
height: 100px;  /* устанавливаем высоту блока */
padding: 5px;  /* устанавливаем внутренний отступ для всех сторон */
border: 1px solid orange;  /* устанавливаем сплошную границу 1px оранжевого цвета */
vertical-align: top; /* верх элемента выравнивается по верху самого высокого элемента в строке (вертикальное позиционирование) */
}
.test {
overflow: visible; /* переполнение не обрезается */
}
.test2 {
overflow: hidden; /* переполнение обрезается */
}
.test3 {
overflow: scroll; /* переполнение обрезается, но добавляется полоса прокрутки */
}
.test4 {
overflow: auto; /* если переполнение обрезается, то полоса прокрутки будет добавлена автоматически */
}
</style>
</head>
<body>
	<div class = "test"><p>overflow: visible</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	<div class = "test2"><p>overflow: hidden</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	<div class = "test3"><p>overflow: scroll</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
	<div class = "test4"><p>overflow: auto</p>Съешь же ещё этих мягких французских булок да выпей чаю.</div>
</body>
</html>

В данном примере мы разместили четыре блока фиксированной ширины и высоты, для которых указали различные значения CSS свойства overflow:

  • Первый блок (значение visible) – содержимое выходит за границы элемента (значение по умолчанию).
  • Второй блок (значение hidden) – содержимое, которое переполняет элемент обрезается.
  • Третий блок (значение scroll) – переполнение обрезается, но добавляется полоса прокрутки.
  • Четвертый блок (значение auto) – как и при значении scroll, только полоса прокрутки будет добавлена автоматически, если произойдет переполнение блока по определенной оси (x — горизонтальной, либо y — вертикальной), а не отображается на странице постоянно.

Результат нашего примера:

Рис. 104 Пример управления переполнением элемента.

Переполнение по определённой оси

С выходом стандарта CSS 3 были добавлены свойства, которые способны управлять по отдельности горизонтальным переполнением (ось x) – overflow-x и вертикальным переполнением (ось y) – overflow-y. В отличии от свойства overflow, данные свойства отвечают только за одну ось (x, либо y) при этом значения и синтаксис аналогичен свойству overflow (таблица выше).

Давайте рассмотрим пример, в котором нам необходимо добавить полосу прокрутки для блока текста, если содержимое переполнит элемент по горизонтали:

<!DOCTYPE html>
<html>
<head>
	<title>Пример управления переполнением элемента по горизонтальной оси</title>
<style> 
pre {
width: 300px; /* устанавливаем ширину элемента */
overflow-x: scroll; /* переполнение обрезается, но добавляется полоса прокрутки */
background-color: orange; /* задаем цвет заднего фона */
}
</style>
</head>
	<body>
		<pre>
			Съешь же ещё этих мягких французских булок да выпей чаю. 
		</pre>
	</body>
</html>

В данном примере мы использовали элемент <pre>, который сохраняет все пробелы и переносы строк (текст может выходить из отведённой области), что нам и помогло продемонстрировать возможности свойства overflow-x. В нашем случае текст вышел за пределы ширины размера элемента <pre> и браузер добавил горизонтальный бегунок прокрутки, что нам и требовалось.

Результат нашего примера:

Рис. 105 Пример управления переполнением элемента по горизонтальной оси.

Минимальные и максимальные значения ширины и высоты блочного элемента

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

CSS, помимо явного указания значений ширины и высоты элементов (свойства width и height) предлагает такие свойства, которые позволяют указать для блочных элементов их минимальные, либо максимальные значения:

  • min-width (устанавливает минимальную ширину элемента).
  • max-width (устанавливает максимальную ширину элемента).
  • min-height (устанавливает минимальную высоту элемента).
  • max-height (устанавливает максимальную высоту элемента).

На просторах интернет не редко можно встретить такое оформление сайтов, где основное содержимое находится по центру, а на заднем фоне находятся какие-то рекламные, либо графические материалы. Сделаем для этого похожую начальную разметку:

<!DOCTYPE html>
<html>
<head>
	<title>Минимальная высота и максимальная ширина для блочных элементов</title>
<style> 
:root { /* псевдокласс :root определяет корневой элемент документа */
background-color: black; /* задаем цвет заднего фона */
}
html {
height:100%; /* задаем высоту элемента в процентах */
background-color: white; /* задаем цвет заднего фона */
}
body {
margin: 0 auto; /* задаем внешние отступы элемента (0 для верха и низа, автоматически слева и справа) */
max-width: 800px; /* задаем максимальную ширину элемента в пикселях */
height: 100%; /* задаем высоту элемента в процентах */
}
div {
min-height: 100%; /* задаем минимальную высоту элемента в процентах */
}
</style>
</head>
	<body>
		<div>
		</div>
	</body>
</html>

Какие приёмы CSS надо обязательно уяснить из этого примера:

  1. Как установить высоту элемента 100% при любом разрешении?

    Для начала мы должны установить для родителя элемента размер высоты 100%. В нашем случае необходимо установить 100% для элементов <html> и <body>, и только после этого мы устанавливаем для нашего блока размер минимальной высоты 100% (min-height). В итоге это приводит к тому, что у нас даже пустой блок растягивается на весь экран.
  2. Как горизонтально центрировать страницу?

    Для этого необходимо установить внешние отступы элемента сверху и снизу равными 0 (нулю), а слева и справа установить как auto (автоматически):
    margin: 0 auto;
    
    В нашем случае мы центрируем страницу, используя такой стиль для элемента <body>.
    Кроме того, мы указываем для элемента <body> максимальное значение ширины равной 800px (если разрешение экрана не будет вмещать 800px, то значение будет равно размеру экрана браузера (меньше этого числа), но элемент в котором установлен максимальный размер не может растянуться больше этого числа).
    Например, если бы мы указали min-width: 100px, то это бы означало, что элемент не может быть меньше чем 100px (если экран будет меньше, то браузер добавит полосу прокрутки).
  3. Как установить стиль, который будет приоритетней элемента <html>?

    Псевдокласс :root, как и селектор типа html делают одно и тоже (выбирают одни и те же элементы), но псевдокласс :root обладает более высокой специфичностью (болеее значимый при определении стиля). Вы можете использовать такой прием в будущем для установки изображений в качестве заднего фона. Подробное изучение работы с задним фоном мы рассмотрим далее в учебнике в статье «Работа с фоном элемента в CSS».

Результат нашего примера приведен на изображении ниже:

Рис. 106 Пример установки минимальной высоты и максимальной ширины для блочных элементов.

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующий документ, посвященный белому тигру (внимательно изучите страницу перед выполнением):

    Практическое задание № 26.

    Обратите внимание, что при уменьшении размера окна браузера страница принимает следующий вид:

    Практическое задание № 26 (при уменьшении размеров окна).

    Обращаю Ваше внимание, что для выполнения этого задания Вам необходимы знания из прошлых статей учебника.

    Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.


© 2016-2019 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]

basicweb.ru

Значения свойств | CSS | WebReference

Применяется для добавления значения атрибута HTML-элемента в стилевое свойство.

Задаёт размытие по Гауссу изображений или фоновых картинок.

Понижает или повышает яркость изображений или фоновых картинок.

Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер, время, число.

Понижает или повышает контрастность изображений или фоновых картинок.

Ключевое слово currentColor соответствует значению свойства color для текущего элемента. Это позволяет использовать значение цвета для свойств, которые не получают его по умолчанию.

Добавляет тень к изображениям.

Превращает изображение в чёрно-белое.

Изменяет цветность изображения за счёт поворота оттенка на цветовом круге.

Ключевое слово, которое сообщает, что необходимо наследовать значение свойства у родительского элемента.

Применяется для установки исходного значения свойства.

Инвертирует цвета в изображении.

Создаёт линейный градиент — плавный переход от одного цвета к другому.

Задаёт степень прозрачности изображений.

Задаёт значение перспективы для трёхмерных трансформаций с элементом.

Добавляет радиальный градиент к фону элемента.

Создаёт повторяющийся линейный градиент.

По своему действию похож на радиальный градиент, который делается функцией radial-gradient(), но бесконечно повторяются во всех направлениях.

Поворачивает элемент в двумерном пространстве вокруг точки вращения на заданный угол α.

Поворачивает элемент вокруг оси X на заданный угол α.

Поворачивает элемент вокруг оси Y на заданный угол α.

Поворачивает элемент вокруг оси Z на заданный угол α.

Изменяет насыщенность цветов в изображении.

Масштабирует элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях.

Масштабирует элемент по горизонтальной оси X.

Масштабирует элемент по вертикальной оси Y.

Масштабирует элемент по оси Z.

Превращает изображение в сепию — так называется чёрно-белое изображение с коричневым оттенком.

Наклоняет элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях.

Наклоняет элемент на заданный угол по горизонтали.

Наклоняет элемент на заданный угол по вертикали.

Сдвигает элемент относительно исходного расположения на заданное значение по горизонтали и вертикали.

Сдвигает элемент на заданное значение по горизонтали.

Сдвигает элемент на заданное значение по вертикали.

Сдвигает элемент относительно его исходного расположения на заданное значение по оси Z.

Устанавливает значение свойства как inherit, если свойство наследуется от своего родителя, в противном случае значение устанавливается как initial.

Позволяет вставлять значения пользовательских переменных в значения стилевых свойств.

Адреса применяются для указания пути к файлу, например, для установки фоновой картинки на странице.

Задаёт время в секундах или миллисекундах.

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

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

Для задания размеров различных элементов в CSS используются абсолютные и относительные единицы измерения.

Текстовая строка в качестве значения свойства.

Задаёт угол наклона или поворота.

Применяет разные эффекты к изображениям.

Устанавливает цвет фона, текста элемента или других параметров.

Значением может выступать целое число, содержащее цифры от 0 до 9 и десятичная дробь, в которой целая и десятичная часть разделяются точкой.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 04.01.2019

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

webref.ru

CSS: Ширина и высота элементов

По умолчанию для блочных элементов используется автоширина. Это означает, что элемент будет растянут по горизонтали ровно на столько, сколько есть свободного места. Высота блочных элементов по умолчанию устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы отобразилось все содержимое. Чтобы установить собственные размеры для области содержимого элемента, вы можете использовать свойства width и height.

CSS свойство width позволяет задать ширину области содержимого элемента, а свойство height высоту области содержимого:

описание работы CSS свойств height и width

Обратите внимание, что свойства width и height определяют размер только области содержимого, чтобы вычислить общую ширину блочного элемента, нужно сложить ширину области содержимого, левого и правого внутренних отступов и ширину левой и правой рамки. То же самое касается и общей высоты элемента, только все значения вычисляются по вертикали:

формула расчета общей высоты и ширины для элемента

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.first {
		width: 150px;
		height: 100px;
		background-color: #B2FFCC;
		padding: 0px;  /*обнуляем внутренние отступы*/
      }
	  p.second {
	    width: 150px;
	    height: 100px;
	    background-color: #C2FFFF;
	    border: 5px ridge #0066FF;
	    padding: 10px;
		margin: 5px;
	  }
    </style>
  </head>

  <body>
    <p>Для данного абзаца зададим только ширину и высоту.</p>
	<p>Этот абзац содержит, кроме ширины и высоты, 
	 внутренний отступ, рамку и внешний отступ.</p>
  </body>
</html>
Попробовать »

В примере хорошо видно, что второй элемент занимает больше пространства, чем первый. Если посчитать по нашей формуле, то размеры первого абзаца — 150×100 пикселей, а размеры второго абзаца:

Общая ширина:5px+10px+150px+10px+5px = 180px
левая
рамка
левый
отступ
ширинаправый
отступ
правая
рамка

Общая высота:5px+10px+100px+10px+5px = 130px
верхняя
рамка
верхний
отступ
высотанижний
отступ
нижняя
рамка

то есть 180×130 пикселей.

Переполнение элементов

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

  • visible — значение, используемое браузером по умолчанию. Указание этого значения будет иметь тот же эффект, что и отсутствие установки свойства overflow.
  • scroll — добавляет к элементу полосы прокрутки по вертикали и горизонтали.
  • auto — добавляет полосы прокрутки при необходимости.
  • hidden — скрывает часть содержимого, которое выходит за границы блочного элемента.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      div {
        width:150px;
        height:200px;
        border: 1px solid black;
        overflow:auto;
      }
    </style>
  </head>

  <body>
    <div><img src="tree.png"></div>
  </body>
</html>
Попробовать »

С этой темой смотрят:

puzzleweb.ru