170 lines
6.1 KiB
HTML
Executable file
170 lines
6.1 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>Second HTML Page</title>
|
|
<meta charset="UTF-8">
|
|
<link href="/_img/_juyounglee.tk/favicon.ico" rel="icon" type="image/x-icon"/>
|
|
<style type="text/css">
|
|
a:link {color: #000000}
|
|
a:visited {color: #006600}
|
|
a:hover {color: #ffcc00}
|
|
a:active {color: #ff00cc} /* See "Links" on index.html*/
|
|
*{font-size: 20px;}
|
|
|
|
|
|
.scroll{
|
|
display:block;
|
|
border: 1px solid red;
|
|
padding:5px;
|
|
margin-top:5px;
|
|
width:300px;
|
|
height:50px;
|
|
overflow:scroll;
|
|
}
|
|
.auto{
|
|
display:block;
|
|
border: 1px solid red;
|
|
padding:5px;
|
|
margin-top:5px;
|
|
width:300px;
|
|
height:50px;
|
|
overflow:auto;
|
|
}
|
|
/* CSS - Scrollbars */
|
|
</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="newhtml.html">Click Here to go to second page</a>
|
|
<!-- pg.48 -->
|
|
<h2>CSS - Paddings</h2>
|
|
<p>allows you to specify how much space should appear btw the content of an element and its border</p>
|
|
<ul><li>the <strong>padding-bottom</strong></li>
|
|
<li>the <strong>padding-top</strong></li>
|
|
<li>the <strong>padding-left</strong></li>
|
|
<li>the <strong>padding-right</strong></li>
|
|
</ul>
|
|
<h3>the padding property</h3>
|
|
<p style="padding: 15px; border: 1px solid black;">all four padding will be 15px</p>
|
|
|
|
<p style="padding:10px 2% 10px; border:1px solid green">
|
|
top padding will be 10px, left/right padding will be 2% of the total width of the document, bottom padding will be 10px
|
|
</p>
|
|
|
|
<p style="padding:50px 30% 20px 20px ; border:2px solid red">
|
|
top 50px, right 30% width of the document, bottom/top 20px
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<h1>CSS - Cursors</h1>
|
|
<!-- pg.51 -->
|
|
<p>Move the mouse over the words to see the cursor change;</p>
|
|
<div style="cursor:auto">Auto</div>
|
|
<div style="cursor:crosshair">Crosshair</div>
|
|
<div style="cursor:default">Default</div>
|
|
<div style="cursor:pointer">Pointer</div>
|
|
<div style="cursor:move">Move</div>
|
|
<div style="cursor:e-resize">e-resize</div>
|
|
<div style="cursor:ne-resize">ne-resize</div>
|
|
<div style="cursor:nw-resize">nw-resize</div>
|
|
<div style="cursor:n-resize">n-resize</div>
|
|
<div style="cursor:se-resize">se-resize</div>
|
|
<div style="cursor:sw-resize">sw-resize</div>
|
|
<div style="cursor:s-resize">s-resize</div>
|
|
<div style="cursor:w-resize">w-resize</div>
|
|
<div style="cursor:text">text</div>
|
|
<div style="cursor:wait">wait</div>
|
|
<div style="cursor:help">help</div>
|
|
|
|
|
|
<h2>CSS - Outlines</h2>
|
|
<ul><li>The<strong> outline-width</strong></li>
|
|
<li>The<strong> outline-style</strong></li>
|
|
<li>The<strong> outline-color</strong></li>
|
|
<li>The<strong> outline</strong></li></ul>
|
|
<br>
|
|
<p style="outline:thin solid red;">
|
|
This text is having thin solid red outline.
|
|
</p>
|
|
<br />
|
|
<p style="outline:thick dashed #009900;">
|
|
This text is having thick dashed green outline.
|
|
</p>
|
|
<br />
|
|
<p style="outline:5px dotted rgb(13,33,232);
|
|
border:5px solid red; box-shadow:inset 0 2px 45px #999;">
|
|
This text is having 5x dotted blue outline.
|
|
</p>
|
|
|
|
<hr>
|
|
<h2>CSS - Dimension</h2>
|
|
<ul style="list-style-type:circle;"><li>height</li>
|
|
<li>width</li>
|
|
<li>line-height</li>
|
|
<li>max-height</li>
|
|
<li>min-height</li>
|
|
<li>max-width</li>
|
|
<li>min-width</li></ul>
|
|
|
|
<h3>1) the line-height property</h3>
|
|
<p style="width:400px; height:100px;border:1px solid red;
|
|
padding:5px; margin:10px;line-height:30px;">
|
|
This paragraph is 400pixels wide and 100 pixels high
|
|
and here line height is 30pixels.This paragraph is 400 pixels
|
|
wide and 100 pixels high and here line height is 30pixels.
|
|
</p>
|
|
|
|
<h3>2) the max-height property</h3>
|
|
<p style="width:400px; max-height:10px;border:1px solid red;
|
|
padding:5px; margin:10px;">
|
|
This paragraph is 400px wide and max height is 10px
|
|
This paragraph is 400px wide and max height is 10px
|
|
This paragraph is 400px wide and max height is 10px
|
|
This paragraph is 400px wide and max height is 10px
|
|
</p>
|
|
<img alt="logo" src="/images/css.gif" width="95" height="84" />
|
|
|
|
<h3>3) the min-height property</h3>
|
|
<p style="width:400px; min-height:200px;border:1px solid red;
|
|
padding:5px; margin:10px;">
|
|
This paragraph is 400px wide and min height is 200px
|
|
This paragraph is 400px wide and min height is 200px
|
|
This paragraph is 400px wide and min height is 200px
|
|
This paragraph is 400px wide and min height is 200px
|
|
</p>
|
|
<img alt="logo" src="/images/css.gif" width="95" height="84" />
|
|
|
|
<!-- http://www.tutorialspoint.com/css/css_dimension.htm -->
|
|
|
|
<br/>
|
|
<hr>
|
|
<h1>CSS - Scrollbars</h1>
|
|
<p>Example of scroll value:</p>
|
|
<div class="scroll">
|
|
I am going to keep lot of content here just to show
|
|
you how scrollbars works if there is an overflow in
|
|
an element box. This provides your horizontal as well
|
|
as vertical scrollbars.
|
|
</div>
|
|
<br />
|
|
<p>Example of auto value:</p>
|
|
<div class="auto">
|
|
I am going to keep lot of content here just to show
|
|
you how scrollbars works if there is an overflow in
|
|
an element box. This provides your horizontal as well
|
|
as vertical scrollbars.
|
|
</div>
|
|
|
|
<!-- You just finished Tutorial for CSS!!
|
|
Date: 12/13/2013 1:30AM -->
|
|
</body>
|
|
</html>
|