Friends

Tuesday, September 27, 2011

CSS COLORS

Tuesday, September 27, 2011  ilmu-reparasi-komputer  No comments

CSS has several options for defining colors of both text and background areas on your pages.

These options can entirely replace the color attributes in plain HTML. In addition, you get new options that you just didn't have in plain HTML.

For example, in plain HTML, when you wanted to create an area with a specific color you were forced to include a table. With CSS, you can define an area to have a specific color without that area being part of a table.

Or even more useful, in plain HTML when working with tables, you had to specify font attributes and colors etc. for each and every table cell. With CSS you can simply refer to a certain class in your <TD> tags.




COLOR PROPERTIES

PropertyValuesNSIE
color
<color>4+4+
background-color
transparent
<color>		4+
4+		4+
4+
background-imagenone
url(<URL>)		4+
4+		4+
4+
background-repeat
repeat
repeat-x
repeat-y
no-repeat		4+
4+
4+
4+		4+
4+
4+
4+
background-attachment
scroll
fixed
4+
4+
background-position
<percentage>
<length>
top
center
bottom
left
right





4+
4+
4+
4+
4+
4+
4+
background
<background-color>
<background-image>
<background-repeat>
<background-attachment>
<background-position>		4+
4+
4+

 		4+
4+
4+
4+
4+

4P:problems, 4M:Mac only, 4W:Windows only



Setting colors

Basically you have three color options with CSS:

1: Setting the foreground color for contents
2: Setting the background color for an area
3: Setting a background image to fill out an area

In the next section we will list the different properties that let you
do that.

In plain HTML, colors can either be entered by name (red, blue etc.) or by a hexadecimal color code (for example: #FF9900).

With CSS you have these options:


Common name
You can define colors with the use of common names, by simply enter the name of the desired color.

For example:

.myclass {color:red; background-color:blue;}




Hexadecimal value
You can define colors with the use of hexadecimal values, similar to how it's done in plain HTML.

For example:

.myclass {color:#000000; background-color:#FFCC00;}




RGB value
You can define colors with the use of RGB values, by simply entering the values for amounts of Red, Green and Blue.

For example:

.myclass {color:rgb(255,255,204); background-color:rgb(51,51,102);}


You can also define RGB colors using percentage values for the amounts of Red, Green and Blue:

For example:

.myclass {color:rgb(100%,100%,81%); background-color:rgb(81%,18%,100%);}





Setting background colors

Background colors are defined similar to the colors mentioned above. For example you can set the background color of the entire page using the BODY selector:

BODY {background-color:#FF6666;}




Setting a background image
CSS lets you set a background image for both the page and single elements on the page.

In addition, CSS offers several positioning methods for background images.

You can define the background image for the page like this:
BODY {background-image:url(myimage.gif);}


You can control the repetition of the image with the background-repeat property.

background-repeat:repeat
Tiles the image until the entire page is filled, just like an ordinary background image in plain HTML.

background-repeat:repeat-x
Repeats the image horizontally - but not vertically.

background-repeat:repeat-y
Repeats the image vertically - but not horizontally.

background-repeat:no-repeat
Does not tile the image at all.




Positioning a background
Background positioning is done by entering a value for the left position and top position separated by a space.

In this example the image is positioned 75 pixels from the upper left corner of the page:

BODY {background-image:url(myimage.gif); background-position: 75px 75px;}


Note: Background positioning is not supported by Netscape 4 browsers.



Fixing a background
You can fixate an image at a certain position so that it doesn't move when scrolling occurs.

BODY {background-image:url(myimage.gif); background-attachment: fixed;}


Note: Background fixation is not supported by Netscape 4 browsers.



Setting multiple background values
Rather than defining each background property with its own property you can assign them all with the use of the background property.

Look at this example:

BODY {background:green url(myimage.gif) repeat-y fixed 75px 75px;}

Posted in:

0 comments:

Post a Comment

#
### ###