Презентация Understanding CSS essentials: content flow, positioning, and styling онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Understanding CSS essentials: content flow, positioning, and styling абсолютно бесплатно. Урок-презентация на эту тему содержит всего 43 слайда. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 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: Content Flow, Positioning, and Styling
Vyacheslav Koldovskyy
Last update: 12/01/2015
№2 слайд
Содержание слайда: 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
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 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?
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
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
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://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors
№9 слайд
Содержание слайда: CSS Selectors - General
№10 слайд
Содержание слайда: CSS Selectors - Attributes
№11 слайд
Содержание слайда: 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 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 and pseudo-elements
Details: http://www.w3.org/TR/css3-selectors/
№14 слайд
Содержание слайда: 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 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 слайд
Содержание слайда:
№17 слайд
Содержание слайда: CSS Specificity Calculator
http://specificity.keegan.st/
№18 слайд
Содержание слайда: Practice Task: Pass CSS Game
№19 слайд
Содержание слайда: 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
№21 слайд
Содержание слайда: 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 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
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
Inline flow fills only as much width as required
Block flow fills as much width as is available
№25 слайд
Содержание слайда: Block Flow Example
№26 слайд
Содержание слайда: Inline Flow Example
№27 слайд
Содержание слайда: 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 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
№30 слайд
Содержание слайда: Float Positing Example
№31 слайд
Содержание слайда: Absolute Positioning Example
№32 слайд
Содержание слайда: Absolute Positing Example
№33 слайд
Содержание слайда: 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 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
Values:
Scroll
Visible
Hidden
№36 слайд
Содержание слайда: Scrolling Overflow Example
№37 слайд
Содержание слайда: Scrolling Overflow Example
№38 слайд
Содержание слайда: Visible Overflow Example
№39 слайд
Содержание слайда: Visible Overflow Example
№40 слайд
Содержание слайда: Hidden Overflow Example
№41 слайд
Содержание слайда: Hidden Overflow Example
№42 слайд
Содержание слайда: Practice Task
№43 слайд
Содержание слайда: Contacts
Скачать все slide презентации Understanding CSS essentials: content flow, positioning, and styling одним архивом:
