CSS یک شیوه نامه آبشار است ، که یک زبان برای توصیف ظاهر صفحات وب است. یکی از اصلی ترین مزایای CSS توانایی جایگزینی طرح بندی جدول با طرح بندی بلوک است.
لازم است
ویرایشگر کد HTML
دستورالعمل ها
مرحله 1
اولین بلوک را ایجاد کنید. در فرم HTML ، مانند یک برچسب div با شناسه 'block01' به نظر می رسد. در اینجا ، شناسه block01 نشان می دهد که در توضیحات CSS ، تمام خصوصیات این بلوک برای انتخابگر # block01 مشخص شده است.
گام 2
بلوک در CSS را توصیف کنید. در سبک های CSS ، نام شناسه را مشخص کنید (# block01) و در پرانتزهای فرفری پارامترهای آن را توصیف کنید - عرض ، موقعیت ، جابجایی ، رنگ پس زمینه و غیره. به عنوان مثال ، ممکن است به این شکل باشد: # block01 {width: 150px؛ ارتفاع: 150 پیکسل موقعیت: مطلق؛ بالا: 0px؛ سمت چپ: 0px؛ پس زمینه-رنگ: صورتی}. این توضیحات فرض می کند که جعبه 150 پیکسل طول و 150 پیکسل عرض دارد ، به طور محکم در گوشه سمت چپ بالای سند قرار می گیرد و پس زمینه آن صورتی رنگ است.
مرحله 3
به بلوک یک موقعیت نسبی بدهید. اگر از موقعیت مطلق ، اما نسبی در توصیف CSS استفاده نمی کنید ، می توانید بلوک ها را نه با محکم کاری سخت به شبکه مختصات ، بلکه نسبت به سایر بلوک های موجود موجود قرار دهید. برای انجام این کار ، موقعیت کد را تغییر دهید: absolute؛ بالا: 0px؛ سمت چپ: 0 پیکسل بر اساس موقعیت: نسبی ؛ بالا: 200 پیکسل سمت چپ: 100 پیکسل
مرحله 4
به بلوک یک دور بزنید. در CSS ، دستور border-radius مسئول این امر است. کد زیر را به صفحه سبک خود اضافه کنید: border-radius: 8px. اکنون بلوک گوشه های گرد خواهد داشت. اگر می خواهید گوشه هایی را دور بزنید ، شعاع را برای هر کدام جداگانه توصیف کنید: border-radius: 8px 8px 0px 0px.
مرحله 5
به بلوک ضربه بزنید. برای برجسته کردن رئوس مطالب یک بلوک با یک خط نازک ، کد زیر را به شرح CSS آن اضافه کنید: border-top: 1px black dashed. این دستورالعمل به این معنی است که حاشیه بلوک سیاه و ضخامت یک پیکسل خواهد داشت. در این حالت ، خود خط کانتور به صورت یک خط تیره نمایش داده می شود (خط تیره - یک خط نقطه ای ، نقطه ای - نقطه ای ، جامد - یک خط محکم).
مرحله 6
خصوصیات بلوک باقی مانده را تنظیم کنید. در توضیحات CSS مشخص کنید که چه نوع حروف باید برای متن داخل بلوک استفاده شود ، اندازه قلم ، تراز و دندانه از لبه های بلوک چه اندازه باید باشد. این خصوصیات در تعریف font-family ، font-size ، text-align و padding شرح داده شده است.
مرحله 7
می توانید از ویژگی float برای شخصی سازی جریان یک بلوک از بلوک دیگر استفاده کنید. اگر آن را روی "چپ" تنظیم کنید ، بقیه عناصر در اطراف بلوک سمت چپ و "راست" - در سمت راست جریان می یابند. اگر مقدار float را به عنوان "none" تنظیم کنید ، ترازبندی بلوک تنظیم نمی شود. خاصیت روشن در CSS از جریان بلوک به سمت راست ، چپ یا هر دو طرف جلوگیری می کند و دستور float را لغو می کند.
