|
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 |
|
|
|
46 |
<div id="yui-main"> |
|
|
47 |
<div class="yui-b"> |
|
|
48 |
<div class="yui-ge"> |
|
|
49 |
<div class="yui-u first example" id="main"> |
|
|
50 |
|
|
|
51 |
<h2>CSS Fonts: Contextual Example</h2> |
|
|
52 |
|
|
|
53 |
<div id="example" class="promo"> |
|
|
54 |
<div class="example-intro"> |
|
|
55 |
<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> |
|
|
56 |
</div> |
|
|
57 |
|
|
|
58 |
<div class="module example-container newWindow"> |
|
|
59 |
<div id="example-canvas" class="bd"> |
|
|
60 |
|
|
|
61 |
<p class="newWindowButton yui-skin-sam"> |
|
|
62 |
<span id="newWindowLink"> |
|
|
63 |
<span class="first-child"> |
|
|
64 |
<a href="cssfonts-context_source.html" target="_blank">View example in new window.</a> |
|
|
65 |
</span> |
|
|
66 |
</span> |
|
|
67 |
</p> |
|
|
68 |
|
|
|
69 |
|
|
|
70 |
</div> |
|
|
71 |
</div> |
|
|
72 |
</div> |
|
|
73 |
|
|
|
74 |
<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> |
|
|
75 |
|
|
|
76 |
|
|
|
77 |
<h5>Note:</h5> |
|
|
78 |
<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> |
|
|
79 |
<div class="yui-u sidebar"> |
|
|
80 |
|
|
|
81 |
|
|
|
82 |
<div id="examples" class="mod box4"> |
|
|
83 |
<div class="hd"> |
|
|
84 |
<h4> |
|
|
85 |
CSS Fonts Examples:</h4> |
|
|
86 |
</div> |
|
|
87 |
<div class="bd"> |
|
|
88 |
<ul> |
|
|
89 |
<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> |
|
|
90 |
</div> |
|
|
91 |
</div> |
|
|
92 |
|
|
|
93 |
<div class="mod box4"> |
|
|
94 |
<div class="hd"> |
|
|
95 |
<h4>More CSS Fonts Resources:</h4> |
|
|
96 |
</div> |
|
|
97 |
<div class="bd"> |
|
|
98 |
<ul> |
|
|
99 |
<!-- <li><a href="http://developer.yahoo.com/yui/cssfonts/">User's Guide</a> (external)</li> --> |
|
|
100 |
</ul> |
|
|
101 |
</div> |
|
|
102 |
</div> |
|
|
103 |
</div> |
|
|
104 |
</div> |
|
|
105 |
|
|
|
106 |
</div> |
|
|
107 |
</div> |
|
|
108 |
|
|
|
109 |
|
|
|
110 |
<div class="yui-b toc3" id="tocWrapper"> |
|
|
111 |
<!-- TABLE OF CONTENTS --> |
|
|
112 |
<div id="toc"> |
|
|
113 |
|
|
|
114 |
<ul> |
|
|
115 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</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="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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="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="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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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 <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></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">Other Useful YUI 3 Resources</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="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></ul> |
|
|
116 |
</div> |
|
|
117 |
</div> |
|
|
118 |
</div><!--closes bd--> |
|
|
119 |
|
|
|
120 |
<div id="ft"> |
|
|
121 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p> |
|
|
122 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
|
|
123 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
|
|
124 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
|
|
125 |
<a href="http://careers.yahoo.com/">Job Openings</a></p> |
|
|
126 |
</div> |
|
|
127 |
</div> |
|
|
128 |
<script language="javascript"> |
|
|
129 |
var yuiConfig = {base:"../../build/", timeout: 10000}; |
|
|
130 |
</script> |
|
|
131 |
<script src="../../assets/syntax.js"></script> |
|
|
132 |
<script src="../../assets/dpSyntaxHighlighter.js"></script> |
|
|
133 |
<script language="javascript"> |
|
|
134 |
dp.SyntaxHighlighter.HighlightAll('code'); |
|
|
135 |
</script> |
|
|
136 |
</body> |
|
|
137 |
</html> |