14 Ιουνίου, 2025

Ανάπτυξη Front-end

Διαμόρφωση της ιστοσελίδας σας με CSS: Η δύναμη του σχεδιασμού

18 Μαΐου, 2023

Το CSS είναι αυτό που κάνει μια ιστοσελίδα να φαίνεται όμορφη…

css

Σε αυτήν την ανάρτηση, θα ρίξουμε μια πιο προσεκτική ματιά στο CSS και τον ρόλο του στην ανάπτυξη web front-end. Θα ξεκινήσουμε εξερευνώντας τη σύνταξη του CSS, συμπεριλαμβανομένων των επιλογέων και των ιδιοτήτων, και στη συνέχεια θα μάθουμε πώς να χρησιμοποιούμε το CSS για το στυλ διαφόρων στοιχείων μιας σελίδας HTML. Θα καλύψουμε επίσης ορισμένα κοινά μοτίβα σχεδίασης και βέλτιστες πρακτικές για τη σύνταξη διατηρήσιμου κώδικα CSS.

Ένα παράδειγμα βασικού κώδικα HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Welcome to my web page!</h1>
    <p>This is a paragraph of text.</p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
    <img src="image.jpg" alt="An image">
  </body>
</html>

Ένα παράδειγμα κώδικα CSS για το στυλ της σελίδας HTML που δημιουργήσαμε στο προηγούμενο παράδειγμα:

/* Ορίστε το χρώμα φόντου της σελίδας */
body {
  background-color: #f1f1f1;
}

/* Ορίστε την οικογένεια και το μέγεθος γραμματοσειράς για όλο το κείμενο */
body, h1, p, li {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* Δώστε στυλ στην κύρια επικεφαλίδα */
h1 {
  color: #333;
  text-align: center;
  text-transform: uppercase;
}

/* Δώστε στυλ στο κείμενο της παραγράφου */
p {
  line-height: 1.5;
}

/* Δώστε στυλ στη λίστα */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

/* Δώστε στυλ στην εικόνα */
img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
}

Σε αυτό το παράδειγμα, χρησιμοποιούμε CSS για το στυλ της σελίδας HTML που δημιουργήσαμε νωρίτερα. Ξεκινάμε ορίζοντας το χρώμα φόντου της σελίδας σε ανοιχτό γκρι χρησιμοποιώντας τον επιλογέα σώματος.

Στη συνέχεια χρησιμοποιούμε τους επιλογείς σώματος, h1, p και li για να ορίσουμε την οικογένεια γραμματοσειράς και το μέγεθος για όλο το κείμενο της σελίδας.

Στη συνέχεια, διαμορφώνουμε τον επιλογέα h1 για να ορίσουμε το χρώμα σε σκούρο γκρι, να κεντράρουμε το κείμενο και να κάνουμε το κείμενο κεφαλαία. Δίνουμε στυλ στον επιλογέα p για να ορίσουμε το ύψος γραμμής στο 1,5, το οποίο δίνει λίγο επιπλέον χώρο μεταξύ των γραμμών του κειμένου.

Δίνουμε στυλ στον επιλογέα ul για να αφαιρέσετε τα σημεία κουκκίδων και να αφαιρέσετε τυχόν περιθώρια και γέμιση, και διαμορφώνουμε τον επιλογέα li για να προσθέσετε ένα περιθώριο 10 εικονοστοιχείων κάτω από κάθε στοιχείο λίστας.

Τέλος, διαμορφώνουμε το στυλ του επιλογέα img ώστε η εικόνα να αποκρίνεται ορίζοντας το μέγιστο πλάτος στο 100% και το ύψος σε αυτόματο. Προσθέτουμε επίσης ένα γκρι περίγραμμα 1 pixel στην εικόνα.

1 σχόλιο

Αφήστε το σχόλιο σας

Geo

Όλες οι αναρτήσεις του συντάκτη