mercoledì 24 agosto 2011

CSS – List Of CSS Properties



In this chapter I will give you a partially complete list of CSS properties.


My aim is to have a maximum amount of CSS properties on this page. We have already seen a lot of them in the lessons, but there are also properties that we haven’t had the time to see in the tutorials. Most of them are quite rare but easy to use.


The list is only partial because I don’t want to make a complete list of CSS properties that exist. There are too many, and a lot of them are never used.
Therefore, I prefer to concentrate on the main ones, and as you’ll see, there are still a lot of them icon wink CSS List Of CSS Properties


In this part I’ll put most of the properties used for text formatting.


What is text formatting ? It’s everything that has to do with the shape and size of the text : bold, italic, underlined, font, alignment etc…


Indicate the names of the fonts in the order you want them :


Code : CSS

font-family: font1, font2, font3;

If the visitor has font1 on his computer, font1 will be used. If not, the computer will try font2 then font3 etc.
Use speech marks if the name of a font has spaces in it. Always put the last font as serif or sans-serif.


Code : CSS

font-family: "Arial Black", Arial, Verdana, serif;

Indicates the size of the text.
Several measurements are possible :

px (pixels)% (percentage, 100% = normal)em (related size, 1.0 = normal)ex (related size from the height of the letter x. 1.0 = normal)name of the size : xx-smallx-smallsmallmediumlargex-largexx-largeboldbolderlighternormal (by default)italicobliquenormal (by default)underlineoverlineline-throughblinknone (by default)small-capsnormal (by default)uppercaselowercasecapitalizenone (by default)

Indicate in the order you wish the values for font-weight, font-style, font-size, font-variant, font-family.
Be careful, exception : the name of the font (font-family), must be last in the list.
You don’t have to put values for every attribute.


Example :


Code : CSS

font: bold, 16px, Arial;left (by default)centerrightjustify

Can be used in the cells of a table or in inline elements that are contained inside inline elements :

Indicate a value in pixels (px) or a percentage (%)

Indicate a value in pixels for the indentation.
Your paragraphs will start with the indentation you’ve entered.

normal (by default)nowrap : no automatic line break unless a
tag is present.pre : line break are like the source code is presented (like the XHTML tag
)

Indicates the colour with one of the following methods :

by writing the name in English (black, blue, green, white, red…)with a hexadecimal value (#CC48A1)with a color in RGB : rgb(128, 255, 0)

Indicate the URL of the image (absolute or related URL) :

background-image: url("images/bg.png"); /* related address */background-image: url("http://www.mysite.com/images/bg.png"); /* absolute address */repeat : the background repeats all over (by default)repeat-x : the background only repeats horizontallyrepeat-y : the background only repeats verticallyno-repeat : the background doesn’t repeat, it’s only shown once

There are 2 different methods :

enter a distance in pixels (px) or a percentage (%), in relation to the top-right corner :

Code : CSS

background-position: 50px 200px; /*50px to the right and 200px down */

use a predefined value, one for the vertical and one for the horizontal position :

Code : CSS

background-position: bottom right;

Indicate one or several values from background-image, background-repeat, background-attachment, background-position.
The order of the values doesn’t matter and you don’t have to include values for every property (1 is enough).

Code : CSS

/* the background bg.png will be shown in the top right and won't be repeated */background: url("images/bg.png") no-repeat fixed top right;Value in px, % or auto (by default, depends on the text or content inside)Indicate a value in pixels for example.Indicate a value like 20px, 1.5em…

Indicate between 1 and 4 values. Depending on the number of values the meaning changes :

1 value : margin for the top, bottom, left and right2 values : the first is for the top and bottom margins, the second is for the left and right margins3 values : the first is the top margin, the second is the left and right margins, the third is the bottom margin4 values : in the order of the top, right, bottom and left marginsIndicate a value like 20px, 1.5em…

Indicate between 1 and 4 values. Depending on the number of values the meaning changes :

1 value : padding for the top, bottom, left and right2 values : the first is for the top and bottom margins, the second is for the left and right margins3 values : the first is the top margin, the second is the left and right margins, the third is the bottom margin4 values : in the order of the top, right, bottom and left marginsIndicate a value in pixels (px)Indicate a colour in English, hexadecimal or RGBnone (by default)hidden : invisible bordersolid : solid linedouble : two parallel lines (needs a minimum border of 3px)dasheddottedinset : 3D effect going awayoutset : 3D effect coming outridge : another 3D effect

Indicate the colour, thickness and type of border for the left border.
The order doesn’t matter. Example :

Code : CSS

border-left: 2px inset blue;Indicate the colour, thickness and type of border for every side.none : the element won’t be shownblock : the element becomes a block (like

)inline : the element will become inline (like
)list-item : the element will become part of a list (like

  • )hiddenvisible (by default)none : makes the element go away completely whereas hidden hides the element but the element still takes up room on the screen.

    Indicate 4 values like this :

    Code : CSS

    clip: rect(value1, value2, value3, value4);

    Allows us to only show a part of an element. rect() allows us to insert the coordinates of the rectangle that will be shown.
    Values 1 to 4 correspond respectively to the top, right, bottom and left corners of the rectangle.

    visible : everything will be shown (by default)hidden : the element will be cut off if it goes past the dimensions set by width and height. You won’t be able to see the text that has been cut off.scroll : like with hidden, the element will be cut off. However, this time a scroll bar will be added to allow us to see the rest of the text.auto : this time the browser decides if a scroll bar needs adding or not. Very often this is just like using scroll.left : float to the leftright : float to the rightnone (by default)left : stops left floatright : stops right floatboth : stop left and right floatsnone : doesn’t stop any floatabsolute : absolute positioning in relation to the top left cornerfixed : fixed position (works like absolute). The element always stays in the same position on the screen, even when you scroll.relative : position in relation to the normal position of the elementstatic : normal position (by default)Position in relation to the topValue in px, em, %… To be used for absolute, fixed or related positioning.Position in relation to the bottomPosition in relation to the leftPosition in relation to the right

    In the case of absolute positioning for example, if 2 elements overlap, z-index allows us to say which element should be shown on top.
    Put a num. The higher the number is, the more the element will be brought forward.

    For example, if 2 elements are using absolute positioning and they overlap with a z-index of 10 for one, and z-index of 20 for the other, the one with 20 will be at the front.

    For unordered lists (

      ) :

      For ordered lists (

        ) :

        decimaldecimal-leading-zeroupper-romanlower-romanupper-alphalower-alphalower-greekinside : without indentoutside : with indent (by default)

        Indicate the URL of the image which will act as a bullet point. Example :

        Code : CSS

        list-style-image: url("images/point.jpg");

        You can reunite the values of list-style-type, list-style-position and list-style-image. You don’t have to put values for everything and the order doesn’t matter.
        Example :

        Code : CSS

        list-style: square inside;collapse : the borders of the table and cells are mergedseparate : the borders are separated (by default)show : empty cells are visiblecollapse : empty cells are hidden (by default)

        Indicate the position of the table’s title, defined with the tag :

        top : top of the tablebottom : bottom of the tableleft : to the left of the tableright : to the right of the tableautodefaultpointertextwaitprogresshelpmoven-resizene-resizee-resizese-resizesw-resizew-resizenw-resize

        url : personalised cursor, in .cur or .ani format. Example :

        Code : CSS

        cursor: url("images/cursor.cur");

        You must use a special program to create .ani or .cur cursors.

  • Nessun commento:

    Posta un commento