مقدمة عن لغة CSS







مقدمة عن لغة CSS * CSS هي اختصار لـ Cascading Style Sheets و هي من اللغات الهيكلية التى تستخدم لتعديل ظهور عناصر لغة HTML فى المتصفح. * CSS هى مجموعة من القاعد التي تعبر عن كيفية ظهور محتوى اى عنصر من عناصر HTML و تتكون اي قاعدة CSS من جزئين اساسيين Selector و Declaration.

* Selector
- يعبر عن عنصر او عدة عناصر HTML التى تطبق عليها نفس قاعدة الـ CSS.
* Declaration
- يعبر عن طريقة ظهور عنصر HTML و تنقسم الي جزئين property و value .

- هنالك طريقتين لاستخدام CSS فى صفحة HTML اما External CSS او Internal CSS .
* External CSS
- فى هذه الطريقة يتم وضع قواعد CSS فى ملف نصي اخر بخلاف اكواد الـ HTML و يتم استدعائها بواسمة عنصر <link>
- عنصر <link> هو Empty Element و يتم اضافتة لمنطقة الـ Head فى كود HTML.
- بالامكان استخدام اكثر من ملف CSS خارجي لنفس صفحة HTML.
كود HTML:

رمز Code:
<!DOCTYPE html> <html> <head> <title>External CSS Example</title> <link href="css/style.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>Css:</h1> <p>It means Cascading Style Sheets and used to create rules that specify how the content of an element should appear.</p> </body> </html>

كود CSS:

* Internal CSS
- فى هذه الطريقة يتم وضع قواعد CSS فى نفس الصفحة مع اكواد الـ HTML و يتم استخدام عنصر <style>
كود HTML:

رمز Code:
<!DOCTYPE html>
<html>
 <head>
  <title>External CSS Example</title>
  <style type="text/css">
  body {
    font-family: arial;
    background-color: gray;}
  h1 {
    font-family: arial;
    background-color: red;} 
  </style>
 </head>
 <body>
  <h1>Css:</h1>
  <p>It means Cascading Style Sheets and used to create rules that
  specify how the content of an element should appear.</p>
 </body>
</html>

لماذا نفضل External CSS عن Internal CSS
- حيث يمكن استخدام نفس قواعد الـ CSS على اكثر من نفس بطريقة سهلة.
- جعل اكواد الـ CSS مفصولة عن باقي اكواد الصفحة .
- عند الرغبة فى تغير اى قاعدة CSS يتم ذلك بسهولة من خلال ملف واحد بدلا من التعديل فى اكثر من صفحة.


http://www.traidnt.net/vb/traidnt2718769/