منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


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

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
JoryAbdallah
سوبر الإبداع 

JoryAbdallah

انثى
السمك
عدد المساهمات : 126400
نقاط النشاط : 142117
السٌّمعَة : 3006
بلد العضو : كيف تعمل تقنية CSS Saudi-10
العمر : 35

كيف تعمل تقنية CSS Empty
مُساهمةموضوع: كيف تعمل تقنية CSS   كيف تعمل تقنية CSS Emptyالإثنين نوفمبر 28, 2016 11:14 pm

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

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

لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:
باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:

الكود:

   <body bgcolor="#FF0000">
   

مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر:

الكود:

   body {background-color: #FF0000;}
   

كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS:
كيف تعمل تقنية CSS Figure001.ar
لكن أين نضع أوامر 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، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم
كيف تعمل تقنية CSS Figure002
المهم هنا هو إنشاء رابط بين ملف 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.
كيف تعمل تقنية CSS Figure003.ar
هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 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 في متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://taqnyiat.ahlamontada.com/
Âñå ÀsLń Môŝibă
عضو محترف 

Âñå ÀsLń Môŝibă

انثى
القوس
عدد المساهمات : 1202
نقاط النشاط : 1287
السٌّمعَة : 8
بلد العضو : كيف تعمل تقنية CSS Algeri10
العمر : 19

كيف تعمل تقنية CSS Empty
مُساهمةموضوع: رد: كيف تعمل تقنية CSS   كيف تعمل تقنية CSS Emptyالخميس ديسمبر 08, 2016 4:23 pm

بارك الله فيك
وشكرا عالافادة


اتمنى ان اكون سبب سعادة لمن حولي
وأن لااكون وجعا لاحد
...ربماآ انا لااستطيع إسعآد أحد ..ولكن اقسم انني لا احب ايذاء احد
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Mr.Mohammed
سوبر الإبداع 

Mr.Mohammed

ذكر
عدد المساهمات : 9674
نقاط النشاط : 10588
السٌّمعَة : 174
بلد العضو : كيف تعمل تقنية CSS Saudi-10

كيف تعمل تقنية CSS Empty
مُساهمةموضوع: رد: كيف تعمل تقنية CSS   كيف تعمل تقنية CSS Emptyالأحد ديسمبر 11, 2016 7:22 pm

شكرا على الموضوع المميز وما تقدمينه للابداع والى الامام دوما
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://tatwer3araby.ahlamontada.com
Mr Robot
سوبر الإبداع 

Mr Robot

ذكر
القوس
عدد المساهمات : 35481
نقاط النشاط : 37581
السٌّمعَة : 108
بلد العضو : كيف تعمل تقنية CSS Lebano10
العمر : 35

كيف تعمل تقنية CSS Empty
مُساهمةموضوع: رد: كيف تعمل تقنية CSS   كيف تعمل تقنية CSS Emptyالثلاثاء مارس 21, 2017 1:59 am

بارك الله بيك
واصل
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Princess Abir
عضو ذهبي 

Princess Abir

انثى
الثور
عدد المساهمات : 2130
نقاط النشاط : 2168
السٌّمعَة : 9
بلد العضو : كيف تعمل تقنية CSS Algeri10
العمر : 20

كيف تعمل تقنية CSS Empty
مُساهمةموضوع: رد: كيف تعمل تقنية CSS   كيف تعمل تقنية CSS Emptyالثلاثاء مارس 21, 2017 2:04 am

طرح مميز يعطيك العافية


كيف تعمل تقنية CSS 21484110
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.ibda3araby.com
abuahmad
عضو محترف 

abuahmad

ذكر
السرطان
عدد المساهمات : 1485
نقاط النشاط : 1637
السٌّمعَة : 4
العمر : 54

كيف تعمل تقنية CSS Empty
مُساهمةموضوع: رد: كيف تعمل تقنية CSS   كيف تعمل تقنية CSS Emptyالأربعاء مايو 10, 2017 9:09 am

موضوع رائع



وطرح مميز



شكرا

الرجوع الى أعلى الصفحة اذهب الى الأسفل
Picasso-Des
سوبر الإبداع 

Picasso-Des

ذكر
الجدي
عدد المساهمات : 10775
نقاط النشاط : 11119
السٌّمعَة : 136
بلد العضو : كيف تعمل تقنية CSS Ioao10
العمر : 37

كيف تعمل تقنية CSS Empty
مُساهمةموضوع: رد: كيف تعمل تقنية CSS   كيف تعمل تقنية CSS Emptyالسبت يونيو 16, 2018 11:16 pm

يعطيكم العافية على الطرح كيف تعمل تقنية CSS 837876428
كل الاحترام كيف تعمل تقنية CSS 433646733
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://medialive.pro
Mohamed Sobhi
عضو ذهبي 

Mohamed Sobhi

ذكر
الاسد
عدد المساهمات : 3330
نقاط النشاط : 3996
السٌّمعَة : 57
بلد العضو : كيف تعمل تقنية CSS Egypt10
العمر : 24

كيف تعمل تقنية CSS Empty
مُساهمةموضوع: رد: كيف تعمل تقنية CSS   كيف تعمل تقنية CSS Emptyالسبت يوليو 21, 2018 11:45 am

درس اكثر من رائع شكرا لك على الطرح
لا تحرمنا من جديدك وردة حمراء


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

مصطفى ستيتان

ذكر
عدد المساهمات : 1130
نقاط النشاط : 1203
السٌّمعَة : 11
بلد العضو : كيف تعمل تقنية CSS Ioao10

كيف تعمل تقنية CSS Empty
مُساهمةموضوع: رد: كيف تعمل تقنية CSS   كيف تعمل تقنية CSS Emptyالإثنين يوليو 23, 2018 9:03 am

جزاكم الله كل خير 


سبحان الله والحمدلله ولا إله إلا الله 
 
كيف تعمل تقنية CSS Do
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
D.YouSSef
سوبر الإبداع 

D.YouSSef

ذكر
الدلو
عدد المساهمات : 6124
نقاط النشاط : 7079
السٌّمعَة : 34
بلد العضو : كيف تعمل تقنية CSS Morocc10
العمر : 52

كيف تعمل تقنية CSS Empty
مُساهمةموضوع: رد: كيف تعمل تقنية CSS   كيف تعمل تقنية CSS Emptyالخميس أغسطس 30, 2018 3:38 am

جزاك الله خيراعلى العطاء
والدرس الجميل والمفيد
 واصل تالقك
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
كيف تعمل تقنية CSS
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الابداع العربي ::  تقنيات احلى منتدى ::  تقنيات أحلى منتدى :: دروس تعلم لغات البرمجة-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى الإبداع العربي 2020