الثلاثاء، 4 يوليو 2017

مقدمة عن لغة 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:


<!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: 

body {
font-family: arial;
background-color: gray;}
h1 {
font-family: arial;
background-color: red;}

* Internal CSS 

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

كود HTML:

<!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 يتم ذلك بسهولة من خلال ملف واحد بدلا من التعديل فى اكثر من صفحة.

0 التعليقات

إرسال تعليق