为啥 标签中的所有单词都大写？

Posted 2023-05-08

技术标签:

【中文标题】为啥 标签中的所有单词都大写？【英文标题】：Why are all words in tags capitalized?为什么 标签中的所有单词都大写？ 【发布时间】：2021-12-23 15:22:48 【问题描述】：

出于某种原因，我所有句子中的每个单词都大写。我将把我的html和css放在下面。任何一个都非常感谢。提前致谢！

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>complete responsive coffee shop website design</title>

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <!-- custom css file link  -->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    
<!-- header section starts  -->

<header class="header">

    <a href="#" class="logo">
        <img src="images/logo.png" >
    </a>

    <nav class="navbar">
        <a href="index.html">home</a>
        <a href="about.html">about</a>
        <a href="menu.html">menu</a>
        <a href="products.html">products</a>
        <a href="review.html">review</a>
        <a href="contact.html">contact</a>
        <a href="blogs.html">blogs</a>
    </nav>

    <div class="icons">
        <div class="fas fa-search" id="search-btn"></div>
        <div class="fas fa-shopping-cart" id="cart-btn"></div>
        <div class="fas fa-bars" id="menu-btn"></div>
    </div>

    <div class="search-form">
        <input type="search" id="search-box" placeholder="search here...">
        <label for="search-box" class="fas fa-search"></label>
    </div>

    <div class="cart-items-container">
        <div class="cart-item">
            <span class="fas fa-times"></span>
            <img src="images/cart-item-1.png" >
            <div class="content">
                <h3>cart item 01</h3>
                <div class="price">$15.99/-</div>
            </div>
        </div>
        <div class="cart-item">
            <span class="fas fa-times"></span>
            <img src="images/cart-item-2.png" >
            <div class="content">
                <h3>cart item 02</h3>
                <div class="price">$15.99/-</div>
            </div>
        </div>
        <div class="cart-item">
            <span class="fas fa-times"></span>
            <img src="images/cart-item-3.png" >
            <div class="content">
                <h3>cart item 03</h3>
                <div class="price">$15.99/-</div>
            </div>
        </div>
        <div class="cart-item">
            <span class="fas fa-times"></span>
            <img src="images/cart-item-4.png" >
            <div class="content">
                <h3>cart item 04</h3>
                <div class="price">$15.99/-</div>
            </div>
        </div>
        <a href="#" class="btn">checkout now</a>
    </div>

</header>

<!-- header section ends -->

<!-- blogs section starts  -->

<section class="blogs" id="blogs">

    <h1 class="heading"> our <span>blogs</span> </h1>

    <div class="box-container">

        <div class="box">
            <div class="image">
                <img src="images/come.jpg" >
            </div>
            <div class="content">
                <a href="#" class="title">Where Does Your Coffee Come From? 5 Must-Taste Coffee Origins From Around The World</a>
                <span>by admin / 6th November, 2021</span>
                <p>If you haven’t tried these must-taste coffee origins, you might want to wait before crowing a personal favorite coffee growing country..</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="images/perfect.webp" >
            </div>
            <div class="content">
                <a href="#" class="title">7 Essential Coffee Recommendations for a Perfect Espresso</a>
                <span>by admin / 30th October, 2021</span>
                <p>Brewing up a perfect espresso is a lifelong journey. With these seven recommendations, you’ll get a lot closer.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="images/12.webp" >
            </div>
            <div class="content">
                <a href="#" class="title">The 12 Most Common French Press Coffee Questions, Answered</a>
                <span>by admin / 23thr October, 2021</span>
                <p>How much coffee should you use? How long does it take? Get all your french press coffee questions answered here!</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="images/mill.webp" >
            </div>
            <div class="content">
                <a href="#" class="title">Hario Mini Mill Mod Guide: A Must-Do For This Coffee Grinder</a>
                <span>by admin / 16th October, 2021</span>
                <p>The beloved Hario Mini Mill is a fixture in the coffee world. This simple mod makes it even better.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="images/french.webp" >
            </div>
            <div class="content">
                <a href="#" class="title">A Review Of The Kohipress, A Portable French Press And Travel Mug</a>
                <span>by admin / 9th October, 2021</span>
                <p>How does the Kohipress, a portable french press and travel mug, hold up under close examination? Discover this clever brewer’s strengths and weaknesses here.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="images/filter.webp" >
            </div>
            <div class="content">
                <a href="#" class="title">3 Reasons I Love Coffee Sock’s Cloth Filters (+ How To Brew Coffee With Them)</a>
                <span>by admin / 2nd October, 2021</span>
                <p>These cloth filters from Coffee Sock have shaken up my regular coffee routine quite a bit. Here are 3 reasons I love using them.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="images/pure.webp" >
            </div>
            <div class="content">
                <a href="#" class="title">I Tried Pure Kopi Luwak Coffee (Cat Poop Coffee). Here’s Why You Should Too</a>
                <span>by admin / 25th September, 2021</span>
                <p>Would you drink coffee that had been pooped out of a cat (aka, kopi luwak)? I did. Here’s how it went…</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="images/beans.webp" >
            </div>
            <div class="content">
                <a href="#" class="title">10 Awesome Uses for Old Coffee Beans</a>
                <span>by admin / 18th September, 2021</span>
                <p>Everyone has old coffee beans laying around. Check out these 10 awesome uses for them, ground or whole!</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="images/storage.webp" >
            </div>
            <div class="content">
                <a href="#" class="title">I’ve Found The Best Coffee Storage Container, And I’ll Never Need Another</a>
                <span>by admin / 11th September, 2021</span>
                <p>I’ve gone back and forth on many coffee storage containers, but I’ve finally found the silver bullet: the Ankomn Turn-N-Seal.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="images/reflux.webp" >
            </div>
            <div class="content">
                <a href="#" class="title">Have Acid Reflux? Don’t Stop Drinking Coffee – Try This Instead</a>
                <span>by admin / 4th September, 2021</span>
                <p>Everyone says to stop drinking coffee if you have acid reflux. Don’t listen to them! There are other, better ways to enjoy your daily brew without damaging your esophagus. Let us show you.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="images/cyber.webp" >
            </div>
            <div class="content">
                <a href="#" class="title">The Best Specialty Coffee Black Friday & Cyber Monday Deals Of 2021</a>
                <span>by admin / 28th August, 2021</span>
                <p>It’s the perfect time to try out some new coffee gear and beans – and this list of specialty coffee Black Friday and Cyber Monday deals should help you do so without breaking the bank.</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <div class="image">
                <img src="images/press.webp" >
            </div>
            <div class="content">
                <a href="#" class="title">Bodum Brazil French Press Review</a>
                <span>by admin / 21st August, 2021</span>
                <p>The Bodum Brazil is a french press that has withstood the test of time and is one of the most respected and used presses in the world. How does it perform?</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>       
    </div>

</section>

<!-- blogs section ends -->

<!-- footer section starts  -->

<section class="footer">

    <div class="share">
        <a href="#" class="fab fa-facebook-f"></a>
        <a href="#" class="fab fa-twitter"></a>
        <a href="#" class="fab fa-instagram"></a>
        <a href="#" class="fab fa-linkedin"></a>
        <a href="#" class="fab fa-pinterest"></a>
    </div>

    <div class="links">
        <a href="#">home</a>
        <a href="#">about</a>
        <a href="#">menu</a>
        <a href="#">products</a>
        <a href="#">review</a>
        <a href="#">contact</a>
        <a href="#">blogs</a>
    </div>

    <div class="credit">created by <span>Landon Byrd</span> | 2021 all rights reserved</div>

</section>

<!-- footer section ends -->

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

:root
    --main-color:#d3ad7f;
    --black:#13131a;
    --bg:#010103;
    --border:.1rem solid rgba(255,255,255,.3);


*
    font-family: 'Roboto', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    text-transform: capitalize;
    transition: .2s linear;


html
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 9rem;
    scroll-behavior: smooth;


html::-webkit-scrollbar
    width: .8rem;


html::-webkit-scrollbar-track
    background: transparent;


html::-webkit-scrollbar-thumb
    background: #fff;
    border-radius: 5rem;


body
    background: var(--bg);


section
    padding:2rem 7%;


.heading
    text-align: center;
    color:#fff;
    text-transform: uppercase;
    padding-bottom: 3.5rem;
    font-size: 4rem;


.heading span
    color:var(--main-color);
    text-transform: uppercase;


.btn
    margin-top: 1rem;
    display: inline-block;
    padding:.9rem 3rem;
    font-size: 1.7rem;
    color:#fff;
    background: var(--main-color);
    cursor: pointer;


.btn:hover
    letter-spacing: .2rem;


.header
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:1.5rem 7%;
    border-bottom: var(--border);
    position: fixed;
    top:0; left: 0; right: 0;
    z-index: 1000;


.header .logo img
    height: 6rem;


.header .navbar a
    margin:0 1rem;
    font-size: 1.6rem;
    color:#fff;


.header .navbar a:hover
    color:var(--main-color);
    border-bottom: .1rem solid var(--main-color);
    padding-bottom: .5rem;


.header .icons div
    color:#fff;
    cursor: pointer;
    font-size: 2.5rem;
    margin-left: 2rem;


.header .icons div:hover
    color:var(--main-color);


#menu-btn
    display: none;


.header .search-form
    position: absolute;
    top:115%; right: 7%;
    background: #fff;
    width: 50rem;
    height: 5rem;
    display: flex;
    align-items: center;
    transform: scaleY(0);
    transform-origin: top;


.header .search-form.active
    transform: scaleY(1);


.header .search-form input
    height: 100%;
    width: 100%;
    font-size: 1.6rem;
    color:var(--black);
    padding:1rem;
    text-transform: none;


.header .search-form label
    cursor: pointer;
    font-size: 2.2rem;
    margin-right: 1.5rem;
    color:var(--black);


.header .search-form label:hover
    color:var(--main-color);


.header .cart-items-container
    position: absolute;
    top:100%; right: -100%;
    height: calc(100vh - 9.5rem);
    width: 35rem;
    background: #fff;
    padding:0 1.5rem;


.header .cart-items-container.active
    right: 0;


.header .cart-items-container .cart-item
    position: relative;
    margin:2rem 0;
    display: flex;
    align-items: center;
    gap:1.5rem;


.header .cart-items-container .cart-item .fa-times
    position: absolute;
    top:1rem; right: 1rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--black);


.header .cart-items-container .cart-item .fa-times:hover
    color:var(--main-color);


.header .cart-items-container .cart-item img
    height: 7rem;


.header .cart-items-container .cart-item .content h3
    font-size: 2rem;
    color:var(--black);
    padding-bottom: .5rem;


.header .cart-items-container .cart-item .content .price
    font-size: 1.5rem;
    color:var(--main-color);


.header .cart-items-container .btn
    width: 100%;
    text-align: center;


.home
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:url(../images/home-img.jpeg) no-repeat;
    background-size: cover;
    background-position: center;


.home .content
    max-width: 60rem;


.home .content h3
    font-size: 6rem;
    text-transform: uppercase;
    color:#fff;


.home .content p
    font-size: 2rem;
    font-weight: lighter;
    line-height: 1.8;
    padding:1rem 0;
    color:#eee;


.about .row
    display: flex;
    align-items: center;
    background:var(--black);
    flex-wrap: wrap;


.about .row .image
    flex:1 1 45rem;


.about .row .image img
    width: 100%;

.about .row .content
    flex:1 1 45rem;
    padding:2rem;


.about .row .content h3
    font-size: 3rem;
    color:#fff;


.about .row .content p
    font-size: 1.6rem;
    color:#ccc;
    padding:1rem 0;
    line-height: 1.8;


.menu .box-container
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;


.menu .box-container .box
    padding:5rem;
    text-align: center;
    border:var(--border);    


.menu .box-container .box img
    height: 10rem;


.menu .box-container .box h3
    color: #fff;
    font-size: 2rem;
    padding:1rem 0;


.menu .box-container .box .price
    color: #fff;
    font-size: 2.5rem;
    padding:.5rem 0;


.menu .box-container .box .price span
    font-size: 1.5rem;
    text-decoration: line-through;
    font-weight: lighter;


.menu .box-container .box:hover
    background:#fff;


.menu .box-container .box:hover > *
    color:var(--black);


.products .box-container
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;


.products .box-container .box
    text-align: center;
    border:var(--border);
    padding: 2rem;


.products .box-container .box .icons a
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    border:var(--border);
    color:#fff;
    margin:.3rem;


.products .box-container .box .icons a:hover
    background:var(--main-color);


.products .box-container .box .image
    padding: 2.5rem 0;


.products .box-container .box .image img
    height: 25rem;


.products .box-container .box .content h3
    color:#fff;
    font-size: 2.5rem;


.products .box-container .box .content .stars
    padding: 1.5rem;


.products .box-container .box .content .stars i
    font-size: 1.7rem;
    color: var(--main-color);


.products .box-container .box .content .price
    color:#fff;
    font-size: 2.5rem;


.products .box-container .box .content .price span
    text-decoration: line-through;
    font-weight: lighter;
    font-size: 1.5rem;


.review .box-container
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;


.review .box-container .box
    border:var(--border);
    text-align: center;
    padding:3rem 2rem;


.review .box-container .box p
    font-size: 1.5rem;
    line-height: 1.8;
    color:#ccc;
    padding:2rem 0;


.review .box-container .box .user
    height: 7rem;
    width: 7rem;
    border-radius: 50%;
    object-fit: cover;


.review .box-container .box h3
    padding:1rem 0;
    font-size: 2rem;
    color:#fff;


.review .box-container .box .stars i
    font-size: 1.5rem;
    color:var(--main-color);


.contact .row
    display: flex;
    background:var(--black);
    flex-wrap: wrap;
    gap:1rem;


.contact .row .map
    flex:1 1 45rem;
    width: 100%;
    object-fit: cover;


.contact .row form
    flex:1 1 45rem;
    padding:5rem 2rem;
    text-align: center;


.contact .row form h3
    text-transform: uppercase;
    font-size: 3.5rem;
    color:#fff;


.contact .row form .inputBox
    display: flex;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    background:var(--bg);
    border:var(--border);


.contact .row form .inputBox span
    color:#fff;
    font-size: 2rem;
    padding-left: 2rem;


.contact .row form .inputBox input
    width: 100%;
    padding:2rem;
    font-size: 1.7rem;
    color:#fff;
    text-transform: none;
    background:none;


.blogs .box-container
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;


.blogs .box-container .box
    border:var(--border);    


.blogs .box-container .box .image
    height: 25rem;
    overflow:hidden;
    width: 100%;


.blogs .box-container .box .image img
    height: 100%;
    object-fit: cover;
    width: 100%;


.blogs .box-container .box:hover .image img
    transform: scale(1.2);


.blogs .box-container .box .content
    padding:2rem;


.blogs .box-container .box .content .title
    font-size: 2.5rem;
    line-height: 1.5;
    color:#fff;


.blogs .box-container .box .content .title:hover
    color:var(--main-color);


.blogs .box-container .box .content span
    color:var(--main-color);
    display: block;
    padding-top: 1rem;
    font-size: 2rem;


.blogs .box-container .box .content p
    font-size: 1.6rem;
    line-height: 1.8;
    color:#ccc;
    padding:1rem 0;


.footer
    background:var(--black);
    text-align: center;


.footer .share
    padding:1rem 0;


.footer .share a
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    color:#fff;
    border:var(--border);
    margin:.3rem;
    border-radius: 50%;


.footer .share a:hover
    background-color: var(--main-color);


.footer .links
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding:2rem 0;
    gap:1rem;


.footer .links a
    padding:.7rem 2rem;
    color:#fff;
    border:var(--border);
    font-size: 2rem;


.footer .links a:hover
    background:var(--main-color);


.footer .credit
    font-size: 2rem;
    color:#fff;
    font-weight: lighter;
    padding:1.5rem;


.footer .credit span
    color:var(--main-color);



/* media queries  */
@media (max-width:991px)

    html
        font-size: 55%;
    

    .header
        padding:1.5rem 2rem;
    

    section
        padding:2rem;
    



@media (max-width:768px)

    #menu-btn
        display: inline-block;
    

    .header .navbar
        position: absolute;
        top:100%; right: -100%;
        background: #fff;
        width: 30rem;
        height: calc(100vh - 9.5rem);
    

    .header .navbar.active
        right:0;
    

    .header .navbar a
        color:var(--black);
        display: block;
        margin:1.5rem;
        padding:.5rem;
        font-size: 2rem;
    

    .header .search-form
        width: 90%;
        right: 2rem;
    

    .home
        background-position: left;
        justify-content: center;
        text-align: center;
    

    .home .content h3
        font-size: 4.5rem;
    

    .home .content p
        font-size: 1.5rem;
    



@media (max-width:450px)

    html
        font-size: 50%;

它对 p 标签内的所有文本都执行此操作，我试图找出问题所在，但我似乎找不到导致它的原因。它是一个多页网站，我只是举了我的 html 的一页作为示例。但它在所有页面上都会这样做。

【问题讨论】：

这是一个 CSS 规则 text-transform: uppercase; * text-transform: capitalize; * 适用于一切。 【参考方案1】：

CSS 中有几个文本转换实例。

带有 * 的 text-transform: capitalize（即所有内容）只会尝试将每个单词的第一个字符变成大写字母，除非 text-transform 属性为更具体的选择器提供了不同的设置。

这不是您的主要问题，但如果它影响到标题下方的文本，您很可能想看看它。

您显示的标题的 CSS 在几个地方有 text-transform: uppercase，这似乎是这里的主要问题。

鉴于此应用程序的整体上下文是什么以及为什么认为有必要进行这两种类型的大写，我无法从上下文中判断出来。从 CSS 中删除这两种类型可能是一个有用的开始，仅在需要时以不那么全局的方式重新应用它们。

【讨论】：

以上是关于为啥 标签中的所有单词都大写？的主要内容，如果未能解决你的问题，请参考以下文章

如何把一个字符串里的所有单词的第一个字符变大写？

使用 Selenium 在 标记中的特定单词之前单击

CSS中为啥我设置了背景为半透明,连字体都透明了

如何用PHP替换段落中的单词？

将字符串中的三个单词的首字母转化成大写

Javascript - 在变量中交换数据 - 移动和替换

为啥 <p> 标签中的所有单词都大写？