|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
|
3 |
<html> |
|
|
4 |
<head> |
|
|
5 |
<title>YUI Library Examples: CSS Fonts: Contextual Example</title> |
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8"> |
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
|
|
8 |
|
|
|
9 |
<style> |
|
|
10 |
/*Supplemental CSS for the YUI distribution*/ |
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; } |
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);} |
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/ |
|
|
14 |
</style> |
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
|
|
17 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
|
|
18 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
|
|
19 |
|
|
|
20 |
</head> |
|
|
21 |
<body id="yahoo-com" class="yui-cssreset yui-cssfonts"> |
|
|
22 |
<div id="custom-doc" class="yui-t2"> |
|
|
23 |
<div id="hd"> |
|
|
24 |
<div id="ygunav"> |
|
|
25 |
<p> |
|
|
26 |
<em> |
|
|
27 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
|
|
28 |
</em> |
|
|
29 |
</p> |
|
|
30 |
<form action="http://search.yahoo.com/search" id="sitesearchform"> |
|
|
31 |
<input name="vs" type="hidden" value="developer.yahoo.com"> |
|
|
32 |
<input name="vs" type="hidden" value="yuiblog.com"> |
|
|
33 |
<div id="sitesearch"> |
|
|
34 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label> |
|
|
35 |
<input type="text" id="searchinput" name="p"> |
|
|
36 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
|
|
37 |
</div> |
|
|
38 |
</form> |
|
|
39 |
</div> |
|
|
40 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
|
|
41 |
<div id="pagetitle"><h1>YUI Library Examples: CSS Fonts: Contextual Example</h1></div> |
|
|
42 |
</div> |
|
|
43 |
<div id="bd"> |
|
|
44 |
|
|
|
45 |
<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div> |
|
|
46 |
|
|
|
47 |
<div id="yui-main"> |
|
|
48 |
<div class="yui-b"> |
|
|
49 |
<div class="yui-ge"> |
|
|
50 |
<div class="yui-u first example" id="main"> |
|
|
51 |
|
|
|
52 |
<h2>CSS Fonts: Contextual Example</h2> |
|
|
53 |
|
|
|
54 |
<div id="example" class="promo"> |
|
|
55 |
<p> |
|
|
56 |
<p>When CSS Fonts is included in a page it applies a baseline font treatment to all HTML elements via type selectors like this: <code>h1 {font-size:100%;}</code>. An alternate version, <code>-context.css</code>, uses only descendent selectors like this: <code>.cssfonts-context h1 {font-size:100%;}</code>. This means you can put that class value on a node in your document to choose which region(s) of your page CSS Fonts will be applied to.</p> |
|
|
57 |
</p> |
|
|
58 |
|
|
|
59 |
<div class="module example-container newWindow"> |
|
|
60 |
<div id="example-canvas" class="bd"> |
|
|
61 |
|
|
|
62 |
<p class="newWindowButton yui-skin-sam"> |
|
|
63 |
<span id="newWindowLink"> |
|
|
64 |
<span class="first-child"> |
|
|
65 |
<a href="cssfonts-context_source.html" target="_blank">View example in new window.</a> |
|
|
66 |
</span> |
|
|
67 |
</span> |
|
|
68 |
</p> |
|
|
69 |
|
|
|
70 |
|
|
|
71 |
</div> |
|
|
72 |
</div> |
|
|
73 |
</div> |
|
|
74 |
|
|
|
75 |
<p>In this example, only the middle block is within the context of CSS Fonts. The other two blocks are unaffected by CSS Fonts since their context is not one matched by the descendent selector of the contextual version of CSS Fonts.</p> |
|
|
76 |
|
|
|
77 |
|
|
|
78 |
<h5>Note:</h5> |
|
|
79 |
<p>Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.</p> </div> |
|
|
80 |
<div class="yui-u sidebar"> |
|
|
81 |
|
|
|
82 |
|
|
|
83 |
<div id="examples" class="mod box4"> |
|
|
84 |
<div class="hd"> |
|
|
85 |
<h4> |
|
|
86 |
CSS Fonts Examples:</h4> |
|
|
87 |
</div> |
|
|
88 |
<div class="bd"> |
|
|
89 |
<ul> |
|
|
90 |
<li><a href='../cssfonts/cssfonts-basic.html'>Global (Page-Level) Example</a></li><li class='selected'><a href='../cssfonts/cssfonts-context.html'>Contextual Example</a></li><li><a href='../cssfonts/cssfonts-size.html'>Setting Font Size</a></li><li><a href='../cssfonts/cssfonts-family.html'>Setting Font Family</a></li> </ul> |
|
|
91 |
</div> |
|
|
92 |
</div> |
|
|
93 |
|
|
|
94 |
<div class="mod box4"> |
|
|
95 |
<div class="hd"> |
|
|
96 |
<h4>More CSS Fonts Resources:</h4> |
|
|
97 |
</div> |
|
|
98 |
<div class="bd"> |
|
|
99 |
<ul> |
|
|
100 |
<!-- <li><a href="http://developer.yahoo.com/yui/cssfonts/">User's Guide</a> (external)</li> --> |
|
|
101 |
</ul> |
|
|
102 |
</div> |
|
|
103 |
</div> |
|
|
104 |
</div> |
|
|
105 |
</div> |
|
|
106 |
|
|
|
107 |
</div> |
|
|
108 |
</div> |
|
|
109 |
|
|
|
110 |
|
|
|
111 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
112 |
<!-- TABLE OF CONTENTS --> |
|
|
113 |
<div id="toc"> |
|
|
114 |
|
|
|
115 |
<ul> |
|
|
116 |
<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="selected "><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console</a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul> |
|
|
117 |
</div> |
|
|
118 |
</div> |
|
|
119 |
</div><!--closes bd--> |
|
|
120 |
|
|
|
121 |
<div id="ft"> |
|
|
122 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
123 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
124 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
125 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
126 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
127 |
</div> |
|
|
128 |
</div> |
|
|
129 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
130 |
<script language="javascript"> |
|
|
131 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
132 |
</script> |
|
|
133 |
</body> |
|
|
134 |
</html> |