Презентация Understanding CSS essentials: content flow, positioning, and styling онлайн
Оцените презентацию от 1 до 5 баллов!
Тип файла:
ppt / pptx (powerpoint)
Всего слайдов:
43 слайда
Для класса:
1,2,3,4,5,6,7,8,9,10,11
Размер файла:
4.20 MB
Просмотров:
60
Скачиваний:
0
Автор:
неизвестен
Слайды и текст к этой презентации:
№1 слайд![Understanding CSS Essentials](/documents_6/09ef27a097de56ba3e148833a800d00b/img0.jpg)
Содержание слайда: Understanding CSS Essentials: Content Flow, Positioning, and Styling
Vyacheslav Koldovskyy
Last update: 12/01/2015
№2 слайд![Agenda Presentation versus](/documents_6/09ef27a097de56ba3e148833a800d00b/img1.jpg)
Содержание слайда: Agenda
Presentation versus content
CSS basics
The link between HTML and CSS
CSS selector and declaration
Fonts and font families
Web-safe fonts and @font-face rule
Inline flow and block flow
Float and absolute positioning
Overflow
№3 слайд![Presentation vs. Content](/documents_6/09ef27a097de56ba3e148833a800d00b/img2.jpg)
Содержание слайда: Presentation vs. Content
Content is the words and images in an HTML document.
Presentation is related to styles and how words and images "look" in an HTML document.
Content is managed as HTML and style as CSS.
The separation of HTML and CSS generally means keeping CSS styles in a file separate from the HTML file.
№4 слайд![CSS CSS Cascading Style](/documents_6/09ef27a097de56ba3e148833a800d00b/img3.jpg)
Содержание слайда: CSS
CSS = Cascading Style Sheets
CSS is a sequence of rules.
CSS3 is the latest version, corresponds to HTML5
CSS3 is that it’s backward compatible with previous versions of CSS
№5 слайд![How to add CSS to HTML? .](/documents_6/09ef27a097de56ba3e148833a800d00b/img4.jpg)
Содержание слайда: How to add CSS to HTML?
1. Inline CSS:
<h1 style="color:blue;margin-left:40px;">Some header</h1>
2. Internal Style Sheet:
<head>
<style>
h1 {
color: blue;
margin-left: 40px;
}
</style>
</head>
3. External file:
<head>
<link rel="stylesheet" href="default.css">
</head>
№6 слайд![The Link Between HTML and CSS](/documents_6/09ef27a097de56ba3e148833a800d00b/img5.jpg)
Содержание слайда: The Link Between HTML and CSS
The <link> element in an HTML file links the HTML file to a CSS file.
You can reference more than one CSS file in an HTML page.
Markup example:
<link href = "filename.css" rel = "stylesheet" type = "text/css">
For simple projects, can use the <style> tag to include styles within an HTML document
№7 слайд![CSS Selector and Declaration](/documents_6/09ef27a097de56ba3e148833a800d00b/img6.jpg)
Содержание слайда: CSS Selector and Declaration
The selector is usually the HTML element you want to style. The declaration is the style for a specific selector. A declaration has a property, which is a style attribute, and a value.
№8 слайд![CSS selectors https](/documents_6/09ef27a097de56ba3e148833a800d00b/img7.jpg)
Содержание слайда: CSS selectors
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors
№9 слайд![CSS Selectors - General](/documents_6/09ef27a097de56ba3e148833a800d00b/img8.jpg)
Содержание слайда: CSS Selectors - General
№10 слайд![CSS Selectors - Attributes](/documents_6/09ef27a097de56ba3e148833a800d00b/img9.jpg)
Содержание слайда: CSS Selectors - Attributes
№11 слайд![CSS Pseudo-classes A CSS](/documents_6/09ef27a097de56ba3e148833a800d00b/img10.jpg)
Содержание слайда: CSS Pseudo-classes
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.
Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not). To see a complete list of selectors, visit CSS3 Selectors working spec.
№12 слайд![CSS pseudo-elements Just like](/documents_6/09ef27a097de56ba3e148833a800d00b/img11.jpg)
Содержание слайда: CSS pseudo-elements
Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document.
For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.
All pseudo-elements
::after
::before
::first-letter
::first-line
::selection
::backdrop
№13 слайд![CSS Selectors pseudo-classes](/documents_6/09ef27a097de56ba3e148833a800d00b/img12.jpg)
Содержание слайда: CSS Selectors – pseudo-classes and pseudo-elements
Details: http://www.w3.org/TR/css3-selectors/
№14 слайд![CSS Specificity Specificity](/documents_6/09ef27a097de56ba3e148833a800d00b/img13.jpg)
Содержание слайда: CSS Specificity
Specificity is the means by which a browser decides which CSS property values are the most relevant to an element and therefore will be applied. Specificity is only based on the matching rules which are composed of css selectors of different sorts.
The specificity is a weight that is applied to a given CSS declaration based on the count of each selector type. In the case of specificity equality, the latest declaration found in the CSS is applied to the element.
Details: https://css-tricks.com/specifics-on-css-specificity/
№15 слайд![The !important exception When](/documents_6/09ef27a097de56ba3e148833a800d00b/img14.jpg)
Содержание слайда: The !important exception
When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list.
Although, !important has nothing to do with specificity.
Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
№16 слайд![](/documents_6/09ef27a097de56ba3e148833a800d00b/img15.jpg)
№17 слайд![CSS Specificity Calculator](/documents_6/09ef27a097de56ba3e148833a800d00b/img16.jpg)
Содержание слайда: CSS Specificity Calculator
http://specificity.keegan.st/
№18 слайд![Practice Task Pass CSS Game](/documents_6/09ef27a097de56ba3e148833a800d00b/img17.jpg)
Содержание слайда: Practice Task: Pass CSS Game
№19 слайд![Font Basics A font is a set](/documents_6/09ef27a097de56ba3e148833a800d00b/img18.jpg)
Содержание слайда: Font Basics
A font is a set of characters of a particular size and style.
Examples:
Times New Roman
Eras Bold ITC
Myriad Web Pro
Monospace is often used for technical material such as formulas, numbers, codes, and so on.
№20 слайд![Serif and Sans Serif Fonts](/documents_6/09ef27a097de56ba3e148833a800d00b/img19.jpg)
Содержание слайда: Serif and Sans Serif Fonts
№21 слайд![Font Families The primary way](/documents_6/09ef27a097de56ba3e148833a800d00b/img20.jpg)
Содержание слайда: Font Families
The primary way to specify fonts in a CSS file is to use the font-family property.
The property can declare a specific font, like Garamond or Arial, or a family that includes many different fonts, such as “serif.”
Examples:
font-family: Arial
font-family: serif
№22 слайд![Web-safe Fonts Fonts most](/documents_6/09ef27a097de56ba3e148833a800d00b/img21.jpg)
Содержание слайда: Web-safe Fonts
Fonts most likely installed on a Web page visitor’s system
List of Web-safe fonts is relatively short and doesn’t offer much variety
№23 слайд![font-face Rule CSS rule that](/documents_6/09ef27a097de56ba3e148833a800d00b/img22.jpg)
Содержание слайда: @font-face Rule
CSS3 rule that enables developers to use any font they choose
Create a font-face rule by assigning a name to the font
Font must be located on your Web server, or include a URL to font location
Example:
@font-face
{
font-family: TrustyHomePage;
src: url('Euphemia.ttf'),
}
№24 слайд![Inline Flow and Block Flow](/documents_6/09ef27a097de56ba3e148833a800d00b/img23.jpg)
Содержание слайда: Inline Flow and Block Flow
Inline flow fills only as much width as required
Block flow fills as much width as is available
№25 слайд![Block Flow Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img24.jpg)
Содержание слайда: Block Flow Example
№26 слайд![Inline Flow Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img25.jpg)
Содержание слайда: Inline Flow Example
№27 слайд![CSS Positioning The position](/documents_6/09ef27a097de56ba3e148833a800d00b/img26.jpg)
Содержание слайда: CSS Positioning
The position Property
The position property specifies the type of positioning method used for an element.
There are four different position values:
static
relative
fixed
absolute
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
Z-Index: allows to place one element above another.
Details and samples: http://www.w3schools.com/css/css_positioning.asp
№28 слайд![Float Positioning Float](/documents_6/09ef27a097de56ba3e148833a800d00b/img27.jpg)
Содержание слайда: Float Positioning
Float positioning
Is useful when a layout is in columns, at least in part
To float an element is to have it move as far as possible either to the right or left
Text “wraps” around the element
The float property specifies whether or not an element should float.
The clear property is used to control the behavior of floating elements.
№29 слайд![Float Positing Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img28.jpg)
Содержание слайда: Float Positing Example
№30 слайд![Float Positing Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img29.jpg)
Содержание слайда: Float Positing Example
№31 слайд![Absolute Positioning Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img30.jpg)
Содержание слайда: Absolute Positioning Example
№32 слайд![Absolute Positing Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img31.jpg)
Содержание слайда: Absolute Positing Example
№33 слайд![Bounding Box A bounding box](/documents_6/09ef27a097de56ba3e148833a800d00b/img32.jpg)
Содержание слайда: Bounding Box
A bounding box is a rectangular border around content -- text, an image, or a shape
-- that enables you to move, rotate, or scale the content of the box.
Bounding box can be visible or invisible.
№34 слайд![Overflow When an element](/documents_6/09ef27a097de56ba3e148833a800d00b/img33.jpg)
Содержание слайда: Overflow
When an element overflows its bounding box, and its overflow is set to scroll, all the content of the element stays within the box; none of the overflow appears outside the box. This is referred to as scrolling overflow.
Visible overflow writes over the content that follows it.
Hidden overflow makes overflow invisible.
№35 слайд![Overflow overflow property](/documents_6/09ef27a097de56ba3e148833a800d00b/img34.jpg)
Содержание слайда: Overflow
overflow property
Values:
Scroll
Visible
Hidden
№36 слайд![Scrolling Overflow Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img35.jpg)
Содержание слайда: Scrolling Overflow Example
№37 слайд![Scrolling Overflow Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img36.jpg)
Содержание слайда: Scrolling Overflow Example
№38 слайд![Visible Overflow Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img37.jpg)
Содержание слайда: Visible Overflow Example
№39 слайд![Visible Overflow Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img38.jpg)
Содержание слайда: Visible Overflow Example
№40 слайд![Hidden Overflow Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img39.jpg)
Содержание слайда: Hidden Overflow Example
№41 слайд![Hidden Overflow Example](/documents_6/09ef27a097de56ba3e148833a800d00b/img40.jpg)
Содержание слайда: Hidden Overflow Example
№42 слайд![Practice Task](/documents_6/09ef27a097de56ba3e148833a800d00b/img41.jpg)
Содержание слайда: Practice Task
№43 слайд![Contacts](/documents_6/09ef27a097de56ba3e148833a800d00b/img42.jpg)
Содержание слайда: Contacts