CSS3 lets you calculate units.
This is a flexible approach that gives you both control and precision when you create styles.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {<!-- w w w . j a v a2s. c o m-->
background: grey;
color:white;
font-size: 20pt;
width: calc(80% - 20px);
}
</style>
</head>
<body>
<p>this is a test.</p>
</body>
</html>
You use the calc
keyword and parentheses to encompass a calculation.
You can mix other units and perform basic math.
You will need to use angles when you come to transforms.
You express angles as a number followed by a unit-for example, 360deg.
The following table shows the set of supported angle units.
Unit Identifier | Description |
---|---|
deg | Specifies the angle in degrees (values are from 0deg to 360deg) |
grad | Specifies the angle in gradians (values are from 0grad to 400grad) |
rad | Specifies the angle in radians (values are from 0rad to 6.28rad) |
turn | Specifies the angle in complete turns (1turn is equal to 360deg) |
You can measure intervals using the CSS time.
Times are defined as a number of units followed by a time unit-for example, 100ms.
The following table shows the supported time units.
Unit Identifier | Description |
---|---|
s | Specifies time in seconds |
ms | Specifies time in milliseconds (1s is equal to 1000ms) |