Accéder au contenu principal

درس css 2

كيف تعمل تقنية CSS؟

في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML.
الكثير من خصائص CSS تشبه تلك المستخدمة في HTML، لذلك إذا تعلمت HTML واستخدامتها لإنشاء التصاميم فأنت في الغالب ستتمكن من تعلم CSS بسهولة، لنلقي نظرة على هذا المثال الأساسي.

القواعد الأساسية لكتابة CSS

لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:
باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:
 
 <body bgcolor="#FF0000">
مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر:
 
 body {background-color: #FF0000;}
كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS:
مثال توضيحي يشرح الخاصية والقيمة
لكن أين نضع أوامر CSS؟ هذا هو ما سنتعلمه الآن.

تفعيل CSS في صفحة HTML

هناك ثلاث طرق يمكن أن تستخدمها لتفعيل CSS في صفحة HTML، هذه الطرق مشروحة أدناه، ونحن ننصح بأن تركز وتستخدم الطريقة الثالثة، وهي أن تضع CSS في ملف منفصل.

الطريقة 1: ضمن وسوم HTML باستخدام خاصية style

إحدى الطرق لتفعيل CSS في HTML هي باستخدام خاصية style، لنأخذ مثالاً على أساس المثال أعلاه الذي أردنا فيه استخدام اللون الأحمر كلخفية للصفحة، يمكن تطبيق هذا الأمر بهذا الشكل
 <html>
   <head>
  <title>Example<title>
   </head>
   <body style="background-color: #FF0000;">
  <p>This is a red page</p>
   </body>
 </html>

الطريقة 2: ضمت ملف HTML باستخدام وسم style

هذه طريقة مختلفة بأنها تستخدم وسم <style>، وهذا مثال لكيفية تطبيق هذه الطريقة:
 <html>
   <head>
  <title>Example<title>
  <style type="text/css">
    body {background-color: #FF0000;}
  </style>
   </head>
   <body>
  <p>This is a red page</p>
   </body>
 </html>

الطريقة 3: ملف خارجي

هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة.
الملف الخارجي هو ببساطة ملف نصي يستخدم اللاحقة .css، ومثل الملفات الأخرى يمكنك أن تضعه في مزود موقعك أو على القرص الصلب.
مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم
The folder "style" containing the file "style.css"
المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:
 <link rel="stylesheet" type="text/css" href="style/style.css" />
لاحظ كيف أن مسار الملف حددناه باستخدام خاصية href.
هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي <head> و</head> كما في المثال الآتي:
 <html>
   <head>
  <title>My document</title>
  <link rel="stylesheet" type="text/css" href="style/style.css" />
   </head>
   <body>
   ...
هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML.
الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML.
مثال توضيحي يبين كم ملف HTML يمكن ربطه بملف CSS
هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 100 صفحة فملف التصميم يمكنه أن يوفر عليك الوقت فلا تحتاج إلى تعديل 100 ملف بنفسك، باستخدام CSS يمكن تغيير ما تريد خلال ثواني بتغيير سطر واحد في ملف التصميم.
لنتدرب على ما تعلمناه حتى الآن.

جرب بنفسك

قم بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات:

default.htm

 <html>
   <head>
  <title>My document</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
  <h1>My first stylesheet</h1>
   </body>
 </html>

style.css

 body {
   background-color: #FF0000;
 }
الآن قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف.
قم بفتح ملف default.htm في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!
Libellés :

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Basic PHP Syntax

Basic PHP Syntax   A PHP script can be placed anywhere in the document.   A PHP script starts with <?php and ends with ?> : <?php // PHP code goes here ?>   The default file extension for PHP files is ".php".   A PHP file normally contains HTML tags, and some PHP scripting code.   Below, we have an example of a simple PHP file, with a PHP script that uses a built-in PHP function "echo" to output the text "Hello World!" on a web page:
Enregistrer un commentaire
Lire la suite

Bootstrap Icons CSS

Bootstrap Icons   To use the Bootstrap glyphicons , add the following line inside the <head > section of your HTML page :   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >   visite link
1 commentaire
Lire la suite

طريقة الحصول على بطاقة ماستركارد Mastercard افتراضية مجانا

طريقة الحصول على بطاقة ماستركارد   Mastercard افتراضية مجانا كيفية الحصول على بطاقة ائتمان "ماستر كارد"  Mastercard VCC الكترونية بالمجان تشتغل 100 % قابلة للشحن بعدت طرق , اسهل طريقة للحصول على بطاقة الكترونية بدون اي شروط , يمكن استعمالعا على المواقع التي تطلب التاكيد ببطاقة بنكية للاستفادة من الخدمات المجانية مثل VPS جوجل , VPS امازون و العديد من المواقع التي تقدم خدمات مقابل التاكيد بالبنوك الالكترونية طريقة الحصول على بطاقة ماستركارد Mastercard افتراضية مجانا اليوم سوف نقدم لكم طريقة الحصول على بطاقة افتراضية ماستر كارد  Mastercard مجانية VCC , بها ارقام الحساب مع تاريخ نهاية الصلاحية و ثلاثة ارقام سرية  , كل هذه البيانات التي تطلبها منك المواقع لتفعيل اي حساب تريد تجربته بالمجان مثل موقع امزون الذي يوفر VPS لمدة سنة كاملة مجانا . العرض من طرف ياندكس الروسي Yandex هو متعدد الخدمات مثل جوجل , يحتوي على محرك بحث , بريد الكتروني و الذي يهمنا في هده التدوينة هو Money Yandex المصرف او البنك الالكتروني , حيث يمكنك من خلاله الحصول على بطاقة افتراضية بمجرد ال...
Enregistrer un commentaire
Lire la suite