به نظر می رسد، چرا ممکن است به چهار روش نیاز داشته باشید؟ از این گذشته ، تقریباً هر شخصی از یک روشی استفاده می کند که به آن عادت کرده است. مثلا Shift و کلید داش را چند بار فشار دادم و این نتیجه یک خط افقی است.
اما اگر این منجر به یک خط نقطه چین شود، اما شما به یک خط ثابت نیاز دارید، چه؟
- به احتمال زیاد کلید Shift روی کیبورد معیوب است. روش های دیگر در اینجا به کمک می آیند.
شاید رایج ترین راه برای ایجاد خط در Word استفاده از چند کلید روی صفحه کلید باشد.
I نازک، ضخیم، دوتایی، نقطه چین با صفحه کلید
در زیر نقاشی یک صفحه کلید با انگلیسی، اما بدون طرح روسی است، اما مهم نیست، زیرا ما فقط به سه کلید علاقه مندیم: Shift، dash و Enter.
برنج. 1. سه کلید روی صفحه کلید: Shift، dash و Enter برای یک خط افقی ممتد در Word
با این سه کلید می توانید یک خط افقی ممتد در Word رسم کنید: نقطه چین یا توپر، نازک یا ضخیم، بلند یا کوتاه.
1) وقتی کلید "-" (خط تیره) را چندین بار در ویرایشگر Word فشار دهید، یک خط نقطه چین با هر طولی دریافت می کنیم.
انجام دادن لاغریک خط طولانی در تمام عرض صفحه:
- ما روی صفحه کلید کلید "داخل" را پیدا می کنیم (در سمت راست کلید "صفر"، در قاب سبز در شکل 1).
- با یک خط جدید (!) در Word، این کلید را چندین بار فشار دهید: -
- و سپس کلید "Enter" () را فشار دهید. چندین خط تیره که چاپ شده اند ناگهان به یک خط پیوسته، افقی و نازک در سراسر عرض صفحه تبدیل می شوند.
2) هنگامی که Shift و "-" (خط تیره) به طور همزمان فشار داده می شوند، یک خط تیره چاپ نمی شود، بلکه یک خط زیر _________ چاپ می شود. بنابراین، می توانید یک خط پیوسته با طول دلخواه در هر نقطه از سند ایجاد کنید.
برنج. 2. خط افقی نازک و ضخیم در Word
حالا چاپ می کنیم ضخیمیک خط افقی در تمام عرض صفحه:
- دوباره همان کلید "داش" و همچنین کلید Shift (چپ یا راست، به دلخواه) را پیدا می کنیم. Shift را فشار دهید، نگه دارید و رها نکنید.
- و حالا با یک خط جدید (!) چندین بار (مثلا 3-4 بار) روی خط تیره فشار دهید (بدون رها کردن Shift): ___. Shift را آزاد کنید.
- حالا کلید Enter را فشار دهید. یک خط ثابت افقی ضخیم خواهید دید.
خط افقی نازک، ضخیم، نقطه چین و دوتایی در Word با استفاده از صفحه کلید
خط دوم در ورد با استفاده از جدول
یک خط افقی را می توان با استفاده از جدول یک سلول (1 × 1) به دست آورد، که در آن فقط حاشیه بالا یا پایین رنگی است (مشاهده خواهد شد)، و سه طرف دیگر جدول دارای حاشیه های بدون رنگ هستند (آنها خواهند بود. نامرئی).
مکان نما را در جایی که خط باید باشد قرار می دهیم. در منوی بالای Word، روی:
- درج (1 در شکل 3)،
- جدول (2 در شکل 3)،
- یک سلول (3 در شکل 3).
برنج. 3. نحوه درج جدول 1x1 در Word (از یک سلول)
نتیجه جدولی از یک سلول بزرگ (1x1) خواهد بود:
باقی مانده است که حاشیه ها را از سه طرف در جدول 1x1 حذف کنید. برای این
- به تب "Home" بروید (1 در شکل 4)،
- سپس در کنار "Font" "Paragraph" و حاشیه ها را می یابیم (2 در شکل 4)،
- با کلیک کردن بر روی "بدون حاشیه" (3 در شکل 4)، تمام مرزها را حذف کنید.
- "حاشیه بالا" یا "حاشیه پایین" (4 در شکل 4) را انتخاب کنید.
برنج. 4. نحوه حذف حاشیه های انتخابی در جدول Word (حاشیه ها را نامرئی کنید)
من این را به وضوح در ویدیو (در انتهای مقاله) نشان می دهم.
به هر حال، در شکل. 3 نشان می دهد که راه آسان تری وجود دارد. می توانید مکان نما را در ابتدای خط در Word قرار دهید و روی "Horizontal Line" کلیک کنید (5 در شکل 4):
خط III در ورد با طراحی
درج (1 در شکل 5) - Shapes (2 در شکل 5) راه دیگری برای به دست آوردن یک خط افقی در Word است.
برای اینکه خط کاملا افقی باشد، کلید Shift را نگه دارید و همزمان خط را بکشید.
برنج. 5. نحوه رسم خط در Word
خط IV در Word با استفاده از صفحه کلید روی صفحه نمایش
برای ویندوز 10، می‌توانید صفحه‌کلید روی صفحه را با تایپ کردن «صفحه‌کلید روی صفحه» در نوار جستجو پیدا کنید.
برنج. 6. صفحه کلید روی صفحه
ما یک خط افقی را مانند نسخه اول با یک صفحه کلید معمولی ایجاد می کنیم. در صفحه‌کلید روی صفحه، به سه دکمه خط تیره، Shift و Enter نیاز دارید.
1 خط تیره و Enter
از یک خط جدید در Word، چندین بار روی خط تیره (1 در شکل 6) کلیک کرده و Enter را فشار دهید. این یک خط افقی نازک ایجاد می کند.
2 Shift، Dash و Enter
از یک خط جدید در Word، ابتدا روی Shift (2 در شکل 6) و سپس روی Dash (1 در شکل 6) کلیک کنید. نتیجه یک خط زیر است. بنابراین 2 بار دیگر تکرار می کنیم و سپس Enter را فشار می دهیم. در نتیجه یک خط افقی ضخیم را خواهیم دید.
هنگام ایجاد یک صفحه HTML، چیدمان نقش اساسی دارد. به خصوص هنگامی که در مورد نمادهای مختلف و طراحی تزئینی صحبت می کنیم: این موارد کوچک کمک می کند تا "زبان" صفحه شما قابل دسترس تر و واضح تر شود، علاوه بر این، آنها به طور قابل توجهی درک و ظاهر آن را به طور کلی تغییر می دهند. یکی از مهمترین عناصر برای طراحی یک خط افقی است و در ادامه با نحوه کار با آن و نحوه ایجاد یک خط افقی در html با جزئیات بیشتری آشنا خواهیم شد.
خط افقی چیست و برای چیست؟
یک خط افقی در html یک عنصر طراحی صفحه است که تعدادی عملکرد را انجام می دهد:
- تزئینی... به افزایش جذابیت صفحه کمک می کند.
- تقسيم كردن... جداسازی مؤثر اطلاعات با معانی مختلف را ترویج می کند.
- تاکید یا خط کشی... توجه مهمانان صفحه را به اطلاعات ضروری و مهم جلب می کند.
این خط افقی است که مقرون به صرفه ترین راه برای اجرای تعدادی از توابع در نظر گرفته می شود. ایجاد آن بسیار ساده است، اما از نظر ظاهری بسیار سودآور به نظر می رسد. با تغییرات ساده در کد html، می توانید موارد زیر را تنظیم کنید:
- طول؛
- عرض؛
- ویژگی های رنگ؛
- تراز به یک یا آن لبه.
توجه داشته باشید که خط افقی به عناصر بلوک اشاره دارد. این به این معنی است که یک خط جدید در صفحه اشغال می کند و متن زیر آن در زیر قرار می گیرد.
نحوه ایجاد یک خط افقی در HTML
می توانید با استفاده از یک برچسب ساده - hr در پرانتزهای مثلثی یک خط تنظیم کنید. مختصر "قاعده افقی" است و پارامترهای خارجی کلاسیک را تعریف می کند. تفاوت آن با بسیاری دیگر در این است که به برچسب پایانی نیاز ندارد و به تنهایی قادر به وجود است. می توانید ویژگی های خارجی یک عنصر را با استفاده از مقادیر اضافی در تگ تغییر دهید:
- طول... اگر نمی خواهید طول خط در کل صفحه باشد، می توانید اندازه مورد نظر را بر حسب پیکسل یا درصد تنظیم کنید. این کار با کمک یک کلمه اضافی "width" در برچسب و یک نشانگر طول عددی مشخص شده پس از علامت "=" در نقل قول انجام می شود.
به نظر می رسد این است. برای مثال، اگر طول 100 پیکسل را بخواهیم، یک برچسب مانند این تنظیم می کنیم: hr width = "100″
- هم ترازی... تراز در امتداد لبه های چپ یا راست و همچنین در مرکز امکان پذیر است. این ویژگی تنها زمانی معتبر است که قبلاً پارامتر عرض را مشخص کرده باشید، زیرا یک خط تمام صفحه قابل تراز نیست. برای تراز کردن، یک ویژگی اضافی را در تگ "align" تنظیم کنید و یک جهت به آن اضافه کنید: مرکز - برای مرکز، چپ - برای چپ و راست - برای تراز راست.
تگ تمام شده در این مورد به این صورت خواهد بود. به عنوان مثال، اگر برای یک خط افقی با طول 150 پیکسل، تراز مرکزی را بخواهیم تنظیم کنیم، تگ تمام شده به این صورت خواهد بود: hr align = "center" width = "150".
توجه داشته باشید که "align"، اندازه گیری برای تراز، در موقعیت 1 قرار می گیرد، حتی اگر مشخصه به عرض اندازه گیری طول وابسته باشد.
- عرض... به صورت اختیاری، می‌توانید عرض را نیز مشخص کنید و یک خط زیر برجسته یا نازک ایجاد کنید. این معیار به هیچ چیز بستگی ندارد و می تواند به طور مستقل بدون تعیین طول یا تراز استفاده شود. برای آن، از ویژگی اندازه در تگ و یک مقدار عددی برابر با عرض مورد نظر در پیکسل استفاده می کنیم. عدد در گیومه بعد از ویژگی اندازه و نماد "=" نشان داده می شود.
بنابراین، اگر نیاز به ایجاد یک خط با عرض 15 پیکسل داشته باشیم، باید تگ زیر را ایجاد کنیم: hr size = "15".
- رنگ... همچنین به عنوان یک شاخص مستقل تنظیم شده است. برای تغییر آن، از ویژگی color در ترکیب با نام رنگ به صورت کد یا به زبان انگلیسی استفاده کنید. رنگ در گیومه بعد از علامت "=" نشان داده شده است.
بنابراین، برچسب یک خط سفید استاندارد را می توان به دو صورت نوشت: رنگ hr = "#FFFFF" یا رنگ hr = "سفید".
مشکی را می توان با استفاده از کد # 000000 ایجاد کرد.
- کنار بگذارید سایه... اگر به عنصری نیاز دارید که دارای سایه نباشد، باید از ویژگی noshade در تگ استفاده کنید. می توان آن را به تنهایی یا در ترکیب با عناصر دیگر استفاده کرد. یک برچسب برای یک خط استاندارد که از آن استفاده می کند به این صورت خواهد بود: hr noshade
با استفاده از ویدئو یک خط افقی ایجاد کنید
و اگر می خواهید اطلاعات را با فرمت بصری تری بدست آورید، به ویدیوی بعدی مراجعه کنید که در آن به تفصیل امکان کار با یک خط افقی توضیح داده شده است.
با تعیین ابعاد مورد نیاز خط افقی، می توانید صفحات سایت را به گونه ای طراحی کنید که اطلاعات ساختار یافته و از نظر بصری به خوبی کادر بندی شوند. این به بازدیدکنندگان کمک می کند تا اطلاعات ارائه شده را راحت تر درک کنند و سایت شما را از دیگران متمایز کنند.
وظیفه
یک خط افقی روی صفحه ایجاد کنید.
راه حل
خطوط افقی برای جدا کردن یک بلوک متن از دیگری خوب هستند. متن کوچک با خطوط افقی در بالا و پایین بیشتر از متن معمولی توجه خواننده را جلب می کند.
با استفاده از تگ
می توانید یک خط افقی بکشید که ظاهر آن به ویژگی های استفاده شده و همچنین مرورگر بستگی دارد. تگ به عناصر بلوک اشاره دارد، بنابراین خط همیشه از یک خط جدید شروع می شود و پس از آن همه عناصر در خط بعدی نمایش داده می شوند. با تشکر از ویژگی های بسیاری از برچسب
خط ایجاد شده از طریق این تگ به راحتی قابل دستکاری است. در ترکیب با قدرت سبک ها، افزودن یک خط به سند شما به یک نسیم تبدیل می شود.
خط پیش فرض
به رنگ خاکستری و با افکت حجم نمایش داده می شود. این نوع خط همیشه با طراحی سایت مناسب نیست، بنابراین تمایل توسعه دهندگان به تغییر رنگ و سایر پارامترهای خط از طریق سبک ها قابل درک است. با این حال، مرورگرها در مورد این موضوع مبهم هستند، به همین دلیل است که شما مجبور خواهید بود از چندین ویژگی سبک به طور همزمان استفاده کنید. به ویژه، نسخه های قدیمی اینترنت اکسپلورر از ویژگی رنگ برای رنگ خط استفاده می کنند، در حالی که سایر مرورگرها از رنگ پس زمینه استفاده می کنند. اما این همه ماجرا نیست، در این مورد حتماً یک ضخامت خط (ویژگی ارتفاع) غیر از صفر مشخص کنید و با تنظیم خاصیت border روی none، حاشیه اطراف خط را بردارید. با کنار هم قرار دادن تمام ویژگی ها برای انتخابگر hr، یک راه حل جهانی برای مرورگرهای محبوب دریافت می کنیم (مثال 1).
مثال 1. خط افقی
HTML5 CSS 2.1 IE Cr Op Sa Fx
رشته متن
نتیجه این مثال در شکل نشان داده شده است. یکی
برنج. 1. خط افقی رنگی
برای تاکید بر برخی از عناصر به خصوص مهم سایت، استفاده از انواع سبک‌ها و ویژگی‌های CSS که برای این کار ارائه شده‌اند ضرری ندارد. البته لازم نیست زیاد خود را به خود زحمت دهید و متن را برجسته کنید، مثلاً با حروف برجسته یا ایتالیک، پس زمینه را تغییر دهید یا دور متن را فریم کنید. اما همیشه یکی از روش های ارائه شده مناسب نیست. فرض کنید متنی دارید که به دلیل ویژگی های بار معنایی آن باید جدا شود. این جایی است که ویژگی های HTML و CSS وارد می شوند.
نحوه ایجاد یک خط در متن با استفاده از CSS
برای اجرای برنامه های خود نیاز به مراجعه به فایل style.cssبا نوشتن خاصیت مربوطه در آن مرز... این باعث می شود که یک خط در بالا، پایین یا در سمت خاصی از متن ظاهر شود. به نوبه خود، چندین ویژگی وجود دارد که وظیفه نمایش خط را بر عهده دارند، یعنی:
- لبه بالا- یک خط افقی بالای متن؛
- مرز راست- یک خط عمودی در سمت راست متن؛
- لبه پایین- یک خط افقی در زیر متن؛
- لبه چپ- خط عمودی به سمت چپ.
نحوه ایجاد یک خط در html
با استفاده از ویژگی های CSS، می توانید تمام مقادیر لازم را با ویرایش کد HTML بنویسید. برای این کار باید به بخش مدیریتی سایت بروید. یکی از مطالب منتشر شده را انتخاب کنید، ویرایشگر متن را به حالت ویرایش کد HTML تغییر دهید و ویژگی های CSS را اضافه کنید. یک نمونه در زیر قابل مشاهده است.
با تجویز این ویژگی ها می توانید بر اهمیت مطلب، پاراگراف یا عنوان ارائه شده تاکید کنید؟
توضیح مختصر دستورات
- عرض- طول خط؛
- جامد- خط توپر؛
- خط چین- خط نقطه چین.
برای آشنایی بیشتر با سبک ها، خواندن این مطلب را توصیه می کنم.
درک این نکته ضروری است که در فرآیند ایجاد تغییرات در کد سایت، ویژگی هایی که نوع خط، ضخامت و رنگ آن را تعیین می کنند، با فاصله از هم جدا شده اند.
این روش مزیت های متعددی دارد:
طیف گسترده ای از امکانات که با آن می توانید تقریباً هر خطی را ایجاد کنید.
سهولت انجام تمام تغییرات لازم به طور مستقیم در کد HTML. این کار را برای سازندگان سایت بی تجربه بسیار ساده می کند.
نحوه ایجاد یک خط افقی مستقیم با استفاده از تگ HTML
اولین نکته ای که توجه شما را به آن جلب می کنم این است که این تگ با وجود تمام ظرافت ها و اصول html دارای تگ پایانی نیست. می توان از آن در هر نقطه از کد html، بین تگ ها استفاده کرد
و.ویژگی های برچسب
- عرض- مسئول طول خط است. می توان هم بر حسب درصد و هم بر حسب پیکسل مشخص کرد.
- اندازه- ضخامت خط بر حسب پیکسل مشخص شده است.
- رنگ- رنگ خط را مشخص می کند.
- تراز کردن- ویژگی مسئول تراز خط. به نوبه خود، تیم به آن اشاره می کند.
اصولاً از خطوط افقی برای تزئین صفحات HTML سایت استفاده می شود و ظاهر جذاب تری به آنها می بخشد. اما آنها همچنین می توانند اطلاعات بخش های همسایه را به صورت بصری مشخص کنند و در هنگام مطالعه آن به خوانندگان راحتی اضافه کنند. به طور کلی، خطوط افقی را در جایی که نیاز دارید بکشید، همین.
چگونه یک خط افقی رسم کنم؟
یک تگ مخصوص برای کشیدن خطوط افقی در HTML وجود دارد
... علاوه بر این، او است برچسب بلوک، یعنی قبل و بعد از خودش شکستگی خط ایجاد می کند، بنابراین خط همیشه در یک خط جداگانه به دست می آید. بر این اساس، فقط می‌توان آن را در داخل تگ‌هایی که مثلاً می‌توانند حاوی عناصر بلوک باشند، مشخص کرد یا
... اما خودم
نمی تواند محتوا داشته باشد، زیرا صرفاً برچسب پایانی ندارد، یعنی خالی است.نمونه ای از ترسیم خطوط افقی در HTML
خطوط افقی بکشید
پاراگراف
پاراگراف
پاراگراف
نتیجه در مرورگر
پاراگراف
پاراگراف
پاراگراف
همانطور که می بینید، خطوط بسیار نازک، غیر توصیفی هستند و به عرض کامل کشیده شده اند، بنابراین اکنون یاد می گیریم که چگونه آنها را تغییر دهیم تا جذاب تر به نظر برسند.
چگونه رنگ، ضخامت و عرض خطوط افقی را تغییر دهم؟
در نسخه های قدیمی HTML، تگ
ویژگی های خاصی وجود داشت که با آن می توان رنگ، ضخامت و عرض خطوط افقی را تغییر داد. اینها به ترتیب رنگ، اندازه و عرض هستند. اما در نسخه‌های جدیدتر، آنها به نفع برگه‌های سبک آبشاری (CSS) حذف شده‌اند، بنابراین، حدس زدید، ما دوباره از ویژگی سبک مورد علاقه خود استفاده خواهیم کرد. نحو کلی عبارت است از:
style = "پس زمینه: رنگ">- رنگ خط (یا به جای پس زمینه آن).
style = "قد: اندازه">- ضخامت خط
style = "width: size">- عرض خط
سبک = "پس زمینه: رنگ، ارتفاع: اندازه، عرض: اندازه"> - اما شما می توانید تمام پارامترها را به طور همزمان مشخص کنید، فقط نقطه ویرگول (;) را فراموش نکنید.یک رنگ را می توان با نام آن در انگلیسی یا با کد HEX رنگ، قبل از هش (#) مشخص کرد. خوب، شما قبلاً در مورد این از درس به بعد می دانید تغییر رنگ متن و پس زمینه.
اما در مورد تغییر اندازه با جزئیات بیشتر صحبت خواهیم کرد. یادت هست از آموزش تغییر فونت، حدود ده واحد در CSS وجود دارد، اما عرض خطرا می توان تنها در پیکسل (px) و درصد (%) مشخص کرد، و ضخامتبه طور کلی فقط در پیکسل. اگر واحدهای دیگری را تهیه کنید، این یک خطا نخواهد بود، بلکه مرورگرها به سادگی آنها را نادیده می گیرند.
اگر ابعاد را به پیکسل مشخص کنید، ضخامت و عرض خط به وضوح مانیتوری که سایت شما در آن مشاهده می شود بستگی دارد (هرچه وضوح صفحه نمایش بالاتر باشد، خط نازک تر و باریک تر است).
همانطور که گفتم فقط عرض خط را می توان به صورت درصد مشخص کرد. اندازه‌های درصد همیشه به اندازه عنصر کانتینر اصلی که برچسب در داخل آن قرار دارد بستگی دارد و محاسبه می‌شود.
... در این حالت اندازه والد 100% در نظر گرفته می شود. مثلاً اگر تگ را قرار دهیم
style = "width: 50%">عنصر داخلی، مهم نیست که چگونه اندازه پنجره مرورگر یا وضوح مانیتور را تغییر می دهیم - عرض خط همیشه نصف عرض بلوک خواهد بود..نمونه ای از تغییر رنگ، ضخامت و عرض خطوط افقی.
رنگ، ضخامت و عرض خطوط افقی را تغییر دهید.
نتیجه در مرورگر
تغییر موقعیت خطوط افقی
هنگامی که عرض یک خط افقی را تغییر می دهید، به وضوح قابل مشاهده است که مرورگرها همیشه آن را در مرکز قرار می دهند. اگر می خواهید موقعیت آن را تغییر دهید، فقط از داخل استفاده کنید
صفت را با مقادیر زیر تراز کنید:
- مرکز- خط به مرکز تراز شده است (مقدار پیش فرض).
- ترک کرد- روی لبه سمت چپ فشار داده شده است.
- درست- روی لبه سمت راست فشار داده شود.
نمونه ای از تراز کردن خطوط افقی.
موقعیت خطوط افقی را تغییر دهید.
نتیجه در مرورگر
چگونه می توانم حاشیه اطراف خط را حذف کنم؟
به اولین نمونه از این آموزش نگاهی بیندازید. به نظر شما این خطوط چه رنگی دارند؟ و اینجا اشتباه است. آنها مانند هر عنصر صفحه ای که رنگ پس زمینه ندارند شفاف هستند! باور نمی کنی؟ سپس به مثالی نگاه کنید که در آن رنگ خطوط را تغییر دادیم. برای همون اولی رنگ رو ست نکردیم و فقط سایزش رو زیاد کردیم و این خط شفاف نیست؟ به طوری که!
الان توضیح میدم به طور پیش فرض، مرورگرها فریم هایی را در اطراف خطوط ترسیم می کنند که یک جلوه سه بعدی ایجاد می کند. بنابراین، زمانی که ضخامت خطوط افقی را افزایش نمی دهیم، مرورگرها فقط این فریم ها را به ما نشان می دهند، زیرا ضخامت خود خط 0 پیکسل است.
برای حذف حاشیه اطراف خط، که اغلب فقط ظاهر را خراب می کند، ویژگی style را دوباره اعمال می کنیم. و به این صورت نوشته شده است:
مشق شب.
- عناوین مقاله، بخش و زیربخش ایجاد کنید. همه آنها را در مرکز قرار دهید.
- کل صفحه را روی Arial و Courier برای هدرها قرار دهید.
- اجازه دهید اندازه قلم کل صفحه 85 درصد اندازه پیش فرض مرورگر باشد. و عناوین به ترتیب دارای 145%، 125% و 110% از اندازه فونت صفحه هستند.
- زیر عنوان اول یک پاراگراف، زیر عنوان دوم یک نقل قول طولانی و زیر عنوان سوم یک شعر بنویسید. و بگذارید شعر در مرکز صفحه باشد.
- سه کلمه را به صورت پررنگ در نقل قول خود قرار دهید.
- زیر عنوان مقاله، یک خط افقی قرمز سه پیکسلی در تمام عرض صفحه بکشید.
- در بالا و پایین شعر، خطوط مشکی یک پیکسلی بکشید. عرض خط بالا تقریباً برابر با عرض آیه و خط پایین نصف شود.
- فریم های غیر ضروری را از خطوط جدا کنید.
