Interface utilisateur CSS3

Interface utilisateur CSS3

Dans CSS3, de nouvelles fonctionnalités d'interface utilisateur ont été ajoutées pour ajuster la taille des éléments, la taille de la boîte et la bordure extérieure.

Dans ce chapitre, vous découvrirez les propriétés suivantes de l'interface utilisateur :

  • resize

  • box-sizing

  • décalage-contour


Redimensionner CSS3 (Redimensionner)

En CSS3, l'attribut resize précise si un élément doit être redimensionné par l'utilisateur.

Cet élément div est redimensionné par l'utilisateur. (Dans Firefox 4+, Chrome et Safari)

Le code CSS est le suivant :


Exemple

L'utilisateur précise la taille d'un élément div :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            border:2px solid;
            padding:10px 40px;
            width:300px;
            resize:both;
            overflow:auto;
        }
    </style>
</head>
<body>
<div>调整属性指定一个元素是否由用户可调整大小的。.</div>
</body>
</html>

Exécutez le programme et essayez-le


Dimensionnement de la boîte CSS3

La propriété box-sizing vous permet de définir exactement comment le contenu s'intégrera dans une certaine zone.


Exemple

Spécifie deux cases bordées côte à côte :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个div占据了左边的一半。.</div>
<div class="box">这个div占据了右边的一半。</div>
</div>
</body>
</html>

Exécutez le programme et essayez-le


Modification du contour CSS3 (outline-offset)

La propriété outline-offset compense le contour. Et dessinez le contour au-delà du bord de la bordure.

Il existe deux différences entre les contours et les bordures :

Les contours ne prennent pas de place. Les contours peuvent être non rectangulaires

Instances

Spécifiez le contour 15 pixels au-delà du bord de la bordure :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style> 
div
{
margin:20px;
width:150px; 
padding:10px;
height:70px;
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
} 
</style>
</head>
<body>
<div>这个 div有一个轮廓边界15 px边境外的边缘。</div>
</body>
</html>

Exécutez le programme et essayez-le


Nouvelles fonctionnalités de l'interface utilisateur


属性说明CSS
appearance允许您使一个元素的外观像一个标准的用户界面元素3
box-sizing允许你以适应区域而用某种方式定义某些元素3
icon为创作者提供了将元素设置为图标等价物的能力。3
nav-down指定在何处使用箭头向下导航键时进行导航3
nav-index指定一个元素的Tab的顺序3
nav-left指定在何处使用左侧的箭头导航键进行导航3
nav-right指定在何处使用右侧的箭头导航键进行导航3
nav-up指定在何处使用箭头向上导航键时进行导航3
outline-offset外轮廓修饰并绘制超出边框的边缘3
resize指定一个元素是否是由用户调整大小3




Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> div { margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline:2px solid red; outline-offset:15px; } </style> </head> <body> <p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p> <div>这个 div有一个轮廓边界15 px边境外的边缘。</div> </body> </html>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel