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

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

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

  • کانال رسمی تلگرام سنادیتا
  • بهینه سازی و سئو طراحی سایت

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

شنبه ۱۳ آذر ۱۳۹۵ | 00:00345 بازدید

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


در این پست قصد داریم در مورد شیوه های مختلف استفاده از CSS در درون صفحات HTML صحبت کنیم .
به طور کلی به ۳ شکل می تونید از 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 در درون تگها ، چند تا مثال براتون میارم :

● مثال ۱)  فرض کنید می خواید فقط یکی از پاراگراف های توی صفحتون رنگ متنش قرمز بشه .
- تگ داشتن یک پاراگراف معمولی به شکل زیره :
<p>7Learn.com</p>

حالا ما می خوایم با استفاده از CSS درون این تگ ، رنگ متنشو قرمز کنیم . در این صورت کد پاراگراف بالا به شکل زیر باید تغیر پیدا کنه .
<p style="color:red" >7Learn.com</p>

می بینید که فقط ویژگی style به این تگ اضافه شده و به عنوان مقدار  یکی از ویژگیهای CSS که رنگ متنو مشخص می کنه آورده شده !
● مثال ۲)  همون پاراگراف بالا رو می خوایم نوع فونتش رو Tahoma و اندازه فونت رو ۱۶ پیکسل کنیم . کدش مثل زیر میشه :
<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>




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 و جلوگیری از نوشتن کدهای تکراری میشه .

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

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

برای چسبوندن یک فایل CSS جهت استفاده از سلکتورهای اون در یک صفحه html باید تگ زیر رو در header صفحه htmlتون در تگ <head> قرار بدید :
<link rel="stylesheet" type="text/css" href="cssFileURL">

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

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

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

 http://www.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="http://www.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 .


دیدگاه خود را بیان کنید
خدمات طراحی سایت سنادیتا
  • طراحی سایت خبری
  • طراحی سایت خدمات مجالس
  • طراحی سایت خودرو
  • طراحی سایت دانشگاهی
  • طراحی سایت دانلود
  • طراحی سایت دکوراسیون و لوازم منزل
  • طراحی سایت رستوران, کافی شاپ, فست فود
  • طراحی سایت زیبایی و آرایشی
  • طراحی سایت ساختمانی
  • طراحی سایت شخصی
  • طراحی سایت ورزشی
  • طراحی سایت آتلیه
  • طراحی سایت شرکتی
  • طراحی سایت صرافی
  • طراحی سایت صنعتی
  • طراحی سایت علمی
  • طراحی سایت فروش شارژ
  • طراحی سایت فروش فایل
  • طراحی سایت فروشگاهی
  • طراحی سایت فیلم و موزیک
  • طراحی سایت هنری
  • طراحی سایت واکنش گرا
  • طراحی سایت تفریحی و بازی آنلاین

 

  • طراحی سایت کارخانجات
  • طراحی سایت کودکان
  • طراحی سایت گالری
  • طراحی سایت گردشگری
  • طراحی سایت لباس و کیف و کفش
  • طراحی سایت مجله اینترنتی
  • طراحی سایت مدرسه
  • طراحی سایت مراکز تجاری
  • طراحی سایت مرتبط با حیوانات
  • طراحی سایت نمایشگاهی
  • طراحی سایت هتل و اماکن اقامتی
  • طراحی سایت تبلیغاتی

 

RSS

آرشیو

بازدید روز

۷۲۰

بازدید دیروز

۴۱۷۵

بازدید ماه

۵۹۷۷۶

بازدید کل

۱۶۳۳۲۵۳

افراد آنلاین

۱۱

نام سايت: sanadata.com
الکسای جهانی :۱۴۱۶۶۴
میزان تغیرات :+۲۳۳۰۶
الکسای ایران :۳۳۲۸

1  
2 A B C
3 D E F
4 G H I
5 J K L
5 J K L
6 M N O
7 P Q R S
8 T U V
9 W X Y Z
*
0 +
0 +
0 +
0 +
#

آدرس دفتر مركزی :

تهران - فلکه دوم صادقیه - ابتدای خیابان آیت ا... کاشانی - جنب درمانگاه ابن سینا - مجتمع سبحان - طبقه 6 - واحد 33

ساعت کار شرکت از ساعت 9 الی 17

واحد فروش - خانم راد :     02144050905

واحد آموزش - خانم لطفی  :     02144048747

کلیه حقوق مادی و معنوی این وب سایت برای شرکت سنارایانه یکتا محفوظ می باشد.