📄 default.htm
字号:
<li>In <em>Styles.css</em>: <code>.textBox {border:1px solid #933126; background-color:#F7DE8A;}</code> </li>
<li>In <em>Default.skin</em>: <code><asp:TextBox runat="server" CssClass="textBox" /></code></li>
</ul>
<p>This way, you keep all the visual elements, such as colors, in the style
sheet and can manage them from one central location. Besides, let's suppose
you want to assign a background image to all the text boxes later on. Since
there is no way to do this directly in a skin file (ASP.NET controls don't
provide a <code>background-image</code> property for you to use) you would
have to create a separate CSS class anyway. Scattering formatting instructions
across both style sheets and skin files makes site maintenance a lot harder
than it should be. </p>
<p>No rule without exceptions, however: it is not very efficient to burden
the global style sheet with rules that apply to a single control on a single
page only; likewise, styling a complex control, such as the <code>GridView</code> might
require the creation of 10 or more classes in the style sheet, which may
or may not be an approach you want to take. </p>
<p>You'll find that the skin files in the ASP.NET Master Pages Template Set
mostly reference existing classes in the style sheets and use direct styling
in the skin files where necessary.</p>
<h3>Themes versus StylesheetThemes </h3>
<p>You may be wondering if you'll still be able to change visual properties
of controls on pages that have a theme assigned. After all, individual adjustments
are sometimes necessary and you wouldn't want to be restricted by a theme
once it has been set. The answer is that all templates permit overriding
of the values defined in a theme, which means that in your page code you
can assign any visual properties at will and rest assured they'll be taken
into account when the page gets rendered to the browser. </p>
<p>This is achieved by taking advantage of the distinction between a <code>Theme</code> and
a <code>StylesheetTheme</code>, as described in the <a href="http://msdn.microsoft.com/en-us/library//ykzx33wh">MSDN
documentation</a> (see the section entitled "Theme Settings Precedence").
In short, the main difference between the two properties is the position
in the page rendering life-cycle where they are applied: a <code>StylesheetTheme</code> is
assigned early on in the process, before the user-defined formatting instructions
have taken effect; a <code>Theme</code>, however, comes last and gets merged
with any earlier existing settings. All templates work exclusively with the <code>StylesheetTheme</code>,
so whatever instructions you may have assigned to controls on a page will
be honored. </p>
<p>Note: while there is a technical difference between a <code>Theme</code> and
a <code>StylesheetTheme</code>, this documentation will continue to refer
to both using the generic term <em>theme</em>. </p>
<h3>Assigning themes to content</h3>
<p>ASP.NET offers a number of ways to assign a theme to content pages. You
can either add a <code>Theme</code> or <code>StylesheetTheme</code> property
to the <code>@Page</code> directive at the top of the page, like this:</p>
<p><code><%@ Page Language="C#" <strong>StylesheetTheme</strong>="Fruits" %></code></p>
<p>or you can assign the theme globally to the entire application by adding
the following instruction to the web.config file: </p>
<p><code><system.web><br />
(...)<br />
<pages <strong>styleSheetTheme</strong>="Fruits" /> <br />
</system.web></code></p>
<p>For obvious reasons — most prominently easier maintenance —,
the templates in the ASP.NET Master Pages Templates Set use the second method — with
the exception of the <a href="Personal.htm">Personal</a> template which sets
the theme programmatically.</p>
<h2>Style sheets overview</h2>
<p>From the above explanations it should be pretty clear that the CSS files
are truly at the heart of each template. And indeed, they determine the page
structure, the colors and the images that are used to create a specific layout.
So lets have a closer look at how the CSS is organized.</p>
<p>As a general rule, each theme has a single CSS file that contains the bulk
of the formatting instructions for the theme. Adjustments to the design of
a theme will happen almost exclusively in the CSS file. The rules in each
CSS file are arranged in the order the corresponding elements appear in the
master page. For compatibility with IE version 5.5 and 5.0, some of the master
pages contain a short <code><style></code> block in the head of the
document which is wrapped in a <a href="http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp">conditional
comment</a> . The rules in there will rarely have to be changed but you should
be aware of them nevertheless in case things go awry in IE 5.x. </p>
<h3>Duplicate style rules </h3>
<p>As you know, there is one CSS file per theme and there are three themes
per template. Naturally, there are duplicate rules in the CSS files which
could have been moved to a separate style sheet. For example, the basic rules
for constructing the page grid (defining which element box goes where and
has which dimensions) are nearly identical across all themes. The reason
they were repeated in each style sheet rather than moved to a global file
lies in the intended ease of modification of the themes. This way, you can
deconstruct the layout by simply studying one file and make all your
changes there. Having to mentally "merge" style rules scattered
across several files is unwieldy at best and complicates the customization
process. </p>
<h3>Styling pages for printing</h3>
<p>At the end of each CSS file you will find a style block introduced by an <a href="http://www.w3.org/TR/REC-CSS2/media.html#at-media-rule">@media
print rule</a>. The rules contained in this block work in conjunction with
the existing rules further up in the style sheet and specifically apply
when the user prints a page from the browser. CSS allows a page author
to exert a significant amount of control over the appearance of printed
pages. Unfortunately, browser support is not uniformly up to what the CSS
specification defines, but the print style sheets provided should nevertheless
do their job satisfactorily. </p>
<h3>CSS rule structure</h3>
<p>You may be aware of the fact that pure CSS layouts can be a bit "sensitive" to
change. Remember, that the way they are built is by defining distinct boxes
that hold the content and then stacking theses boxes neatly on top and next
to each other. Therefore, if you inadvertently make a change at the wrong
place, the precise arrangement of boxes might get disrupted — resulting
in a broken layout. In order to assist you in getting the most out of the
templates, all the rules in the style sheets have been structured according
to a specific convention. The "unsafe" properties which could potentially
damage the layout if changed are at the top, while the ones that can be modified
without problems are at the bottom. Let's look at an example rule: </p>
<p><code>#header {<br />
position:relative;<br />
height:140px;<br />
margin:0;<br />
border-left:10px solid #FFFFFF;<br />
background-color:#85B94A;<br />
background-image:url(Images/header_bg.gif);<br />
background-repeat:no-repeat;<br />
background-position:top right;<br />
}</code></p>
<p>The <code>position</code>, <code>height</code>, <code>margin</code> and <code>border-left</code> properties
all influence the arrangement of the boxes and thus should be modified with
care only. These properties are located at the top of the rule. <code>background-color</code>, <code>background-image</code>, <code>background-repeat</code> and <code>background-position</code>,
however will have no bearing on the overall page grid, so they are located
at the bottom of the rule.</p>
<p><a name="unsafeProperties" id="unsafeProperties"></a>Here is a list of the
most common "unsafe" properties for reference:</p>
<ul>
<li><code><a href="http://www.w3.org/TR/REC-CSS2/visuren.html#display-prop">display</a></code></li>
<li><code><a href="http://www.w3.org/TR/REC-CSS2/visuren.html#floats">float</a></code> </li>
<li><code><a href="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-clear">clear</a></code></li>
<li> <code><a href="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-position">position</a></code> and
the related properties <code><a href="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-top">top</a></code>, <code><a href="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-right">right</a></code>, <code><a href="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-bottom">bottom</a></code> and <code><a href="http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-left">left</a></code>.</li>
<li><code><a href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-width">width</a></code></li>
<li><code><a href="http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-height">height</a></code></li>
<li><code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin">margin</a></code> (including <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin-top">margin-top</a></code>, <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin-right">margin-right</a></code>, <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin-bottom">margin-bottom</a></code> and <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-margin-left">margin-left</a></code>)</li>
<li><code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-border">border</a></code> (including <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-top">border-top</a></code>, <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-right">border-right</a></code>, <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-bottom">border-bottom</a></code> and <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-border-left">border-left</a></code>)</li>
<li><code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding">padding</a></code> (including <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding-top">padding-top</a></code>, <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding-right">padding-right</a></code>, <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding-bottom">padding-bottom</a></code> and <code><a href="http://www.w3.org/TR/REC-CSS2/box.html#propdef-padding-left">padding-left</a></code>) </li>
</ul>
<p>Property declarations other than the above can be customized without having
to worry about potential negative side effects. </p>
<p>The general principle is: modify the declarations within a rule from the
bottom and try to leave the "unsafe" declarations as is. If you're
familiar with the CSS <a href="http://www.w3.org/TR/REC-CSS2/box.html">box-model</a>, <a href="http://www.w3.org/TR/REC-CSS2/visuren.html#floats">floating</a> and <a href="http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme">positioning</a>,
however, you're of course free to modify the styles to your hearts content. </p>
<h2>Design templates vs. reference applications</h2>
<p>This might be stating the obvious, but please be aware that even though
some of the templates show some dynamic behavior (reading from a database,
gathering products in a shopping cart etc.) these templates are intended
to be used as <em>design</em> models for web sites or applications. They
are not ASP.NET reference applications. No input validation is performed
nor will you find any form of exception handling anywhere. All these tasks
are assumed to be taken care of by you, the ASP.NET programmer once you decide
to use one of the templates in a real-world application. </p>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -