با سلام خدمت خوانندگان محترم سایت وبلاگ! امروز ما به یادگیری در مورد Cascading Style Sheets یا CSS ادامه خواهیم داد. در مقالات قبلی قبلاً به آنها نگاه کردیم طرح کلیطرح بندی بلوک سایت در نتیجه، ما شروع به داشتن صفحات وب کاملاً حرفه ای کردیم، اما آنها چیزی را از دست دادند. اما به احتمال زیاد فاقد تورفتگی و فریم هستند. امروز به قوانین سبک حاشیه، بالشتک و حاشیه می پردازیم که به شما امکان می دهد تورفتگی و فریم را برای عناصر html تنظیم کنید.
گزینه های CSS Padding
با کمک شیوه نامه های آبشاری می توان دو نوع تورفتگی را تنظیم کرد.
1.تورفتگیفاصله از مرز خیالی عنصر تا محتوای آن است. مقدار فاصله با استفاده از پارامتر مشخص می شود لایه گذاری. این تورفتگی متعلق به خود عنصر است و در داخل آن قرار دارد.
2. لبه- فاصله بین مرز عنصر فعلی صفحه وب و مرزهای عناصر همسایه یا عنصر والد. اندازه فاصله توسط ملک کنترل می شود لبه. این تورفتگی در خارج از عنصر قرار دارد.
برای وضوح تصویر:
به عنوان مثال، سلولی را در نظر بگیرید که پر از متن است. سپس padding فاصله بین مرز خیالی سلول و متن موجود در آن است. و حاشیه بیرونی فاصله بین مرزهای سلول های همسایه است. بیایید با بالشتک شروع کنیم.
padding در CSS با استفاده از padding (بالا، پایین، چپ، راست)
ویژگی های سبک padding-left، padding-top، padding-right و padding-bottom به شما امکان می دهد مقادیر padding را به ترتیب در سمت چپ، بالا، راست و پایین یک عنصر صفحه وب تنظیم کنید:
padding-top | padding-right | padding-bottom | padding-left: value | علاقه | به ارث می برند
مقدار تورفتگی را می توان بر حسب پیکسل (px)، درصد (%) یا واحدهای دیگر قابل قبول برای CSS مشخص کرد. هنگام تعیین درصد، مقدار از عرض عنصر محاسبه می شود. معنی ارثنشان می دهد که از پدر و مادر به ارث رسیده است.
به عنوان مثال، برای پاراگراف فعلی، یک قانون سبک اعمال کردم که بالشتک سمت چپ را روی 20 پیکسل، بالشتک بالا را روی 5 پیکسل، بالشتک سمت راست را روی 35 پیکسل و لایه پایین را روی 10 پیکسل قرار می دهد. ورودی قانون به این صورت خواهد بود:
p.test(
padding-left:20px;
padding-top: 5px;
padding-right:35px;
padding-bottom: 10px
}
قانون بالشتک مرکببه شما امکان می دهد تورفتگی ها را در تمام طرف های یک عنصر صفحه وب به طور همزمان مشخص کنید:
لایه گذاری:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
که در حکومت جمعیمی توانید از یک، دو، سه یا چهار مقدار استفاده کنید و آنها را با فاصله از هم جدا کنید. در این مورد، تأثیر به تعداد مقادیر بستگی دارد:
- اگر یک مقدار را مشخص کنید، مقدار تورفتگی در تمام طرف های عنصر صفحه را تعیین می کند.
- اگر دو مقدار را مشخص کنید، اولی مقدار فرورفتگی را در بالا و پایین تعیین می کند، و دومی - در سمت چپ و راست.
- اگر سه مقدار را مشخص کنید، اولی مقدار فرورفتگی را در بالا، دومی - در سمت چپ و راست، و سومی - در پایین را تعیین می کند.
- اگر چهار مقدار مشخص شده باشد، اولی مقدار فرورفتگی را در بالا، دومی در سمت راست، سومی در پایین و چهارمی در سمت چپ تعیین می کند.
بنابراین، قانون CSS بالا را می توان تا حد امکان کوتاه کرد و به صورت زیر نوشت:
p.test( padding: 5px 35px 10px 20px)
ویژگی margin یا حاشیه ها در CSS
ویژگی های سبک margin-left، margin-top، margin-right و margin-bottom به شما امکان می دهد مقادیر حاشیه را به ترتیب، چپ، بالا، راست و پایین تنظیم کنید:
حاشیه بالا | حاشیه-راست | حاشیه-پایین | حاشیه چپ:<значение>|خودکار|ارث بردن
همانطور که در بالا ذکر شد، حاشیه فاصله از مرز عنصر فعلی تا مرز عنصر مجاور، یا در صورت عدم وجود عناصر مجاور، تا مرز داخلی ظرف اصلی است.
مقدار تورفتگی را می توان بر حسب پیکسل (px)، درصد (%) یا سایر واحدهای مجاز برای CSS مشخص کرد:
پ(
حاشیه سمت چپ: 20 پیکسل؛
}
h1(
margin-right:15%;
}
مقدار auto به این معنی است که اندازه تورفتگی به طور خودکار توسط مرورگر محاسبه می شود. اگر از نماد درصد استفاده می‌کنید، تورفتگی‌ها بسته به آن محاسبه می‌شوند عرض ظرف اصلی. علاوه بر این، این نه تنها برای حاشیه-چپ و حاشیه-راست اعمال می شود، بلکه برای حاشیه-بالا و حاشیه-پایین نیز، درصد حاشیه بسته به عرض، نه ارتفاع، ظرف محاسبه می شود.
استفاده از آن به عنوان مقادیر تورفتگی های خارجی مجاز است مقادیر منفی:
پ(
margin-left:-20px;
}
اگر با مقادیر تورفتگی مثبت، عناصر همسایه دور شوند، با ارزش منفیبلوک مجاور با عنصری برخورد می کند که برای آن چنین افست منفی تنظیم کرده ایم.
همچنین می توانیم padding را با استفاده از ویژگی style مشخص کنیم لبه. مقادیر تورفتگی را به طور همزمان در همه طرف عنصر صفحه وب تنظیم می کند:
لبه:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
هنگام تعیین یک، دو، سه یا چهار مقدار padding، این ویژگی از قوانین مشابه با قانون padding تبعیت می کند.
گزینه های مرزی با استفاده از ویژگی Border
هنگام تنظیم فریم ها، سه نوع پارامتر وجود دارد:
- عرض مرز - ضخامت حاشیه؛
- مرز رنگ - رنگ حاشیه؛
- حاشیه - نوع خطی که قاب با آن ترسیم می شود.
بیایید با پارامتر ضخامت قاب شروع کنیم:
border-width: [مقدار | نازک | متوسط | ضخیم] (1،4) | به ارث می برند
ضخامت قابرا می توان بر حسب پیکسل یا واحدهای دیگر موجود در CSS مشخص کرد. متغیرهای نازک، متوسط و ضخیم ضخامت حاشیه را به ترتیب روی 2، 4 و 6 پیکسل قرار می دهند:
border-width: متوسط;
مانند ویژگی‌های padding و margin، پارامتر عرض مرز یک، دو، سه یا چهار مقدار را مجاز می‌کند، بنابراین عرض حاشیه را برای همه طرف‌ها به طور همزمان یا برای هر طرف جداگانه تنظیم می‌کند:
عرض حاشیه: 5px 3px 5px 3px
برای پاراگراف فعلی، ضخامت حاشیه بالایی را 1 پیکسل، سمت راست 2 پیکسل، پایین 3 پیکسل، و سمت چپ را 4 پیکسل با استفاده از قانون ایجاد کنید (عرض حاشیه: 1px 2px 3px 4px؛)
با استفاده از ویژگی های سبک border-left-width، border-top-width، border-right-width و border-bottom-width می توانید ضخامت سمت چپ، بالا، راست و پایین حاشیه را به ترتیب تنظیم کنید:
حاشیه-چپ-عرض|حاشیه-بالا-عرض|حاشیه-راست-عرض|حاشیه-پایین-عرض: نازک|متوسط|ضخیم|<толщина>| ارث بردن
پارامتر بعدی رنگ حاشیه است که می توانید با آن کنترل کنید رنگ قاب:
حاشیه-رنگ: [رنگ | شفاف] (1،4) | به ارث می برند
این ویژگی به شما امکان می دهد رنگ حاشیه را برای همه طرف های عنصر به طور همزمان یا فقط برای موارد مشخص شده تنظیم کنید. به عنوان یک مقدار، می توانید از روش هایی برای تعیین رنگ های پذیرفته شده در HTML استفاده کنید: کد هگزادسیمال، کلمات کلیدی و غیره:
p (عرض حاشیه: 2 پیکسل؛ رنگ حاشیه: قرمز)
مقدار شفاف تنظیم می شود رنگ شفاففریم، و ارث بری ارزش والد را به ارث می برد. به طور پیش فرض، اگر رنگ حاشیه مشخص نشده باشد، از فونت استفاده شده در داخل عنصر استفاده می شود.
با استفاده از ویژگی های سبک حاشیه-چپ-رنگ، حاشیه-بالا-رنگ، حاشیه-راست-رنگ و حاشیه-پایین-رنگ رنگ، می توانید رنگ سمت چپ، بالا، راست و پایین حاشیه را به ترتیب تنظیم کنید:
رنگ حاشیه-چپ|رنگ-حاشیه-بالا|رنگ حاشیه-راست|رنگ حاشیه-پایین: شفاف|<цвет>| ارث بردن
و آخرین پارامتر border-style را مشخص می کند نوع قاب:
حاشیه به سبک: (1،4) | به ارث می برند
نوع قاب را می توان برای تمام اضلاع یک عنصر به طور همزمان یا فقط برای موارد مشخص شده مشخص کرد. از چندین مقدار می توان استفاده کرد کلید واژه ها. ظاهر به مرورگر مورد استفاده و ضخامت قاب بستگی دارد. معنی هیچ یکبه صورت پیش فرض استفاده می شود و فریمی را نمایش نمی دهد و ضخامت آن صفر است. مقدار پنهان نیز همین اثر را دارد. قاب حاصل برای مقادیر دیگر، بسته به ضخامت، در جدول زیر نشان داده شده است:
ویژگی های سبک به سبک border-left-style، border-top-style، border-right-style و border-bottom-style سبک خطوطی را که در سمت چپ، بالا، راست و پایین حاشیه ترسیم می شود، مشخص می کند. به ترتیب:
حاشیه-چپ-سبک|سبک حاشیه-بالا|سبک حاشیه-راست|سبک حاشیه-پایین: هیچکدام|پنهان|نقطه دار|پیچیده|جامد|دوگانه|شیار|برجستگی|داخلی|ابتدای|به ارث بردن
مانند گزینه های padding و padding، وجود دارد جهانی اموال مرزی . این به شما امکان می دهد ضخامت، سبک و رنگ حاشیه را در اطراف یک عنصر به طور همزمان تنظیم کنید:
مرز: | به ارث می برند
مقادیر می توانند به هر ترتیبی باشند و با فاصله از هم جدا شوند:
td (حاشیه: 1px زرد ثابت)
برای تنظیم یک حاشیه فقط در طرف های خاصی از یک عنصر، ویژگی های border-top، border-bottom، border-left، border-right وجود دارد که به شما امکان می دهد پارامترهایی را برای بالا، پایین، چپ و سمت راستچارچوب
تنها چیزی که باقی می ماند خلاصه کردن است:
- برای کار لایه گذاریاز ملک استفاده می کنیم لایه گذاری;
- برای تنظیمات حاشیه هایک قانون وجود دارد لبه;
- پارامترهای فریمبا استفاده از ویژگی مشخص می شوند مرز.
توجه می کنم که تمام این ویژگی های CSS باعث افزایش اندازه عنصر صفحه وب می شود. بنابراین، اگر ضخامت حاشیه یا اندازه بالشتک ظروف بلوکی را که طراحی صفحه وب را تشکیل می‌دهند، تغییر دهیم، باید اندازه این ظروف را متناسب با آن تغییر دهیم، در غیر این صورت ممکن است حرکت کنند و طرح تغییر کند. شکسته شده.
همین، دفعه بعد می بینمت!
طرح بندی بلوک اغلب هنگام ایجاد یک وب سایت یا وبلاگ استفاده می شود. در نتیجه این امر، اغلب لازم است که بلوک‌ها را تورفتگی کنیم. به همین دلیل، در مورد نحوه تورفتگی در CSSبه تفصیل در این درس. برای مرورگر، هر تگ محفظه ای است که دارای محتوا، بالشتک، حاشیه های بیرونی و یک حاشیه است. در این درس یاد می گیریم که چگونه داخلی و حاشیه ها، بیایید پارامترهای اصلی آنها را در نظر بگیریم.
شکل زیر به وضوح پارامترهای تورفتگی بلوک را نشان می دهد:
همانطور که می بینید، تورفتگی را می توان در چهار جهت ایجاد کرد: تورفتگی بالا (بالا)، تورفتگی پایین (پایین)، تورفتگی چپ (چپ) و تورفتگی راست (راست). واحدهای اندازه گیری می توانند پیکسل، درصد و غیره باشند. واحدهای CSS- بیشتر در مورد آنها در این آموزش از پیکسل استفاده شده است.
بلوک بالشتک
ویژگی مسئول padding در CSS است لایه گذاری. بنابراین، بیایید به مثالی از تنظیم padding داخلی برای یک بلوک نگاه کنیم:
padding-top: 5px; /*بالا padding*/ padding-left: 8px; /* padding چپ*/ padding-right: 8px; /*بالشتک سمت راست*/ padding-bottom: 5px; /*بالشتک پایین*/
که در در این مثالبالشتک داخلی به طور جداگانه برای هر طرف بلوک تنظیم شده است. علاوه بر این، چندین روش برای تنظیم تورفتگی در CSS وجود دارد:
حاشیه: 5px 8px 5px 8px; /*بالا، راست، پایین، حاشیه چپ*/ حاشیه: 5px 8px 5px; /* حاشیه های بالا، چپ، راست، پایین را توصیف می کند*/ حاشیه: 5px 8px; /*حاشیه بالا و پایین، راست و چپ را شرح می دهد*/ margin: 7px; /*تمام حاشیه های داخلی 7 پیکسل را توصیف می کند*/
به خاطر سپردن اولین مورد آسان تر است آخرین راه ها. در حالت اول، تورفتگی‌ها در جهت عقربه‌های ساعت قرار می‌گیرند (بالا، راست، پایین، چپ) - می‌توانیم هر مقدار فرورفتگی را مشخص کنیم؛ در مورد دوم، فرورفتگی‌ها در همه طرف‌ها یکسان خواهند بود.
حاشیه ها را مسدود کنید
ویژگی مسئول حاشیه ها در CSS است لبه. نمونه هایی از حاشیه ها در CSS:
margin-top: 5px; /*حاشیه بالا*/ margin-left: 10px; /*حاشیه چپ*/ margin-right: 10px; /*حاشیه سمت راست*/ margin-bottom: 5px; /*حاشیه پایین*/
padding: 5px 10px 5px 10px; /*بالا، راست، پایین، حاشیه چپ*/ padding: 5px 10px 5px; /*بالا، چپ و راست، لایه پایین را توصیف می کند*/ padding: 5px 10px; /*بالا و پایین، بالشتک راست و چپ را توصیف می کند*/ padding: 7px; /*همه حاشیه های 7px را توصیف می کند*/
بدین ترتیب، نحوه تورفتگی در CSS- سوال دشوار نیست، اما بسیار مرتبط است. برای درک بهتر اطلاعاتی که در بالا توضیح داده شد، باید به خاطر داشته باشید که دو ویژگی وجود دارد: padding - تورفتگی داخلی و حاشیه - تورفتگی خارجی. همچنین همانطور که می دانید راه های مختلفی برای تنظیم تورفتگی وجود دارد که می توانید از آنها استفاده کنید.
به وبلاگ من خوش آمدید. Css (Cascading Style Sheets) گزینه های سفارشی سازی زیادی را ارائه می دهد ظاهرصفحات وب. امروز می خواهم به طور خلاصه نشان دهم که چگونه می توان در CSS بالشتک را در بالا یا هر طرف دیگر برای هر عنصر تعریف کرد.
لبه
حاشیه با استفاده از ویژگی margin تنظیم می شود. با کمک آن می‌توانید حاشیه‌ها را در هر چهار طرف به طور همزمان تنظیم کنید یا از ویژگی‌های دیگر استفاده کنید: margin-top، margin-left، margin-right، margin-bottom که به شما امکان می‌دهد آن را فقط در یک طرف بسازید.
حاشیه تعیین کننده فاصله ای است که لبه انتخاب شده یک عنصر از سایر عناصر صفحه جدا می شود. به عنوان مثال، ورودی:
P، div (Margin-top: 20px; )
این بدان معنی است که تمام بلوک ها و پاراگراف ها در بالا با 20 پیکسل فرورفته خواهند شد، یعنی لبه بالایی آنها با این فاصله از عناصر مجاور خود دور می شود.
حاشیه ها را می توان در هر طرف فقط با استفاده از یک ویژگی حاشیه نوشت که 4 مقدار در یک ردیف نوشته می شود:
Div( حاشیه: 20px 10px 20px 10px؛ )
بالشتک به ترتیب از لبه های بالا، راست، پایین و چپ داده می شود. از آنجایی که در این حالت آنها در دو طرف برابر هستند، می توانیم آن را به این صورت نیز بنویسیم:
Div (حاشیه: 20 پیکسل 10 پیکسل؛ )
اولین مقدار حاشیه در بالا و پایین و دومین مقدار حاشیه در طرفین است.
تورفتگی
بالشتک داخلی متفاوت عمل می کند - بلوک را از عناصر دیگر دور نمی کند، اما فضای داخل عنصر را اضافه می کند و محتوای بلوک را از لبه های آن دور می کند. راحت است. کجا وب سایتی را دیده اید که متن آن در سمت چپ بالای پنجره شروع شود؟
من این را ندیده‌ام، زیرا توسعه‌دهندگان وب همیشه از تورفتگی‌های خارجی و داخلی استفاده می‌کنند تا متن را تا حد امکان آسان کنند. padding داخلی با استفاده از ویژگی padding مشخص می شود که در آن می توان 4 مقدار را به طور همزمان با یک فاصله برای همه لبه ها از هم جدا کرد.
همچنین مانند حاشیه، می توانید نام طرف را اضافه کنید و فاصله را فقط برای آن تعیین کنید. به عنوان مثال، تورفتگی بالا را می توان با آن نوشت با استفاده از بالشتک-بالا. به طور کلی، ویژگی padding دقیقاً مانند ویژگی margin عمل می کند.
به عنوان مثال، می توانید این قطعه کد را بدهید:
بلوک (عرض: 200 پیکسل؛ بالشتک: 20 پیکسل؛ )
به نظر شما عرض واقعی عنصر ما چقدر خواهد بود؟ در اینجا می توانید ببینید که 200 پیکسل است، اما بالشتک ها 20 پیکسل دیگر در هر طرف اضافه می کنند که در مجموع 240 پیکسل می شود. این را در هنگام طراحی در نظر بگیرید.
همچنین می خواهم توجه داشته باشم که padding معمولاً فقط به عناصر بلوک داده می شود؛ بهتر است آن را به عناصر درون خطی ندهید. حاشیه با هر عنصری به خوبی کار می کند.
طرح CSS همیشه مستطیلی بوده است. هر خط صاف صلاحیت توسعه دهنده است. قوانین سبک گزینه های کافی برای دادن شکلی صاف به صفحه در محدوده وضوح صفحه ارائه می دهند. اما هر عنصر چیدمان همیشه یک مستطیل است که در آن ترتیب اطلاعات توسط قوانین CSS کنترل می شود.
بالشتک همه جانبه برای هر عنصر صفحه زمانی که کاملاً در موقعیت قرار دارد مهم است، و لایه بالایی CSS به طور خاص تعریف شده است زیرا برای آن مهم است. عناصر مختلفبه خصوص حروف کوچک.
قوانین اساسی موقعیت یابی
یک عنصر بلوک دارای یک قانون حاشیه، یک قانون padding برای عناصر داخل آن، و یک عرض حاشیه است که همچنین می تواند استفاده شود.
تورفتگی در بالا از اهمیت ویژه ای برخوردار است. CSS در یک بلوک، قوانین padding را با قوانین عناصر کاملاً و نسبتاً قرار گرفته در آن بلوک مرتبط می کند.
یک روش متداول برای قوانین CSS: می‌توانید لایه‌های یکسانی را در همه طرف‌ها، به صورت جفت بالا/پایین و راست/چپ، یا برای هر طرف جداگانه مشخص کنید. مثلا،
- حاشیه: 10 پیکسل؛
- بالشتک: 10px20px;
- بالشتک: 10px20px30px40px.
در حالت اول، فرورفتگی عنصر از طرفین ظرف بیرونی که در آن قرار دارد تنظیم می شود. در مورد دوم، حاشیه در بالا و پایین 10 پیکسل، در سمت چپ و راست - 20 پیکسل است. در حالت سوم، اندازه تورفتگی ها در همه طرف نشان داده شده است: بالا، راست، پایین و چپ.
در تمام این موارد، تورفتگی CSS بالا 10 پیکسل است.
قوانینی که موقعیت عناصر را تغییر می دهد
اگر یک عنصر چیدمان به طور مطلق قرار نگرفته باشد، در آن قرار می گیرد روند عمومیتشکیل صفحه
اگر تعریف کنیم با قرار دادن CSS بالای عنصر scCurrInfo، هدف محقق خواهد شد، اما اگر در سطح لی نباشد.
در این مثال، با استفاده از قانون padding: 40px; نیاز به کاهش کافی قوانین عرض و ارتفاع تا 80 پیکسل دارد. در غیر این صورت، اندازه بلوک scCurrInfo از مرزهای بلوک بیرونی فراتر خواهد رفت.
اگر قانون padding را از توضیحات scCurrInfo حذف کنیم، اما آن را با مقدار 20 پیکسل به توضیحات سبک آیتم لیست اضافه کنیم، فقط دریافت خواهیم کرد تورفتگی بالا CSS این مقدار را برای طرف های دیگر اعمال نمی کند.
به طور طبیعی، این استفاده از قانون تورفتگی برای هر عنصر li اعمال می شود.
روش های کلی قالب بندی محتوا
برخی از توسعه دهندگان با چیدمان صفحات به کمال می رسند عناصر بلوک. ظاهراً این یک تمرین کلاسیک است که با جداول شروع کنید و با جدول خود تمام کنید فرآیند آموزشیروی بلوک ها
آزادی ذاتی طرح بلوک، جذاب است و تخیل توسعه دهنده ممکن است با قوانین سخت جدول محدود نشود: فقط ردیف ها، فقط سلول ها، فقط به صورت افقی و عمودی ادغام می شوند. هیچ چیز عجیبی برای ایده های رابطه ای نیست.
در این میان جداول علاوه بر معایب آشکار، دارای مزایای کیفی بسیاری نیز می باشد. هنگام ایجاد بالشتک در بالا، CSS لایه‌های سمت چپ، راست را در نظر می‌گیرد (پایین یک لحظه خاص است). قوانین سلول جدول به شما امکان می دهد هم تراز عمودی و هم افقی را کنترل کنید. با استفاده از سبک های ردیف و ترکیب آنها با سبک های سلولی، می توانید نماهای پیچیده ای از محتوا ایجاد کنید.
نمایش معمول یک صفحه به شکل مستطیل به هیچ وجه مانع از ارائه آن به صورت جدول نمی شود. اینها نیز مستطیل هستند، اما سلول های جدولی نیز هستند، یعنی قوانین خاص خود را دارند که مکمل قوانین بلوک ها هستند.
موقعیت یابی مطلق
بلوک با قانون POSITION: مطلق ; در مکانی تعیین شده توسط مختصات آن نسبت به بلوکی که در آن قرار دارد قرار خواهد گرفت.
ویژگی مشخص قوانین CSS "تمرین - بهترین معیارحقیقت" در بیشتر موارد، به خصوص زمانی که سازگاری بین مرورگرها مورد نیاز است و چیدمان به صورت دستی انجام می شود، ترجیحاً به مطالعه کتابچه های راهنمای کامل بر روی شیوه نامه های آبشاری است.
استفاده از جداول اغلب منجر به مشکلات تغییر محتوای سلول می شود. یک افست مشابه در یک بلوک همیشه بر همه عناصر تأثیر نمی گذارد. با آزمایش می توانید به نتیجه دلخواه برسید. یک کار بی اهمیت: چگونه حذف padding بالا همیشه یک راه حل بی اهمیت برای CSS نیست.
در برخی موارد، زمانی که باید عناصر صفحه را در اعماق برخی چیدمان کنید سیستم محبوبمدیریت محتوای وب سایت، همچنان لازم است که نه تنها به تمرین تجربی، بلکه به تجربه همکاران نیز توجه شود.
روز خوب! تنظیم تورفتگی برای متن و عکس موضوع اصلی نشریه امروز است. بیایید نگاهی دقیق تر به این بیندازیم که چه رویکردهایی را می توان در عمل به کار برد.
هنگام ایجاد یک وب سایت، یک وب مستر با آن سروکار دارد بلوک های متنیو عبارات ارسال شده در صفحات پروژه. حل مشکلات فردی مستلزم استفاده است تگ های HTML، به ویرایشگر اضافه شد. انواع مختلفی از ویژگی ها وجود دارد که به شما امکان می دهد عبارات را جابجا کنید یا مکان قطعات را تغییر دهید صفحه الکترونیکی.
تنظیم تورفتگی با درج فاصله
بیایید به نحوه تورفتگی متن در HTML با استفاده از آن نگاه کنیم برچسب ویژه، حصول اطمینان از تشکیل شکاف. برای دستیابی به انحراف مورد نظر از لبه صفحه، باید کد را به تعداد مورد نیاز درج کرد.
کد بالا توسط انواع مرورگرها قابل پردازش است و مدیر سایت نتیجه تضمینی را دریافت خواهد کرد. عیب این روش قابلیت های محدود آن است، زیرا برای افزایش فاصله باید اضافه کرد مقدار زیادبرچسب ها، و این سند را به هم می ریزد.
اعمال برچسب نقل قول
با مطالعه دقیق نحوه تورفتگی متن در کد HTML، می توانید با آن روبرو شوید روش جایگزین، دادن امکانات بیشتر.
در اینجا باید از blockquote استفاده کنید که به شما امکان می دهد قطعه را در سمت چپ و راست حدود 40 پیکسل حرکت دهید. کافی است کدی مشابه با مثال داده شده بنویسید:
این روش به شما امکان می دهد عبارات را با مقدار ثابت 40 پیکسل دستکاری کنید. همچنین شایان ذکر است که در این تگمعمولاً با یک نقل قول به پایان می رسد.
گزینه های جایگزین
اگر قصد دارید یک فاصله غیر استاندارد را جابجا کنید، باید از پارامتر تورفتگی متن استفاده کنید که به سبک مربوط می شود. جدول CSS. روش مورد بررسی ایجاد انحراف از خط اول توسط را تضمین می کند فاصله مورد نیاز. تغییرات زیر باید در ویرایشگر اعمال شود:
هنگامی که لازم است تعداد پیکسل های مورد نیاز از یک عکس اندازه گیری شود، کدهای ساده اما موثر ترجیح داده می شوند.
در حالت اول، فقط مقادیر افست از لبه های تصویر تنظیم می شود. در دوم، موقعیت تصویر در لبه سمت چپ با جریان متن به سمت راست، و در سوم - برعکس تنظیم شده است.
اطلاعات به پایان رسیده است. به من بگو، آیا اطلاعاتی را که به دنبالش بودی پیدا کردی؟ پاسخ را می توان در نظرات نوشت.
در نهایت، ذکر می کنم که وبلاگ Workip در درجه اول به گزینه های پولی برای کسب درآمد آنلاین اختصاص دارد. آیا می دانید کدام روش ها واقعاً از نظر مالی امیدوارکننده هستند؟ توضیحات برخی از آنها قبلا منتشر شده است.
انتشار مطالب ادامه دارد. اشتراک در پست الکترونیکبرای به روز رسانی پروژه بعدا میبینمت.
