HTML and CSS Reference
In-Depth Information
As an example, consider an HTML document at
http://web.waffles.org/toppings/tips
<link rel="stylesheet" type="text/css"
href="http://web.waffles.org/styles/basic.css">
Inside the file
basic.css
is an
@import
statement referring to another style sheet:
@import url(special/toppings.css);
you have a style sheet at the latter location, then the
@import
in
basic.css
should read:
@import url(http://web.waffles.org/toppings/special/toppings.css);
Note that there cannot be a space between the
url
and the opening parenthesis:
body {background: url(http://www.pix.web/picture1.jpg);} /* correct */
body {background: url (images/picture2.jpg);} /* INCORRECT */
If the space is present, the entire declaration will be invalidated and thus ignored.
Images
An
image value
is a reference to an image, as you might have guessed. Its syntax rep-
resentation is
<image>
.
At the most basic level of support, which his to say the one every CSS engine on the
planet would understand, an
<image>
value is simply a
<url>
value. In more advanced
user agents,
<image>
stands for one of the following:
<url>
A URL identifier of an external resource; in this case, the URL of an image.
<image-list>
Perhaps unsurprisingly, a list of images. As of mid-2012 there was no support for
this value type.
<element-reference>
Refers to an element within the document. The element is then copied and used
as an image, possibly as a “live” copy—that is to say, a copy that updates if the
element is altered through Dom scripting or user interaction. As of mid-2012, only
Firefox supported this capability.
<gradient>
Refers to either a linear or radial gradient image. Gradients are fairly complex.
