[CSS] Nadrzędność i podrzędność class i id

Dla specjalistów Webmastering
#1

Potrzebuję pomocy z szablonem CSS, który właśnie próbuję maksymalnie “odchudzić”. Otóż mam taki fragment kodu:

ul#menu_poziome {background:url(images/menu_poziome_bg.jpg); width:860px; height:33px; margin:0 auto; padding:0 0 0 14px; list-style:none; overflow:hidden;}

ul#menu_poziome li {margin:9px 3px; padding:0 10px; float:left; font-family:Tahoma; font-size:12px; font-weight:bold;}

ul#menu_poziome li a { color:#ffffff;}

ul#menu_poziome li a:hover { color:#f6ff00;}


ul {margin:4px 14px; padding:0; list-style:none;}

li {background:url(images/menu.gif) no-repeat 0 9px; padding:6px 0 6px 14px; margin:0;}

li a{font-size:11px; color:#3dec37; font-weight:bold;}

li a:hover{color:#f6ff00; font-weight:bold;}

Chciałbym, żeby druga część wykonywała się globalnie poza częścią ul#menu_poziome. Da się zrobić coś takiego nie ingerując w podstrony HTML? Gdy tworzyłem tę stronę nie spodziewałem się że się tak rozrośnie i mimo tego że to mało praktyczne każda podstrona ma menu poziome wpisane z ręki i trudno byłoby to teraz poprawiać. Poniżej zamieszczę cały styl css, może ktoś będzie miał jakieś inne propozycje co do odchudzenia. Za wszelkie porady będę bardzo wdzięczny :slight_smile:

* { margin:0; padding:0; }


body {background: #ffffff; margin-left:auto; margin-right:auto; margin:0; font-family: Verdana; font-size:12px; position:relative;}


h1 {margin:8px 18px; padding-bottom:10px; color:#555555; font-size:19px; font-family:Verdana; border-bottom:solid 1px #3dec37; font-weight:bold; text-align:center;}

h2 {margin:8px 16px; color:#555555; font-size:18px; font-family:Verdana; font-weight:bold;}	

h3 {color:#555555; font-size:13px; font-weight:bold; text-align:center; margin:0; padding:9px 0;}

p {padding:6px 20px; text-indent:18px; font-size:13px; color:#555555; margin:0; line-height:20px; text-align:justify;}


a {color:#3dec37; text-decoration: none;}

a:hover {color:#f6ff00;}

a img {border: 0px}


div {font-family: Verdana; font-size:12px; position:relative; margin:0 auto;}


#logo {background:url(images/logo.jpg) no-repeat; width:876px; height:223px;}


ul#menu_poziome {background:url(images/menu_poziome_bg.jpg); width:860px; height:33px; margin:0 auto; padding:0 0 0 14px; list-style:none; overflow:hidden;}

ul#menu_poziome li {margin:9px 3px; padding:0 10px; float:left; font-family:Tahoma; font-size:12px; font-weight:bold;}

ul#menu_poziome li a { color:#ffffff;}

ul#menu_poziome li a:hover { color:#f6ff00;}


#kontener {width:876px; height:auto; overflow: hidden; margin:0 auto; padding:0;}


.menu {background:url(images/sniezynka.jpg) no-repeat #ffffff; margin:8px 0px 8px 8px; padding:0; float:left; height:auto; width:190px; border:solid 1px #3dec37; border-radius: 10px;}

.menu ul {margin:4px 14px; padding:0; list-style:none;}

.menu li {background:url(images/menu.gif) no-repeat 0 9px; padding:6px 0 6px 14px; margin:0;}

.menu li a{font-size:11px; color:#3dec37; font-weight:bold;}

.menu li a:hover{color:#f6ff00; font-weight:bold;}


.menu_index {background: #ffffff; margin:8px 0px 8px 8px; padding:0; float:left; height:auto; width:190px; border:0 }


.menu2 {background: #ffffff; margin:8px 8px 8px 0px; padding:0; float:right; height:auto; width:190px; border:0 }


.menu_plywajace {background:url(images/podklad.jpg) no-repeat #ffffff; background-position: bottom; margin:0; padding:0; float:left; width:190px; height:1100px; border:solid 1px #3dec37; border-radius: 10px;}

.menu_plywajace ul {margin:4px 14px; padding:0; list-style:none;}

.menu_plywajace li {background:url(images/menu.gif) no-repeat 0px 9px; padding:6px 0px 6px 14px; margin:0;}

.menu_plywajace li a {font-size:11px; color:#3dec37; font-weight:bold;}

.menu_plywajace li a:hover{color:#f6ff00; font-weight:bold;}

.menu_plywajace hr {border: 0; width: 200px; height: 2px; background-color: #3dec37;}


.menu_plywajace2 {background:url(images/podklad2.jpg) no-repeat #ffffff; background-position: bottom; margin:0; padding:0; float:left; width:190px; height:1100px; border:solid 1px #3dec37; border-radius: 10px;}

.menu_plywajace2 ul {margin:4px 14px; padding:0; list-style:none;}

.menu_plywajace2 li {background:url(images/menu.gif) no-repeat 0px 9px; padding:6px 0px 6px 14px; margin:0;}

.menu_plywajace2 li a{font-size:11px; color:#3dec37; font-weight:bold;}

.menu_plywajace2 li a:hover{color:#f6ff00; font-weight:bold;}

.menu_plywajace2 hr {border: 0; width: 200px; height: 2px; background-color: #3dec37;}

.menu_plywajace2 a {color:#3dec37; font-weight:bold;}

.menu_plywajace2 a:hover {color:#f6ff00; font-weight:bold;}


.menu_grupy {background:url(images/sniezynka.jpg) no-repeat #ffffff; margin:0; padding:0; float:left; width:190px; height:778px; border:solid 1px #3dec37; border-radius: 10px;}

.menu_grupy ul {margin:4px 14px; padding:0; list-style:none;}

.menu_grupy li {background:url(images/menu.gif) no-repeat 0px 9px; padding:6px 0px 6px 14px; margin:0;}

.menu_grupy li a{font-size:11px; color:#3dec37; font-weight:bold;}

.menu_grupy li a:hover{color:#f6ff00; font-weight:bold;}


.tresc3 {margin:8px; background:url(images/podklad3.jpg) no-repeat #ffffff; background-position: bottom; float:right; height:auto; width:461px; border:solid 1px #3dec37; border-radius: 10px;}

.tresc3 a {color:#3dec37; font-weight:bold;}

.tresc3 a:hover {color:#f6ff00; font-weight:bold;}

.tresc3 img {vertical-align: middle; padding:8px;}


.tresc {margin:8px; background:#ffffff; float:right; height:auto; width:658px; border:solid 1px #3dec37; border-radius: 10px;}

.tresc hr {border: 0; width: 658px; height: 1px; background-color: #3dec37;}

.tresc img {padding:0px 8px;}


.galeria {margin:8px; background:#ffffff;	float:right; height:auto; width:658px; border:solid 1px #3dec37; border-radius: 10px;}

.galeria h2 {margin:8px 18px; padding-bottom:10px; color:#555555; font-size:18px; font-family:Verdana; border-bottom:solid 1px #3dec37; font-weight:bold; text-align:center;}

.galeria a img {border: 3px solid #0066FF;; vertical-align: middle;}

.galeria a:hover img {border: 3px solid #0000FF; vertical-align: middle;}


.tresc2 {margin:8px; background:#ffffff;	float:right; height:auto; width:858px; border:solid 1px #3dec37; border-radius: 10px;}


#stopka {background:url(images/stopka.jpg) no-repeat #ffffff; width:876px; height:40px; clear:both;}

#copyright {color:#ffffff; font-size:9px; padding-top:8px; text-align:center;}

#design {float:right; color:#3dec37; font-size:9px; margin-right:17px;}


#tabela {border: 1px solid black; border-collapse: collapse; background-color: #ffffff;}

#tabela td {border: 1px solid black; padding: 3px;}

tr.gora {background-color: #3dec37; vertical-align: top; font-weight: bold; color: #ffffff; padding: 3px;}

td.t1 a {background-color: #f73a3a; vertical-align: top; font-weight: bold; color: #ffffff;}

td.t2 a {background-color: #7CFC00; vertical-align: top; font-weight: bold; color: #ffffff;}

td.t3 a {background-color: #000080; vertical-align: top; font-weight: bold; color: #ffffff;}

td.t4 a {background-color: #FFA500; vertical-align: top; font-weight: bold; color: #ffffff;}



.pics { 

   /* wartoÂści te powinny by䟣onajmniej takie jak rozmiary zdj뤠*/

   height: 600px; /* szerokoÂś䟥lementu HTML gdzie osadzone sÄ… zdj颩a */

   width: 800px; /* wysykoÂś䟥lementu HTML gdzie osadzone sÄ… zdj颩a */

   padding: 0; 

   margin: 0; 

} 


.pics img { 

   padding: 0px; 

   border: 0px; 

   /* rozmiary zdj뤠*/

   width: 120px; /* szerokoÂś䟷yÂświetlanych zdj뤠*/

   height: 160px; /* wysokoÂś䟷yÂświetlanych zdj뤠*/

   top: 0; 

   left: 0 

}
#2

Daj też html (trzeba znać strukturę by skracać :P)

#3

A na chwilę obecną, pierwszy z brzegu przykład:

Po “staremu”

.menu_index {background: #ffffff; margin:8px 0px 8px 8px; padding:0; float:left; height:auto; width:190px; border:0 }


.menu2 {background: #ffffff; margin:8px 8px 8px 0px; padding:0; float:right; height:auto; width:190px; border:0 }

Po “nowemu”

.menu_index, .menu2 {background: #ffffff; padding:0; height:auto; width:190px; border:0;}

.menu_index {margin:8px 0px 8px 8px; float:left;}

.menu2 {margin:8px 8px 8px 0px; float:right;}

W taki sposób pozbyto się 5-ciu dubli z wycinka kodu i pewnie tym sposobem odchudziłbyś tego css’a o jakieś 15-20% łącząc własności elementów powtarzające się najczęściej. Potem jeszcze pozbyć się białych znaków (przed tym zrób kopię, bo plik css po tym będzie jednowierszowy i niezbyt czytelny) i na serwer :wink: PS. Kolejny (na pierwszy rzut oka) wycinek do zmiany:

tr.gora {background-color: #3dec37; vertical-align: top; font-weight: bold; color: #ffffff; padding: 3px;}

td.t1 a {background-color: #f73a3a; vertical-align: top; font-weight: bold; color: #ffffff;}

td.t2 a {background-color: #7CFC00; vertical-align: top; font-weight: bold; color: #ffffff;}

td.t3 a {background-color: #000080; vertical-align: top; font-weight: bold; color: #ffffff;}

td.t4 a {background-color: #FFA500; vertical-align: top; font-weight: bold; color: #ffffff;}

Po:

tr.gora, td.t1 a, td.t2 a, td.t3 a, td.t4 a {vertical-align: top; font-weight: bold; color: #ffffff;}

tr.gora {background-color: #3dec37; padding: 3px;}

td.t1 a {background-color: #f73a3a;}

td.t2 a {background-color: #7CFC00;}

td.t3 a {background-color: #000080;}

td.t4 a {background-color: #FFA500;}

W sumie taki sposób nie uwali się struktury :wink:

#4
#5

Oj tam od razu idiotą, tak bywa, jak się robi edycję przyrostową i co jakiś czas dopisuje się coś nowego :wink:

Kod uszczuplił się o ponad 1,6KB i stracił 1670 znaków…

Co było niepotrzebne: margin i padding równy zeru, jest określony dla ogółu (jeśli nie określisz zmiany dla danego elementu), więc nie jest potrzebne jego powielanie. Podobnie z fontem “Veranda”, określiłeś go w body, więc wszystko co w nim siedzi, przyjmuje ten font, chyba że dla jakiegoś elementu “wyszczególnisz” inny, jak to zrobiłeś z “Tahoma”…

* {margin:0; padding:0;}

body {background: #fff; font-family:Verdana; font-size:12px; position:relative;}

h1 {margin:8px 18px; padding-bottom:10px; color:#555; font-size:19px; border-bottom:solid 1px #3dec37; font-weight:bold; text-align:center;}

h2 {margin:8px 16px; color:#555; font-size:18px; font-weight:bold;}   

h3 {color:#555; font-size:13px; font-weight:bold; text-align:center; padding:9px 0;}

p {padding:6px 20px; text-indent:18px; font-size:13px; color:#555; line-height:20px; text-align:justify;}

a {color:#3dec37; text-decoration:none;}

a:hover {color:#f6ff00;}

a img {border:0;}

div {font-size:12px; position:relative; margin:0 auto;}


#logo {background:url(images/logo.jpg) no-repeat; width:876px; height:223px;}


ul#menu_poziome {background:url(images/menu_poziome_bg.jpg); width:860px; height:33px; margin:0 auto; padding-left: 14px; list-style:none; overflow:hidden;}

ul#menu_poziome li {margin:9px 3px; padding:0 10px; float:left; font-family:Tahoma; font-size:12px; font-weight:bold;}

ul#menu_poziome li a {color:#fff;}

ul#menu_poziome li a:hover {color:#f6ff00;}


#kontener {width:876px; height:auto; overflow: hidden;}


.menu_index, .menu {margin:8px 0px 8px 8px; float:left;}

.menu_index, .menu, .menu2 {height:auto; width:190px;}

.menu_index, .menu2 {background: #fff; border:0;}

.menu {background:#fff url(images/sniezynka.jpg) no-repeat; border:solid 1px #3dec37; border-radius:10px;}

.menu ul {margin:4px 14px; list-style:none;}

.menu li {background:url(images/menu.gif) no-repeat 0 9px; padding:6px 0 6px 14px;}

.menu li a{font-size:11px; color:#3dec37; font-weight:bold;}

.menu2 {margin:8px 8px 8px 0px; float:right;}


.menu_plywajace, .menu_plywajace2, .menu_grupy {float:left; width:190px; border:solid 1px #3dec37; border-radius:10px;}

.menu_plywajace, .menu_plywajace2 {height:1100px;}

.menu_plywajace {background:#fff url(images/podklad.jpg) no-repeat bottom;}

.menu_plywajace ul, .menu_plywajace2 ul {margin:4px 14px; list-style:none;}

.menu_plywajace li, .menu_plywajace2 li {background:url(images/menu.gif) no-repeat 0px 9px; padding:6px 0px 6px 14px;}

.menu_plywajace li a, .menu_plywajace2 li a {font-size:11px;}

.menu_plywajace li a, .menu_plywajace2 li a, .menu_plywajace2 a {color:#3dec37; font-weight:bold;}

.menu_plywajace hr, .menu_plywajace2 hr {border:0; width:200px; height:2px; background-color:#3dec37;}


.menu_plywajace2 {background:#fff url(images/podklad2.jpg) no-repeat bottom;}


.menu_grupy {background:url(images/sniezynka.jpg) no-repeat #fff; height:778px;}

.menu_grupy ul {margin:4px 14px; list-style:none;}

.menu_grupy li {background:url(images/menu.gif) no-repeat 0px 9px; padding:6px 0px 6px 14px;}

.menu_grupy li a{font-size:11px; color:#3dec37; font-weight:bold;}


.menu li a:hover, .menu_plywajace li a:hover, .menu_plywajace2 li a:hover, .menu_plywajace2 a:hover, .menu_grupy li a:hover {color:#f6ff00; font-weight:bold;}


.tresc, .tresc2, .tresc3, .galeria {margin:8px; float:right; height:auto; border:solid 1px #3dec37; border-radius:10px;}

.tresc, .tresc2, .galeria {background:#fff;}

.tresc {width:658px;}

.tresc hr {border:0; width:658px; height:1px; background-color:#3dec37;}

.tresc img {padding:0px 8px;}


.tresc2 {width:858px;}


.tresc3 {background: #fff url(images/podklad3.jpg) no-repeat bottom; width:461px;}

.tresc3 a {color:#3dec37; font-weight:bold;}

.tresc3 a:hover {color:#f6ff00; font-weight:bold;}

.tresc3 img {vertical-align:middle; padding:8px;}


.galeria {width:658px;}

.galeria h2 {margin:8px 18px; padding-bottom:10px; color:#555; font-size:18px; border-bottom:solid 1px #3dec37; font-weight:bold; text-align:center;}

.galeria a img {border:3px solid #0066FF; vertical-align:middle;}

.galeria a:hover img {border: 3px solid #0000FF; vertical-align:middle;}


#stopka {background:url(images/stopka.jpg) no-repeat #fff; width:876px; height:40px; clear:both;}

#copyright {color:#fff; font-size:9px; padding-top:8px; text-align:center;}

#design {float:right; color:#3dec37; font-size:9px; margin-right:17px;}


#tabela {border:1px solid black; border-collapse:collapse; background-color:#fff;}

#tabela td {border:1px solid black; padding:3px;}


tr.gora, td.t1 a, td.t2 a, td.t3 a, td.t4 a {vertical-align:top; font-weight:bold; color:#fff;}

tr.gora {background-color:#3dec37; padding:3px;}

td.t1 a {background-color:#f73a3a;}

td.t2 a {background-color #7CFC00;}

td.t3 a {background-color:#000080;}

td.t4 a {background-color:#FFA500;}


.pics {

   /*rozmiar elementu HTML osadzonych zdjęć, wartości równe ich rozmiarom*/

   height:600px; /*szerokość*/

   width:800px; /*wysokość*/

}


.pics img {

   border:0px;

   /*rozmiar zdjęć*/

   width:120px; /*szerokość*/

   height:160px; /*wysokość*/

   top:0;

   left:0;

}

Wersja hardcorowa :wink: (-2226 znaków, mniejszy o 2,18KB)

*{margin:0;padding:0;}body{background: #fff;font-family:Verdana;font-size:12px;position:relative;}h1{margin:8px 18px;padding-bottom:10px;color:#555;font-size:19px;border-bottom:solid 1px #3dec37;font-weight:bold;text-align:center;}h2{margin:8px 16px;color:#555;font-size:18px;font-weight:bold;}h3{color:#555;font-size:13px;font-weight:bold;text-align:center;padding:9px 0;}p{padding:6px 20px;text-indent:18px;font-size:13px;color:#555;line-height:20px;text-align:justify;}a{color:#3dec37;text-decoration:none;}a:hover color:#f6ff00;}a img{border:0;}div{font-size:12px;position:relative;margin:0 auto;}#logo{background:url(images/logo.jpg) no-repeat;width:876px;height:223px;}ul#menu_poziome{background:url(images/menu_poziome_bg.jpg);width:860px;height:33px;margin:0 auto;padding-left:14px;list-style:none;overflow:hidden;}ul#menu_poziome li{margin:9px 3px;padding:0 10px;float:left;font-family:Tahoma;font-size:12px;font-weight:bold;}ul#menu_poziome li a{color:#fff;}ul#menu_poziome li a:hover{color:#f6ff00;}#kontener{width:876px;height:auto;overflow: hidden;}.menu_index, .menu{margin:8px 0px 8px 8px;float:left;}.menu_index, .menu,.menu2{height:auto; width:190px;}.menu_index, .menu2{background: #fff;border:0;}.menu{background:#fff url(images/sniezynka.jpg) no-repeat;border:solid 1px #3dec37;border-radius:10px;}.menu ul{margin:4px 14px;list-style:none;}.menu li{background:url(images/menu.gif) no-repeat 0 9px;padding:6px 0 6px 14px;}.menu li a{font-size:11px;color:#3dec37;font-weight:bold;}.menu2{margin:8px 8px 8px 0px;float:right;}.menu_plywajace,.menu_plywajace2,.menu_grupy{float:left;width:190px;border:solid 1px #3dec37;border-radius:10px;}.menu_plywajace,.menu_plywajace2{height:1100px;}.menu_plywajace{background:#fff url(images/podklad.jpg) no-repeat bottom;}.menu_plywajace ul,.menu_plywajace2 ul{margin:4px 14px; list-style:none;}.menu_plywajace li,.menu_plywajace2 li{background:url(images/menu.gif) no-repeat 0px 9px;padding:6px 0px 6px 14px;}.menu_plywajace li a,.menu_plywajace2 li a{font-size:11px;}.menu_plywajace li a,.menu_plywajace2 li a,.menu_plywajace2 a{color:#3dec37;font-weight:bold;}.menu_plywajace hr,.menu_plywajace2 hr{border:0;width:200px;height:2px;background-color:#3dec37;}.menu_plywajace2{background:#fff url(images/podklad2.jpg) no-repeat bottom;}.menu_grupy{background:url(images/sniezynka.jpg) no-repeat #fff;height:778px;}.menu_grupy ul{margin:4px 14px;list-style:none;}.menu_grupy li{background:url(images/menu.gif) no-repeat 0px 9px;padding:6px 0px 6px 14px;}.menu_grupy li a{font-size:11px;color:#3dec37;font-weight:bold;}.menu li a:hover,.menu_plywajace li a:hover,.menu_plywajace2 li a:hover,.menu_plywajace2 a:hover,.menu_grupy li a:hover{color:#f6ff00;font-weight:bold;}.tresc,.tresc2,.tresc3,.galeria{margin:8px;float:right;height:auto;border:solid 1px #3dec37;border-radius:10px;}.tresc,.tresc2,.galeria{background:#fff;}.tresc{width:658px;}.tresc hr{border:0;width:658px;height:1px;background-color:#3dec37;}.tresc img{padding:0px 8px;}.tresc2{width:858px;}.tresc3{background: #fff url(images/podklad3.jpg) no-repeat bottom; width:461px;}.tresc3 a{color:#3dec37;font-weight:bold;}.tresc3 a:hover{color:#f6ff00;font-weight:bold;}.tresc3 img{vertical-align:middle;padding:8px;}.galeria{width:658px;}.galeria h2{margin:8px 18px;padding-bottom:10px;color:#555;font-size:18px;border-bottom:solid 1px #3dec37;font-weight:bold;text-align:center;}.galeria a img{border:3px solid #0066FF;vertical-align:middle;}.galeria a:hover img{border:3px solid #0000FF;vertical-align:middle;}#stopka{background:url(images/stopka.jpg) no-repeat #fff;width:876px;height:40px;clear:both;}#copyright{color:#fff;font-size:9px;padding-top:8px;text-align:center;}#design{float:right;color:#3dec37;font-size:9px;margin-right:17px;}#tabela{border:1px solid black;border-collapse:collapse;background-color:#fff;}#tabela td{border:1px solid black;padding:3px;}tr.gora,td.t1 a,td.t2 a,td.t3 a,td.t4 a{vertical-align:top;font-weight:bold;color:#fff;}tr.gora{background-color:#3dec37;padding:3px;}td.t1 a{background-color:#f73a3a;}td.t2 a{background-color #7CFC00;}td.t3 a{background-color:#000080;}td.t4 a{background-color:#FFA500;}.pics{height:600px;width:800px;}.pics img{border:0px;width:120px;height:160px;top:0;left:0;}
#6

Super :slight_smile: Dzięki bardzo. Bardzo ułatwiłeś mi pracę bo niedługo będę zmieniał cały wygląd strony - od szerokości po kolorystykę i poszczególne elementy. Dzięki temu uszczupleniu kodu będzie zdecydowanie mniej pisania, zmieniania kolorów itd. :slight_smile: Jestem bardzo wdzięczny :slight_smile: