Sign In
Create Account
Pasi in CSS
Last Updated: Aug 18 2023 09:53, Started by
n_priceputu
, Jul 05 2023 08:42
·
3
3
#37
Posted 27 July 2023 - 02:57
|
Parcurgand mai departe tutorialul pe care l-a ales am ajuns la Texte cu umbre (efect de umbre)
Se prexinta un exemplu pe care eu incerc sa-l complic si uite asa apar intrebarile
<!DOCTYPE html>
<html>
<head>
<title> Efectul Text-Shadow, culoare la umbre</title>
<style>
h2 {
text-shadow: 2px 2px red;
}
p.blue {
text-shadow: 3px 4px blue;
font-size: 28px;
color: red;
}
#blue {
text-shadow: 3px 4px blue;
}
</style>
</head>
<body>
<h2>Efectul Text-shadow - adaugarea de culoare la umbre - aici rosu</h2>
<p class="blue" >Text rosu cu umbre albastre </p>
<p id="blue" >Text cu umbre albastre </p>
<p><b>Nota:</b> IE9 si anterioare, nu recunosc proprietatea text-shadow</p>
</body>
</html>
Am reusit in p.blue sa stilez marimea textului, culoarea si altele Dar n-am gasit solutii sa fac acelasi lucru in #blue Gresesc ceva si nu stiu ce Chiar daca e 4 dimineata si se simte racoarea Edited by n_priceputu, 27 July 2023 - 03:00. |
Back to top
#38
Posted 27 July 2023 - 09:36
|
Nu am inteles exact unde este problema, dar in #blue daca adaug font-size sau color, se modifica fara niciun fel de problema stilizarea.
|
#39
Posted 27 July 2023 - 15:17
|
Da, ai perfecta dreptate.
Am facut asa si ieri, dar nu ma baga in seama Din cauza asta, nedumerit fiind, am cerut ajutorul Probabil ca din cauza caldurii nu observam ceva gresit Inca o data, multe multumiri |
#40
Posted 28 July 2023 - 09:58
|
Sa incerci sa eviti si . In schimb foloseste <strong></strong> pentru <b> si <em></em> pentru <i>
|
#41
Posted 03 August 2023 - 15:46
|
Daca am lipsit nu inseamna ca am stat degeaba. Am mers inainte
Nu pot spune ca am inteles tot. Mai sunt unele lucruri asupra carora trebuie sa ma mai uit eu si apoi sa intreb. In orice caz, am ajuns la faza in care stiu unde sa caut daca vreau sa lamuresc ceva Ca lamuresc sau nu, este alta poveste M-a atras Responsive Web Design ( Receptiv am zis eu) Pentru ca acolo nu este nevoie decat de CSS si HTML Iau codurile, caut sa le inteleg, mai fac unele modificari sa vad daca ceea ce inteleg eu e asa cum inteleg Merge destul de bine. Vine totusi o intrebare asupra codului urmator
<!DOCTYPE html>
<html>
<head>
<title>RWD principiu Mobile First / In Fis RWD02 indexR03-ime.html</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding: 15px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.center {
background-color: #9933cc;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-01 {width: 8.33%;}
.col-02 {width: 16.66%;}
.col-03 {width: 25%;}
.col-04 {width: 33.33%;}
.col-05 {width: 41.66%;}
.col-06 {width: 50%;}
.col-07 {width: 58.33%;}
.col-08 {width: 66.66%;}
.col-09 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
</style>
</head>
<body>
<div class="header">
<h1>Magherani</h1>
</div>
<div class="row">
<div class="col-03 menu">
<ul>
<li>Acces</li>
<li>Localitatea</li>
<li>Imprejurimi</li>
<li>Mancare traditionala</li>
</ul>
</div>
<div class="col-06">
<div class="center">
<h2>Localitatea principala/Centrul administrativ</h2>
<p>Magherani este centrul administrativ al comunelor Frumoasa, Fundata,
Lunca Vaii, Floresti, Apele Noi si, evident, Magherani. Nu toate satele sunt
la fel de mari, dar frumoase sunt toate</p>
</div>
</div>
<div class="col-03 right">
<div class="aside">
<h2>Ce este?</h2>
<p>Magherani este o localitate in plina campie.</p>
<h2>Unde?</h2>
<p>Este asezata la rascrucea celor patru vanturi.</p>
<h2>Cum?</h2>
<p>Ajungi acolo parcurgand un drum foarte bun.</p>
</div>
</div>
</div>
<div class="footer">
<p><strong>NOTA</strong><br>Redimensionati fereastra browserului pentru a vedea cum continutul raspunde la redimensionare</p>
</div>
</body>
</html>
Intrebarea este: In secventa <div class="col-03 right"> <div class="aside"> <h2>Ce este?</h2> <p>Magherani este o localitate in plina campie.</p> <h2>Unde?</h2> <p>Este asezata la rascrucea celor patru vanturi.</p> <h2>Cum?</h2> <p>Ajungi acolo parcurgand un drum foarte bun.</p> </div> </div> clasa col-03 right nu o vad definita nicaieri si totusi apare ceva in cadrul paginii E o definire mai speciala, prin exceptie, sau nu ma prind eu de ceva simplu? O posibilitate ar fi ca nefiind definita, ea sa mosteneasca proprietatile col-03 menu folosita mai sus Mi-ar prinde bine o tragere de urechi. Multumiri in avans |
#42
Posted 03 August 2023 - 21:58
|
Pai ai definitã clasa col-03 care îi da div-ului o lãțime de 25% din lãțimea parintelui, pentru display mai mare de 768px și 100% pentru display mai mic de atât.
Un element poate avea mai multe clase, in cazul de fațã col-03 și right. Elementul își ia stilizãrile de la ambele clase. Daca clasa right nu este definitã nicãieri atunci elementul își va lua stilizarea doar de la clasa col-03, adicã acea lãțime de 25%. PS: codul de pe care înveți este foarte învechit.De exemplu acel float pentru a crea layoutul paginii. Acum pentru layout se folosește flex sau grid. De asemenea, folosind flex sau grid nu mai ai nevoie de acea împãrțire pe 12 coloane cu procentele respective. In altã ordine de idei, acum exista elemente specifice în HTML: - in loc de <div class="header"> exista elementul <header> - in loc de <div class="menu"> exista elementul <menu> - in loc de <div class="aside"> exista elementul<aside> - iar pentru elementul <div class="footer"> exista <footer> Pãrerea mea e sa cauți niste cursuri mai de actualitate. |
#43
Posted 04 August 2023 - 12:12
|
Hai, ca imi turtisi palaria!
Adica nu m-am orientat bine. Pai am cautat pe Goagal si am ales dintre primele tutoriale aparute in listare. Acuma n-am ce face, trebuie sa inchei ce am inceput, ar mai fi 3-4 capitole Daca inteleg si vechitura asta, si tot e bine Dar, pentru ca veni vorba, din cele mai noi pe unde se gasesc? Poate ca prezinta trecerea de la aceste forme mai vechi la cele mai noi, explicand echivalente, etc Edited by n_priceputu, 04 August 2023 - 12:15. |
#44
Posted 04 August 2023 - 13:48
|
Nu e rau sa stii si chestii mai vechi pentru ca unele site-uri inca folosesc o structura de genul. Problema e ca te complici rau pentru anumite chestii pe care le poti face mult mai usor.
Nu stiu ce sa iti recomand pentru ca aici depinde de fiecare si de stilul lui de a invata. De exemplu cum stai cu limba engleza (ca si inteles nu ca si vorbit, pentru ca am observat ca tutorialele pe care le urmezi sunt in limba romana)? Iti pot face un scurt roadmap de urmat daca vrei in ordinea respectiva: 1. Sa inveti HTML5 si care sunt diferentele fata de HTML4 (aici vei vedea ce am scris in postul anterior cu elementele <header>, <aside>, etc) 2. Sa inveti semantica HTML. Asta presupune sa renunti in principal la cat mai multe elemente <div> si <span> (unde este posibil) si sa le inlocuiesti cu elementele HTML5 potrivite. Div si span se folosesc in special doar pentru a grupa anumite elemente, tagurile neavand nicio semantica in mod special. Sa inveti ce atribute poti da fiecarui element in parte. 3. Bazele CSS: margins, padding, border, color, background, position, display, font, etc. De asemenea sa stii cum se folosesc si ce sunt valorile prescurtate ale lor. De exemplu:
.element{
margin-bottom: 5px;
margin-left: 10px;
margin-right: 5px;
margin-top: 15px;
}
Poate fi scris ca si:
.element {
margin: 15px 5px 5px 10px;
}
De asemenea:
.element{
border: 3px solid red;
}
Este prescurtarea de la:
.element{
border-thickness: 3px;
border-style: solid;
border-color: red;
}
Unde border-color: red, este la randul lui prescurtarea de la:
.element{
border-top-color: red;
border-right-color: red;
border-bottom-color: red;
border-left-color: red;
}
Si tot asa.
4. Sa inveti ce reprezinta un box model (un box este un element format din: continut, padding, border si margini). Mai exact, incearca sa iti imaginezi ca fiecare element din pagina este un patrat (sau dreptunghi) care vine intr-o anumita ordine in pagina in functie de elementul HTML. Fiecare patrat de genul acesta, are caracteristicile de mai sus. Ca sa le ai si vizual, poti da click dreapta pe un element dintr-o pagina, inspect si tabul Computed. Acolo o sa vezi reprezentarea de care am zis mai sus. 5. Sa inveti care sunt selectorii si sa inveti despre specificitatea lor (care selector poate suprascrie alt selector). Despre comninarea acestor selectori. 6. Sa inveti care si ce sunt pseudo-clasele si pseudo-elementele. O sa te ajute foarte mult lucrul asta in anumite situatii. 7. CSS Layouts. Aici vom include display: flex si display: grid. Cu ajutorul lor vei construi layoutul unei pagini web, adica asezarea elementelor in pagina. Gandeste-te la Flex ca la un element care vine de la stanga la dreapta (default) pe un singur rand, iar la Grid ca la un element format din coloane si randuri. Float, folosit in exemplul pus de tine este bunicul acestor elemente. Ce facea mai exact? In cazul float: left, impingea toate elementele la stanga fara niciun alt control asupra lor. 8. Responsive design. Daca ai invatat layout de la punctul 4, cu putina munca responsive va fi muuuult mai simplu de facut cu ajutorul flex / grid. 9. Animatii, tranzitii, etc. Astea nu sunt neaparat neceare, dar e bine sa le ai ca sa creezi un design mai modern. 10. Aici deja sunt chestii mai avansate, dar si chestii mai noi: varietati de fonturi, @at-rules, container, layers, nesting, etc. 11. Punctul poate fi inainte de 10, dar aici as include daca vrei sa avansezi si mai mult in domeniu: tools (precum SCSS, PostCSS), frameworks (Bootstrap, Tailwind, MaterialUI, etc), icons (Fontawsome, Materialize, FlatIcon, etc), Google Fonts, SEO, practici pentru denumirea claselor elementelor HTML (ex: BEM), si multe altele. Cam astea ar fi in principal categoriile pe care sa te axezi. Ai aici o lista cu toate referintele CSS: https://developer.mo...rence#index  Acolo daca dai click pe oricare referinta, o sa ai explicatia, valorile posibile, valoarea default, ce optiuni poti adauga, cateva exemple si compatibilitatea in browsere (nu toate browserele suporta toate elementele CSS). Daca vrei si o lista cu toate elementele HTML la fel explicate individual gasesti aici: https://developer.mo...eb/HTML/Element Sunt foarte multe ramuri si aici, dar nu vreau sa zici ca te incarc cu prea multe chestii noi deodata 
|
#45
Posted 04 August 2023 - 18:39
|
Multumesc pentru timpul si atentia acordate
Nu stau rau cu engleza si nici cu priceperea, mai rau stau cu timpul, am o varsta respectabila care isi cere si ea drepturile ei. Astazi, de exemplu, m-am simtit sufocat de caldura si materia cenusie a refuzat sa mi se supuna. E bine sa fii pus la punct cu ultimele noutati, mai ales daca usureaza si simplifica munca. Voi revedea de cateva ori cele scrise de tine pentru a seta niste prioritati Mi-ar placea sa introduc SEO (daca este vorba despre Search Ehgine Optinization) pe un loc mai in fata. Candva am citit mult despre subiect Dar mai vorbim, sper ca maine sa fie mai racoare Edited by n_priceputu, 04 August 2023 - 18:43. |
#46
Posted 04 August 2023 - 19:06
|
SEO nu e chiar o chestie complicata, sunt doar câteva reguli pe care trebuie sa le urmezi când faci un site. Dar pentru asta trebuie in primul rand sa poți crea o paginã completa cap coada.
Când ajungi la partea asta îmi spui și încerc sã te ajut și aici cat pot. |
|
#47
Posted 05 August 2023 - 12:14
|
Multumesc mult,
Ce bine era sa fi avut eu ideea asta la inceputul pandemiei, cand eram sechestrat Dar am dat curs unei alte pasiuni, mult mai vechi si nu-mi pare prea rau Sper sa ajung mai sus de genunchiul broastei si aici. Timp sa fie Iti doresc sa ai un sfarsit de saptamana linistit Edited by n_priceputu, 05 August 2023 - 12:18. |
#48
Posted 17 August 2023 - 10:28
|
Intre timp am mai facut cate ceva
In primul rand am apelat la alte tutoriale, din moment ce studiam dupa unul invechit Apoi am citit despre HTML5 Profitand de faptul ca a fost mai racoare, am reusit sa parcurg ceva material Pot spune ca am si inteles mare parte, desi simt ca este nevoie sa revin asupra mareriei parcurse Am incercat sa modernizez un pic codul de mai sus. A iesit ceva de genul
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Magheranii </title>
<style>
element {
}
* {
box-sizing: border-box;
}
.desfasurator {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
/* sunt trei obiecte, box1, box2 si box3 */
.box1 {
grid-column-start: 1; /* ocupa 3 celule orizontale intre liniile vert 1-4 */
grid-column-end: 4;
grid-row-start: 1; /* ocupa doua randuri intre liniile oriz 1-3 */
grid-row-end: 3;
}
.box2 {
grid-column-start: 1; /* ocupa 1 celula orizontala intre liniile vert 1-2 */
/* grid-column-start: 2; este default - adica intinderea intre doua linii consecutive */
grid-row-start: 3;
grid-row-end: 5;
}
.box3 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 5;
/* grid-row-end: 7; */
}
.desfasurator {
border: 1px solid blue;
border-radius: 5px
background-color: #fff4c6
}
.contacte {
/* display: grid; */
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 50px;
}
.contacte {
border: 2px solid pink;
border-radius: 5px;
background-color: lightyellow;
}
.desfasurator > div {
border: 2px solid blue;
border-radius: 5px;
background-color: pink;
padding: 1em;
color: black;
}
.contacte > div {
border: 3px solid green;
border-radius: 5px;
background-color: lightblue;
padding: 1em;
color: #d9480f;
}
@media only screen and (min-width: 768px) {
.box1;
.box2;
.box3;
}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 10%;
background-color: #f1f1f1;
position: fixed;
height: 22;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 4px 0 4px 4px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #4CAF50;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 10%;
padding: 1px 20px;
height: 100px;
}
@media screen and (max-width: 600px){
ul.sidenav {
width:100%;
height:auto;
position:relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {margin-left:0;}
}
@media screen and (max-width: 400px){
ul.sidenav li a {
text-align: center;
float: none;
}
}
body {
font-family: "Gill Sens", "Gill Sens MT", Calibri, sans-sherif;
color: blue;
}
</style>
</head>
<body>
<div class="desfasurator">
<div class="box1">
<ul class="sidenav">
<li><a class="active" href="#home">Localitatea</a></li>
<li><a href="#istorie">Istorie</a></li>
<li><a href="#about">Imprejurimi</a></li>
<li><a href="#traditii">Traditii</a></li>
<li><a href="#acces">Acces</a></li>
</ul>
<div class="content">
<h3>Unu - Magheranii mei priviti de aproape</h3>
<p> Comuna Magherani este asezata in bataia vanturilor de miaza noapte<br>
E comuna in care m-am nascut eu, unicul loc din lume spre care sufletul se cere cu
fiecare primăvară mai mult , cu fiecare primă ninsoare mai cert şi cu fiecare doză
de soare mai intens.
<br> <br>
Şi iubesc totul la el zilele , nopţile si umbrele , vara plina cu fructe zemoase si dulci, ca si iarna
inecata in troiene de zapada, pamantul uscat si potecile care duc spre casa parinteasca , glia
umeda ce naste paine din soare , si pasii mei goi hoinarind pe ulita copilariei.
<br> <br>
Si cate ar mai fi de spus!
</p>
</div>
</div>
<div class="box2">Doi </div>
<div class="box4">PATRU - dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
<div class="box5">Cinci</div>
<div class="box6">SASE!!!</div>
<div class="box7">SEPTICA</div>
</div>
<div class="contacte">
<div class="box3">TREI - Boxul meu - dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum.</div>
</div>
</body>
</html>
Nu e gata lucrarea, mai trebuie polizata. Mi-ar placea sa aflu ca lucrarea se poate vedea bine si pe un ecran de mobil, cel putin eu asa am gandit Nu-mi dau seama cum ar trebui sa fac atfel incat atunci cand fereastra browserului se micsoreaza, intervalele din grila sa se lungeasca in inaltime pentru a nu pierde textul, pentru ca toate il pierd cu exeptia TREI (ultimul de jos, fond bleu si chenar verde) dar care la un moment dat cand fereastra browserului variaza, reda textul intreg, dar cu randuri suprapuse. Astept un punct de vedere si tragerea de urechi, dar mai incet ca a venit iar caldura si imi scormoneste materia cenusie Apropo, as vrea sa urc lucrarea undeva unde este free ca sa o pot vedea si testa. Mai exista hosturi care nu percep taxe? Edited by n_priceputu, 17 August 2023 - 10:30. |
#49
Posted 17 August 2023 - 10:51
|
Tu esti propriul host (calculatorul personal sau o masina virtuala pe post de server)
 Daca vrei sa fie accesibil tot timpul, mai greut un pic dar nu imposibil (eu mi-am luat un ThinClient tocmai pentru a fi server web. In afara de el (vreo 300 de lei), de curent si vreo 75 de lei pentru domeniu, nu cred ca am mai dat alti bani pentru httpS-ul meu ).
Edited by sorin147, 17 August 2023 - 10:52. |
#50
Posted 17 August 2023 - 13:36
|
si pe un ecran de mobil sa urc lucrarea undeva unde este free ca sa o pot vedea si testa Iar pentru desktop XAMPP, nu prea mai urca nimeni siteuri sa le testeze live deoarece poti tu local sa iti creezi mediul cum vrei, versiunea de PHP, MySQL, etc. Daca vrei neaparat host si nu gasesti free iti fac eu un subdomeniu la mine. Edited by Mizu, 17 August 2023 - 13:37. |
#51
Posted 17 August 2023 - 14:58
|
M-am exprimat gresit/incomplet
Vreau sa-l testez cum merge dupa ce-l dau gata inainte de a investi in el ca s-au scumpit nepermis de mult toate Acuma mi-e suficient in local |
|
#52
Posted 17 August 2023 - 15:06
|
eh, ok
pai host free gasesti fie subdomenii fie pe tld ce n-o sa rankeze niciodata, deci asa pot sa-ti dau si eu sub pe unul din domeniile mele ca nu ma incurca chiar cu nimic, cat timp nu te deranjeaza numele principal. mai cauta si vedem. |
#53
Posted 18 August 2023 - 08:53
|
Hai ca incep si eu cu mici precizari. Elementele din grid au default height setat pe auto (isi iau singure inaltimea de care au nevoie in functie de continutul din interiorul elementului). In momentul in care setezi o valoare pentru height practic fortezi elementul sa aiba acea inaltime, astfel daca textul este mai lung decat ar incapea in interiorul elementului, acesta va face overflow (va iesi din interiorul lui).
Ca sa raspund strict la intrebarea cu inaltimea elementelor pe mobil, scoate urmatoarea linie din CSS, de la elementul .desfasurator: grid-auto-rows: 150px; Practic tu ai setat inaltimea elementelor de 150px, astfel incat pe mobil textul ocupa mai mult de atat pe inaltime. Ca un sfat, nu mai folosi nicaieri valori height sau care afecteaza asta cum e in cazul tau grid-auto-rows, pentru ca toate elementele cum am zis mai sus isi preaiau cat spatiu au nevoie pe inaltime. Singurele dati cand folosesti height este cand un element trebuie sa aiba o anumita inaltime indiferent de display. Eventual mai poti folosi min-height daca vrei, ca sa setezi o inaltime minima sub care sa nu scada elementul. Acum sa trecem la codul scris: 1. Nu mai lasa elemente CSS goale, cum este cazul primului .element { } 2. Incearca sa grupezi in acelasi selector toate proprietatile care se refera la elementul selectat. In cazul tau ai de 2 ori .desfasurator.
Din cele doua elemente selectate:
.desfasurator {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
.desfasurator {
border: 1px solid blue;
border-radius: 5px;
background-color: #fff4c6;
}
Fa doar unu singur:
.desfasurator {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px; // asta poti sa renunti cum am zis mai sus
border: 1px solid blue;
border-radius: 5px;
background-color: #fff4c6;
}
3. De altfel, vezi ca la al doilea selector .desfasurator, ai uitat sa pui punct si virgula dupa border-radius: 5px si background-color: #fff4c6 4. Incearca sa ordonezi selectorii in CSS in functie de cat mai aproape sunt de root. Mai pe scurt, incearca sa ai in minte urmatoarea ordine: - @import daca ai fonturi sau alte fisiere pe care le importi in fisierul respectiv - :root { } sa fie intotdeauna primul daca ai ceva de pus aici - * { } sa fie al doilea - html { } al treilea - body { } al 4-lea - restul elementelor stilizare 5. Ai niste elemente fara rost in style, de exemplu la linia urmatoare, nu ai definit nimic. Daca vrei sa le lasi goale pentru a reveni mai tarziu asupra lor, foloseste .element { }, nu pune doar punct si virgula dupa selector:
@media only screen and (min-width: 768px) {
.box1;
.box2;
.box3;
}
6. Ca sa mai scurtezi din cod, poti face urmatoarea modificare: grid-column-start: 1; grid-column-end: 4; Se poate scrie si in felul urmator: grid-column: 1 / 4; La fel si pentru grid-row-start: 1; grid-row-end: 3; Se poate scrie: grid-row: 1 / 3; Daca vrei ca un element sa ocupe toate coloanele unui grid poti folosi: grid-column: 1 / -1; Valabil si pentru linii grid-row: 1 / -1; Daca mai gasesc ceva revin. LE: la fel si pentru div.content, daca vrei sa apara complet pe mobil renunta la linia height: 100px; Edited by G1q, 18 August 2023 - 09:04. |
#54
Posted 18 August 2023 - 09:09
|
De asemenea, nu mai folosi tagul <br> pentru spatiere. <br> il folosesti in special daca vrei sa faci break pe un text sa il fortezi sa treaca pe randul urmator, nu pentru ce il folosesti tu. Tag-ul <p> creaza default un spatiu intre paragrafe. Daca nu te multumeste spatiul respectiv poti stiliza paragraful in CSS sa adaugi de exemplu margin-bottom: 10px; sau cat te multumeste.
Codul tau: <p> Comuna Magherani este asezata in bataia vanturilor de miaza noapte<br> E comuna in care m-am nascut eu, unicul loc din lume spre care sufletul se cere cu fiecare primăvară mai mult , cu fiecare primă ninsoare mai cert şi cu fiecare doză de soare mai intens. <br> <br> Şi iubesc totul la el zilele , nopţile si umbrele , vara plina cu fructe zemoase si dulci, ca si iarna inecata in troiene de zapada, pamantul uscat si potecile care duc spre casa parinteasca , glia umeda ce naste paine din soare , si pasii mei goi hoinarind pe ulita copilariei. <br> <br> Si cate ar mai fi de spus! </p> Poate fi rescris astfel. Nu te feri de tag-ul <p> pentru ca asta e rolul lui. Din moment ce ai pus <br> presupun ca urmeaza un nou paragraf. <p>Comuna Magherani este asezata in bataia vanturilor de miaza noapte</p> <p> E comuna in care m-am nascut eu, unicul loc din lume spre care sufletul se cere cu fiecare primăvară mai mult, cu fiecare primă ninsoare mai cert şi cu fiecare doză de soare mai intens. </p> <p> Şi iubesc totul la el zilele , nopţile si umbrele , vara plina cu fructe zemoase si dulci, ca si iarna inecata in troiene de zapada, pamantul uscat si potecile care duc spre casa parinteasca , glia umeda ce naste paine din soare , si pasii mei goi hoinarind pe ulita copilariei. </p> <p>Si cate ar mai fi de spus!</p> Edited by G1q, 18 August 2023 - 09:12. |
Anunturi
Bun venit pe Forumul Softpedia!
▶ 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-2024 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.