Στάλες στο γαλάζιο ®: CSS Tutorials

MarkSheet: CSS & HTML σε απλά μαθήματα φροντιστηρίου.

8:00 π.μ. LoneEagle 0

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTVRi8IDcUehdUOzAm5nhShMHjXTH6tVojUCnYOle3sBQYdzF0ynyaNCu30isxQNz1Uz-bs63zLVWccopVbDghXGua38m0yhEMaFP5tX2VlC4R31197rL-S0oCZs_WlILKyM5mIiGHcfs/s1600/MarkSheet.jpg" imageanchor="1"><img border="0" height="379" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTVRi8IDcUehdUOzAm5nhShMHjXTH6tVojUCnYOle3sBQYdzF0ynyaNCu30isxQNz1Uz-bs63zLVWccopVbDghXGua38m0yhEMaFP5tX2VlC4R31197rL-S0oCZs_WlILKyM5mIiGHcfs/s640/MarkSheet.jpg" width="640" /></a></div><center>4 Ενότητες 9 κεφάλαια και 50 Μαθήματα για Css & Html. 
 
Εμείς σας προτείνουμε! Εσείς δεν έχετε παρά να την επισκεφθείτε...!!! 
 
<a href="http://marksheet.io/" target="_blank"><img oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNk0sXwGZKL8A1nMOmecwbl7d1hDy9xgoMwdhIm5JP2_7t14N27eG8BY1rNrWkIzmTWALZpW0SWo9Ss6apJf7XeVtk3mXnhLfTmF79CkEVFAlOkRf6jOYTNYVwHuCJEfU0CtCTiCdeWc/s1600/TryItLE.png"></a></center>

CSS Tutorials HTML Tutorials Online Tools MarkSheet: CSS & HTML σε απλά μαθήματα φροντιστηρίου.

4 Ενότητες 9 κεφάλαια και 50 Μαθήματα για Css & Html. Εμείς σας προτείνουμε! Εσείς δεν έχετε παρά να την επισκεφθείτε...!!!

Διαβάστε περισσότερα »

Μια τρισδιάστατη απεικόνιση του ηλιακού συστήματος φτιαγμένη με CSS από τον Julian Garnier (Tutorial - Code).

8:00 π.μ. LoneEagle 0

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb1GJVPO6EpFraGR4OrtpmmAXhWfh0ZSS3GGaFHZevB8JdZA9s_QrysTXnZbBb0Bdav-d7Q4HJB-TXgehztvQ2W42QV-qNjZcc-coAvNbTE0bFfi3Y5S5rtpj1wJ1PFd4cUvop7HzMelE/s1600/Animated_solar_system_made_of_CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb1GJVPO6EpFraGR4OrtpmmAXhWfh0ZSS3GGaFHZevB8JdZA9s_QrysTXnZbBb0Bdav-d7Q4HJB-TXgehztvQ2W42QV-qNjZcc-coAvNbTE0bFfi3Y5S5rtpj1wJ1PFd4cUvop7HzMelE/s640/Animated_solar_system_made_of_CSS.jpg" /></a></div>Δεν θα το πιστέψετε αλλά το "πλανητικό" μπαλέτο γίνεται χωρίς τη χρήση plugins! 
Το animation είναι εξαιρετικά ομαλή - εφ 'όσον είστε χρησιμοποιώντας ένα ενημερωμένο πρόγραμμα περιήγησης, ότι είναι 
 
Δεν χρειάζεται να είναι κανείς ειδικός για σχεδιασμό ιστοσελίδων για να εκτιμήσει αυτό το κινούμενο μοντέλο του ηλιακού συστήματος, άλλο ένα από τα καλύτερα παραδείγματα CSS έχουμε βρεθεί. 
 
Δημιουργήθηκε από τον Julian Garnier και μας δείχνει τους οκτώ πλανήτες σε τροχιά γύρω από τον ήλιο σε δισδιάστατη και τρισδιάστατη απεικόνιση (2D 3D) με παραμέτρους στην δεξιά πλευρά της σελίδας, την ταχύτητα, το μέγεθος και την απόσταση από τον ήλιο, επιλέγοντας τον καθένα ξεχωριστά. 
 
Ο παρακάτω κώδικας εμφανίζει όλο το HTML της σελίδας της απεικόνισης... και ότι χρειάστηκε για να φτιαχτεί. 
 
<center>See the Pen <a href="http://codepen.io/juliangarnier/pen/idhuG/">CSS 3D Solar System</a> by Julian Garnier (<a href="http://codepen.io/juliangarnier">@juliangarnier</a>) on <a href="http://codepen.io">CodePen</a>.<script async src="//assets.codepen.io/assets/embed/ei.js"></script></center>

Μια τρισδιάστατη απεικόνιση του ηλιακού συστήματος φτιαγμένη με CSS από τον Julian Garnier (Tutorial - Code).

CSS Tutorials HTML Tutorials Julian Garnier Μια τρισδιάστατη απεικόνιση του ηλιακού συστήματος φτιαγμένη με CSS από τον Julian Garnier (Tutorial - Code).

Δεν θα το πιστέψετε αλλά το "πλανητικό" μπαλέτο γίνεται χωρίς τη χρήση plugins! Το animation είναι εξαιρετικά ομαλή - εφ...

Διαβάστε περισσότερα »

Mastering CSS - for Web Developers.

11:00 μ.μ. Iva 0

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKbmyYOmFI2_QXkeRN1w0Gf-RXx7iMTDTLUUjREW6xY_wS07_XKBMEKyeT3LR32II_PpM6kyTl1u8RvE2BmbUhHnJYoQQIjRy6wkgFEuyW2kmQr4n1xSDNhof5urY8ep3wTq8ZZYA1Ejk/s1600/Mastering+CSS+-+for+Web+Developers.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5740610385902481042" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKbmyYOmFI2_QXkeRN1w0Gf-RXx7iMTDTLUUjREW6xY_wS07_XKBMEKyeT3LR32II_PpM6kyTl1u8RvE2BmbUhHnJYoQQIjRy6wkgFEuyW2kmQr4n1xSDNhof5urY8ep3wTq8ZZYA1Ejk/s400/Mastering+CSS+-+for+Web+Developers.png" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 380px; height: 400px;" /></a>Are you stumped by the rather sophisticated nature of CSS? Getting a grip on this still dewy technology isn t quite as hard as you might think. 
Connecting the dots is easier when you have all the vital facts within reach. 
And that s what “Mastering CSS” is all about.This eBook offers 15 hand-picked articles that overflow with professional advice and that reflect the deep experience of the Smashing Magazine authors you trust – authors who know exactly what they re writing about.Stop hiding behind cross-browser compatibility issues, and launch a counterstrike. Tame those advanced CSS selectors; learn your way around CSS3 media queries; pioneer the field of CSS3 keyframe animations. Get in the game, and learn how to use advanced CSS typography, CSS3 pseudo-classes and modern CSS layouts, while devising back-up solutions for older browsers. 
Table of Contents: 
Why We Should Start Using CSS3 and HTML5 Today 
CSS Three: Connecting the Dots 
Modern CSS Layouts: The Essential Characteristics 
Modern CSS Layouts, Part 2: The Essential Techniques 
How to Use CSS3 Pseudo-Classes 
Taming Advanced CSS Selectors 
!important CSS Declarations: How and When to Use Them 
An Introduction to CSS3 Keyframe Animations 
CSS Specificity and Inheritance 
How to Use CSS3 Media Queries 
Responsive Web Design: What It Is and How to Use It 
The Future of CSS: Experimental CSS Properties 
Technical Web Typography: Guidelines and Techniques 
Future of CSS Typography 
Using CSS3: Older Browsers and Common Considerations 
English | PDF | 256 pages | 12.66 Mb 
<center><a href="http://www.mediafire.com/file/g1y5ybc3bd0ngic/Mastering_CSS_for_Web_Developers_by_Iva.rar" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCZ3ozU7dbvtxr9e_KQtn3lz-xz_v2ZGqGFw0RRdMI4biH7rq2nwuj9gj0jT_VQuf25E-lV1NRcPErnvePTuvc2SyAq-rUe9nlGqcqhJV8TJtkOgBlBL37ZBs_CNsIzQ1vPsMWF3BYUI/s1600/DownloadLE.png" /></a></center>

Books CSS Tutorials Mastering CSS - for Web Developers.

Are you stumped by the rather sophisticated nature of CSS? Getting a grip on this still dewy technology isn t quite as hard as you might thi...

Διαβάστε περισσότερα »

Pop-Up Image Viewer.

10:40 π.μ. LoneEagle 3

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hV2nVl7dlafVW2dy5h7ctHz3x5_dCaoEq-FJ6eL0t8DHNKHA3NuZ0YIfeWi1IypH97VtA1waZndo8rdDohOkBiilM465oN-5QGMMMlFnM940wg9DCJ0IerEE7baf-7vXF4m87uBQ4o8/s1600/Pop-Up+Image+Viewer.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5712741971735504130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hV2nVl7dlafVW2dy5h7ctHz3x5_dCaoEq-FJ6eL0t8DHNKHA3NuZ0YIfeWi1IypH97VtA1waZndo8rdDohOkBiilM465oN-5QGMMMlFnM940wg9DCJ0IerEE7baf-7vXF4m87uBQ4o8/s400/Pop-Up+Image+Viewer.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 240px;" /></a> <h3 class="post-title entry-title">Δημιουργήστε όμορφα pop-up παράθυρα σε εικόνες ή συνδέσμους με χρήση css & html. Ένα πολύ πρόχειρο παράδειγμα είναι το παρακάτω, που μπορείτε να χρησιμοποιήσετε ως css. Από κει & πέρα μπορείτε να του προσθέσετε πολλά π.χ. εφέ αδιαφάνειας, αλλάγη στην εμφάνιση του περιγράμματος της εικόνας, σκιές....κτλ. <center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center> <div class="code"><div class="code_content">  <style type=”text/css”> .imvle{ position:relative; z-index:0; } .imvle:hover{ background-color:transparent; z-index:50; } .imvle span{ position:absolute; background-color:fff; padding:5px; left:-1000px; border:1px solid #111; visibility:hidden; color:#000; text-decoration:none; } .imvle span img{ border-width:0px; padding:2px; } .imvle:hover span{ visibility:visible; top:0; left:60px; } </style>  </div></div> Και ο Html κωδικας του, είναι ο παρακάτω... Για κείμενο: <div class="code"><div class="code_content">  <a class="imvle" href="..."><img src="..." width="80px" height="50px" border="0" /><img src="...." /></a>  </div></div> Για εικόνα: <div class="code"><div class="code_content">  <a class="imvle" href="...">....το κειμενο σας....<img src="...." /></a>  </div></div> </h3> <marquee behavior="alternate" direction="left" scrollamount="3"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></marquee>

Blogger Help Blogger Tutorials CSS Tutorials HTML Tutorials Image Effects Pop-Up Image Viewer.

Δημιουργήστε όμορφα pop-up παράθυρα σε εικόνες ή συνδέσμους με χρήση css & html. Ένα πολύ πρόχειρο παράδειγμα είναι το παρακάτω, που μπο...

Διαβάστε περισσότερα »

Valentine's heart with css (2 styles) by LoneEagle.

10:00 μ.μ. LoneEagle 0

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7oacuMLLd02pCWo8yFEJ0mC0TbBUqdN6HktYnaKQ1QTajkNRef5pAfbbcdRQm2zo4eeuO5-FX8YyPU_z0OfQl9gHZoC6oy-DnAWMua3aRHFAGlzZLVlVc9es1cGGoVp5F0JUxKApch8Q/s1600/Valentine%2527s+heart+with+css+%25282+styles%2529..png"><img alt="Valentine's heart with css (2 styles) by LoneEagle" border="0" id="BLOGGER_PHOTO_ID_5708345561592840802" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7oacuMLLd02pCWo8yFEJ0mC0TbBUqdN6HktYnaKQ1QTajkNRef5pAfbbcdRQm2zo4eeuO5-FX8YyPU_z0OfQl9gHZoC6oy-DnAWMua3aRHFAGlzZLVlVc9es1cGGoVp5F0JUxKApch8Q/s400/Valentine%2527s+heart+with+css+%25282+styles%2529..png" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 239px;" /></a>Δηλώστε την αγάπη σας & στολίστε το ιστολόγιό σας με μια καρδιά, με χρήση css & html. 
Ακολουθήστε τα παρακάτω βήματα για να εγκαταστήσετε αυτό το υπέροχο gadget. 
<center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center>Αφού κάνετε σύνδεση στον λογαριαμό σας στον blogger θα πάτε από τον Πίνακα ελέγχου σας στην σελίδα της Σχεδίασης. 
Πίνακας Ελέγχου --> Σχεδίαση --> Στοιχεία Σελίδας 
<center><img oncontextmenu="return false" src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center>Εκεί στην πλαινή σας στήλη πάνω-πάνω θα δείτε το Προσθήκη gadget, πατήστε το & μέσα από τη λίστα κοιτάξτε να βρείτε το HTML/JavaScript 
<center><img oncontextmenu="return false" src="http://i56.tinypic.com/24cegdl.jpg"></center>θα το ανοίξετε & θα ρίξετε έναν από τους παρακάτω κώδικες. 
Σχέδιο 1ο: 
Με χρήση χρώματος για φόντο. 
 
<div class="code"><div class="code_content"> 
<center><style type="text/css"> 
.valentinesheartle{ 
display:block; 
height:234px; 
width:258px; 
margin:0 0 0 0; 
padding:0 0 0 0; 
position:relative} 
.valentinesheartle-left-half{ 
display:block; 
width:150px; 
height:225px; 
background-color:#FC0D00; // Κόκκινο χρώμα 
-moz-border-radius-topleft:100px; 
-moz-border-radius-topright:100px; 
-webkit-border-radius-topleft:100px; 
-webkit-border-radius-topright:100px; 
border-top-left-radius:100px; 
border-top-right-radius:100px; 
-moz-transform:rotate(-45deg); 
-webkit-transform:rotate(-45deg); 
-o-transform:rotate(-45deg); 
transform:rotate(-45deg); 
position:absolute; 
top:-11px; 
left:27px} 
.valentinesheartle-right-half{ 
display:block; 
width:150px; 
height:225px; 
background-color:#FC0D00; // Κόκκινο χρώμα 
-moz-border-radius-topleft:100px; 
-moz-border-radius-topright:100px; 
-webkit-border-radius-topleft:100px; 
-webkit-border-radius-topright:100px; 
border-top-left-radius:100px; 
border-top-right-radius:100px; 
-moz-transform:rotate(45deg); 
-webkit-transform:rotate(45deg); 
-o-transform:rotate(45deg); 
transform:rotate(45deg); 
position:absolute; 
top:-11px; 
right:27px} 
</style> 
<div class="valentinesheartle"> 
<div class="valentinesheartle-left-half"></div> 
<div class="valentinesheartle-right-half"></div> 
</div></center> 
 
</div></div> 
Σχέδιο 2ο: 
Με χρηση εικόνας για φόντο. 
Φυσικά μπορείτε να χρησιμοποιήσετε & εικόνες animated gifs όπως αυτή που σας προσφέρω στον παρακάτω κώδικα. 
<div class="code"><div class="code_content"> 
<center><style type="text/css"> 
.valentinesheartle{ 
display:block; 
height:234px; 
width:258px; 
margin:0 0 0 0; 
padding:0 0 0 0; 
position:relative} 
.valentinesheartle-left-half{ 
display:block; 
width:150px; 
height:225px; 
background: url("http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/colorhearts.gif"); // εικόνα 
-moz-border-radius-topleft:100px; 
-moz-border-radius-topright:100px; 
-webkit-border-radius-topleft:100px; 
-webkit-border-radius-topright:100px; 
border-top-left-radius:100px; 
border-top-right-radius:100px; 
-moz-transform:rotate(-45deg); 
-webkit-transform:rotate(-45deg); 
-o-transform:rotate(-45deg); 
transform:rotate(-45deg); 
position:absolute; 
top:-11px; 
left:27px} 
.valentinesheartle-right-half{ 
display:block; 
width:150px; 
height:225px; 
background: url("http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/colorhearts.gif");// εικόνα 
-moz-border-radius-topleft:100px; 
-moz-border-radius-topright:100px; 
-webkit-border-radius-topleft:100px; 
-webkit-border-radius-topright:100px; 
border-top-left-radius:100px; 
border-top-right-radius:100px; 
-moz-transform:rotate(45deg); 
-webkit-transform:rotate(45deg); 
-o-transform:rotate(45deg); 
transform:rotate(45deg); 
position:absolute; 
top:-11px; 
right:27px} 
</style> 
<div class="valentinesheartle"> 
<div class="valentinesheartle-left-half"></div> 
<div class="valentinesheartle-right-half"></div> 
</div></center> 
 
</div></div>Τέλος, πατήστε ΑΠΟΘΗΚΕΥΣΗ. 
Μέσα από τα "Στοιχεία Σελίδας" σύρτε το gadget στο σημείο που θέλετε να εμφανίζεται. 
Και κάντε Ανανέωση την σελίδα σας. 
<marquee behavior="alternate" direction="left" scrollamount="3"><h2>Καλή Επιτυχία!!!!!</h2></marquee>

Blogger Help Blogger Tutorials CSS Tutorials HTML Tutorials Valentine Stuff Valentine's heart with css (2 styles) by LoneEagle.

Δηλώστε την αγάπη σας & στολίστε το ιστολόγιό σας με μια καρδιά, με χρήση css & html. Ακολουθήστε τα παρακάτω βήματα για να εγκατα...

Διαβάστε περισσότερα »

CSS Border Style.

12:12 μ.μ. LoneEagle 0

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2e8jQWihUlBwrTP1XK2ctrNbxwXOCrkTkiuPjKM_zoxnMFe6UlSskvNmZApuKWXGwqrDxEcIPGnzW3rntcyj6rqXQylDXVeNRkiy_9GBMKUtRmttv6JpElCML4ku9kXofa9CXnj4RWWU/s1600/CSS+Border+Style.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="CSS Border Style,CSS Tutoriaλs" border="0" id="BLOGGER_PHOTO_ID_5543419852235851810" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2e8jQWihUlBwrTP1XK2ctrNbxwXOCrkTkiuPjKM_zoxnMFe6UlSskvNmZApuKWXGwqrDxEcIPGnzW3rntcyj6rqXQylDXVeNRkiy_9GBMKUtRmttv6JpElCML4ku9kXofa9CXnj4RWWU/s400/CSS+Border+Style.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 277px;" /></a> <center><h3 class="post-title entry-title"> Δώστε διαφορετική εμφάνιση στα περιγράμματα που έχει το template σας. Συνήθως τα περίγραμμα που χρησιμοποιούνται στα templates, είναι τα, dashed & solid. Βρείτε τα & αλλάξτε τα με κάποιο από τα παρακάτω. Styles που υπάρχουν: border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; Διευκρυνήσεις για το καθένα: Η εμφάνιση μπορεί να αλλάξει χρησιμοποιόντας κάποια άλλη. α) dotted - εμφανίζει διακεκομένες ( τελίτσες ). β) dashed - εμφανίζει διακεκομένες γραμμές. γ) solid - εμφανίζει γραμμή. δ) double - εμφανίζει διπλή γραμμή. ε) groove - εμφανίζει γραμμή με προοπτική ( εσωτερική ). στ) ridge - εμφανίζει γραμμή με προοπτική ( εξωτερική ). ζ) inset - εμφανίζει γραμμή με προοπτική ( εσωτερική ). η) outset - εμφανίζει γραμμή με προοπτική ( εξωτερική ). Οπότε.... Όποια σημεία θα βρείτε στο html & πιο συγκεκριμένα μέσα στο css, που θα μοίαζουν με το παρακάτω παράδειγμα μπορείτε να επέμβετε & να τα τροποποιήσετε. border-top: dashed 1px #ccc;αναφορά σημείου, εμφάνιση περιγράμματος, μέγεθος περιγράμματος ( εδώ παίζεται με το dashed, το μέγεθος του περιγράμματος, με το 1px, αυξομειώνοντάς το, & το χρώμα, με το #ccc; ) Στην περίπτωση που ΔΕΝ θέλετε να εμφανίζεται το περιγραμμα, στην τιμή, θα βάζετε το (μηδέν) 0 ( π.χ. border:0px ). Δείτε τα πως εμφανίζονται στη πράξη. <center>dotted; <div style="border-width: 2px; border-style: dotted; border-color: red; "> Δείτε το dotted </div> dashed; <div style="border-width: 2px; border-style: dashed; border-color: red; "> Δείτε το dashed </div> solid; <div style="border-width: 2px; border-style: solid; border-color: red; "> Δείτε το solid </div> double; <div style="border-width: 4px; border-style: double; border-color: red; "> Δείτε το double </div> groove; <div style="border-width: 4px; border-style: groove; border-color: red; "> Δείτε το groove </div> ridge; <div style="border-width: 4px; border-style: ridge; border-color: red; "> Δείτε το ridge </div> inset; <div style="border-width: 4px; border-style: inset; border-color: red; "> Δείτε το inset </div> outset; <div style="border-width: 4px; border-style: outset; border-color: red; "> Δείτε το outset </div></center> </h3></center> <marquee behavior="alternate" direction="left" scrollamount="3"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></marquee>

Blogger Help Blogger Tutorials CSS Tutorials CSS Border Style.

Δώστε διαφορετική εμφάνιση στα περιγράμματα που έχει το template σας. Συνήθως τα περίγραμμα που χρησιμοποιούνται στα templates, είναι τα, da...

Διαβάστε περισσότερα »

CSS Properties.

12:01 μ.μ. LoneEagle

<center><div class="entry"> <table cellpadding="2" cellspacing="2" width="600"><tbody></td></tr><tr><td colspan="3" bgcolor="#17247C"> Css Properties</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> Name of Property</td><td bgcolor="#3648F5" valign="bottom"> Rule syntax</td><td bgcolor="#586AFC" valign="bottom"> Possible values</td></tr><tr><td valign="top"> font-family</td><td valign="top"> <selector> {font-family:<value>}</td><td valign="top"> <family-name> (specify) or <generic-family> [serif, sans-serif, cursive, fantasy, monospace]</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> font-style</td><td valign="top"> <selector> {font-style:<value>}</td><td valign="top"> normal, italic</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> font-weight</td><td valign="top"> <selector> {font-weight:<value>}</td><td valign="top"> normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> font-size</td><td valign="top"> <selector> {font-size:<value>}</td><td valign="top"> <absolute-size>, <relative-size>, <length>, <percentage></td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> font $ </td><td valign="top"> <selector> {font:<value>}</td><td valign="top"> , , , </td></tr><tr><td colspan="3" bgcolor="#17247C"> Color and Background</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> Name of Property</td><td bgcolor="#3648F5" valign="bottom"> Rule syntax</td><td bgcolor="#586AFC" valign="bottom"> Possible values</td></tr><tr><td valign="top"> color</td><td valign="top"> <selector> {color:<value>}</td><td valign="top"><color></td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> background-color</td><td valign="top"> <selector> {background-color:<value>}</td><td valign="top"><color></td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> background-image</td><td valign="top"> <selector> {background-image:url(<value>)}</td><td valign="top"> URL (relative or absolute path)</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> background $ </td><td valign="top"> <selector>{background:<value>}</td><td valign="top"> <background-color> (i.e., <color>)</td></tr><tr><td colspan="3" bgcolor="#17247C">Text properties</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> Name of Property</td><td bgcolor="#3648F5" valign="bottom"> Rule syntax</td><td bgcolor="#586AFC" valign="bottom"> Possible values</td></tr><tr><td valign="top"> Text-decoration</td><td valign="top"> <selector>{text-decoration:<value>}</td><td valign="top"> underline, line-through</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> text-transform</td><td valign="top"> <selector>{text-transform:<value>}</td><td valign="top"> capitalize, uppercase, lowercase, none </td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> text-align</td><td valign="top"> <selector>{text-align:<value>}</td><td valign="top"> left, right, center, justify </td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> text-indent</td><td valign="top"> <selector>{text-indent:<value>}</td><td valign="top"> <length>, <percentage></td></tr><tr><td colspan="3" bgcolor="#17247C"> Box properties</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> Name of Property</td><td bgcolor="#3648F5" valign="bottom"> Rule syntax</td><td bgcolor="#586AFC" valign="bottom"> Possible values</td></tr><tr><td valign="top"> margin $</td><td valign="top"> <selector>{margin:<value>}</td><td valign="top"> <length>, <percentage>, auto(sequence:t r b l) </td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> margin-top</td><td valign="top"> <selector>{margin-top:<value>}</td><td valign="top"> <length>, <percentage>, auto </td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> Margin-right</td><td valign="top"> <selector>{margin-right:<value>}</td><td valign="top"> <length>, <percentage>, auto</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> margin-bottom</td><td valign="top"> <selector>{margin-bottom:<value>}</td><td valign="top"> <length>, <percentage>, auto </td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> margin-left</td><td valign="top"> <selector>{margin-left:<value>}</td><td valign="top"> <length>, <percentage>, auto</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> padding $ </td><td valign="top"> <selector>{padding:<value>}</td><td valign="top"> <length>, <percentage>, (sequence:t r b l) </td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> padding-top </td><td valign="top"> <selector>{padding-top:<value>}</td><td valign="top"> <length>, <percentage></td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> padding-right </td><td valign="top"> <selector>{padding-right:<value>}</td><td valign="top"> <length>, <percentage></td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> padding-bottom </td><td valign="top"> <selector>{padding-bottom:<value>}</td><td valign="top"> <length>, <percentage></td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> padding-left </td><td valign="top"> <selector>{padding-left:<value>}</td><td valign="top"> <length>, <percentage></td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> border-color </td><td valign="top"> <selector>{border-color:<value>}</td><td valign="top"> <color></td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> border-style </td><td valign="top"> <selector>{border-style:<value>}</td><td valign="top"> solid, double, groove, ridge, inset, outset</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> border $ </td><td valign="top"> <selector>{border:<value>}</td><td valign="top"> <border-width>, <border-style>, <color></td></tr><tr><td colspan="3" bgcolor="#17247C"> Block-level and Replaced Elements</td></tr><tr><td valign="top"> width</td><td valign="top"> <selector>{width:<value>}</td><td valign="top"> <length>, <percentage>, auto</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> height</td><td valign="top"> <selector>{height:<value>}</td><td valign="top"> <length>, auto</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> float</td><td valign="top"> <selector>{float:<value>}</td><td valign="top"> left, right</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> clear</td><td valign="top"> <selector>{clear:<value>}</td><td valign="top"> none, left, right </td></tr><tr><td colspan="3" bgcolor="#17247C"> Position (CSS – P)</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> Name of Property</td><td bgcolor="#3648F5" valign="bottom"> Rule syntax</td><td bgcolor="#586AFC" valign="bottom"> Possible values</td></tr><tr><td valign="top"> position</td><td valign="top"> <selector>{position:<value>}</td><td valign="top"> absolute, relative</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> top</td><td valign="top"> <selector>{top:<value>}</td><td valign="top"> <length>, <percentage>, auto</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> left</td><td valign="top"> <selector>{left:<value>}</td><td valign="top"> <length>, <percentage>, auto</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> visibility</td><td valign="top"> <selector>{visibility:<value>}</td><td valign="top"> hidden, visible, inherit</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> z-index</td><td valign="top"> <selector>{z-index:<value>}</td><td valign="top"> <number>, auto</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td valign="top"> overflow </td><td valign="top"> <selector>{overflow:<value>}</td><td valign="top"> visible, hidden, auto</td></tr><tr><td colspan="3"><hr /></td></tr><tr><td colspan="3">$ = Shorthand Property </td></tr></tbody></table></div></center>

CSS Tutorials Webmaster Tools CSS Properties.

Css Properties Name of Property Rule syntax Possible values font-family <selector> {font-family:<value>} <family-name...

Διαβάστε περισσότερα »

Στάλες στο γαλάζιο ®

MarkSheet: CSS & HTML σε απλά μαθήματα φροντιστηρίου.

Μια τρισδιάστατη απεικόνιση του ηλιακού συστήματος φτιαγμένη με CSS από τον Julian Garnier (Tutorial - Code).

Mastering CSS - for Web Developers.

Pop-Up Image Viewer.

Valentine's heart with css (2 styles) by LoneEagle.

CSS Border Style.

CSS Properties.

Τι να κάνετε για να μη χάνετε τα νέα του Στάλες στο γαλάζιο ® στο Facebook...!!!

Δείτε το βίντεο & κάντε SUBSCRIBE στο κανάλι μου...!!!

Popular Posts

Tags

Router's Pass

Μια ιστοσελίδα με τα default κλειδιά για κάθε μάρκα και μοντέλο router.

Get ever article right into your inbox.
We will ensure your privacy and can be unsubscribed anytime.

Τι να κάνετε για να μη χάνετε τα νέα του Στάλες στο γαλάζιο ® στο Facebook...!!!

Δείτε το βίντεο & κάντε SUBSCRIBE στο κανάλι μου...!!!

Μια ιστοσελίδα με τα default κλειδιά για κάθε μάρκα και μοντέλο router.

Get ever article right into your inbox. We will ensure your privacy and can be unsubscribed anytime.

Get ever article right into your inbox.
We will ensure your privacy and can be unsubscribed anytime.