Đang tải... (xem toàn văn)
Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở điVà kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này
Session Module 5: Introduction to CSS Module 6: CSS Color and Layout Properties Session – Objectives (1) Explain the CSS (Cascading Style Sheets) Explain CSS syntax Explain Selectors Explain the ways to insert CSS Explain the Text Properties Explain the Font Properties Introduction to CSS & CSS Color and Layout Properties – Slide / 50 Session – Objectives (2) Explain the Color properties Explain the Background properties Explain the Box model Explain the Border properties Explain the Margin properties Explain the Padding properties Explain the Table properties Introduction to CSS & CSS Color and Layout Properties – Slide / 50 What is CSS? CSS stands for Cascading Style Sheets A style sheet is the place where we manage and control styles The style sheet describes the appearance and presentation of an HTML document as it will be presented on screen, or even in print We can also precisely specify the location and appearance of elements on a page and create special effects Introduction to CSS & CSS Color and Layout Properties – Slide / 50 Evolution of CSS CSS1: Released in 1996 CSS Positioning (CSS-P): Next version released after CSS1 CSS2: Released in 1998 CSS3: This version was drafted in 2009 and now is still under development Introduction to CSS & CSS Color and Layout Properties – Slide / 50 CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations Introduction to CSS & CSS Color and Layout Properties – Slide / 50 CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date CSS comments example: /*This is a comment*/ p { text-align: center; /*This is another comment*/ color: black; font-family: Arial; } Introduction to CSS & CSS Color and Layout Properties – Slide / 50 Selectors A selector is a string that identifies what elements the corresponding rule applies to There are three types of selectors: o o o HTML element selectors Class selectors ID selectors Introduction to CSS & CSS Color and Layout Properties – Slide / 50 HTML Element Selectors These selectors use the names of HTML elements The only difference is that we remove the brackets So, the HTML tag become p p { color: red; text-align: center; } Introduction to CSS & CSS Color and Layout Properties – Slide / 50 HTML Element Selectors Demo /*CSS*/ p {color:red; text-align:center;} h1 {color:blue; background:pink;} Hello World! This paragraph is styled with CSS. Output Introduction to CSS & CSS Color and Layout Properties – Slide 10 / 50 CSS Box Model (2) Margin: Clears an area around the border The margin does not have a background color, it is completely transparent Border: A border that goes around the padding and content The border is affected by the background color of the box Padding: Clears an area around the content The padding is affected by the background color of the box Content: The content of the box, where text and images appear Introduction to CSS & CSS Color and Layout Properties – Slide 36 / 50 CSS Box Model (3) content Introduction to CSS & CSS Color and Layout Properties – Slide 37 / 50 CSS Box Model (4) Introduction to CSS & CSS Color and Layout Properties – Slide 38 / 50 CSS Box Model (5) Width and Height of an element: o o o o o width: 250px; height: 150px; padding: 10px; border: 5px solid gray; margin: 10px; Introduction to CSS & CSS Color and Layout Properties – Slide 39 / 50 CSS Border Properties (1) Border-style property specifies what kind of border to display Example: p {border-style: solid; border-color: red;} A solid red border Introduction to CSS & CSS Color and Layout Properties – Slide 40 / 50 CSS Border Properties (2) Introduction to CSS & CSS Color and Layout Properties – Slide 41 / 50 Margin Properties (1) CSS margin properties define the space around elements In CSS, it is possible to specify different margins for different sides: o o o o margin-top: 100px; margin-bottom: 100px; margin-right: 50px; margin-left: 50px; Introduction to CSS & CSS Color and Layout Properties – Slide 42 / 50 Margin Properties (2) The margin property can have from one to four values o margin:25px; • o all four margins are 25px margin:25px 50px 75px 100px; • • • • top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px Introduction to CSS & CSS Color and Layout Properties – Slide 43 / 50 Padding Properties (1) CSS padding properties define the space between the element border and the element content In CSS, it is possible to specify different padding for different sides: o padding-top: 25px; padding-bottom: 25px; padding-right: 50px; o padding-left: 50px; o o Introduction to CSS & CSS Color and Layout Properties – Slide 44 / 50 Padding Properties (2) The padding property can have from one to four values o padding:25px; • o all four paddings are 25px margin:25px 50px 75px 100px; • • • • top padding is 25px right padding is 50px bottom padding is 75px left padding is 100px Introduction to CSS & CSS Color and Layout Properties – Slide 45 / 50 Box Model Demo /*CSS*/ div.box { width:250px; padding:10px; border:5px solid gray; margin:20px; } The total width of this box element is 280px (5px+10px+250px+10px+5px). The distance between div and hr element is 20px. Output Introduction to CSS & CSS Color and Layout Properties – Slide 46 / 50 Table Properties (1) Browser support: Table properties: Introduction to CSS & CSS Color and Layout Properties – Slide 47 / 50 Table Properties (2) Table borders: table {border-collapse: collapse;} table,th,td {border: 1px solid black;} Table color: table,td,th {border: 1px solid green;} th {background-color: green; color: white;} Introduction to CSS & CSS Color and Layout Properties – Slide 48 / 50 Session – Summary (1) CSS stands for Cascading Style Sheets A style sheet is the place where we manage and control styles A CSS rule has two main parts: a selector, and one or more declarations A selector is a string that identifies what elements the corresponding rule applies to There are three types of selectors: o o o HTML element selectors Class selectors ID selectors Introduction to CSS & CSS Color and Layout Properties – Slide 49 / 50 Session – Summary (2) Color properties Text properties Font properties Box properties Border properties Margin properties Padding properties Table properties Introduction to CSS & CSS Color and Layout Properties – Slide 50 / 50 [...]... type="text /css" href="mystyle .css" /> o Use @import @import "mystyle .css" ; Introduction to CSS & CSS Color and Layout Properties – Slide 18 / 50 Inheritance in CSS Styles can be inherited from a parent Introduction to CSS & CSS Color and Layout Properties – Slide 18 / 50 CSS Unit For width, height, margin, padding, border property: Introduction to CSS & CSS Color and. .. {background -color: #FF704D;} a:active {background -color: #FF704D;} Introduction to CSS & CSS Color and Layout Properties – Slide 32 / 50 Color Properties Browser support: Text color o The color property is used to set the color of the text body {color: blue;} h1 {color: #00ff00;} h2 {color: rgb(255,0,0);} Introduction to CSS & CSS Color and Layout Properties – Slide 33 / 50 Background Properties. .. Properties – Slide 25 / 50 Font Properties (1) Browser support: CSS font properties define the font family, boldness, size, and the style of a text Introduction to CSS & CSS Color and Layout Properties – Slide 26 / 50 Font Properties (2) CSS Font families: Introduction to CSS & CSS Color and Layout Properties – Slide 27 / 50 Font Properties (3) Font Family o Font family of a text is set with the... paragraph. Output Introduction to CSS & CSS Color and Layout Properties – Slide 16 / 50 Ways to Insert CSS (1) Inline style This is a paragraph. Internal style sheet p {color: green;} body {background-image: url("images/pink.gif");} Introduction to CSS & CSS Color and Layout Properties – Slide 17 / 50 Ways to Insert CSS (2) External... property: Introduction to CSS & CSS Color and Layout Properties – Slide 19 / 50 CSS Color For color, background property: Introduction to CSS & CSS Color and Layout Properties – Slide 21 / 50 Text Properties (1) Browser support: Text color o The color property is used to set the color of the text body {color: blue;} h1 {color: #00ff00;} h2 {color: rgb(255,0,0);} Text alignment o o Text-align... clicked Introduction to CSS & CSS Color and Layout Properties – Slide 31 / 50 Link Properties (2) Text Color o o o o a:link {color: #FF0000;} a:visited {color: #00FF00;} a:hover {color: #FF00FF;} a:active {color: #0000FF;} /* unvisited link */ /* visited link */ /* mouse over link */ /* selected link */ Background Color: o o o o a:link {background -color: #B2FF99;} a:visited {background -color: #FFFF85;}... {text-indent: 50px;} Introduction to CSS & CSS Color and Layout Properties – Slide 22 / 50 Text Properties (2) Text Transformation o The text-transform property is used to specify uppercase and lowercase letters in a text p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} Introduction to CSS & CSS Color and Layout Properties – Slide... defined with a "."(dot) Introduction to CSS & CSS Color and Layout Properties – Slide 13 / 50 Class Selectors (2) In the example below, all HTML elements with class="center" will be center-aligned: o o CSS: center {text-align: center;} HTML: Class selector This paragraph is center-aligned Introduction to CSS & CSS Color and Layout Properties – Slide 14... 50 CSS Box Model (1) All HTML elements can be considered as boxes In CSS, the term "box model" is used when talking about design and layout Introduction to CSS & CSS Color and Layout Properties – Slide 35 / 50 CSS Box Model (2) Margin: Clears an area around the border The margin does not have a background color, it is completely transparent Border: A border that goes around the padding and. .. The background -color property specifies the background color of an element o body {background -color: #b0c4de;} h1 {background -color: #64 95ed;} o div {background -color: #b0c4de;} o The background-image property specifies an image to use as the background of an element body { background-image: url('gradient.gif '); background-repeat: repeat-x; } Introduction to CSS & CSS Color and Layout Properties – ... text Introduction to CSS & CSS Color and Layout Properties – Slide 26 / 50 Font Properties (2) CSS Font families: Introduction to CSS & CSS Color and Layout Properties – Slide 27 / 50 Font Properties. .. text and images appear Introduction to CSS & CSS Color and Layout Properties – Slide 36 / 50 CSS Box Model (3) content Introduction to CSS & CSS Color and Layout Properties – Slide 37 / 50 CSS. .. border -color: red;}A solid red border
Introduction to CSS & CSS Color and Layout Properties – Slide 40 / 50 CSS Border Properties (2) Introduction to CSS & CSS Color and Layout Properties