🗊Презентация Cascading Style Sheets CSS

Категория: Образование
Нажмите для полного просмотра!
Cascading Style Sheets CSS, слайд №1Cascading Style Sheets CSS, слайд №2Cascading Style Sheets CSS, слайд №3Cascading Style Sheets CSS, слайд №4Cascading Style Sheets CSS, слайд №5Cascading Style Sheets CSS, слайд №6Cascading Style Sheets CSS, слайд №7Cascading Style Sheets CSS, слайд №8Cascading Style Sheets CSS, слайд №9Cascading Style Sheets CSS, слайд №10Cascading Style Sheets CSS, слайд №11Cascading Style Sheets CSS, слайд №12
Скачать
Вы можете ознакомиться и скачать презентацию на тему Cascading Style Sheets CSS. Доклад-сообщение содержит 12 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Computation and Problem Solving Cascading Style Sheets (CSS) Korzhumbayev Azamat
Описание слайда:
Computation and Problem Solving Cascading Style Sheets (CSS) Korzhumbayev Azamat

Слайд 2


What is CSS? Cascading Style Sheets (CSS): is a simple mechanism for adding style (e.g. fonts, colors, layouts) to Web documents. Styles provide powerful control over the presentation of web pages.
Описание слайда:
What is CSS? Cascading Style Sheets (CSS): is a simple mechanism for adding style (e.g. fonts, colors, layouts) to Web documents. Styles provide powerful control over the presentation of web pages.

Слайд 3


Cascading Style Sheet A style sheet consists of a set of rules. Each rule consists of one or more selectors and a declaration block. A declaration block consists of a list of declarations in curly braces ({}). Each declaration consists of a property, a colon (:), a value, then a semi-colon (;).
Описание слайда:
Cascading Style Sheet A style sheet consists of a set of rules. Each rule consists of one or more selectors and a declaration block. A declaration block consists of a list of declarations in curly braces ({}). Each declaration consists of a property, a colon (:), a value, then a semi-colon (;).

Слайд 4


Basic CSS Syntax CSS Syntax selector {property: value;}
Описание слайда:
Basic CSS Syntax CSS Syntax selector {property: value;}

Слайд 5


Style Sheet Syntax Explained
Описание слайда:
Style Sheet Syntax Explained

Слайд 6


Three Different Scopes of CSS Local confined to a single element (tag) Internal affect elements in an entire page External can affect multiple pages Precedence Local > Internal or External
Описание слайда:
Three Different Scopes of CSS Local confined to a single element (tag) Internal affect elements in an entire page External can affect multiple pages Precedence Local > Internal or External

Слайд 7


Local Style Sheet Example <h1 style="color:white; background:orange; font-weight:bold;">Internal Style Sheet Applied to Header 1</h1> Practice add “text-align” property to make it centered add “border” property to let it have black, 1px thick, solid border at left, right, top, and bottom Tip: use “border: <top> <right> <bottom> <left>;” format for 4 sides; use “border-<side>: xx yy zz;” for a particular side, where <side> can be left, right, top or bottom. Can apply to other similar properties.
Описание слайда:
Local Style Sheet Example <h1 style="color:white; background:orange; font-weight:bold;">Internal Style Sheet Applied to Header 1</h1> Practice add “text-align” property to make it centered add “border” property to let it have black, 1px thick, solid border at left, right, top, and bottom Tip: use “border: <top> <right> <bottom> <left>;” format for 4 sides; use “border-<side>: xx yy zz;” for a particular side, where <side> can be left, right, top or bottom. Can apply to other similar properties.

Слайд 8


Internal Style Sheet How to create? Put <style> </style> tag between <head> and </head> tags of your HTML page Use type attribute to indicate the style sheet type, usually type=“text/css” Put your set of style sheet rules in between <style> and </style> tags
Описание слайда:
Internal Style Sheet How to create? Put <style> </style> tag between <head> and </head> tags of your HTML page Use type attribute to indicate the style sheet type, usually type=“text/css” Put your set of style sheet rules in between <style> and </style> tags

Слайд 9


Internal Style Sheet Example <head> <style> body {background-color:beige;} p {color: purple;} </style> </head>
Описание слайда:
Internal Style Sheet Example <head> <style> body {background-color:beige;} p {color: purple;} </style> </head>

Слайд 10


External Style Sheet An external style sheet is simply a text-only file with .css extension It contains only CSS rules. No tags inside! How to link to external style sheet? <head> <link href=“mystyle.css" rel="stylesheet" type="text/css" /> </head>
Описание слайда:
External Style Sheet An external style sheet is simply a text-only file with .css extension It contains only CSS rules. No tags inside! How to link to external style sheet? <head> <link href=“mystyle.css" rel="stylesheet" type="text/css" /> </head>

Слайд 11


Selector Type Tag redefines the look of a specific tag E.g. body {background-color: #000000;} Class can apply to any tag E.g. .indent{margin-right:5%;margin-left: 5%;} In HTML, <p class=“indent”> Advanced IDs, pseudo-class selectors E.g. #myId {color: #38608A;}
Описание слайда:
Selector Type Tag redefines the look of a specific tag E.g. body {background-color: #000000;} Class can apply to any tag E.g. .indent{margin-right:5%;margin-left: 5%;} In HTML, <p class=“indent”> Advanced IDs, pseudo-class selectors E.g. #myId {color: #38608A;}

Слайд 12


Three properties of CSS Inheritance child elements inherit styles from parent element Specificity calculated by counting various components of your css and expressing them in a form (a,b,c,d): inline, id, class, element. Cascade Controls all css precedence
Описание слайда:
Three properties of CSS Inheritance child elements inherit styles from parent element Specificity calculated by counting various components of your css and expressing them in a form (a,b,c,d): inline, id, class, element. Cascade Controls all css precedence

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию