Δημιουργια .css

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
skull
Δημοσιεύσεις: 140
Εγγραφή: 02 Μαρ 2005 17:56
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Δημιουργια .css

Δημοσίευση από skull » 17 Απρ 2005 16:18

Το .css δεν εχει??

Οπως φενεται τα "class" δουλευουν μονο στο php για αυτο και το εγραψα εκει! :D

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Δημιουργια .css

Δημοσίευση από geraki » 17 Απρ 2005 17:01

Άλλο τα classes της php και άλλο τα classes στην html/css. Καμμία σχέση το ένα με το άλλο.
Εικόνα ← Αυτό το έκλεψα απ'τον Eneme.

Άβαταρ μέλους
skull
Δημοσιεύσεις: 140
Εγγραφή: 02 Μαρ 2005 17:56
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Δημιουργια .css

Δημοσίευση από skull » 17 Απρ 2005 20:38

Αυτο το ξερω αλλα πως αλιως να το ελεγα!!! :(

Καμια βοηθεια για το κυριως ομως προβλημα???

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Δημιουργια .css

Δημοσίευση από skeftomilos » 17 Απρ 2005 20:57

Θα δώσω ένα παράδειγμα που ίσως βοηθήσει με το μπέρδεμα των τεχνολογιών. Το παρακάτω είναι ένα πλήρες αρχείο ASP (demo.asp):

<html>
<head>
<title>Demo</title>
<style type="text/css">

body { font-family:verdana; font-size:18px; background-color:pink;}
</style>
<script type="text/javascript">

window.onload = function() { alert("Hello!") }
</script>
<script language="vbscript" runat="server">
Function Add(x, y)
Add = x + y
End Function
</script>

</head>
<body>
Δύο και δύο κάνει:
<%=Add(2,2)%>
<noscript>JavaScript disabled</noscript>
</body>
</html>


Πράσινο: HTML
Μπλε: CSS
Πορτοκαλί: JavaScript (client-side scripting)
Kόκκινο: ASP (server-side scripting)

Μόλις ένας χρήστης ζητήσει τη σελίδα, ο ASP κώδικας θα εκτελεστεί στον server. Το αποτέλεσμα θα σταλεί στον browser του χρήστη, και θα είναι το παρακάτω:

Κώδικας: Επιλογή όλων

<html>
  <head>
    <title>Demo</title>
    <style type="text/css">
      body &#123; font-family&#58;verdana; font-size&#58;18px; background-color&#58;pink;&#125;
    </style>
    <script type="text/javascript">
      window.onload = function&#40;&#41; &#123; alert&#40;"Hello!"&#41; &#125;
    </script>

  </head>
  <body>
    Δύο και δύο κάνει&#58; 4
    <noscript>JavaScript disabled</noscript>
  </body>
</html>
Βλέπουμε ότι ο server-side κώδικας έχει εξαφανιστεί. Υπάρχει μόνο το αποτέλεσμα της επεξεργασίας, καθώς και ένα κενό στη θέση που βρισκόταν η Function Add. Θα μπορούσαμε να στοιχήσουμε διαφορετικά τα tags ώστε να εμποδίσουμε την εμφάνιση αυτού του κενού, που μπορεί να φανεί πολύ ενδιαφέρον σε ένα hacker για περαιτέρω έρευνα.

Ο browser θα αναλάβει τώρα να εμφανίσει τη σελίδα. Θα εμφανίσει το HTML περιεχόμενο, μορφοποιημένο με βάση τις CSS οδηγίες. Μόλις ολοκληρωθεί η εμφάνιση θα τρέξει και το script, που πετάει ένα popup μήνυμα στην οθόνη.

Αν η JavaScript είναι ανενεργή, αντί για popup θα εμφανιστεί το κείμενο στο tag <noscript>.
Τελευταία επεξεργασία από το μέλος skeftomilos την 18 Απρ 2005 21:54, έχει επεξεργασθεί 1 φορά συνολικά.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
skull
Δημοσιεύσεις: 140
Εγγραφή: 02 Μαρ 2005 17:56
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Δημιουργια .css

Δημοσίευση από skull » 18 Απρ 2005 13:39

Συγνωμη αλλα η απαντηση στο προβλημα μου ποια ειναι??? :oops:

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Δημιουργια .css

Δημοσίευση από geraki » 18 Απρ 2005 13:53

Κανονικά έπρεπε να δουλέψει.
Δοκίμασε να το δώσεις έτσι: <link rel="stylesheet" type="text/css" href="/skull.css">
και αν δεν δουλέψει δώσε full path. Δηλ. "http://www.greekmusiciansforum.gr/skull/skull.css".

Πιθανώς άσχετο, αλλά το / στο τέλος του link δεν χρειάζεται αφού δηλώνεις HTML 4.01 Transitional. Χρειάζεται μόνο σε XHTML.
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

Άβαταρ μέλους
skull
Δημοσιεύσεις: 140
Εγγραφή: 02 Μαρ 2005 17:56
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Δημιουργια .css

Δημοσίευση από skull » 18 Απρ 2005 14:27

Θα τρελαθω!!! :evil:

Στον firefox ανοιγει κανονικα αλλα στον explorer λειπουν τα παντα απο το skull.css!!!

Να και πως ειναι το skull.css

Κώδικας: Επιλογή όλων

/* skull*/

/* General  */
body &#123;
	background-color&#58; ="#DFDFDF;
	scrollbar-face-color&#58; #EAEAEA;
	scrollbar-shadow-color&#58; #EAEAEA;
	scrollbar-highlight-color&#58; #EAEAEA;
	scrollbar-3dlight-color&#58; #EAEAEA;
	scrollbar-darkshadow-color&#58; #697074;
	scrollbar-track-color&#58; #DFDFDF;
	scrollbar-arrow-color&#58; #666666;
	background-image&#58; url&#40;images/bg.gif&#41;;
&#125;

...
Τελευταία επεξεργασία από το μέλος skull την 19 Απρ 2005 14:09, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Δημιουργια .css

Δημοσίευση από skeftomilos » 18 Απρ 2005 21:53

Παρόλο που οι browsers είναι πολύ ανεκτικοί με την κακογραμμένη HTML, δεν είναι καθόλου ανεκτικοί με τα CSS. Ένα μικρό λαθάκι αρκεί για να σταματήσει τον CSS parser και να αγνοηθούν όλες οι υπόλοιπες ιδιότητες. Βλέπεις κάτι λάθος στην παρακάτω εντολή?

Κώδικας: Επιλογή όλων

background-color&#58; ="#DFDFDF;
Επιπλέον προσοχή στις διευθύνσεις. Η διεύθυνση href="/skull.css" είναι virtual και επομένως λιγότερο ευέλικτη από την href="skull.css" που είναι relative. Αναφέρομαι στη διεύθυνση του link, δηλαδή:

Κώδικας: Επιλογή όλων

<link rel="stylesheet" type="text/css" href="/skull.css">
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
skull
Δημοσιεύσεις: 140
Εγγραφή: 02 Μαρ 2005 17:56
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Δημιουργια .css

Δημοσίευση από skull » 19 Απρ 2005 14:07

Αυτο ηταν!!!!! :o


Ευχαρηστω πολυ! :D

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης