مازلنا نقدم لكم المحاضرات التي تقدم في دورة تصميم وبرمجة المواقع التي تقدم على منصة رواق والتي يقدمها ايمن احمد القضاة المحاضر في عمادة التعليم الإلكتروني والتعلم عن بعد - جامعة الدمام، ولمناقشة هذه الموضوعات على #برمجة_المواقع_مادة_رواق على تويتر.
في
هذه المرة سوف نطبق ما تناولناه في المرة السابقة وذلك بتفعيل طرق الكتابة التي
تناولناه في كتابة لغة الـ CSS.
التعليق |
البرمجة اللغوية للصفحة |
|
هنا
بداية العمل في الصفحة
|
<html>
|
|
هنا
بداية الـ Head والذي سوف نكتب بداخله
قواعد الـ CSS
|
<head>
|
|
هنا
بداية الـ Style والذي ينبه المتصفح إلى
وجود قواعد مكتوبة بلغة CSS وبدون هذا الوسام لن
يقراء المتصفح هذه القواعد.
|
<style>
|
|
هنا
كتبنا قاعدة من النوع CSS
Selector حيث أشرنا للمتصفح أنه يجب أن يقراء كل العناوين التي تأخذ
الوسام h1 داخل القطاع header ويعطيها الصفات التي بين قوسين وهي برواز خارجي بمقدار
30 بيكسل ويكون لونه أحمر ومزدوج الخط، والخط جعلنا 50 بيكسل
|
header h1}
border :30px red double;
font-size :50px;
{
|
|
هنا
كتبنا قاعدة أخرى من النوع CSS
Selector حيث أشرنا للمتصفح أن يجب أن يقراء كل المقاطع النصية التي تأخذ
الوسام p داخل القطاع header ويعطيها الصفات التي بين
القوسين وهي خط مقاسه 20 بيكسل
|
header p}
font-size :20px;
{
|
|
هذه
المرة أصبح الأمر مختلف فقاعدة CSS Selector تم تطبيقها على قطاع الـ Section وخصصنا فيها كل النصوص التي
تأخذ التاج h1 وجعلنا صفاته ذات برواز
30 بيكسل وأخضر ومزدوج الخطوط.
|
section h1}
border :30px green double;
{
|
|
|
section p}
font-size :20px;
color :yellow;
background-color: blue;
{
|
|
هنا
اسلوب آخر من أساليب كتابة قاعدة CSS باستخدام الـ id حيث وصفنا للمتصفح أن أي وسام يأخذ هذه القواعد يصبح
الخط 35 بيكسل، ولونه أحمر فاتح.
|
#s1}
font-size :35px;
color: pink;
{
|
|
هنا طريقة
أخرى لكتابة لغة الـ CSS باستخدام الـ Classحيث وضعنا نقطة ثم اسم الـ Class وتعطي للوسام الذي يطبق
عليها خط مقاسه 25 بيكسل، ولون أخضر
|
.c1}
font-size :25px;
color :green;
{
|
|
هنا
أغلقنا ال الوسام الخاص بلغة ال CSS وهو style ووسام الـ head
|
</style>
</head>
|
|
هنا
فتحنا وسام body لنضع فيه محتويات الصفحة
ووضعنا فيه وسامين عامين هما الـ header والـ Section وستلاحظ الآتي:
|
<body>
<header>
<h1>first title</h1>
<p>first text</p>
|
|
هنا أعطينا
الوسام P تعريف
خاص به من النوع Class وأعطينا اسم هو C1، ولهذا سنلاحظ أن النص
الداخل في هذا الوسام شكل مختلف عن بقية النصوص التي بداخل القطاع header رغم أن القطاع نفسه قد
أخذ توصيف من النوع CSS Selector.
|
<p class="c1">2sc text</p>
|
|
|
<p>3th text</p>
|
|
هنا نفس
الحالة التي سبق وأشرنا إليها
|
<p class="c1">4th text</p>
|
|
هنا أعطينا الوسام
P
تعريف خاص به من النوع id وأيضًا تعريف من النوع Class ولكنه طبق النوع الأول
وذلك لأنه مقدم في الترتيب على كل طرق كتابة الـ CSS
|
<p id="s1"
class="c1">5th text</p>
</header>
|
|
هنا
بداية القطاع section
|
<section>
<h1>first title</h1>
<p>first text</p>
<p>2sc text</p>
|
|
هنا
أعطينا الوسام P
التعريف Class = “c1”
|
<p class="c1">3th text</p>
|
|
|
<p>4th text</p>
|
|
هنا
أعطينا الوسام P التعريف id=”s1”
|
<p id="s1">5th text</p>
</section>
|
|
هنا
أغلقنا الصفحة ومحتوياتها
|
</body>
</html>
|
هذا هو شكل الصفحة السابقة:
إلى أن نلتقي للمزيد من المقالات أرجوا العودة إلى
روابط الاستوديو المختلفة على الفيس بوك على جوجل بلاس على تويتر على بيهانسا
ليست هناك تعليقات:
إرسال تعليق