كله بملف style.css
مثال
كود HTML:
body { margin: 0; padding: 0; font-size: 90%;}
#outside {width: 100%; margin: auto; padding: 0; background-color: #ffffff;}
hr {
color: #008A8C;
width: 90%;
text-align: center;
}
p{
padding: 3px;
margin: 0px;
font: normal .8em/1.3em Tahoma,arial;
}
h1{
margin: 2px;
padding: 0px;
font: bold 1.3em/1.5em arial,tahoma;
color: #228B22;
text-align: center;
}
h2{
margin: 5px 2px 5px 0px;
padding: 0px;
font: bold 1.1em/1.4em arial,tahoma;
color: #2F4F4F;
}
/*--------------بداية رأس الصفحة (البانر)------------*/
#header {
height: 80px;
margin: 0;
padding: 0px;
background: #F5F5F5 url(images/headerback.jpg) repeat-x center;
width: 100%;
}
#header h1{
color: #00F602;
margin: 0 10px 0 0;
text-align: right;
font: bold 1.5em/80px Tahoma,arial;
}
#header h1 a{
color: #00F602;
text-decoration: none;
}
#header h1 a:hover{
color: #fff;
}
/*---------------القائمة العلوية-------------*/
#menu {
padding: 0px;
background: #1E90FF url(images/menuback.jpg) repeat-x top;
width: 100%;
height: 30px;
display: block;
margin: 0;
}
#menu ul
{
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
#menu a
{
float: right;
border-left: 1px solid #32CD32;
border-right: 1px solid #0BFF0D;
text-align: center;
text-decoration: none;
font: bold .9em/30px tahoma,arial;
color: #6B8E23;
background: #1E90FF url(images/menuback.jpg) repeat-x top;
margin: 0px;
padding: 0 8px 0 8px;
}
#menu a:hover
{
color: #006400;
}
#menu li
{
display:inline;
}
/*---------------بداية العمود الأيمن والقائمة اليمنى-------------*/
#col1
{
width: 130px;
background: #fff url(images/listback.jpg) repeat-y left;
margin: 0px;
float: right;
padding: 0px;
}
.sec
{
width: 110px;
height: 30px;
font: bold 1em/30px tahoma,arial;
background: url(images/secback.jpg) no-repeat right;
margin: 0;
padding: 0 5px 0 0;
text-align: right;
color: #005A5B;
}
.nav ul
{
font: normal .8em/1.5em tahoma,arial;
padding: 0px;
margin: 0px;
list-style: none;
}
.nav il
{
width: 129px;
margin: 0px;
padding: 0px;
}
.nav {
width: 129px;
margin: 0px;
}
.nav a {
display: block;
width: 118px;
background: url(images/sah.gif) no-repeat right;
border-bottom: 1px solid #EDEDED;
margin: 0px;
padding: 0px 11px 0px 0;
color: #8CBA2D;
font-weight: bold;
text-align: right;
text-decoration: none;
}
.nav a:hover {
color: #ABD555;
}
/*---------------بداية العمود الأوسط --------------*/
#col2
{
background: White url(images/bodyback.jpg) repeat-y top right;
margin: 0 130px 0 0;
border-right: 1px solid #32DAD0;
padding: 5px;
text-align: right;
font: normal 1em/1.3em Tahoma,Arial;
}
#col2 a{
color: #000;
text-decoration: none;
font-weight: bold;
}
#col2 a:hover{
text-decoration: underline;
}
/*---------------بداية ذيل الصفحة---------------*/
#footer {
clear: both;
font: bold .9em/2em Arial;
padding: 1px;
background: #555 url(images/headerback.jpg) repeat-x center;
color: #fff;
text-align: right;
}
#footerlink {float: left; margin-right: 5px;}
#footer a {
color: #ABD555;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
مثال تحصل color: #008A8C;
غير
008A8C
وشف الناتج طبعا تاخذ كود اللون باي برنامج تصميم مثال الفتوشوب
ممكن شرح لتغير اللوان الاستايل عن طريق css
رد مع اقتباس
