Web-Sites-Design-and-Programming-4计算机科学与技术---网站设计与编程--双语教学课件

1、Web Sites Design and Programming,Lecturer: Lijie Guo Room: XNA508 Phone: 23678517 Email: guo_,2020/9/3,School of Computer Science and Technology,1-2,Cascading Style Sheets (CSS),WDP CN 第六章, 148191 WDP EN Chapter 6 , 188238 P3W CN 第三章, 7096,2020/9/3,School of Computer Science and Technology,1-3,Overv

2、iew,Motivation Levels of style sheets Style specification formats Selector forms Property value forms Examples of properties font, list, color, text alignment, background images,2020/9/3,School of Computer Science and Technology,1-4,Motivation,Consider the management of a corporate web site Site ide

3、ntity (look property_2: value_2; property_n: value_n;,2020/9/3,School of Computer Science and Technology,1-9,Document Style Specification,Style sheet appears as a list of rules that are the content of a tag The tag must include the type attribute, set to text/css rule list Form of the rules: selecto

4、r property_1:value_1; property_2:value_2; ; property_n:value_n; The list of rules must be placed in an HTML comment, because it is not HTML Comments in the rule list must have a different form - use C comments (/*/),2020/9/3,School of Computer Science and Technology,1-10,External Style Sheet Specifi

5、cation,Form is a list of style rules Like the content of a tag for document-level style sheets,2020/9/3,School of Computer Science and Technology,1-11,Simple Selector,The selector is a tag name or a list of tag names, separated by commas Examples: h1 font_size: 24pt; h2, h3 font_size: 20pt; Contextu

6、al selectors Apply style only to elements in specified position in body of document List element hierarchy body p b font_size: 30pt,2020/9/3,School of Computer Science and Technology,1-12,Class Selector,Used to allow different occurrences of the same tag to have different style specifications A styl

7、e class has a name, which is attached to a tag name p.narrow property/value list p.wide property/value list The class you want on a particular occurrence of a tag is specified with the class attribute of the tag . . . ,2020/9/3,School of Computer Science and Technology,1-13,Generic Selectors,A gener

8、ic class can be defined if you want a style to apply to more than one kind of tag A generic class must be named, and the name must begin with a period .really-big Use in body of doc like normal style class . ,2020/9/3,School of Computer Science and Technology,1-14,id Selectors,An id selector allow t

9、he application of a style to one specific element General form: #specific-id property-value list e.g. #section3 font-size: 20 In XHMTL doc: 3. Properties for sale ,2020/9/3,School of Computer Science and Technology,1-15,Pseudo Classes,Pseudo classes are styles that apply when something happens, rath

10、er than because the target element simply exists Names begin with colons hover class applies when the mouse cursor is over the element focus class applies when an element has focus E.G. WDP-4/pseudo.html,2020/9/3,School of Computer Science and Technology,1-16,review,CSS Syntax,2020/9/3,School of Com

11、puter Science and Technology,1-17,review,Note: Only one class attribute can be specified per XHTML element!,Do NOT start a class name with a number! It will not work in Mozilla/Firefox.,2020/9/3,School of Computer Science and Technology,1-18,review,Do NOT start a class name with a number! It will no

12、t work in Mozilla/Firefox., h3 text-align: left; color: black .right text-align: right; color: blue #first text-align: center; color: red How to display ,How to display?,E.G. WDP-4/first.html,2020/9/3,School of Computer Science and Technology,1-19,Selector PRI,id Selector class Selector Simple (tag)

13、 Selector,2020/9/3,School of Computer Science and Technology,1-20,Properties,There are 60 different properties in 7 categories: Fonts Lists Alignment of text Margins Colors Backgrounds Borders,2020/9/3,School of Computer Science and Technology,1-21,Property Value Forms,Keywords - left, small, Length

14、 - numbers, maybe with decimal points Units: px pixels in inches cm centimeters mm millimeters pt points pc - picas (12 points) em - height of the letter m ex-height - height of the letter x No space is allowed between the number and the unit specification, e.g. 1.5 in is illegal!,2020/9/3,School of

15、 Computer Science and Technology,1-22,Property Value Forms,Percentage - just a number followed immediately by a percent sign URL values url(protocol:/server/pathname) Colors Color name, e.g. white Hex form: #XXXXXX, e.g. #FFFFFF rgb(n1, n2, n3), e.g. rgb(255, 255, 255) Numbers can be decimal (0-255)

16、 or percentages Property values are inherited by all nested tags, unless overridden,2020/9/3,School of Computer Science and Technology,1-23,Font Properties,font-family Value is a list of font names - browser uses the first in the list it has font-size Possible values: a length number or a name, such

17、 as smaller, xx-large, etc. font-style italic, oblique (useless), normal font-weight - degrees of boldness bolder, lighter, bold, normal font - for specifying a list of font properties font: bolder 14pt Arial Helvetica Order must be: style, weight, size, font name(s) E.G. WDP-4/fonts.htm 、 fonts2.ht

18、m,2020/9/3,School of Computer Science and Technology,1-24,List Properties list-style-type,On unordered lists list-style-type can be used to specify the shape of the bullets disc (default), square, or circle Set it on either the or tag Fruit Apple Orange Pear Could use an image for the bullets in an unordered list Example: ,2020/9/3,School of Computer Science and Technology,1-25,List Properties list-style-type,On ordered lists list-style-type can be used to change the sequence values Property value Sequence type First four decimal Arabic n