مشخصه padding برای فاصله انداختن بین ناحیه مرزی بیرونی با محتوای داخلی سایت تعریف می شود. از آنجایی که در مورد قسمت های داخل body صحبت می کنیم ناحیه مرزی بیرونی در واقع قسمت بالایی، پایینی و اطراف سایت ما می باشد (توجه داشته باشید که در مورد ناحیه به نمایش در آمده درون سایت صحبت کرده و هیچ کجای بدنه مرورگر طرف صحبت ما نیستند). به مشخصه padding در فصل چهارم به طور مفصل صحبت خواهیم کرد.
مقداری که به این مشخصه داده می شود فاصله اطراف سایت با محتوای درون آن را مشخص می کند. در اینجا ما 15 پیکسل را به این مشخصه اختصاص دادیم. در باره پیکسل قبل ها صحبت کرده بودیم، در قسمت مربوط به اندازه تصاویر، اما یک پیکسل چیست؟ پیکسل به همان نقاط بسیار کوچکی گفته می شود که از مجموع صدها هزار تای آن ها صفحه نمایش تشکیل می شود پس نگران 15 پیکسلی که به این مشخصه اختصاص داده ایم نباشید زیرا مقدار زیادی نیست و قسمت های خالی سایت را برای اختصاص محتوا به آن ها پر نخواهد کرد.
مشخصه line-hight از همه آن های دیگر جالب تر است. با افزایش مقدار آن فاصله بین خطوط متن سایت شما بیشتر می شود—ویژگی که بر روی خوانا بودن محتوا بسیار تاثیر خواهد گذاشت (در اینجا ما 125% را به آن اختصاص داده ایم).
برای درک بیشتر این قسمت بر روی مقدار آن تغییرات دلخواه خود را اضافه کرده و فایل CSS را ذخیره کنید، می توانید نتایج را بررسی نمایید.
حالا به style های پاراگراف هایمان می رسیم.
font-family: Times, "Times New Roman", serif;
color: navy;
}
درباره تغییر رنگ متن در پاراگراف هایمان توضیح داده بودیم، در اینجا رنگ navy را به آن اختصاص داده ایم.
حالا ببینیم تنظیمات لیست های ما چه تغییری کرده است.
font-size: small;
}
با این مقدار جدیدی که به سایز فونت خود دادیم تغییر بسیار اندک است (توجه داشته باشید که می توانستیم از روش های درصد و مقدار پیکسل نیز این مشخصه را مقدار دهی کنیم). کلمات سایزبندی از xx-small تا xx-large قابل تنظیم می باشند، این روش بسیار شهودی و راحت است. متاسفانه مرورگرهای گوناگون با این نوع سایز دهی به گونه های متفاوت برخورد می کنند، ممکن است xx-large در دو مرورگر مختلف اندازه نامساوی داشته باشد. اگر خیلی نگران سایزهای دقیق برای این مقدار نیستید این روش از همه بهتر است.
المان دیگری که در تنظیمات پیشفرض آن تغییر ایجاد کردیم عنوان نوع اول ما می باشد—h1. بار دیگر از مشخصه font-size استفاده کردیم و مقدار x-large را به آن اختصاص دادیم.
font-size: x-large;
}
و در آخر نیز h2؛
h2 {
color: blue;
font-size: medium;
font-weight: normal;
}
معمولاً مرورگرها عناوین را به صورت bold نشان می دهند، ما در اینجا مشخصه font-weight را تعریف کرده و مقدار normal را به آن اختصاص دادیم تا این تنظیم پیش فرض مرورگر به عنوان ما تخصیص داده نشود.
خلاصه ای از مطالبی که باهم یاد گرفتیم
تا اینجا مطالب گوناگونی در رابطه با کار با CSS پوشش داده شد، اما این مطالب همه آن چیزی که هست نبوده و در آینده به آن ها اضافه خواهد شد. در هر حال ما آن ها را در این قسمت برای شما به صورت خلاصه و کاملتر بیان می کنیم تا شما نیز بتوانید با اندکی دست و پنجه نرم کردن با آن ها به درک عمیق تری از کار با CSS دست یابید.
Color؛
Background-color؛
همانطور که دیدیم این دو مشخصه می توانند کلمات گویای رنگ مشخص(red, blue, green, yellow,... .) یا کد hexadecimal آن رنگ را در خود جای دهند.
Font-family؛
این مشخصه فونت های گوناگون را به ترتیب اولویت در خود جای می داد، یادتان باشد این ترتیب باید شامل فونت هایی معروف بوده و بازدید کننده سایت باید این فونت ها را در سیستم خود داشته باشد.
Font-size؛
این مشخصه می تواند هرکدام از مقادیر پایین را به خود اختصاص دهد؛
کلمات گویای اندازه ای مشخص:
1. xx-small
2. x-small
3. medium
4. large
5. x-large
6. xx-large
یک واحد نسبی:
مانند درصد برای نمونه؛ 140%
اندازه های مشخص و ثابت در تمامی مرورگرها:
1. پیکسل، برای مثال؛ 20px
2. اندازه (points) برای مثال؛ 12pt
اندازه های مشخص و ثابت مطمئناً بهترین انتخواب برای ما نخواهند بود، از آنجا که در تغییرات آینده و در مقایسه با قسمت های دیگر درک شهودی خوبی به ما نخواهند داد و قطعاً دو روش اول بسیار مناسب تر خواهند بود.
Font-weight؛
می تواند bold یا normal انتخاب شود.
Font-style؛
Normal یا intalic.
Text-decoration؛
یکی از موارد روبه رو؛ none, underline, overline یا line-through.
