Skip to content

Instantly share code, notes, and snippets.

@MrOrz

MrOrz/Sample input

Created March 8, 2012 07:47
Show Gist options
  • Save MrOrz/1999476 to your computer and use it in GitHub Desktop.
Save MrOrz/1999476 to your computer and use it in GitHub Desktop.
Download ZIP
Sample output
Raw
Sample input
:description 不囉唆學 CSS。以 reveal.js 製作的 HTML / CSS / JS 投影片。
:author MrOrz
:email [email protected]
:stylesheet_link_tag css/main.css, css/style.css, css/sample.css, css/jquery-ui.css
:stylesheet_link_tag css/ruler.css, css/zenburn.css
:javascript_include_tag js/jquery.min.js
:javascript_include_tag https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
:javascript_include_tag js/reveal.js, lib/highlight.js, js/ruler.js, js/sample.js
<script type="text/javascript">
$('script[type="text/x-sample"]').not('.reset').sample();
$('script.reset').sample({
wrapper: function(data){
return '<head><link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"></head><body>' + data + '</body>'
}
});
</script>
:javascript_include_tag js/index.js
!SLIDE
CSS
===
* [html.html](HTML)
* Javascript
{:.nav}
!STACK
!SLIDE
長這樣
-----
~~~
html, body {
position: relative;
padding: 0; margin: 0;
overflow: hidden;
font-family: '文泉驛微米黑', 'LiHei Pro', '微軟正黑體';
font-weight: 200;
letter-spacing: -0.02em;
color: #eee; width: 100%; height: 100%;
min-height: 400px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
~~~
{:.nopreview}
!SLIDE
CSS Syntax
---
![images/css/selector.gif](Selection and declaration)
[http://w3schools.com/css/css_syntax.asp](Source: W3Schools)
!SLIDE
怎麼加進 HTML
------------
在 `<head>` 中加入
~~~~~~~
<link rel="stylesheet" type="text/css" href="path/to/style.css">
~~~~~~~
{:.nopreview}
或直接把 CSS 寫在 `<style>` 裡；
~~~~~~~
<style type="text/css">
div {
color: blue;
}
</style>
<div>I am div!</div>
~~~~~~~
`<style>` 可放在 `<head>` 或 `<body>` 均可。
!ENDSTACK
!SLIDE.chapter#attribute
CSS Selectors
---
Raw
sample.output.html
<!doctype html>
<html lang="zh_TW">
<head>
<meta charset="utf-8">
<title>學 CSS</title>
<meta name="description" content="不囉唆學 CSS。以 reveal.js 製作的 HTML / CSS / JS 投影片。">
<meta name="author" content="MrOrz">
<meta name="email" content="[email protected]">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/sample.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/ruler.css">
<link rel="stylesheet" href="lib/zenburn.css">
</head>
<body>
<div id="reveal">
<div class="slides">
<section>
<h1>CSS</h1>
<ul class="nav">
<li><a href="html.html">HTML</a></li>
<li>Javascript</li>
</ul>
</section>
<section>
<section>
<h2>長這樣</h2>
<script type="text/x-sample" class="nopreview">
html, body {
position: relative;
padding: 0; margin: 0;
overflow: hidden;
font-family: '文泉驛微米黑', 'LiHei Pro', '微軟正黑體';
font-weight: 200;
letter-spacing: -0.02em;
color: #eee; width: 100%; height: 100%;
min-height: 400px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
</script>
</section>
<section>
<h2>CSS Syntax</h2>
<p>
<img src="images/css/selector.gif" alt="Selection and declaration">
</p>
<p><a href="http://w3schools.com/css/css_syntax.asp">Source: W3Schools</a></p>
</section>
<section>
<h2>怎麼加進 HTML</h2>
<p>在 <code>&lt;head&gt;</code> 中加入</p>
<script type="text/x-sample" class="nopreview">
<link rel="stylesheet" type="text/css" href="path/to/style.css">
</script>
<p>或直接把 CSS 寫在 <code>&lt;style&gt;</code> 裡；</p>
<script type="text/x-sample">
<style type="text/css">
div {
color: blue;
}
</style>
<div>I am div!</div>
</script>
<p><code>&lt;style&gt;</code> 可放在 <code>&lt;head&gt;</code> 或 <code>&lt;body&gt;</code> 均可。</p>
</section>
</section>
<section id="attribute" class="chapter">
<h2>CSS Selectors</h2>
</section>
</div>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">&#x25C4;</a>
<a class="right" href="#">&#x25BA;</a>
<a class="up" href="#">&#x25B2;</a>
<a class="down" href="#">&#x25BC;</a>
</aside>
<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
<div class="progress"><span></span></div>
</div>
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="js/reveal.js"></script>
<script src="lib/highlight.js"></script>
<script type="text/javascript" src="js/ruler.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
<script type="text/javascript">
$('script[type="text/x-sample"]').not('.reset').sample();
$('script.reset').sample({
wrapper: function(data){
return '<head><link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css"></head><body>' + data + '</body>'
}
});
</script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment