Βασικές εντολές CSS
Presentation
•
Computers
•
10th Grade
•
Practice Problem
•
Easy
Katerina Melissourgou
Used 23+ times
FREE Resource
8 Slides • 9 Questions
1
CSS μορφοποίηση
2
Γνωρίζοντας τα πρώτα στοιχεία της CSS
Η CSS είναι μία σχετικά απλή γλώσσα προγραμματισμού, αλλά θα πρέπει να μάθουμε τα βασικά της για να μπορέσουμε στην συνέχεια να προχωρήσουμε στην περεταίρω ανάλυση, έτσι θα δούμε πως φαίνεται γραμμένη η CSS, θα καταλάβουμε την διαφορά της απο την HTML και θα ανακαλύψουμε τους γενικούς επιλογείς (Element Selectors).
3
Γνωρίζοντας τα πρώτα στοιχεία της CSS
CSS = Cascading Style Sheets
Ελέγχει και Παραμετροποιεί το παρουσιαστικό της ιστοσελίδας
HTML
Ελέγχει και Παραμετροποιεί τον Βασικό σχεδιασμό της ιστοσελίδας
4
Multiple Choice
Η λέξη CSS είναι τα αρχικά των λέξεων:
Cascading Style Sheets
Cascading Style Page
5
Δείγμα Κώδικα CSS
1ο δείγμα
p {
font-size: 10px;
color: red;
}
2ο δείγμα
p {font-size:10px; color: red;}
Σημείωση: Και οι 2 τρόποι είναι σωστοί
p = Selector/Επιλογέας
{ } = Declaration/Δήλωση
font-size και color = Property/Ιδιότητα
10px και red = Value/Ορισμός
6
css
Η ιδιότητα CSS color ορίζει το χρώμα κειμένου που θα χρησιμοποιηθεί.
Η ιδιότητα CSS font-family καθορίζει τη γραμματοσειρά που θα χρησιμοποιηθεί.
Η ιδιότητα CSS font-size καθορίζει το μέγεθος κειμένου που θα χρησιμοποιηθεί.
h1 {
color: blue;
font-family: verdana;
font-size: 300px;
}
p {
color: red;
font-family: courier;
font-size: 160px;
}
χρωματα, γραμματοσειρές, μορφοποίηση κειμένου
7
Όταν ένας φυλλομετρητής διαβάσει CSS, τότε θα μορφοποιήσει το έγγραφο HTML σύμφωνα με τις οδηγίες που περιλαμβάνονται στο CSS.
Υπάρχουν τρεις τρόποι για να εισάγουμε μορφοποίηση css σε μια ιστοσελίδα:
External style sheet (εξωτερικό αρχείο .css)
Internal style sheet (css εντός του αρχείου html)
Inline style (ενσωματωμένο css)
Πως χρησιμοποιείται το css
8
Internal Style Sheet
Το internal style sheet ενδείκνυται να χρησιμοποιείται στην περίπτωση που μια μεμονωμένη ιστοσελίδα χρειάζεται να έχει ξεχωριστή μορφοποίηση.
Η μορφοποίηση με internal style sheet καθορίζεται εντός του html στοιχείου <style> το οποίο πρέπει να βρίσκεται στην κεφαλίδα (<head>) του εγγράφου html
Αυτό φαίνεται στο παράδειγμα που ακολουθεί:
9
Παράδειγμα
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Στο αρχείο αυτό χρησιμοποιήσαμε internal style sheet για να μορφοποιήσουμε το φόντο της σελίδας και mia παράγραφο της html.
Το αποτέλεσμα των παραπάνω γραμμών φαίνεται στην παρακάτω εικόνα:
10
Multiple Choice
Οι κανόνες CSS χρησιμοποιούνται για:
να προσθέσουν περιεχόμενο στη σελίδα
να μορφοποιήσουν τα στοιχεία της HTML στη σελίδα
11
Multiple Choice
Ποιος από τους παρακάτω κανόνες CSS αλλάζει τη γραμματοσειρά σε Courier
font-family:courier;
text-family:courier;
12
Multiple Choice
Στην css για να αλλάξω το χρώμα του background βάζω ?
background-color: purple;
background-color = "purple";
13
Multiple Choice
Η CSS χρησιμοποιείται για να ορίσω την εμφάνιση της σελίδας μου ?
Σωστό
Λάθος
14
Multiple Choice
Ποιά σύνταξη είναι η σωστή ;
body { color = black; }
body { color : black; }
15
Multiple Choice
Το στυλ p, h1 {...} εφαρμόζεται σε:
όλες τις παραγράφους και όλες τις επικεφαλίδες h1
όλες τις παραγράφους ή όλες τις επικεφαλίδες h1
16
Multiple Choice
Η ιδιότητα font-family αφορά:
μέγεθος γραμματοσειράς
τύπο γραμματοσειράς
17
Multiple Choice
Το στυλ ul {...} θα εφαρμοστεί:
σε αριθμημένες λίστες
σε μη αριθμημένες λίστες
CSS μορφοποίηση
Show answer
Auto Play
Slide 1 / 17
SLIDE
Similar Resources on Wayground
9 questions
Μαθηματικά Α Δημοτικού
Presentation
•
KG
16 questions
Ανάλυση και Σύνθεση δυνάμεων
Presentation
•
10th Grade
12 questions
ΜΗΧΑΝΙΚΗ ΜΑΘΗΣΗ ΤΑΧΥΔΡΟΜΟΣ ΜΑΞ
Presentation
•
10th Grade
11 questions
CSS селекторы
Presentation
•
10th Grade
11 questions
Ο κύκλος ζωής της πεταλούδας
Presentation
•
KG
15 questions
OHS Policies and Procedures
Presentation
•
11th Grade
14 questions
Building and Maintaining a Website
Presentation
•
9th - 12th Grade
16 questions
Q3 G9 WEEK 2 DAY 1 CSS
Presentation
•
9th Grade
Popular Resources on Wayground
28 questions
US History Regents Review
Quiz
•
11th Grade
36 questions
Biology Regents Review
Quiz
•
9th - 10th Grade
20 questions
Math Review
Quiz
•
3rd Grade
38 questions
Regents Life Science General Review
Quiz
•
9th Grade
20 questions
Math Review
Quiz
•
6th Grade
21 questions
EOY Grade 6 Benchmark Assessment - Content Skills
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
20 questions
Figurative Language Review
Quiz
•
6th Grade
Discover more resources for Computers
36 questions
Biology Regents Review
Quiz
•
9th - 10th Grade
45 questions
Earth and Space Science Regents: Exam Cram
Presentation
•
7th - 12th Grade
36 questions
NYS Biology Regents Exam: Word on the Street
Quiz
•
10th Grade
50 questions
Global Regents Review 1
Quiz
•
10th Grade
50 questions
Earth Science Regents Review
Quiz
•
10th Grade
50 questions
US History Comprehensive Final Exam
Quiz
•
9th - 12th Grade
16 questions
TSI Math 2.0 Practice
Quiz
•
9th Grade - University
50 questions
Global Regents Review #2- Multiple Choice
Quiz
•
10th Grade