آموزش خواص مقدماتی CSS

خواص ابتدایی سی اس اس ، در عین سادگی بسیار کاربردی هستند و تعداد استفاده ی آن ها در یک سند css بسیار زیاد است.

این بخش را می توان مهمترین بخش از آموزش Css دانست. بدین رو این مقالات را با دقت مطالعه نمایید :

Font Family

در این بخش از آموزش css ، تنظیم قلم و فونت را آموزش میدهیم.

در css دو نوع از خانواده فونت ها وجود دارد.

• "generic family" مثل  "Serif" یا "Monospace"
• "font family" مثل "Times New Roman" یا "Arial"

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

در صفحات نمایش کامپیوترها فونت های خانواده sans-serif نسبت به فونت های خانواده serif آسانتر خوانده میشوند و عمومی تر هستند.

یکی از نکات مهم در طراحی سایت استفاده از فونت استاندارد برای شکیل نشان دادن صفحات وب سایت شما میباشد.

Font Style
با این ویژگی شما نوع نمایش متن را مشخص میکنید.این ویژگی دارای دومقدار زیر میباشد :

1.  normal   :متن به صورت معمولی نمایش داده میشود
2.  italic   : متن به صورات ایتالیک نمایش داده میشود
3.  oblique  :  متن به صورت مورب نمایش داده میشود

مثال : 

Font Size
این ویژگی سایز متن را مشخص میکند. اندازه متن در طراحی وب سایت بسیار حائز اهمیت است. ویژگی font-size را میتوانید به صورت مطلق یا نسبی مقداردهی کنید . اگرچه در زوم و رزولیشن های مختلف این مقدار تغییر میکند.ولی این تغییر اندازه برای کل صفحه میباشد وشامل یک بخش نیست. سایز پیش فرض برای یک متنن نرمال 16px تعریف میشود.
برای متن هایی که در بالای صفحه (header) نمایش داده میشوند از تگ های <h1> - <h6> و تگ <p> برای پاراگراف های خود استفاده کنید، در مورد این تگ ها در قسمت آموزش HTML میتوانید بیشتر اطلاعات کسب کنید .
مثال :

تنظیم فونت با واحد EM
در نسخه های اولیه Internet Explorer به دلیل پشتتیباتی نشدن واحد px بسیاری از طراحان از واحد em استفاده میکردند.
هر 1em رابر با 16px میباشد.
مثال :

این واحد در تمامی مرورگرها پشتیبانی میشود.

Text Color

در این بخش از آموزش css ، تنظیم متن و نوشته را آموزش میدهیم.

ویژگی color  برای تنظیم رنگ متن استفاده میشود.این ویژگی با 3 روش زیر میتواند مقدار دهی شود

• HEX : مثال : "#ff000"
•  RGB:  مثال :   (rgb(255,0,0
• نام رنگ :  مثال :  red

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

با تغییر رنگ بدنه شما در واقع رنگ background صقحه را تغییر میدهید

Text Alignment
برای تنظیم متن در حالت افقی از این ویژگی استفاده میکنیم،این ویژگی میتواند با یکی ازمقادیر زیر مقداردهی شود

• Center
• Right
• Justify
• Left

با مقدار  Justify تمامی خطوط عرض یکسانی خواهند داشت

Text Decoration

این ویژگی بیشتر برای پاک کردن یا اضافه کردن فرم خاص به متن مورد استفاده قرار میگیرد

در این مثال در واقع اگر متن شما دارای فرمت خاصیمانند زیر خط (underline) یا هر فرمت دیگری بود ،این فرمت را پاک میکند.
مقادیری که میتواند این ویژگی بگیرد در مثال زیر آمده است

لیست UL و LI در سی اس اس

در این بخش از آموزش css ، تنظیم لیست ها را آموزش میدهیم.

ویژگی هایی که برای یک لیست در css وجود دارد به ما این امکان را میدهد که  List را در 3 حالت زیر نمایش دهیم.

• تنظیم لیست یه صورت مرتب
• تنظیم لیست به صورت نامرتب
• تنظیم تصویر برای نشانگر لیست

در HTML  دو نوع ار انواع لیست وجود دارد

• unordered lists     آیتم های لیست با یک نشانگرد گرد شکل مشکی ، نمایش داده میشوند
• ordered lists     آیتم های لیست با اعداد یا حروف ، نشانه گذاری میشوند.

Css  این انعطاف پپذیری را به شما میدهد که نشانگر آیتم های لیست خود را به یک تصویر مدل دهید،که برای زیبایی طراحی سایت شما موثر میباشد.
با ویژگی list-style-type  شما میتوانید marker  لیست خود را به شکل مورد نظر خود تغییر دهید، این ویژگی شامل مقادیر زیر میباشد.

با ویژگی   list-style-image  شما میتوانید تصویر مورد نظر خود را برای  نشانگر لیست تنظیم نمایید.

این ویژگی ممکن است در تمام مرورگرها پشتیبانی نشود . در مثال زیر راه حل قطعی برای پشتیبانی تمام مرورگرها را میبینید.

برای اینکه تمام این ویژگی ها را در یک خط اعمال کنید از مثال زیر میتوانید استفاده کنید ، که به ترتیب 1 list-style-image -3   list-style-position -2 list-style-type  مقداردهی میشوند.

ul
{
list-style: square url("sqpurple.gif");

}

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

ممنون میشم راهنمایی کنید.

    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;

با سلام و احترام

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