Βασικές εντολές CSS

Presentation

•

Computers

•

10th Grade

•

Practice Problem

•

Easy

Katerina Melissourgou

Used 23+ times

FREE Resource

8 Slides • 9 Questions

CSS μορφοποίηση

Γνωρίζοντας τα πρώτα στοιχεία της CSS

Η CSS είναι μία σχετικά απλή γλώσσα προγραμματισμού, αλλά θα πρέπει να μάθουμε τα βασικά της για να μπορέσουμε στην συνέχεια να προχωρήσουμε στην περεταίρω ανάλυση, έτσι θα δούμε πως φαίνεται γραμμένη η CSS, θα καταλάβουμε την διαφορά της απο την HTML και θα ανακαλύψουμε τους γενικούς επιλογείς (Element Selectors).

Γνωρίζοντας τα πρώτα στοιχεία της CSS

CSS = Cascading Style Sheets

Ελέγχει και Παραμετροποιεί το παρουσιαστικό της ιστοσελίδας

HTML

Ελέγχει και Παραμετροποιεί τον Βασικό σχεδιασμό της ιστοσελίδας

Multiple Choice

Η λέξη CSS είναι τα αρχικά των λέξεων:

Cascading Style Sheets

Cascading Style Page

Δείγμα Κώδικα 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/Ορισμός

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;
}

χρωματα, γραμματοσειρές, μορφοποίηση κειμένου

Όταν ένας φυλλομετρητής διαβάσει CSS, τότε θα μορφοποιήσει το έγγραφο HTML σύμφωνα με τις οδηγίες που περιλαμβάνονται στο CSS.
Υπάρχουν τρεις τρόποι για να εισάγουμε μορφοποίηση css σε μια ιστοσελίδα:

External style sheet (εξωτερικό αρχείο .css)
Internal style sheet (css εντός του αρχείου html)
Inline style (ενσωματωμένο css)

Πως χρησιμοποιείται το css

Internal Style Sheet

Το internal style sheet ενδείκνυται να χρησιμοποιείται στην περίπτωση που μια μεμονωμένη ιστοσελίδα χρειάζεται να έχει ξεχωριστή μορφοποίηση.

Η μορφοποίηση με internal style sheet καθορίζεται εντός του html στοιχείου <style> το οποίο πρέπει να βρίσκεται στην κεφαλίδα (<head>) του εγγράφου html

Αυτό φαίνεται στο παράδειγμα που ακολουθεί:

Παράδειγμα

<!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.
Το αποτέλεσμα των παραπάνω γραμμών φαίνεται στην παρακάτω εικόνα:

Multiple Choice

Οι κανόνες CSS χρησιμοποιούνται για:

να προσθέσουν περιεχόμενο στη σελίδα

να μορφοποιήσουν τα στοιχεία της HTML στη σελίδα

Multiple Choice

Ποιος από τους παρακάτω κανόνες CSS αλλάζει τη γραμματοσειρά σε Courier

font-family:courier;

text-family:courier;

Multiple Choice

Στην css για να αλλάξω το χρώμα του background βάζω ?

background-color: purple;

background-color = "purple";

Multiple Choice

Η CSS χρησιμοποιείται για να ορίσω την εμφάνιση της σελίδας μου ?

Σωστό

Λάθος

Multiple Choice

Ποιά σύνταξη είναι η σωστή ;

body { color = black; }

body { color : black; }

Multiple Choice

Το στυλ p, h1 {...} εφαρμόζεται σε:

όλες τις παραγράφους και όλες τις επικεφαλίδες h1

όλες τις παραγράφους ή όλες τις επικεφαλίδες h1

Multiple Choice

Η ιδιότητα font-family αφορά:

μέγεθος γραμματοσειράς

τύπο γραμματοσειράς

Multiple Choice

Το στυλ ul {...} θα εφαρμοστεί:

σε αριθμημένες λίστες

σε μη αριθμημένες λίστες

CSS μορφοποίηση

Show answer

Auto Play

Slide 1 / 17

SLIDE

Similar Resources on Wayground

10 questions

Πληθωρισμός

Lesson

•

10th Grade

12 questions

JavaScript Использование скриптов Алишев Асхат Талгатович

Lesson

•

10th Grade

15 questions

ICT 10 2nd Quarter Review

Lesson

•

10th Grade

16 questions

Termien selityksiä

Lesson

•

10th Grade

11 questions

ΒΑΣΕΩΣΦΑΙΡΙΣΗ[BASE -BALL]

Lesson

•

10th Grade

11 questions

Ο κύκλος ζωής της πεταλούδας

Lesson

•

15 questions

Κεφ 3 Αλγόριθμοι

Lesson

•

11th Grade

14 questions

Física 10.ºAno

Lesson

•

10th Grade

Popular Resources on Wayground

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

10 questions

Probability Practice

Quiz

•

4th Grade

15 questions

Probability on Number LIne

Quiz

•

4th Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

$fractions$

22 questions

fractions

Quiz

•

3rd Grade

6 questions

Appropriate Chromebook Usage

Lesson

•

7th Grade

10 questions

Greek Bases tele and phon

Quiz

•

6th - 8th Grade

Discover more resources for Computers

10 questions

Exploring Digital Citizenship Essentials

Interactive video

•

6th - 10th Grade

14 questions

[AP CSP] JavaScript Programming Quiz

Quiz

•

9th - 12th Grade

10 questions

Understanding Computers and Computer Engineering

Interactive video

•

7th - 12th Grade

37 questions

Python - Tuples, Lists, and List Methods

Quiz

•

9th - 12th Grade