كيف يتم عمل مثل هذهـ الحركة بالنصوص في الـ CSS

[NewUser]

السلام عليكم
كيف يتم عمل هذه الطريقة بالسي اس اس
اقصد عنوان كبير ثم تحته عنوان صغير ثم نص صغير جداً ثم الموضوع وأخيراً سطر صغير
هذا مثال


مطلوب كود السي اس اس الليي عمل هذهـ الطريقة

مع الشكر مقدماً للجميع

[Lep_Lab]

بسيطه جدا
اول شي نعرف العنوان بصفحة العرض كـ class أو id
مثال:

.tittle
{
    color: #000000;
    font-size: 12pt;
    font-weight: bold;
} 

وطريقة وضعه بالصفحه

<div class="tittle">
														العنوان هنا وسوف يكون عرضة 12 pt ولونه اسود عريض	
														</font></a></div>

والبقية مثله مع كلاس مختلف كالتاريخ والعنوان الاضافي والنص
اتمني انك فهمت
سلام

[أحمد عبدالمنعم]

وعليكم السلام ورحمه الله ...

يمكن ان تنسق عن طريق CSS بأكثر من طريقة ـ ولكن المهم قبل CSS أن تقوم بترتيب المحتوى بشكل صحيح بأوسمة HTML

**/
1 - تم عمل div لمحتوى الخبر كامل وأعطي لها فئه class بإسم news ويفضل أن تكون class فقط وليس id لان الخبر سوف يتكرر إن كان سيوضع بصفحة كاملة لعرض الأخبار فقط .
2 - العنوان الرئيسي الكبير أخذ الوسم h2
3 - العنوان الفرعي الصغير أخذ الوسم h3 مع تسميكة والسطر اللى تحته المحتوى على إسم
الكاتب أخذ نفس الوسم بدون تسميك وتم الفصل بينهم بسطرbr
4 - نص الخبر أخذ الوسم p
5 - واخيراً السطر الأخير الموجود به الوصلات تم عمله في قائمة منتظمة ul , li بداخل div خاص له او يمكن الأكتفاء بالقائمة فقط ..

المهم من هذا كله ان تفرق فقط بين الأوسمة بدون css ويمكن تجد من يغير منها بطريقته مع الألتزام بنفس الوسوم
والنتيجة تشاهدها مرفقه بملف html_code

بعد ذلك يأتي دور تصنيف وضبط الخطوط والألوان لهذه الأوسمة ـ وكل هذا سيتم فرعي للفئة الرئيسية للخبر وهى news بالشكل التالي :

<style type="text/css">
<!--
/* Body All news 
***************************************************/
.news {
	width: 80%;
	margin: 0px auto;
	font: normal 11px Tahoma;
}

/* Main title 
***************************************************/
.news h2 { margin: 0px; font-size: 16px; }
.news h2 a:link, .news h2 a:visited { color: #09F; }
.news h2 a:hover { color: #333; }

/* Sub title
***************************************************/
.news h4 { margin: 0px; font-weight: normal; font-size: 11px; }
.news h4 a:link, .news h4 a:visited { color: #666; }
.news h4 a:hover { color: #333; }

/* test news 
***************************************************/
.news p {
	font-size: 14px;
	color: #333;
	background-color: #F7F8FB;
	padding: 10px;
	margin: 10px 0 0;
	border: 1px solid #EBF1F7;
}

/* List details
***************************************************/
.news .details ul {
	margin: 0 0 0 10px;
	list-style: none;
	height: 20px;
}
.news .details ul li { display: inline; }
.news .details span {
	margin: 3px;
	float: left;
	color: #0066CC;
}
.news .details ul li a {
	float: left;
	text-decoration: none;
	border-left: 1px solid #CCCCCC;
	margin: 3px;
	padding: 0 0 0 5px;
}
.news .details ul li a:link, .news .details ul li a:visited { color: #E04483; }
.news .details ul li a:hover { color: #C6346F; text-decoration: underline; }
-->
</style>

الفونت الإساسي هو tahoma واعطي للمحتوى كله news ولكن لو حبيت تغيرة يمكنك ذلك من عن طريق إضافته لكل وسم فونت خاص ..

وتجد المثال كامل صفحة html بالمرفق ....

بالتوفيق ـ وتقبل التحيه ،،

[NewUser]

الأخوة الأعزاء Lep_Lab و ca2oom
شكراً لكم جميعاً ... وجزاكم الله الف خير
هذا بالظبط ما كنت أبحث عنه ...



تحياتي للجميع

[aboyazan]

الله يعطيكم العافية يا شباب