1. Trang chủ
  2. » Công Nghệ Thông Tin

Tài liệu tự học CSS nhanh

154 204 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 154
Dung lượng 1,24 MB

Nội dung

Cascading Style Sheet Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference Content • Writing CSS code – Introduction – CSS Selectors • • • • • • Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference Introduction • Can be written in html or css file • Consists of a list of rule sets • A Rule set consists of: – A selector – Style properties and their values • Inline CSS • CSS added in HEAD section Introduction - Inline CSS • Definition: – Style sheets are added inside HTML element • Syntax: Content Introduction CSS added in HEAD section - INTERNAL • Definition: – Style sheets are added in tag • Syntax: Title selector { property:value; another_property:value; } Page cotent Introduction CSS added in HEAD section - EXTERNAL • Html file • Css file Content • Writing CSS code – Introduction – CSS Selectors • • • • • • Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference CSS Selectors • • • • • Universal selector Type selector class selector ID selector Attribute selector Universal selector • Definition: – Is represented with an “*” – Is applied to all elements • Syntax: * { font-family: Calibri, Arial, sans-serif; } 10 relative Figure 40: Relative positioning 140 relative Figure 40_bis: Relative positioning 141 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • CSS Outline • Display and Visibility • Positioning – – – – – static relative absolute fixed z-index • CSS Float and Clear • Pseudo-classes • Reference 142 absolute • An absolute position element – Is positioned relative to the first parent element that has a position other than static, or if no such element exists, and its display is not affected by other elements – Absolute positioning takes the element out of the normal document flow, and can overlap other elements • Syntax: selector { position: absolute; } 143 absolute Figure 41: Absolute positioning 144 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • CSS Outline • Display and Visibility • Positioning – – – – – static relative absolute fixed z-index • CSS Float and Clear • Pseudo-classes • Reference 145 fixed • • • • Based on the viewport window Can overlap other element Not move even if the window is scrolled Syntax: selector { position: fixed; } • Example: #p_fix { position: fixed; top: 20px; left: 40%; } 146 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • CSS Outline • Display and Visibility • Positioning – – – – – static relative absolute fixed z-index • CSS Float and Clear • Pseudo-classes • Reference 147 z-index Figure 42: Using z-index positioning 148 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference 149 CSS Float and Clear • For students! 150 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference 151 Pseudo-classes • For students! 152 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference 153 Reference • http://coursesweb.net/ • http://www.w3schools.com/ 154 [...]... } 16 CSS Selectors • • • • • Universal selector Type selector class selector ID selector Attribute selector 17 Content • Writing CSS code • Creating style sheet – Inheritance – Grouping Selectors – Defining CSS rules to child selectors – The !important Declaration – The execution order of the CSS rules – Adding Comments within Style sheets • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline... of grouping selectors 23 Content • Writing CSS code • Creating style sheet – Inheritance – Grouping Selectors – Defining CSS rules to child selectors – The !important Declaration – The execution order of the CSS rules – Adding Comments within Style sheets • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference... !important declaration 29 Content • Writing CSS code • Creating style sheet – Inheritance – Grouping Selectors – Defining CSS rules to child selectors – The !important Declaration – The execution order of the CSS rules – Adding Comments within Style sheets • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference... Fonts • Configuring Text 24 Defining CSS rules to child selectors • Usage: – Is used to apply new CSS rules for child • Syntax: parent child { property:value; property:value; } 25 Defining CSS rules to child selectors • Example: Figure 3: Define CSS rules for child 26 Content • Writing CSS code • Creating style sheet – Inheritance – Grouping Selectors – Defining CSS rules to child selectors – The !important... The !important Declaration – The execution order of the CSS rules – Adding Comments within Style sheets • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference • Configuring Fonts • Configuring Text 27 The !important Declaration • Usage: – To make certain CSS rules more important than others – !important declaration... The !important Declaration – The execution order of the CSS rules – Adding Comments within Style sheets • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference • Configuring Fonts • Configuring Text 21 Grouping Selectors • Definition: – Is used to apply same CSS rules to many selectors – Different selectors are... Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference • Configuring Fonts • Configuring Text 32 Adding Comments within Stylesheets • Usage: – To organize and keep track of CSS rules – Beginning with “/*” – Ending with “*/” • Syntax: /* this is a comment */ selector { property:value; property:value; } 33 Content • Writing CSS code... Text 30 The execution order of the CSS rules • • • • Inline > internal > external !importance declaration has top priority More detail has higher priority Later has higher priority 31 Content • Writing CSS code • Creating style sheet – Inheritance – Grouping Selectors – Defining CSS rules to child selectors – The !important Declaration – The execution order of the CSS rules – Adding Comments within... name – Used to apply same CSS rule on different tags – class selector is preceded by a “.” • Syntax: Content (in body) clas1 { color: green; } 14 CSS Selectors • • • • • Universal selector Type selector class selector ID selector Attribute selector 15 ID selector • Definition: – Apply CSS rule to only one ID – An ID selector can appear many times in CSS file – An ID selector... Configuring Fonts – – – – – – – font-family font Embedding font-size font-weight font-variant font-style Multiple values for font property • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference • Configuring Text 34 font-family • • • • Accepts a comma-separated list Enclose font that contains spaces with “xy z” Insert ... • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear... Content • Writing CSS code – Introduction – CSS Selectors • • • • • • Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display... Content • Writing CSS code – Introduction – CSS Selectors • • • • • • Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display

Ngày đăng: 30/10/2015, 15:28

TỪ KHÓA LIÊN QUAN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w