{"id":6400,"date":"2026-06-03T17:00:44","date_gmt":"2026-06-03T13:30:44","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6400"},"modified":"2026-06-03T17:00:44","modified_gmt":"2026-06-03T13:30:44","slug":"css3-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d8%ad%d8%b1%d9%88%d9%81-%d8%a8%d8%b2%d8%b1%da%af-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7%db%8c-%d9%be%d8%a7%d8%b1%d8%a7%da%af%d8%b1%d8%a7%d9%81-drop-caps-%d8%a8%d8%a7-fi","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/css3-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d8%ad%d8%b1%d9%88%d9%81-%d8%a8%d8%b2%d8%b1%da%af-%d8%a7%d8%a8%d8%aa%d8%af%d8%a7%db%8c-%d9%be%d8%a7%d8%b1%d8%a7%da%af%d8%b1%d8%a7%d9%81-drop-caps-%d8%a8%d8%a7-fi\/","title":{"rendered":"CSS3: \u0627\u06cc\u062c\u0627\u062f \u062d\u0631\u0648\u0641 \u0628\u0632\u0631\u06af \u0627\u0628\u062a\u062f\u0627\u06cc \u067e\u0627\u0631\u0627\u06af\u0631\u0627\u0641 (Drop Caps) \u0628\u0627 first-letter \u0648 initial-letter"},"content":{"rendered":"

\u062d\u0631\u0648\u0641 \u0628\u0632\u0631\u06af \u0627\u0628\u062a\u062f\u0627\u06cc \u067e\u0627\u0631\u0627\u06af\u0631\u0627\u0641 \u06cc\u0627 Drop Caps<\/strong> \u0633\u0627\u0644\u200c\u0647\u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0631\u0633\u0627\u0646\u0647\u200c\u0647\u0627\u06cc \u0686\u0627\u067e\u06cc \u0628\u0631\u0627\u06cc \u062c\u0630\u0627\u0628\u200c\u062a\u0631 \u06a9\u0631\u062f\u0646 \u0627\u0628\u062a\u062f\u0627\u06cc \u0641\u0635\u0644\u200c\u0647\u0627 \u0648 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f. \u0627\u06cc\u0646 \u062d\u0631\u0648\u0641 \u0628\u0632\u0631\u06af \u062a\u0648\u062c\u0647 \u062e\u0648\u0627\u0646\u0646\u062f\u0647 \u0631\u0627 \u062c\u0644\u0628 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u0645\u062a\u0646 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc\u200c\u062a\u0631 \u0648 \u0632\u06cc\u0628\u0627\u062a\u0631 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f. \u062f\u0631 CSS \u0646\u06cc\u0632 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u06cc\u0646 \u0627\u0641\u06a9\u062a \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0634\u0628\u0647\u200c\u0639\u0646\u0635\u0631 ::first-letter<\/code> \u0648 \u0648\u06cc\u0698\u06af\u06cc \u062c\u062f\u06cc\u062f initial-letter<\/code> \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0631\u062f.<\/p>\n

\n

\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0634\u0628\u0647\u200c\u0639\u0646\u0635\u0631 ::first-letter<\/code><\/span><\/h3>\n

\u0634\u0628\u0647\u200c\u0639\u0646\u0635\u0631 ::first-letter<\/code> \u0645\u0634\u0627\u0628\u0647 ::before<\/code> \u0648 ::after<\/code> \u0639\u0645\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0627\u0648\u0644\u06cc\u0646 \u062d\u0631\u0641 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0631\u0627 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0641\u0632\u0648\u062f\u0646 HTML \u0627\u0636\u0627\u0641\u06cc\u060c \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0627\u0633\u062a\u0627\u06cc\u0644\u200c\u062f\u0647\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0646\u0645\u0648\u0646\u0647 \u06a9\u062f:<\/p>\n

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
article<\/span> p<\/span>:first-child<\/span>::first-letter<\/span> {\r\n  color: hotpink<\/span>;\r\n  padding: 0<\/span> .3<\/span>rem<\/span>;\r\n  margin: 0<\/span> .3<\/span>rem<\/span> 0<\/span> 0<\/span>;\r\n  border: 2<\/span>px<\/span> solid<\/span>;\r\n  border-radius: 8<\/span>px<\/span>;\r\n  font-family: \"IBM Plex Mono\"<\/span>, monospace<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u0627\u0648\u0644\u06cc\u0646 \u062d\u0631\u0641 \u0627\u0648\u0644\u06cc\u0646 \u067e\u0627\u0631\u0627\u06af\u0631\u0627\u0641 \u062f\u0627\u062e\u0644 \u0639\u0646\u0635\u0631 article<\/code> \u0628\u0627 \u0631\u0646\u06af\u060c \u062d\u0627\u0634\u06cc\u0647 \u0648 \u0641\u0648\u0646\u062a \u0645\u062a\u0641\u0627\u0648\u062a \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
\n
\u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u06a9\u0631\u062f\u0646 \u062d\u0631\u0641 \u0627\u0648\u0644<\/h3>\n
\u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062f\u0631 Drop Cap \u062d\u0631\u0641 \u0627\u0648\u0644 \u0628\u0627\u06cc\u062f \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0627\u0632 \u0645\u062a\u0646 \u0639\u0627\u062f\u06cc \u0628\u0627\u0634\u062f. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 font-size<\/code> \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f:<\/p>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
article<\/span> p<\/span>:first-child<\/span>::first-letter<\/span> {\r\n  color: hotpink<\/span>;\r\n  padding: 0<\/span> .3<\/span>rem<\/span>;\r\n  margin: 0<\/span> .3<\/span>rem<\/span> 0<\/span> 0<\/span>;\r\n  border: 2<\/span>px<\/span> solid<\/span>;\r\n  border-radius: 8<\/span>px<\/span>;\r\n  font-family: \"IBM Plex Mono\"<\/span>;\r\n\r\n  font-size: 4<\/span>rem<\/span>;\r\n  line-height: 1<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u062d\u0631\u0641 \u0627\u0648\u0644 \u06f4 \u0628\u0631\u0627\u0628\u0631 \u0628\u0632\u0631\u06af\u200c\u062a\u0631 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 line-height<\/code> \u06a9\u0627\u0647\u0634 \u06cc\u0627\u0641\u062a\u0647 \u062a\u0627 \u0627\u0631\u062a\u0641\u0627\u0639 \u062e\u0637 \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0627\u0641\u0632\u0627\u06cc\u0634 \u067e\u06cc\u062f\u0627 \u0646\u06a9\u0646\u062f.<\/p>\n
\u0627\u0645\u0627 \u0647\u0646\u0648\u0632 \u06cc\u06a9 \u0645\u0634\u06a9\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f: \u062d\u0631\u0641 \u0628\u0632\u0631\u06af \u0648\u0627\u0642\u0639\u0627\u064b \u0628\u0647 \u062f\u0627\u062e\u0644 \u0686\u0646\u062f \u062e\u0637 \u0645\u062a\u0646 “\u0633\u0642\u0648\u0637” \u0646\u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0638\u0627\u0647\u0631 \u06a9\u0644\u0627\u0633\u06cc\u06a9 Drop Cap \u0631\u0627 \u0646\u062f\u0627\u0631\u062f.<\/p>\n
\n
\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 float<\/code><\/span><\/h3>\n
\u06cc\u06a9\u06cc \u0627\u0632 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0642\u062f\u06cc\u0645\u06cc \u0648 \u0631\u0627\u06cc\u062c \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f Drop Cap \u0648\u0627\u0642\u0639\u06cc\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 float<\/code> \u0627\u0633\u062a:<\/p>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
article<\/span> p<\/span>:first-child<\/span>::first-letter<\/span> {\r\n  color: hotpink<\/span>;\r\n  padding: 0<\/span> .3<\/span>rem<\/span>;\r\n  margin: 0<\/span> .3<\/span>rem<\/span> 0<\/span> 0<\/span>;\r\n  border: 2<\/span>px<\/span> solid<\/span>;\r\n  border-radius: 8<\/span>px<\/span>;\r\n  font-family: \"IBM Plex Mono\"<\/span>, monospace<\/span>;\r\n\r\n  font-size: 4<\/span>rem<\/span>;\r\n  float: left<\/span>;\r\n  line-height: 1<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a\u060c \u062d\u0631\u0641 \u0627\u0648\u0644 \u0628\u0647 \u0633\u0645\u062a \u0686\u067e \u0634\u0646\u0627\u0648\u0631 \u0634\u062f\u0647 \u0648 \u0645\u062a\u0646 \u062f\u0631 \u0627\u0637\u0631\u0627\u0641 \u0622\u0646 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f\u061b \u062f\u0642\u06cc\u0642\u0627\u064b \u0645\u0634\u0627\u0628\u0647 \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u062f\u0631 \u0645\u062c\u0644\u0627\u062a \u0648 \u06a9\u062a\u0627\u0628\u200c\u0647\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f.<\/p>\n
\u0645\u0632\u06cc\u062a \u0627\u06cc\u0646 \u0631\u0648\u0634\u060c \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u06a9\u0627\u0645\u0644 \u062f\u0631 \u062a\u0645\u0627\u0645\u06cc \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0627\u0633\u062a.<\/p>\n
\n
\u0648\u06cc\u0698\u06af\u06cc \u062c\u062f\u06cc\u062f initial-letter<\/code><\/span><\/h3>\n
CSS \u0648\u06cc\u0698\u06af\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0628\u0647 \u0646\u0627\u0645 initial-letter<\/code> \u0645\u0639\u0631\u0641\u06cc \u06a9\u0631\u062f\u0647 \u06a9\u0647 \u0633\u0627\u062e\u062a Drop Cap \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
\u0628\u0647 \u062c\u0627\u06cc \u0645\u062d\u0627\u0633\u0628\u0647 \u0627\u0646\u062f\u0627\u0632\u0647 \u0641\u0648\u0646\u062a \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 float<\/code>\u060c \u0641\u0642\u0637 \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u062a\u0639\u062f\u0627\u062f \u062e\u0637\u0648\u0637\u06cc \u06a9\u0647 \u062d\u0631\u0641 \u0628\u0627\u06cc\u062f \u067e\u0648\u0634\u0634 \u062f\u0647\u062f \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f:<\/p>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
article<\/span> p<\/span>:first-child<\/span>::first-letter<\/span> {\r\n  color: hotpink<\/span>;\r\n  padding-right: 8<\/span>px<\/span>;\r\n\r\n  -webkit-initial-letter: 3<\/span>;\r\n  initial-letter: 3<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\u0639\u062f\u062f 3<\/code> \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u062d\u0631\u0641 \u0627\u0648\u0644 \u0628\u0627\u06cc\u062f \u0627\u0631\u062a\u0641\u0627\u0639\u06cc \u0645\u0639\u0627\u062f\u0644 \u0633\u0647 \u062e\u0637 \u0645\u062a\u0646 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f. \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0647\u200c\u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0645\u0646\u0627\u0633\u0628 \u0641\u0648\u0646\u062a \u0631\u0627 \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n
\n
\u0645\u0632\u0627\u06cc\u0627\u06cc initial-letter<\/code><\/span><\/h3>\n