| 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
|
Параметры |
Возможные значения: |
Применимо для |
Описание |
Примеры |
|
|
Свойства font |
|||||
|
font-family |
[1] любой шрифт |
всех элементов |
это свойство определяет используемый элементом шрифт. Если указать URL, то шрифт автоматически установится на компьютер пользователя |
font-family:Arial Black URL(‘arialblack.ttf’) |
|
|
font-style |
[1] normal — без изменений |
всех элементов |
стиль элемента. Курсивный или обычный |
font-style:italic |
|
|
font-variant |
[1] normal — без изменений |
всех элементов |
варианты отображения шрифта. Нетскейп не поддерживает это свойство |
font-variant:small-caps |
|
font-weight |
[1] normal — без изменений |
всех элементов |
выделение (жирность) элемента |
font-weight:bold |
|
|
font-size |
[2] xx-small, x-small, small, medium, large, x-large, xx-large — любое из этих значений [3] smaller, larger — любое из этих значений |
всех элементов |
размер шрифта |
font-size:30pt |
|
|
font
|
[1] font-family |
всех элементов |
обобщает вышеперечисленные свойства |
font: italic bolder Arial 12pt |
|
|
Свойства Text |
|||||
|
text-decoration |
[1] none — нет |
всех элементов |
«украшение» текста |
text-decoration:line-through |
|
|
letter-spacing |
[1] длина (+) |
всех элементов |
расстояние между буквами. Не работает в Нетскейпе |
letter-spacing:100 |
|
|
vertical-align |
[1] baseline |
inline элементов |
позиционирование элементов по отношению к другим элементам стоящих в одном ряду. Не работает в Нетскейпе |
vertical-align:top-text |
|
|
Параметры |
Возможные значения: |
Применимо для |
Описание |
Примеры |
|
|
text-transform |
1] none — нет |
inline элементов |
изменение текста. Не работает в Нетскейпе |
text-transform:Capitalize |
|
|
text-align |
[1] left — текст слева |
block-level элементов |
положение текста |
text-align:right |
|
|
text-indent |
[1] длина (+) |
block-level элементов |
отступ |
text-indent:30 em |
|
|
line-height |
[1]
normal — без изменений |
всех элементов |
междустрочный интервал |
line-height:100% |
|
|
Свойства Color и Background |
|||||
|
Color |
[1] цвет (+) |
всех элементов |
цвет элемента |
color:#f00000 |
|
|
background-color |
[1] цвет (+) transparent |
всех элементов |
цвет фона элемента |
background-color:#f00000 |
|
|
background-image |
[1] none — нет |
всех элементов |
фоновое изображение для элемента |
background-image:URL(cool.gif) |
|
|
background-repeat |
[1] repeat — размножает фоновое изображение во всех
направлениях |
всех элементов |
повторения фонового изображения |
background-repeat:no-repeat |
|
|
background-attachment |
[1]
scroll — фоновое изображение скроллится всесте с содержанием документа |
всех элементов |
возможность прокрутки фонового изображения |
background-attachment:fixed |
|
|
background-position
|
[1] процент от ширины +
процент от высоты (+) |
block-level и replaced элементов |
положение фонового изображения (работает с background-repeat равным repeat-x, repeat-y или no-repeat) |
background-position:50%0% |
|
|
background
|
[1]
background-color |
всех элементов |
обобщает вышеперечисленные свойства |
background:no-repeat black fixed 50%0% |
|
|
Параметры |
Возможные значения: |
Применимо для |
Описание |
Примеры |
|
|
Свойства Box |
|||||
|
margin-top |
[1]
длина (+) |
всех элементов |
определяет отступ сверху |
margin-top:100 |
|
|
margin-right |
[1] длина (+) |
всех элементов |
определяет отступ справа |
margin-right:100% |
|
|
margin-bottom |
[1] длина (+) |
всех элементов |
определяет отступ снизу |
margin-bottom:100em |
|
|
margin-left |
[1] длина (+) |
всех элементов |
определяет отступ слева |
margin-left:100pt |
|
|
margin
|
[1] margin-top |
всех элементов |
обобщает все вышеперечисленные свойства |
|
|
|
padding |
[1] padding-top |
[1] длина (+) |
всех элементов |
отступ от верхнего border’а отступ от правого border’а отступ от левого border’а отступ от нижнего border’а |
padding-top:100pt padding-right:100% padding-left:100 padding-bottom:100em |
|
border-width |
[1]
border-top-width |
[1] длина (+) |
всех элементов |
толщина верхнего 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 dashed — пунктирняя линия прямоугольниками, solid — сплошная со срезанными углами, double — двойная линия, groove — затемненная, ridge – двухцветная, inset — двухцветная с затемнением снаружи, outset - двухцветная с затемнениея снутри |
всех элементов |
стиль border’ов. Можно задать несколько значений одновременно для разных border’ов. Если установлено одно значение — задается единый стиль для всех сторон, если два — то задаются различные стили для прилежащих сторон и т.д. |
border-style: dotted groove |
|
|
border |
[1] border-width |
всех элементов |
обобщает вышеперечисленные свойства |
border: thik black double |
|
|
width |
[1] длина (+) |
block-level и replaced элементов |
ширина элемента |
width:10% |
|
|
height |
[1] длина (+) |
block-level и replaced элементов |
высота элемента |
height:100pt |
|
|
Параметры |
Возможные значения: |
Применимо для |
Описание |
Примеры |
|
|
float |
[1]
left – слева |
всех элементов |
расположение элемента |
float:right |
|
|
clear |
[1] left – слева |
всех элементов |
расположение других элементов вокруг данного |
clear:both |
|
|
Классификация |
|||||
|
display |
[1] none — не отображается |
всех элементов |
определяет, как будет отображаться элемент |
display:none |
|
|
list-style-type |
[1] disc, circle,
square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha |
элементов со значением display равным list-item |
определяет вид list-item маркера. Если значение list-style-image равно none или не уточнено |
list-style-type:lower-alpha |
|
|
list-style-image |
[1] none — нет |
элементов со значением display равным list-item |
задает вид list-item маркера в виде картинки |
list-style-image:URL(cool.gif) |
|
|
list-style-position |
[1] inside — при переносе следующие строки будут
отображаться без отступа |
элементов со значением display равным list-item |
определяет положение маркера в зависимости от list item элемента |
list-style-position:inside |
|
|
list-style |
[1]
list-style-type |
элементов со значением 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>
Результат:
В этом примере мы создали блок div и вложили в него абзац p с текстом. Для div-а мы строго задали размеры 300 на 300 пикселей. У элемента p значения свойств width и height равны auto, поэтому как видно на скриншоте, его ширина установилась равной ширине родительского элемента, а высота стала такой, чтобы в нем поместился весь содержащийся в абзаце текст.
Теперь изменим css настройки для абзаца p и зададим фиксированные размеры:
.layer2 {
background: #eee;
width:250px;
}
Результат:
Как видим ширина абзаца стала уже и равна 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.
Переполнение контента может возникнуть, когда ограничивают и ширину и высоту элемента. Рассмотрим два абзаца:
<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>
Результат:
Так как ни ширина ни высота для абзацев не заданы, то браузер самостоятельно рассчитывает их исходя из своего собственного понимания значения auto. В результате абзацы по ширине заняли все доступное пространство, а по высоте в соответствии с содержащимся в них контентом.
Теперь у первого абзаца ограничим ширину:
<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>
Результат:
Ширина абзаца ожидаемо уменьшилась, а высота установилась такой, чтобы вместить в себя весь текст.
Ну а теперь ограничим у первого абзаца и высоту:
<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>
В результате получилось, что текст в такой ограниченный абзац не влазит и поэтому он наехал на область нижнего соседа. Соответственно прочитать текст ни в первом ни во втором абзацах практически не возможно. Именно для управления поведением контента в таких ситуациях существует правило overflow:
overflow: visible|hidden|scroll|auto|inherit
По умолчанию overflow принимает значение visible, которое сообщает браузеру, чтобы он отображал содержимое не уместившееся в контейнере. Результат можно увидеть на примере выше.
Правило overflow:hidden скрывает все, что не помещается в контейнере:
Значение scroll отобразит в элементе по вертикали и горизонтали полосы прокрутки даже в том случае, если все содержимое умещается:
<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>
Наиболее популярным и логичным решением, если вам понадобится сделать полосы прокрутки для контейнера является значение auto. В этом случае браузер сам будет определять когда и по каким осям стоит отображать полосы прокрутки:
<p> Текст первого абзаца</p>
<p> Текст второго абзаца</p>
Результат:
Для настройки полос прокрутки можно также использовать атрибуты стиля 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 можно охарактеризовать простыми словами как набор правил, описывающих, как должен выглядеть элемент.
Правило состоит из селектора и блока объявлений.
Селекторы
Селектор сообщает, к какому элементу будут применены описываемые в 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 Пример вычисления ширины и высоты элементов в процентах.Какие у нас есть варианты, чтобы исправить наш макет?
Варианта два:
- Первый – брать в руки калькулятор и высчитывать проценты, которые стали занимать элементы в нашем документе.
- Второй – использовать альтернативную модель вычисления ширины и высоты элементов.
В нашем случае я считаю, что необходимо выбрать второй вариант:
<!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 надо обязательно уяснить из этого примера:
Как установить высоту элемента 100% при любом разрешении?
Для начала мы должны установить для родителя элемента размер высоты 100%. В нашем случае необходимо установить 100% для элементов <html> и <body>, и только после этого мы устанавливаем для нашего блока размер минимальной высоты 100% (min-height). В итоге это приводит к тому, что у нас даже пустой блок растягивается на весь экран.Как горизонтально центрировать страницу?
Для этого необходимо установить внешние отступы элемента сверху и снизу равными 0 (нулю), а слева и справа установить как auto (автоматически):margin: 0 auto;
В нашем случае мы центрируем страницу, используя такой стиль для элемента <body>.
Кроме того, мы указываем для элемента <body> максимальное значение ширины равной 800px (если разрешение экрана не будет вмещать 800px, то значение будет равно размеру экрана браузера (меньше этого числа), но элемент в котором установлен максимальный размер не может растянуться больше этого числа).
Например, если бы мы указали min-width: 100px, то это бы означало, что элемент не может быть меньше чем 100px (если экран будет меньше, то браузер добавит полосу прокрутки).Как установить стиль, который будет приоритетней элемента <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
Редакторы: Влад Мержевич
webref.ru
CSS: Ширина и высота элементов
По умолчанию для блочных элементов используется автоширина. Это означает, что элемент будет растянут по горизонтали ровно на столько, сколько есть свободного места. Высота блочных элементов по умолчанию устанавливается автоматически, т.е. браузер растягивает область содержимого в вертикальном направлении так, чтобы отобразилось все содержимое. Чтобы установить собственные размеры для области содержимого элемента, вы можете использовать свойства width и height.
CSS свойство width позволяет задать ширину области содержимого элемента, а свойство height высоту области содержимого:
Обратите внимание, что свойства 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