Презентация Cascading Style Sheet (CSS) онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Cascading Style Sheet (CSS) абсолютно бесплатно. Урок-презентация на эту тему содержит всего 43 слайда. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:43 слайда
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:1.01 MB
- Просмотров:53
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: Lecture 4 Cascading Style Sheet (CSS)
Sarsenova Zh.N.
№2 слайд
Содержание слайда: When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.
CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.
How many ways to insert CSS?
№3 слайд
Содержание слайда: CSS Syntax
A CSS rule-set consists of selector and a declaration block:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces
№4 слайд
Содержание слайда: For several elements
First three heading levels have blue letters:
h1,h2, h3{color: blue}
№5 слайд
Содержание слайда: Inheritance
In HTML document one element can contain other elements.
Example: unordered list contained list item elements
<p> can contain character formatting elements like: <b>, <i>, and <body> elements contains the whole document.
Thanks to inheritance, when you apply formatting instructions to an element that contains other elements, that formatting rule applies to every one of those other elements.
For example, if you set a <body> element to the font Verdana (as in the resume style sheet shown earlier), every element inside that <body> element, including all the headings, paragraphs, lists, and so on, gets the Verdana font.
№6 слайд
Содержание слайда: Class Selectors
First, you single out specific elements in your page by giving them the same class name. Then, you tell your browser to apply formatting to all the elements that carry that class name. Make sure that the first character is always a letter.
You use the class name, precedes by a period (.)
h3.FancyTitle{
color: red;
font-weight: bolder;
}
<h3 class = “FancyTitle”> Learning to Embodier </h3>
№7 слайд
Содержание слайда: Id Selector
Like a Class selector an ID selector lets you format just the elements you choose.
In HTML: <div id = “Menu”>…..</div>
In CSS: #Menu{
border-width: 2px;
boder-style:solid;
}
№8 слайд
Содержание слайда: Color properties
Colors in CSS are most often specified by:
a valid color name - like "red"
an RGB value - like "rgb(255, 0, 0)"
a HEX value - like "#ff0000"
№9 слайд
Содержание слайда: CSS Backgrounds
The CSS background properties are used to define the background effects for elements.
CSS background properties:
background-color --- specifies the background color of an element
background-image ---sp.an image to use the background of an element(by defaults, the image is repeated so it covers the entire element.)
background-repeat –repeat horizontally or vertically
background-attachment – to specify the background image should be fixed(will not scroll with the rest of the page) use the background-attachment property
background-position --- right, top,
№10 слайд
Содержание слайда: Text Alignment and Spacing
№11 слайд
Содержание слайда:
№12 слайд
Содержание слайда: Alignment
By default, all text on a web page lines up on the left side of the browser window.
Text-align : you can center that text, line it up on the right edge, or justify.
№13 слайд
Содержание слайда: Spacing
To adjust the spacing around any element, use the margin property.
Set the size of the white space outside the border.
p{
margin: 8px;
}
For each side of an element:
margin-top
margin-right
margin-bottom
margin-left
№14 слайд
Содержание слайда: Spacing
All the margin properties can have the following values:
auto - the browser calculates the margin
length - specifies a margin in px, pt, cm, etc.
% - specifies a margin in % of the width of the containing element
inherit - specifies that the margin should be inherited from the parent element
№15 слайд
Содержание слайда: Margin-Shortland Property
To shorten the code, it is possible to specify all margin properties in one property
margin-top
margin-right
margin-bottom
margin-left
p {
margin: 100px 150px 100px 80px;
}
auto value
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
№16 слайд
Содержание слайда: CSS Padding
Padding properties are used to generate space around content.
The padding clears an area around the content (inside the border) of an element.
padding-top
padding-right
padding-bottom
padding-left
№17 слайд
Содержание слайда: CSS Border properties
The CSS border properties allow you to specify the style, width, and color of an element's border.
Border Style – specifies what kind of border to display.
№18 слайд
Содержание слайда: CSS border properties
№19 слайд
Содержание слайда: Basic Fonts
Using the CSS font properties, you can choose a font family, font weight (its boldness
setting), and font size
№20 слайд
Содержание слайда: Basic Fonts
№21 слайд
Содержание слайда: Examples
№22 слайд
Содержание слайда: Generic Family
generic family - a group of font families with a similar look (like "Serif" or "Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")
№23 слайд
Содержание слайда: Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
№24 слайд
Содержание слайда:
№25 слайд
Содержание слайда: Font Weight
The font-weight property specifies the weight of a font:
№26 слайд
Содержание слайда: Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
№27 слайд
Содержание слайда: CSS line-height Property
The line-height property specifies the line height.
№28 слайд
Содержание слайда: Text-transform Property
The text-transform property controls the capitalization of text.
№29 слайд
Содержание слайда: List-style Property
The list-style shorthand property sets all the list properties in one declaration.
The properties that can be set, are (in order): list-style-type, list-style-position, list-style-image.
If one of the values above are missing, e.g. "list-style:circle inside;", the default value for the missing property will be inserted, if any.
№30 слайд
Содержание слайда: Text-decoration Property
The text-decoration property specifies the decoration added to text
№31 слайд
Содержание слайда: Width Property
The width property sets the width of an element.
№32 слайд
Содержание слайда: CSS height Property
The height property sets the height of an element.
Note: The height property does not include padding, borders, or margins; it sets the height of the area inside the padding, border, and margin of the element!
№33 слайд
Содержание слайда: The CSS Box Model
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
№34 слайд
Содержание слайда: The CSS Box Model
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
№35 слайд
Содержание слайда: Example
№36 слайд
Содержание слайда: The position Property
The position property specifies the type of positioning method used for an element.
There are 4 different position values:
№37 слайд
Содержание слайда: Position: Static
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
№38 слайд
Содержание слайда: position: relative;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
№39 слайд
Содержание слайда: CSS clear Property
The clear property specifies on which sides of an element floating elements are not allowed to float.
№40 слайд
Содержание слайда: Overflow Property
The overflow property specifies what happens if content overflows an element's box.
This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.
Note: The overflow property only works for block elements with a specified height.
№41 слайд
Содержание слайда: Overflow property
№42 слайд
Содержание слайда: z-index Property
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
№43 слайд
Содержание слайда:
Скачать все slide презентации Cascading Style Sheet (CSS) одним архивом:
