مرور اجمالی از صفحات سبک آبشار با استفاده از شیوه نمونه
هنگامی که شما یک وب سایت را از ابتدا ایجاد می کنید، ابتدا با سبک های اولیه تعریف شده هوشمندانه است. این مانند شروع با یک بوم پاک و برس تازه است. یکی از اولین مشکلات که طراحان وب با آن روبرو هستند این است که مرورگرهای وب همه متفاوت هستند. اندازه فونت پیش فرض متفاوت از پلت فرم به پلت فرم است، خانواده فونت پیش فرض متفاوت است، برخی از مرورگرها حاشیه ها و پلاگین ها را بر روی تگ بدن در حالی که دیگران نمی کنند و غیره تعریف می کند. با تعریف سبک های پیش فرض برای صفحات وب خود، این اختلافات را برطرف کنید.
CSS و مجموعه کاراکتر
برای اولین بار، ابتدا مجموعه کاراکتری اسناد CSS خود را به utf-8 تنظیم کنید . در حالی که احتمال دارد که بیشتر صفحات طراحی شده شما به زبان انگلیسی نوشته شده باشد، ممکن است بعضی از آنها به صورت متنوع و محلی متناسب با متن های زبان و فرهنگ متفاوت باشند. وقتی که آنها هستند، utf-8 روند را ساده کرده است. تنظیم کاراکتری که در صفحه سبک خارجی قرار دارد، بر سر هدر HTTP اهمیت ندارد ، اما در همه موارد دیگر، آن را خواهد داشت.
تنظیم کاراکتر آسان است. برای خط اول سند CSS نوشتن:
charset "utf-8"؛به این ترتیب، اگر از شخصیت های بین المللی در مالکیت محتوا یا به عنوان نام و نام کلاس و شناسه استفاده می کنید، صفحه سبک به درستی کار خواهد کرد.
درخشان بدن صفحه
چیز بعدی یک نیاز پیش فرض سبک سبک است که صفر حاشیه ها، حاشیه ها، و مرزها را صفر می کند. این باعث می شود مطمئن شوید که تمام مرورگر ها محتوا را در یک مکان قرار می دهند و فاصله بین مرورگر و محتوا وجود ندارد. برای اکثر صفحات وب، این خیلی نزدیک به لبه متن است، اما مهم است که آن را شروع کنید تا تصاویر پس زمینه و تقسیم بندی طرح درست شود.
html، body {margin: 0px؛ padding: 0px؛ مرز: 0px؛ }پیش زمینه پیش فرض یا رنگ فونت را به رنگ مشکی و رنگ پس زمینه پیش فرض به رنگ سفید تنظیم کنید. در حالی که این به احتمال زیاد برای اکثر طرح های صفحه تغییر خواهد کرد، با داشتن این رنگ های استاندارد بر روی بدن و تگ HTML ابتدا باعث می شود که صفحه برای خواندن و کار با آن آسان تر شود.
html، body {color: # 000؛ پس زمینه: #fff؛ }پیش فرض سبک فونت
اندازه فونت و فونت ها چیزی است که به ناچار تغییر خواهد کرد پس از آن که طراحي طول می کشد، اما با فونت پیش فرض 1 ام شروع می شود و یک خانواده فونت پیش فرض Arial، Geneva یا برخی دیگر از فونت های بدون serif. استفاده از ems صفحات را به عنوان امکان پذیر می سازد و یک فونت بدون serif بر روی صفحه قابل خواندن است.
html، body، p، th، td، li، dd، dt {font: 1em Arial، Helvetica، sans serif؛ }ممکن است مکان های دیگری وجود داشته باشد که ممکن است متن را پیدا کنید، اما p ، th ، td ، li ، dd ، dt شروع خوبی برای تعریف فونت پایه می باشد. شامل HTML و بدن فقط در مورد، اما بسیاری از مرورگرها گزینه های فونت را لغو می کنند اگر شما فقط فونت های خود را برای HTML یا بدن تعریف می کنید.
سرفصل ها
عنوان های HTML مهم هستند که برای کمک به طرح های سایت شما مفید باشند و موتورهای جستجو را به سایت خود بسپارند. بدون سبک، همه آنها نسبتا زشت هستند، بنابراین سبک های پیش فرض را روی همه آنها تنظیم کرده و خانواده فونت و اندازه فونت را برای هر یک تعریف می کنند.
h1، h2، h3، h4، h5، h6 {font-family: Arial، Helvetica، sans serif؛ } h1 {font-size: 2em؛ } h2 {font-size: 1.5em؛ } h3 {font-size: 1.2em؛ } h4 {font-size: 1.0em؛ } h5 {font-size: 0.9em؛ } h6 {font-size: 0.8em؛ }پیوند را فراموش نکن
یکنواختن رنگ پیوند تقریبا همیشه یک بخش مهم از طراحی است، اما اگر شما آنها را در سبک های پیش فرض تعریف نکنید، احتمالا شما حداقل یکی از کلاسهای pseudo را فراموش خواهید کرد. آنها را با برخی از تغییرات کوچک بر روی آبی تعریف کرده و سپس آنها را تغییر دهید پس از اینکه پالت رنگ را برای سایت تعریف کردید.
برای تنظیم لینک در سایه آبی، مجموعه:
- لینک به عنوان آبی
- لینک های بازدید شده به صورت آبی تیره
- پیوندها را به رنگ آبی روشن نگه دارید
- لینک های فعال حتی آبی رنگ تر
همانطور که در این مثال نشان داده شده است:
a: link {color: # 00f؛ } a: visited {color: # 009؛ } a: hover {color: # 06f؛ } a: فعال {color: # 0cf؛ } با یک ظاهر طراحی شده با لینک های رنگی نسبتا بی ضرر، تضمین می کنم که من هرکدام از کلاس ها را فراموش نخواهم کرد و همچنین باعث می شود که آنها کمی کمتر از آبی، قرمز و بنفش باشند.ورق سبک کامل
در اینجا تمام ورق سبک است:
charset "utf-8"؛ html، body {margin: 0px؛ padding: 0px؛ مرز: 0px؛ رنگ: # 000؛ پس زمینه: #fff؛ } html، body، p، th، td، li، dd، dt {font: 1em Arial، Helvetica، sans serif؛ } h1، h2، h3، h4، h5، h6 {font-family: Arial، Helvetica، sans serif؛ } h1 {font-size: 2em؛ } h2 {font-size: 1.5em؛ } h3 {font-size: 1.2em؛ } h4 {font-size: 1.0em؛ } h5 {font-size: 0.9em؛ } h6 {font-size: 0.8em؛ } a: link {color: # 00f؛ } a: visited {color: # 009؛ } a: hover {color: # 06f؛ } a: فعال {color: # 0cf؛ }