Post on 17-Dec-2015
transcript
XP
New Perspectives on Blended HTML, XHTML, and CSS 2
Objectives• Create a spread heading• Indent text• Change the line spacing• Change text capitalization
XPObjectives• Identify the differences between dependent and
independent classes• Use classes to style several elements• Apply classes to text• Create pseudo-elements and pseudo-classes
New Perspectives on Blended HTML, XHTML, and CSS 3
XPUsing CSS to Format Text• CSS provides formatting for a document– Setting the line spacing– Indenting text to create a tab indent– Setting margins
New Perspectives on Blended HTML, XHTML, and CSS, 2e 4
XPUsing the Text Properties• The letter-spacing property controls the amount
of white space between letters– Also known as kerning
• The word-spacing property controls the amount of white space between words
• Letter spacing and word spacing are commonly used together to create a spread heading, in which the letters of one word or several words are spaced apart.
New Perspectives on Blended HTML, XHTML, and CSS, 2e 6
XPUsing the Text Properties• The text-align property aligns text horizontally– Left (the default)– Center– Right– Justify
New Perspectives on Blended HTML, XHTML, and CSS, 2e 8
XPUsing the Text Properties• The text-indent property indents the first line of
paragraph text• The line-height property is used to change the
line spacing– For example, single spacing to double spacing
New Perspectives on Blended HTML, XHTML, and CSS, 2e 10
XPUsing the Text Properties• The text-transform property can change the
case of text– Uppercase– Capitalize– Lowercase– None
New Perspectives on Blended HTML, XHTML, and CSS, 2e 12
XPUsing the Text Properties• The text-decoration property is used to insert a
line above, through, or under text– underline– overline– line-through– blink– none
New Perspectives on Blended HTML, XHTML, and CSS, 2e 14
XPCreating and Using Classes• Class selectors format several instances of one or
more elements– Dependent classes style a particular element– Independent classes style any element
• Code for the crucial dependent class for the em element:
New Perspectives on Blended HTML, XHTML, and CSS, 2e 15
XPCreating and Using Classes• Independent classes format several XHTML element selectors in
the same way
New Perspectives on Blended HTML, XHTML, and CSS, 2e 16
XPCreating Pseudo-Elements• A pseudo-element formats a part of text that does not
directly relate to an XHTML element selector– :first-letter pseudo-element– :first-line pseudo-element
New Perspectives on Blended HTML, XHTML, and CSS, 2e 17
XPCreating Pseudo-Elements• Styling Pseudo-Elements– To apply a style to the first letter of an element, use the
following syntax:selector.class:first-letter
where selector is an element in the document and class is a dependent class.
– To apply a style to the first line of an element, use the following syntax:selector.class:first-line
where selector is an element in the document and class is a dependent class.
New Perspectives on Blended HTML, XHTML, and CSS, 2e 19
XPUsing Pseudo-Class Selectors• The link pseudo-class selectors expand on the
concept that visitors to your Web site benefit from visual cues about the link state– a:link– a:visited– a:hover– a:active
New Perspectives on Blended HTML, XHTML, and CSS, 2e 20
XPChanging the Appearance of Lists• To specify the format of a list, enter the following code
where you want the list to appear:ul {
list-style-property: value;• Use the following properties to set the appearance of
the list:– list-style-type– list-style-image– list-style-position– list-style
New Perspectives on Blended HTML, XHTML, and CSS, 2e 21
XPChanging the Appearance of Lists• The list-style-type
property changes the appearance of the default solid bullet for unordered lists (disc, circle, or square), and the listing method for ordered lists (decimal, lower-roman, upper-roman, lower-alpha, and upper-alpha)
New Perspectives on Blended HTML, XHTML, and CSS, 2e 22
XPChanging the Appearance of Lists• The list-style-position property changes the
position of the bullet included with a list
• The list-style-image property changes the bullet to a graphic image
New Perspectives on Blended HTML, XHTML, and CSS, 2e 23
XPChanging the Appearance of Lists• The list-style property is the shorthand property
to set the list-style-type, the list-style-image, and list-style-position
New Perspectives on Blended HTML, XHTML, and CSS, 2e 24
XPChanging the Appearance of Lists• A marker appears to the left of the list item text
New Perspectives on Blended HTML, XHTML, and CSS, 2e 25