ملخص لغة التنسيق النمطية CSS

لغة التنسيق النمطية CSS لغة تنسيق وتصميم اكواد HTML والتي تستخدم في جميع مواقع الويب بلا استثناء التي هي لغة CSS

وهي اختصار ل Cascading style sheet وهي بداية لاحتراف تصميم مواقع الويب لما تضيفة هذه اللغة من جماليات لموقع الويب.

ومن مزاياها ايضا السهولة في التحكم الكلي بعناصر لغة HTML سنشرح اهم اكوادها وكيفية استخدامها.

اولا : طرق استدعاء اكواد CSS:

الطريقة الاولى ضمن وسوم HTML :


<div style="background:#eee;width:300px;height:100;">
</div>

الطريقة الثانية ضمن ملف HTML في قسم الراس head نكتب اكواد CSS كالتالي:

<head>
<style type="text/css">
 اكتب هنا اكواد CSS
</style>
</head>

الطريقة الثالثة انشاء ملف بإمتداد css واستدعيه بملف HTML الذي تريد كالتالي:

<link href="filenamepath.css" rel="stylesheet" type="text/css">

ثانيا : المحددات وقواعد كتابة اكواد css:

الانواع الاساسية في المحددات هي id, class,elementName , ولانشاء كود جديد يجب ان تكتب اكواد css بين {} ويجب ان ينتهي كل امر بفاصلة منقوطة ; ونوضح ذلك كالتالي:

#idName{background:$ff000; }
.className{background:$ff000; }
div{background:$ff000; }
*{background:$ff000; }

الاستدعاء بالترتيب :

<div id='idName'>habib</div>
<div class='className'>habib</div>
<div>ali</div>
<div>ali</div> <h1>mohammed</h1>

للتوضيح:
#idName to select id
.className to select class
elementName to select directly name of class
* to select all elements

ثالثا : تنسيق النصوص

تخصيص لون النص بثلاث طرق كالاتي

color:#ff0000;  //hexadecimal
color:red;      // font name
color:rgb(255,0,0);  // decimal

تحديد اتجاه النص من اليمين الى اليسار او العكس كالتالي :

direction:rtl;
direction:ltr;

تحديد المسافة بين الحروف

latter-spacing:2px;
latter-spacing:-2px;

تحديد ارتفاع السطر

line-height:30px;
line-height:2; //line height =2 lines

تحديد مكان النص

ملاحظة: القيمة justify تستخدم لجعل بداية ونهاية النص في السطور متساوية

text-align:center;
text-align:right;
text-align:left;
text-align:justify;

التحويل بين الحروف الصغيرة والكبيرة في اللغة الانجليزية

capitalize = لتحويل الحرف الاول الى كبير
uppercase = لتحويل كل الحروف الى كبيرة
lowercase = لتحويل كل الحروف الى صغيرة
none: لاشيء

text-transform: capitalize;
text-transform: uppercase;
text-transform:lowercase;
text-transform:none;

لجعل المتصفح يحتسب المسافات البيضاء ويطبعها

white-space:pre;

التحكم في اضافة الخط حول النص

underline = خط تحت النص
overline = خط فوق النص
line-through = خط وسط النص
blink = تجعل النص يظهر ويختفي ولكن تعمل فقط في متصفح فايرفوكس موزيلا

text-decoration:underline;
text-decoration:overline;
text-decoration:line-through;
text-decoration:blink;

تحديد مسافة بداية الفقرة

text-indent:30px;

تحديد حجم المسافة بين الكلمات

word-spacing:10px;

رابعا : تنسيق الخطوط

تحديد عائلة الخط

ممكن استخدام اكثر من خط بوضع فاصلة بين الخطوط
اذا اسم الخط مكون من كلمتين منفصلنين يجب وضع الكمتين داخل " "

font-family:Menlo,Monaco,Consolas,"Courier New",monospace;

تحديد حجم الخط

القيم تسند لهذه الخاصية بطريقتين:
1 - الحجم بال pexels
2 - الحجم بالنص بإحدى الطرق الاتية:
small , X-small , xx-small , medium , large , x-large , xx-large

font-size:12px;
font-size:small;

تحديد ستايل الخط

القيم المسندة:
normal عادي يأتي defualt
italic مائل
oblique ايضا مائل

font-style:normal;

تستخدم الخاصية التالية عند الحاجة لتحويل الحروف الانجليزية من small to capital

font-variant:small-caps;

تحديد عرض الخط

font-weight:bold;
font-weight:bolder;
font-weight:700;

تحديد كل خصائص الخط في امر واحد

font:normal bold 30px Arial,tahoma;

خامسا:التحكم بالابعاد:

التحكم بالعرض :

width للتحكم بالعرض بشكل مباشر باسناد قيمة ثابتة min-width لتحديد قيمة صغرى للعرض.

max-width لتحديد قيمة قصوى للعرض ، وتستخدم هذه الطريقة عند الحاجة لجعل عرض العنصر يتأرجح بين القيمتين الصغرى والقصوى مثلا على حسب عرض شاشة العرض او لاسباب اخرى قد تحتاجها بحيث نسند للخاصية width القيمة auto

width:1000px;
    OR
width:auto;
min-width:500px;
max-width:1000px;

التحكم بالارتفاع:

توجد ثلاث خصائص للتحكم بالارتفاع height , min-height , max-height وتعامل نفس خواص العرض.
وحدات القياس :
px وحدة قياس تدعى البكسل وتساوي نقطة من الشاشة.
% النسبة المئوية وتحدد بالنسبة للعنصر الاب الذي يحتويه.
em كل واحد em يساوي 16 بكسل.
cm سنتي متر
mm مللي متر
هذه الوحدات الاساسية للقياس وتوجد ايضا وحدات اخرى مثل pc , in , pt

height:1000px;
    OR
height:auto;
min-height:500px;
max-height:1000px;

سادسا : التحكم بالازاحة :

التحكم بالإزاحة الخارجية :

margin للتحكم بالازاحة الخارجية او ما يسمى بالهوامش ويمكن تخصيص الازاحة الخارجية من جهة معينة بواسطة احدى الخواص الاتية:
margin-left , margin-top , margin-bottom ,margin-right

margin:10px;
      OR
margin-bottom:10px;
margin-top:20px;
margin-left:5px;
margin-right:7px;

التحكم بالإزاحة الداخلية:

padding للتحكم بالازاحة الداخلية ويمكن تخصيص الازاحة الداخلية من جهة او جهات معينة بواسطة احدى الخواص الاتية:
padding-left , padding-top , padding-bottom ,padding-right

padding:10px;
      OR
padding-bottom:10px;
padding-top:20px;
padding-left:5px;
padding-right:7px;

اقرأ ايضا:افضل 10 مصادر لتحميل قوالب و صفحات مواقع (HTML+CSS+JS) جاهزة مجانا

سابعا: تنسيق الحدود

التحكم بالحدود الداخلية :

الخاصية border تستخدم لتنسيق الحدود الداخلية للعنصر وتتوفر على ثلاث خصائص رئيسية border-width لتحديد عرض الحد وborder-color لتحديد لون الحد وايضا border-style

لتحديد ستايل الحد وتأتي مع هذه الخاصية العديد القيم مثل solid صلب , dotted حد نقطي وغير الكثير
كما بإمكانك تخصيص حد من اي اتجاه سواءٌ الاعلى اوالاسفل اويمين او يسار كما هو موضح في الاسفل :

border-width:1px;
border-color:#336699;
border-style:solid;
      OR 
   الكل في امر واحد
border:1px solid #336699;
  
        تخصيص لكل اتجاه حد معين
border-top:1px solid #ccc;
border-bottom:1px solid #f00;
border-left:2px solid #0f0;
border-right:2px solid #0f0;

التحكم بالحد الخارجي:

الخاصية outline لتحديد خصائص الحد الخارجي , وتأتي ايضا مع الثلاث الخصائص المتوفرة مع الحد الخارجي من عرض الحد واللون والاستايل كما هو موضح في الاسفل

outline-width:1px;
outline-color:#ccc;
outline-style:solid;
      OR
     الكل في امر واحد
outline:1px solid #ccc;

ثامنا : تنسيق الخلفية

تحديد لون معين للخلفية :

background-color:#cdcdcd;
    OR
background:#cdcdcd;

تحديد صورة معينة للخلفية :

تحديد صورة معينة للخلفية من خلال الخاصية background-image ويتم استدعاء الصورة من خلال url وتضع مسار الصوره واسمها مع امتداد الصورة مسبوق بنقطة

ملاحظة هامة :
في حال كانت الصورة صغيرة سيتم تكرار الصورة في الخلفية وللتحكم بالتكرار نستخدم الخاصية background-repeat.

وتأتي مع القيم التالية no-repeat عدم تكرار الصورة repeat لتكرار الصورة , repeat-x تكرار الصورة بشكل افقي صف واحد ، repeat-y تكرار الصورة بشكل رأسي عمود واحد كما هو موضح في التالي

background-image:url('imgFolder/imgName.png');
background-repeat:no-repeat;

تاسعا: خاصية تموضع العنصر

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

static تأتي default
relative تحديد مكان وضع العنصر على حسب احداثيات محددة بالنسبة للعنصر نفسه ، وتسند القيم باستخدام الخصائص left , top ,rihgt , bottom وميزته انه لايمكن وضعه في امام او مقدمة عنصر اخر.
absolute يتم تحديد موضع العنصر باحداثيات ثابتة بالنسبة للعنصر الاب الذي يحتويه.
fixed يتم وضع العنصر بتحديد احداثيات ثابتة بالنسبة للصفحة ككل او بمعنى اصح للشاشة لانه يبقى ثابت وظاهر على الشاشة دائما ولايتحرك مع تحريك الصفحة.

position:relative;   OR  position:fixed;    OR    position:absolute;
             لتحدبد الاحداثيات 
left:100px;
top:20px;
right:300px;
bottom:140px;

عاشرا: خاصية التعويم

الخاصية float

تستخدم للتحكم بكيفية وضع العنصر داخل العنصر الاب ، مثلا لديك عنصرين صورة ونص وتريد الصورة على اليمين بينما النص على اليسار تستخدم float:right على الصورة و float:left على النص

float:left;

الحادي عشر : خصائص القوائم

الخاصية list-style لتحديد ستايل القائمة بامكانك تغييرها الى دائرة اومربع او تخفيها وتطبق هذه الخصائص الى العنصر ul

list-style:disc;
list-style:square;
list-style:none;

عمل صورة بدلا عن الارقام والرموز باستخدام الخاصية list-style-image

list-style-image:url('imgpath/imgName.gif');

الثاني عشر: خصائص العرض

الخاصية display

تستخدم للتحكم بكيفية عرض العنصر ومن القيم الهامة لهذه الخاصية:
inline عرض العناصر في سطر واحد
block عرض كل عنصر في سطر
none اخفاء العنصر

display:inline;
display:block;
display:none;

اقرأ ايضاً: افضل المصادر لتحميل قوالب و صفحات المواقع (HTML5+CSS3) مجانا

خواص هامة اخرى في لغة CSS

خواص الروابط links

text-decoration : تستخدم لتعديل الخواص الافتراضية للرابط

a:hover : تستخدم لعمل تنسيق الرابط عند حدث الوقوف عليه بالماوس عليه

a:visited : الرابط الذي تم زيارته مسبقا

a: active : تنسيق الرابط الذي تم زيارته

مثال:

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

خاصية الشفافية opacity

تحدد هذه الخاصية مقياس شفافية العنصر وتأتي قيمته بالاعداد العشرية من 0 الى 1

opacity:0.5;

تريب الطبقات z-index

تأخذ z-index قيم رقمية صحيحة بالأعداد الموجبة والسالبة

z-index:99;

overflow

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

overflow:visible; // ظهور الاسكرول وهي القيمة الافتراصية 
overflow:hidden;  //يتم اخفاء المحتوى الزائد عن حجم العنصر
overflow:scroll // اظهار الاسكرول بشكل دائم
overflow:auto; // تقريبا نفس scroll

الخواص الخاصة بالجدول

border-collapse

تستخدم مع الجداول للتحكم في المساحة بين حدود الخلايا

vertical-align

لمحاذاة محتوى النص في الاتجاه العمودي

مثال:

border-collapse :collapse ;
vertical-align:center;

!important

تستخدم لإجبار العنصر لأخذ قيمة الخاصية المحددة مثال:

<p class="mycalss" id="myid"></p>
#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

سيكون لون الخلفية باللون الاحمر للعنصر p لان الكلمة المحجوزة !important اجبرت العنصر لتغيير قيمة لون الخلفية.

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

إرسال تعليق

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