CSS content

admin發表於2018-08-08
CSS

此屬性通常和偽物件選擇器一起配合使用。

一.插入簡單的字串:

content屬性可以規定要插入的字串內容，通常要和偽類選擇器一起使用。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:250px;
  height:100px;
  text-align:center;
}
div::after{
  content:"softwhy.com";
}
</style>
</head>
<body>
<div>本站url地址是:</div>
</body>
</html>

content後面可以設定要插入的字串內容，需要用引號進行包裹。

如果要插入引號之類的字元，可以使用類似於程式設計程式碼中的轉義字元來實現。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:250px;
  height:100px;
  text-align:center;
}
div::after{
  content:"\"softwhy.com\"";
}
</style>
</head>
<body>
<div>本站url地址是:</div>
</body>
</html>

上面的程式碼可以在div的後部追加一個帶有雙引號的字串。當然也可以使用下面將要介紹的方式。

二.open-quote和close-quote作為屬性值:

如果對open-quote和close-quote不夠了解可以參閱CSS3 quotes 屬性一章節。

open-quote和close-quote分別表示巢狀的開始標記和結束標記。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{quotes:"(" ")" }
div::before{
  content: open-quote;
}
div::after{
  content:close-quote;
}
</style>
</head>
<body>
<div>本站的url地址是softwhy.com</div>
</body>
</html>

字串最終會被小括號包裹，當然開始標記和結束標記可以根據需要隨意設定的。

三.插入圖片:

使用此屬性可以給元素插入圖片:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div::before{
  content:url(template/comiis_x3dfmh/comiis_pic/logo.png);
}
</style>
</head>
<body>
<div>本站的url地址是softwhy.com</div>
</body>
</html>

上面的程式碼可以在div的前面新增一個圖片，使用url來規定圖片的地址。

四.插入元素的屬性值:

可以從元素中獲取屬性，然後再插入到元素中，程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div::after{
  content:attr(url);
}
</style>
</head>
<body>
<div url="softwhy.com">本站的url地址是</div>
</body>
</html>

上面的程式碼可以獲取div自定義的url屬性值，然後插入到div元素的尾部。

相關文章