Client-Side Web Technologies

[Pages:38]Client-Side Web Technologies

CSS Part III

Topics

? Color and background properties ? Font and text properties ? Table properties ? Transforms ? Transitions and Animations

Color Property

? Specifies the color of an element's text content ? color

? Value: color | inherit ? Initial: varies among browsers ? Inherited: yes

? Examples:

? color: red; ? color: #efefef; ? color: rgb(255, 0, 0)

Background Color Property

? Specifies the color of an element's background ? background-color

? Value: color | inherit ? Initial: transparent ? Inherited: no

? Examples:

? background-color: red; ? background-color: #efefef; ? background-color: rgb(255, 0, 0)

Background Image Property

? Specifies the background image(s) of an element ? background-image

? Value: [ image | none [ , image | none ]* ] | inherit ? Initial: none ? Inherited: no

? Examples:

? background-image: url(`sompic.jpg'); ? background-image: url(`abc.jpg'), url(`123.jpg');

Background Repeat Property

? Specifies how background images are tiled ? = repeat-x | repeat-y | [ repeat | no-

repeat ]{1,2} ? background-repeat

? Value: [ [ , ]* ] | inherit ? Initial: repeat ? Inherited: no

? repeat: image is tiled to fill area ? no-repeat: image is placed once and not repeated

Background Size Property

? Specifies the size of background images ? = [ | | auto ]{1,2} | cover

| contain ? background-size

? Value: [ [ , ]* ] | inherit ? Initial: auto ? Inherited: no

? contain: scale image to largest size such that width and height fit and aspect ratio is maintained

? cover: scale image to smallest size such that width and height completely cover and aspect ratio is maintained

? When length or percentages are given, first value is width and second value is height

Background Attachment Property

? Specifies whether a background image is fixed with respect to viewport or the element

? = scroll | fixed ? background-attachment

? Value: [ [ , ]* ] | inherit ? Initial: scroll ? Inherited: no

? fixed: background is fixed with respect to viewport ? scroll: background is fixed with respect to element

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download