آموزش برنامه نویسی وب و مهارتهای مرتبط

پنجشنبه ۰۴ اردیبهشت ۱۴۰۴

Thursday, April 24, 2025 GMT +3:30

مقدمه ای بر CSS و استایل دهی صفحات وب

پس از آشنایی و تسلط بر کدنویسی HTML روند فراگیری مهارتهای حرفه ای وب با مبحث دیگری تحت عنوان CSS ادامه می یابد، CSS مخففی از سرواژه های Cascading Style Sheets و در اصطلاح به معنی شیوه ای جهت شکل دهی ظاهر و فرم صفحات وب است، CSS را باید به نوعی جادوگر طراحی وب نامید چرا که کدنویسی بی روح و اسکلتی HTML با کمک CSS تبدیل به طراحی جذاب و کاربر پسند می شود، فلسفه پیدایش این زبان به آسان کردن کار طراحان صفحات وب جهت شکل دهی و فرم بندی ایده هایشان بر می گردد، پیش از این برای اینکه به فرض رنگ فونت یک متن را در صفحات مختلف یک سایت تغییر دهیم ناچار بودیم در هر صفحه فونتمان را پیدا کرده و با صرف زمان زیاد، تک تک آنها را ویرایش کنیم، اما با معرفی CSS انجام این موارد بسیار ساده تر و البته حرفه ای تر شد، بنابراین می توان گفت گام دوم در یادگیری کدنویسی و طراحی وب فراگیری CSS است.

معنی و مفهوم CSS

همان طور که پیش از این اشاره شد، CSS مخفف عبارت Cascading Style Sheets است که با ترجمه کلمه به کلمه "شیوه نامه های آبشاری" معنی می شود، منظور از شیوه نامه این است که دستورات CSS به صورت جداگانه و معمولا در فایل هایی با فرمت css (یا به صورت داخلی در کدنویسی HTML) وارد شده و مرورگر با پیروی از این دستورات، به تگ های HTML جلوه مورد انتظار را نسبت می دهد، کلمه "آبشاری یا Cascading" نیز به این دلیل است که اولویت دستورات در CSS در حالت پیش فرض به صورت سلسله مراتبی (از پائین صفحه وب به بالا) هستند و در صورت تداخل صرفا یک ویژگی غالب می شود، به فرض اگر در یک فایل استایل که در بالای صفحه وب وارد شده برای بلاکی رنگ زمینه آبی در نظر گرفته شده باشد، فایل استایلی که در ادامه در صفحه وارد شود و برای همان بلاک رنگ زمینه خاکستری تعیین کند، ویژگی غالب می شود که در پائین ترین قسمت صفحه وجود داشته باشد، بنابراین با این توصیف، رنگ خاکستری به عنوان رنگ زمینه در نظر گرفته خواهد شد و ویژگی مشترک بالادستی (پس زمینه آبی) نادیده گرفته می شود.

فرمت بندی بدون استفاده از CSS

در ابتدای پیدایش HTML به عنوان ابزاری جهت ایجاد صفحات وب، جلوه های ظاهری مانند اندازه، رنگ، ویژگی های مربوط به متن و... توسط خاصیت های داخلی و اغلب به صورت خطی اعمال می شدند، این شیوه تا مدتها تنها راه اعمال استایل به صفحات وب بود تا اینکه رفته رفته با پیشرفت و توسعه وب، طراحان با محدودیت های مختلفی روبرو شدند که نیاز به معرفی روشی ساده تر و حرفه ای تر را یادآور می شد، از این رو در سال 1998 اولین نسخه از CSS توسط کنسرسیوم جهانی وب W3C معرفی و در کنار کدهای HTML در ساخت صفحات نوین وب به کار گرفته شد، با این پیش آگاهی دو نمونه کد که با دو روش قدیمی و جدید استایل دهی شده را با هم مقایسه می کنیم، کد اول بدون استفاده از CSS و صرفا توسط خاصیت های خطی HTML فرمت بندی شده است (برای تست کافی است کد را در یک ویرایشگر متنی یا HTML کپی، ذخیره و در مرورگر اجرا کنید، همچنین می توانید از پیش نمایش آنلاین استفاده نمائید):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | صفحه وب بدون استفاده از CSS</title>
<!-- Webgoo.ir -->
</head>
<body bgcolor="#0099CC">
<div align="justify" dir="rtl">
<font color="#003366">
نمایش متن 1 بدون استفاده از CSS
</font>
</div>
<div align="justify" dir="rtl">
<font color="#003366">
نمایش متن 2 بدون استفاده از CSS
</font>
</div>
<div align="justify" dir="rtl">
<font color="#003366">
نمایش متن 3 بدون استفاده از CSS
</font>
</div>
</body>
</html>

پیش نمایش

استایل دهی با استفاده از CSS

شاید با اجرای کد بالا و مشاهده نتیجه در مرورگر به این فکر افتاده باشید که وقتی می توان به شیوه خطی به هدفمان برسیم، چه نیازی به CSS است؟! در پاسخ باید گفت که صفحات در پروژه های وب معمولا به یک یا چند مورد محدود نمی شوند که بتوانیم مورد به مورد با استایل خطی به آنها ویژگی های ظاهری را نسبت دهیم، اغلب نیاز است که یک ویژگی و حالت به تگ های مختلفی در صفحات مختلف نسبت داده شود، واضح است که به شیوه خطی باید تک تک این صفحات و تگ ها ویرایش شوند که از نظر حرفه ای قابل قبول و بهینه نیست، در دنیای حرفه ای و مخصوصا در کدنویسی وب این قانون نانوشته جاری است که کم بنویس و زیاد استفاده کن! لذا CSS با این هدف که بتوانیم یک بار استایل را تعریف و در جاهای مختلف از آن استفاده کنیم ایجاد شد، حال همان کد را به شیوه جدید استایل دهی می کنیم:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | صفحه وب با استفاده از CSS</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    background-color:#0099CC;
}
.mydiv{
    text-align:justify;
    direction:rtl;
    color:#003366;
}
</style>
</head>
<body>
<div class="mydiv">
نمایش متن 1 با استفاده از CSS
</div>
<div class="mydiv">
نمایش متن 2 با استفاده از CSS
</div>
<div class="mydiv">
نمایش متن 3 با استفاده از CSS
</div>
</body>
</html>

پیش نمایش
در کد دوم اگرچه چند بلاک div وجود دارد، اما برای فرمت بندی آنها صرفا از یک شیوه استفاده شده، در واقع یکی از قابلیت های اصلی و کلیدی CSS امکان ایجاد و تعریف کلاس (Class) و آی دی (ID) است، به اینصورت که به طور مثال با تعریف یک کلاس، از آن در صفحات مختلف و بدون تکرار کدنویسی، به دفعات دلخواه استفاده می کنیم.
چند توضیح:
- CSS یک زبان کمکی است، یعنی به خودی خود کاربرد خاصی ندارد، ولی به تگ های HTML شکل و قالب می دهد.
- برای دیدن و مقایسه کد صفحات وب قسمت پیش نمایش، کلیک راست کرده و View Page Source را انتخاب نمائید.
- کدهای CSS در صفحات وب یا به صورت درون صفحه ای یا ایمپورت به صورت فایل خارجی هستند، در شیوه درون صفحه ای استایل CSS در قسمت head صفحه یا بین تگ های HTML به صورت خطی (Inline) تعریف می شود، در شیوه ایمپورت به صورت فایل خارجی نیز استایل CSS به صورت یک فایل خارجی در قسمت head صفحه و در تگ link درج می شود.
- تگ style برای ایجاد و تعریف کدهای CSS درون صفحه ای کاربرد دارد، مانند آنچه در صفحات بالا دیدیم.
- برای ایمپورت یک فایل CSS خارجی، از تگ link و خاصیت های آن، درون تگ head استفاده می کنیم، به طور مثال:

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

در این رابطه در آموزش های بعدی بیشتر خواهیم گفت.

دسته بندی: آموزش مقدماتی » CSS

برچسب ها: CSS

قبلی »

« بعدی

مطالب بیشتر:
نحوه تنظیم استایل لینک (Link) در CSS
ویژگی های Font و Text در CSS
کاربرد ویژگی position و float در CSS
سلکتور آی دی (ID) و کلاس (Class) در CSS
نحوه تنظیم لیست با تگ ul li در CSS

دیدگاه

۳۶ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

بهنام

۱۶:۰۵ ۱۳۹۲/۱۲/۰۸

بله متوجه شدم ممنون از راهنماییتون
میشه بجای علامت پلاس از علامت اسپیس یا همون خط فاصله استفاده کرد هر دوش یکی هستش درسته؟

h1 + p {font-weight: bold;}
h1 p {font-weight: bold;}

اگه نه فرقشون رو بگین لطفا

طبق توضیح سایت w3.org حالت دوم (فاصله) تمام تگ های p که درون تگ h1 باشند را شامل می شود (یعنی حتی اگر بین تگ های تو در توی دیگری باشند)، اطلاعات بیشتر:

http://www.w3.org/TR/CSS21/selector.html

این مورد را باید با تست های بیشتر به صورت عملی درک کنید.

بهنام

۰۲:۴۳ ۱۳۹۲/۱۲/۰۸

سلام خسته نباشید
میشه به من بگین نقش + در سی اس اس چیست ؟ برای نمونه

.sgender input[type=radio] + label, input[type=checkbox] + label {}

علامت + یا plus برای مشخص کردن دقیق عنصری است که قصد اعمال استایل بر روی آن را داریم، به فرض حالت زیر را در نظر بگیرید:

h1 + p {font-weight: bold;}

این استایل تنها به تگ p اختصاص می یابد که بلافاصله بعد از h1 آمده باشد، در مورد استایل شما تنها به label هایی اختصاص می یابد که بلافاصله بعد از input از نوع radio یا checkbox آمده باشد.
نکته: این دستورات ممکن است در برخی مرورگر ها مانند IE 6 به خوبی عمل نکنند.

amir

۱۵:۲۱ ۱۳۹۲/۱۱/۰۵

سلام
من شنیدم که اگه قالب سایت (وردپرسی) رو به css تبدیل کنیم سرعت باز شدن صفحات سایت بالا میره
لطفا یه پست راجع به افزایش سرعت باز شدن سایت بدون استفاده از پلاگین بذارید و راهنمایی کنید
*جواب روبه ایمیلم هم ارسال کنید*
همچنین چه جوری سئو سایت رو افزایش بدیم بدون این که از پلاگین خاصی استفاده کنیم
موفق باشید
یاحق

امروزه تقریبا تمام قالب های وب مبتنی بر ترکیب HTML و استایل CSS طراحی می شوند، چیزی به عنوان تبدیل به CSS وجود ندارد!
در مورد سئو نیز هیچ ترفند معجزه گری وجود ندارد، باید مجموعه ای از قواعد مربوط به بهینه کردن صفحات وب را بیاموزید که شامل مباحث زیادی می شود (به بخش بهینه سازی و همچنین منابع مرتبط با سئو مراجعه کنید).

shaian

۲۲:۰۱ ۱۳۹۲/۰۶/۰۳

در ‏Dreamweaver‏ میشه از کدهای ‎ CSSاستفاده کرد.‏‎ ‎

منظورتان از استفاده مشخص نیست، دریم ویور صرفا یک محیط کدنویسی است که امکان نوشتن کدهای مربوط به وب (از جمله CSS) را فراهم می کند، اما از نظر استفاده، CSS را باید در داخل صفحات HTML استفاده کنید.

setare

۲۰:۱۷ ۱۳۹۱/۰۸/۰۲

سلام
ببخشید من تازه میخواهم کدنویسی با زبان CSS را شروع کنم. سوال من این است که برای نوشتن این کدهای CSS باید از چه نرم افزاری استفاده کنیم تا اجرا بگیریم؟

برای اجرای کدهای CSS به نرم افزار خاصی نیاز نیست، باید استایل خود را در یک صفحه HTML برای عناصر و تگ ها به کار ببرید و پس از ذخیره کردن فایل، در مرورگر آن را اجرا کرده و نتیجه کار خود را ببینید، به فرض اگر یک کلاس تعریف می کنید، آن کلاس را به یک تگ div نسبت دهید و فایل را با فرمت html ذخیره کرده و اجرا کنید.

ali

۲۳:۲۱ ۱۳۹۱/۰۸/۰۱

سلام...
سه سالی میشه که دنبال اینجور وبی میگشتم..! ممنون بابت تمامی زحماتتون...
سبک آموزشتون خیلی خوبه...
واسه تشکر کوچیک یه هیدر خیلی ساده واستون زدم...

http://irphoto.ir/uploads/13509352071.gif

ببخشید که در مقابل زحماتتون خیلی کمه، راستش وقت زیادی واسه طراحی ندارم ...
اگه وقت کردی یه سر بزن...!
بازم ممنون...
یاعلی

نظر لطف شما است، خیلی ممنون که وقت گذاشتید.

نخست

قبلی

بعدی

آخر

صفحه 3 از 3

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