CSS References | CSS: Presentation Layer
Standards Based Development
css Image (Data Type)
image css data type represents a 2d image; there are two kinds in css: plain static images, which are typically referenced using a url, and dynamically-generated images like gradients or representations of parts of the tree. Images css can handle:
- Images with intrinsic dimensions, that is a natural size, like
.jpegimages which have fixed dimensions. - Images with several interinsic dimensions, that exist in several versions inside a file, like some
.icoformats. In that case, the intrinsic dimension will be the one of the bigger image, in surface, and with the closest ratio to the one of the containing box. - Images with no intrinsic dimensions but with an intrinsic aspect ratio, between its width and height, like some vectorized images in the svg format for example.
- Images with neither intrinsic dimensions, nor an intrinsic aspect ratio, like a css gradient for example.
css determines the concrete object size using these intrinsic dimensions, the specified size defined by width, height, or background-size, and the default object size defined by the kind of property the image is used with:
| Kind of Object | Default Object Size |
|---|---|
background-image | The size of the element's background positioning area. |
list-style-image | The size of a character of |
border-image | The size of the element's border image area. |
cursor | A browser-defined size matching the usual size of a cursor on the used system. |
Replaced Content using content with before and after pseudo-elements | A 300px x 150px rectangle. |
image css data type represents may be one of the following:
- An iamge denoted by a css
uridata type and theurl()function. - A css
gradientdata type. - A part of the document, defined by the
element()function.
css Layers
Below are some of the layers of css (there are more than 4):
- document
- base
- module
- layout
Note: A css block should only affect one css layer.