337 lines
12 KiB
HTML
Executable file
337 lines
12 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<!--
|
|
To change this license header, choose License Headers in Project Properties.
|
|
To change this template file, choose Tools | Templates
|
|
and open the template in the editor.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>New HTML Page</title>
|
|
<link href="/_img/_juyounglee.tk/favicon.ico" rel="icon" type="image/x-icon"/>
|
|
<style type="text/css">
|
|
*{font-size: 20px;}
|
|
a:link {color: #000000}
|
|
a:visited {color: #006600}
|
|
a:hover {color: #ffcc00}
|
|
a:active {color: #ff00cc} /* See "Links" on index.html*/
|
|
|
|
table.one {bolder-collapse:collapse;}
|
|
table.two {border-collapse:separate;}
|
|
td.a {
|
|
border-style:dotted;
|
|
border-width:3px;
|
|
border-color:#000000;
|
|
padding: 10px;
|
|
}
|
|
td.b {border-style:solid;
|
|
border-width: 3px;
|
|
border-color: #333333;
|
|
padding: 10px;
|
|
} /* the border-collapse property */
|
|
|
|
td.three {border-collapse:separate;
|
|
width:400px;
|
|
border-spacing:10px;
|
|
}
|
|
td.four {border-collapse:separate;
|
|
width:400px;
|
|
border-spacing:10px 50px;
|
|
} /*The border-spacing property*/
|
|
|
|
caption.top {caption-side:top}
|
|
caption.bottom {caption-side:bottom}
|
|
/* The caption-side property */
|
|
|
|
|
|
/* The empty-cells Property */
|
|
table.empty{
|
|
width:350px;
|
|
border-collapse:separate;
|
|
empty-cells:hide;
|
|
}
|
|
td.empty{
|
|
padding:5px;
|
|
border-style:solid;
|
|
border-width:1px;
|
|
border-color:#999999;
|
|
}
|
|
|
|
/*the table-layout property*/
|
|
table.auto
|
|
{
|
|
table-layout: auto
|
|
}
|
|
table.fixed
|
|
{
|
|
table-layot: fixed
|
|
}
|
|
|
|
/* The border-color Property */
|
|
p.example1{
|
|
border:1px solid;
|
|
border-bottom-color:#009900; /* green */
|
|
border-top-color:#ff0000; /* red */
|
|
border-left-color:#330000; /* black */
|
|
border-right-color:#0000cc; /* blue */
|
|
}
|
|
p.example2{
|
|
border:1px solid;
|
|
border-color:#009900; /* green */
|
|
}
|
|
|
|
/*the margin property*/
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
<div style="text-align:center;font-size:25px; font-family:arial">
|
|
Created by Juyoung. Built this site while I was teaching myself HTML and CSS.
|
|
<hr/></div>
|
|
<a href="index.html">Click Here to go to first page</a><br>
|
|
<a href="secondhtml.html">Click Here to go to third page</a>
|
|
<h2>The border-collapse Property</h2>
|
|
<table class="one">
|
|
<caption>Collapse Border Example</caption>
|
|
<tr><td class="a"> Cell A Collapse Example</td></tr>
|
|
<tr><td class="b"> Cell B Collapse Example</td></tr>
|
|
</table>
|
|
<br/>
|
|
<table class="two">
|
|
<caption>Separate Border Example</caption>
|
|
<tr><td class="a"> Cell A Separate Example</td></tr>
|
|
<tr><td class="b"> Cell B Separate Example</td></tr>
|
|
</table>
|
|
|
|
<h2>The border-spacing Property</h2>
|
|
<table class="one" border="1">
|
|
<caption>Collapse Border Example with border-spacing</caption>
|
|
<tr><td> Cell A Collapse Example</td></tr>
|
|
<tr><td> Cell B Collapse Example</td></tr>
|
|
</table>
|
|
<br/>
|
|
<table class="two" border="1">
|
|
<caption>Separate Border Example with border-spacing</caption>
|
|
<tr><td> Cell A Separate Example</td></tr>
|
|
<tr><td> Cell B Separate Example</td></tr>
|
|
</table>
|
|
|
|
<h2>The caption-side Property</h2>
|
|
<table style="width:400px; border:1px solid black;">
|
|
<caption class="top">
|
|
This caption will appear at the top
|
|
</caption>
|
|
<tr><td> Cell A</td></tr>
|
|
<tr><td> Cell B</td></tr>
|
|
</table>
|
|
<br/>
|
|
<table style="width:400px; border:1px solid black;">
|
|
<caption class="bottom">
|
|
This caption will appear at the bottom
|
|
</caption>
|
|
<tr><td> Cell A</td></tr>
|
|
<tr><td> Cell B</td></tr>
|
|
</table>
|
|
<!-- pg.33 -->
|
|
|
|
<h2>The empty-cells Property</h2>
|
|
<table class="empty">
|
|
<tr>
|
|
<th></th>
|
|
<th>Title one</th>
|
|
<th>Title two</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Row Title</th>
|
|
<td class="empty">value</td>
|
|
<td class="empty">value</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Row Title</th>
|
|
<td class="empty">value</td>
|
|
<td class="empty">value</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h2>The table-layout Property</h2>
|
|
<table class="auto" border="1" width="100%">
|
|
<tr>
|
|
<td width="20%">1000000000000000000000000000</td>
|
|
<td width="40%">10000000</td>
|
|
<td width="40%">100</td></tr>
|
|
</table>
|
|
|
|
<h2>The border-style Property</h2>
|
|
<p><ul>
|
|
<li>none: No border. (Equivalent of border-width:0;)</li>
|
|
<li>solid: Border is a single solid line.</li>
|
|
<li>dotted: Border is a series of dots.</li>
|
|
<li>dashed: Border is a series of short lines.</li>
|
|
<li>double: Border is two solid lines.</li>
|
|
<li>groove: Border looks as though it is carved into the page.</li>
|
|
<li>ridge: Border looks the opposite of groove.</li>
|
|
<li>inset: Border makes the box look like it is embedded in the page.</li>
|
|
<li>outset: Border makes the box look like it is coming out of the canvas.</li>
|
|
<li>hidden: Same as none, except in terms of border-conflict resolution for table elements.</li>
|
|
</ul>
|
|
<p class="example1">This example is showing all borders in different colors.</p>
|
|
<p class="example2">This example is showing all borders in green color only.</p>
|
|
|
|
<p style="border-width:4px; border-style:none;">
|
|
This is a border with none width.</p>
|
|
<p style="border-width:10px; border-style:groove; border-color:red;">
|
|
This is a border with groove border.</p>
|
|
<p style="border-width:10px; border-style:inset; border-color:blue;">
|
|
This is a border with inset border.</p>
|
|
<p style="border-width:10px; border-style:dashed; border-color:green;">
|
|
This is a border with dashed border.</p>
|
|
<p style="border-bottom-style:dotted; border-bottom-color:red;
|
|
border-top-style:dashed; border-top-color:blue;
|
|
border-left-style:double; border-left-color:green;
|
|
border-right-style:inset; border-right-color:black;">
|
|
This is a border with different styles.</p>
|
|
|
|
|
|
<h2>The border-width Property</h2>
|
|
<p style="border-width:4px; border-style:solid;">
|
|
This is a solid border whose width is 4px.
|
|
</p>
|
|
<p style="border-width:4pt; border-style:solid;">
|
|
This is a solid border whose width is 4pt.
|
|
</p>
|
|
<p style="border-width:thin; border-style:solid;">
|
|
This is a solid border whose width is thin.
|
|
</p>
|
|
<p style="border-width:medium; border-style:solid;">
|
|
This is a solid border whose width is medium.
|
|
</p>
|
|
<p style="border-width:thick; border-style:solid;">
|
|
This is a solid border whose width is thick.
|
|
</p>
|
|
<p style="border-bottom-width:4px;
|
|
border-top-width:10px;
|
|
border-left-width:2px;
|
|
border-right-width:15px;
|
|
border-style:solid;">
|
|
This is a border with four different width.
|
|
</p>
|
|
|
|
<h2>Border Properties using shorthand</h2>
|
|
<p style="border:4px solid red;">
|
|
This example is showing shorthand property for border.
|
|
</p>
|
|
|
|
<h1>CSS - Margins</h1>
|
|
<ul>
|
|
<li>margin</li>
|
|
<li>margin-bottom</li>
|
|
<li>margin-top</li>
|
|
<li>margin-left</li>
|
|
<li>margin-right</li>
|
|
</ul>
|
|
<h2>The margin Property</h2> <!-- See Line 75 -->
|
|
<p style="margin: 15px; border:1px solid black;">
|
|
all four magins will be 15px
|
|
</p>
|
|
<p style="margin: 10px 2% -10px; border:1px solid black;">
|
|
top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document.
|
|
</p>
|
|
<p style="margin: 10px 2% -10px auto; border:1px solid black;">
|
|
top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser.
|
|
</p>
|
|
<br/>
|
|
<p style="margin: 1px -8px 1px -8px;
|
|
border-bottom-width:10px; border-top-width:10px; border-left-width:100px; border-right-width:400px;
|
|
border-style:solid; border-color:blue; background-color:white;
|
|
color:black; font-family:arial; font-size:16px">
|
|
Facebook Header Example with CSS Margin </p>
|
|
|
|
<h1>CSS - Lists (pg.43)</h1>
|
|
<ol><li>list-style-type: control shape or appearance of the marker</li>
|
|
<li>list-style-position</li>
|
|
<li>list-style-image</li>
|
|
<li>list-style</li>
|
|
<li><strike>marker-offset: specifies distance btw a marker and text in the list.</strike>-Not supported in IE6</li></ol>
|
|
<hr>
|
|
|
|
<h2>1.The list-style-type Property:</h2>
|
|
<p>list-style-type: 'disc' is default; a filed-in circle</p>
|
|
|
|
<ul style="list-style-type:circle;">
|
|
<li>Maths</li>
|
|
<li>Computer Science</li>
|
|
<li>English</li>
|
|
</ul>
|
|
|
|
<ul style="list-style-type:square;">
|
|
<li>Maths</li>
|
|
<li>Computer Science</li>
|
|
<li>English</li>
|
|
</ul>
|
|
|
|
<ol style="list-style-type:decimal;">
|
|
<li>Maths</li>
|
|
<li>Computer Science</li>
|
|
<li>English</li>
|
|
</ol>
|
|
|
|
<ol style="list-style-type:lower-alpha;">
|
|
<li>Maths</li>
|
|
<li>Computer Science</li>
|
|
<li>English</li>
|
|
</ol>
|
|
|
|
<ol style="list-style-type:lower-roman;">
|
|
<li>Maths</li>
|
|
<li>Computer Science</li>
|
|
<li>English</li>
|
|
</ol>
|
|
|
|
<hr>
|
|
<h2>2.The list-style-position Property:</h2>
|
|
<ul style="list-style-position:outside;">
|
|
<li>Maths</li>
|
|
<li>Computer Science</li>
|
|
<li>English</li>
|
|
</ul>
|
|
|
|
<ul style="list-style-position:inside;">
|
|
<li>Maths</li>
|
|
<li>Computer Science</li>
|
|
<li>English</li>
|
|
</ul>
|
|
|
|
<ol style="list-style-position:outside;">
|
|
<li>Maths</li>
|
|
<li>Computer Science</li>
|
|
<li>English</li>
|
|
</ol>
|
|
|
|
<ol style="list-style-position:inside;">
|
|
<li>Maths</li>
|
|
<li>Computer Science</li>
|
|
<li>English</li>
|
|
</ol>
|
|
|
|
<hr>
|
|
<h2>3.The list-style-image Property</h2>
|
|
<p>the <em>list-style-image</em> allows you to specify an image so that you can use your own bullet style.</p>
|
|
<hr>
|
|
<h2>4. The list-style Property</h2>
|
|
<p>The <em>list-style</em> allows you to specify all the list properties into a single expression.</p>
|
|
<strong>Example</strong></br>
|
|
|
|
<ul style='list-style: inside square;'>
|
|
<li>Maths</li>
|
|
<li>Computer Science</li>
|
|
<li>Korean</li>
|
|
</ul>
|
|
<hr>
|
|
|
|
<!-- page. 48 -->
|
|
|
|
<a href="secondhtml.html">Click Here to go to third page</a>
|
|
|
|
</body>
|
|
</html>
|