CSS ﯽﮔﮋﯾﻭ ﺮﮕﺑﺎﺨﺘﻧﺍ

فهرست مطالب

    نمایش فهرست مطالب

ﺹﺎﺧ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺎﺑ HTML ﺮﺻﺎﻨﻋ ﮏﺒﺳ

.ﺩﺭﺍﺩ ﺩﻮﺟﻭ ،ﺪﻨﺘﺴﻫ ﻪﺼﺨﺸﻣ ﺮﯾﺩﺎﻘﻣ ﺎﯾ ﺎﻫ ﯽﮔﮋﯾﻭ ﯼﺍﺭﺍﺩ ﻪﮐ HTML ﺮﺻﺎﻨﻋ ﻪﺑ ﻥﺩﺍﺩ ﻞﯾﺎﺘﺳﺍ

[ﯽﮔﮋﯾﻭ] CSS ﺮﮕﺑﺎﺨﺘﻧﺍ

ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻩﺪﺷ ﺺﺨﺸﻣ ﮏﯾ ﺎﺑ ﺮﺻﺎﻨﻋ ﺏﺎﺨﺘﻧﺍ ﯼﺍﺮﺑ [ﯽﮔﮋﯾﻭ]<"code class="w3

:ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﻑﺪﻫ ﯽﮔﮋﯾﻭ ﺎﺑ ﺍﺭ <a> ﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

a[target] {
  background-color: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

CSS [attribute="value"] ﺮﮕﺑﺎﺨﺘﻧﺍ

ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﻩﺪﺷ ﺺﺨﺸﻣ ﮏﯾ ﺎﺑ ﺮﺻﺎﻨﻋ ﺏﺎﺨﺘﻧﺍ ﯼﺍﺮﺑ [att

:ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ "target="_blank ﯽﮔﮋﯾﻭ ﺎﺑ ﺍﺭ <a> ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

a[target="_blank"] { 
  background-color: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"] {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>

<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

</body>
</html>

["ﺭﺍﺪﻘﻣ"=~ﯽﮔﮋﯾﻭ] CSS ﺮﮕﺑﺎﺨﺘﻧﺍ

.ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯽﮔﮋﯾﻭ ﮏﯾ ﯼﺍﺭﺍﺩ ﺮﺻﺎﻨﻋ ﺏﺎﺨﺘﻧﺍ ﯼﺍﺮﺑ [at

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﻥﺍﻮﻨﻋ ﯽﮔﮋﯾﻭ ﺎﺑ ﺍﺭ ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻝﺎﺜﻣ

[title~="flower"] {
  border: 5px solid yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
[title~="flower"] {
  border: 5px solid yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a yellow border.</p>

<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">

</body>
</html>

ﺩﺍﺩ ﺪﻫﺍﻮﺧ ﺖﻘﺑﺎﻄﻣ title="flower"، title="summer ﺎﺑ ﺍﺭ ﺮﺻﺎﻨﻋ ﻻﺎﺑ ﻝﺎﺜﻣ

["ﺭﺍﺪﻘﻣ=|ﯽﮔﮋﯾﻭ] CSS ﺮﮕﺑﺎﺨﺘﻧﺍ

["ﺭﺍﺪﻘﻣ"=|ﻪﺼﯿﺼﺧ]<"code class="w3-codespan> ﺮﮕﺑﺎﺨﺘﻧﺍ

ﻪﺟﻮﺗ: ﺪﻨﻧﺎﻣ ،ﯽﯾﺎﻬﻨﺗ ﻪﺑ ﺎﯾ ،ﺪﺷﺎﺑ ﻞﻣﺎﮐ ﻪﻤﻠﮐ ﮏﯾ ﺪﯾﺎﺑ ﺭﺍﺪﻘﻣ

ﻝﺎﺜﻣ

[class|="top"] {
  background: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
[class|="top"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute|="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

["ﺭﺍﺪﻘﻣ=^ﯽﮔﮋﯾﻭ] CSS ﺮﮕﺑﺎﺨﺘﻧﺍ

[attribute^="value"] ﺮﮕﺑﺎﺨﺘﻧﺍ

ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺱﻼﮐ ﻪﺼﺨﺸﻣ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻪﺟﻮﺗ: ﺪﺷﺎﺑ ﻞﻣﺎﮐ ﻪﻤﻠﮐ ﮏﯾ ﺪﯾﺎﺒﻧ ﺵﺯﺭﺍ!

ﻝﺎﺜﻣ

[class^="top"] {
  background: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute^="value"] Selector</h2>

<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

["value"=$ﻪﺼﯿﺼﺧ] CSS ﺮﮕﺑﺎﺨﺘﻧﺍ

ﺎﻬﻧﺁ ﯽﮔﮋﯾﻭ ﻪﮐ ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺮﺻﺎﻨﻋ ﺏﺎﺨﺘﻧﺍ ﯼﺍﺮﺑ [att

ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺱﻼﮐ ﻪﺼﺨﺸﻣ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻪﺟﻮﺗ: ﺪﺷﺎﺑ ﻞﻣﺎﮐ ﻪﻤﻠﮐ ﮏﯾ ﺪﯾﺎﺒﻧ ﺵﺯﺭﺍ!

ﻝﺎﺜﻣ

[class$="test"] {
  background: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
[class$="test"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute$="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

["ﺭﺍﺪﻘﻣ"=*ﯽﮔﮋﯾﻭ] CSS ﺮﮕﺑﺎﺨﺘﻧﺍ

ﺎﻬﻧﺁ ﯽﮔﮋﯾﻭ ﻪﮐ ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ﯼﺮﺻﺎﻨﻋ ﺏﺎﺨﺘﻧﺍ ﯼﺍﺮﺑ [att

ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺱﻼﮐ ﻪﺼﺨﺸﻣ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ ﺮﺻﺎﻨﻋ ﻪﻤﻫ ﺮﯾﺯ ﻝﺎﺜﻣ

ﻪﺟﻮﺗ: ﺪﺷﺎﺑ ﻞﻣﺎﮐ ﻪﻤﻠﮐ ﮏﯾ ﺪﯾﺎﺒﻧ ﺵﺯﺭﺍ!

ﻝﺎﺜﻣ

[class*="te"] {
  background: yellow;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
[class*="te"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute*="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

ﻩﺪﺷ ﯽﺣﺍﺮﻃ ﺮﻫﺎﻇ ﮏﯾ ﯼﺎﻫ ﻡﺮﻓ

:ﺪﻨﺷﺎﺑ ﺪﯿﻔﻣ ﻪﺳﺎﻨﺷ ﺎﯾ ﺱﻼﮐ ﻥﻭﺪﺑ ﯼﺎﻫ ﻡﺮﻓ ﻪﺑ ﻥﺩﺍﺩ ﻞﯾﺎﺘﺳﺍ ﯼﺍﺮﺑ ﺪﻨﻧﺍﻮﺗ ﯽﻣ ﯽﮔﮋﯾﻭ ﯼﺎﻫﺮ

ﻝﺎﺜﻣ

input[type="text"]
{
  width: 150px;
   
display: block;
   
margin-bottom: 10px;
   
background-color: yellow;
}

input[type="button"]
{
  width: 120px;
  margin-left: 35px;
  display: block;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}
</style>
</head>
<body>

<h2>Styling Forms</h2>

<form name="input" action="" method="get">
  Firstname:<input type="text" name="Name" value="Peter" size="20">
  Lastname:<input type="text" name="Name" value="Griffin" size="20">
  <input type="button" value="Example Button">
</form>

</body>
</html>

ﻪﺘﮑﻧ: ﻝﺎﺜﻣ ﯼﺍﺮﺑﻡﺮﻓ ﻪﺑ ﻥﺩﺍﺩ ﻞﯾﺎﺘﺳﺍ ﻩﻮﺤﻧ ﻩﺭﺎﺑﺭﺩ ﺮﺘﺸﯿﺑ ﯼﺎﻫu

CSS ﯽﮔﮋﯾﻭ ﯼﺎﻫﺮﮕﺑﺎﺨﺘﻧﺍ ﻪﻤﻫ

[attribute]

ﻝﺎﺜﻣ

[target]

ﻝﺎﺜﻣ ﺡﺮﺷ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﻑﺪﻫ ﯽﮔﮋﯾﻭ ﺎﺑ ﺮﺻﺎﻨﻋ ﻡﺎﻤﺗ

[attribute=value]

ﻝﺎﺜﻣ

[target="_blank"]

ﻝﺎﺜﻣ ﺡﺮﺷ

ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ "target="_blank ﺎﺑ ﺮﺻﺎﻨﻋ ﻪﻤﻫ

[attribute~=value]

ﻝﺎﺜﻣ

[title~="flower"]

ﻝﺎﺜﻣ ﺡﺮﺷ

.ﺖﺳﺍ "ﻞﮔ" ﺎﻬﻧﺁ ﺯﺍ ﯽﮑﯾ ﻪﮐ ﺖﺳﺍ ﻪﻠﺻﺎﻓ ﺎﺑ ﻩﺪﺷ ﺍﺪﺟ ﺕﺎﻤﻠﮐ ﺯﺍ ﯽﺘﺴﯿﻟ ﯼﻭﺎﺣ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺏﺎ

[attribute|=value]

ﻝﺎﺜﻣ

[lang|="en"]

ﻝﺎﺜﻣ ﺡﺮﺷ

.ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺍﺭ ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ "en" ﺎﺑ ﻪﮐ lang ﻪﺼﺨﺸﻣ ﺭﺍﺪﻘﻣ ﺎﺑ ﺮﺻﺎﻨﻋ ﻪﻤﻫ

[attribute^=value]

ﻝﺎﺜﻣ

a[href^="https"]

ﻝﺎﺜﻣ ﺡﺮﺷ

.ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺩﻮﺷ ﯽﻣ ﻉﻭﺮﺷ "https" ﺎﺑ ﻪﮐ href ﻪﺼﺨﺸﻣ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <a> ﺮﺻﺎﻨﻋ ﻪﻤﻫ

[attribute$=value]

ﻝﺎﺜﻣ

a[href$=".pdf"]

ﻝﺎﺜﻣ ﺡﺮﺷ

.ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ ﺩﻮﺷ ﯽﻣ ﻢﺘﺧ "pdf." ﺎﺑ ﻪﮐ href ﻪﺼﺨﺸﻣ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <a> ﺮﺻﺎﻨﻋ ﻪﻤﻫ

[attribute*=value]

ﻝﺎﺜﻣ

a[href*="w3schools"]

ﻝﺎﺜﻣ ﺡﺮﺷ

.ﺪﻨﮐ ﯽﻣ ﺏﺎﺨﺘﻧﺍ "w3schools" ﻪﺘﺷﺭﺮﯾﺯ ﯼﻭﺎﺣ href ﻪﺼﺨﺸﻣ ﺭﺍﺪﻘﻣ ﺎﺑ ﺍﺭ <a> ﺮﺻﺎﻨﻋ ﻪﻤﻫ

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024