Css 2c (2) (1) (1) (2)

<!DOCTYPE html>
<html>
<head>
<style>
a {
color: red;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>
προορισμος
Λεξη που θα
κανουμε κλικ
πανω της
Ετικετα
υπερσυνδεσμου

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
text-decoration: none;
background-color: yellow;
}
/* mouse over link */
a:hover{
color: hotpink;
text-decoration: underline;
background-color: lightgreen;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
Όταν το ποντικι παει πανω
στο λινκ
Όταν το ποντικι κανει κλικ
πανω στο λινκ

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: green; χρώμα πλαισίου όταν δεν πηγαίνει το ποντίκι πάνω του
color: white;
padding: 34px 25px; Διαστάσεις πλαισίου
text-align: center;
display: inline-block;
}
a:hover, a:active {
background-color: red; χρώμα πλαισίου όταν πηγαίνει το ποντίκι πάνω του
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
14-2-γπ

• https://www.w3schools.com/css/css_link.asp

Navigation bar
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>Note: We use href="#" for test links. In a real web site this would
be URLs.</p>
</body>
</html>

let's remove the bullets and the
margins and padding from the list:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>In this example, we remove the bullets from the list, and its default padding and margin.</p>
<ul>
</ul>
</body>
</html>
ΒΓΑΖΩ ΤΙΣ ΚΟΥΚΚΙΔΕΣ ΑΠΌ
ΤΗΝ ΛΙΣΤΑ

Vertical Navigation Bar
To build a vertical navigation bar, you can style
the <a> elements inside the list, in addition to
the code above:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
ΔΗΜΙΟΥΡΓΩ ΈΝΑ ΓΚΡΙΖΟ
ΜΠΛΟΚ ΠΙΣΩ ΑΠΌ ΤΑ ΣΤΟΙΧΕΙΑ
ΤΗΣ ΛΙΣΤΑΣ-ΥΠΕΡΣΥΝΔΕΣΜΟΥΣ

• You can also set the width of <ul>, and remove
the width of <a>, as they will take up the full
width available when displayed as block
elements. This will produce the same result as
our previous example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
</style>
</head>
<body>
<ul>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>

• Create a basic vertical navigation bar with a
gray background color and change the
background color of the links when the user
moves the mouse over them:

• ul {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
ΌΤΑΝ ΤΟ ΠΟΝΤΙΚΙ
ΠΑΕΙ ΠΑΝΩ ΣΤΟΝ
ΣΥΝΔΕΕΣΜΟ
ΑΛΛΑΖΕΙ ΧΡΩΜΑ

Active/Current Navigation Link
Add an "active" class to the current link to let the user know which page
he/she is on:
• https://www.w3schools.com/css/css_navbar.a
sp

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
color: white;
}
</style>
</head>
DEIXNEI POY ΕΙΜΑΣΤΕ

SE MEGETHYNSH
<ul>
<li><a class="active"
href="#home">Home</a></li>
</ul>

ΚΝΤΡΑΡΙΣΜΑ ΣΥΝΔΕΣΜΩΝ ΚΑΙ
ΠΡΟΣΘΕΣΗ Borders

ΠΡΟΣΘΕΤΟΥΜΕ ΤΟ text-align:center ΣΤΟ <li> Ή ΣΤΟ <a> ΓΙΑ ΝΑ
ΚΕΝΤΡΑΡΟΥΜΕ ΤΟΥΣ ΣΥΝΔΕΣΜΟΥΣ
ΠΡΟΣΘΕΤΟΥΜΕ ΤΗΝ ΙΔΙΟΤΗΤΑ border ΣΤΟ <ul>
• ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
center the links
border around the navbar
border-bottom to all <li>
elements, except for the last one:

Full-height Fixed Vertical Navbar

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
width: 200px;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
<body>
<h2>Vertical Navigation Bar</h2>
<p>In this example, we center the navigation
links and add a border to the navigation
bar.</p>
<ul>
</ul>
</body>
</html>
21-2-GPE

<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
width: 25%;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
}
li a.active {
color: white;
}
color: white;
}
</style>
</head>
<body>
<ul>
</ul>
<div style="margin-left:25%;padding:1px
16px;height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the
sidenav sticks to the page</h3>
<p>Notice that this div element has a left
margin of 25%. This is because the side
navigation is set to 25% width. If you remove
the margin, the sidenav will overlay/sit on top
of this div.</p>
<p>Also notice that we have set
overflow:auto to sidenav. This will add a
scrollbar when the sidenav is too long (for
example if it has over 50 links inside of it).</p>
<p>Some text..</p>

Inline List Items
• One way to build a horizontal navigation bar
is to specify the <li> elements as inline, in
addition to the "standard" code above:
li {
display: inline;
}

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
}
li {
display:inline;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>

• Another way of creating a horizontal navigation bar is
to float the <li> elements, and specify a layout for the
navigation links:
li {
float: left;
}
a {
display: block;
padding: 8px;
}
•padding: 8px; - Since block elements take up the full width available,
they cannot float next to each other.
•Therefore, specify some padding to make them look good
•float: left; - use float to get
block elements to slide next to each
other
display: block; - Displaying the
links as block elements makes the
whole link area clickable (not just t
text), and it allows us to specify
padding (and height, width, margin
etc. if you want

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>

</style>
</head>
<body>
<ul>
<li><a
href="#news">News</a></li>
<li><a
href="#contact">Contact</a></li
>
<li><a
href="#about">About</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
/* Change the link color to #111 (black) on
hover */
li a:hover {

Active/Current Navigation Link
• https://www.w3schools.com/css/css_navbar.a
sp
.active {
}

<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>

Right-Align Links
• Right-align links by floating the list items to
the right (float:right;):

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
<li style="float:right"><a class="active"
</ul>
</body>
</html>

Border Dividers
• Add the border-right property to <li> to create
link dividers:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
}
}
.active {
}
</style>
</head>
<body>
<ul>
<li style="float:right"><a
</ul>
</body>
</html>

Gray Horizontal Navbar
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
}
background-color: #ddd;
}
li a.active {
color: white;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
Βγαζω το
border-right
Δεν υπαρχει
li:last-child

Dropdowns
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to
open the dropdown content.</p>
<div class="dropdown">
<span style="color:blue">Mouse over
me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
used to color a part of a text

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px
rgba(0,0,0,0.2);
z-index: 1;
}
<body>
<h2>Dropdown Menu</h2>
<p>Move the mouse over the
button to open the dropdown
menu.</p>
<div class="dropdown">
<button
class="dropbtn">Dropdown</b
utton>
<div class="dropdown-
content">
<a href="#">Link 1</a>
</div>
</div>
<p><strong>Note:</strong> We
use href="#" for test links. In a
real web site this would be
URLs.</p>
</body>
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
.dropdown-content a:hover
{background-color: #f1f1f1}
.dropdown:hover
.dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color:
#3e8e41;
}
</style>
</head>

<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>CSS Buttons</h2>
<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button"
value="Input Button">
</body>
</html>

<head>
<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Please Enter Your Password',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "letmein") {
alert('You Got it Right!');
window.open('https://gtutor2.weebly.com/user0.htm
l');
break;
}
testV+=1;
var pass1 =
prompt('Access Denied - Password Incorrect, Please
Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<body>
<h2>CSS Buttons</h2>
<CENTER>
<FORM>
</FORM>
</CENTER>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>

<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>
<button class="button">Green</button>
<button class="button button2">Blue</button>
</body>
</html>

Button Sizes
https://www.w3schools.com/css/css3_
buttons.asp

Css 2c (2) (1) (1) (2)

More Related Content

What's hot (20)

Similar to Css 2c (2) (1) (1) (2) (20)

Recently uploaded (20)

Css 2c (2) (1) (1) (2)