for adding style (e.g. fonts, colors, layouts) to Web documents.
Styles provide powerful control over the presentation of web pages.
Разделы презентаций
- Разное
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Cascading Style Sheets CSS
Содержание
- 1. Cascading Style Sheets CSS
- 2. What is CSS?Cascading Style Sheets (CSS): is
- 3. Cascading Style SheetA style sheet consists of
- 4. Basic CSS SyntaxCSS Syntaxselector {property: value;}
- 5. Style Sheet Syntax Explainedselectorpropertyvaluerule
- 6. Three Different Scopes of CSSLocalconfined to a
- 7. Local Style SheetExampleInternal Style Sheet Applied to
- 8. Internal Style SheetHow to create?Put tag
- 9. Internal Style SheetExamplebody {background-color:beige;}p {color: purple;}
- 10. External Style SheetAn external style sheet is
- 11. Selector TypeTagredefines the look of a specific
- 12. Three properties of CSSInheritancechild elements inherit styles
- 13. Скачать презентанцию
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.
Слайды и текст этой презентации
Слайд 2What is CSS?
Cascading Style Sheets (CSS): is a simple mechanism
Styles provide powerful control over the presentation of web pages.
Слайд 3Cascading 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 (;).
Слайд 6Three 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
Слайд 7Local Style Sheet
Example
Internal Style Sheet Applied to
Header 1
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 bottomTip: use “border:
Слайд 8Internal Style Sheet
How to create?
Put tag between
and 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 tags
Слайд 10External 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?
Слайд 11Selector 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,
Advanced
IDs,
pseudo-class selectorsE.g. #myId {color: #38608A;}
Слайд 12Three 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
