سلام، امروز قصد داریم در مورد یک ویژگی مهم در CSS مانند ایجاد حاشیه صحبت کنیم. فریم اغلب برای قاب بندی متن، برای جدا کردن یک عنصر طراحی از دیگری استفاده می شود، و برای هر مدیر وب سایتی مفید است که بداند چگونه یک فریم در CSS تنظیم کند.
استایل حاشیه را در CSS تنظیم کنید.
اولین چیزی که هنگام ایجاد حاشیه در سایت خود باید بپرسید سبک حاشیه CSS است. با تشکر از این، شما به مرورگر اجازه خواهید داد که کدام خط را قاب بکشد. به عنوان مثال، بیایید فقط یک خط ثابت برای یک عنوان، مانند فریم های معمولی، تعیین کنیم. برای این کار البته به یک فایل استایل نیاز داریم که خودتان بتوانید آن را بسازید و من قبلا در مقالات دیگر وبلاگم نحوه انجام این کار را توضیح داده ام.
من ایجاد نمی کنم فایل جدیداما من از قدیمی استفاده خواهم کرد، علاوه بر این، هدرها در اینجا حفظ می شوند سطوح مختلفکه برای آن فریم هایی ایجاد خواهیم کرد. بیایید بپرسیم انواع مختلففریم برای عنوان سطح اول و که توسط تگ h1 مشخص می شود. برای انجام این کار، متن زیر را در شیوه نامه بنویسید: h1 (سبک حاشیه: جامد؛) و نگاهی گذرا به آنچه نوشته ایم بیندازید. h1، این همان چیزی است که ما برای کدام عنصر تعریف می کنیم، دستور border-style را تنظیم می کنیم که به این معنی است که برای از این عنصرشما باید یک فریم با سبک خاصی تنظیم کنید، اما جامد نشان دهنده سبک نمایش قاب است، در در این مورداین یک خط ثابت است.
ما می توانیم سبک نمایش فریم را تغییر دهیم و برای این کار فقط باید پارامترهای جدیدی را تنظیم کنیم و اکنون نشان خواهم داد که چه دستوراتی در دسترس هستند و چگونه در سایت نمایش داده می شوند.
پارامترهای قاب:
جامد یا خط توپر.
خط نقطه چین.
خط شکسته
double یک خط دوتایی است.
اینها سبک های اصلی هستند که می توانید تنظیم سبک حاشیه در CSS، می توانید در مورد تمام دستورات موجود در مشخصات CSS اطلاعات بیشتری کسب کنید.
قبل از آن، استایل را برای کل فریم تنظیم می کنیم، اما همچنین می توانیم پارامتر را به طور خاص برای هر یک از اضلاع تنظیم کنیم و شیوه نامه این فرصت را به ما می دهد. چهار دستور به ما در این امر کمک خواهند کرد: سبک حاشیه چپ (خط چپ)، سبک مرزی بالا (خط بالا)، سبک حاشیه-راست (خط راست) و سبک حاشیه-پایین (خط پایین).
حالا بیایید سرفصل خود را برای هر طرف به طور متفاوتی طراحی کنیم. بیایید برای هر چهار طرف یک دستور بنویسیم:
h1 (
حاشیه چپ به سبک: شیار;
حاشیه بالا به سبک: جامد;
حاشیه-راست-سبک: دوتایی;
سبک حاشیه پایین: نقطه‌دار؛)
و در عمل شاهد نتیجه زیر خواهیم بود.
برای تنظیم حاشیه، باید از ویژگی سبک border-width استفاده کنیم که می‌توانیم چندین پارامتر را برای آن تنظیم کنیم: اولین مورد این است که اندازه حاشیه را بر حسب پیکسل تنظیم کنیم یا ضخامت را با thin (خط نازک)، متوسط (وسط) تنظیم کنیم. خط) یا ضخیم (خط ضخیم) دستورات. ما همچنین می توانیم وزن خط را برای هر طرف قاب تنظیم کنیم، صرف نظر از اینکه چه سبکی برای بقیه تنظیم شده است.
بیایید ابتدا یاد بگیریم که چگونه عرض خط مرز را مستقیماً برای همه طرف ها تنظیم کنیم. برای این کار فقط باید دستور border-width را گرفته و تنظیم کنیم و اندازه خط را برای آن تعریف کنیم. برای تنظیم ضخامت، متن به شکل زیر خواهد بود:
h1 (
حاشیه به سبک: جامد;
مرز-width: نازک؛
}
دستور thin را می توان با متوسط یا ضخیم جایگزین کرد یا می توانید ضخامت را بر حسب پیکسل با تعیین واحد اندازه گیری مشخص کنید، به عنوان مثال اندازه چهار پیکسل-4 پیکسل.
اکنون می خواهیم پارامترهای ضخامت را برای هر طرف قاب خود تنظیم کنیم. علاوه بر تنظیم استایل، پارامترهای border-left-width (عرض خط چپ)، border-top-width (ضخامت خط بالا)، حاشیه-راست-width (ضخامت خط راست) و border- bottom-width (ضخامت خط پایین) به ما کمک خواهد کرد. برای انجام این کار، چهار خط از محتوای زیر را به شیوه نامه اضافه می کنیم:
h1 (
حاشیه به سبک: جامد;
حاشیه-چپ-عرض: متوسط;
حاشیه-بالا-عرض: نازک؛
حاشیه-راست-عرض: ضخیم;
حاشیه-پایین-عرض: 7 پیکسل؛
}
و حالا هر چهار طرف قاب ما ضخامت خاص خود را خواهند داشت.
نحوه تنظیم رنگ حاشیه در CSS
حالا بیایید رنگ حاشیه را در CSS تنظیم کنیم و دستورات border-left-color، border-top-color، border-right-color و border-bottom-color به ما کمک می کنند تا رنگ را برای سمت چپ، بالا، راست و پایین تنظیم کنیم. خطوط مرزی به ترتیب .... برای این کار دستور می نویسیم و پارامترهای رنگ را به هر دستور اضافه می کنیم.
h1 (
حاشیه به سبک: جامد;
رنگ حاشیه چپ: # 00CCCC;
رنگ حاشیه بالا: # 6633CC;
حاشیه-راست-رنگ: #CCCCCC;
رنگ حاشیه پایین: # 66CC99;
}
و حالا بیایید نتیجه برنامه را ببینیم این پارامتر.
تنظیم یک متغیر سراسری برای کوتاه کردن رکورد.
حال بیایید ببینیم چگونه می توانیم از شر چنین ساختارها و رکوردهای دست و پا گیر خلاص شویم. برای انجام این کار، ما باید مرز مشخصه جهانی را تنظیم کنیم که در آن پارامترهایی مانند ضخامت حاشیه، سبک حاشیه و رنگ را تنظیم کنیم، و همه اینها حداقل در سه خط، بلکه فقط در یک خط قرار می گیرند.
برای این کار خط را می نویسیم:
h1 (
حاشیه: 5px جامد # 3399FF;
}
در خط ابتدا ضخامت خط قاب را نشان می دهیم، سپس یک فاصله و سبک قاب را نشان می دهیم و دوباره از طریق یک فاصله، رنگ کادر را نشان می دهیم. این تمام چیزی است که ما رکورد را به یک خط کاهش داده ایم.
امیدواریم به لطف این مقاله بتوانید مرزهایی را برای همه عناصر در CSS تعیین کنید. من سعی کردم توجه شما را به دستورات ضروری جلب کنم و نحوه تنظیم حاشیه در CSS، تنظیم سبک حاشیه در CSS و تعیین رنگ حاشیه در CSS را به طور مفصل به شما بگویم.
برای جداسازی واضح محتویات یک سلول از سلول دیگر، حاشیه هایی به سلول ها اضافه می شود. مسئول ایجاد آنهاست پارامتر مرزبرچسب زدن
| چبوراشکا | کروکودیل گنا | شاپوکلیاک |
فریم های ایجاد شده به این روش از نظر ظاهری در مرورگرهای مختلف کمی متفاوت هستند.
برنج. 1. فریم به دست آمده با استفاده از پارامتر حاشیه
برای به دست آوردن حاشیه ای از همان نوع، توصیه می شود تگ سبک حاشیه را اعمال کنید و آن را روی سلول های جدول اعمال کنید.
| 0 | ایکس | ایکس |
| 0 | 0 | ایکس |
| ایکس | ایکس | 0 |
تفاوت بین مرزهای جدول هنگام اضافه کردن پارامتر فروپاشی مرز، و همچنین بدون آن، در شکل نشان داده شده است. 2.
آ
ب
برنج. 2. نمای جدول هنگام استفاده از ویژگی border-collapase
در شکل 2a قاب جدول پیش فرض را نشان می دهد. توجه داشته باشید که در جدول، تمام خطوط دو برابر عرض هستند. افزودن پارامتر border-collapse این ویژگی را حذف می کند و ضخامت همه خطوط یکسان می شود (شکل 2b).
برای ایجاد خطوطی از همان نوع در جدول، می توانید راه دیگری را انتخاب کنید. باید برای انتخابگر اضافه شود
| 0 | ایکس | ایکس |
| 0 | 0 | ایکس |
| ایکس | ایکس | 0 |
این روش می تواند تغییراتی داشته باشد، به عنوان مثال، برای انتخابگر
یا
در این مثال، رنگ پس زمینه صفحه وب از طریق ویژگی پس زمینه اضافه شده به انتخابگر BODY تزریق می شود. اگر چه رنگ سفیدبه طور پیش فرض تنظیم شده است، گاهی اوقات مطلوب است که آن را طوری تنظیم کنید که کاربر رنگ پس زمینه خود را از طریق تنظیمات مرورگر مشخص نکند. خطوط جدول باید یک رنگ باشند، در این حالت آنها به وضوح نمایش داده نمی شوند و فقط سلول ها را بین خود تقسیم می کنند. نتیجه مثال 4 در زیر نشان داده شده است.
برنج. 3. نمای حاشیه هایی که با رنگ پس زمینه مطابقت دارند قاب میز عنصر مهم... همه کاره است و اغلب استفاده می شود. این درس به شما نشان می دهد که چگونه با استفاده از یک ویژگی برای جدول، سلول ها و ردیف ها حاشیه بسازید، اما بخش اصلی درس بر روی ویژگی های CSSزیرا حاشیه هنگام استفاده از سبک های CSS همه کاره می شود. ایجاد یک فریم با استفاده از یک ویژگیاصلاً یک صفت بسط پذیر نیست، می گویم بی معنی. صفت border ضخامت حاشیه را تعیین می کند و تمام. در اینجا یک مثال است:
یک راه آسان برای ایجاد حاشیه در اطراف یک عنصرفوراً می گویم سوابق دقیقمن آن را نمی دهم، زیرا در آینده درس بزرگی در مورد اموال مرزی وجود خواهد داشت و شاید بیش از یک. دارایی جهانیحاشیه قادر است ضخامت، سبک و رنگ حاشیه ها (قاب) را به طور همزمان تنظیم کند. ضخامت می تواند هر باشد، رنگ حاشیه ها در قالب هگزادسیمال تنظیم می شود. فرمت rgbو کلید واژه ها(قرمز، مشکی و غیره). سبک ها، تصویر زیر (تصویر از سایت htmlbook.ru گرفته شده است) و مثال دیگر: td ( قاب چپ، راست، پایین و بالابا استفاده از حاشیه، یک مرز از همه طرف ایجاد می شود. اما ما می توانیم کنترل کنیم که فریم را از کدام طرف بکشیم. حاشیه سمت چپ-سمت چپ: 2px یکدست سیاه. حاشیه سمت راست-راست: 1px نقطه‌دار # FF0000; حاشیه پایین حاشیه-پایین: 10px جامد # 000000; حاشیه بالا: 1 پیکسل سبز ثابت. همانطور که می بینید، آنها نباید داشته باشند همان مقادیر، و همچنین می توان آنها را با هم ترکیب کرد، یعنی چندین، به عنوان مثال، حاشیه چپ و راست (قاب) و غیره را بنویسید. همه چیز. جلوتر نمی روم، این موضوع درسی دیگر است. مثال: جدول ( گوشه های گردحالا بیایید به موضوع "زیبایی" و قابلیت استفاده بپردازیم. برای گرد کردن لبه‌های قاب‌ها، ویژگی border-radius وجود دارد. همینطور است درس جداگانه، ما با جزئیات زیاد تجزیه و تحلیل نخواهیم کرد. او قبول می کند مقدار متفاوتاستدلال ها ما (فقط در این درس) یک آرگومان می نویسیم و اگر یک مقدار بنویسیم، در همه طرف ها (گوشه ها) گرد کردن یکسانی وجود خواهد داشت. مقدار می تواند در "معیارهای" مختلف، به عنوان مثال، در پیکسل و درصد باشد. در اینجا یک مثال است: td ( حاشیه یا بالشتکبرای اینکه متن به قاب نزدیک نباشد، باید از آن تورفتگی داشته باشید. ویژگی padding در این امر به ما کمک خواهد کرد. همچنین چند منظوره است، اما ما آن را تا حدی در نظر خواهیم گرفت، همه به همین دلیل. ما فقط از یک مقدار استفاده خواهیم کرد. مقدار می تواند در "معیارهای" مختلف، به عنوان مثال، در پیکسل و درصد باشد. در اینجا یک مثال است: td ( ولاد مرژویچ با با استفاده از CSSشما می توانید به روش های مختلفی یک حاشیه به یک عنصر اضافه کنید. البته، اساساً از ویژگی border به عنوان همه کاره ترین و همچنین طرح کلی و در کمال تعجب box-shadow استفاده می شود که وظیفه اصلی آن ایجاد سایه است. در ادامه به بررسی این روش ها و تفاوت های آن ها در یکدیگر می پردازیم. مشخصات کلیساده ترین ویژگی برای ایجاد فریم. دارای پارامترهای مشابه مرز است، اما در برخی جزئیات با آن تفاوت قابل توجهی دارد:
این سؤال مطرح می شود - در چه مواردی به طرح کلی نیاز است، زمانی که نقش آن، با وجود تفاوت های ذکر شده، به طور کامل توسط مرز به عهده گرفته می شود؟ موقعیت های زیادی وجود ندارد، اما آنها رخ می دهند:
قاب های چند رنگهمانطور که در مثال 1 نشان داده شده است، باید درک کرد که طرح کلی به هیچ وجه جایگزین مرز نمی شود و ممکن است با آن وجود داشته باشد. مثال 1. ایجاد یک قاب
در این مثال یک حاشیه سیاه در اطراف عنصر اضافه شده است که با یک حاشیه سفید از پس زمینه جدا می شود (شکل 1). برنج. 1. دور عنصر را قاب کنید قاب هنگام استفاده: شناورافزودن یک حاشیه از طریق حاشیه، عرض عنصر را افزایش می دهد، که هنگام ترکیب مرز و کلاس شبه شناور کاملاً قابل توجه است. دو راه برای "برنده شدن" این وجود دارد. ساده ترین کار جایگزین کردن حاشیه با طرح کلی است که می دانیم تأثیری بر ابعاد عنصر ندارد (مثال 2). مثال 2. حاشیه در شناور
طرح کلی همیشه مناسب نیست، فقط به این دلیل که گرد کردن گوشه بر آن تأثیر نمی گذارد. در اینجا روش دوم مناسب است - یک قاب یا قاب نامرئی را اضافه کنید که با رنگ پس زمینه مطابقت دارد و سپس پارامترهای آن را در شناور تغییر دهید (مثال 3). سپس هیچ جابجایی عنصر رخ نخواهد داد، زیرا فریم از ابتدا وجود دارد. اما همیشه به یاد داشته باشید که عرض عنصر مجموع مقادیر عرض، حاشیه در سمت چپ و حاشیه در سمت راست است. وضعیت در مورد ارتفاع نیز مشابه است. مثال 3. قاب روی شناور
حاشیه اطراف فیلدهای فرمدر برخی از مرورگرها (Chrome، Safari، آخرین نسخه های اپرا) یک کوچک قاب رنگی(شکل 2). برای حذف آن، کافی است مقدار none را در استایل ها به ویژگی outline اضافه کنید، همانطور که در مثال 4 نشان داده شده است. برنج. 2. دور فیلدها را قاب کنید مثال 4. برداشتن قاب
فریم ها از طریق جعبه سایهاگرچه ویژگی box-shadow برای افزودن سایه به اطراف یک عنصر در نظر گرفته شده است، اما می‌توان از آن برای ایجاد حاشیه‌هایی استفاده کرد که با حاشیه یا طرح کلی قابل انجام نیستند. این به این دلیل است که تعداد سایه ها می تواند نامحدود باشد که پارامترهای آنها با کاما از هم جدا شده اند. برای بدست آوردن قاب، سه پارامتر اول باید صفر شود، آنها مسئول موقعیت سایه و تاری آن هستند. پارامتر چهارم در این مورد مسئول ضخامت حاشیه است و پارامتر پنجم رنگ حاشیه را تعیین می کند. برای فریم دوم، پارامتر چهارم مجموع ضخامت های دو قاب است. مثال 4 نحوه اضافه کردن دو حاشیه و یک حاشیه به سمت راست را با استفاده از یک ویژگی box-shadow نشان می دهد. مثال 4. استفاده از box-shadow
نتیجه این مثالنشان داده شده در شکل 3.
برنج. 3. فریم های ایجاد شده توسط ویژگی box-shadow مشخصات CSS امکانات نامحدودی را برای طراحی جدول می دهد. به طور پیش فرض، سلول های جدول و جدول دارای حاشیه و پس زمینه قابل مشاهده نیستند و سلول های داخل جدول مجاور یکدیگر نیستند. عرض سلول های جدول با عرض محتویات آنها تعیین می شود، بنابراین عرض ستون های جدول می تواند متفاوت باشد. ارتفاع تمام سلول ها در یک ردیف یکسان است و با ارتفاع بلندترین سلول تعیین می شود. قالب بندی جداول1. حاشیه جدولجدول و سلول های داخل آن به طور پیش فرض در مرورگر بدون حاشیه قابل مشاهده نمایش داده می شوند. حاشیه میزتعیین شده توسط ویژگی مرزی: جدول (حاشیه - فروپاشی: جمع کردن؛ / * حذف فضاهای خالیبین سلول ها * / حاشیه: 1px خاکستری جامد. / * مرز بیرونی جدول را تنظیم کنید خاکستریضخامت 1 پیکسل * /) مرزهای سلول عنواناز هر ستون برای عنصر ام تنظیم شده است: Th (حاشیه: 1px خاکستری جامد؛) مرزهای سلولیبدنه جدول برای عنصر td تنظیم شده است: Td (حاشیه: 1px خاکستری جامد؛) عرض مرزهای سلول های مجاور دو برابر نمی شود، بنابراین می توانید برای کل جدول به روش زیر مرزها را تعیین کنید: Th, td (حاشیه: 1px خاکستری جامد؛) حاشیه بیرونی جدول را می توان با افزایش عرض آن انتخاب کرد: جدول (حاشیه: 3px خاکستری یکدست؛) مرزها را می توان تا حدی تنظیم کرد: / * یک حاشیه بیرونی خاکستری 3 پیکسل برای جدول تنظیم کنید * / جدول (حاشیه بالای: 3 پیکسل خاکستری یکدست؛) / * یک حاشیه خاکستری 1 پیکسل برای سلول بدنه جدول تنظیم کنید * / td (حاشیه پایین: 1 پیکسل خاکستری یکدست؛) می توانید در مورد ملک مرزی بیشتر بخوانید. 2. نحوه تنظیم عرض و ارتفاع میزپیش فرض عرض و ارتفاع میزتوسط محتویات سلول های آن تعیین می شود. اگر عرض مشخص نشده باشد، برابر با عرض پهن ترین ردیف (خط) خواهد بود. عرض جدول و ستونبا استفاده از ویژگی width تنظیم کنید. اگر جدول (عرض: 100%؛) برای یک جدول مشخص شده باشد، عرض جدول برابر با عرض بلوک ظرفی است که در آن قرار دارد. عرض جدول و ستون ها معمولاً بر حسب px یا درصد مشخص می شود، به عنوان مثال: جدول (عرض: 600 پیکسل؛) هفتم (عرض: 20 درصد؛) td: فرزند اول (عرض: 30 درصد؛) ارتفاع میزتنظیم نشده. ارتفاع ردیف هاجداول را می توان با افزودن لایه های بالا و پایین به عناصر دستکاری کرد و | ... تعیین ارتفاع با استفاده از ویژگی ارتفاع توصیه نمی شود. | Th, td (بالشتک: 10px 15px؛) 3. نحوه تنظیم پس زمینه جدولپیش فرض پس زمینه جدولو سلول ها شفاف هستند. اگر صفحه یا بلوک حاوی جدول دارای پس‌زمینه باشد، در جدول می‌درخشد. اگر پس‌زمینه هم برای جدول و هم برای سلول‌ها تنظیم شده باشد، تنها پس‌زمینه سلول‌ها در مکان‌هایی که پس‌زمینه جدول و سلول‌ها همپوشانی دارند، قابل مشاهده است. پس زمینه جدول به عنوان یک کل و سلول های آن می تواند به صورت زیر باشد: 4. ستون های جدولمدل جدول CSS عمدتاً بر روی رشته‌ها (ردیف‌هایی) که با استفاده از تگ تشکیل می‌شوند متمرکز است با استفاده از تگ شما می توانید پس زمینه را برای هر تعداد ستون تنظیم کنید. با استفاده از جدول td: first-child، table td: انتخابگر آخرین فرزند، می توانید اولین یا آخرین ستون جدول را استایل دهید (به استثنای اولین خانه سرصفحه جدول). با استفاده از انتخابگر جدول td: nth-child (قاعده انتخاب ستون)، می توانید هر ستونی را در جدول استایل دهید. می توانید اطلاعات بیشتری در مورد انتخابگرهای CSS بخوانید. 5. نحوه اضافه کردن عنوان به جدولبا استفاده از تگ می توانید عنوانی را به جدول اضافه کنید
 برنج. 2. نمونه ای از نمایش هدر زیر جدول 6. نحوه حذف شکاف بین قاب های سلولیبه طور پیش فرض، مرزهای سلول های جدول با یک فضای کوچک از هم جدا می شوند. اگر border-collapse: collapse را برای جدول تنظیم کنیم، شکاف حذف خواهد شد. ملک ارثی است. نحو جدول (مرز - فرو ریختن: فرو ریختن؛) 7. چگونه فاصله بین مرزهای سلولی را افزایش دهیماز طريق خواص مرزیفاصله شما می توانید فاصله بین فریم سلول را تغییر دهید. این ملکبه طور کلی در جدول اعمال می شود. به ارث برده. نحو جدول (حاشیه-کوچک کردن: جدا؛ فاصله مرز: 10 پیکسل 20 پیکسل؛) جدول (کاهش حاشیه: جدا؛ فاصله مرز: 10 پیکسل؛) 8. چگونه سلول های خالی جدول را پنهان کنیمویژگی vala-cells سلول های خالی را پنهان یا نشان می دهد. فقط سلول‌هایی را تحت تأثیر قرار می‌دهد که محتوایی ندارند. اگر یک پس زمینه برای یک سلول مشخص شده باشد، و جدول (border-collapse: collapse;) برای یک جدول مشخص شده باشد، سلول پنهان نخواهد شد. به ارث برده.
 برنج. 5. مصداق اختفا سلول خالیجداول 9. طرح بندی جدول با استفاده از ویژگی table-layoutچیدمان یک جدول با یکی از دو رویکرد تعیین می شود: چیدمان ثابت یا چیدمان خودکار. Layout در این مورد به معنای نحوه توزیع عرض جدول بین عرض سلول ها است. ملک به ارث نمی رسد. نحو جدول (طرح جدول: ثابت؛) 10. بهترین چیدمان میز1. مینیمالیسم افقیجداول افقی جدول هایی هستند که متن در آنها به صورت افقی خوانده می شود. هر موجودیت یک خط جداگانه است. می‌توانید با قرار دادن حاشیه دو پیکسلی در زیر عنوان هفتم، جدول‌هایی مانند این را به سبک مینیمالیستی استایل دهید.
در تعداد زیادیردیف‌ها، این طراحی جداول، خواندن آنها را دشوار می‌کند. برای حل این مشکل، می توانید یک حاشیه یک پیکسلی را در زیر تمام عناصر td اضافه کنید. Td (حاشیه پایین: 1px جامد #cccc؛ رنگ: # 669؛ بالشتک: 9px 8px؛ انتقال: 0.3s خطی؛) / * بقیه کد مانند مثال بالا است * / افزودن یک: افکت شناور به عنصر tr خواندن جداولی را که سبک مینیمالیستی دارند آسان‌تر می‌کند. هنگامی که نشانگر ماوس را روی یک سلول می‌برید، بقیه سلول‌های همان ردیف به طور همزمان برجسته می‌شوند، که اگر جدول‌ها دارای چندین ستون باشند، روند ردیابی اطلاعات را ساده می‌کند. Th (وزن قلم: معمولی؛ رنگ: # 039؛ بالشتک: 10px 15px؛) td (رنگ: # 669؛ حاشیه بالا: 1px جامد # e8edff؛ بالشتک: 10px 15px؛) tr: td (پس‌زمینه: # e8edff) ;) 2. مینیمالیسم عمودیاگرچه چنین جداول به ندرت مورد استفاده قرار می گیرند، جداول عمودی جهت دسته بندی یا مقایسه توصیفات اشیاء نشان داده شده توسط یک ستون مفید هستند. می‌توانید با افزودن فضایی که ستون‌ها را از هم جدا می‌کند، آنها را به سبک مینیمال استایل کنید. Th (وزن قلم: معمولی؛ حاشیه-پایین: 2px جامد # 6678b1؛ حاشیه-راست: 30px جامد #fff؛ حاشیه-چپ: 30px جامد #fff؛ رنگ: # 039؛ بالشتک: 8px 2px؛) td (حاشیه- سمت راست: 30 پیکسل توپر #fff؛ حاشیه-چپ: 30 پیکسل توپر #fff؛ رنگ: # 669؛ بالشتک: 12 پیکسل 2 پیکسل؛) 3. سبک "جعبه".قابل اعتمادترین سبک برای تزیین انواع میز، سبک به اصطلاح "جعبه" است. کافی است یک کالا را بردارید محدوده رنگو سپس رنگ پس زمینه را برای همه سلول ها تنظیم کنید. به یاد داشته باشید که با قرار دادن مرزها به عنوان جداکننده بر تفاوت بین خطوط تأکید کنید. Th (اندازه قلم: 13 پیکسل؛ وزن قلم: معمولی؛ پس‌زمینه: # b9c9fe؛ حاشیه بالا: 4 پیکسل جامد #aabcfe؛ حاشیه پایین: 1 پیکسل یک‌پیکسل #fff؛ رنگ: # 039؛ پد: 8 پیکسل؛) td (پس‌زمینه : # e8edff؛ حاشیه پایین: 1 پیکسل توپر #fff؛ رنگ: # 669؛ حاشیه بالا: 1 پیکسل شفاف؛ بالشتک: 8 پیکسل؛) tr: نشانگر td (پس‌زمینه: #ccddff؛) سخت ترین قسمت پیدا کردن طرح رنگی است که به طور هماهنگ با وب سایت شما ترکیب شود. اگر سایت دارای گرافیک و طراحی باشد، استفاده از این سبک برای شما بسیار دشوار خواهد بود. جدول (خانوادگی فونت: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛ اندازه قلم: 14 پیکسل؛ حداکثر عرض: 70٪؛ عرض: 70٪؛ تراز نوشتاری: مرکز؛ حاشیه-کوچک کردن: جمع کردن ؛ حاشیه بالای: 7 پیکسل جامد # 9baff1؛ حاشیه-پایین: 7 پیکسل جامد # 9baff1;) th (اندازه قلم: 13 پیکسل؛ وزن قلم: عادی؛ پس‌زمینه: # e8edff؛ حاشیه سمت راست: 1 پیکسل جامد # 9baff1؛ حاشیه- سمت چپ: 1px جامد # 9baff1؛ رنگ: # 039؛ بالشتک: 8 پیکسل؛) td (پس‌زمینه: # e8edff؛ حاشیه-راست: 1px جامد #aabcfe؛ حاشیه-چپ: 1px جامد #aabcfe؛ رنگ: # 669؛ بالشتک: 8px ;) 4. گورخر افقیمیز گورخر بسیار جذاب و خوش دست به نظر می رسد. رنگ پس‌زمینه مکمل می‌تواند به عنوان یک نشانه بصری برای خواندن جدول برای مردم باشد. Th (وزن قلم: معمولی؛ رنگ: # 039؛ بالشتک: 10px 15px؛) td (رنگ: # 669؛ حاشیه بالا: 1px ثابت # e8edff؛ بالشتک: 10px 15px؛) tr: nth-child (2n) ( پس زمینه: # e8edff;) 5. سبک روزنامهبرای دستیابی به به اصطلاح افکت روزنامه، می توانید حاشیه هایی را روی عناصر جدول اعمال کنید و با سلول های داخل آن بازی کنید. یک سبک روزنامه سبک و مینیمالیستی ممکن است به این صورت باشد: بازی با طرح رنگ، اضافه کردن حاشیه، پد، پس زمینه های مختلفو: اثر شناور بر روی یک خط. جدول (حاشیه: 1px توپر # 69c؛) th (وزن قلم: معمولی؛ رنگ: # 039؛ حاشیه پایین: 1px خط چین # 69c؛ بالشتک: 12px 17px؛) td (رنگ: # 669؛ بالشتک: 7px 17px; ) tr: hover td (پس‌زمینه: #ccddff;)
جدول (حاشیه: 1px جامد # 69c؛) th (وزن فونت: معمولی؛ رنگ: # 039؛ بالشتک: 10px؛) td (رنگ: # 669؛ حاشیه بالا: 1px خط چین #fff؛ بالشتک: 10px؛ پس‌زمینه: #ccddff;) tr: شناور td (پس‌زمینه: # 99bcff;)
جدول (حاشیه: 1px جامد # 6cf;) th (وزن فونت: معمولی؛ اندازه قلم: 13 پیکسل؛ رنگ: # 039؛ تبدیل متن: بزرگ؛ حاشیه سمت راست: 1px جامد # 0865c2؛ حاشیه بالا: 1px ثابت # 0865c2؛ حاشیه-چپ: 1px یکپارچه #0865c2؛ حاشیه-پایین: 1px یکپارچه #fff؛ بالشتک: 20px؛) td (رنگ: # 669؛ حاشیه-راست: 1px خط چین # 6cf؛ بالشتک: 10px 20px;) 6. پس زمینه میزاگر به دنبال سریع و راه منحصر به فردطراحی میز، انتخاب کنید تصویر جذابیا عکسی مرتبط با موضوع جدول و آن را به عنوان پس زمینه جدول قرار دهید. Jpg ") بدون تکرار؛ موقعیت پس‌زمینه: 100% 55 پیکسل؛) هفتم (وزن فونت: معمولی؛ رنگ: # 339؛ بالشتک: 10 پیکسل 12 پیکسل؛) td (پس‌زمینه: آدرس اینترنتی (" https: // سایت / تصاویر / back..png ")؛ پس زمینه: شفاف؛) مقالات مرتبط برتر |
برنج. 3. نمونه ای از جداول با ادغام و تقسیم حاشیه سلول
برنج. 4. نمونه ای از جداول با افزایش فاصله بین قاب های سلول
