شیوه های مختلف استفاده از CSS در صفحات html

در مطلب گذشته ی آموزش CSS ، به قواعد نحوی و Syntax این زبون پرداختیم که می‌تونید اون مطلب رو از اینجا مطالعه کنید . پیشنهاد می‌کنم قبل از خوندن این مطلب حتما این مقاله رو بخونید .
در این پست قصد داریم در مورد شیوه‌های مختلف استفاده از CSS در درون صفحات HTML صحبت کنیم .
به طور کلی به 3 شکل می‌تونید از CSS برای تعیین شیوه نمایش تگها ، در میان کدهای HTML استفاده کنید :
  1- استفاده از CSS در درون تگها (inline CSS)
  2- نوشتن تمامی تنظیمات CSS درون تگ Style در header صفحه اچ تی ام ال
  3- نوشتن سلکتورهای CSS در فایل جداگانه و الصاق آن به صفحه HTML

1- استفاده از CSS در درون تگها (inline CSS) :

شما می‌تونید تنظیمات و ویژگی‌های CSS رو در درون هر کدوم از تگ‌های Html بیارید تا اون تنظیمات روی تگ مربوطه اعمال بشه . برای اینکار باید ویژگی‌های CSS مورد نظر رو که می‌خواید روی تگ خاصی اعمال بشه درون ویژگی style اون تگ بیارید .
ویژگی Style برای همه تگ‌های Html قابل تعریفه و به عنوان مقدار ، در درون خود میتونه چندین تا از ویژگی‌های CSS رو که با علامت ; از هم جدا شدند بیاره !
برای درک بیشتر از چگونگی استفاده CSS در درون تگها ، چند تا مثال براتون میارم :

مثال 1)  فرض کنید می‌خواید فقط یکی از پاراگراف‌های توی صفحتون رنگ متنش قرمز بشه .
– تگ داشتن یک پاراگراف معمولی به شکل زیره :

<p>7Learn.com</p>

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

<p style=”color:red>7Learn.com</p>

می بینید که فقط ویژگی style به این تگ اضافه شده و به عنوان مقدار  یکی از ویژگیهای CSS که رنگ متنو مشخص می‌کنه آورده شده !
مثال 2)  همون پاراگراف بالا رو می‌خوایم نوع فونتش رو Tahoma و اندازه فونت رو 16 پیکسل کنیم . کدش مثل زیر میشه :

<p style=”font-face:tahoma;font-size:12px;>7Learn.com</p>

ملاحظه می‌کنید که همه ی تنظیمات CSS مورد نظر رو درون خود تگ و به عنوان مقدار ویژگی style میاریم . استفاده ی به این شکل خیلی کار درستی نیست . مگر اینکه فقط در تگ خاصی بخواید تنظیمات رو اعمال کنید و این تنظیمات در تگهای دیگه به اشتراک گذاشته نشده باشن . اگه بخواید همه ی مواقع از این شیوه استفاده کنید بسیاری از مزایای CSS رو که در این مقاله گفته بودیم از دست خواهید داد !
 :: صفحه html ی که شامل دو پاراگراف فوق باشه به شکل زیر میشه :

<html>
<head>
 <title>7Learn.com Css Learning</title>
</head>

<body>
  <p style=”color:red>7Learn.com</p>
  <p style=”font-face:tahoma;font-size:12px;>7Learn.com</p>
</body>
</html>

برای خوندن بقیه مقاله و دریافت ورژن PDF اون به ادامه مطلب مراجعه کنید :

دریافت این مقاله به فرمت PDF

2- نوشتن تمامی تنظیمات CSS درون تگ Style در header صفحه html

با استفاده از این روش شما می‌تونید همه یا برخی از سلکتورهای CSS رو در تگ <style> تعریف کنید و در تگهای مختلف html با آوردن ویژگی class که نام یک سلکتور رو میگیره ، تنظیمات مربوط به سلکتور خاصی رو ، روی اون تگ اعمال کنید .

تگ <style> در کد html باید درون تگ <head> قرار بگیره .

مثال)  همون مثالی که برای روش اول زدیم اینجا باید به این شکل پیاده سازی بشه :

<html>
<head>
 <title>7Learn.com Css Learning</title>
 <style>
  .p1 {color:red}

  .p2 {
font-face:tahoma;font-size:12px;}
 </style>
</head>

<body>
  <p class=”p1>7Learn.com</p>
  <p class=”p2>7Learn.com</p>
</body>
</html>

می بینید که سلکتورهای p1 و p2 رو در تگ <style> تعریف کردیم و با استفاده از ویژگی class گفتیم که تنظیمات p1 روی پاراگراف اولی و p2 روی پاراگراف دومی اعمال بشه .

حالا فرض کنید با این دو روشی که گفتیم می‌خوایم یه پاراگراف دیگه اضافه کنید که خصوصیات هر دو پاراگراف اول و دوم رو داشته باشه .

در روش اول باید همه تنظیمات CSS رو درون تگ پاراگراف جدید بیاریم :

<p style=”color:red;font-face:tahoma;font-size:12px;> 7Learn.com</p>

ولی در روش دوم براحتی از ترکیب دو تا سلکتور p1 و p2 استفاده میکنیم :

<p class=”p1 p2>7Learn.com</p>

و دیگه نیازی نیست کد تکراری و اضافی بنویسید .

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

3 نوشتن سلکتورهای CSS در فایل جداگانه و الصاق آن به صفحه HTML

این روش دقیقا شبیه روش قبلیه با این تفاوت که به جای نوشتن سلکتورهای CSS در تگ style اونها رو در یک فایل با پسوند css. مینویسیم و این فایل رو با تگ خاصی به صفحه html الصاق می‌کنیم .

برای چسبوندن یک فایل CSS جهت استفاده از سلکتورهای اون در یک صفحه html باید تگ زیر رو در header صفحه htmlتون در تگ <head> قرار بدید :

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

به جای cssFileURL باید آدرس فایل CSS  رو قرار بدید .

مثال)  باز هم همون مثال بالا رو اینبار با روش سوم اینجا میاریم :

خوب فرض کنیم ما سلکتورهامون رو در فایلی به نام styles.css نوشتیم و اونرو آپلود کردیم و محتویات فایل و آدرس اونرو به صورت زیر داریم :

 https://7learn.com/css/sytles.css

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

و کد صفحه html ما که شامل دو تا پاراگراف معروفمون هستند به شکل زیر میشه :

<html>
<head>
 <title>7Learn.com Css Learning</title>

 <link rel=”stylesheet” type=”text/css” href=”https://7learn.com/css/sytles.css>
</head>

<body>
  <p class=”p1>7Learn.com</p>
  <p class=”p2>7Learn.com</p>
</body>
</html>

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

استفاده از فایهای css می‌تونه نگهداری و مدیریت فایل‌های CSSتون رو راحت‌تر کنه .

در کل بهتره که از روش دوم یا سوم استفاده کنید تا از تمام مزایای CSS بهره ببرید .
از جلسات بعدی دیگه شروع میکنم به توضیح و آموزش تنظیمات مختلف CSS برای شکل دهی و فرمت بندی صفحات html .

پس همچنان با ما باشید …

دریافت این مقاله به فرمت PDF

 

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۲۴ دیدگاه
مسعود ۰۱ خرداد ۱۳۹۲، ۰۹:۴۷
سلام لطفا این سوالم رو جواب کامل بدید و از جواب های دو سه کلمه ای خودداری کنید

می خوام template.Css رو ویزایش کنم اونم در پلسک!! خودش روی UTF-8هستش

می خواستم بدونم چکار باید کنم که بتواتنم محتویات Css رو ویرایش کنم ؟
سجاد دریس ۱۴ خرداد ۱۳۹۲، ۰۲:۴۷
سلام.
در انجمن مطرح کنید
azad1top ۰۷ فروردین ۱۳۹۲، ۱۳:۲۶
:oops: <P clacc: MeRsI
مینایی ۲۴ بهمن ۱۳۹۱، ۰۰:۰۴
باسلام و احترام

من سوالی داشتم
چطور می تونم منو ها به کد زیر را وسط چین کنم ؟ می شه کمک کنید ؟

...
لقمان آوند ۲۴ بهمن ۱۳۹۱، ۱۳:۱۳
سلام
لطفا کد خود رو در یک فایل قرار بدید و در انجمن سوالتون رو مطرح کنید .
این گونه سوال ها سریعا در انجمن به پاسخ می رسند .
موفق باشید .
میر عزیز ۰۹ شهریور ۱۳۹۱، ۲۰:۰۹
با سلام چگونه یک فایل cssرا آپلود کنم.میشه ابتدا در text نوشت وسپس فایل text را آپلود کرده و همانند آموزش ها شما در href="ccsfile URL"قرار دهم.
همچنین روش سوم را چگونه همانند روش دوم استفاده کنم
لقمان آوند ۱۱ شهریور ۱۳۹۱، ۱۰:۲۵
بله ، می تونید در نوت پد کد css رو بنویسید و با پسوند css. ذخیره و آپلود کنید . متوجه نشدم منظورتون از سوال دومی چیه !
میلاد ۰۴ خرداد ۱۳۹۱، ۱۲:۳۹
سلام به آقا لقمان، می خواستم بدونم طراحی وبلاگم خوبه ؟ چون از نظر خودم زیاد دلچسب نیست.
میشه شما و یا افراد دیگه نظرشون رو بگن؟
لقمان آوند ۰۴ خرداد ۱۳۹۱، ۲۲:۰۲
سلام
طراحیش خوب و استاندارده .
البته جای کار زیاد داره .
ehsan ۰۶ بهمن ۱۳۹۰، ۱۱:۲۴
سلام دوست من با افتخار لینک شدید منو با نام وبم بلینکید و بعد بهم خبر بدهید ؟

منتظرتونم !
ZOHREH ۰۶ دی ۱۳۹۰، ۲۲:۲۲
سلام برادر بنظر من اينكه اون بالا نوشتي داغ 2 برادر و... زياد جالب نيست يه جورايي انگار ميخاد حس همدردي رو جلب كنه اما اونيكه شعورش رو داره احتياج نيست بهش يادآوري كرد.
مرگ براي همه ماهاست من براي پدر و برادرات متاسف نيستم چون بالاخره بايد ميرفتن و حالا با گناهاني كمتر به خونه واقعي خودشون ميرن و انشاء الله به لقاي پروردگارشون ميرن و شما اگه خيلي دوستشون داري براشون قرآن بخون و يادگار نيكي از پدرت باش.
ببخشيد خيلي حرف زدم خدا انشاءا.. بقيه اعضاي خانوادت رو برات نگه داره و عاقبت بخير باشيد.
بمنم سري بزني ضرر نكردي.
پاينده و سلامت و سرفراز باشد.
احمد ۲۳ بهمن ۱۳۸۹، ۱۳:۳۸
با سلام
از مطالبتون نهایت استفاده را بردیم
منتظر پست و مطالب جدید هستیم
رضا فخری ۰۲ دی ۱۳۸۹، ۰۳:۳۰
سلام آقای الوند
من شنیدم که طرز آی دی دادن به تگ ها به طور استاندارد فرق داره!
یعنی اگه بخواهیم به هر تگ یک ویژگی منحصر به فرد بدیم باید از id استفاده کنیم و اگر بخواهیم یک ویژگی رو به چندین تگ بدیم باید در تگ از class استفاده کرد.
میخواستم بگم این که class و id رو به جای هم استفاده کنیم مشکلی در استاندارد بودن نوشتمون ایجاد نمیمنه؟
ممنون...
سینا ۱۴ آبان ۱۳۸۹، ۱۴:۲۸
سلام دوست عزیز.من همیشه از سایت شما بازدید می کنم.
و همیشه منتظر مطالب جدیدم تا ازشون استفاده کنم.
اول تشکر می کنم بعد یه سوالی داشتم.
من یه وبلاگ دارم.بازدیدش زیاد بالا نیست.بیشتر دوستانم ازش دیدن می کنن.بگذریم...
می خواستم توی وبلاگ از تبلیغات استفاده کنم.همون سیستم های کلیکی.همانطور که اطلاع دارین کلیکی 60 تومانه.بستگی هم به بازدید سایت داره.ولی دوست عزیز من اصلا نمی دونم چطور باید این کار و انجام بدم.از کجا باید این تبلیغات و بگیرم.
می خواستم در این زمینه یه کمکی به من بکنید.
با تشکر فراوان
sanisab ۱۵ فروردین ۱۳۹۱، ۱۵:۲۴
دوست عزیز من اینو پیشنهاد نمیکنم بیشترشون دروغه
سراب ۱۴ آبان ۱۳۸۹، ۱۳:۴۸
سلام بايد بگم اين سرعتي كه شما تو قرارداد ميبينيد كاذب...در واقع سرعت اصلي اين نيست بهتره يه دانلود منيجر نصب كنيد تا سرعت واقعي رو بفهميد ميبينيد كه خيلي كمتر از اون چيزيه كه فكر ميكنيد
جواد ۱۴ آبان ۱۳۸۹، ۱۳:۴۴
سلام حمزه جان
والا من یه مشکلی تو ویرایش قالب در بلاگفا دارم
میخوام سایز فونت عنوان وبلاگ رو 0 کنم اما این مورد تو فایل css ذخیره شده که من تو این مورد اصلا اطلاع ندارم
یه خواهشی ازت داشتم
من آدرس این قایل css رو واست میزارم یه زحمت بکش سایز فونت رو تو بخش تیتر که 25 نوشته شده صفر کنی و بعد فایل رو با همون پسوند ذهیره کنی تا من بزارم و مشکلم حل بشه
http://blogskins.ir/47/style.css
خدا پدر و برادرانت رو رحمت کنه
آدر وبلگم رو گذاشتم تا ببینی این سایز فونت کل زحمت تصویر قالبم رو از بین برده
یا علی
جواد ۱۳ آبان ۱۳۸۹، ۱۶:۳۰
جناب محسن
این مشکل شما نیست
همه کسایی که adsl دارند همینطور هست
سرعت در ساعات مختلف متغیر است،در برخی مواقع از 100 هم بالاتر میرود اما برخی مواقع به 14 هم میرسد!!
البته به شرکت سرویس دهنده نیز بستکی دارد
بنده شاتل دارم و این مشکل را از روز اول داشتم
arvin ۱۳ آبان ۱۳۸۹، ۱۵:۵۰
سلام ببخشید یه سوالی داشتم من هرکاری میکنم رنک وبم بالا نمی ره وبلاگم هم حدود یه سالی هست که دارم اگه میشه راهنمایی کنید
sanisab ۱۵ فروردین ۱۳۹۱، ۱۵:۱۷
سلام دوست عزیز
شما از سایت هایی که بک لینک میدن متونی استفاده کنی
با سایت های که تو گوگل رتبه دارن میتونی ازشون بخوای که تبادل لینک کنین با هم .

سایت خودتونو تو موتور های جستجو ثبت کن البته اگر زیاد اینکار کنی موتور های جستجو سایتت قفل میکنن

اگر برات مقدور هست خبرنامه برای سایت درست کن و مطلب بفرست برای اعضا .

شما رو قسمت سئو سایت هم کار کن ایشالا که رتبت بالا میره

موفق باشی
hawre ۱۲ آبان ۱۳۸۹، ۱۹:۵۳
سلام خسته نباشيد من ميخوام يك فروشگاه اينترنتي در وبلاگم داشته باشم لطفا من را راهنمايي كنيد ممنون ميشم اگه جواب را در قصمت نظرات وبلاگم بنويسيد
محسن ۱۱ آبان ۱۳۸۹، ۲۲:۰۹
سلام.آقا حمزه واقعا تسلیت می گم.واسه روح پدرت فاتحه فرستادم.آقا حمزه تو رو خدا کمکم کن.من یه ای دی اس ال گرفتم و یه مشکلی دارم و مامانم هی اینو تو سرم می کوبه.مشکلم اینه که من سرعت 256 گرفتم اما الان که وصل می شم می بینم سرعت دانلودش از 90 بیشتر نمی ره.آیا بید تنظیمات خاصی رو انجام داد؟تورو خدا به خاطر خوشنودی روح پدرت جوابمو بده و واسم تحقیق کن.قول می دم واسه بابات دعا کنم.تورو خدا کمکم کن.خیلی ناراحتم.اگه کمک کنی باباتم خوشش میاد.مرسی از لطف همیشگی شما.
sanisab ۱۵ فروردین ۱۳۹۱، ۱۵:۱۱
سلام دوست من
من تا اونجا که میدونم همه اینجور مشکلات دارن اما برای بهبودی کم میتونی برای دانلود از “اینترنت دانلود مسنجر ” استفاده کنی میتونی هم از وب سایت های دانلود بگیری یا بخری.
دوم اینکه :
نرم افزار هایی هست برای بیشتر کردن سرعت اینترنت میتونی از اونا هم استفاده کنی
خودت هم میتونی یه سرچ کنی
موفق باشی