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

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

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

قبلی »

« بعدی

مطالب بیشتر:
ویژگی های Font و Text در CSS
خاصیت Background و ویژگی های آن در CSS
کاربرد ویژگی position و float در CSS
کاربرد خاصیت height و width در CSS
نحوه تنظیم لیست با تگ ul li در CSS

دیدگاه

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

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

mahdi

۱۵:۱۵ ۱۴۰۰/۰۲/۲۱

سلام استاد عزیز در css از این استفاده کنیم خوب نیست؟

@import

از دستور import برای وارد کردن فایل CSS خارجی استفاده نکنید بهتر است، به تجربه در جاوا اسکریپت استفاده از import مشکلاتی در زمینه تقدم و تاخر بارگذاری فایل ها و دسترسی به متغیرها ایجاد می کند هرچند در مورد CSS احتمالا این سبک مشکلات نباشد اما import حتما باید در ابتدای تگ style باشد یا در ترکیب روش link و import مشکلاتی بروز می کند، در کل مدیریت روش link ساده تر است.

امیرحسین

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

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

در کدهای جاوا اسکریپت اینگونه تعریف شده که اگر روی متغیر elm رویداد onclick اجرا شد، چک باکس تیک بخورد، متغیر elm تگ های tr را در خود دارد، باید حلقه را به صورت زیر تغییر دهید:

for(var i = 1; i < elm.length; i++){
        input[i - 1].onclick = function(){
            var j = this.getElementsByTagName('td')[0].innerText - 1;
            input[j].checked = !input[j].checked;
        }
    }

تگ input (چک باکس) جایگزین تگ tr شده.

امیرحسین

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

سلام استاد عزیز ممنون بابت جواب سوال قبلی
یه سوال دیگه داشتم با جدول های اون پنل که نشانتان دادم یه مشکل دیگه هم هست
من یه همچین کد های جاوا اسکریپت را نوشتم.

var input = document.getElementsByName('check_boxed[]');
            for(var i = 1; i < elm.length; i++){
                elm[i].onclick = function(){
                    var j = this.getElementsByTagName('td')[0].innerText - 1;
                    if(input[j].checked == true){
                        input[j].checked = false;
                    }
                    else{
                        input[j].checked = true;
                    }
                }
            }

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

حذف شد

قسمت مدیریت پست ها را کلیک کنید
بعد با این کدهای جاوا اسکریپت گفتم که وقتی روی هر کدوم از ستون های جدول کلیک میشه چک باکسش تیکش فعال بشه و اگه دوباره همان ستون را کلیک کرد تیک های جدول از حالت فعال غیر فعال بشه تا اینجا که مشکلی نیست اما اگه رو خود چک باکس کلیک میکنم هیچ اتفاقی نمیوفته یعنی نه تیک میخوره نه برداشته میشه شاید کاربر خواست رو خود چک باکس کلیک کنه!
مشکلش رو میدونم چیه ولی بازم نمیتونم حلش کنم !

سایت بررسی شد، ظاهرا مشکل برطرف شده؟

امیرحسین

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

ممنون استاد زحمت شد ببخشید یه مشکل دیگه هم داشتم یه چندتایی

<input type="checkbox" name="deletes[]" value="<?php echo $row2['id']; ?>" />

یه همچین فیلدی برای چک باکس دارم و

<script type="text/javascript">
        window.onload = function(){
            var myform = document.getElementById("myform");
            myform.onsubmit = function(){
                if(myform.deletes[].length <= 0))
                   return false;
            }
        }
    </script>

گفتم حداقل یدونه چک باکس رو باید انتخاب کنه وگرنه سابمیت نشه

if(myform.deletes.length <= 0))

این قسمتشو مشکل دارم و نمیخوام با جیکووری حلش کنم لطفا تصحیحش کنید ممنون میشم و در مورد سوال قبلی چگونه بگم وقتی عرض مرورگر از 360 کوچیکتر بود فلان جدول به خروجی ارسال بشه و اگه از 360 بزرگتر بود یه جدول دیگه به خروجی ارسال بشه
با سی اس اس که نمیشه!
راه حلی که به ذهن من میرسه با ajax حلش کنم اما شما چی پیشنهاد میکنید ؟

برای جلوگیری از ارسال فرم در صورت انتخاب نشدن یک چک باکس می توانید از نمونه کد زیر الگوبرداری کنید:

<script type="text/javascript">
    function submitForm(id) {
        var form = document.getElementById(id);
        var input = form.getElementsByTagName('input');
        var count = 0;

        for(var i = 0, length = input.length; i < length; i++) {
            if(input[i].type == 'checkbox') {
                if((input[i].checked == true)) {
                    count++;
                }
            }
        }

        if(count == 0) {
            alert('یک فیلد را انتخاب کنید!');
            return false;
        } else {
            form.submit();
            return true;
        }
    }
</script>
<form id="your-form-id">
<input type="button" value="submit" onclick="submitForm('your-form-id')">
</form>

در مورد سوال دوم PHP زبان سمت سرور است و برای این کار مناسب نیست، البته با اطلاعات واسط کاربری می توان تشخیص داد که کاربر از موبایل استفاده می کند یا خیر اما اندازه صفحه نمایش مشخص نمی شود، با Ajax هم ابتدا باید صفحه یک بار بارگذاری شود تا اطلاعات آن به سرور ارسال شوند، بهترین حالت این است که از قابلیت های خود CSS استفاده کنید چون این مبحث مستقیما به شکل نمایش خروجی برمی گردد نه خود خروجی، به طور مثال استفاده از

media="screen and (max-device-width: 480px) and (resolution: 163dpi)"

در آموزش زیر:

https://alistapart.com/article/responsive-web-design

امیرحسین

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

سلام استاد عزیز
من یه سوال داشتم
ببینید من یه جدول دارم که حالت ریسپانسیو طرح کردم و سطر حدود 10 تا داره وقتی حالت گوشی میاد میبینه کاربر این جدول از عرض مرورگر تجاوز میکنه با اینکه گفتم وقتی عرض مرورگر از 360 پیکسل کوچیکتر بود عرض جدول هم 360 پیکسل باشه اما ستون هاش چون زیاد هستن و متن هاشم کم نیستن اون عرضی که برای جدول تعیین کردم اعمال نمیشه اما اگه مثلا دوتا سطر داشت هر سطری هم یه متن به عنوان مثال یک کلمه داخل هر ستون بود اونوقت اگه عرضشو مشخص کنم اعمال میشه اما اگه سطر هاش بیشتر باشه به عرضی که مشخص میکنم گوش نمیدهد لطفا بگین چیکار کنم ؟ حتما میخوام به عرضی که مشخص کردم اعمال بشه و نمیتوانم overflow بزارم براش لطفا راهنمایی کنید.

سایت تست و بررسی شد، ظاهرا فقط در ابعاد 320x480 مشکل دیده می شود، قاعدتا برای نمایش محتوا باید فضای کافی وجود داشته باشد، در غیر اینصورت یا باید به صورت عمودی یا افقی فضا ایجاد شود، اگر این فضا به صورت عمودی باشد مشکلی نیست اما در حالت افقی اگر محتوا از جدول بیرون نزند نتیجه این است که اندازه جدول بزرگتر خواهد شد، باید در حین طراحی خاصیت هایی مانند max-width را تعیین کنید، سعی کنید padding ها را برای موبایل کم کنید، همچنین گاهی ممکن است استفاده از

!important

راهگشا باشد.

مبين

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

سلام چه جوري ميتونم متن رو رنگي كنم يا لينك رو مثلا وقتي

<a href="">متن</a>

رو ساختم بايد چه كار كنم كه لينك رنگي شه. لطفا كاربردي جواب بدين باتشكر

اگر در استایل CSS برای سلکتور a در حالت a:hover خاصیت تعریف کنید، روی متن های لینک شده تاثیر می گذارد، مثال:

<style type="text/css">
a{
	text-decoration:none;
	color:#0024FF;
}
a:hover{
	color:#FF0004;
}
</style>
<a href="#">متن لینک شده</a>

محسن(مبتدی)

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

سلام وقت بخیر آقای مهندس
استاد من اگه بخوام کدهای CSS یک قالب رو تو یه فایل دیگه تفکیک کنم چیکار باید بکنم تا این دو فایل بهم متصل بشن

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

mojtabaabdi

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

سلام یه سایت دادم یه نفر برام نوشته با css و html این سایتو خودش بارگذاری کرد و رفت سایتو من deactive کردم الان بعد از حدود 1 ماه میخوام همون کد هارو بارگذاری کنم ولی متاسفانه بعد از بارگذاری کلا 4 تا نوشته میاد نه خبری از جدولا هست و نه از عکس ها ممنون از سایت خوبتون

حل این نوع مشکلات نیاز به بررسی دقیق سایت شما است، صرفا با شرح ماجرا نمی توان نظر خاصی ارائه کرد!

محمد

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

سلام سايت شما واقعا عاليه خدا خيرتون بده انشاالله موفق باشيد
محمد
مدير سايت مجله شلوغ

غریب

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

واقعا ممنون استاد این مورد رو واقعا نمیدونستم ممنون کمک بزرگی کردید من هر وقت سوالی داشته باشم به سایت شما سر میزنم چون از نظر علمی در این مورد واقعا قبولتون دارم پس مزاحمتهام رو ببخشید
موفق باشید

ممنون نظر لطف شما است، جای خوشحالی است اگر بتوانیم کمکی کنیم.

غریب

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

سلام عزیز
در دو نمونه ای که گذاشتید ذکر کردید بارگذاری صفحه ای که از استایل خارجی استفاده میکنه بهتره حجم صفحات پایین میاد کاملا درسته ولی ایا خود فراخوانی فایل سی اس اس بارگذاری صفحه رو کندتر نمیکنه ؟
یعنی مرورگر جای اینکه بره فایل رو فراخونی کنه و بخونه و بعد برگرده صفحه رو بخونه ایا سی اس اس همون داخل باشه این کار سریعتر اتفاق نمیفته ؟ اخه تا الان اعتقاد من این بوده و متاسفانه همین کارم کردم در بعضی جاها حتی جاوا اسکریپت رو ممنون میشم تجربتون رو در اختیارم بزارید در این خصوص مرسی و موفق باشید

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

بهنام

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

راجع به سوال کاربر اخری

p.span
p .span

فرق میکنند یا هر دو یکی هستند؟

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

فرهاد ف

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

استاد این کد را هم مشاهده کنید:

p div.myspan{
    background-color: blue;
}

الان چرا این کد از بالایی تاثیر نمی گیرد؟

<p><div class="myspan">test</div></p>

قبلا گفتیم که تگ div نمی تواند داخل تگ p استفاده شود!

فرهاد ف

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

درود استاد؛
حرف شما کاملا درست هستش. پس چرا این کد پاسخ نمیده:
کد css :

p .span{
color:green;
}

و کد html:

<p><div class="span">into p tag and span class</div></p>

و یا حتی این کد تغییر یافته css :

p div.span{
color:green;
}

و باز هم همون کد Html خط بالاتر:

<p><div class="span">into p tag and span class</div></p>

مزید امتنان است اگه هر دو تا مثال css رو با کد html ی که اعمال میشه بهش برام توضیح بدید.
البته میشه با این کد جواب گرفت ولی من هدفم این هستش که چرا با گذاشتن div انگار مشکل پیدا میشه.

استفاده از تگ div درون تگ p به لحاظ استاندارد HTML w3.org صحیح (valid) نیست، تگ p صرفا می تواند تگ های inline مانند span را درون خود داشته باشد!، برای پی بردن به معتبر بودن کدنویسی HTML می توانید به آدرس زیر مراجعه کنید:

https://validator.w3.org

بهنام

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

سلام استاد عزیز
تشکر میکنم بابت جوابایی که دادین مشکلاتم به تدریج حل شد امیدوارم همیشه موفق باشید...
سوالی راجع به direction داشتم و در input کاربر که فونت کامپیوترش روی فارسی باشه خود به خود direction از راست به چپ تنظیم شه و هر زمان که روی انگلیسی گذاشت direction از چپ به راست تنظیم شه و text-align نیز از چپ و در شرایط فارسی از راست ایا همچین امکانی هست؟؟

برای تغییر direction لطفا مطلب زیر را مطالعه کنید:

http://imohsen.net/change-input-direction-depend-on-language/

برای تغییر text-align می توانید نمونه کد زیر را با کد بالا ترکیب کنید:

 document.getElementById("id").style.textAlign = "left";

نخست

قبلی

بعدی

آخر

صفحه 1 از 3

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