العمل مع CSS text-transform ، لتغيير حالة الاحرف

-

يمكن من خلال هذه الخاصية التحكم بشكل ومظهر محتوى الصفحات ، حيث تحتوي هذه الخاصية text-transform   على مجموعة من السمات للتحكم بالنص وهي 


الخاصية
الوصف
capitalize
تحويل الحرف الأول من كل  كلمة إلى احرف كبيرة.
uppercase
تحويل جميع الحروف الى احرف كبيرة
lowercase
تحويل جميع الحروف الى احرف صغيره
full-width
تستخدم هذه الخاصية بحالات خاصة مثل الاحرف اليابانية او الصينية، يطلق علي الاسم <ruby> حيث يعمل على تحويل جميع الاحرف الى الحجم الكامل الخاص به
none
منع التغييرات ، تبقي جميع الاحرف على الحالة الأولية تما تم تضمينها
inherit
تستخدم في حال كان لدينا child و parent  حيث يتم تطبيق حالة parent على parent 

طريقة الكتابة 


/* Keyword values */
        text-transform: none;
        text-transform: capitalize;
        text-transform: uppercase;
        text-transform: lowercase;
        text-transform: full-width;
        text-transform: full-size-kana;
        /* Global values */
        text-transform: inherit;
        text-transform: initial;
        text-transform: revert;
        text-transform: unset;
أمثلة:

مثال 1 : استخدام none
قم بانشاء ملف CSS باسم style ثم اضف الكود التالي : 

html,
body {
    margin: 0;
    height: 100%;
    text-align: center;
    font-family: "Muli", sans-serif;
}
body {
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
}
footer {
    grid-row-start: 3;
    grid-row-end: 3;
    padding: 30px;
    background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}
span {
    text-transform: none;
}
strong {
    float: right;
}



ثم قم باضافة ملف HTML باسم Index ثم اضف التالي: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer</title>
    <link href="Style.css" rel="stylesheet" />
</head>
<body>
    <div class="main-wrapper">
        <p>
            Initial String
            <strong>text here text here, ...</strong>
        </p>
        <p>
            text-transform: none
            <strong><span>text here text here, ...</span></strong>
        </p>
    </div>
    <footer></footer>
</body>
</html>

قم بتشغيل الصفحة ستكون النتيجة (حالة الاحرف كما هي لم يتم اي تغيير عليها)


مثال 2 : تحويل حالة الحرف الأول بكل كلمة الى Uppercase 

سنقوم بنسخ الكود السابق مع اضافة تعديل بسيط على ملف Css كما في الكود في الاسفل:

html,
body {
margin: 0;
height: 100%;
text-align: center;
    font-family: "Muli", sans-serif;
}
body {
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
}
footer {
    grid-row-start: 3;
    grid-row-end: 3;
    padding: 30px;
    background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}
span {
    text-transform: none;
}
strong {
    float: right;
}
p {
    text-transform: capitalize;
}
ثم نقوم بتغيير بسيط في ملف HTML كما في الاسفل:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer</title>
    <link href="Style.css" rel="stylesheet" />
</head>
<body>
    <div class="main-wrapper">
        <p>
            Initial String
            <strong>text here text here, ...</strong>
        </p>
        <p>
            text-transform: none
            <strong><span>text here text here, ...</span></strong>
        </p>
        <p>in this example, i am going to set every first value of the text to 
uppercase. to do it we will use capitalize property in  text-transform.</p>
    </div>
    <footer></footer>
</body>
</html>
قم بتشغل الصفحة ستكون النتيحة 


مثال 3: تحويل حالة الاحرف جميعها  الى Uppercase 

تماما كما فعلنا بالمثال السابق باستنثاء تغيير الكود
 text-transform: capitalize  في ملف CSS الى text-transform: uppercase

بعد التغيير لنقم بتشغيل الصفحة ستكون النتيجة


مثال 4 تحويل حالة الاحرف جميعها  الى lowercase 

تماما كما فعلنا بالمثال السابق باستنثاء تغيير الكود
 text-transform: uppercase في ملف CSS الى text-transform: lowercase 

بعد التغيير لنقم بتشغيل الصفحة ستكون النتيجة

مثال 5:استخدام الخاصية text-transform لاجراء تصميم على الحرف الاول من فقرة معينة

قم باضفة الكود التالي الى  ملف css 


html,
body {
    margin: 0;
height: 100%;
   text-align: center;
    font-family: "Muli", sans-serif;
}
body {
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
}
footer {
    grid-row-start: 3;
    grid-row-end: 3;
    padding: 30px;
    background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}
span {
    text-transform: none;
}
strong {
    float: right;
}
p {
    text-transform: lowercase;
    line-height: 4;
}
    p::first-letter {
        font-size: 4em;
        font-weight: bold;
        font-family: sans-serif;
        text-transform: uppercase;
    } 

ثم قم بتعديل ملف HTML كالتالي : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer</title>
    <link href="Style.css" rel="stylesheet" />
</head>
<body>
    <div class="main-wrapper">
<p>in this example, i am going to set every first value of the text to 
uppercase. to do it we will use capitalize property in  text-transform.</p>
    </div>
    <footer></footer>
</body>
</html>
قم بتشغيل الصفحة ستكون النتيجة : 


لقد قمنا باضافة كود خاص لاول حرف في الفقرة بحيث يتحكم بمواصفات هذا الحرف باستخدام الكود : 

p::first-letter {
        font-size: 4em;
        font-weight: bold;
        font-family: sans-serif;
        text-transform: uppercase;
    } 

بهذا نكون قد تعلمنا كيفية التحكم بالنصوص وتغييرها في الصفحات الخاصة بنا، تعتبر CSS خيار افضل من لغة Javascript للتحكم بالنصوص(يمكن التحكم بالنصوص ايضا عن طريق Javascript).