「CSS版面配置」修訂間的差異
跳至導覽
跳至搜尋
（→研究） |
|||
| （未顯示同一使用者於中間所作的 6 次修訂） | |||
| 第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 布署=== | ||
| − | + | 主要的基本樣式在 /skins/monobook/main.css 當中，如 | |
<pre>a.external { | <pre>a.external { | ||
| − | + | …… | |
}</pre> | }</pre> | ||
| + | 規範了一系列「外部連結」的表現方式。 | ||
| + | |||
| + | 而不同的布景會再補充，如 /skins/vector/components/externalLinks.less 中： | ||
| + | <pre>@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; | ||
| + | } | ||
| + | }</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 (優先適用) 的指示。