9 svar · 811 visningar · startad av Jester73
Hej
Har lite frågor kring CSS som säkert är av newbie karaktär.
1. Finns det någon hierarki hur du lägger upp elementen i CSS filen?
Exempel om jag använder table.namn1 th.namn1 eller tr.namn1 i samma tabell. Fungerar det, eller måste de ha samma namn?
2. Spelar det någon roll i vilken ordning class elementen kommer i CSS filen?
3. Skall man lägga allt i samma CSS fil eller dela upp på flera beroende på sidan som laddas?
Tack på förhand!
Mvh
J
1. Du bör undvika att ha för många CSS filer, det ge dig ett extra HTTP anrop mot servern och du vill göra så få anrop mot servern som möjligt. Jag förstå inte riktigt vad du menar med att klassnamn på olika element selektorer, om du vill sätta en specifik stil på alla th i en tabell med klassen namn1 så gör det hellre:
<table class="namn1">
<tr>
<th>Namn</th>
</tr>
<tr>
<td>Namn</td>
</tr>
</table>
än:
<table>
<tr>
<th class="namn1">Namn</th>
</tr>
<tr>
<td class="namn1">Namn</td>
</tr>
</table>
hitta den minsta gemensamma nämnaren i ett block och utgå ifrån den (inget av båda exemplen är direkta fel, men jag det är så jag tänker)
CSS koden för ovanstånde kod hade sett ut något i stil med:
.namn1 th {}
.namn1 td {}
om jag hade gjort det
Det finns verktyg som SASS och LESS som kan ge dig en fil struktur+objekt struktur och i många fall underlättar arbetet med CSS kod i större projekt(eller med flera personer i projektet)
2. Ja, det spelar roll om du ha:
.namn1 { color: #fff; }
.namn1 { color: #f00; }
i din CSS fil så kommer .namn1 inte få en vit text utan en röd, ju längre ner i din CSS desto högre kommer den, men om du menar med om du måste ha h1 överst och table längre ner i din CSS så är svaret nej, det spelar ingen roll, sätt den struktur du kan förstå dig på.
3. se svar 1.
Tack för info! Som du skriver så försöker jag också hitta minsta gemensamma nämnare och utgå därifrån men jag är rudis på CSS :)
Är .namn1 th {} lika som th.namn1 {}?
table.Main {
width:80%;
margin-left:10%;
margin-right:10%;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-collapse:collapse;
}
th.Mainhead {
font-family: Calibri;
font-size: 28px;
font-weight: none;
text-align:center;
color: blue;
-epub-text-transform: uppercase;
text-transform: uppercase;
}
td.Mainmenu {
background-color:red;
text-align:center;
}
td.Mainbread {
font-family: Calibri;
text-align:left;
font-size: 10px;
font-weight: none;
color: blue;
}
td.MainContent {
text-align:center;
}
Så här har jag lagt upp min CSS och i exemplet ovan så är allt detta till en och samma tabell. Allt utom den sista td taggen fungerar. Den vill inte placera tabellen som ligger i den rutan, i mitten och jag kan för mitt liv inte se vad som är fel.
Är .namn1 th {} lika som th.namn1 {}?
nej .namn1 th är att föräldern till th skall ha en css klass med namnet namn1 medans th.namn1 så är det th som skall ha klassen namn1
du få posta din HTML för att svara på frågan varför td.MainContent inte fungera, men jag vill bara varna lite med att blanda stora och små bokstäver, det är rätt petigt med det.
sen:
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-collapse:collapse;
är rätt onödigt du har 0 px på borden, då behöver du inte sätta en style på den och om alla sidor skall vara lika så räcker det med att du skriver:
border: 0px solid
men i ditt fall räcker det med:
border: 0
Alrighty.
Skall tänka på det med stor bokstav.
Tänkte på det om border också men jag har inte hackat den koden själv, utan klippt ut koden från en WYSIWYG editor. Skall ändra enligt ditt förslag. :)
Så här ser HTML koden ut
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html><html lang="sv-se" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Lista kunder</title>
<meta name="author" content="Gavatum KB" />
<meta name="description" content="Webbaserat administrationssystem för redovisningsbyrå" />
<meta name="keywords" content="redovisningsbyrå, kundregister, administration" />
<link rel="stylesheet" href="soladmin.css" type="text/css">
</head>
<body class="grund">
<table class="Main">
<tbody>
<tr>
<th class="Mainhead">
Solbo Redovisningsbyrå Admin
</th>
</tr>
<tr>
<td class="Mainmenu">
<a href="customers.php" class="menu">Kunder</a> - <a href="users.php" class="menu">Användare</a> - <a href="material.php" class="menu">Löpande bokföring</a>
</td>
</tr>
<tr>
<td class="Mainbread">
Bröd
</td>
</tr>
<tr>
<td class="MainContent">
<table class="list" name="lstCustomers" style="width: 900px;">
<tbody>
<tr>
<th class="listhead" colspan="2">Kunder
</th>
</tr>
<tr>
<td style="width: px; text-align: center; vertical-align: middle;"
colspan="2"><A href="customers.php?action=2" class="menu">Ny Kund</A> Tillbaka<br />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
den gör rätt, den centrera texter vilket är rätt.
om du nu vill centrera texten "kunder" i ditt exempel så
table .list
(tabell som har ett barn med klassen list
Sen att köra tabeller i tabeller (speciellt med din layout nu) känns så onödigt och gammalt, finns ju ingen anledning som helst att skapa så många element på din sida för att presentera innehållet på det sätt du gör just nu.
Förstår nog inte ditt svar. Vanlig text som jag skriver in centreras det är bara tabellen Kunder m.m som inte gör det. Är det i table.list som jag skall sätta center?
Har hållit på med HTML ganska länge i olika omgångar. Det var poppis med tabeller i tabeller sist jag dök in i denna världen :) Men det verkar ju onekligen spöka till det med CSS filen.
Mindre antal tabeller eller skippa dem helt?
miss av mig, postade inte koden:
table .list{ margin: 0 auto}
en tabell är inte en text det är ett block.
Du gör ju som du själv vill med din egna markup men med den kod och css du har postat så ser jag inte direkt någon anledning att köra tabeller just nu.
Skall se hur jag skall minska ned på tabellanvändandet :)
Det behöver du inte för min skull ;) men jag gillar att använda tabeller när man skall presentera data, design kan man göra med div:ar ;)