Sign In
Create Account
Back to top
 |
Chirurgia cranio-cerebrală minim invazivă
Tehnicile minim invazive impun utilizarea unei tehnologii ultramoderne. Endoscoapele operatorii de diverse tipuri, microscopul operator dedicat, neuronavigația, neuroelectrofiziologia, tehnicile avansate de anestezie, chirurgia cu pacientul treaz reprezintă armamentarium fără de care neurochirurgia prin "gaura cheii" nu ar fi posibilă. Folosind tehnicile de mai sus, tratăm un spectru larg de patologii cranio-cerebrale. www.neurohope.ro |
Pasi in CSS
Last Updated: Aug 18 2023 09:53, Started by
n_priceputu
, Jul 05 2023 08:42
·
3
3
#1
Posted 05 July 2023 - 08:42
|
Trebuie sa recunosc faptul ca a trecut multa vreme de cand aveam o oarecare indemanare in HTML
De ceva timp mi-a venit ideea nastrusnica de a incerca sa fac un site si am inceput sa cotrobaiesc prin amintiri. Am vazut ca multe s-au schimbat, si ca trebuie sa ai habar de CSS ca sa faci ceva bun Deci, incerc, de unul singur, citind pe ici, pe colo Prima lucrare este cea de mai jos si cuprinde un document salvat index.html si altul salvat styles.css. Ambele sunt in acelasi folder <!DOCTYPE html> <html> <head> <title>foaia principala></title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> /* Mai sus este index.html Mai jos este styles.css */ body { background-color: lightgrey; } h1 { color: blue; } p { color: green; border: 1px solid black; padding: 10px; margin: 30px; } Cand pun indexul in browser (Chrome), imi apare textul din <h1> si <p> dar culorile (fundal lightgrey, text blue si green) nu Fundalul este unul obisnuit, iar textele au culoarea neagra Ce gresesc? Multumiri anticipate pentru atentia acordata |
#2
Posted 05 July 2023 - 09:01
|
Verifica prima data daca este incarcat fisierul css. In DevTools se poate vedea daca se incarca acel fisier.
Iar corect ar fi: <link rel="stylesheet" type="text/css" href="styles.css" /> Edited by robbie_ro, 05 July 2023 - 09:02. |
#3
Posted 05 July 2023 - 09:06
|
Mie imi functioneaza si in chrome si in mozilla. Nu vad nimic in neregula acolo. Incearca sa dai un clear cache in browser (sau poti incerca un CTRL + SHIFT + R in Windows, respectiv CMD + SHIFT + R pe Mac direct in browser pe pagina index.html). Alta varianta ar fi sa dai click dreapta pe pagina in browser -> Inspect -> Selectezi tabul Network -> bifezi Disable cache -> refresh la pagina cu DevTools deschis.
Iar corect ar fi: <link rel="stylesheet" type="text/css" href="styles.css" /> In HTML5 nu mai este necesar acel type="text/css", doar pentru versiunile vechi de HTML pana la 4.01 Edited by G1q, 05 July 2023 - 09:14. |
#4
Posted 05 July 2023 - 10:15
|
Si mie imi merge, exact cu le-ai pus.
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color: green;
border: 1px solid black;
padding: 10px;
margin: 30px;
}
<!DOCTYPE html> <html> <head> <title>foaia principala></title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Attached Files
Edited by sorin147, 05 July 2023 - 10:16. |
#5
Posted 05 July 2023 - 10:42
|
Multumesc pentru raspunsuri si ajutor
Quote <!DOCTYPE html> <html> <head> <title>incercari cu tabel</title> <link rel="stylesheet" href="styletabel.css"> </head> <body> <table> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <br> <table id="t01"> <tr> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html> /* Cel de sus este tabel.html Cel de jos este styletabel.css ambele incarcate in acelasi fisier, dar diferit de celalalt */ /* styletabel */ table { width:100%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color:#fff; } table#t01 th { background-color: black; color: white; } Primul tot nu merge Am incercat un CTRL + SHIFT + R fara rezultat pozitiv Nu stiu sa intru si sa controlez in DevTools daca se face incarcarea Mai pe seara termina serviciul cineva mai priceput, il astept Al doilea exercitiu merge bine insa Culorile se transfera bine, la fel si border. Chiar m-am jucat schimband culorile in tabel si raspunsul a fosr corect Edited by n_priceputu, 05 July 2023 - 10:44. |
#6
Posted 05 July 2023 - 10:50
|
cand mai pui cod, vezi in linia de optiuni ca ai niste <>
sau adauga CODE si /CODE intre [] int x = 2 Attached Files
|
#7
Posted 05 July 2023 - 10:56
|
Multumesc pentru pont, ba bucur sa pot invata si la varsta aceasta
|
#8
Posted 05 July 2023 - 10:59
|
Incearca sa pui si tu codul intre tagurile code ca sa se inteleaga mai bine.
Ca si semantica HTML, un tabel trebuie sa fie de urmatoarea forma si sa includa tagul <thead> pentru capul de tabel si <tbody> pentru continut. Daca ai ceva concluzii din tabel, sau ceva sume pe coloane, etc, le afisezi in <tfoot>. <table> <thead> <tr> <th></th> <th></th> ... </tr> </thead> <tbody> <tr> <td></td> <td></td> .... </tr> </tbody> <tfoot> <tr> <td></td> <td></td> ... </tr> </tfoot> </table> De asemenea, orice table ar trebui sa aiba o mica descriere pe care o pui in interiorul tagului <table> in tagul <caption>. Acesta se poate modicia in CSS astfel:
table caption{
caption-side: bottom; // pentru a afisa descrierea sub tabel
caption-side: top; // pentru a afisa descrierea deasupra tabelului. Asta e si valoarea default
}
Nu e gresit nici cum ai facut tu, dar eu iti zic sa iti intre in obisnuinta si semantica HTML. Edited by G1q, 05 July 2023 - 10:59. |
#10
Posted 05 July 2023 - 18:41
|
Sa presupunem ca in sectiunea <head></head>definesc doua clase si doua identitati
.cl1 , cl2 si #id1 , #id2 Am observat ca <p class="cl1 cl2>text</p> merge bine, valorile se compun/suprapun dar <p id="id1 id2">text</p> nu merge Sau poate ca merge, numai ca am gresit eu ceva? Edited by n_priceputu, 05 July 2023 - 18:53. |
|
#11
Posted 05 July 2023 - 21:41
|
1. Cred cć te referi la secțiunea header, nu head. In header nu poți pune taguri html care sa fie vizibile in pagina.
2. Un element HTML poate avea un singur ID. ID-ul trebuie sa fie unic și doar un element din pagina poate avea acel selector. In cazul in care pui mai multe id-uri unui element, browserele redau stilizarea doar pentru primul ID din lista restul fiind ignorate. |
#12
Posted 06 July 2023 - 09:13
|
Cred ca m-am exprimat gresit
In sectiunea <head></head> din exemplul de mai jos am definit patru identitati diferite Din cate am putut vedea identitatile functioneaza cand sunt asociate si cu <p> si cu <h1> Daca as fi definit si niste clase - sa zicem .cl1 si .cl2 - atunci <p class = " cl1 cl2"> text </p> ar fi afisat textul intr-o combinatie a celor doua clase Nu acelasi lucru se intampla in exemplul de mai jos cu <p id="ident1 ident4">ar trebui scris rosu aliniat centru pe fundal galben</p> Daca ar combina cele doua identitati, ar trebui sa apara un text rosu centru-aliniat pe fundal galben. Dar nu se intampla asta. Impresia mea este ca se aplica ultima identificare, in timp ce cea dinainte - sau ele dinainte daca ar fi mai multe - ar fi anulate/ignorate Asa este sau gresesc eu cu ceva ?
<!DOCTYPE html>
<html>
<head>
<title>folosirea selectorului de identitate ex modificat</title>
<style>
#ident1 {
text-align: center;
color: red;
}
#ident2 {
text-align: center;
color: blue;
}
#ident3 {
text-align: left;
color: green;
}
#ident4 {
background-color: yellow;
}
</style>
</head>
<body>
<p id="ident1">Hello World! - acesta se spune ident1</p>
<p id="ident2">Hello World! - acesta se spune ident2</p>
<p>This paragraph is not affected by the style - nu se supune nimanui</p>
<h1 id='ident3'>Cu identitate de tip 3</h1>
<h1> fara nicio identitate</h1>
<p id="ident4">culoare scris default fundal galben</p>
<p id="ident1 ident4">ar trebui scris rosu aliniat centru pe fundal galben</p>
</body>
</html>
Edited by n_priceputu, 06 July 2023 - 09:26. |
#13
Posted 06 July 2023 - 09:44
|
Cum am zis si mai sus, un element poate avea un singur ID. In versiuni mai vechi de browsere functiona inainte doar primul ID daca ii dadeai mai multe, dar vad ca nu mai functioneaza asa. Acum daca pui mai multe ID-uri unui singur element, nu mai poti stiliza niciunul.
Ca si o buna practica, nu folosesti niciodata ID-uri pentru a stiliza elemente, te folosesti exclusiv de clase si atat. ID-ul se foloseste in general pentru a targeta un anumit element dintr-o pagina prin intermediul Javascript. Poti folosi ID pentru stilizare doar daca este ceva foarte foarte specific sau vrei o specificitate mai mare, de exemplu vrei sa modifici un element stilizat printr-o clasa intr-un CMS (ex. Wordpress) in care nu poti modifica stilizarile default. Atunci ii dai elementului un ID, iar stilizarea id-ului va suprascrie stilizarea clasei. Daca unui element ii dai atat o clasa, cat si un id, apoi stilizezi in CSS clasa respectiva, cat si ID-ul, intotdeauna ID-ul va suprascrie stilizarea clasei => asta se numeste specificitate, cand un selector este mai "important", mai specific decat un alt selector. |
#14
Posted 06 July 2023 - 10:55
|
Cum am zis si mai sus, un element poate avea un singur ID. Nu inteleg prea bine, ce insemneaza ca "un element poate avea un singur ID" Am definit patru ID-uri diferite si trei dintre ele functioneaza pentru elementul <p> Edited by n_priceputu, 06 July 2023 - 10:56. |
#15
Posted 06 July 2023 - 11:27
|
Invata-te/reinvata-te sa folosesti clase pentru CSS.Lasa IDul doar pentru cand vrei sa faci ceva deosbit DOAR cu acel element.
|
|
#16
Posted 06 July 2023 - 12:10
|
Nu inteleg prea bine, ce insemneaza ca "un element poate avea un singur ID" Am definit patru ID-uri diferite si trei dintre ele functioneaza pentru elementul <p> Functioneaza individual. Un element poate avea un singur ID, adica poti pune doar <p id="id1"> si atat. Daca pui cel putin 2 id-uri de genul <p id="id1 id2"> nu mai functioneaza. Bineinteles ca poti pune acelasi ID la mai multe elemente (dar nu e recomandat), dar risti ca anumite browsere sa randeze stilizarea doar pe primul gasit in pagina nu si pentru celelalte. In schimb, un element poate functiona cu mai mult de o clasa, astfel: <p class="clasa1 clasa2 clasa3 ... clasaN">, dar si aici trebuie avut grija ordinea in care sunt scrise in CSS. De exemplu daca ai clasa1 prin care schimbi culoarea textului in rosu, dar ai si clasa2 care schimba culoarea textului in albastru, elementul va avea culoarea textului in functie de ordinea in cascada in fisierul CSS (adica ultima clasa cum te uiti la fisier de sus in jos va suprascrie toate celelelate clase, dar doar pe elementul comun, in cazul de fata culoarea textului. Celelalte proprietati se cumuleaza). Ca sa fiu mai explicit:
.clasa1{
color: red;
background-color: yellow;
}
.clasa2{
color: blue;
}
.clasa3{
color: green;
border: 1px solid #333;
}
Daca un element are toate cele 3 clase, atunci el va fi la final un element cu fundal galben, culoare text verde si border #333 pentru ca: - color din clasa1 este suprascris de color din clasa2, care la randul lui este suprascris de color din clasa3, adica verde; - background-color din clasa1 nu este suprascris de niciuna din celelalte clase, deci ramane galben - border este doar in clasa3 deci nu afecteaza cu nimic stilizarea finala Daca in schimb in fisier inversezi ordinea:
.clasa1{
color: red;
background-color: yellow;
}
.clasa3{
color: green;
border: 1px solid #333;
}
.clasa2{
color: blue;
}
Atunci vei avea la final un element cu background galben, text albastru si border #333. De aici vine si numele de CSS (Cascading Style Sheets), elementele se suprascriu in cascada. |
#18
Posted 09 July 2023 - 15:15
|
Am mai facut cativa pasi, uneori ma mai incurc
<!DOCTYPE html> <html> <head> <style> a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; padding: 18px 29px; text-decoration: underline; } </style> </head> <body> <a href="default.html" target="_blank">Aceasta este o legatura</a> </body> </html> In exemplul de mai sus, nu-mi dau seama de ce linkul nu schimba fundalul in rosu atunci cand stau cu mouse-ul deasupra (hover) Celelalte doua proprietati padding si text-decoration se schimba OBS Cred ca am gasit explicatia Cele doua culori #f44336 si red sunt foarte apropiate si browserul afiseaza cu greu diferenta Dar am schimbal fundalul pentru starea hover in green si merge perfect. Edited by n_priceputu, 09 July 2023 - 15:20. |
Anunturi
▶ 0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
-
- Change Theme
- English
- Mark Community Read
- Termene & conditii
- Confidentialitate
- Consimtamant
- Cookies
- Help
© 2001-2023 Softpedia. All rights reserved. Softpedia® and the Softpedia logo are registered trademarks of SoftNews Net SRL.
Ora implicita a Forumului Softpedia este ora standard a Romaniei (GMT+2). Mai multe informatii →
⚠ Postarile afisate pe Forumul Softpedia reprezinta o opinie subiectiva a membrilor care le-au publicat si nu a SoftNews Net SRL.