Jump to content

Fiksais jautājums par CSS

0xDEAD BEEF

0xDEAD BEEF,
in Programmēšana

 Share

Recommended Posts

0xDEAD BEEF

0xDEAD BEEF

Ierakstīts
Ierakstīts

Sveiki!

Esmu mazliet iebraucis CSSā. (conter strike source! :p ). Manta forša, bet šis tas vel nav skaidrs!

Ko īsti nozīmē, kad raksta 

.my_class
{
}

 

Kāds ir scope tam my_class?

 

Es pagaidām tikai močiju ar <div class= .. , bet problēma tāda, ka CSS fails vienkārši pārkraujas ar manām klasēm! Galvenā fīča man patīk tā, ka ar tiem <div ..> es varu sadalīt ekrānu blokos!

 

Jautājums galvenais ir tāds - vai es varu rakstīt kaut kā tā CSS, lai būtu apmēram tā -

.uber_div

{

}

.row

{

}

 

, bet lai row attiecas tikai uz uber_div? Lai nebūtu tāk, ka ir vel kāds cits div (nu tur FAQ div) un tur arī es gribu row, bet te man jāsāk izdomāt visādi perversi vārdi..

 

Beefs

Link to comment
Share on other sites
cLOWN

cLOWN

(labots) 

<div class="uber_div">
 <p>Man garšo pankūkas</p>
</div>

 

Ja vēlies padarīt tekstu sarkanu, kas atrodas iekš .uber_div (piemērs tikai):

 

.uber_div p {
 color:red;
}

 

Un ja būs šāda situācija:

 

<div class="mega_div">
 <p>Man garšo zemenes</p>
</div>

 

Tad teksts nebūs sarkans.

 

Tas ir tikai piemērs.

 

Ceru, ka es pareizi sapratu, ko tu vēlies :) Un ir arī tāda lieta kā <div id="uber_div">

Labots - cLOWN
Link to comment
Share on other sites
aaaa

aaaa

Ja gribi kaut tā precizēt, tad var visādas izvirtības veikt.

Piemēram

#blabla span.test{color:red;}

#blabla a.test{color:red;}

.test{color:yellow;}

a.test{color:green;}

 

<span class="test">bbbb</a>

<a href="#" class="test">aaaa</a>

<div id="blabla">

<span class="test">bbbb</a>

<a href="#" class="test">aaaa</a>

</div>

 

Faktiski, jo precīzāk tu norādi, jo augstāka prioritāte tam stilam.

Link to comment
Share on other sites
0xDEAD BEEF

0xDEAD BEEF

  • Author
(labots)

Es jau vairs nesaprotu, ko tu tur uzrakstiji! laugh.gif

Kas ir #? Un kas ir id? smile3.gif

Un ar ko span atskiras no div?

 

edit: un ja es gribu mainit tabulai kaut ka parametrus, ka atrodas ieksh uber_div? A es varu mainit 1mo un otro td, vai ta gan nevar darit?

Beefs

Labots - 0xDEAD BEEF
Link to comment
Share on other sites
cLOWN

cLOWN

Hmm - varbūt iesākumā palasi html un css pamatus? :D

 

css'ā ar # apzīmē id:

 

<style type="text/css">
#mans_div { display:none; }
</style>

<div id="mans_div">Šams teksts nebūs redzams</div>

 

katram id visā "kodā" jābūt unikālam, tāpat kā primārā atslēga datu bāzēs.

 

span ir inline elements un div ir block elements - display:block vai display:inline

 

Ja tu tabulai pirmajam un/vai otrajam td iedod kādu klasi, id, tad jā.

 

<style>
.uber_div .test {
 font-size:8pt;
}
</style>

<div class="uber_div">
 <table>
   <tr>
     <td class="test">Šis ir mazs</td>
     <td>Šis ir liels</td>
   </tr>
   <tr>
     <td class="test">Šis ir mazs</td>
     <td>Šis ir liels</td>
   </tr>
 </table>
</div>

Link to comment
Share on other sites
aaaa

aaaa

Nu par span un div atšķirībā nedomā, tas tik tāds piemērs. Bet # iekš css atbilst id html kodā, tāpat kā . klasei.

Ja vēl aizmirsu piebilst, ka var rakstīt a#id_nosaukums, tb likt tagus priekšā.

Bet tajā piemērā mēģināju parādīt, ka lai arī visiem klases ir vienādas, pēc css definējuma, katrs teksts būs savādākā krāsā.

 

#blabla .test{color:red;}

#blabla a.test{color:blue;}

.test{color:yellow;}

a.test{color:green;}

 

<span class="test">šis būs dzeltens, jo atbilst definējumam - .test{color:yellow;}</a>

<a href="#" class="test">te būs zaļš, lai gan arī atbilst dzeltenajam definējumam, bet ar lielāku prioritāti ir šis - a.test{color:green;}</a>

<div id="blabla">

<span class="test">te sarkans, jo lai arī atbilst dzeltenajam, ar leilāku prioritāti ir šis, tāpēc, ka norādīts arī id kurā tas atrodas - #blabla .test{color:red;}</span>

<a href="#" class="test">te zils, jo lai gan atbilst visiem iepriekšējiem, ar lielāko prioritāti ir tomēr šis, kas visus iepriekšējos pārraksta - #blabla a.test{color:blue;}</a>

</div>

Link to comment
Share on other sites
0xDEAD BEEF

0xDEAD BEEF

  • Author

OK.

Tad taja piemera ar #, vai es varu ari rakstiit .uber_div.row{..}.

 

Ko nozime punkts uber_div prieksha?

 

Vai ir kada ipasha kvalitativa atskiriba starp id un name lietoshanu?

 

Vai var kaut ka nerakstit visiem uber_div .uber_div.row, .uber_div.frame, bet kaut ka isak?

 

Vai tabulai visiem <td> jaliek klase, vai ari var kaut ka isak?

 

Vai pashu tabulu nevar ar css ietekmet tas izskatt?

Beefs

Link to comment
Share on other sites
cLOWN

cLOWN

Visu var ietekmēt ar css, arī tabulu:

 

table {
 background-color:black;
 color:white;
}

t

tāpat ar td un tr. Ja gribi kādu no tiem īpaši izcelt, tad lieto klases un id.

 

Un ja tu gribi secību tad nevis .uber_div.row bet gan .uber_div .row (ar atstarpi)

Link to comment
Share on other sites
0xDEAD BEEF

0xDEAD BEEF

  • Author
(labots)

Kapec table neliek prieksa punktu?

 

OO!

Tiku tik talu! Strada feini!

.checkout_form table{

color:Red;

}

.checkout_form table td{

color:Green;

}

 

Man ir vel paris jautajumi!!! :)

 

Tagad, skatos, vairak tabulas neizmanto ka agrak! Nakushi klat kaut kadi ui itemi un loti daudz ko karto vienkarshi ar css float. Kur ideja un ka pareizak izkartot lietas? Kas notika ar tabulam?

Beefs

Labots - paulis
nevajadzīgs citāts
Link to comment
Share on other sites
Vilx-

Vilx-

(labots)

Trijos vārdos:

 

Tie blociņi, kurus Tu raksti CSS failā, tiek saukti par "likumiem" (rules). Katram likumam sākumā ir "selektors" (selector), kas apzīmē to, uz kuriem elementiem tas attieksies. Kad browseris grib uzzīmēt kādu elementu (piem. to Tavu <div>), viņš iet pēc kārtas cauri visiem likumiem, un meklē, kuri attiecas uz konkrēto elementu. Kā kādu atrod, tā uzliek elementam attiecīgo stilu.

 

Selektoros vari izmantot šādas konstrukcijas:

  • abc - atbildīs visi elementi ar tagu "abc". T.i. visi <abc> tagi.
  • #abc - atbildīs visi elementi ar ID="abc". Taču, tā kā ID ir jābūt unikālam, tad principā šis likums attiecas tikai uz vienu konkrētu elementu.
  • .abc - atbildīs visiem elementiem, kuriem class="abc";
  • abc.def - kombinācija starp abiem augstāk minētajiem. T.i. visi <abc class="def"> elementi.
  • abc.def.ghi - atbilst <abc class="def ghi">. Jā, vienam elementam var piešķirt vairākas klases, un tad uz to darbosies visi attiecīgie selektori. ;)

Tālāk ir iespējas kombinēt (šeit abc, def, utt apzīmēs gatavus selektorus iz pirmā saraksta):

  • abc def - atbildīs visi elementi, kas atbilst selektoram def, un ir zem elementa, kas atblst ar selektoram abc. Piefiksē, ka šiem elementiem nav jābūt vienam zem otra, bet gan var būt vairāki pa vidu. Piemēram, selektoram table.abc div#def atbildīs šis <div> elements: <table class="abc"><tr><td><div id="def">.

Un šādus ar atstarpi atdalītus selektorus var vēl kombinēt savā starpā:

  • abc, def - atbildīs gan abc, gan def selektori. T.i. lai nav jāatkārtojās rakstot vienu un to pašu, vari vienus un tos pašus likumus piešķirt uzreiz vairākiem selektoriem.
  • abc > def - tas pats, kas abc def, bet abc ir jābūt uzreiz virs def. Uzmanies - šis nestrādā uz IE6 un jaunākiem.

Ir arī vēl selektori, bet iesākumam pietiks ar šito. Vairāk vari palasīties oficiālajā specifikācijā.

Labots - Vilx-
Link to comment
Share on other sites
0xDEAD BEEF

0xDEAD BEEF

  • Author

Labi! Apmeram daros un vairak vai mazak, bet viss sanak!

Vel tik tads jautajums - man ir .row {width:100%;}.

 

Ka man uztaisit .buttons{???} ta, lai html <input type="submit".../> atrastos, teiksim, 60% ataluma no kreisas malas ieksha .row. Un varetu tam gala piekabinat vel vienu tadu button?

Beefs

Link to comment
Share on other sites
Vilx-

Vilx-

Īsti nesaprotu, ko Tu gribi panākt, bet varbūt šis der:

 

.row input[type=submit] { left: 60%; }

Link to comment
Share on other sites
0xDEAD BEEF

0xDEAD BEEF

  • Author

Vot shita man nestrada. :(

 

   <div class="row">
    <input type="submit" value="Continue"/>

 

.checkout_form .row
{
min-height:25px;
width:100%;
float:left;
padding-bottom:2px;
text-align:left;
}
.row input[type="submit"]
{left:60%;
}

Beefs

Link to comment
Share on other sites
0xDEAD BEEF

0xDEAD BEEF

  • Author
(labots)

Klau! Vot šitas man nekādi nepielec! Jau cik stundas mudos... sad.gif

Karoče - man ir .row {width:100%;}

 

un tad man ir .row .name, .row .qty un es rakstu <div class="name">Krāsu televīzors</div><div class="qty">100$</div>...

 

Kas man nesanāk ir tas, ka ja es taisu jaunu row un gribu uzreizu sākt ar qty, tad tas lauks man vienmēr nostājas pavisam pa kreisi. Es izmantoju float:left un width:30%. Mēģināju pārslegties uz left:%40, bet tur nekas nesanāk.

 

Kā man uztaisīt tādu klasi, kura atrodas 40% no sākuma row klasē? Nu tā, lai es varētu normāli būvēt tabulu neuztraucoties par secību?

 

Savādāk sākumā jāsprauž tās tukšās kolonas... :/

    <div class="fieldItem"><br/></div>
    <div class="fieldQty"><br/></div>

Beefs

Labots - 0xDEAD BEEF
Link to comment
Share on other sites
japets

japets

Ja vajag tabulu, tad tabulu arī lieto.

Bet vispār jau ar css Tev būs pistne, nebūs viss tik intuitīvi vienmēr un visur, it sevišķi, ja gribēsi, lai smuki rādās uz visiem browseriem.

Link to comment
Share on other sites
Vilx-

Vilx-

Pirmkārt - ja Tev vajag tabulu, tad arī izmanto tabulu! Šitie brēcēji "nē tabulām" bieži vien paši nesaprot, ko runā. Nereti tabula arī ir vienkāršākais un elegantākais veids, kā panākt dažādus izkārtojumus, kur ar CSS būtu tāds spageti, ka tik turies.

 

Otrkārt - davai, uzzīmē mums, ko Tu īsti gribi panākt! Citādi te tāda salmu kulšana vien sanāk. Un - CSS speceni palasīji, vai nē?

Link to comment
Share on other sites
0xDEAD BEEF

0xDEAD BEEF

  • Author
(labots)

Vēlos panākt šito

post-82308-125733555326_thumb.jpg

 

bet nevēlos rakstīt šādi

    <div class="row_underline_dashed"></div>
   <div class="row">
[s] 	<div class="fieldItem"><br/></div>
<div class="fieldQty"><br/></div>[/s]
<div class="fieldAmount">1733.33 USD</div>
   </div>
   <div class="row">
[s] 	<div class="fieldItem"><br/></div>[/s]
<div class="fieldQty">Shipping:</div>
<div class="fieldAmount">103.50 USD</div>
   </div>

 

.order_form .row
{
width:100%;
float:left;
padding-bottom:2px;
text-align:left;
}
.order_form .row .fieldItem
{
padding-left:5%;
color:Black;
font-size:13px;
float:left;
width:40%;
overflow:hide;
text-align:Left;
}
.order_form .row .fieldQty
{
color:Black;
font-size:13px;
width:10%;
float:left;
text-align:right;
}
.order_form .row .fieldAmount
{
color:Black;
font-size:13px;
width:20%;
float:left;
text-align:right;
}

Beefs

Labots - 0xDEAD BEEF
Link to comment
Share on other sites
japets

japets

Tie ir tabulāri dati. Tabulāriem datiem ir domāts table elements!

To arī ir daudz vienkāršāk stilot.

Link to comment
Share on other sites
0xDEAD BEEF

0xDEAD BEEF

  • Author

Nu laikam liku pārāk daudz cerības uz CSS! :)

Tabula, diemžēl, īpaši neatrisina manu problēmu, jo man tāpat būs tukšās kolonas jāaizstāj ar <td></td>.

 

Biju cerējis uz kādu elegantu CSS veidu, kā sadalīt "bloku" kolonās.

Beefs

Link to comment
Share on other sites
Vilx-

Vilx-

A kā tieši Tu to iedomājies? Eku, es darītu aptuveni šitā (konkrētā pieeja var mazliet variēt atkarībā no tā, kas un kā jāģenerē):

<html>
<head>
	<style type="text/css">
		table.order
		{
			border-collapse: separate;
			width: 100%;
		}
		table.order th
		{
			font-weight: normal;
			border-bottom: 1px dashed black;
		}
		table.order th, table.order td
		{
			text-align: right;
		}
		table.order .description
		{
			text-align: left;
			width: 50%;
		}
		table.order .description, table.order .amount
		{
			width: 25%;
		}			
		table.order tr.firstfooter td
		{
			border-top: 1px dashed black;
		}
		table.order tr.lastfooter td
		{
			font-weight: bold;
		}
	</style>
</head>
<body>
	<table class="order">
		<tr>
			<th class="description">Item description</th>
			<th class="quantity">Quantity</th>
			<th class="amount">Amount</th>
		</tr>
		<tr>
			<td class="description">Apple iPhone 3GB 8GB</td>
			<td class="quantity">3 pcs.</td>
			<td class="amount">1500.33 USD</td>
		</tr>
		<tr>
			<td class="description">Nokia N95 Silver</td>
			<td class="quantity">1 pcs.</td>
			<td class="amount">233.00 USD</td>
		</tr>
		<tr class="firstfooter">
			<td colspan="3">1733.33 USD</td>
		</tr>
		<tr>
			<td colspan="2">Shipping:</td>
			<td class="amount">103.50 USD</td>
		</tr>
		<tr class="lastfooter">
			<td colspan="2">Total:</td>
			<td class="amount">1866.83 USD</td>
		</tr>
	</table>
</body>
</html>

Link to comment
Share on other sites
0xDEAD BEEF

0xDEAD BEEF

  • Author
(labots)

CLOSE! pasham bija ljoti rupja kljuuda... :(

Beefs

 

 

Labots - 0xDEAD BEEF
Link to comment
Share on other sites
0xDEAD BEEF

0xDEAD BEEF

  • Author

ne! :D

man bija <?php function darit()

{?>

html kods

<?php echo funckijas vertibas;?>

html kods.

 

}

 

un kad taisiju include, tad ieklavu to dalu, ko nebiju ielicis php tagos un kad izsaucu to funkciju, tad otro dalju drukaja ara un vispar sviests smagi smagais! :D

Beefs

Link to comment
Share on other sites

Izveido kontu, vai pieraksties esošajā, lai komentētu

Jums ir jābūt šī foruma biedram, lai varētu komentēt tēmas

Izveidot jaunu kontu

Piereģistrējies un izveido jaunu kontu, tas būs viegli!

Reģistrēt jaunu kontu

Pierakstīties

Jums jau ir konts? Pierakstieties tajā šeit!

Pierakstīties tagad!
 Share
Iet uz tēmu sarakstu
×
×
  • Izveidot jaunu...