آموزش کامل CSS قسمت ششم
در این جلسه یاد خواهیم گرفت که چگونه از روش inline style و ویژگی فاصله بین خطوط (line-height) استفاده کنیم و برخی دیگر از قوانین مربوط به سایزفونت را هم بررسی خواهیم کرد.
روش inline style
همانطور که در قسمت های قبل گفتیم برای اعمال کد های CSS در وب سایت سه روش وجود دارد اولین روش استفاده از صفحه استایل داخلی بود که کد های CSS را در بین تگ style گذاشتیم؛ دومین روش استفاده از صفحه استایل خارجی بود که درحال حاضر از آن استفاده می‌کنیم و سومین روش درون خطی یا همان روش inline است که دراین قسمت به آن می‌پردازیم.
در روش درون خطی کدهای CSS مستقیما داخل عناصر HTML قرار می‌گیرند. برای تست این موضوع ابتدا یک پاراگراف جدید ایجاد کنید و یک متن دلخواه را در آن تایپ کنید و بانوشتن عبارت “style=”property: value در داخل تگ نام عنصر موردنظر می‌توانید هر قانون CSS که خواستید تنها برای آن عنصر اعمال کنید.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
<h1>پیشرو سیستم</h1>
<p class="para1">به وب سایت ما خوش آمدید، ما یک شرکت <i>توسعه نرم افزار</i> و طراحی سایت هستیم.</p>
<h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
<p class="para2">می توانید این متن را در ویرایشگر خود تغییر دهید.</p>
<p style="color:black; font-size:25px;"> در این قسمت به آموزش روش درون خطی می‌پردازیم.</p>
</body>
</html>
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
در این قسمت به آموزش روش درون خطی می‌پردازیم.
این روش بیشتر برای وب سایت های کوچک کاربرد دارد و یا استفاده در شرایط خاص و هنوز روش صفحه استایل خارجی ارحج تر از باقی روش ها است.
برخی از قوانین سایز فونت
اول از همه پاراگرافی که برای روش درون خطی ایجاد کردیم را پاک کنید و دو عنصر h1 و h2 را از هم جدا کنید و مقدار 25px را در عنصر body قرار دهید.
چهار مقیاس برای انتخاب سایز فونت وجود دارد؛ اولین مقیاس که تا امروز از آن استفاده کردیم px است، دومین درصد (%)، سومین em و چهارمین مقیاس keywords است. به عنصر h1 بزرگترین فونت را بدهید و بعد از آن عنصر h2 و در رده بعدی عناصر پاراگراف وجود دارند این نسبت اندازه فونت در بیشتر وبسایت ها رعایت می‌شود. برای عنصر h1 اندازه 150% را درنظر می‌گیریم و آن به این معنی است که عنصر h1 به اندازه 150% نسبت به 25 پیکسل افزایش می‌یابد و برای عنصر h2 اندازه 1.2em را درنظر می‌گیریم یعنی عنصر h2 به اندازه 30= 1.2*25 پیکسل ظاهر می‌شود.
body {
color:green;
font-family: 'Arial Black';
font-weight:normal;
background-color:#e9faff;
font-size:25px;
}
h1 { text-decoration: underline; font-size:150% }
h2 { text-decoration: underline; font-size:1.2em }
p.para1 { color:blue; }
p.para2 { color:blue; }
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
در این حالت همانطور که در بالا مشاهده می‌کنید عنصر h1 در اندازه 37.5 پیکسل، عنصر h2 در اندازه 30 پیکسل و عناصر پاراگراف از عنصرbody ارث بری کرده و در اندازه 25 پیکسل قرار دارند. یکی از ویژگی های این مقادیر این است که برای تغییر سایز فونت های وب سایت دیگر نیازی نیست تک به تک عناصر را تغییر دهید فقط باید سایز فونت را در عنصر body ویرایش کنید بقیه عناصر باتوجه به آن تغییر خواهند کرد.
در آخر مقیاس keywords وجود دارد که باید برای مقداردهی، هر کدام از عبارات medium , large , x-large , xx-large , xx-small , x-small , small را که از نظرتان مناسب تر بود قرار دهید. به عنوان مثال من از مقدار xx-small برای پاراگراف دوم استفاده می‌کنم تا تغییرات را در وبسایت مشاهده کنیم.
body {
color:green;
font-family: 'Arial Black';
font-weight:normal;
background-color:#e9faff;
font-size:25px;
}
h1 { text-decoration: underline; font-size:150% }
h2 { text-decoration: underline; font-size:1.2em }
p.para1 { color:blue; }
p.para2 { color:blue; font-size:xx-small; }
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.
همانطور که در بالا مشاهده می‌کنید سایز xx-small پاراگراف دوم را انقدر کوچک کرده است که به سختی خوانده می شود. بد نیست بدانید سایز small معادل 13px، سایز medium معادل 16px و سایز large معادل 18px است.
فاصله بین خطوط با ویژگی line-height
این ویژگی به ما این امکان را می‌دهد که فاصله بین خطوط را به دلخواه تغییر دهیم. در ابتدا سایز فونت را به 15 پیکسل کاهش می‌دهیم زیرا با سایز کوچک فاصله بین خطوط بهتر دیده می‌شود و در مرحله بعدی باید مقداری متن به پاراگراف دوم اضافه کنیم چون در این صورت تشخیص فاصله بین خطوط راحتتر انجام می‌شود.
body {
color:green;
font-family: 'Arial Black';
font-weight:normal;
background-color:#e9faff;
font-size:15px;
}
h1 { text-decoration: underline; font-size:150% }
h2 { text-decoration: underline; font-size:1.2em }
p.para1 { color:blue;}
p.para2 { color:blue;}
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
<h1>پیشرو سیستم</h1>
<p class="para1">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
<h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
<p class="para2">می توانید این متن را در ویرایشگر خود تغییر دهید.از ایده خود برای ما بگویید تا بهترین راهکار نرم افزاری را به شما ارائه دهیم!توسعه یک نرم افزار سفارشی فرآیند طراحی، برنامه نویسی برای مجموعه خاصی از کاربران، شرکت ها یا سازمان ها است. که بر خلاف نرم افزارهای تجاری از پیش ساخته شده مجموعه ای کاملا مشخص از الزامات را هدف قرار می دهد </p>
</body>
</html>
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.از ایده خود برای ما بگویید تا بهترین راهکار نرم افزاری را به شما ارائه دهیم!توسعه یک نرم افزار سفارشی فرآیند طراحی، برنامه نویسی برای مجموعه خاصی از کاربران، شرکت ها یا سازمان ها است. که بر خلاف نرم افزارهای تجاری از پیش ساخته شده مجموعه ای کاملا مشخص از الزامات را هدف قرار می دهد
در این مرحله از ویژگی line-height استفاده می‌کنیم و می‌توانیم هرکدام از مقیاس های px ، em ، درصد و یا keywords را استفاده کنیم که من از em استفاده می‌کنم و مقدار 1.5em را درنظر می‌گیرم.
body {
color:green;
font-family: 'Arial Black';
font-weight:normal;
background-color:#e9faff;
font-size:15px;
}
h1 { text-decoration: underline; font-size:150% }
h2 { text-decoration: underline; font-size:1.2em }
p.para1 { color:blue;}
p.para2 { color:blue; line-height:1.5em}
پیشرو سیستم
به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.
شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.
می توانید این متن را در ویرایشگر خود تغییر دهید.از ایده خود برای ما بگویید تا بهترین راهکار نرم افزاری را به شما ارائه دهیم!توسعه یک نرم افزار سفارشی فرآیند طراحی، برنامه نویسی برای مجموعه خاصی از کاربران، شرکت ها یا سازمان ها است. که بر خلاف نرم افزارهای تجاری از پیش ساخته شده مجموعه ای کاملا مشخص از الزامات را هدف قرار می دهد
همانطور که در نتیجه بالا مشاهده می‌کنید فاصله خطوط از حالت قبل که از این ویژگی استفاده نشده بود بیشتر شده و متن خواناتر به نظر می‌رسد.