مرجعك الشامل لتتعلم لغة css & css3



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

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

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

سوف نتعلم ايضاً كيفية تغيير حجم الخطوط لكل الصفحات او صفحة واحدة او كل العناصر او عنصر واحد وتغيير لون خلفية عنصر واحد أو كل العناصر وكل ما تتخليه من تنسيق الموقع او المدونة .

حقيقتاً المواقع العربية والاجنبية مليئة بالدروس ولكننا سوف نقوم بالشرح المبسط لكل شئ حتى ان لم تكن تعرف ما هي تقنية CSS سوف تحترفها معنا بإذن الله.
فوائد إستخدام تقنية CSS

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

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

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

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

التحميل من هنا

تهدف تقنية 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

انتظروا قائمة الشروحات

شرح background-color فى css
شرح background-image فى css

بارك الله فيك وأحسنت النشر