Memahami CSS ' Kandungan ' Harta

mata teras

Atribut

CSS
• digunakan bersamaan dengan unsur-unsur pseudo content dan ::before untuk memasukkan kandungan yang dihasilkan ke dalam halaman web. Ia menyokong pelbagai nilai termasuk ::after, normal, counter, string, attr, open-quote, url, initial, dan inherit.
• content Ciri -ciri boleh digunakan untuk memasukkan nilai teks, aksara yang dikodkan, fail media, dan juga kaunter. Sebagai contoh, fungsi attr() boleh digunakan untuk memasukkan nilai harta yang ditentukan.
• open-quote atau close-quote Nilai Gunakan atribut content untuk menghasilkan petikan terbuka atau tertutup. Nilai no-open-quote atau no-close-quote boleh digunakan untuk mengeluarkan petikan terbuka atau tertutup dari elemen yang ditentukan.
• Walaupun atribut CSS content digunakan terutamanya dengan ::before dan ::after pseudo-elements, ia juga boleh digunakan dengan unsur-unsur pseudo untuk menyesuaikan penampilan peluru atau nombor senarai. ::marker

Jika anda seorang pemaju front-end, anda mungkin telah mendengar tentang unsur-unsur pseudo dan sifat-sifat

CSS. Artikel ini tidak akan masuk ke dalam menyelam dalam unsur-unsur pseudo, tetapi jika anda tidak biasa dengan konsep atau memerlukan semakan cepat, disarankan agar anda menyemak artikel Louis Lazaris mengenai Majalah Smashing. content

Artikel ini akan memberi tumpuan kepada atribut

. Atribut CSS content digunakan dengan content ::before ::after

sintaks asas atribut

Sintaks atribut content adalah seperti berikut, yang mengandungi setiap nilai:

content CSS berbeza sedikit di antara nilai yang berbeza. Contohnya, untuk menggunakan nilai

dengan

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

atau

, anda perlu menulis CSS seperti ini: attr() ::before ::after Ini hanya satu contoh dan akan diperkenalkan secara terperinci kemudian. Dalam bahagian berikut, saya akan membincangkan setiap nilai, termasuk

.

p::after {
  content: " (" attr(title) ")";
}

attr() nilai:

atau

Apabila none ditetapkan kepada normal, tiada pseudo-elemen dihasilkan. Jika anda menetapkannya kepada , untuk elemen pseudo

dan

, ia akan dikira sebagai none. normal ::before ::after Kaedah ini boleh digunakan untuk unsur-unsur bersarang yang sudah menentukan unsur-unsur pseudo, tetapi anda ingin mengatasi unsur-unsur pseudo dalam beberapa konteks. none

p::before {
  content: normal;
}

p::after {
  content: none;
}

Nilai:

Nilai ini menetapkan kandungan ke rentetan dan boleh menjadi kandungan teks. Jika aksara bukan Latin digunakan, watak-watak perlu dikodkan. Mari lihat setiap contoh. Pertimbangkan html berikut:

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

maka CSS berikut:

p::after {
  content: " (" attr(title) ")";
}

di sini, kami memasukkan kandungan teks ke dalam salah satu item senarai dan masukkan aksara yang dikodkan (dalam hal ini simbol hak cipta) ke dalam elemen perenggan.

Nilai rentetan mesti disertakan dalam petikan, yang boleh menjadi petikan tunggal atau berganda.

Nilai: <uri></uri>

Nilai <uri></uri> sangat mudah apabila anda berminat untuk memaparkan medium tertentu, yang boleh anda lakukan dengan menunjuk kepada sumber luaran seperti imej. Jika sumber atau imej tidak dapat dipaparkan untuk sebab tertentu, ia diabaikan atau beberapa pemegang tempat digunakan sebaliknya. Mari kita lihat beberapa kod yang menunjukkan nilai ini.

ini html:

p::before {
  content: normal;
}

p::after {
  content: none;
}

Ini adalah CSS yang menunjukkan favicon Sitepoint dan beberapa teks:

<h2 id="Tutorial-Categories">Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li>
</ol>

<p class="copyright">SitePoint, 2015</p>

nilai: counter() atau counters()

Nilai ini adalah nilai yang paling kompleks yang boleh digunakan dengan atribut

. Ia ditulis sebagai salah satu daripada dua fungsi yang berbeza- content atau counter(). Untuk perbincangan yang lebih terperinci mengenai kaunter CSS, lihat artikel ini. Tetapi inilah gambaran ringkas. counters()

Untuk fungsi pertama

, teks yang dihasilkan adalah nilai kaunter paling dalam nama yang anda tentukan dalam skop elemen pseudo ini. Secara lalai, ia diformat dalam perpuluhan, tetapi juga boleh diformat dalam angka Rom. counter()

Fungsi lain

adalah sama, tetapi mewakili semua kaunter dengan nama yang ditentukan (parameter pertama), mengikut urutan dari lapisan paling luar ke lapisan paling dalam. Semua nilai ini dipisahkan oleh rentetan yang ditentukan (parameter kedua). Jika anda menentukan nama pembolehubah kaunter sebagai counters(name, string), none, atau inherit, perisytiharan akan diabaikan. initial

Berikut adalah contoh cara menggunakan kaunter:

.new::after {
  content: " New!";
  color: green;
}

.copyright::before {
  content: "<pre class="brush:php;toolbar:false"><code class="language-html"><a class="sp" href="https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7">SitePoint</a>

a9 "; } ini adalah CSS:

.sp::before {
  content: url(https://www.php.cn/link/9a4b930f7a36153ca68fdf211c8836a7favicon.ico);
}

Ini akan menghitung item menggunakan kandungan yang dihasilkan, sama dengan senarai yang diperintahkan. Dalam kes ini, kita boleh menggunakan senarai yang diperintahkan dengan mudah. Jenis kaunter ini jauh lebih mudah apabila barang -barang yang dihitung disebarkan antara unsur -unsur lain.

Nilai: attr()

Seperti yang dinyatakan sebelum ini, fungsi

akan memasukkan nilai harta yang ditentukan, yang merupakan satu -satunya parameter. Jika elemen yang berkaitan tidak mempunyai atribut, rentetan kosong dikembalikan. attr()

ini adalah contoh:

<h2 id="Name-of-First-Four-Planets">Name of First Four Planets</h2>
<p class="planets">Mercury</p>
<p class="planets">Venus</p>
<p class="planets">Earth</p>
<p class="planets">Mars</p>

Menggunakan HTML di atas, CSS berikut akan memaparkan nilai atribut

dalam kurungan di sebelah teks pautan: href

.planets {
  counter-increment: planetIndex;
}

.planets::before {
  content: counter(planetIndex) ". ";
}

Trik ini sering digunakan dalam helaian gaya cetak untuk membolehkan pautan dipaparkan di laman web bercetak.

nilai: atau open-quote close-quoteApabila

ditetapkan kepada salah satu daripada nilai -nilai ini, atribut content menghasilkan petikan terbuka atau tertutup. Ia biasanya digunakan dengan unsur -unsur <q></q>, tetapi anda boleh menggunakannya dengan mana -mana elemen. Oleh itu, anda boleh melakukan perkara berikut:

p::before {
  content: normal|counter|attr|string|open-quote|url|initial|inherit;
}

Nilai

close-quote hanya terpakai kepada pseudo-elemen ::after (sebabnya jelas), dan jika anda menggunakan ::before dan tidak ada nilai open-quote pada elemen yang sama, ia tidak akan menghasilkan apa sahaja.

nilai: no-open-quote atau no-close-quote Nilai

akan mengeluarkan petikan terbuka dari elemen yang ditentukan, dan nilai no-open-quote akan mengeluarkan petikan tertutup. Anda mungkin tertanya -tanya bagaimana nilai -nilai ini boleh berguna. Lihat HTML berikut: no-close-quote

p::after {
  content: " (" attr(title) ")";
}

Perhatikan bahawa dalam perenggan sebelumnya, penceramah memetik seseorang ("seorang lelaki yang bijak ..."), dan orang ini sebaliknya memetik orang lain ("mereka berkata ..."). Oleh itu, petikan kami bersarang dalam tiga lapisan. Secara sintaktik, ada cara yang betul untuk menangani masalah ini. Jika menggunakan kandungan yang dihasilkan, berikut adalah cara kita dapat memastikan bahawa sebut harga bersarang dengan betul:

p::before {
  content: normal;
}

p::after {
  content: none;
}

Pemilih pertama menggunakan harta

untuk menentukan jenis sebut harga yang kami mahu gunakan, dengan kedalaman tiga lapisan. Kemudian kami memasukkan petikan sebagai kandungan menggunakan unsur-unsur pseudo. Ini sama dengan apa yang kami lakukan di bahagian sebelumnya. quotes

Tetapi bagaimana jika atas sebab tertentu kita mahu mengabaikan lapisan kedua sebut harga tanpa memasukkannya? Kita boleh menimpa mereka menggunakan

dan no-open-quote nilai: no-close-quote

<h2 id="Tutorial-Categories">Tutorial Categories</h2>
<ol>
  <li>HTML and CSS</li>
  <li class="new">Sass & Less</li>
  <li>JavaScript</li>
</ol>

<p class="copyright">SitePoint, 2015</p>

Dalam kes ini, saya menambah kelas yang dipanggil

ke lapisan kedua sebut harga. Ini memastikan bahawa bersarang kutipan masih diiktiraf, tetapi sebut harga untuk elemen tidak muncul. Oleh itu, lapisan ketiga petikan dalam perenggan ini akan mempunyai pendakap keriting berganda dan bukannya pendakap keriting tunggal. noquotes

Kesimpulan

Saya harap tutorial ini membantu anda memahami dengan lebih baik setiap nilai harta

dan cara menggunakannya dalam pelbagai senario. content

Soalan Lazim (FAQ) Mengenai Atribut Kandungan CSS

Apakah sifat kandungan CSS dan bagaimana menggunakannya?

CSS

Properties adalah alat yang berkuasa yang membolehkan anda memasukkan kandungan yang dihasilkan ke dalam susun atur halaman anda. Ia biasanya digunakan dengan unsur-unsur pseudo content dan ::before, menambah kandungan hiasan melalui CSS dan bukannya memasukkannya dalam HTML. Sebagai contoh, anda boleh menggunakan atribut ::after untuk memasukkan petikan di sekitar rujukan blok, atau menambah imej hiasan sebelum tajuk. content Nilai atribut boleh menjadi rentetan, URL, kaunter, atau bahkan nilai atribut. content

atribut kandungan CSS boleh digunakan dengan unsur -unsur selain ::before dan ::after?

atribut CSS

digunakan terutamanya dengan content dan ::before pseudo-elements. Walau bagaimanapun, ia juga boleh digunakan dengan pseudo-elemen ::after, yang mewakili kotak tag untuk item senarai. Ini membolehkan anda menyesuaikan penampilan peluru atau nombor senarai. ::marker

Bagaimana menggunakan atribut kandungan CSS untuk memaparkan nilai atribut?

CSS

sifat boleh dipaparkan menggunakan fungsi content. Sebagai contoh, anda boleh menggunakannya untuk memaparkan nilai harta attr() pautan supaya pengguna dapat melihat URL sebenar. Sintaks akan href. content: attr(href)

Bolehkah saya memasukkan imej menggunakan sifat kandungan CSS?

Ya, harta CSS

boleh dimasukkan ke dalam imej menggunakan fungsi content. Imej akan dimasukkan ke dalam elemen pseudo url() atau ::before diletakkan. Sebagai contoh, ::after akan memasukkan imej yang dinamakan image.jpg. content: url(image.jpg)

Bagaimana menggunakan kaunter dengan sifat kandungan CSS?

Harta boleh dipaparkan menggunakan fungsi

atau content. Ini berguna untuk tajuk atau bahagian penomboran secara automatik dalam dokumen. Anda mula -mula membuat atau menetapkan semula kaunter menggunakan harta counter() dan kenaikan menggunakan harta counters(). Anda kemudian boleh menggunakan counter-reset untuk memaparkan nilai semasa kaunter. counter-increment content: counter(myCounter) Bolehkah saya menggunakan aksara khas dalam sifat kandungan CSS?

Ya, anda boleh menggunakan aksara khas dalam atribut CSS

dengan menggunakan Unicode mereka. Sebagai contoh,

akan memasukkan peluru. Ingatlah untuk sentiasa bermula dengan backslash () Unicode. content content: “22” Adakah atribut kandungan CSS mempengaruhi SEO?

Kandungan yang ditambah melalui CSS biasanya dianggap hiasan, bukan kandungan yang harus diindeks oleh enjin carian. Oleh itu, adalah lebih baik untuk menggunakan atribut CSS

untuk kandungan hiasan dan bukannya yang penting untuk SEO.

content Bolehkah saya memasukkan HTML menggunakan atribut kandungan CSS?

tidak, atribut CSS

tidak boleh digunakan untuk memasukkan HTML. Ia hanya boleh memasukkan teks, imej, kaunter, dan nilai atribut. Jika anda perlu memasukkan HTML, anda harus melakukan ini secara langsung dalam dokumen HTML atau menggunakan JavaScript.

content Adakah atribut kandungan CSS disokong oleh semua pelayar?

CSS

Semua pelayar moden, termasuk Chrome, Firefox, Safari, dan Edge, menyokong atribut CSS

secara meluas. Walau bagaimanapun, ia mungkin tidak disokong sepenuhnya dalam versi lama Internet Explorer. content

Bolehkah saya menghidupkan sifat kandungan CSS?

tidak, atribut CSS content tidak boleh menjadi animasi. Ini kerana ia bukan harta dengan pelbagai nilai, tetapi sebaliknya nilai tertentu ditetapkan. Jika anda perlu membuat animasi, pertimbangkan untuk menggunakan sifat CSS lain yang boleh animasi, seperti opacity atau transform.

Atas ialah kandungan terperinci Memahami CSS ' Kandungan ' Harta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!