عرب واى
عزيزي آلزآئر

لـَاننآ نعشق آلتميز و آلمميزين يشرفنآ آنضمآمك معنآ في منتدى عرب واى

وحينمآ تقرر آن تبدآ مع منتدى عرب واى ينبغي عليك آن تبدآ كبيرآ .. فآلكل كبيرُُ هنآ . وحينمآ تقرر آن تبدآ في آلكتآبه في منتدى اورجينال..

فتذكر آن منتدى اورجينال يريدك مختلفآ .. تفكيرآ .. وثقآفةً .. وتذوقآ .. فآلجميع هنآ مختلفون ..

نحن ( نهذب ) آلمكآن ، حتى ( نرسم ) آلزمآن !!

لكي تستطيع آن تتحفنآ [ بمشآركآتك وموآضيعـك معنآ ].. آثبت توآجدك و كن من آلمميزين..

عرب           واى

بواسطة issam جميع اكواد :تجميل منظر الصندوق الماسي - الإثنين ديسمبر 19, 2016 10:06 pm

بواسطة issamكود جعل الصور بشكل منبثق عند الضغط عليها في المساهمات - الإثنين ديسمبر 19, 2016 10:04 pm

بواسطة issamاكواد صور كخلفية للمواضيع وللبيانات - الإثنين ديسمبر 19, 2016 9:50 pm

بواسطة issamالصورة الشخصية اكثر احترافية - الإثنين ديسمبر 19, 2016 9:13 pm

بواسطة kvolcano كود جديد وحصرى وهو كود جعل ازرار صندوق لرد بشكل دائرى مدبول - الأحد ديسمبر 18, 2016 10:44 pm

بواسطة kvolcanoكود رائع لوضع خلفية لأزرار المنتدى حتى تصبح النتيجة - الأحد ديسمبر 18, 2016 10:26 pm

زائر✪ الشيخ عبد القهار كشف مجاني جلب الحبيب فك السحر هاتف 0021653448826 ✪ - الخميس سبتمبر 29, 2016 11:16 am

بواسطة ELMasRyyتفضلوا كود css وضع اطار وصورة كخلفية للاقتباسات المنتدي - الثلاثاء سبتمبر 27, 2016 4:14 pm

بواسطة وهبة الساحرcss طريقة جعل شريط التمرير اكثر اثارة واحترافية مما يبدوا عليه - الثلاثاء أغسطس 02, 2016 6:14 pm

بواسطة وهبة الساحرJAVASCRIPT جديد كود الوصف بشكل مميز ومحترف - الخميس يوليو 28, 2016 8:57 pm

بواسطة JAR7 قس نبضك لتعرف احي انت ام ميت - الإثنين أبريل 25, 2016 8:18 pm

زائرHTML كود شريط متحرك ويمكن التحكم فيه كما تشاء ! - الأربعاء أبريل 06, 2016 12:58 am

بواسطة JAR7كود Css ايطارات منقطه حول الاقسام والمساهمات والمواضيع - الأربعاء مارس 09, 2016 7:22 am

بواسطة JAR7كود عمل شعار لكل قسم في المنتدى بمعني سيكون في الكود جزئيين للتغير الاول رقم القسم الثاني رابط الصوره - الثلاثاء مارس 08, 2016 7:45 am

بواسطة JAR7(كود) وضع احصائيات المنتدى وصورة ايضا واطار وخلفية ليظهر الشكل مناسب لك - الثلاثاء مارس 08, 2016 7:31 am

المواضيع آخر

الأكثر مشاهدة

by issam جميع اكواد :تجميل منظر الصندوق الماسي - الإثنين ديسمبر 19, 2016 10:06 pm

by issamكود جعل الصور بشكل منبثق عند الضغط عليها في المساهمات - الإثنين ديسمبر 19, 2016 10:04 pm

by issamاكواد صور كخلفية للمواضيع وللبيانات - الإثنين ديسمبر 19, 2016 9:50 pm

by issamالصورة الشخصية اكثر احترافية - الإثنين ديسمبر 19, 2016 9:13 pm

by kvolcano كود جديد وحصرى وهو كود جعل ازرار صندوق لرد بشكل دائرى مدبول - الأحد ديسمبر 18, 2016 10:44 pm

by kvolcanoكود رائع لوضع خلفية لأزرار المنتدى حتى تصبح النتيجة - الأحد ديسمبر 18, 2016 10:26 pm

زائر✪ الشيخ عبد القهار كشف مجاني جلب الحبيب فك السحر هاتف 0021653448826 ✪ - الخميس سبتمبر 29, 2016 11:16 am

by ELMasRyyتفضلوا كود css وضع اطار وصورة كخلفية للاقتباسات المنتدي - الثلاثاء سبتمبر 27, 2016 4:14 pm

by وهبة الساحرcss طريقة جعل شريط التمرير اكثر اثارة واحترافية مما يبدوا عليه - الثلاثاء أغسطس 02, 2016 6:14 pm

by وهبة الساحرJAVASCRIPT جديد كود الوصف بشكل مميز ومحترف - الخميس يوليو 28, 2016 8:57 pm

by JAR7 قس نبضك لتعرف احي انت ام ميت - الإثنين أبريل 25, 2016 8:18 pm

زائرHTML كود شريط متحرك ويمكن التحكم فيه كما تشاء ! - الأربعاء أبريل 06, 2016 12:58 am

by JAR7كود Css ايطارات منقطه حول الاقسام والمساهمات والمواضيع - الأربعاء مارس 09, 2016 7:22 am

by JAR7كود عمل شعار لكل قسم في المنتدى بمعني سيكون في الكود جزئيين للتغير الاول رقم القسم الثاني رابط الصوره - الثلاثاء مارس 08, 2016 7:45 am

by JAR7(كود) وضع احصائيات المنتدى وصورة ايضا واطار وخلفية ليظهر الشكل مناسب لك - الثلاثاء مارس 08, 2016 7:31 am



أهلا وسهلا بك زائرنا الكريم, أنت لم تقم بتسجيل الدخول بعد! يشرفنا أن تقوم بالدخول أو التسجيل إذا رغبت بالمشاركة في المنتدى

عرب واى

عرب واى | مركز عرب واي مختص بتطوير وتصميم المواقع وتبادل الخبرات و يحتوي علي أقسام متنوعة

Lên đầu trang

إرسال موضوع جديد  إرسال مساهمة في موضوع

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل  رسالة [صفحة 1 من اصل 1]

#1
وهبة الساحر


المدير العام



المدير العام

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

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

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

الرمز:

   <body bgcolor="#FF0000">
   

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

الرمز:

   body {background-color: #FF0000;}
   

كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS:
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
لكن أين نضع أوامر 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، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
المهم هنا هو إنشاء رابط بين ملف 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.
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
هذه الفكرة يمكنها أن توفر عليك الكثير من الوقت والجهد، إذا أردت مثلاً أن تغير لون خلفية موقع يحوي 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://3arb-way.a7larab.net

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة  رسالة [صفحة 1 من اصل 1]

إرسال موضوع جديد  إرسال مساهمة في موضوع


مواضيع مفيدة

تحميل ...