Пользовательский интерфейс CSS
В этой главе рассматриваются два свойства CSS для пользовательского интерфейса:
resizeoutline-offset
Изменение размера CSS
Может ли пользователь изменять размер элемента и в каком направлении, зависит от свойства resize.
Вы можете задать ему любое из этих значений:
horizontal— пользователь может изменять только ширинуvertical— пользователь может изменять только высотуboth— пользователь может изменять и ширину, и высотуnone— элемент сохраняет свой размер, изменять его нельзя
Изменение размера только по ширине
Пользователь может изменять только ширину этого элемента <div>.
Prompt
Создайте страницу с элементом div, размер которого пользователь может изменять только по горизонтали (ширина). У div должна быть граница, отступ и образец текста. Используйте свойство CSS resize со значением horizontal и overflow auto.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Resize Horizontal</title>
<style>
div {
border: 2px solid black;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>CSS Resize - Horizontal</h1>
<div>
<p>You can resize this div element horizontally. Click and drag the bottom-right corner to change the width.</p>
</div>
</body>
</html>
Изменение размера только по высоте
Пользователь может изменять только высоту этого элемента <div>.
Prompt
Создайте страницу с элементом div, размер которого пользователь может изменять только по вертикали (высота). У div должна быть граница, отступ и образец текста. Используйте свойство CSS resize со значением vertical и overflow auto.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Resize Vertical</title>
<style>
div {
border: 2px solid black;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>CSS Resize - Vertical</h1>
<div>
<p>You can resize this div element vertically. Click and drag the bottom-right corner to change the height.</p>
</div>
</body>
</html>
Изменение размера по ширине и высоте
Пользователь может свободно изменять размер этого элемента <div> и по ширине, и по высоте.
Prompt
Создайте страницу с элементом div, размер которого пользователь может изменять как по горизонтали, так и по вертикали. У div должна быть граница, отступ и образец текста. Используйте свойство CSS resize со значением both и overflow auto.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Resize Both</title>
<style>
div {
border: 2px solid black;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>CSS Resize - Both</h1>
<div>
<p>You can resize this div element both horizontally and vertically. Click and drag the bottom-right corner.</p>
</div>
</body>
</html>
Отключение изменения размера в textarea
Браузеры обычно по умолчанию позволяют изменять размер <textarea>, и свойство resize может это отключить.
Prompt
Создайте страницу с элементом textarea, у которого отключена стандартная возможность изменения размера с помощью свойства CSS resize, установленного в none. Добавьте метку (label) для textarea.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Disable Textarea Resize</title>
<style>
textarea {
resize: none;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<h1>Disable Resize in Textarea</h1>
<label for="myTextarea">This textarea cannot be resized:</label><br>
<textarea id="myTextarea">This textarea has resize set to none. You cannot resize it.</textarea>
</body>
</html>
Отступ контура CSS
outline-offset создаёт прозрачный промежуток между контуром и краем или границей элемента.
Примечание: Контуры и границы различаются. Контур находится за пределами границы, может перекрывать другое содержимое и не учитывается в размере элемента, поэтому его общая ширина и высота остаются прежними.
Пример
Здесь outline-offset создаёт промежуток между границей и контуром.
Prompt
Создайте страницу с двумя элементами div, демонстрирующими свойство outline-offset. У первого div сплошная чёрная граница 1px, сплошной красный контур 4px и outline-offset 15px. У второго div сплошная чёрная граница 1px, пунктирный синий контур 5px и outline-offset 5px. У обоих есть отступы и немного текстового содержимого.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Outline Offset</title>
<style>
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
padding: 10px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS Outline Offset</h1>
<div class="ex1">This div has a 15px outline offset with a solid red outline.</div>
<br>
<div class="ex2">This div has a 5px outline offset with a dashed blue outline.</div>
</body>
</html>