🗊Презентация Understanding CSS essentials: content flow, positioning, and styling

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Understanding CSS essentials: content flow, positioning, and styling, слайд №1Understanding CSS essentials: content flow, positioning, and styling, слайд №2Understanding CSS essentials: content flow, positioning, and styling, слайд №3Understanding CSS essentials: content flow, positioning, and styling, слайд №4Understanding CSS essentials: content flow, positioning, and styling, слайд №5Understanding CSS essentials: content flow, positioning, and styling, слайд №6Understanding CSS essentials: content flow, positioning, and styling, слайд №7Understanding CSS essentials: content flow, positioning, and styling, слайд №8Understanding CSS essentials: content flow, positioning, and styling, слайд №9Understanding CSS essentials: content flow, positioning, and styling, слайд №10Understanding CSS essentials: content flow, positioning, and styling, слайд №11Understanding CSS essentials: content flow, positioning, and styling, слайд №12Understanding CSS essentials: content flow, positioning, and styling, слайд №13Understanding CSS essentials: content flow, positioning, and styling, слайд №14Understanding CSS essentials: content flow, positioning, and styling, слайд №15Understanding CSS essentials: content flow, positioning, and styling, слайд №16Understanding CSS essentials: content flow, positioning, and styling, слайд №17Understanding CSS essentials: content flow, positioning, and styling, слайд №18Understanding CSS essentials: content flow, positioning, and styling, слайд №19Understanding CSS essentials: content flow, positioning, and styling, слайд №20Understanding CSS essentials: content flow, positioning, and styling, слайд №21Understanding CSS essentials: content flow, positioning, and styling, слайд №22Understanding CSS essentials: content flow, positioning, and styling, слайд №23Understanding CSS essentials: content flow, positioning, and styling, слайд №24Understanding CSS essentials: content flow, positioning, and styling, слайд №25Understanding CSS essentials: content flow, positioning, and styling, слайд №26Understanding CSS essentials: content flow, positioning, and styling, слайд №27Understanding CSS essentials: content flow, positioning, and styling, слайд №28Understanding CSS essentials: content flow, positioning, and styling, слайд №29Understanding CSS essentials: content flow, positioning, and styling, слайд №30Understanding CSS essentials: content flow, positioning, and styling, слайд №31Understanding CSS essentials: content flow, positioning, and styling, слайд №32Understanding CSS essentials: content flow, positioning, and styling, слайд №33Understanding CSS essentials: content flow, positioning, and styling, слайд №34Understanding CSS essentials: content flow, positioning, and styling, слайд №35Understanding CSS essentials: content flow, positioning, and styling, слайд №36Understanding CSS essentials: content flow, positioning, and styling, слайд №37Understanding CSS essentials: content flow, positioning, and styling, слайд №38Understanding CSS essentials: content flow, positioning, and styling, слайд №39Understanding CSS essentials: content flow, positioning, and styling, слайд №40Understanding CSS essentials: content flow, positioning, and styling, слайд №41Understanding CSS essentials: content flow, positioning, and styling, слайд №42Understanding CSS essentials: content flow, positioning, and styling, слайд №43
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Understanding CSS essentials: content flow, positioning, and styling. Доклад-сообщение содержит 43 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1


Understanding CSS Essentials: Content Flow, Positioning, and Styling Vyacheslav Koldovskyy Last update: 12/01/2015
Описание слайда:
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
Описание слайда:
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.
Описание слайда:
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
Описание слайда:
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>
Описание слайда:
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
Описание слайда:
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.
Описание слайда:
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
Описание слайда:
CSS selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors

Слайд 9


CSS Selectors - General
Описание слайда:
CSS Selectors - General

Слайд 10


CSS Selectors - Attributes
Описание слайда:
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.
Описание слайда:
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
Описание слайда:
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/
Описание слайда:
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/
Описание слайда:
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.
Описание слайда:
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


Understanding CSS essentials: content flow, positioning, and styling, слайд №16
Описание слайда:

Слайд 17


CSS Specificity Calculator http://specificity.keegan.st/
Описание слайда:
CSS Specificity Calculator http://specificity.keegan.st/

Слайд 18


Practice Task: Pass CSS Game
Описание слайда:
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.
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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
Описание слайда:
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'), }
Описание слайда:
@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
Описание слайда:
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
Описание слайда:
Block Flow Example

Слайд 26


Inline Flow Example
Описание слайда:
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
Описание слайда:
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.
Описание слайда:
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
Описание слайда:
Float Positing Example

Слайд 30


Float Positing Example
Описание слайда:
Float Positing Example

Слайд 31


Absolute Positioning Example
Описание слайда:
Absolute Positioning Example

Слайд 32


Absolute Positing Example
Описание слайда:
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.
Описание слайда:
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.
Описание слайда:
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
Описание слайда:
Overflow overflow property Values: Scroll Visible Hidden

Слайд 36


Scrolling Overflow Example
Описание слайда:
Scrolling Overflow Example

Слайд 37


Scrolling Overflow Example
Описание слайда:
Scrolling Overflow Example

Слайд 38


Visible Overflow Example
Описание слайда:
Visible Overflow Example

Слайд 39


Visible Overflow Example
Описание слайда:
Visible Overflow Example

Слайд 40


Hidden Overflow Example
Описание слайда:
Hidden Overflow Example

Слайд 41


Hidden Overflow Example
Описание слайда:
Hidden Overflow Example

Слайд 42


Practice Task
Описание слайда:
Practice Task

Слайд 43


Contacts
Описание слайда:
Contacts

Скачать

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