طراحی وب سایت در کرج
026-34204893
09101013858

بایگانی برچسب‌ها : extension.css

مراحل اول با CSS

مراحل اول با CSS

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

بسیاری از این نوع برنامه ها از قبیل Adobe Dreamweaver یا حتی دفترچه یادداشت وجود دارد. بسیاری از طراحان وب با اولین برنامه نویسی شروع به کار کردند. این یک راه حل خوب است اگر شما در بودجه.

حالا برای شروع کارها. اولا، اگر مطمئن نیستید که چگونه CSS با HTML اجرا می شود، بازبینی مجدد آن را به دنبال خواهد داشت که سری بعدی ماست. برای شروع از شما نیاز به ایجاد یک فایل a.css دارید.

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

اولین قدم در ایجاد یک سند CSS این است که نوع کدگذاری مورد استفاده شما را مشخص کند (انواع مختلفی وجود دارد که همه آنها در اینجا قابل مشاهده است). به طور کلی بیشتر صفحات CSS3 مانند این شروع می شوند:

charset “utf-8″؛

همیشه یک ایده خوب برای اعلام نوع کدگذاری است که یک ورق سبک خارجی استفاده می کند. به خصوص اگر شما هیچ کاراکتر غیر ASCII داشته باشید. اعلام شما باید اولین خط در صفحه سبک باشد.

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

راه های مختلفی برای توضیح کد شما وجود دارد، اما من فقط می خواهم بیش از ۲ که بیشتر از آن استفاده می کنم وجود دارد. اولین راه یک نظر چند خطی است که توسط آن تعریف شده است

/ * متن شما در اینجا * /

براکت (/ * و * /) نشان می دهد که این نظر چندین خط را پوشش می دهد. برچسب باز (/ *) بدیهی است قبل از اولین علامت نظر شما استفاده می شود و برچسب بسته شدن (* /) بعد از آخرین علامت نظر شما استفاده می شود. بنابراین یک نظر چند خطی در نهایت به نظر می رسد:

/ * نویسنده: جاش پیرس

سایت: آدرس وب سایت

CSS Document * /

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

به این ترتیب می توانم هر عنصر را به عنوان من آن را طراحی کنم. این فقط ترجیح شخصی است.

اولین چیزی که بسیاری از طراحان از آن شروع می کنند، هدر صفحه است. این یکی از دو روش انجام می شود. این دو روش یک دوره (“.”) یا یک پوند (“#”) است. برای اعلام سرصفحه شما به سادگی می نویسید:

 

.header {

 

background-color: #FFFFFF;

 

width: 100%;

 

Border-bottom-style: solid;

 

border-bottom-width: 2px;

 

border-color: #000000;

 

margin-bottom: 0px;

}

خوب، پس این به نظر می رسد مانند یک دسته از gibberish درست است؟ بیایید از طریق این یک خط در یک زمان برویم. برای شروع با برچسب:

 

background-color: #FFFFFF;

این قطعه کد به سادگی به مرورگر می گوید که رنگ پس زمینه هدر رنگ سفید است (#FFFFFF رنگ سفید در hex را مشخص می کند). نیمه کولون در انتهای خط به مرورگر می گوید که پایان این خط خاص است.

با این حال، همه چیز در داخل براکت ({و}) به عنوان یک جمله خوانده می شود (این همه هدر است). خط بعدی به مرورگر می گوید که چگونه هدر را ایجاد می کند. در این مورد ما از آنچه موقعیت موقعیتی نامیده می شود استفاده می کنیم.

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

در مورد کد فوق، ما به مرورگر گفتیم که ما می خواهیم هدر ۱۰۰٪ عرض صفحه مانیتور باشد. خطوط زیر عبارتند از: border-bottom-style: solid؛ این به سادگی به مرورگر می گوید که هدر حاشیه جامد در پایین دارد. تعدادی از سبک های مرزی مختلفی وجود دارد که مرورگرهای مدرن می توانند آن را ارائه دهند.

خط چهارم به مرورگر نشان می دهد که مرز چگونه است. صورتحساب:

 

Border-bottom-width: 2px;

به سادگی به مرورگر می گوید که مرز در هدر ۲ پیکسل عرض است. ما می توانیم رنگ مرز خود را با افزودن border-color code تنظیم کنیم: # ۰۰۰۰۰۰؛ این کد رنگ مرز به سیاه را تغییر می دهد. آخرین قطعه کد که من در بیانیه فوق استفاده کردم:

 

margin-bottom: 0px;

 

این بیانیه به مرورگر می گوید که حاشیه ۰ پیکسل در انتهای هدر وجود دارد. تغییرات این کد وجود دارد که به شما این امکان را می دهد که هر طرف هدر یک رنگ یا اندازه متفاوت داشته باشید. اگر فقط از حاشیه بیانیه استفاده می کنید: ۰px؛ مرورگر به سادگی یک حاشیه ۰ پیکسل در هر ۴ طرف هدر خود قرار داده است.

 

این همه برای این نگاه به اولین گام با CSS است.

 

Tagged