CSS ﻥﻮﺘﺳ ﺪﻨﭼ

فهرست مطالب

CSS ﯽﻧﻮﺘﺳ ﺪﻨﭼ ﯼﺪﻨﺑ ﺡﺮﻃ

:ﺎﻫ ﻪﻣﺎﻧﺯﻭﺭ ﺪﻨﻧﺎﻣ ﺖﺳﺭﺩ - ﺪﻨﮐ ﯽﻣ ﻢﻫﺍﺮﻓ ﺍﺭ ﻦﺘﻣ ﻥﻮﺘﺳ ﻦﯾﺪﻨﭼ ﻥﺎﺳﺁ ﻒﯾﺮﻌﺗ ﻥﺎﮑﻣﺍ CSS ﯽ

Daily Ping

Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

CSS ﯽﻧﻮﺘﺳ ﺪﻨﭼ ﯼﺎﻫ ﯽﮔﮋﯾﻭ

:ﺪﺷ ﺪﯿﻫﺍﻮﺧ ﺎﻨﺷﺁ ﺮﯾﺯ ﯽﻧﻮﺘﺳ ﺪﻨﭼ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺎﺑ ﻞﺼﻓ ﻦﯾﺍ ﺭﺩ

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ

.ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﯽﮔﮋﯾﻭ ﺯﺍ ﻞﻣﺎﮐ ﺭﻮﻃ ﻪﺑ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ ﻝﻭﺪﺟ

Property
column-count	50.0	10.0	52.0	9.0	37.0
column-gap	50.0	10.0	52.0	9.0	37.0
column-rule	50.0	10.0	52.0	9.0	37.0
column-rule-color	50.0	10.0	52.0	9.0	37.0
column-rule-style	50.0	10.0	52.0	9.0	37.0
column-rule-width	50.0	10.0	52.0	9.0	37.0
column-span	50.0	10.0	71.0	9.0	37.0
column-width	50.0	10.0	52.0	9.0	37.0

CSS ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﻥﻮﺘﺳ ﻦﯾﺪﻨﭼ

ﺪﻨﮐ ﺺﺨﺸﻣ ﺪﯾﺎﺑ ﺪﯾﺎﺑ ﺮﺼﻨﻋ ﮏﯾ ﻪﮐ ﺍﺭ ﯽﯾﺎﻫ ﻥﻮﺘﺳ ﺩﺍﺪﻌﺗ col

ﺪﻨﮐ ﯽﻣ ﻢﯿﺴﻘﺗ 3 ﻪﺑ ﺍﺭ <div> ﺮﺼﻨﻋ ﻦﺘﻣ ﺮﯾﺯ ﻝﺎﺜﻣ

`ﻝﺎﺜﻣ`

div
{
  column-count: 3;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
}
</style>
</head>
<body>

<h1>Create Multiple Columns</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

`CSS ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻪﻠﺻﺎﻓ`

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻪﻠﺻﺎﻓ column-gap

:ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﯽﻠﺴﮑﯿﭘ 40 ﻑﺎﮑﺷ ﮏﯾ ﺮﯾﺯ ﻝﺎﺜﻣ

`ﻝﺎﺜﻣ`

div
{
  column-gap: 40px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
}
</style>
</head>
<body>

<h1>Specify the Gap Between Columns</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 
</div>

</body>
</html>

`CSS ﻥﻮﺘﺳ ﻦﯿﻧﺍﻮﻗ`

ﻦﯿﺑ ﻥﻮﻧﺎﻗ ﮏﺒﺳ column-rule-style ﯽﮔﮋﯾﻭ

`ﻝﺎﺜﻣ`

div
{
  column-rule-style: solid;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
}
</style>
</head>
<body>

<h1>Add a Rule Between the Columns</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

:ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻥﻮﻧﺎﻗ ﺽﺮﻋ column-rule-wi

`ﻝﺎﺜﻣ`

div
{
  column-rule-width: 1px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-width: 1px;
}
</style>
</head>
<body>

<h1>Set the Rule Width</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

:ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻥﻮﻧﺎﻗ ﮓﻧﺭ column-rule-co

`ﻝﺎﺜﻣ`

div
{
  column-rule-color: lightblue;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: lightblue;
}
</style>
</head>
<body>

<h1>Set the Rule Color</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

.ﺖﺳﺍ ﻻﺎﺑ ﺭﺩ *-column-rule ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ

:ﺪﻨﮐ ﯽﻣ ﻢﯿﻈﻨﺗ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﺍﺭ ﻥﻮﻧﺎﻗ ﮓﻧﺭ ﻭ ﮏﺒﺳ ،ﺽﺮﻋ ﺮﯾﺯ ﻝﺎﺜﻣ

`ﻝﺎﺜﻣ`

div
{
  column-rule: 1px solid lightblue;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}
</style>
</head>
<body>

<h1>Use the column-rule Shorthand Property</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

`ﺪﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻥﻮﺘﺳ ﺪﻨﭼ ﺪﯾﺎﺑ ﺮﺼﻨﻋ ﮏﯾ ﻪﮐ ﺪﯿﻨﮐ ﺺﺨﺸﻣ`

.ﺪﺷﺎﺑ ﻥﻮﺘﺳ ﺪﻨﭼ ﺽﺮﻋ ﺭﺩ ﺪﯾﺎﺑ ﺮﺼﻨﻋ ﮏﯾ ﻪﮐ ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ

`ﻝﺎﺜﻣ`

h2 {
  column-span: all;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}

h2 {
  column-span: all;
}
</style>
</head>
<body>

<div class="newspaper">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

`ﺪﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﻥﻮﺘﺳ ﺽﺮﻋ`

.ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺎﻫ ﻥﻮﺘﺳ ﯼﺍﺮﺑ ﺍﺭ ﯼﺩﺎﻬﻨﺸﯿﭘ ﻭ ﻪﻨﯿﻬﺑ ﺽﺮﻋ co

ﺎﻫ ﻥﻮﺘﺳ ﯼﺍﺮﺑ ﯼﺩﺎﻬﻨﺸﯿﭘ ﻪﻨﯿﻬﺑ ﺽﺮﻋ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺮﯾﺯ ﻝﺎﺜﻣ

`ﻝﺎﺜﻣ`

div {
  column-width: 100px;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
  column-width: 100px;
}
</style>
</head>
<body>

<h1>Specify The Column Width</h1>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>

</body>
</html>

`CSS ﯽﻧﻮﺘﺳ ﺪﻨﭼ ﯼﺎﻫ ﯽﮔﮋﯾﻭ`

:ﺪﻨﮐ ﯽﻣ ﺖﺳﺮﻬﻓ ﺍﺭ ﯽﻧﻮﺘﺳ ﺪﻨﭼ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﺮﯾﺯ ﻝﻭﺪﺟ

column-count: ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺩﻮﺷ ﻢﯿﺴﻘﺗ ﺎﻬﻧﺁ ﻪﺑ ﺪﯾﺎﺑ ﺮﺼﻨﻋ ﮏﯾ ﻪﮐ ﺍﺭ ﯽﯾﺎﻫ ﻥﻮﺘﺳ ﺩﺍﺪﻌﺗ
column-fill: ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻥﺩﺮﮐ ﺮﭘ ﻩﻮﺤﻧ
column-gap: ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻪﻠﺻﺎﻓ
column-rule: *-ﻩﺪﻋﺎﻗ-ﻥﻮﺘﺳ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ
column-rule-color: ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻥﻮﻧﺎﻗ ﮓﻧﺭ
column-rule-style: ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻥﻮﻧﺎﻗ ﮏﺒﺳ
column-rule-width: ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺎﻫ ﻥﻮﺘﺳ ﻦﯿﺑ ﻥﻮﻧﺎﻗ ﺽﺮﻋ
column-span: ﺩﺮﯿﮕﺑ ﺮﺑ ﺭﺩ ﺍﺭ ﻥﻮﺘﺳ ﺪﻨﭼ ﺪﯾﺎﺑ ﺮﺼﻨﻋ ﮏﯾ ﻪﮐ ﺪﻨﮐﯽﻣ ﺺﺨﺸﻣ
column-width: ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺎﻫ ﻥﻮﺘﺳ ﯼﺍﺮﺑ ﺍﺭ ﯼﺩﺎﻬﻨﺸﯿﭘ ﻭ ﻪﻨﯿﻬﺑ ﺽﺮﻋ
columns: ﻥﻮﺘﺳ ﺩﺍﺪﻌﺗ ﻭ ﻥﻮﺘﺳ ﺽﺮﻋ ﻢﯿﻈﻨﺗ ﯼﺍﺮﺑ ﺮﺼﺘﺨﻣ ﯽﮔﮋﯾﻭ ﮏﯾ


  
    
      ← صفحه قبلی
    
    
      صفحه بعد →