Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Schimbare bec far VW Touran 1T3

Plata impozit PF

Ce parere aveti de viteza/ modul ...

Love Lies Bleeding - 2024
 Cum sterg mails din Promotions

Vanzare cumparare fara transfer b...

Receptie ciudata, in functie de t...

Donez medicamente renale ptr pisica
 Ce componenta e asta si ce ziceti...

Dupa 20 ani de facultate, am uita...

Mobile.de ofera imprumut de bani ...

problema test grila
 Digi24 a disparut de pe TV Lg

Drept de proprietate intelectuala...

Jante noi shitbox

Trinitas TV 4K
 

Pasi in CSS

- - - - -
  • Please log in to reply
55 replies to this topic

#1
n_priceputu

n_priceputu

    Member

  • Grup: Members
  • Posts: 769
  • Înscris: 12.11.2008
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
robbie_ro

robbie_ro

    Active Member

  • Grup: Members
  • Posts: 1,841
  • Înscris: 24.08.2004
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
G1q

G1q

    Active Member

  • Grup: Members
  • Posts: 1,019
  • Înscris: 31.01.2007
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.

 robbie_ro, on 05 iulie 2023 - 09:01, said:

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
sorin147

sorin147

    Senior Member

  • Grup: Senior Members
  • Posts: 6,368
  • Înscris: 11.08.2003
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
n_priceputu

n_priceputu

    Member

  • Grup: Members
  • Posts: 769
  • Înscris: 12.11.2008
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
sorin147

sorin147

    Senior Member

  • Grup: Senior Members
  • Posts: 6,368
  • Înscris: 11.08.2003
cand mai pui cod, vezi in linia de optiuni ca ai niste <>
sau adauga CODE si /CODE intre []

int x = 2

Attached Files



#7
n_priceputu

n_priceputu

    Member

  • Grup: Members
  • Posts: 769
  • Înscris: 12.11.2008
Multumesc pentru pont, ba bucur sa pot invata si la varsta aceasta

#8
G1q

G1q

    Active Member

  • Grup: Members
  • Posts: 1,019
  • Înscris: 31.01.2007
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.


#9
n_priceputu

n_priceputu

    Member

  • Grup: Members
  • Posts: 769
  • Înscris: 12.11.2008
Multumesc pentru sfat si exemplificare

#10
n_priceputu

n_priceputu

    Member

  • Grup: Members
  • Posts: 769
  • Înscris: 12.11.2008
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
G1q

G1q

    Active Member

  • Grup: Members
  • Posts: 1,019
  • Înscris: 31.01.2007
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
n_priceputu

n_priceputu

    Member

  • Grup: Members
  • Posts: 769
  • Înscris: 12.11.2008
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
G1q

G1q

    Active Member

  • Grup: Members
  • Posts: 1,019
  • Înscris: 31.01.2007
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
n_priceputu

n_priceputu

    Member

  • Grup: Members
  • Posts: 769
  • Înscris: 12.11.2008

 G1q, on 06 iulie 2023 - 09:44, said:

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
sorin147

sorin147

    Senior Member

  • Grup: Senior Members
  • Posts: 6,368
  • Înscris: 11.08.2003
Invata-te/reinvata-te sa folosesti clase pentru CSS.Lasa IDul doar pentru cand vrei sa faci ceva deosbit DOAR cu acel element.

#16
G1q

G1q

    Active Member

  • Grup: Members
  • Posts: 1,019
  • Înscris: 31.01.2007

 n_priceputu, on 06 iulie 2023 - 10:55, said:

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.

#17
n_priceputu

n_priceputu

    Member

  • Grup: Members
  • Posts: 769
  • Înscris: 12.11.2008
Multumesc pentru precizari, acum inteleg

#18
n_priceputu

n_priceputu

    Member

  • Grup: Members
  • Posts: 769
  • Înscris: 12.11.2008
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

Chirurgia endoscopică a hipofizei Chirurgia endoscopică a hipofizei

"Standardul de aur" în chirurgia hipofizară îl reprezintă endoscopia transnazală transsfenoidală.

Echipa NeuroHope este antrenată în unul din cele mai mari centre de chirurgie a hipofizei din Europa, Spitalul Foch din Paris, centrul în care a fost introdus pentru prima dată endoscopul în chirurgia transnazală a hipofizei, de către neurochirurgul francez Guiot. Pe lângă tumorile cu origine hipofizară, prin tehnicile endoscopice transnazale pot fi abordate numeroase alte patologii neurochirurgicale.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate