With CSS3, you can create multiple columns for laying out text - like in newspapers!
The column-count property specifies the number of columns an element should be divided into:
The following multiple column properties are:
- column-count
- column-gap
- column-rule
Browser Support
Internet Explorer does not yet support the multiple columns properties.Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.
Syntax:
Divide the text in a div element into three columns:
div
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>multiple-column</title>
<style type="text/css">
body{ background:#66CCFF; width:700px; margin:0 auto;
padding-top:20px}
div
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}
</style>
</head>
<body>
<div>
Browser support.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.
Internet Explorer does not yet support the multiple columns
properties.
</div>
</body>
</html>
CSS3 Specify the Gap between Columns:
Syntax:
Specify a
50 pixels gap between the columns:
div{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gap-column</title>
<style type="text/css">
body{ background:#66CCFF; width:700px; margin:0 auto; padding-top:20px}
div
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>
</head>
<body>
<div>
Browser support.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.
Internet Explorer does not yet support the multiple columns properties.
</div>
</body>
</html>
CSS3 Column Rules:
The column-rule property sets the width, style, and color of the rule between columns.
Syntax:
div{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>column-rule</title>
<style type="text/css">
body{ background:#66CCFF; width:700px; margin:0 auto; padding-top:20px}
div
{
-moz-column-count:4; /* Firefox */
-webkit-column-count:4; /* Safari and Chrome */
column-count:4;
}
div
{
-moz-column-rule:10px outset green; /* Firefox */
-webkit-column-rule:10px outset green; /* Safari and Chrome */
column-rule:10px outset green;
}
</style>
</head>
<body>
<div>
Browser support.
Firefox requires the prefix -moz-.
Chrome and Safari require the prefix -webkit-.
Internet Explorer does not yet support the multiple columns properties.
</div>
</body>
</html>
New Multiple Columns Properties
|
Property
|
Description
|
|
column-count
|
Specifies the number of columns an element should be
divided into
|
|
column-fill
|
Specifies how to fill columns
|
|
column-gap
|
Specifies the gap between the columns
|
|
column-rule
|
A shorthand property for setting all the column-rule-* properties
|
|
column-rule-color
|
Specifies the color of the rule between columns
|
|
column-rule-style
|
Specifies the style of the rule between columns
|
|
column-rule-width
|
Specifies the width of the rule between columns
|
|
column-span
|
Specifies how many columns an element should span across
|
|
column-width
|
Specifies the width of the columns
|
|
columns
|
A shorthand property for setting column-width and
column-count
|
CSS Units:
Measurement Values
|
Unit
|
Description
|
|
%
|
percentage
|
|
in
|
inch
|
|
cm
|
centimeter
|
|
mm
|
millimeter
|
|
em
|
1em is equal to the current font size. 2em means 2 times
the size of the current font. E.g., if an element is displayed with a font of
12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it
can adapt automatically to the font that the reader uses
|
|
ex
|
one ex is the x-height of a font (x-height is usually
about half the font-size)
|
|
pt
|
point (1 pt is the same as 1/72 inch)
|
|
pc
|
pica (1 pc is the same as 12 points)
|
|
px
|
pixels (a dot on the computer screen)
|
CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).
|
Selector
|
Example
|
Example description
|
|
.class
|
.intro
|
Selects all elements with class="intro"
|
|
#id
|
#firstname
|
Selects the element with id="firstname"
|
|
*
|
*
|
Selects all elements
|
|
element
|
p
|
Selects all <p> elements
|
|
element,element
|
div,p
|
Selects all <div> elements and all <p>
elements
|
|
element element
|
div p
|
Selects all <p> elements inside <div> elements
|
|
element>element
|
div>p
|
Selects all <p> elements where the parent is a
<div> element
|
|
element+element
|
div+p
|
Selects all <p> elements that are placed immediately
after <div> elements
|
|
[attribute]
|
[target]
|
Selects all elements with a target attribute
|
|
[attribute=value]
|
[target=_blank]
|
Selects all elements with target="_blank"
|
|
[attribute~=value]
|
[title~=flower]
|
Selects all elements with a title attribute containing the
word "flower"
|
|
[attribute|=language]
|
[lang|=en]
|
Selects all elements with a lang attribute value starting
with "en"
|
|
:link
|
a:link
|
Selects all unvisited links
|
|
:visited
|
a:visited
|
Selects all visited links
|
|
:active
|
a:active
|
Selects the active link
|
|
:hover
|
a:hover
|
Selects links on mouse over
|
|
:focus
|
input:focus
|
Selects the input element which has focus
|
|
:first-letter
|
p:first-letter
|
Selects the first letter of every <p> element
|
|
:first-line
|
p:first-line
|
Selects the first line of every <p> element
|
|
:first-child
|
p:first-child
|
Selects every <p> elements that is the first child
of its parent
|
|
:before
|
p:before
|
Insert content before every <p> element
|
|
:after
|
p:after
|
Insert content after every <p> element
|
|
:lang(language)
|
p:lang(it)
|
Selects every <p> element with a lang attribute
value starting with "it"
|
|
element1~element2
|
p~ul
|
Selects every ul element that are preceded by a p element
|
|
[attribute^=value]
|
a[src^="https"]
|
Selects every a element whose src attribute value begins
with "https"
|
|
[attribute$=value]
|
a[src$=".pdf"]
|
Selects every a element whose src attribute value ends
with ".pdf"
|
|
[attribute*=value]
|
a[src*="w3schools"]
|
Selects every a element whose src attribute value contains
the substring "w3schools"
|
|
:first-of-type
|
p:first-of-type
|
Selects every p element that is the first p element of its
parent
|
|
:last-of-type
|
p:last-of-type
|
Selects every p element that is the last p element of its
parent
|
|
:only-of-type
|
p:only-of-type
|
Selects every p element that is the only p element of its
parent
|
|
:only-child
|
p:only-child
|
Selects every p element that is the only child of its
parent
|
|
:nth-child(n)
|
p:nth-child(2)
|
Selects every p element that is the second child of its
parent
|
|
:nth-last-child(n)
|
p:nth-last-child(2)
|
Selects every p element that is the second child of its
parent, counting from the last child
|
|
:nth-of-type(n)
|
p:nth-of-type(2)
|
Selects every p element that is the second p element of
its parent
|
|
:nth-last-of-type(n)
|
p:nth-last-of-type(2)
|
Selects every p element that is the second p element of
its parent, counting from the last child
|
|
:last-child
|
p:last-child
|
Selects every p element that is the last child of its parent
|
|
:root
|
:root
|
Selects the document’s root element
|
|
:empty
|
p:empty
|
Selects every p element that has no children (including
text nodes)
|
|
:target
|
#news:target
|
Selects the current active #news element (clicked on a URL
containing that anchor name)
|
|
:enabled
|
input:enabled
|
Selects every enabled input element
|
|
:disabled
|
input:disabled
|
Selects every disabled input element
|
|
:checked
|
input:checked
|
Selects every checked input element
|
|
:not(selector)
|
:not(p)
|
Selects every element that is not a p element
|
|
::selection
|
::selection
|
Selects the portion of an element that is selected by a
user
|
No comments:
Post a Comment