English تم الإنتقال للبوابة الجديدة والتسجيل من هنا

تطوير المواقع : تركيب السكربتات والبرمجيات وقواعد البيانات والهاكات و ستايلات المنتديات و ترقيع الثغرات

دورة CSS و CSS3 باللغة العربية .. شرح مصور شامل

دورة CSS و CSS3 باللغة العربية .. شرح مصور شامل

السلام عليكم ورحمة الله وبركاته
حياكم الله إخواني,, سوف نقوم بفضل الله ببدأ دورة تعلم اللغة التجميلية CSS و CSS3
من خلالها سوف نستطيع التعامل مع صفحات الويب وتزيينها بكل احتراف

ولنتعرف اولاً على CSS
ما هي CSS وما معنى الثلاث حروف هؤلاء؟

CSS هي اختصار لكلمة Cascading Style Sheets
و معناها صفحات الأنماط الإنسابية وهي ليست لغه برمجه ولكنها تقنية تهتم بتحديد شكل المواقع والمدونات، وينطبق ذلك على الألوان والخطوط والصور والخلفيات التى يستخدمها المطورون فى الصفحات.
هي لغة جميلة لتنسيق صفحات الويب, من تغيير لون الكتابة وتغيير الصور وحجمها وطريقة عرضها و حجم الخط ولونه و نوعه وكل ما تتخيله امامك على صفحة الويب يعود شكله الى لغة CSS.

هذه اللغة تساعدك على إنشاء وإدارة صفحات المواقع بشكل جيد جداً يتميز عن من يعتمد في التصميم على html التى تسبب مشكله وهى ان الموقع لا ينفصل عن محتوياته ..
سوف نتعلم ايضاً كيفية تغيير حجم الخطوط لكل الصفحات او صفحة واحدة او كل العناصر او عنصر واحد وتغيير لون خلفية عنصر واحد أو كل العناصر وكل ما تتخليه من تنسيق الموقع او المدونة..

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


أدوات الاستخدام

متصفح ويب جيد مثل جوجل كروم او فاير فوكس

برنامج نوتباد بلس Notebad يمكنك تحميله من الرابط التالي


http://download.tuxfamily.org/notepa....Installer.exe



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



الأكواد الذي سوف يتم شرحها إن شاء الله في دروس منفصلة

كود:
align-content

align-items

align-self

animation

animation-delay

animation-direction

animation-duration

animation-fill-mode

animation-iteration-count

animation-name

animation-play-state

animation-timing-function

backface-visibility

background

background-attachment

background-clip

background-color

background-image

background-origin

background-position

background-repeat

background-size

border

border-bottom

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-style

border-bottom-width

border-collapse

border-color

border-image

border-image-outset

border-image-repeat

border-image-slice

border-image-source

border-image-width

border-left

border-left-color

border-left-style

border-left-width

border-radius

border-right

border-right-color

border-right-style

border-right-width

border-spacing

border-style

border-top

border-top-color

border-top-left-radius

border-top-right-radius

border-top-style

border-top-width

border-width

bottom box-shadow

box-sizing

caption-side

clear

clip

color

column-count

column-fill

column-gap

column-rule

column-rule-color

column-rule-style

column-rule-width

column-span

column-width

columns

content

counter-increment

counter-reset

cursor

direction

display

empty-cells 

flex flex-basis 

flex-direction 

flex-flow 

flex-grow 

flex-shrink 

flex-wrap 

float 

font 

font-face@

font-family 

font-size 

font-size-adjust

font-stretch

font-style

font-variant

font-weight

hanging-punctuation

height

icon

justify-content

keyframes@

left

letter-spacing

line-height

list-style

list-style-image

list-style-position

list-style-type

margin

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

min-height

min-width

nav-down

nav-index

nav-left

nav-right

nav-up

opacity

order

outline

outline-color

outline-offset

outline-style

outline-width

overflow

overflow-x

overflow-y

padding

padding-bottom

padding-left

padding-right

padding-top

page-break-after

page-break-before

page-break-inside

perspective

perspective-origin

position

quotes

resize

right

tab-size

table-layout

text-align

text-align-last

text-decoration

text-decoration-color

text-decoration-line

text-indent

text-justify

text-overflow

text-shadow

text-transform

top

transform

transform-origin

transform-style

transition

transition-delay

transition-duration

transition-property

transition-timing-function

unicode-bidi

vertical-align

visibility

white-space

width

word-break

word-spacing

word-wrap

z-index


سوف تضاف هنا الدروس تباعاً بإذن الله

ولا نحتاج سوى دعمكم, والدعم هنا هو المتابعة فقط لا غير
------------------------------------------------------------------------
دروس الدورة:

https://www.damasgate.com/vb/t332165/#post2382885
https://www.damasgate.com/vb/t332174/#post2382896
https://www.damasgate.com/vb/t332181/#post2382906
https://www.damasgate.com/vb/t332240/#post2383187
https://www.damasgate.com/vb/t332273/#post2383464
https://www.damasgate.com/vb/t332307/
https://www.damasgate.com/vb/t332380/#post2383984
https://www.damasgate.com/vb/t332385/#post2384024
https://www.damasgate.com/vb/t332462/
https://www.damasgate.com/vb/t332564/#post2385071
https://www.damasgate.com/vb/t332569/#post2385106
https://www.damasgate.com/vb/t332584/#post2385154
https://www.damasgate.com/vb/t332721/#post2386216
https://www.damasgate.com/vb/t333040/#post2388874
https://www.damasgate.com/vb/t333041/
https://www.damasgate.com/vb/t333042/
https://www.damasgate.com/vb/t333044/






لدعم قناة وسام الحمد على اليوتيوب


المواضيع المشابهه
ساعة للحضور والانصراف مدعمة باللغة العربية شامل سوفت وير(عربى/انجليزى)


تسلم ايدك يا خال


الله يسلمك يا اشرف


طرح رائع ومميز
سلمت يداك أخى وبارك الله فيك


متابع بقوة دورة ممتازة وأنا محتاجها :)



طرح رائع ومميز
سلمت يداك أخى وبارك الله فيك
الله يسلمك وشكراًُ للمرور الطيب
متابع بقوة دورة ممتازة وأنا محتاجها :)
إن شاء الله , لما نشوووف


بارك الله فيك وجزيت خير الجزاء
ومنكم نستفيد لك جزيل الشكر والتقدير


تسلم ايدك يا بو حميد على المجهود الكبير والمميز بارك الله بك حبيبي


بارك الله فيك يا بو حميد