Limited Support for Cascading Style Sheets
Limited Support for Cascading Style
Sheets
CGI.pm has limited support for HTML3's cascading style
sheets (css). To incorporate a stylesheet into your document, pass the
start_html() method a -style parameter. The value of this
parameter may be a scalar, in which case it is incorporated directly into a
<STYLE> section, or it may be a hash reference. In the latter case you
should provide the hash with one or more of -src or -code.
-src points to a URL where an externally-defined stylesheet can be found.
-code points to a scalar value to be incorporated into a <STYLE>
section. Style definitions in -code override similarly-named ones in
-src, hence the name "cascading."
You may also specify the MIME type of the stylesheet by
including an optional -type parameter in the hash pointed to by
-style. If not specified, the type defaults to 'text/css'.
To refer to a style within the body of your document,
add the -class parameter to any HTML element:
print
h1({-class=>'Fancy'},'Welcome to the Party');
Or define styles on the fly with the -style
parameter:
print
h1({-style=>'Color: red;'},'Welcome to Hell');
You may also use the new span() element to apply
a style to a section of text:
print
span({-style=>'Color: red;'},
h1('Welcome to Hell'),
"Where did that handbasket get to?"
);
Note that you must import the ":html3" definitions to
get the span() and style() methods.
You won't be able to do much with this unless you
understand the CSS specification. A more intuitive subclassable library for
cascading style sheets in Perl is in the works, but until then, please read the
CSS specification at
http://www.w3.org/pub/WWW/Style/
to find out how to use these features. Here's a final example to get you
started.
use
CGI qw/:standard :html3/;
#here's
a stylesheet incorporated directly into the page
$newStyle=<<END;
<!--
P.Tip {
margin-right:
50pt;
margin-left:
50pt;
color: red;
}
P.Alert {
font-size:
30pt;
font-family: sans-serif;
color: red;
}
-->
END
print
header();
print
start_html( -title=>'CGI with Style',
-style=>{-src=/eng/catalog/pages/comp/854/>
-code=>$newStyle}
);
print
h1('CGI with Style'),
p({-class=>'Tip'},
"Better read the cascading style sheet spec before playing with
this!"
),
span({-style=>'color: magenta'},"Look Mom, no hands!",
p(),
"Whooo wee!"
);
print
end_html;
Pass an array reference to -style in order to
incorporate multiple stylesheets into your
document.
|
