কম্পিউটার টিউটোরিয়াল

CSS আপডেট: টেক্সট ডেকোরেশন ও আন্ডারলাইন স্টাইল করার নতুন প্রোপার্টি


নিচের টেক্সট-ডেকোরেশন প্রোপার্টিগুলোর পরিচয় দিয়ে এখন আমরা আগের চেয়ে আরও ভাবে টেক্সট স্টাইল করতে পারি। text-decoration হলো text-decoration-thickness, text-decoration-color, text-decoration-line এবং text-decoration-style-এর শর্টহ্যান্ড। text-decoration-skip, text-decoration-skip-ink, text-decoration, text-underline-offset এবং text-underline-position আলাদাভাবে নির্দিষ্ট করতে হয়।

সিনট্যাক্স

CSS text-decoration-এর সিনট্যাক্স নিচের মতো −

Selector { text-decoration: /*value*/ }

উদাহরণ

নিচের উদাহরণগুলো CSS text-decoration প্রোপার্টি প্রদর্শন করে।

<!DOCTYPE html> <html>    <head>       <style>          #one {             text-decoration-style: double;             text-decoration-skip-ink: auto;          }          p {             padding: 2%;             text-decoration-line: underline overline;             text-decoration-style: wavy;          }          p:nth-of-type(even) {             text-decoration: overline;          }          span {             text-decoration: line-through;          }       </style>    </head>    <body>       <p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p>       <p>Random Demo Text</p>       <p>Random <span>Demo</span> Text</p>    </body> </html>

এটি নিচের আউটপুট দেবে

CSS আপডেট: টেক্সট ডেকোরেশন ও আন্ডারলাইন স্টাইল করার নতুন প্রোপার্টি

উদাহরণ

<!DOCTYPE html> <html>    <head>       <style>          p {             margin: 3%;             font-size: x-large;             text-decoration-line: underline overline;             text-decoration-style: dotted;             text-decoration-skip-ink: none;             text-decoration-thickness: 4px;          }       </style>    </head>    <body>       <p>Super Demo abcdefghijklmnopqrstuvwxyz</p>    </body> </html>

এটি নিচের আউটপুট দেবে

CSS আপডেট: টেক্সট ডেকোরেশন ও আন্ডারলাইন স্টাইল করার নতুন প্রোপার্টি


  1. CSS :placeholder-shown ব্যবহার করে খালি টেক্সট ইনপুটের স্টাইল কাস্টমাইজ করা

  2. ২০২০ সালের ওয়েব ডিজাইনের জন্য লেটেস্ট CSS প্রপার্টি এবং API

  3. CSS text-align ও text-justify প্রোপার্টি ব্যবহার করে টেক্সট জাস্টিফাই করা

  4. ফরম ইনপুট ফিল্ডের জন্য কিছু কম পরিচিত CSS প্রোপার্টি