2014-12-08 7 views
4

MY CSS называется ppcss.css, но после 3 ссылок jquery, которые у меня есть, он переопределяет мой css и делает мою страницу другой. Может ли кто-нибудь помочь мне решить эту проблему? изменить или изменить код для объяснения меня. Спасибо.Почему мой CSS переопределяется?

$(function() { 
 

 
    $("#tabs").tabs(); 
 

 
    });
body { background-color:#00BFFF;} 
 
\t \t 
 
    div#header { width:auto; 
 
\t \t \t height:75px; 
 
\t \t \t background-image:url('banner.gif'); 
 
\t \t } \t 
 
    h1{ color:white; 
 
\t \t \t text-align:center; 
 
\t \t \t font-size:1.8em; 
 
\t \t \t 
 
\t \t \t } 
 
    h3{ color:white; 
 
\t text-align:center; 
 
\t font-size:1em; 
 
\t \t \t 
 
\t \t \t } 
 
    
 
    div#wrapper{width:1200px; 
 
\t \t \t background-color:#fff; 
 
\t \t \t margin-left:auto; 
 
\t \t \t margin-right:auto; 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t } \t 
 
\t \t 
 
    h1.head,h3.subhead{font-family:georgia,serif; 
 
\t \t \t \t \t margin-left;20px;} 
 
\t \t \t \t \t \t 
 
\t \t \t \t 
 
    \t \t \t \t \t \t 
 
    h1.head{font-size;2.25em; 
 
\t \t padding-top:15px; 
 
\t \t 
 
\t } 
 
    h3.subhead{ margin-top:-20px; 
 
\t \t \t letter-spacing:1px; 
 
\t \t } 
 
    ul#navlist li{ display:inline; 
 
\t \t \t list-style-type:none; 
 
\t \t \t padding-right:30px;} 
 
    ul#navlist{ \t \t \t 
 
\t \t \t background-color:#ADFF2F; 
 
\t \t \t margin-top:.99px; 
 
\t \t \t margin-bottom:1.99px; 
 
\t \t } 
 
    ul#navlist a{ \t \t \t 
 
\t \t \t text-decoration:none; 
 
\t \t \t font-size:1.5em; 
 
\t \t } \t \t 
 
    ul#navlist a:hover{ \t color:red; \t \t 
 
\t \t \t 
 
\t \t } \t 
 
\t 
 
    div#leftcol{ float:left; 
 
\t \t \t width:180px; 
 
\t \t \t margin-left:2px;} 
 

 

 
    div#maincol{float:left; 
 
\t \t width:500px; 
 
\t \t \t margin-left:15px; 
 
\t \t \t margin-right:15px; 
 
\t \t \t text-align:center; 
 
\t \t \t } 
 
    div#maincol h5{font-size:85%; 
 
\t \t \t line-height:1.25em; 
 
\t \t \t text-align:center; 
 
\t \t \t margin-right:1px; 
 
\t \t \t font-family:arial, sans-serif; 
 
\t \t \t } 
 
\t \t \t 
 
    div#rightcol{ width:180px; 
 
\t \t \t \t float:right; 
 
\t \t \t \t margin-right:20epx; 
 
\t \t \t \t 
 
\t \t \t \t } 
 
    div#footer{ background-color:#ADFF2F; 
 
\t \t \t \t \t height:15px; 
 
\t \t \t \t \t clear:both;} 
 
    #home div.smfeature{width:180px; 
 
\t \t \t height:auto; 
 
\t \t \t border:thin solid red; 
 
\t \t \t margin-bottom:10px;} 
 
    #home div.smfeature h4 { font-family:arial,sans-serif; 
 
\t \t \t \t font-size:75%; 
 
\t \t \t \t color:brown; 
 
\t \t \t \t background:#48D1CC; 
 
\t \t \t \t text-align:center; 
 
\t \t \t \t letter-spacing:2px; 
 
\t \t \t \t padding:.5em; 
 
\t \t \t \t 
 
\t \t \t \t margin-top:0px; 
 
\t \t \t \t margin-right:0px; 
 
\t \t \t \t } 
 
    div#searchbox2 { background-color:#7B68EE; 
 
\t \t \t \t \t text-align:center; 
 
\t \t \t \t \t } 
 
    div#links { width:150px; 
 
\t \t \t height:auto; 
 
\t \t \t text-align:center; 
 
\t \t \t } 
 
    a { text-decoration: none; 
 
\t } \t \t \t \t 
 
    p a:hover{ color:red;}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    
 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 

 
<div id="tabs"> 
 

 
    <ul> 
 
    <li><a href="#home">Homepage</a></li> 
 

 
    <li><a href="animals.html">Animals</a></li> 
 

 
    <li><a href="Algae.html">Plants</a></li> 
 

 
    <li><a href="FAQS.html">F.A.Qs</a></li> 
 
\t 
 
\t <li><a href="ContactUs.html">Contact us</a></li> 
 

 
    </ul> 
 
    <div id="home"> 
 
\t <div id="wrapper"> 
 
\t <!-- header --> 
 
\t <div id="header"> 
 
\t <h1 class="head"> Underwater World </h1> 
 
\t <h3 class="subhead"> 
 
\t A New World! 
 
\t </h3> 
 
\t </div> 
 
\t 
 
\t \t 
 
\t <!-- left column --> 
 
\t <div id="leftcol" > 
 
\t 
 
\t <div class="smfeature"> 
 
\t <h4> Who we are. </h4> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div class="smfeature">

+4

Попробуйте добавить скрипку, это будет стимулировать людей, чтобы ответить на ваш вопрос. –

+0

@PrashantKumar как добавить скрипку? –

+0

Используйте эту ссылку http://jsfiddle.net/ и добавьте свой код .. – vijaykumar

ответ

1

JQuery-ui.css применять свои собственные стили .tabs(), если вы хотите использовать свой собственный стиль .. удалить этот

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 

или вы можете пойти на jquery-ui.css и сделать его пустым

+0

Я сделал это уже 5 раз, он не решает проблему. если я переверну его, все вкладки уйдут! :( –

+0

Я обновляю свой ответ –

+0

, вы можете перейти на jquery-ui.css и сделать его пустым –

0

Вы можете использовать плагин, например, CSS Viewer в FireFox или его собственный инспектор разработчика (щелкните правой кнопкой мыши, проверьте элемент) узнать, какие стили влияют на каждый элемент и в какой таблице стилей они находятся.

После этого вы можете переопределить любое свойство из таблицы стилей по умолчанию в вашей собственной таблице стилей, включив ее (ссылку на таблицу стилей) после таблицы стилей js-плагина по умолчанию и используя важный оператор во задействованных свойствах, например :

.elementClass { 
border: 1px !important; 
} 
0

Вы должны поставить свой CSS после jquery-ui.css. Также в вашем css вы должны переопределить все свойства, заданные jquery-ui.css. Например, CSS загружен в ul li по jquery-ui.css являются -

-webkit-background-clip: border-box; 
-webkit-background-origin: padding-box; 
-webkit-background-size: auto; 
background-attachment: scroll; 
background-clip: border-box; 
background-color: rgb(255, 255, 255); 
background-image: url(http://code.jquery.com/ui/1.11.2/themes/smoothness/images/ui-bg_glass_65_ffffff_1x400.png); 
background-origin: padding-box; 
background-size: auto; 
border-bottom-color: rgb(170, 170, 170); 
border-bottom-style: solid; 
border-bottom-width: 0px; 
border-image-outset: 0px; 
border-image-repeat: stretch; 
border-image-slice: 100%; 
border-image-source: none; 
border-image-width: 1; 
border-left-color: rgb(170, 170, 170); 
border-left-style: solid; 
border-left-width: 1px; 
border-right-color: rgb(170, 170, 170); 
border-right-style: solid; 
border-right-width: 1px; 
border-top-color: rgb(170, 170, 170); 
border-top-left-radius: 4px; 
border-top-right-radius: 4px; 
border-top-style: solid; 
border-top-width: 1px; 
color: rgb(33, 33, 33); 
display: block; 
float: left; 
font-family: Verdana, Arial, sans-serif; 
font-size: 18px; 
font-weight: normal; 
height: 59.375px; 
line-height: 22.8800010681152px; 
list-style-image: none; 
list-style-position: outside; 
list-style-type: none; 
margin-bottom: -1px; 
margin-left: 0px; 
margin-right: 3.51999998092651px; 
margin-top: 1px; 
padding-bottom: 1px; 
padding-left: 0px; 
padding-right: 30px; 
padding-top: 0px; 
position: relative; 
text-align: left; 
top: 0px; 
white-space: nowrap; 
width: 194.53125px; 

Таким образом, вы должны переопределить их все.

Я также заметил, что вы не установили идентификатор navlist в своем ul. Так что ваша публика не получала css, который вы написали. Я немного изменил ваш фрагмент. Это не совсем нормально, но это показывает эффект вашего css.

$(function() { 
 

 
     $("#tabs").tabs(); 
 

 
    });
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
    <style> 
 
     body { 
 
     background-color: #00BFFF; 
 
     } 
 
     div#header { 
 
     width: auto; 
 
     height: 75px; 
 
     background-image: url('banner.gif'); 
 
     } 
 
     h1 { 
 
     color: white; 
 
     text-align: center; 
 
     font-size: 1.8em; 
 
     } 
 
     h3 { 
 
     color: white; 
 
     text-align: center; 
 
     font-size: 1em; 
 
     } 
 
     div#wrapper { 
 
     width: 1200px; 
 
     background-color: #fff; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     } 
 
     h1.head, 
 
     h3.subhead { 
 
     font-family: georgia, serif; 
 
     margin-left; 
 
     20px; 
 
     } 
 
     h1.head { 
 
     font-size; 
 
     2.25em; 
 
     padding-top: 15px; 
 
     } 
 
     h3.subhead { 
 
     margin-top: -20px; 
 
     letter-spacing: 1px; 
 
     } 
 
     ul#navlist li { 
 
     display: inline; 
 
     list-style-type: none; 
 
     padding-right: 30px; 
 
     } 
 
     ul#navlist { 
 
     background-color: #ADFF2F; 
 
     margin-top: .99px; 
 
     margin-bottom: 1.99px; 
 
     } 
 
     ul#navlist a { 
 
     text-decoration: none; 
 
     font-size: 1.5em; 
 
     } 
 
     ul#navlist a:hover { 
 
     color: red; 
 
     } 
 
     div#leftcol { 
 
     float: left; 
 
     width: 180px; 
 
     margin-left: 2px; 
 
     } 
 
     div#maincol { 
 
     float: left; 
 
     width: 500px; 
 
     margin-left: 15px; 
 
     margin-right: 15px; 
 
     text-align: center; 
 
     } 
 
     div#maincol h5 { 
 
     font-size: 85%; 
 
     line-height: 1.25em; 
 
     text-align: center; 
 
     margin-right: 1px; 
 
     font-family: arial, sans-serif; 
 
     } 
 
     div#rightcol { 
 
     width: 180px; 
 
     float: right; 
 
     margin-right: 20epx; 
 
     } 
 
     div#footer { 
 
     background-color: #ADFF2F; 
 
     height: 15px; 
 
     clear: both; 
 
     } 
 
     #home div.smfeature { 
 
     width: 180px; 
 
     height: auto; 
 
     border: thin solid red; 
 
     margin-bottom: 10px; 
 
     } 
 
     #home div.smfeature h4 { 
 
     font-family: arial, sans-serif; 
 
     font-size: 75%; 
 
     color: brown; 
 
     background: #48D1CC; 
 
     text-align: center; 
 
     letter-spacing: 2px; 
 
     padding: .5em; 
 
     margin-top: 0px; 
 
     margin-right: 0px; 
 
     } 
 
     div#searchbox2 { 
 
     background-color: #7B68EE; 
 
     text-align: center; 
 
     } 
 
     div#links { 
 
     width: 150px; 
 
     height: auto; 
 
     text-align: center; 
 
     } 
 
     a { 
 
     text-decoration: none; 
 
     } 
 
     p a:hover { 
 
     color: red; 
 
     } 
 
    </style> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 

 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 

 
    <div id="tabs"> 
 
     <ul id="navlist"> 
 
     <li><a href="#home">Homepage</a> 
 
     </li> 
 

 
     <li><a href="animals.html">Animals</a> 
 
     </li> 
 

 
     <li><a href="Algae.html">Plants</a> 
 
     </li> 
 

 
     <li><a href="FAQS.html">F.A.Qs</a> 
 
     </li> 
 

 
     <li><a href="ContactUs.html">Contact us</a> 
 
     </li> 
 

 
     </ul> 
 
     <div id="home"> 
 
     <div id="wrapper"> 
 
      <!-- header --> 
 
      <div id="header"> 
 
      <h1 class="head"> Underwater World </h1> 
 
      <h3 class="subhead"> 
 
    \t A New World! 
 
    \t </h3> 
 
      </div> 
 

 

 
      <!-- left column --> 
 
      <div id="leftcol"> 
 

 
      <div class="smfeature"> 
 
       <h4> Who we are. </h4> 
 

 
      </div> 
 

 
      <div class="smfeature">

0

Простой обходной путь будет увеличивать CSS-specifities. Например, я обновил все свойства tab tab в 'html body #tabs> ul [role = tablist]', и теперь он будет уважать ваши новые правила.

$(function() { 
 

 
    $("#tabs").tabs(); 
 

 
    });
body { background-color:#00BFFF;} 
 
\t \t 
 
    html body div#header { width:auto; 
 
\t \t \t height:75px; 
 
\t \t \t background-image:url('banner.gif'); 
 
\t \t } \t 
 
    html body h1{ color:white; 
 
\t \t \t text-align:center; 
 
\t \t \t font-size:1.8em; 
 
\t \t \t 
 
\t \t \t } 
 
    html body h3{ color:white; 
 
\t text-align:center; 
 
\t font-size:1em; 
 
\t \t \t 
 
\t \t \t } 
 
    
 
    html body div#wrapper{width:1200px; 
 
\t \t \t background-color:#fff; 
 
\t \t \t margin-left:auto; 
 
\t \t \t margin-right:auto; 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t } \t 
 
\t \t 
 
    html body h1.head,html body h3.subhead{font-family:georgia,serif; 
 
\t \t \t \t \t margin-left;20px;} 
 
\t \t \t \t \t \t 
 
\t \t \t \t 
 
    \t \t \t \t \t \t 
 
    html body h1.head{font-size;2.25em; 
 
\t \t padding-top:15px; 
 
\t \t 
 
\t } 
 
    html body h3.subhead{ margin-top:-20px; 
 
\t \t \t letter-spacing:1px; 
 
\t \t } 
 
    html body #tabs > ul[role=tablist] li{ display:inline; 
 
\t \t \t list-style-type:none; 
 
\t \t \t padding-right:30px;} 
 
    html body #tabs > ul[role=tablist]{ \t \t \t 
 
\t \t \t background-color:#ADFF2F; 
 
\t \t \t margin-top:.99px; 
 
\t \t \t margin-bottom:1.99px; 
 
\t \t } 
 
    html body #tabs > ul[role=tablist] a{ \t \t \t 
 
\t \t \t text-decoration:none; 
 
\t \t \t font-size:1.5em; 
 
\t \t } \t \t 
 
    html body #tabs > ul[role=tablist] a:hover{ \t color:red; \t \t 
 
\t \t \t 
 
\t \t } \t 
 
\t 
 
    html body div#leftcol{ float:left; 
 
\t \t \t width:180px; 
 
\t \t \t margin-left:2px;} 
 

 

 
    html body div#maincol{float:left; 
 
\t \t width:500px; 
 
\t \t \t margin-left:15px; 
 
\t \t \t margin-right:15px; 
 
\t \t \t text-align:center; 
 
\t \t \t } 
 
    html body div#maincol h5{font-size:85%; 
 
\t \t \t line-height:1.25em; 
 
\t \t \t text-align:center; 
 
\t \t \t margin-right:1px; 
 
\t \t \t font-family:arial, sans-serif; 
 
\t \t \t } 
 
\t \t \t 
 
    html body div#rightcol{ width:180px; 
 
\t \t \t \t float:right; 
 
\t \t \t \t margin-right:20epx; 
 
\t \t \t \t 
 
\t \t \t \t } 
 
    html body div#footer{ background-color:#ADFF2F; 
 
\t \t \t \t \t height:15px; 
 
\t \t \t \t \t clear:both;} 
 
    html body #home div.smfeature{width:180px; 
 
\t \t \t height:auto; 
 
\t \t \t border:thin solid red; 
 
\t \t \t margin-bottom:10px;} 
 
    html body #home div.smfeature h4 { font-family:arial,sans-serif; 
 
\t \t \t \t font-size:75%; 
 
\t \t \t \t color:brown; 
 
\t \t \t \t background:#48D1CC; 
 
\t \t \t \t text-align:center; 
 
\t \t \t \t letter-spacing:2px; 
 
\t \t \t \t padding:.5em; 
 
\t \t \t \t 
 
\t \t \t \t margin-top:0px; 
 
\t \t \t \t margin-right:0px; 
 
\t \t \t \t } 
 
    html body div#searchbox2 { background-color:#7B68EE; 
 
\t \t \t \t \t text-align:center; 
 
\t \t \t \t \t } 
 
    html body div#links { width:150px; 
 
\t \t \t height:auto; 
 
\t \t \t text-align:center; 
 
\t \t \t } 
 
    html body a { text-decoration: none; 
 
\t } \t \t \t \t 
 
    html body p a:hover{ color:red;}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    
 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 

 
<div id="tabs"> 
 

 
    <ul> 
 
    <li><a href="#home">Homepage</a></li> 
 

 
    <li><a href="animals.html">Animals</a></li> 
 

 
    <li><a href="Algae.html">Plants</a></li> 
 

 
    <li><a href="FAQS.html">F.A.Qs</a></li> 
 
\t 
 
\t <li><a href="ContactUs.html">Contact us</a></li> 
 

 
    </ul> 
 
    <div id="home"> 
 
\t <div id="wrapper"> 
 
\t <!-- header --> 
 
\t <div id="header"> 
 
\t <h1 class="head"> Underwater World </h1> 
 
\t <h3 class="subhead"> 
 
\t A New World! 
 
\t </h3> 
 
\t </div> 
 
\t 
 
\t \t 
 
\t <!-- left column --> 
 
\t <div id="leftcol" > 
 
\t 
 
\t <div class="smfeature"> 
 
\t <h4> Who we are. </h4> 
 
\t 
 
\t </div> 
 
\t 
 
\t <div class="smfeature">

Смежные вопросы