Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Cum v-a apucat dragostea pentru p...

Intrebare hdmi laptop lenovo

Fezabilitate - Adaugare microinve...

inmatriculare autoturism reprezen...
 2 aere conditionate pe un singur ...

Intarzietor de priza zahar

Oprire update Asus ZenFone 10

Concediu Canada - Gestiunea banil...
 Folii faruri - plastic sau sticla...

Alternative, reducere costuri, pa...

SUMMER HITS!

Conducta pluviala sparta la bloc....
 Medii admitere 2023 UPB - Faculta...

Cum pot crea o iluzie de tipul Fa...

Cand crezi ca le-ai vazut pe toat...

Damsel (2024)
 

CSS

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

#1
justmechiry

justmechiry

    Junior Member

  • Grup: Members
  • Posts: 87
  • Înscris: 26.01.2008
M-am documentat pe mai multe siteuri si am gasit <meta http-equiv="Content-Language" content="Romana" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
Cel ingrosat ii inteleg logica importa facut in CSS insa nu le inteleg rostul celorlalte 2 .... Am observat ca , cu ele sau fara ele nu se schimba nimic .... atunci pentru ce sunt puse??? sunt curios si asi dori sa stiu daca ma poate cineva lamuri in acest sens ... Multumesc!

#2
adormitu

adormitu

    Member

  • Grup: Members
  • Posts: 384
  • Înscris: 28.08.2008
alea sunt sintaxe html care sunt transpuse in headerele http...

cel cu content-type e important, sa zicem ca browserul tau e pus default pe latin-1... daca tu primesti pagina fara acel header (de utf-8) tu nu ai sa vezi ă ș ț â... iar cel care specifica limba (content-language) e optional...

#3
justmechiry

justmechiry

    Junior Member

  • Grup: Members
  • Posts: 87
  • Înscris: 26.01.2008
Am inteles .. Mai am o intrebare daca se poate .. Am de exemplu stilul urmator
* {
    padding: 0;
    margin: 0;
}

body {
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #333333;;
}

img { border: none; }
a { color: #57626a; text-decoration: none; }
a:hover { text-decoration: underline; color : #000; }

#wrap {
margin: 0 auto;
width: 800px;
}

#header {
padding: 10px 0 20px 0;
}
#header h1 {
font-size: 26px;
font-weight: 100;
letter-spacing: -3px;
padding: 12px 0 5px 10px;
}
#header h1 a {
color: #57626a;
text-decoration: none;
}
#header h1 a:hover {
color: #57626a;
text-decoration: none;
}
#header h2 {
color: #ccc;
font-size: 15px;
font-weight: 100;
padding: 0 0 0 11px;
letter-spacing: -1px;
line-height: 12px;
}

#menu {
height: 40px;
line-height: 40px;
background: #57626a url(images/menu.jpg) no-repeat;
text-transform: uppercase;
}
#menu ul {
padding-left: 10px;
list-style-type: none;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
color: #eee;
padding: 0 10px;
text-decoration: none;
font-weight: 100;
font-size: 14px;
letter-spacing: -1px;
}
#menu ul li a:hover {
color: #eee;
text-decoration: underline;
}

#content {
padding: 10px 20px;
}

.right {
width: 568px;
float: right;
text-align: justify;
}
.right h2 {
color: #FF4800;
font-size: 20px;
letter-spacing: -3px;
font-weight: 100;
padding : 10px 0 15px 0;
}

.left {
width: 150px;
float: left;
padding: 10px;
border-right: 1px solid #bbb;
font-size: 12px;
}
.left ul {
list-style-type: square;
padding: 5px 10px 10px 20px;
color: #57626a;
}
.left h2 {
height: 30px;
font-size: 14px;
color: #666;
line-height: 30px;
font-weight: 600;
}
.left a { text-decoration: none }

#footer {
background: #eee;
border-top: 3px solid #57626a;
margin-top: 20px;
text-align: center;
color: #333;
font-size: 11px;
padding: 10px;
}
Sincer am incercat sa inteleg dar insa nu inteleg mai nimic. Vreau sa inteleg deoarece as vrea la randul meu sa stiu sa fac un asemenea design ... Ma poate ajuta cineva sa mi poata explica sa inteleg ?? Multumesc!

#4
stefy

stefy

    Member

  • Grup: Members
  • Posts: 489
  • Înscris: 18.04.2006
Ce ai enumerat tu acolo e in esenta cam tot CSS-ul.
CSS-ul este pur si simplu o insiruire de atribute inauntrul unor ... 'pachete' numite stil-uri.

in loc sa folosesti <div width="500px" height="250px"></div>
poti folosi in head

<style type="text/css">
.divMeu{
height:500px;
width:250px;}
</style>

si in body <div class=divMeu></div>
Css ajuta doar prin pastrarea codului mai curat(plus cateva alte lucruri f folositoare in 'daily use') si e extrem de simplu.
Ai doar 3 lucruri ce poti face cu el:
redefinirea tag-urilor, setarea de clase si iduri.
clasele si idurile sunt stil-uri, gramezi de atribute puse la un loc.Tu le dai ce nume ai chef si pui cate si cum vrei.
clasele incep cu .
idurile cu #
Diferenta e ca id-urile se folosesc 1 singura data in tot codul.Nu poti de 2 ori <div id="x"> in aceiasi pag html sau <span id="x"> <div id="x">.1 sg data.

apoi in interiorul acoladei enumeri atributele care sunt cateva ce le folosesti mai des: height,width,text-align,margin,padding,font-family,font-color,color,background-image,background-color s.a

sa luam

* {
padding: 0;
margin: 0;
}

body {
background: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #333333;;
}

img { border: none; }
a { color: #57626a; text-decoration: none; }
a:hover { text-decoration: underline; color : #000; }

#wrap {
margin: 0 auto;
width: 800px;
}
#header {
padding: 10px 0 20px 0;
}

* e un caracter special face ca tot din pachet sa se aplice la toate tagurile.Acum a, body, img orice tag au o margine de 0 si un padding de 0.Ai redefinit toate tagurile la asta.

body si img redefinesti tagurile astea.Daca <a href.. este de obicei un text albastru si subliniat(e un stil default) poti modifica asta din css.text-decoration face ca sa nu fie acel underline iar color seteaza culoarea.

#wrap e un id creat de user.header la fel.

mai complicat putin e #header h1.Asta redefineste toate h1 din interiorul header.Toate h1-rile din <div id="header"> vor fi cu atributele din paranteza aia.
Remarca ca wrap are 800px width. Fiind un id se fol 1 sg data.Evident fiind atat de lat (si din nume) este pt corpul site-ului.Header probabil pt partea de sus(1 singura parte de sus).

In fine nu are rost sati scriu un tutorial CSS intreg aici,gasesti destule pe net.
CSS se refera practic sa pui o clasa sau id sau redefinesti un tag si in interiorul lui setezi noi atribute.Nu e mare filozofie sau "language". Il inveti in 1 zi.

Edited by stefy, 07 March 2009 - 20:22.


#5
adormitu

adormitu

    Member

  • Grup: Members
  • Posts: 384
  • Înscris: 28.08.2008
http://w3schools.com/css/

Anunturi

Chirurgia spinală minim invazivă Chirurgia spinală minim invazivă

Chirurgia spinală minim invazivă oferă pacienților oportunitatea unui tratament eficient, permițându-le o recuperare ultra rapidă și nu în ultimul rând minimizând leziunile induse chirurgical.

Echipa noastră utilizează un spectru larg de tehnici minim invazive, din care enumerăm câteva: endoscopia cu variantele ei (transnazală, transtoracică, transmusculară, etc), microscopul operator, abordurile trans tubulare și nu în ultimul rând infiltrațiile la toate nivelurile coloanei vertebrale.

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