الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

مقدمة فى تقنية Css

بدأه Omar Eladel في 18 أبريل 2008 · 2 رد · 1,183 مشاهدة · في منتدى تصميم صفحات الويب
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

السلام عليكم و رحمة الله و بركاته

Cascading Style Sheet

منذ فترة قفزت فكرة تعلم برمجة مواقع الانترنت بلغة HTML & Javascript & DHTML , فبحثت عن كتب و مقالات و تعرفت على تقنية CSS و وجدت مقالات تشرحها ببساطة ففكرت فى نقلها للمنتدى لتعريف الاخوة بها .


  • مقدمة عن تقنية CSS :
    CSS هى اختصار لـ Cascading Style Sheet و هى تعنى ورق الانماط المتعاقبة .
    ورق الانماط يتكون من ملفات بامتداد .css و هى تتألف من مجموعة من الاكواد تبلغ المتصفح كيف يظهر صفحة HTML . انها تعطى للمصمم قابلية للتحكم فى الصفحة اكثر مما تعطيها لغة HTML .
    باستخدام CSS , المصمم يستطيع فصل محتويات صفحة HTML عن النمط الخاص بها .

  • الشكل العام لصيغة CSS
    العنصر { التابع : "القيمة" }
    	 h1 {font-family : "tahoma"}
	 h4 {color : "red" }


    و اذا كان هناك عنصر له اكثر من تابع :
    العنصر { التابع : "القيمة" ؛ التابع : "القيمة " }

    	 p { color:"red"; font-family:"tahoma"}


    اذا كان هناك اكثر من عنصر لهم نفس التابع :
    عنصر1 , عنصر2 , عنصر3 , {التابع :"القيمة"}

    	 h1,h4,p{color:#cc0000}


    اذا كان العنصر له اكث من تابع :

    	 p.courier {font-family:"courier new"}
	 p.verdana {font-family:"verdana"}


    قم بتطبيق هذا الكود لتعرف كيف تستخدم اكثر من class 

    <html>
<head><title>Example in CSS </title>
<style>
p.red {color:#ff1b1b}
p.blue{color:#3e18e1}
p.green{color:#17d629}
</style>
</head>
<body>
<p class="red"> Red Text </p>
<p class="blue">Blue Text</p>
<p class="green">Green Text</p>
</body>
</html>


    اذا اردت تطبيق تصنيف على اكثر من عنصر

    	 .red {color:#ff1b1b}
	 .blue{color:#3e18e1}
	 .green{color:#17d629}


    قم بتطبيق هذ المثال لتتضح الصورة 

    <html>
<head><title>Example in CSS </title>
<style>
.red {color:#ff1b1b}
.blue{color:#3e18e1}
.green{color:#17d629}
</style>
</head>
<body>
<h1 class="red"> Red Text </p>
<p class="blue">Blue Text</p>
<h5 class="green">Green Text</p>
</body>
</html>



  • طرق ادراج انماط CSS
    هناك ثلاث طرق لادراج انماط CSS فى صفحات HTML .
    1. باستخدام ملف خارجى بامتداد .css
    2. بكتابة الكود كما سبق فى منطقى Head بين وسمى 
      <head><style> CSS code </style></head>


    3. بكتابة الكود فى العنصر المراد تطبيقه Inline.

    اولا : باستخدام ملف خارجى 

    <head><link rel="stylesheet" type ="text/css" href="عنوان الملف بامتداد.css">

    ثالثا : بكتابة الكود Inline :

    هذه الطريقة لا تعطى اى فائدة لـ CSS , و يكون كالتالى .

    	 <p style="font-size:12 pt"> font </p>

    [*]التعليقات فى CSS

مثلها مثل التعليقات فى C++ .

	 //اذا كان التعليق سطر واحد
	 */
	 اذا كان التعليق اكثر من سطر
	 */

السلام عليكم و رحمة الله و بركاته .

من مواضيعى :

[درس] الرسم ثنائى الأبعاد فى Qt

#2

شكراً على الموضوع الجميل

واحب أن اضيف اذا سمحت لي بأن افضل واسهل برنامج في العالم لانشاء وتحرير ملفات css هو برنامج topstyle .

ويوجد على الرابط التالي :

http://www.newsgator.com/Individuals/TopStyle/Default.aspx

كما يمكن التعرف على بعض البرامج الاخرى على هذا الرابط :

http://www.fiftyfoureleven.com/weblog/web-...nt/css-software

وتقبلوا تحياتي

#3

باررررك الله فيهم

مشكوووورين ياخوة

مواضيع مشابهة