HTML5 (Lesson 6 by cbastiao)

¡Supera tus tareas y exámenes ahora con Quizwiz!

You can also create a float in any shape: ___

rectangular, circular, triangular, and just about anything in between.

Now let's add a «column rule». This property sets the ___

width, style, and color of the rule between all columns.

Positioned floats are called ___

«CSS Exclusions» in the latest W3C specification.

You must (also) use the -ms- vendor prefix with the «flow-into» and ___

«flow-from» properties.

Within the content source, the element that contains the content to be flowed is assigned the ___

«flow-into» CSS property.

To implement CSS Regions, you need to specify a content source and content containers. You accomplish both tasks using the ___

«flow-into» and «flow-from» CSS properties.

The value for the «flow-from» property must match the 'named flow' value of the ___

«flow-into» property—this is how the content source and content container are associated.

You can control how the last region handles overflow content using the ___

«region-overflow» and «overflow» properties.

Generally, automatic hyphenation attempts to justify text at the ___

right margin.

A «content source» may be one or more blocks of text in the same or a separate HTML document that holds the content you want to flow through a layout. The content is referred to as a ___

"content stream."

..then you would create the 'named flow' using a CSS selector that specifies the data source: ___

#main-data-source { -ms-flow-into: main; }

Within the content source, the element that contains the content to be flowed is assigned the «flow-into» CSS property. The value of this property is called a ___

'named flow'.

To control the size of the gutter between columns, use the ___

*column-gap* property.

To specify whether an element such as a heading should span columns, use the ___

*columns-span* property.

To use any CSS Exclusions properties for rendering in Internet Explorer 10, add the ___

-ms- vendor prefix.

Microsoft provides additional hyphenation properties that are specific to Microsoft environments, as follows: ___

-ms-hyphenate-limit-zone, -ms-hyphenate-limit-chars, -ms-hyphenate-limit-lines

..then create a CSS selector that specifies the data source from which to accept the content flow: ___

.region { -ms-flow-from: main; }

For example, if you want overflow content to continue to flow and be visible, you would use the following syntax: ___

.region { region-overflow: auto; overflow:visible; }

Using the «break» value for «region-overflow» will prevent content from overflowing the last region, truncating the content at that point. The syntax is:

.region { region-overflow:break; }

...The following code uses the auto value for column width: ___

.tricolumn { columns: 3 auto; }

if your entire HTML document is in the same language (English, for example) and you want to enable automatic hyphenation, add the attribute to your HTML element or doctype declaration, such as: ___

<!doctype html> <html lang="en-us"> or <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

To create content containers, assign a class name to the elements you want to use as containers: ___

<div class="region"></div> <div class="region"></div>

For example, the following shows an «iframe» element with a unique ID, which you would add to a master page: ___

<iframe id="main-data-source" src="source.html" />

The following markup with inline CSS uses the -ms-hyphens property, which is set to auto: ___

<p style="-ms-hyphens: auto; text-align: justify; font-size: 14pt;"> Hyphenation is the process of connecting . . . more professional. </p>

<style> .tricolumn { column-count: 3; } </style> We modified the code for all four of the major browsers : ___

<style> .tricolumn { -ms-column-count: 3; -moz-column-count: 3; -o-column-count: 3; -webkit-column-count: 3; } </style>

This code uses the column-count property to create three columns : ___

<style> .tricolumn { column-count: 3; } </style> ... <div class="tricolumn"> Lorem ipsum . . orci. </div>

break-after ? ___

Inserts a break after the generated column box

break-before ? ___

Inserts a break before the generated column box

break-inside ? ___

Inserts a break within the generated column box

wrap ? ___

Is a shorthand method of setting the wrap-flow, wrap-margin, and wrap-padding properties in one declaration

column-rule ? ___

Is a shorthand property that sets the column-rule-width, column-rule-style, and column-rule-color properties at the same place in a style sheet

columns ? ___

Sets the *column-width* and *column-count* properties simultaneously

«column-count»: ___

Sets the number of columns an element should be divided into; can also use the «columns» property with values to set «column-count» and «column-width» properties simultaneously

Multi-column properties used in CSS3 : ___

break-after, break-before, break-inside, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, columns

«Hyphenation» is the process of connecting two words with a hyphen mark (-) or ___

breaking words between syllables at the end of a line.

Microsoft and Adobe collaborated with the W3C to create the ___

concept of CSS Regions for Web-based content flow.

«CSS Regions» allows developers to dynamically flow ___

content across multiple boxes, or containers, in HTML documents with fluid layouts.

You declare an exclusion shape using the «shape-inside» and «shape-outside» properties, which define the ___

content and the general shape of an exclusion, respectively.

the «flow-from» CSS property creates the ___

content container, which is a CSS Region.

To implement CSS Regions, you need to specify a content source and ___

content containers.

The "column box" is between the content box and the ___

content in the original CSS Box model.

A «content source» may be one or more blocks of text in the same or a separate HTML document that holds the ___

content you want to flow through a layout.

The W3C points out that you must declare a language using the HTML lang or XML xml:lang attributes for ___

correct automatic hyphenation to occur.

In order for CSS Regions to work, content flow can't affect the ___

height of a region

CSS3 multi-column layout uses the concept of the "column box" to refer to the container that ___

holds content and displays it in columns.

CSS3 introduces the «hyphens» property, which controls ___

hyphenation.

Positioned floats, now called CSS Exclusions, enable you to completely wrap text around ___

images, shapes, and containers of text.

-ms-hyphenate-limit-lines, specifies the maximum number of consecutive hyphenated lines that ___

may contain hyphenated words

As you can see, the column-related properties provide flexible content display with ____

minimal CSS declarations.

You can also have multiple sources and assign the «flow-into» property to ___

multiple elements.

CSS Regions lets you flow content between ___

neighboring or distant areas in an HTML document.

A region receives as much content as it can hold and then flows the remaining content into the ___

next region.

CSS3 introduces the hyphens property, which controls hyphenation. The property uses the values ___

none, manual, and auto

In order for CSS Regions to work, content flow can't affect the height of a region—you need to define region heights in your CSS so they are ___

not flexible.

Desktop publishing software makes it easy to connect content in different areas, so that changes made to one area allows content to ___

reflow properly to other connected areas.

«region-overflow» is set to either «auto» or «break». Using the «auto» value, you can ___

specify the overflow property as «visible» or «hidden».

With CSS Exclusions, you can control the position of a float precisely, at a specified distance from the ___

top, bottom, left, or right sides of a container.

Hyphenation breaks words between syllables at the end of lines to create a more ___

uniform right margin and eliminate gaps of whitespace within paragraphs.

column-count ? ___

Sets the number of columns an element will use

msGetRegionContent: ___

A script method defined by Microsoft as returning "an array of Range instances corresponding to the content from the region flow that is positioned in the region"

msRegionUpdate: ___

Allows you to manipulate regions dynamically

«column-rule»: ___

Creates a vertical line in the gap between columns and sets the width, style (single or double line, solid, dashed, 3D, etc.) and color of the rule

shape-outside ? ___

Creates the general shape of an exclusion

hyphens: auto ? ___

Enables automatic hyphenation of words based on line-break opportunities within words or by a "language-appropriate hyphenation resource"

hyphens: manual ? ___

Enables hyphenation of words based only on line-break opportunities within words

msRegionOverflow: ___

Handles content overflow, similar to the region-overflow property

shape-inside ? ___

Modifies a shape's contents

hyphens: none ? ___

Prevents hyphenation

wrap-padding ? ___

Provides a pad (an offset) for content inside an element

wrap-margin ? ___

Provides an offset for content outside the element

wrap-through ? ___

Specifies how content should wrap around an exclusion element

wrap-flow ? ___

Specifies how exclusions affect inline content within block-level elements

column-fill ? ___

Specifies how to fill columns; balances content equally between columns, if possible, or fills columns sequentially

column-rule-color ? ___

Specifies the color of the rule between columns

column-gap ? ___

Specifies the gap between columns

«column-gap»: ___

Specifies the gap between the columns, which is also known as the gutter or alley

-ms-hyphenate-limit-lines: ___ ?

Specifies the maximum number of consecutive hyphenated lines that may contain hyphenated words

-ms-hyphenate-limit-chars: ___ ?

Specifies the minimum number of characters in a word that may be hyphenated; if the character count is lower than the minimum, the word is not hyphenated

column-rule-style ? ___

Specifies the style of the rule between columns, such as «solid» or «double», «dashed», and so on

column-width ? ___

Specifies the width of a column or columns

column-rule-width ? ___

Specifies the width of the rule between columns

-ms-hyphenate-limit-zone: ___ ?

Specifies the width of the trailing whitespace (called the hyphenation zone) that can be left in a line before hyphenation occurs; the property's value is a length in pixels or a percentage

column-span ? ___

Specifies whether an element should span no columns or all columns

If there is still content left over after all regions are filled, one of three situations can occur: ___

The overflow content in the last region will: • Be truncated • Continue overflowing and be visible • Continue overflowing but be hidden

Microsoft also uses the «-ms-wrap-side» and «-ms-flow-wrap» properties, which aren't part of the ___

W3C specification.

To create a simple CSS exclusion, use the «wrap-flow: both» property to display content on ___

all sides of the exclusion.

A «positioned float» is a CSS construct that enables you to position images, text, and boxes ___

anywhere in an HTML document and then wrap text completely around these elements.

Another way to use the «columns property» is to ___

assign a number value to column-width and leave column-count set to auto.

«region-overflow» is set to either ___

auto or break.

Another option is to use «wrap-flow: clear», which displays content above and ___

below the exclusion but leaves the sides blank.

Although CSS3 enables you to use multi-column layout to separate content into columns, «CSS Regions» offer ___

better control of content flow in more complex layouts.

Microsoft's method of implementing CSS Regions varies a ___

bit from the W3C

-ms-hyphenate-limit-zone, specifies the width of the trailing whitespace (called the hyphenation zone) that ___

can be left in a line before hyphenation occurs;

The main CSS properties you use to create and manipulate multiple columns in an HTML document are: ___

column-count, column-gap, column-rule

To control the size of the gutter between columns, use the column-gap property. This property uses an integer value or the keyword «normal»: ___

column-gap: 3em;

Because CSS3 columns are still a work in progress, you may need to add vendor prefixes to ___

column-related property names.

Now let's add a «column rule». This property sets the width, style, and color of the rule between all columns. The syntax for a dashed blue line that's 3 pixels wide is: ___

column-rule: 3px dashed blue;

You combine CSS Regions with CSS layout techniques, such as ___

columns, flexboxes, and grid layouts.

This example sets column-width to 15em, which means the multi-column element will have a column width of 15 ems (or 15 times the width of the font size of the content in the column): ___

columns: auto 15em;

CSS Regions are ___

defined areas (regions) of an HTML document where content can flow.

The DOM is a W3C specification that ___

describes the structure of dynamic HTML and Extensible Markup Language (XML) documents in a way that allows a Web browser to manipulate.

Microsoft recommends using CSS Regions for page layout and JavaScript when ___

developing Metro style apps in Windows 8 and Internet Explorer 10.

To specify whether an element such as a heading should span columns, use the «columns-pan» property. This property is set to a number of columns to span or uses the «all» (column-span: all;) or «none» keywords, which means an element spans all columns or ___

does not span any columns, respectively.

In a typical HTML document, you can display content in different sections or areas, but ___

each area is independent. If you want overflow text to move from one area to another, you generally have to do so manually.

Hyphenation is highly useful for multi-column layouts to ___

eliminate white space within columns left by long words that automatically wrap to the next line, making text appear more professional.

Microsoft uses «iframes», which are like mini boxes on a Web page that contain ___

external content embedded in an HTML document, as the content source.

Today, CSS Regions, CSS Exclusions, and multi-column layouts help you ___

flow content dynamically.

CSS Regions are defined areas (regions) of an HTML document where content can flow. When there's too much content to fit in one region, the remaining content automatically ___

flows into the next region.

Hyphenation, which breaks words between syllables at the end of lines, is also important to ___

fluid layouts, enabling full justification of standalone paragraphs and those in columns.

The DOM allows programs and scripts to update content, structure, and styles on the ___

fly - anything in an HTML or XML file can be modified.

Using the «break» value for «region-overflow» will prevent content from ___

overflowing the last region, truncating the content at that point.

You can also enable hyphenation to properly break words at the end of lines, which avoids the ___

problem of long words wrapping to the next line and leaving a gap on the previous line.

Content flow has, historically, been a manual ___

procedure in HTML documents.

CSS3 properties for «multi-column layout» let you create columns by dividing text across multiple columns, specify the amount of space that appears between columns (the gap), make vertical lines (___) appear between columns, and define where columns break.

rules

You could accomplish multiple columns using the «columns property», which is a shorthand way of ___

setting the number of columns and the column width in one declaration.

W3C properties related to CSS Exclusions: ___

shape-outside, shape-inside, wrap, wrap-flow, wrap-margin, wrap-padding, wrap-through

An HTML document with content containers acts as a master page, like a ___

template, in which each container is sized and positioned where you want content to appear, but each container is initially empty.

«content containers», which are ___

the areas into which content is flowed.

CSS3 enables you to create multi-column layouts that work much like ___

the columns feature in Microsoft Word.

CSS3 properties for «multi-column layout» let you create columns by dividing text across multiple columns, specify the amount of space that appears between columns ( ___ ), make vertical lines (rules) appear between columns, and define where columns break.

the gap

You can now create multiple columns - newspaper style - in HTML documents that scale based on ___

the user's screen size.

-ms-hyphenate-limit-chars, specifies the minimum number of characters in a word that may be hyphenated; if the character count is lower than the minimum, ___

the word is not hyphenated


Conjuntos de estudio relacionados

nr222 final exam practice questions

View Set

Dealing with Difficulty: Figurative Language and Imagery - English 10

View Set

A Brief History of Life on Earth

View Set

Fraction, Decimal, Percent Conversions

View Set