CSS版面配置：修訂版本之間的差異
出自六年制學程
（→MediaWiki 的 CSS 布署） |
|||
| （未顯示同用戶所作出之3次版本） | |||
| 第 1 行： | 第 1 行： | ||
| − | [[分類: | + | [[分類:CSS]]<pre> |
{{#css: | {{#css: | ||
.toc { | .toc { | ||
| 第 59 行： | 第 59 行： | ||
} | } | ||
} | } | ||
| − | }} | + | }}</pre> |
<table width='500px'><tr><th width=50%> | <table width='500px'><tr><th width=50%> | ||
<ul class='toc'><ul> | <ul class='toc'><ul> | ||
| 第 89 行： | 第 89 行： | ||
===CSS background-image 基本語法=== | ===CSS background-image 基本語法=== | ||
<pre>background-image: url('圖片網址');</pre> | <pre>background-image: url('圖片網址');</pre> | ||
| − | url 小括號內有三種可以使用的參數，分別為 none(預設值，不顯示圖片) | + | url 小括號內有三種可以使用的參數，分別為 |
| + | #none(預設值，不顯示圖片) | ||
| + | #inherit(繼承自父層) | ||
| + | #圖片網址。 | ||
===MediaWiki 的 CSS 布署=== | ===MediaWiki 的 CSS 布署=== | ||
| 第 109 行： | 第 112 行： | ||
} | } | ||
}</pre> | }</pre> | ||
| + | 而 /skins/common/ 之下的 shared.css 和 commonPrint.css 也都會在不同應用脈絡下對外部連結再作補充，而且還下了 !important (優先適用) 的指示。 | ||
2024年7月7日 (日) 16:40的最新修訂版本
{{#css:
.toc {
line-height: 1.5em;
padding-left: 0;
}
.toc ul {
padding: 0;
width: 100%;
margin: auto;
border:0;
}
.toc li {
list-style-type:none;
margin-bottom: .5em;
}
.toc li a.external {
display: block;
text-align: center;
padding: .5em;
color: #fff;
/* background-image:url('/wiki1231/skins/vector/images/dot.gif'); 所有對圖的改變都導致整體設定失效 */
background-color: #D64078;
border: solid #B03060 1px;
border-bottom: solid #B03060 4px;
/* text-shadow: 0px 2px 0 #B03060; */
border-radius: .3em;
position: relative;
-webkit-transition: all 0.1s ease-out; /* Safari 3.2+, Chrome */
-moz-transition: all 0.1s ease-out; /* Firefox 4-15 */
-o-transition: all 0.1s ease-out; /* Opera 10.5–12.00 */
transition: all 0.1s ease-out; /* Firefox 16+, Opera 12.50+ */
}
.toc li a:link {color: #fff;}
.toc li a:visited.external {color: #fff;} /* 須蓋過 .external 的顏色設定 */
.toc li a:hover {
color: #fff;
text-decoration: none;
background-color: #c63b6f;
}
.toc li a:active {
color: #fff;
border-bottom: solid #b03060 1px;
top: 4px;
-webkit-transition: all 0 ease-out; /* Safari 3.2+, Chrome */
-moz-transition: all 0 ease-out; /* Firefox 4-15 */
-o-transition: all 0 ease-out; /* Opera 10.5–12.00 */
transition: all 0 ease-out; /* Firefox 16+, Opera 12.50+ */
}
@media screen and (min-width:601px) {
.toc {
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.2em;
}
}
}}
研究
上方的目錄原檔
CSS background-image 基本語法
background-image: url('圖片網址');
url 小括號內有三種可以使用的參數，分別為
- none(預設值，不顯示圖片)
- inherit(繼承自父層)
- 圖片網址。
MediaWiki 的 CSS 布署
主要的基本樣式在 /skins/monobook/main.css 當中，如
a.external {
……
}
規範了一系列「外部連結」的表現方式。
而不同的布景會再補充，如 /skins/vector/components/externalLinks.less 中：
@import "mediawiki.mixins.less";
// External links
#content {
.external {
background-position: center right;
background-repeat: no-repeat;
.background-image-svg('images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png');
padding-right: 13px;
}
}
而 /skins/common/ 之下的 shared.css 和 commonPrint.css 也都會在不同應用脈絡下對外部連結再作補充，而且還下了 !important (優先適用) 的指示。
