مزایای استفاده از css آماده مثل بوت استرپ در وب سایتآمودگستر

توسط احمدی
سه شنبه, 09 خرداد,1396

مزایای استفاده از css آماده مثل بوت استرپ در وب سایت

برای تعریف فرمت و قالب بندی صفحات وب، از کدهای CSS استفاده می شود که در برگیرنده مواردی همچون نوع فونت ، رنگ های و سایز آن در طراحی وب سایت استفاده شده، تصاویر استفاده شده در پس زمینه، حاشیه ها و میزان تورفتگی اِلمان های صفحه می باشد. در واقع با استفاده از CSS می توان به راحتی تنظیمات مختلف را در طراحی وب سایت حرفه ای ایجاد کرد.

به طور کلی CSS از طریق سه شیوه در کدهای HTML استفاده می شود که عبارتند از:

استفاده از CSS در درون تگ ها

CSS ها می توانند در تمامی تگ های HTML استفاده شوند. در اصطلاح برنامه نویسی به این کار inline CSS گفته می شود. برای این کار باید تنظیمات و ویژگی های CSS را در درون هر کدام از تگ های Html و درون ویژگی style تگ مورد نظر قرار داد تا بتوان آنها را مطابق با میل خود تنظیم کرد. ویژگی style برای همه کدهای HTML به یک شکل تعریف و مقدار آن از قبل مشخص شده است. به همین دلیل یک style می تواند از چندین CSS استفاده کند. نحوه استفاده از CSS در تگ های HTML به صورت تغییر رنگ تیترهای درون صفحه است که می توانید آن را در زیر مشاهده کنید:

تصور کنید که قصد دارید تا تیترهای درون صفحه را به رنگ قرمز تغییر دهید. در این صورت باید به شکل زیر عمل کنید:

<p>example.com>

اکنون باید با استفاده از CSS درون این تگ، رنگ متن مشخص شود که به صورت زیر پاراگراف تغییر می کند.

<p> style="color:blue" > example.com>

آنچه مشاهده می کنید تنها ویژگی style است که به این تگ اضافه شده و به عنوان مقدارِ یکی از ویژگیهای CSS، تنها رنگ مورد نظر در آن آورده شده است. برای تغییر فونت، سایز آن، تصاویر استفاده شده در پس زمینه، حاشیه ها و ... نیز به همین صورت عمل می کنیم.

نوشتن تمامی تنظیمات CSS درون تگ Style

تمامی تنظیمات CSS درون تگ Style در header صفحه html نوشته می شود. با این کار می توان سلکتورهای CSS را در تگ <style> تعریف کرده و سپس در تگهای مختلف html با آوردن ویژگی class (سلکتور)، به راحتی تنظیمات مربوط به سلکتور خاص را بر روی تگ مورد نظر انجام داد. به این صورت که تگ <style> در کد html باید درون تگ <head> قرار بگیرد. به عنوان مثال اگر قصد دارید سایز فونت های محتوا را تغییر دهید، باید به ترتیب زیر عمل کنید:

<html>

<head>

<title>example.com Css Learning>

<styl>

<.p1 {color:blue}>

<p2 {font-face:tahoma;font-size:12px;}>

< /style>

< /head>

<body>

<p class="p1">example.com>

<p class="p2">example.com>

< /body>

< /html>

زمانی که قصد دارید تا در صفحات html، تنظیمات CSS خود را زیاد کنید، بهتر است از روش دوم استفاده کنید. بویژه اگر تگهای مختلف با تنظیمات مشترک در صفحه وجود داشته باشد، با استفاده از روش دوم می توان تا حد زیادی blueundancy را کاهش داده و از نوشتن کدهای تکراری جلوگیری کرد.

نوشتن سلکتورهای CSS در فایل جداگانه

زمانی که سلکتورهای CSS در فایل جداگانه نوشته می شوند، باید بلافاصله درون صفحه HTML قرار بگیرند. در این روش باید به جای نوشتن سلکتورهای CSS در تگ style، آنها را در فایل با پسوند CSS نوشته و سپس درون صفحه HTML قرار داد. برای این کار تگ زیر در header صفحه html و در تگ <head> و سپس به جای cssFileURL آدرس فایل CSS را قرار می گیرد که در زیر می توانید نمونه آن را مشاهده کنید:

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

به عنوان مثال برای تغییر رنگ تیترهای صفحه با استفاده از روش نوشتن سلکتورهای CSS در فایل جداگانه، می توان به شکل زیر عمل کرد:

http://www.example.com/css/sytles.css

.p1 {color:blue}

.p2 {font-face:tahoma;font-size:12px;}

در ادامه کد صفحه html به صورت زیر مشخص می شود:

<head>

example.com

</body>

</html>