Porta shqipe | Mësime për CSS

Stilet CSS

Vetitë kryesore të stileve CSS

vetia	vlera/sqarimi	shembull	Demo
background-color:	RGB-ngjyrat	background-color: #CDCDCD;
background-image:	url (vendi i imazhit)	background-image: url(images/bg.gif);
background-attachment:	fixed, default
	me vlerën "default" imazhi në sfond lëviz me përmbajtjen e faqes. Kjo veti është standarte dhe nuk ka nevojë që të caktohet.	background-attachment: default;
	me vlerën "fixed" imazhi në sfond qëndron në të njëjtin vend, vetëm përmbajtja lëviz.	background-attachment: fixed;
	imazhi në sfond përsëritet, veti standarte	background-repeat: repeat;
background-repeat:	përsëritja e sfondit (shiko shembujt) no-repeat (tregohet vetëm një herë), repeat-x (përsëritet x), repeat-y (përsëritet y), repeat (veti standarte, përsëritet x dhe y) Sistemi koordinativ kartezian X dhe Y është sistem gjeometrik i përbërë nga tri sipërfaqe me një pikë të përbashkët O, njësi matëse të përbashkët dhe ndërmjet veti mbyllin këndin prej 90 shkallësh. Në lidhje me këtë lexo librin e Ismet Dehirit "Matematika I dhe II për studentët e fakultetit teknik", Prishtinë.	background-repeat: no-repeat;
		background-repeat: repeat-y;
		background-repeat: repeat-x;
background-position:	top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-positie y-positie	background-position: top center; background-position: 125px 150px;
background:	shkurtimisht: background-color — background-image — background-repeat — background-attachment — background-position	background: #fff url(images/bg.gif) no-repeat fixed top center
border-color:	Vlera me ngjyrat RGB
border-style:	none, dashed, dotted, double, groove, inset, outset, ridge, solid	border-style: dashed;
border-width:	medium, thick, thin vetitë: cm, mm, in, pt, px, pc, %
border:	shkurtimisht (top, left, bottom, right)	border: 1px 1px 1px 1px;
border-top:	shkurtimisht (gjerësia, ngjyra, stili)	border-top: 1px solid #FF9900;
border-right:	shkurtimisht (gjerësia, ngjyra, stili)	border-right: 1px solid #FF9900;
border-left:	shkurtimisht (gjerësia, ngjyra, stili)	border-left: 1px solid #FF9900;
border-bottom:	shkurtimisht (gjerësia, ngjyra, stili)	border-bottom: 1px solid #FF9900;
cursor:	auto, crosshair, default, hand, move, text, wait, help, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, e-resize, w-resize	cursor: hand;
color:	RGB-ngjyrat	color: #FF9900;
display:	block, inline	display: block;
font-family:	fonti (lloji i shkronjës)	font-family: Arial,Helvetica, serif, sans-serif;
font-size:	xx-small, small, medium, large, x-large, xx-large vetitë: cm, mm, in, pt, px, pc, %	font-size: 10px;
font-style:	normal, italic, oblique	font-style: italic
font-variant:	normal, small-caps	font-variant: small-caps
font-weight:	normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900	font-weight: bold;
height:	vlera: cm, mm, in, pt, px, pc, %	height: 200px;
letter-spacing:	vlera: cm, mm, in, pt, px, pc, %	letter-spacing: 2px;
line-height:	vlera: cm, mm, in, pt, px, pc, %	line-height: 135%;
list-style-image:	url	list-style-image: url (images/bullet.gif)
list-style-type:	disc, circle, square, decimal, none, lower-roman, upper-roman, lower-alpha, upper-alpha	list-style-type: square;
margin:	vlera: cm, mm, in, pt, px, pc, %	margin: 10px;
margin-top:	vlera: cm, mm, in, pt, px, pc, %	margin-top: 20px;
margin-right:	vlera: cm, mm, in, pt, px, pc, %	margin-right: 30px;
margin-bottom:	vlera: cm, mm, in, pt, px, pc, %	margin-bottom: 40px;
margin-left:	vlera: cm, mm, in, pt, px, pc, %	margin-left: 50px;
padding:	vlera: cm, mm, in, pt, px, pc, %	padding: 10px;
padding-top:	vlera: cm, mm, in, pt, px, pc, %	padding-top: 10px;
padding-right:	vlera: cm, mm, in, pt, px, pc, %	padding-right: 30px;
padding-bottom:	vlera: cm, mm, in, pt, px, pc, %	padding-bottom: 40px;
padding-left:	vlera: cm, mm, in, pt, px, pc, %	padding-left: 50px;
text-align:	left, right, center, justify	text-align: center;
text-decoration:	none, underline, overline, line-through	text-decoration: line-through;
text-indent:	vlera: cm, mm, in, pt, px, pc, %	text-indent: 50px;
text-transform:	none, capitalize, uppercase, lowercase	text-transform: capitalize;
vertical-align:	baseline, sub, super, top, middle, bottom, text-top, text-bottom	vertical-align: top;
visibility:	visible, hidden	visibility: hidden;
width:	vlera: cm, mm, in, pt, px, pc, %	width: 200px;
word-spacing	vlera: cm, mm, in, pt, px, pc, %	word-spacing: 50px;

Pseudo-Class me ID (entifikim)
<div id="mbajtesiID"><a href="#">shembull</a></div>
#mbajtesiID a	vetitë	#mbajtesiID a {color: blue; text-decoration: none;}
#mbajtesiID a:link	vetitë	#mbajtesiID a:link {color: blue; text-decoration: none;}
#mbajtesiID a:visited	vetitë	#mbajtesiID a:visited {color: green;}
#mbajtesiID a:hover	vetitë (shiko listën lartë)	#mbajtesiID a:hover {color: red;}

Pseudo-Class me emër të klasës (shiko kodine plotë pas hapjes së demonstrimit)
<a href="#" class="emri_i_klases">test</a>
a.emri_i_klases	vetitë	a.emri_i_klases {color: blue; text-decoration: none;}
a.emri_i_klases:link	vetitë	a.emri_i_klases:link {color: blue; text-decoration: none;}
a.emri_i_klases:visited	vetitë	a.emri_i_klases:visited {color: green;}
a.emri_i_klases:hover	vetitë (shiko listën lartë)	a.emri_i_klases:hover {color: red;}

Pseudo-Class me emër të klasës; germa dhe rendi i parë (shiko kodine plotë pas hapjes së demonstrimit)
<p class="emri_i_klases">test</p>
.emri_i_klases:first-letter	germa e parë	.emri_i_klases:first-letter {font-size: 55px}
.emri_i_klases:first-line	rendi i parë	.emri_i_klases:first-line {font-size: 55px}

Stilet CSS

Vetitë kryesore të stileve CSS

CSS (stilet)