1、3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPage 1 of 35http:/ BChapter: 1 - Introduction to CSSA CSS (cascading style sheet) file allows you to separate your web sites(X)HTML content from its style. As always you use your (X)HTML file toarrange the content, but all of the presentation (fonts,
2、colors,background, borders, text formatting, link effects font-family: “Trebuchet MS“, Verdana, Arial, serif;body font-family: Verdana, serif;h1 font-family: Georgia, sans-serif;p font-family: Tahoma, serif;3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPage 5 of 35http:/ all tags within the file
3、will be set to Georgia and all tagsare set to Tahoma, leaving text within other elements unchanged fromthe body declaration of Verdana.There are instances where nested elements do not inherit the containingelements properties.For example, if the body margin is set to 20 pixels, the other elementswit
4、hin the file will not inherit the body margin by default.Combining SelectorsYou can combine elements within one selector in the following fashion.As you can see in the above code, I have grouped all the headerelements into one selector. Each one is seperated by a comma. The finalresult of the above
5、code sets all headers to green and to the specifiedfont. If the user does not have the first font I declared it will go toanother sans-serif font the user has installed on there computer.Comment tagsComments can be used to explain why you added certain selectors withinyour css file. So as to help ot
6、hers who may see your file, or to help youremember what you were thinking at a later date. You can addcomments that will be ignored by browsers in the following manner.You will note that it begins with a / (forward slash) and than an *(asterisks) then the comment, then the closing tag which is justb
7、ackward from the opening tag * (asterisks) then the / (forward slash).Chapter 3: CSS ClassesThe class selector allows you to style items within the same (X)HTMLelement differently. Similiar to what I mentioned in the introductionabout inline styles. Except with classes the style can be overwritten b
8、ychanging out stylesheets. You can use the same class selector again andagain within an (X)HTML file.To put it more simply, this sentence you are reading is defined in myCSS file with the following.body margin: 20px;h1, h2, h3, h4, h5, h6 color: #009900;font-family: Georgia, sans-serif;/* This is a
9、comment */p font-size: small; 3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPage 6 of 35http:/ simple, but lets say that I wanted to change the word “sentence“to green bold text, while leaving the rest of the sentence untouched. Iwould do the following to my (X)HTML file.Then in my CSS file I wou
10、ld add this style selector:The final result would look like the following:To put it more simply, this sentence you are reading is styled in my CSSfile by the following.Please note that a class selector begins with a (.) period. The reason Inamed it “greenboldtext“ is for example purposes, you can na
11、me itwhatever you want. Though I do encourage you to use selector namesthat are descriptive. You can reuse the “greenboldtext“ class as manytimes as you want.Chapter 4: CSS IDsIDs are similar to classes, except once a specific id has been declared itcannot be used again within the same (X)HTML file.
12、I generally use IDs to style the layout elements of a page that will onlybe needed once, whereas I use classes to style text and such that maybe declared multiple times.The main container for this page is defined by the following.I have chosen the id selector for the “container“ division over a clas
13、s,because I only need to use it one time within this file.Then in my CSS file I have the following:font-size: small; color: #333333To put it more simply, this sentence you are reading is styledin my CSS file by the following.greenboldtext font-size: small; color: #008080;font-weight: bold;Everything
14、 within my document is inside this division.#container width: 80%;margin: auto;padding: 20px;3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPage 7 of 35http:/ will notice that the id selector begins with a (#) number sign insteadof a (.) period, as the class selector does.Chapter 5: CSS DivisionsO
15、k so you have finished the first 4 chapters in my series. You havelearned the very basics of CSS, how the syntax works and a bit aboutclasses and IDs. Now we are gonna take a quick break from CSS andfocus on the (X)HTML side of using it.DivsionsDivisions are a block level (X)HTML element used to def
16、ine sections of an(X)HTML file. A division can contain all the parts that make up yourwebsite. Including additional divisions, spans, images, text and so on.You define a division within an (X)HTML file by placing the followingbetween the tags:Though most likely you will want to add some style to it.
17、 You can do thatin the following fashion:The CSS file contains this:Now everything within that division will be styled by the “container“ stylerule, I defined within my CSS file. A division creates a linebreak bydefault. You can use both classes and IDs with a division tag to stylesections of your w
18、ebsite.Chapter 6: CSS SpansSpans are very similar to divisions except they are an inline elementversus a block level element. No linebreak is created when a span isdeclared.padding: 20px;border: 1px solid #666;background: #ffffff;Site contents go hereSite contents go here#containerwidth: 70%;margin:
19、 auto;padding: 20px;border: 1px solid #666;background: #ffffff;3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPage 8 of 35http:/ can use the span tag to style certain areas of text, as shown in thefollowing:Then in my CSS file:The final result is: This text is italic.The purpose of the last 2 chap
20、ters was to provide you with a basis forusing CSS in an (X)HTML file. For a more detailed explaination of XHTMLplease visit W3SchoolsChapter 7: CSS MarginsInherited: NoAs you may have guessed, the margin property declares the marginbetween an (X)HTML element and the elements around it. The marginpro
21、perty can be set for the top, left, right and bottom of an element.(see example below)As you can also see in the above example you have 3 choices of valuesfor the margin propertylengthpercentageautoYou can also declare all the margins of an element in a single property asfollows:If you declare all 4
22、 values as I have above, the order is as follows:1. top2. right3. bottom4. leftThis text is italic.italic font-style: italic; margin-top: length percentage or auto; margin-left: length percentage or auto;margin-right: length percentage or auto;margin-bottom: length percentage or auto;margin: 10px 10
23、px 10px 10px;3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPage 9 of 35http:/ only one value is declared, it sets the margin on all sides. (see below)If you only declare two or three values, the undeclared values are takenfrom the opposing side. (see below)You can set the margin property to negat
24、ive values. If you do notdeclare the margin value of an element, the margin is 0 (zero).Elements like paragraphs have default margins in some browsers, tocombat this set the margin to 0 (zero).Note: You do not have to add px (pixels) or whatever units you use, ifthe value is 0 (zero).You can see in
25、the example below, the elements for this site are set tobe 20px (pixels) from the bodyChapter 8: CSS PaddingInherited: NoPadding is the distance between the border of an (X)HTML element andthe content within it.Most of the rules for margins also apply to padding, except there is no“auto“ value, and
26、negative values cannot be declared for padding.As you can also see in the above example you have 2 choices of valuesfor the padding propertylengthmargin: 10px;margin: 10px 10px; /* 2 values */margin: 10px 10px 10px; /* 3 values */margin: -10px;p margin: 0;body margin: 20px;background: #eeeeee;font-s
27、ize: small;font-family: Tahoma, Arial, “Trebuchet MS“, Helvetica, sans-serif;text-align: left;padding-top: length percentage; padding-left: length percentage;padding-right: length percentage;padding-bottom: length percentage;3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPage 10 of 35http:/ can al
28、so declare all the padding of an element in a single property asfollows:If you declare all 4 values as I have above, the order is as follows:1. top2. right3. bottom4. leftIf only one value is declared, it sets the padding on all sides. (see below)If you only declare two or three values, the undeclar
29、ed values are takenfrom the opposing side. (see below)If you do not declare the padding value of an element, the padding is 0(zero).Note: You do not have to add px (pixels) or whatever units you use, ifthe value is 0 (zero).You can see in the example below, the main container for this site has30px (
30、pixels) of padding between the border and the text.Chapter 9: CSS Text PropertiesInherited: YesColorYou can set the color of text with the following:Possible values arepadding: 10px 10px 10px 10px;padding: 10px;padding: 10px 10px; /* 2 values */padding: 10px 10px 10px; /* 3 values */#container width
31、: 70%;margin: auto;padding: 30px;border: 1px solid #666;background: #ffffff;color: value;3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPage 11 of 35http:/ name - example:(red, black.)hexadecimal number - example:(#ff0000, #000000)RGB color code - example:(rgb(255, 0, 0), rgb(0, 0, 0)Letter Spacin
32、gYou can adjust the space between letters in the following manner.Setting the value to 0, prevents the text from justifying. You can usenegative values.Possible values arenormallengthExample:T h e s e l e t t e r s a r e s p a c e d a t 5 p x .Text AlignYou can align text with the following:Possible
33、 values areleftrightcenterjustifyExamples:This text is aligned left.This text is aligned in the center.This text is aligned right.This text is justified.Text DecorationYou can decorate text with the following:letter-spacing: value;text-align: value;3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPa
34、ge 12 of 35http:/ values arenoneunderlineoverlineline throughblinkExamples:This text is underlined.This text is overlined.This text has a line through it.This text is blinking (not in internet explorer).Text IndentYou can indent the first line of text in an (X)HTML element with thefollowing:Possible
35、 values arelengthpercentageExamples:This text is indented 10px pixels.Text TransformYou can control the size of letters in an (X)HTML element with thefollowing:Possible values arenonecapitalizelowercaseuppercasetext-decoration: value;text-indent: value;text-transform: value;3/07/07 2:13 AMPrint all
36、18 Chapters - CSS BasicsPage 13 of 35http:/ First Letter In Each Word Is Capitalized, Though It Is Not In MyFile.THIS TEXT IS ALL UPPERCASE, THOUGH IT IS ALL LOWERCASE IN MYFILE.this text is all lowercase. though it is all uppercase in my file.White SpaceYou can control the whitespace in an (X)HTML
37、element with thefollowing:Possible values arenormalprenowrapWord SpacingYou can adjust the space between words in the following manner. Youcan use negative values.Possible values arenormallengthExample:These words are spaced at 5px.Chapter 10: CSS Font PropertiesInherited: YesFontThe font property c
38、an set the style, weight, variant, size, line height andwhite-space: value;word-spacing: value;3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPage 14 of 35http:/ above would set the text of an element to an italic style a boldweight a normal variant a relative size a line height of 1.4em and thefo
39、nt to Verdana or another sans-serif typeface.Font-FamilyYou can set what font will be displayed in an element with the font-family property.There are 2 choices for values:family-namegeneric familyIf you set a family name it is best to also add the generic family at theend. As this is a priortized li
40、st. So if the user does not have the specifiedfont name it will use the same generic family. (see below)Font SizeYou can set the size of the text used in an element by using the font-size property.There are alot of choices for values:xx-largex-largelargerlargemediumsmallsmallerx-smallxx-smalllength%
41、 (percent)There is quite a bit to learn about font sizes with CSS so, I am not evengoing to try to explain it. Actually there are already some great resourceson how to size your text. (see below)font: italic bold normal small/1.4em Verdana, sans-serif;font-family: Verdana, sans-serif;font-size: valu
42、e;3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPage 15 of 35http:/ size text should I use in my css by Paul OBDive into accessibility - Font SizesFont StyleYou can set the style of text in a element with the font-style propertyPossible values arenormalitailcobliqueFont VariantYou can set the var
43、iant of text within an element with the font-variantpropertyPossible values arenormalsmall-capsFont WeightYou can control the weight of text in an element with the font-weightproperty:Possible values arelighternormal100200300400500600700800900boldfont-style: value;font-variant: value;font-weight: va
44、lue;3/07/07 2:13 AMPrint all 18 Chapters - CSS BasicsPage 16 of 35http:/ 11: CSS Anchors, Links and PseudoClassesBelow are the various ways you can use CSS to style links.Now lets take a look at what each one of the above link styles actuallydoes.The first on the list sets the color of a link when n
45、o event is occuringThe second sets the color a link changes to, when the user has alreadyvisited that urlThe third sets the color a link changes to as the user places their mousepointer over the linkThe fourth is primarilly for the same purpose as the last one, but thisone is for users that are not
46、using a mouse and are tabbing through thelinks via there keyboards tab key, it sets the color a link changes to asthe user tabs through the linksThe fifth on the list sets the color a link changes to as it is pressed.Lets look at an example: GoogleIf your last visit to Google is not stored in your c
47、ache than the above linkto google is blue, if you have already been to google then the link shouldbe grey. if you mouseover or tab through the links, the link will changeto dark grey, and last but not least if you click and hold the link withoutreleasing it you will see it return back to the origina
48、l blue color.You must declare the a:link and a:visited before you declare a:hover.Furthermore, you must declare a:hover before you can declare a:active.Using the above code will style all links on your web page, unless youdeclare a seperate set of link styles for a certain area of your webpage.a:link color: #009
