خصائص HTML و CSS باختصار

هنا ستجد مجموعة كبيرة من الخصائص والقيم التي تتحكم في HTML و CSS الصفحات، وسنقوم بتحديث هذه القائمة وتعزيزها باستمرار. سنتعرف على الخصائص التي تتحكم في الألوان color والخلفيات background، والخصائص التي تتحكم في الخطوط font، والخصائص التي تتحكم في النصوص text، وخصائص الحاشية margin والحشو padding، وخصائص الإطارات border، وخصائص العرض width والارتفاع height، وخصائص التحكم في وضعية العناصر position، وخصائص الطبقات z-index، والكثير الكثير من الخصائص القيم المرتبطة بها.

خصائص الألوان والخلفيات

خاصية اللون color

color: #ff0000;
color: transparent;

خاصية الخلفية background-color

background-color: #FFCC66;
background: #CECECE;
background: transparent;

خاصة الصورة كخلفية background-image

background-image: url("butterfly.gif");
background: url("butterfly.gif");

خاصية تكرار الصورة background-repeat

الصورة ستتكرر أفقياً

background-repeat: repeat-x;

الصورة ستتكرر عمودياً

background-repeat: repeat-y;

الصورة ستتكرر أفقياً وعمودياً

background-repeat: repeat;

الصورة لن تتكرر

background-repeat: no-repeat;

خاصية تثبيت صورة الخلفية background-attachment

الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.

الصورة ستتحرك مع الصفحة

Background-attachment: scroll;

الصورة ستبقى ثابتة

Background-attachment: fixed;

خاصية مكان صورة الخلفية background-position

أعلى يمين الصفحة

background-position: top right;

منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشة

background-position: 50% 25%;

على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشة

background-position: 2cm 2cm;

جمع كل الخصائص  background

هذه الخصائص، يمكن اختصارها باستخدام الخاصية background

background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

أمثلة إضافية

background: #FFF url(رابط الصورة) no-repeat 7px 8px;
background: #FFF url(رابط الصورة) repeat-x 1px 1px;

خصائص الخطوط font

خاصية نوع الخطوط font-family

font-family: arial, verdana, sans-serif;

خاصية طراز الخط font-style

font-style: italic;
font-style: oblique;
font-style: normal;

خاصية تباين لخط font-variant متعلقة فقط باللغات الأوروبية، ولا تدعمها كل الخطوط.

font-variant: small-caps;
font-variant: normal;

خاصية وزن الخط font-weight

font-weight: bold;
font-weight: normal;

خاصية حجم الخط font-size

font-size: 30px;

اختصارها في سطر واحد

font: italic bold 30px arial, sans-serif;
font:13px ae_AlMothnna, Al-Mothnna,  ae_AlArabiya, Tahoma, Oswald, Arial, Comic Sans MS, Arial Black, Serif;

خصائص النصوص text

خاصية وضع مسافة فراغ قبل أول سطر من الفقرة text-indent

text-indent: 30px;

خاصية محاذاة النص text-align

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

خاصية زخرفة النص text-decoration

سطر أسفل النص

text-decoration: underline;

سطر فوق النص

text-decoration: overline;

سطر على النص

text-decoration: line-through;

استثناء عنصر بإزالة السطر

text-decoration: none;

خاصية المسافة بين الحروف letter-spacing

letter-spacing: 6px;

خاصية تحويل النص text-transform تتحكم بحجم الخط في اللغات الغربية بغض النظر عن كيفية ظهور النص الأصلي.

تكبير الحرف الأول من كل كلمة مثال: "john doe" ستصبح "John Doe".

text-transform: capitalize;

جعل كل الحروف كبيرة، مثال: "john doe" ستصبح "JOHN DOE".

text-transform: uppercase;

جعل كل الحروف صغيرة، مثال: "JOHN DOE" ستصبح "john doe".

text-transform: lowercase;

النص سيظهر كما كتب في ملف HTML.

text-transform: none;

خصائص الصندوق

خاصية الحاشية margin تتحكم بالمسافة بين كل جانب من جوانب العنصر عن العنصر المحاذي له، أو إطار الصفحة:

margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin: 5px 5px 5px 5px;

خاصية الحشو padding تتحكم في المسافة في داخل العنصر نفسه بين محتويات العنصر والإطار.

padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding: 5px 5px 5px 5px;

خصائص الإطارات border

خصائص الجداول المختلفة:

border-width: 1px;
border-style: solid;
border-color: #FF0000;

يمكن أن تجمع في خاصية واحدة:

border: 1px solid #FF0000;

خصائص الإطار من أحد الجوانب فقط

border-left: 5px solid #000080;
border-right: 5px solid #000080;
border-bottom: 3px #5D7D91 solid;
border-top: 3px #5D7D91 solid;

خاصية تدوير زاوية الإطار

border-radius: 3px 3px;

خصائص العرض width والارتفاع height

خاصية العرض "width"

width: 200px;
max-width:310px ;
min-width:310px ;

خاصية الارتفاع "height"

height: 500px;
max-height:310px ;
min-height:310px ;

الخاصية float تستخدم لتعويم العناصر

float: right;
float:left;
float: none;

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

clear: right;
clear: left;
clear:both;
clear: none

خصائص موقع العناصر

top: 100px;
left: 200px;

الخاصية position للتحكم في وضعية العناصر 

position: fixed;
position: relative;
position: absolute;
position: static;

الخاصية z-index لوضع العناصر طبقة فوق طبقة

z-index: 1;

المزيد من الخصائص

خاصية display

إلغاء الأوامر الافتراضية المحددة

display: block;

تعطيل ظهور أداة دون حذفها

display: none;

?????????????????

display: inline-table;

خاصية overflow

القيمة hidden تجعل الأداة لا تتداخل مع أداة أخرى

overflow:hidden;

وضع تأثير على حواف العنصر

box-shadow: 2px 3px 2px #000;
box-shadow: 0 15px 10px -12px black;
-webkit-box-shadow: 0 15px 10px -12px black;
-moz-box-shadow: 0 15px 10px -12px black;

جعل مساحة حول محيط الكلمة، أظنه عنصر هام لأجل ميزة طاكتيل

line-height:30px;

خاصية اتجاه محاذاة النص direction

من اليمين الى اليسار (العربية)

direction: rtl;

من اليسار الى اليمين (الانجليزية)

direction: ltr;
dir="ltr"

وضع ضباب على الصورة

opacity:0.6;