[درس] أهم أكواد css ودور كل واحد منها
السلام عليكم ورحمة الله تعالى وبركاته في درس جديد وحصري على مدونتنا سنشرح فيه أهم أكواد css ودور كل كود على حدى , طبعا لغة css من أهم اللغات التي تستعمل في تحسين شكل المواقع والمدونات وأكوادها عديدة , سأقدم لكم أهمها في هذه التدوينة ودورها نبدأ على بركة الله :
أكود css ودورها :
background : هذا الكود مسؤول عن الخلفية بحيث من خلاله تستطيع التعديل على ألوان الخلفية وحجمها والمزيد مثلا للتحكم في لون الخلفية تكتب background-color: #ffffff وهكذا تحصل على خلفية بيضاء ويمكنك تغيير اللون عن طريق تغيير الكود الخاص باللون .
width : من خلال هذا الكود تستطيع التحكم في عرض التصميم أو الإضافة بحيث تكتب width : 100px ويمكنك تغيير العرض بتغيير قيمة px .
height : من خلال هذا الكود تستطيع التحكم في طول التصميم أو الإضافة بحيث تكتب height : 100px ويمكنك تغيير الطول بتغيير قيمة px أيضا .
float : تسطيع من خلاله التحكم في مكان تواجد التصميم أو الإضافة بحيث إذا أردت أن بظهر التصميم في اليمين تكتب float : وإذا أردت أن يظهر في اليسار تكتب float : left .
font : هذا الكود خاص بالكتابة بحيث من خلاله تستطيع التحكم في نوع الخط وحجمه والمزيد بحيث تستطيع كتابة جميع خصائص الخط في سطر واحد مثلا font : 13px DroidKufi-Regular بحيث نكون قد كتبنا حجم ونوع الخط معا , أو يمكنك كتابة كل واحد على حدى بحيث نوع الخظ يكتب كالتالي : font-family : DroidKufi-Regular وحجم الخط يكتب كالتالي font-size : 13 px وهكذا تستطيع التحكم في باقي خصائص الخط .
color : تستطيع من خلاله التحكم في الألوان إما ألوان الكتابة وباقي المكونات ويكتب على الشكل التالي color : #ffffff .
padding : تستطيع من خلال هذا الكود التحكم في أبعاد التصاميم ويمكن كتابته في سطر واحد بحيث تكون جميع الأبعاد (يمين - يسار - أعلى - أسفل ) في سطر واحد padding : 1px 0px 1px 2 px وهذا يسمى اختصارا أو تكتب كل واحد على حدى وذالك بالطريقة التالية للتحكم في الأبعاد العلوية تكتب padding-top : 1px للتحكم في الأبعاد في اليمين تكتب padding-right : 0px للتحكم في أبعاد اليسار تكتب padding-left : 1px للتحكم في ابعاد الأسفل تكتب padding-bottom : 2px طبعا تستطيع تغيير قيمة px بما يناسب .
margin : لديه تقريبا نفس خصائص padding لذلك لا داعي لإعادة الشرح ما طبق على padding نفسه سيطبق على margin .
border : تستطيع من خلاله عمل حدود للتصاميم بحيث تستطيع كتابته في سطر واحد border : 1px solid #fff أو كتابة كل واحد على حدى بحيث مثلا إذا اردت أن تضع حد في الأعلى فقط تكتب border-top : 1px solid #fff ويمكنك تغيير top حسب المكان الذي تريد أن يظهر فيه الحد كما تستطيع عمل حدود دائرية عن طريق كتابة border-radius : 1px solid #fff ويمكنك تغيير اللون وpx إلى ما يناسبك .
text : تستطيع أيضا من خلالها التحكم في خصائص الخط كمكان تواجد والمزيد فمثلا لتحدد مكان ظهور الكتابة داخل الإضافة تكتب text-align : left وتغيير left حسب مكان الذي تريد وأيضا يمكنك تغيير align حسب الخاصية التي تريد إضافتها للكتابة.
إلى هنا نكون قد أنهينا الدرس إذا أعجبكم الدرس لا تبخلوا علينا بالتعليقات المشجعة ولا تنسوا مشاركته مع الأصدقاء
ملحوظة : هذا الدرس أخذ مني وقت وجهد كبير لكتابته لذلك لا تنقل الموضوع وتنسبه إليك والله بكل ما تعملون خبير .