Understanding CSS essentials: content flow, positioning, and styling - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Understanding CSS essentials: content flow, positioning, and styling, слайд №1

Understanding CSS essentials: content flow, positioning, and styling, слайд №2

Understanding CSS essentials: content flow, positioning, and styling, слайд №3

Understanding CSS essentials: content flow, positioning, and styling, слайд №4

Understanding CSS essentials: content flow, positioning, and styling, слайд №5

Understanding CSS essentials: content flow, positioning, and styling, слайд №6

Understanding CSS essentials: content flow, positioning, and styling, слайд №7

Understanding CSS essentials: content flow, positioning, and styling, слайд №8

Understanding CSS essentials: content flow, positioning, and styling, слайд №9

Understanding CSS essentials: content flow, positioning, and styling, слайд №10

Understanding CSS essentials: content flow, positioning, and styling, слайд №11

Understanding CSS essentials: content flow, positioning, and styling, слайд №12

Understanding CSS essentials: content flow, positioning, and styling, слайд №13

Understanding CSS essentials: content flow, positioning, and styling, слайд №14

Understanding CSS essentials: content flow, positioning, and styling, слайд №15

Understanding CSS essentials: content flow, positioning, and styling, слайд №16

Understanding CSS essentials: content flow, positioning, and styling, слайд №17

Understanding CSS essentials: content flow, positioning, and styling, слайд №18

Understanding CSS essentials: content flow, positioning, and styling, слайд №19

Understanding CSS essentials: content flow, positioning, and styling, слайд №20

Understanding CSS essentials: content flow, positioning, and styling, слайд №21

Understanding CSS essentials: content flow, positioning, and styling, слайд №22

Understanding CSS essentials: content flow, positioning, and styling, слайд №23

Understanding CSS essentials: content flow, positioning, and styling, слайд №24

Understanding CSS essentials: content flow, positioning, and styling, слайд №25

Understanding CSS essentials: content flow, positioning, and styling, слайд №26

Understanding CSS essentials: content flow, positioning, and styling, слайд №27

Understanding CSS essentials: content flow, positioning, and styling, слайд №28

Understanding CSS essentials: content flow, positioning, and styling, слайд №29

Understanding CSS essentials: content flow, positioning, and styling, слайд №30

Understanding CSS essentials: content flow, positioning, and styling, слайд №31

Understanding CSS essentials: content flow, positioning, and styling, слайд №32

Understanding CSS essentials: content flow, positioning, and styling, слайд №33

Understanding CSS essentials: content flow, positioning, and styling, слайд №34

Understanding CSS essentials: content flow, positioning, and styling, слайд №35

Understanding CSS essentials: content flow, positioning, and styling, слайд №36

Understanding CSS essentials: content flow, positioning, and styling, слайд №37

Understanding CSS essentials: content flow, positioning, and styling, слайд №38

Understanding CSS essentials: content flow, positioning, and styling, слайд №39

Understanding CSS essentials: content flow, positioning, and styling, слайд №40

Understanding CSS essentials: content flow, positioning, and styling, слайд №41

Understanding CSS essentials: content flow, positioning, and styling, слайд №42

Understanding 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

Слайд 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: Some header 2. Internal Style Sheet: h1 { color: blue; margin-left: 40px; } 3. External file:

Слайд 6

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

The Link Between HTML and CSS The 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: For simple projects, can use the 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

Слайд 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:

Слайд 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:

Слайд 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

Слайд 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:

Слайд 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.