مازلنا نقدم لكم المحاضرات التي تقدم في دورة تصميم وبرمجة المواقع التي تقدم على منصة رواق والتي يقدمها ايمن احمد القضاة المحاضر في عمادة التعليم الإلكتروني والتعلم عن بعد - جامعة الدمام، ولمناقشة هذه الموضوعات على #برمجة_المواقع_مادة_رواق على تويتر.
اليوم
سوف نبدأ الحديث عن لغة css وعن كيفية التعامل معها،
فهذه اللغة تهتم بوصف محتوى صفحة الـ (html) حتى يفهمها المتصفح وإعطاء الشكل
الجمالي لأوسمة لغة (html) فهي بالتالي تؤثر عليها.
مكان
وطريقة كتابة لغة CSS.
في
هذه المرحلة سوف نقوم بكتابة الأوسمة الخاصة بهذه اللغة في منطقة الـ <head> </head>، وأول وسام سوف نتعرض له هو <style> </style> والذي يبدأ مع وسام الـ (head) وينتهي معه وهو الذي يشير إلى
وجود تعريفات خاصة بلغة CSS.
هناك
ثلاث طرق لكتابة لغة CSS.
الطريق
الأولى تعرف بالـ #id
|
الطريقة الثانية تعرف بطريقة .class |
الطريقة
الثالثة وهي css.selector
|
تناولنا
في المحاضرات السابقة الـ id وقلنا أنه هو عبارة عن
توصيف أو attribute لأوسمة html، فمن خلال هذا التوصيف أستطيع
أن أعطيه الخصائص المميزة له في لغة CSS، وهكذا نكتب الـ id.
<head>
<style>
#id name }
Your
css tag
{
</style>
</head>
سنتعرض الآن
لبعض الأمثلة التي من الممكن أن تعيننا على التطبيق.
n
لتصغير
حجم الصورة في الموقع نسطيع أن نعطي للصورة id
هكذا:
<img
id=”name” src=”image name”/>
ثم نذهب إلى
الـ head ونعرف الـ id للصورة هكذا:
#name}
Width:
400 px;
{
لعمل برواز
خارجي للمقطع أو الصورة
#name}
Border-width:
4px;
Border-color:
green;
Border-style:
solid or double or dashed;
حيث أن شكل
البرواز متاح لك أن تجعله سادة ذات لون واحد، أو منقوط، أو خطوط متقطعة.
ويمكن
اختصار هذه الخطوات في سطر واحد:
Border:
2opx red solid;
لاحظ أننا
وضعنا مسافة قبل كل معلومة.
|
تكون
هذه الطريقة مفيدة عند إعطاء أكثر من وسام من أوسمة html توصيف مشترك بين هذه الأوسمة.
فمثلاً
لو أن لدي أكثر من وسام أريد أعطيهم نفس مقاس الخط مثل <p> <ol> <ul> <h1> فنجعل مقاس الخط 30 نقطة.
نقوم
بكتابة التوصيف هكذا
.name of class}
Font-size: 30pt;
{
ثم
نذهب إلى الوسم ونعطيه التوصيف الماضي هكذا:
<p class=”name of class”>
|
تنقسم
إلى قسمين؛ القسم الأول باستخدام أوسمة Html.
وكمثال
على ذلك
P {.....}
فالـ (P) تشير إلى مقاطع النص وما بين القوسين هي القواعد الخاصة بالـ CSS
فسنفترض
لو أن عندي في الصفحة عدد ضخم من النصوص ونحن نريد أن نكتب قاعدة CSS تحكم هذه المقاطع مرة واحدة
بدون العودة إلى كل مقطع...
P}(هنا نكتب الوسام دون
أقواسه المعتادة)
أكتب هنا القواعد والتعليمات المطلوبة
Font-size: 30px;
{
وكمثال آخر باستخدام
وسام الفيديو
Video }
Width: 300px;
{
أما
القسم الثاني فهي استخدام العلاقة بين عناصر Html حتى أكتب قواعد ال CSS أو
ما يعرف بـ (Relationship
html tags):
فمثلا لو أن لدي مقطع به
عدد من النصوص وأريد تطبيق قواعد محددة على هذه النصوص، فسنكتب التالي:
Section p{....}
وكأنك تقول للمتصفح أن
كل هذه النصوص المرتبطة بهذا القطاع سنطبق عليها القواعد التي بين القوسين.
في المثال التالي توضيح
أكثر لهذه الفكرة:
<style>
Header
p}
Color:
orange;
{
<header>
<p>
……</p>
<p>…..</p>
</header>
<section>
<p>….</p>
<p>….</p>
</section>
لقد قمنا في
هذا المثال بتغيير لون النصوص في الـ (header) للون البرتقالي بينما
ظلت النصوص في المقطع (section) لونها سوداء كما هي،
وكأننا وجهنا المتصفح ليقراء كل المقاطع النصية الموجودة في الـ (header) خسب القواعد التي
وضعناها في الـ CSS.
فلو مثلاً
أردنا أن نغير المقاطع النصية داخل الـ (section) فسيصبح بالشكل التالي:
Section
p}
Color:
pink;
{
|
الأولويات
في CSS:
سنفترض
أننا لدينا وسام html وهذا الوسام يحتوي على عددة
توصيفات متماثلة فهنا نطر تساؤل أي توصيف
سوف ينفذه المتصفح؟ وللإجابة على هذا السؤال سنطرح هذا المثال بشكل أوقع مطبقين ما
قلناه في المثال التالي:
<p class=”a b” id=”p1”>
نضع
النص
</p>
لاحظ
في المثال السابق أن الوسام احتوى على ثلاثة توصيفات أحدهما من النوع id وآخران من النوع class فأي توصيف سوف يتعامل معه
المتصفح؟
ولتعقيد
الأمر أكثر سوف نعطي كل توصيف موضوع في وسام <style> قيمة لونية.
.a}
Color:
pink;
{
.b}
Color=red;
{
#p1}
Color=black;
{
لو
طبقنا هذا التطبيق فإن النتيجة هي تطبيق التوصيف الأخير.
ونستطيع
أن نرتب أولوية استجابة المتصفح لطرق كتابة الـ CSS على هذا النحو
أولا:
باستخدام الـ ID
وفي
التدوينة التالية سوف نطرح لكم تطبيقًا لما قدمناه في هذه التوينة.
إلى أن نلتقي للمزيد من المقالات أرجوا العودة إلى
روابط الاستوديو المختلفة على الفيس بوك على جوجل بلاس على تويتر على بيهانسا