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

Css ما نعرف عنها وما لا نعرف عنها !

بدأه العقده في 4 فبراير 2008 · 17 رد · 1,922 مشاهدة · في ASP.NET
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

اخواني مشرفين واعضاء وزوار ماهي CSS وما أهميتها وما نعرفه عنها .

ما جمعته عنها هي أسطر بسيطه جدا لهذا الابتكار وأن الفائدة الاساسية من استخدام تقنيه CSS هي التقليل من الجهد المطلوب بذله لعمليات الادارة والصيانة وتطبيق مظهر مشترك على عدد من الصفحات .. لكن بالاضافة لذلك فان تقنية CSS تضمن أمن شفرة HTML وموقعك بشكل عام . وأكثر من ذلك أن تقنية CSS تجعل موقعك أكثر فاعلية سيقوم المستعرض بجلب ملف CSS مرة واحدة فقط ويخزنه لديه وليس على بقية الصفحات إلا أن ترتبط بهذا الملف المخزن دون أن تحتاج لتخزين أية أساليب داخلها , لذا ستكون ملفات الصفحات أصغر حجماً وأسرع للجلب من الموقع المضيف , وقد يؤدي ذلك إلى زيادة سرعة جلب صفحات الموقع بشكل محسوس إلى مستعرض المستخدم .

اخواني هناك الكثير الكثير الذي نجهله عن سحر هذه التقنيه واهمية استخدامها اذا كنا نطمح إلى الاحترافيه فجزء كبير من تطبيقات الانترنت تعتمد على التصميم والمظهر والباقي Coding

اترك المجال الى كل مهتم ومطور طموح يبحث عن الافضل ان يشارك بما يعرفه حتى نتوسع في معرفة المزيد ويستفيد الجميع من ذلك كما اتمنى من مشرفين قسم ASP.NET ان يثبتوا الموضوع لاهميته .

ليس كل ما يتمناه المرء يدركه

arabteam2000.gif

#2

هذه بعض الروابط المفيدة عن Cascading Style Sheets

http://htmlhelp.com/reference/css/

http://www.w3schools.com/css/default.asp

http://www.freecsstemplates.org/css-templates/

-----------------------------------------------------------------------------------------------------------------------------





 

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

Mohammad Sonaiea
 

#3

سوف أعود للموضوع مع دخلة مطولة جداً في بناء asp.net application with css وسوف نرى ماهي قوتها اللتي يجهلها البعض هنا

لي عودة حينما اصل من السفر خلال يومين ان شاء الله

joseph.gif

logo.gif

CCNA 640-802

مدونتي

#4

عزيزي محمد سماقيه اشكرك كثير الشكر على الروابط

عزيزي الساحر .. ترجع بالسلامه ان شاء الله .. ونحن بانتظارك على احر من الجمر ...........

ليس كل ما يتمناه المرء يدركه

arabteam2000.gif

#5

في البداية اريد منكم ان تظروا إلى موضوعي السابق اللذي أهمل وكان مصيرة سلة مهملات الزمن حاولت من خلاله توضيح اهمية css

لن اخفيكم انني تعذبت في بداية طريقة حتى استطعت ان اطبق معايير css وبالذات الاستغناء عن table والاتعاضه عنه بـ div

/index.php?showtopic=148250

حقيقة عالم الـ css عالم كبير وكان من المفروض على ادارة المنتدى ان تهتم بشانه ولكن اعتقد ان برمجة الويب في الفريق العربي لم تحظى على اهتمام كبير من قبل مسؤلينها

على كل حال سوف نحاول ان نثبت صحة نظرنا ولكن اتمنى منكم المساعده ولو القليل

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

a:link{ text-decoration:none; font-weight:normal; color:#08478E;}
a:hover{ font-weight:normal; text-decoration:none; color:#08356E;}
a:visited{text-decoration:none; font-weight:normal; color:#08478E;}

لننظر إلى الكود بالاعلى ثم نحلله

a:link اي حينما يكون هذا الرابط غير مزار أو المؤشر بعيد عنه 
a:hover  حالت التفعيل أو وضع مؤشر الفارة عليه 
a:visited هذا الرابط قد زرناه من قبل بوساطة هذا الجهاز

قمنا بوضع باقي الخصائص من لون وديكوريت وحجم وتستطيع الزياده بهم حسب رغبتك

هذا القليل والباقي عليك

باقي علي ان اوضح نقطة صغيره فقط

الكود السابق يتم تطبيقه على جميع الروابط في الصفحه ولكن ان اردنا تحديده على جزء معين كـ div فقط

نقوم بكتابته هكذا

DIV a:link{}

وإن اردنا تحديده لكلاس معين سبق وحددنا هكذا

.test a:link{}

هذا والله اعلم جميع ماقلته كان باختصار ويتبقى عليك التجربه والسؤال والاستفسار

وأنا هنا إن أحياني الله

joseph.gif

logo.gif

CCNA 640-802

مدونتي

#6

عزيزي الساحر الله يفتح عليك ان شاء الله من علمه .

الان اين اضع هذا الكود بالضبط اما انه لابد من وجود ملف منفصل css والرمز :a ماذا يعني وكيف احصل على الخصائص كلها مثل link و hover و visited

ليس كل ما يتمناه المرء يدركه

arabteam2000.gif

#7

http://www.w3schools.com/css/pr_pseudo_hover.asp

هذا الرابط للخصائص الاربعه للروابط

بأمكانك اضافة ما أحببت داخل الوسم لكن وفق المعايير

بأمكانك وضعه في ملف منفصل وربطه مع الصفحه الرئيسية أو وضعه كترويسه في الهيدر لكن الافض ان يكون بملف منفصل وهذا من فوائد الـ css لكي تستعمله مع باقي الصفحات

أن توفر لي الوقت سوف اشرح الـ masterpage مع الـ css

joseph.gif

logo.gif

CCNA 640-802

مدونتي

#8

طيب الان اذا وضعت مربع نص كيف اضبط وضعه بالنسبه للي CSS واتعامل مع احداثه

ليس كل ما يتمناه المرء يدركه

arabteam2000.gif

#9

السلام عليكم

ارجو اخي الساحر ان تكمل ما بداته من شرح عن css في موضعك

شكراا

abdullahf4.jpg
#10

اضم صوتي لــ c++2003

ليس كل ما يتمناه المرء يدركه

arabteam2000.gif

#11

أنا جاهز يا أخوان آسف على التأخير لكن من الصعب في الفترة الحاليه ان اقوم بشرح مفصل

سوف اكتفي بالاجابه على الاسئلة

اقتباس
طيب الان اذا وضعت مربع نص كيف اضبط وضعه بالنسبه للي CSS واتعامل مع احداثه

لم افهم مقصدك على العموم ل اردت ان تقم باللعب بشكله الكتابه بداخله سوف اعطيك رابط لبعض الشرح

http://www.cssportal.com/form-elements/text-box.htm

joseph.gif

logo.gif

CCNA 640-802

مدونتي

#12

عزيزي الساحر اولا شكرا على الرابط ثانيا انا اقصد الان مثال لمربع نص تم وضعه في الصفحه سيكون موقعه وضبطه بالشكل التالي :

<asp:TextBox ID="TextBox1" runat="server" Style="left: 220px; position: absolute;top: 591px" Width="81px"></asp:TextBox>

الان سيظهر على الصفحه حسب احداثيات الضبط اعلاه اقدر استغني عن السطر التالي :

Style="left: 220px; position: absolute; top: 591px" Width="81px"></asp:TextBox>

اقدر اتعامل مع السطر هذا بواسطة CSS عوضا عن السطر اعلاه .

<p style = " position : absolute; top : 2px; right : 3px; index-z : 2 >Textbox1</p>

وهل الطريقه هذي صحيحه واين اضعه بالتحديد .... وشكرا في انتظار حلولك الساحره .

اقدم لكم كتاب بالعربي Cascading Style Sheets وجدته اثناء بحثي عن كتب تعليميه تخص تقنية CSS .

Cascading_Style_Sheets.pdf

تم تعديل هذه المشاركة بواسطة العقده في 22 مارس 2008 في 22:30

ليس كل ما يتمناه المرء يدركه

arabteam2000.gif

#13
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
	<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
	<title>Untitled Page</title>
</head>
<body>
	<form id="form1" runat="server">
	<div>
		<asp:TextBox ID="textbox1" CssClass="txtbox" runat="server"></asp:TextBox>
	</div>
	</form>
</body>
</html>

.txtbox
{
	position:absolute;
	top:100px;
	left:200px;
}

بأختصار خلي كودك موجود داخل Stylesheet.css وريح راسك بهالحاله تقدر تستخدمه مع اكثر من textbox

بخصوص طلبك ما اتوقع انه موجود

أعتقد انك رأيته في خاصية font أو border حبيت تطبقه لكن بخاصية Position انا ما سبق وشفته

joseph.gif

logo.gif

CCNA 640-802

مدونتي

#14

اشكرك عزيزي الساحر على التوضيح .. طيب سؤال مهم صراحه الان اغلب المواقع تجد ان الموقع مضبوط على اقل عرض للشاشه 800 * 600 وعند تكبير عرض الشاشه يتخذ التصميم وسط الشاشه حتى لو قمت بتقليص نافذة المتصفح من الجوانب بواسطة الماوس تجد ان جميع الادوات الموجوده في بالتصميم على الموقع تتخذ الوسط وعندما قمت بتحميل تصميم جاهز من النت له نفس الاسلوب المذكور وجدت معه ملف CSS يستقي منه احداثيات ظهور الادوات الان لو وضعت مربع نص او Gridview على التصميم كيف اجعله يتكيف مع هذي الاحداث عند تممد النافذه وتقلصها او تصغير عرض الشاشه او تكبيرها ان تكون متوافقه مع موقعها ... في انتظار اجابتكم الشافيه .

تم تعديل هذه المشاركة بواسطة العقده في 23 مارس 2008 في 21:37

ليس كل ما يتمناه المرء يدركه

arabteam2000.gif

#15

أولا استخدم الـ div في التصميم

ثانياً استعمل الـنسب المؤية

joseph.gif

logo.gif

CCNA 640-802

مدونتي

#16

عزيزي الساحر ياريت ..ياريت لو تتفضل علينا بمثال مفتوح المصدر لصفحه وحده فقط .. بها مثلا Textbox - Buttonlink - Button توضح لنا استخدام الـ div والنسبه المئويه كما هو في ردك الاخير والمختصر ... كما نشكر لك جهودك معانا في الموضوع هذا والذي سيصبح مرجع ان شاء الله تعالى في هذا القسم .

ليس كل ما يتمناه المرء يدركه

arabteam2000.gif

#17

شكرا علي المعلومة........

#18

خذ راحت عزيزي الساحر .. أنا عارف انك مشغول تحضر لنا المثال المفتوح المصدر وباين عليه مثال كبير وشامل خذ راحت على اقل من مهلك انا منتظرك على عتبت المنتدى :clapping:

ليس كل ما يتمناه المرء يدركه

arabteam2000.gif

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