个人中心
gpt4 book ai didi

html - 为单个页面覆盖主题的 CSS

转载 作者：太空宇宙 更新时间：2023-11-04 10:04:46 24 4
gpt4 key购买 nike

我浏览了数百个关于教程、问题论坛、youtube 视频等的网页。我尝试编辑 header.php、创建子主题和编辑新样式表，甚至将我的部分 css 与此页面上的 html。似乎没有什么能完全影响现有的 CSS 并以我希望的方式显示页面。

目标是让 wordpress 页面看起来像样式正确的页面。

我在本地主机上创建的文件中正确实现设计的照片:here

还有一张当我将 HTML 放入 wordpress 页面时错误实现的设计的照片:here

这是 CSS:

body {
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
 }
 h1, h2, h4, h5, h6 {
color: #b1997b; 
font-weight: 600; !important
line-height: 1.3em; !important
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif; !important
 }

 a {
text-align: center;
text-decoration: none;
color: #b1997b;
font-size: 1em;
display: inline;
 }

 a:hover{ 
text-decoration: underline;

 }


 .input {
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif;
display: block; 
height: 3em; 
width: 20em;
margin: 0 auto;
border: none;
border-bottom: 0.05em solid #9C9B9B;
 }

 h3 {
font-size: 1em;
color: #84A0B1;
font-weight: 600;
line-height: 1.3em;
display: inline;
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif;
 }
 h2 {
margin-top: 1.3em; !important
font-family: "AvenirNext-Regular", Avenir, Arial, sans-serif; !important
 }
 b, strong {
font-weight: 600;
 }
 .buttonText {
text-align: center;
text-decoration: none;
color: #84A0B1;
font-size: 1.2em;
display: inline;
 }
 blueColor {
color: #84A0B1;
 }
 brownColor {
color: #b1997b;
 }
 hr {
display: block;
 }

 grayColor {
color: #9C9B9B;
 }
 samp {
display: none;
 }


 .submitbutton{

display: block;  /* inline for text and button */

border: 0.1em; 
border-radius: 0.5em;
background-color: #e6e5e5; 
width: 14em; 
height: 3.5em;
outline-color: #C0C0C0;


text-align: center;
text-decoration: none;
color: #84A0B1;
font-size: 0.7em;
 }

.offColor {
background-color: #c7c7c7;
 }
 .canceler {
display: block;
margin: 0.5em;
border: 0.1em;
border-radius: 0.5em;
background-color: #e6e5e5;
width: 6em;
height: 3em;
outline-color: #C0C0C0;
 }
 .linktext{
display: inline;
margin: 0.5em;
text-align: left;
color: #84A0B1;
font-size: 1em;
 }
.hidden { 
display: none; 
 }

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
display:      inherit;
margin-left:  auto;
margin-right: auto;
position:     fixed;
z-index:      1000;
top:          0;
left:         0;
height:       12.5em;
width:        10em;
border-style: none;
z-index:      1002;
}
 .centered {
  position: fixed;
  top: 50%;
  left: 50%;
 /* bring your own prefixes */
  transform: translate(-50%, -50%);
     }

.overlay {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color: #FFFFFF;
opacity:0.8;
z-index:1001;
}
.stop {display: none;}

.show {display: block;}

这是页面的 html:

<body>  
            <!-- Locations --!>
        <h2 class = "h2 locations"  style = "text-align: center;">look for your location</h2>



        <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>


        <p class="locations" style = "display: block; text-align: center">california</p>

             <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block" >beverly hills</h3>
                        <p class="locations" style = "display: block">9873 S. Santa Monica Blvd.<br> Beverly Hills, CA 90212</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="beverlyHills" id = "beverly hills"><p class = "buttonText">select</p></button>
                </div>
            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block"">dana point</h3>
                        <p class="locations" style = "display: block">34241 E. Pacific Coast Hwy, Ste. 201 <br> Dana Point, CA 92629 </p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="danaPoint" id = "dana point"><p class = "buttonText">select</p></button>   
                </div>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">manhattan beach</h3>
                        <p class="locations" style = "display: block">3713 Highland Ave, 2nd Floor<br> Manhattan Beach, CA 90266</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="manhattanBeach" id = "manhattan beach"><p class = "buttonText">select</p></button>
                </div>
            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">newport beach</h3>
                        <p class="locations" style = "display: block">2744 East Coast Hwy, 2nd Floor <br>Newport Beach, CA 92625</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="newportBeach" id = "newport beach"><p class = "buttonText">select</p></button>
                </div>
            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">santa monica</h3>
                        <p class="locations" style = "display: block">1229 Montana Ave, 2nd Floor<br> Santa Monica, CA 90403</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="santaMonica" id = "santa monica"><p class = "buttonText">select</p></button>
                </div>




            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>


        <p class="locations" style = "display: block; text-align: center">new york</p>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">union square</h3>
                        <p class="locations" style = "display: block">114 4th Ave.<br> New York, NY 10003 </p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="unionSquare" id = "union square"><p class = "buttonText">select</p></button>
                </div>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>



        <p class="locations" style = "display: block; text-align: center">pennsylvania</p>

            <hr class="locations" style = "margin-left: 1em; margin-right: 1em"></hr>
                <div style = "display: -webkit-flex; -webkit-align-items: center;  display: flex; align-items: center;">
                    <div style = "-webkit-flex: 1;  flex: 1; display: block; margin-left: 1.5em; min-width: 13em">
                        <h3 class="locations" style = "display: block">philadelphia</h3>
                        <p class="locations" style = "display: block">1120 Walnut St. <br> Philadelphia, PA 19107</p>
                    </div>
                    <button type="button" style = "width: 10em; margin-right: 2em" class="locations submitbutton" name="philadelphia" id = "philadelphia"><p class = "buttonText">select</p></button>
                </div>


    </body>

最佳答案

您可以尝试将作用域类添加到页面正文中 <body class="this-page-class">...</body>并具有仅适用于该类范围内的那些类的规则。

关于html - 为单个页面覆盖主题的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38107939/

24 4 0
文章推荐： html - CSS 中的过渡形状不起作用
文章推荐： c# - 如何在 dotnet 应用程序中创建导航菜单？
文章推荐： linux - 限制其他 linux 用户访问 docker 容器
文章推荐： python - 我如何覆盖odoo中的保存操作？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com