Css 2

Κιάζεηο
• Με έναν CSS επιλογέα πρέπει να μπορούμε να

ανθερθούμε ζε οποιοδήποηε ζεη από ζηοιχεία.
• Μέρξη ηώξα κάζακε επηινγείο HTML
• Γηα παξάδεηγκα
• p { font-size: 10px; }
• table { border: 1px solid black }
• Όκσο ΔΕΝ είλαη αξθεηνί

Κιάζεηο
<html>
<head>
<style>
/*???????*/
</style>
</head>
<body>
<p>Red paragraph</p>
<p>Blue paragraph</p>
</body>
</html>
Κιάζεηο
• Oκαδνπνηνύλ νκνεηδή ζηνηρεία κε ζθνπό λα εθαξκνζηεί
θνηλό ζηπι
• Μπαίλνπλ σο ιδιόηηηα ζηηο εηηθέηεο
class=“className”
• Παξάδεηγκα
• <p class=“first”>I am a red paragraph</p>
• <p class=“second”>I am a blue paragraph</p>
Κιάζεηο
• Αλαθεξόκαζηε ζηα ζηνηρεία θιάζεο κε
.className { … }
.menu { color: red; }
• Σεκαίλεη: Βάιε ρξώκα γξακκαηνζεηξάο θόθθηλν ζε όια ηα

ζηνηρεία πνπ έρνπλ class=“menu”
Κιάζεηο
• Έλα όλνκα θιάζεο πξέπεη λα ππάθνύεη ζηνπο εμήο
θαλόλεο:
• Ο πξώηνο ραξαθηήξαο κπνξεί λα είλαη παύια (-) ή ηίπνηα
• Ο δεύηεξνο ραξαθηήξαο κπνξεί λα είλαη:
• Κάησ παύια (_)
• Λαηηληθόο ραξαθηήξαο a-z θαη Α-Ζ
• Από ηνλ ηξίην ραξαθηήξα θαη κεηά κπνξεί λα είλαη νπνηνζδήπνηε
ζπλδπαζκόο παύιαο, θάησ παύιαο, ραξαθηήξα ή αξηζκνύ
• Σηην ππαγμαηικόηηηα ένα έγκςπο όνομα κλάζηρ μποπεί να έσει κι άλλερ

μοπθέρ πος σπηζιμοποιούνηαι εξαιπεηικά ζπάνια αν όσι καθόλος
Κιάζεηο
• Πνηα από απηά είλαη έγθπξα;
• --foo ΑΚΥΡΟ
• _42_ ΕΓΚΥΡΟ
• thisIsSomeReallyLongLongClassName ΕΓΚΥΡΟ
• -.- ΑΚΥΡΟ
• O_O ΕΓΚΥΡΟ
• 8bit ΑΚΥΡΟ
• -_-_----_--_ ΕΓΚΥΡΟ
Κιάζεηο
<html>
<head>
<style>
.first { color: red; }
.second { color: blue; }
</style>
</head>
<body>
<p class=“first”>Red paragraph</p>
<p class=“second”>Blue paragraph</p>
</body>
</html>
Red paragraph
Blue paragraph
Κιάζεηο & IDs
• Μία θιάζε κπνξεί λα εθαξκνζηεί ζε πνιιά ζηνηρεία
• Έλα ζηνηρείν κπνξεί λα έρεη πνιιέο θιάζεηο
<p class=“foo bar”>
I belong to class foo and class bar
</p>
Κλάζεις IDs
HTML class=“foo” id=“foo”
Επανάληψη Ναη Όχι
CSS .foo #foo
Παξάδεηγκα
<html>
<head>
<style>
#intro { color: red; }
#outro { color: blue; }
</style>
</head>
<body>
<p id=“intro”>Red paragraph</p>
<p id=“outro”>Blue paragraph</p>
</body>
</html>
Σπλδπαζκνί HTML & Class selectors
p.center { text-align: center; }
• Δπηιέγεη όια ηα p πνπ έρνπλ ηελ θιάζε center
p.center.important {
text-align: center;
font-size: 24pt;
}
• Δπηιέγεη όια ηα p πνπ έρνπλ ηελ θιάζε center ΚΑΙ ηελ θιάζε
important
Δκθώιεπζε επηινγέσλ
• Μπνξνύκε λα εθαξκόζνπκε έλαλ επηινγέα ζε έλαλ άιιν
επηινγέα.
• Σσζηά δνκεκέλν HTML/CSS  Πεξηνξηζκέλεο θιάζεηο/ID

<ul>
<li>cat</li>
<li>dog</li>
<li>frog</li>
</ul>
<ul>
<li>pencil</li>
<li>pen</li>
<li>eraser</li>
</ul>
• Φσξίο εκθώιεπζε: Δθαξκόδνπκε κηα θιάζε ζε θάζε
ζηνηρείν ηεο θάζε ιίζηαο
<ul>
<li class=“animal”>cat</li>
<li class=“animal”>dog</li>
<li class=“animal”>frog</li>
</ul>
<ul>
<li class=“cocktail”>mojito</li>
<li class=“cocktail”>bloody mary</li>
<li class=“cocktail”>caipirinha</li>
</ul>
• Καη γξάθνπκε ην αληίζηνηρν CSS
li.animal {
border: 1px solid blue;
}
li.cocktail {
border: 1px solid red;
}
<ul id=“animals”>
<li>cat</li>
<li>dog</li>
<li>frog</li>
</ul>
<ul id=“cocktails”>
<li>mojito</li>
<li>bloody mary</li>
<li>caipirinha</li>
</ul>
• Τόηε ην αληίζηνηρν CSS γίλεηαη:
#animals li {
border: 1px solid blue;
}
#cocktails li {
border: 1px solid red;
}
Οκαδνπνίεζε επηινγέσλ
• Πνιινί επηινγείο κε θνηλέο ηδηόηεηεο  Έλαο
νκαδνπνηεκέλνο επηινγέαο
• Οη επηκέξνπο επηινγείο ρσξίδνληαη κε θόκκαηα

Οκαδνπνίεζε επηινγέσλ
• Παξάδεηγκα:
p {
color: red;
}
.foo {
color: red;
}
• Τν παξαπάλσ κπνξεί λα γξαθηεί:
p, .foo {
color: red;
}
Pop quiz
Τη επηιέγνπλ;
.foo .bar
.foo.bar
.foo, .bar
.foo,.bar
p.koko
div#lala.liruliru
div.liruliru#lala
ul li
div li
Χεπδνθιάζεηο
• Αλαθεξόκαζηε ζηελ θαηάζηαζε ελόο ζηνηρείνπ
:link links πνπ δελ έρνπλ επηζθεθηεί

:visited links πνπ έρνπλ επηζθεθηεί
:active Δλεξγό ζηνηρείν
:hover Σηνηρείν θάησ από ην πνληίθη
<a href=“home.html”>Home</a>
+
a:hover { background-color: yellow; }
• :active
:visited
:link
:link
:visited
:visited
:link
:link
Σπληνκνγξαθίεο
• Σπκπηύζζνπλ πνιιέο ηδηόηεηεο ζε κία ηδηόηεηα
• border: 1px solid black;
↕
• border-width: 1px;
• border-style: solid;
• border-color: black;
• padding: 1px 2px 3px;
↕
• padding-top: 1px;
• padding-right: 2px;
• padding-bottom: 3px;
• padding-left: 2px;
• border-width: 1px 2px;
↕
• border-top-width: 1px;
• border-right-width: 2px;
• border-bottom-width: 1px;
• border-left-width: 2px;
• border-width: 1px 4px 8px 16px;
↕
• border-top-width: 1px;
• border-right-width: 4px;
• border-bottom-width: 8px;
• border-left-width: 16px;
• border-style: solid dotted dashed none;
↕
• border-top-style: solid;
• border-right-style: dotted;
• border-bottom-style: dashed;
• border-left-style: none;
• border-color: red green blue black;
↕
• border-top-color: red;
• border-right-color: green;
• border-bottom-color: blue;
• border-left-color: black;
προαιρεηικά
• font: bold normal italic 24px Verdana, sans-serif;
font-variant font-size font-family

font-weight font-style
Δηθόλεο θόληνπ
• Δθαξκόδεηαη ζηελ πεξηνρή εζσηεξηθά ηνπ border
(ζπκπεξηιακβάλεηαη ε πεξηνρή ηνπ padding)
• Σρεδηάδνληαη πάλσ ζην νξηζκέλν background-color
• Μπνξεί λα είλαη αξρείν JPG, GIF, PNG
• Οη ζρεηηθέο δηεπζύλζεηο εηθόλσλ ζρεηίδνληαη κε ηε
δηεύζπλζε ηνπ αξρείνπ CSS
• background-image: url( „foo.png‟ );
• Φξεζηκνπνηεί γηα θόλην ηελ εηθόλα foo.png
• Μπνξεί λα είλαη απόιπηε ή ζρεηηθή δηεύζπλζε
• background-repeat
• Οξίδεη αλ ζα επαλαιακβάλεηαη ην θόλην
• Μπνξεί λα πάξεη ηηκέο:

• repeat (προεπιλογή) θάζεηε θαη νξηδόληηα επαλάιεςε
• repeat-y θάζεηε επαλάιεςε
• repeat-x νξηδόληηα επαλάιεςε
• no-repeat εκθάληζε κία θνξά
• background-position
• Οξίδεη ηελ ζέζε ηνπ θόληνπ ζην πιαίζην ηνπ ζηνηρείνπ
• Από απηή ηε ζέζε αξρίδεη ε επαλάιεςε
• Μπνξεί λα πάξεη ηηκέο:

• [left|center|right] [top|center|bottom]
• Ζ ζεηξά δεν έχει ζεκαζία
• <απόσταση από αριστερά> <απόσταση από πάνω>
• Ζ ζεηξά έχει ζεκαζία.
• Παξάδεηγκα:
• background-position: center top;
• background-position: 20px 30px;
Τππνγξαθία
• line-height
• Οξίδεη ην ύςνο ηεο γξακκήο ζε έλα θείκελν
• line-height: normal; line-height: 20pt;

• letter-spacing
• Οξίδεη ηελ απόζηαζε κεηαμύ ησλ γξακκάησλ
• letter-spacing: normal; letter-spacing: 3px;

• word-spacing
• Οξίδεη ηελ απόζηαζε κεηαμύ ησλ ιέμεσλ
• word-spacing: normal; word-spacing: 10px;

• font-variant
• Οξίδεη αλ ην θείκελν ζα είλαη small-caps ή normal
• font-variant: normal; font-variant: small-caps;

Ηδηόηεηεο ιίζηαο
• list-style-type
• Οξίδεη ηνλ ηύπν ζεκαδηνύ ή ην ζύζηεκα αξίζκεζεο
• Κάπνηεο από ηηο ηηκέο:
• disc (πξνεπηινγή ζηα ul)
• circle
• square
• decimal 1. 2. 3. … (πξνεπηινγή ζηα ol)
• lower-roman i ii iii …
• upper-roman I II III …
• lower-greek αβγ…
• lower-latin abc…
• armenian ԱԲԳ…
• none Γελ εκθαλίδεη θάπνην ζεκάδη
• list-style-position
• Οξίδεη αλ ηα ζεκάδηα ηεο ιίζηαο είλαη έμσ ή κέζα από ην
πιαίζην
border: 1px solid black; border: 1px solid black;

list-style-position: outside; list-style-position: inside;
• list-style-image
• Οξίδεη κηα εηθόλα σο ζεκάδη ηεο ιίζηαο
list-style-image: url( 'sqpurple.gif' );

• list-style
• Σπληνκνγξαθία ησλ ηξηώλ πξνεγνύκελσλ ηδηόηήησλ
list-style: square url( „icon.gif‟ ) inside;
list-style-type list-style-image list-style-position
• Ζ ζεηξά δεν έχει ζεκαζία

• Οπνηνδήπνηε κπνξεί λα παξαιεθζεί
Πεξηγξάκκαηα πίλαθα
• border-collapse
• Οξίδεη αλ ηα πιαίζηα ησλ θειηώλ ελόο πίλαθα ζα
επηθαιύπηνληαη ή όρη
• Δθαξκόδεηαη ζην <table>
• border-collapse: separate; (πξνεπηινγή)
• border-collapse: collapse;
Κέξζνξεο
• cursor
• Οξίδεη ηνλ θέξζνξα ηνπ πνληηθηνύ πάλσ από θάπνην
ζηνηρείν
• Κάπνηεο από ηηο ηηκέο ηνπ:
• auto Ανάλογα ηην πεπίζηαζη (προεπιλογή)
• pointer
• crosshair
• move
• wait
• help
• progress
• default

Css 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css 2

Uploaded by

Copyright:

Available Formats

Κιάζεηο

• Με έναν CSS επιλογέα πρέπει να μπορούμε να

• Όκσο ΔΕΝ είλαη αξθεηνί

.menu { color: red; }

• Σεκαίλεη: Βάιε ρξώκα γξακκαηνζεηξάο θόθθηλν ζε όια ηα

• Σηην ππαγμαηικόηηηα ένα έγκςπο όνομα κλάζηρ μποπεί να έσει κι άλλερ

• Σσζηά δνκεκέλν HTML/CSS  Πεξηνξηζκέλεο θιάζεηο/ID

• Οη επηκέξνπο επηινγείο ρσξίδνληαη κε θόκκαηα

:link links πνπ δελ έρνπλ επηζθεθηεί

• font: bold normal italic 24px Verdana, sans-serif;

font-variant font-size font-family

• Μπνξεί λα πάξεη ηηκέο:

• Μπνξεί λα πάξεη ηηκέο:

• line-height: normal; line-height: 20pt;

• letter-spacing: normal; letter-spacing: 3px;

• word-spacing: normal; word-spacing: 10px;

• font-variant: normal; font-variant: small-caps;

border: 1px solid black; border: 1px solid black;

list-style-image: url( 'sqpurple.gif' );

list-style: square url( „icon.gif‟ ) inside;

list-style-type list-style-image list-style-position

• Ζ ζεηξά δεν έχει ζεκαζία

You might also like