تعلم لغة CSS مجانا للمبتدئين لكي تصبح محترف CSS

0

تعلم لغة CSS مجانا للمبتدئين

ماهي لغة CSS , هي اختصار لكلمة Cascading Style Sheets ومعناها أوراق الأنماط المتتالية هي لغة التنسيق

والتخطيط الخاص بالصفحة , هي التي تشيف الخطوط وتعدل علي الألوان والخلفيات وتجعل أيضا الاشكال متجاوبة

نرشح لك أيضا هذا المحتوي :- شرح اضافة أكواد قصيرة لووردبريس shortcodes

هذه اللغة ظهرت من عام 1996 وشخصيا من أكثر اللغات المفضلة لدي .وسنقوم بعمل كورس علي موقعنا لـ

تعلم لغة CSS , تابع معنا الشرح الأول للغة CSS

كورس تعلم لغة CSS

كيفية كتابة لغة CSS

لغة سي اس اس تكتب بثلاث طرق

1- طريقة وسم Style

تضع بين وسم style بحيث تكون مثل هذا المثال

<style>

content

</style>

كما ترون في المثال كلمة Content هي التي يضع بدالها أكواد CSS

2- اضافة رابط (Link) في <head>

هذه الطريقة مفضلة للبعض وتجعل ملف ال CSS منفصل تماما عن HTML وهي تضاف أسفل وسم Head هكذا

<link rel=”stylesheet” href=”##”>

وبدل ال ## تضع ملف الذي به الاكواد وليكن اسمه style.css ,

3- وضع كود css داخل العنصر نفسه وليكن مثل العنصر اسمه

class=”meta alignright”

تضع بجانبه الكود مباشرة:-

style=”color: red;”

والنتيجة تكون هكذا

class=”meta alignright” style=”color: red;”

هذه الثلاث طرق لكتابة أكواد CSS ولك حرية الاختيار في الثلاث طرق

بنية لغة CSS

تعلم لغة CSS

كما ترون في الصورة كلمة Selector هي الشي او العنصر المحدد في لغة HTML الذي تريد وضعه

Property تعني الخاصية مثل خاصية color وخاصية Background وخاصية Font-size وكل هذا سنشرحه قريبا

وكلمة Value تعني قيمة هذه الخاصية سواء كود اللون او ججم خط , الخ

الخط – Font

الخطوط في لغة CSS لديها خواص عديدة سنبدأ بخاصية Font-Family

هي عائلة الخطوط الذي يتم اضافتها , وفي مقال تغيير الخطوط في موقع ووردبريس شرحت كيفية اضافة خطوط

في منصات ووردبريس يدويا وكان في الشرح اضافة Font-family:Cairo; مثلا

كلمة Cairo هي حزمة النصوص الذي قمت باضافتها في الصفحة , ماهو أفضل موقع للخطوط ؟ بالطبع موقع

GoogleFont الذي به عدد من الخطوط العربية الجيدة والمتميزة والسريعة ويمكنك اضافتهم في صفحتك

والمميز في خاصية Font-family هي خاصية الخطوط البديلة في حالة عدم قراءة الخط الأصلي فمجموعة الخطوط

الأخري ستحل محل هذا الخط تماما مثل هذا الكود لاحظ :-

Font-family Arial, Tahoma, serif;

كما ترون الخط الأساسي Arial

Font-style

هذه الخاصية لها ثلاث قيم وهم normal & italic & oblique وستري الفرق بينهم في هذه الصورة

كما ترون في الصورة هذا الفرق بين الثلاث قيم وتكتب بهذه الطريقة:- font-style: italic;

خاصية Font Weight

هذه الخاصية تعني او معناها وزن الخط ويمكنك اضافة ثلاث قيم وهم normal وlighter و bold اوممكن استخدام الارقام مثل Font-weight:900; وستري مثال ماشرحناه في هذه الصورة

كما ترون الصورة تشرح وتبسط اي شي هذه الخاصية تضاف للعناوين .

خاصية Font-Size

هذه الخاصية معناها حجم الخط وهذه الخاصة لديها قيم عديدة , فممكن ان تضيف لها القيم بالكلمات مثل :-

font-size: x-large;

او تضاف حجم الخط باطوال واحجام معينة مثل :-

font-size: 17px;

font-size: 0.8em;

ويمكن ايضا باحجام نسبية مثل هذا الكود :-

font-size: 80%; وهذه هي قيم خاصية Font-Size مقتبسة من موقع ويكي حسوب

/* <absolute-size> كلمات محجوزة تُمثِّل أحجامًا مطلقة */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size> كلمات محجوزة تمثل أحجامًا نسبيةً */
font-size: smaller;
font-size: larger;

/* <length> أطوال مطلقة */
font-size: 12px;
font-size: 0.8em;

/* <percentage> أطوال نسبية */
font-size: 80%;

/* القيم العامة */
font-size: inherit;
font-size: initial;
font-size: unset;

وانتهي الجزء الأول من تعلم CSS لاتنسي مشاركة الموضوع اذا افادك ولا تنسي الاطلاع علي شهاداتي واذا اردت الاستفسار عن أي شي لاتتردد في كتابته في تعليق

المصادر :-

ويكيبيديا :- أوراق الأنماط المتتالية

ويكي حسوب :- CSS

لمتابعي موقع ويب تايمز فقط
سنرسل لك كلمات رئيسية عالية الزيارة وعالية الربح CPC مجانا !
يمكنك إلغاء الاشتراك في أي وقت

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.

3 × 2 =