伊莉討論區

標題: 伊莉空間CSS語法簡易教學 [打印本頁]
作者: thgn5    時間: 2014-4-25 01:57 AM     標題: 伊莉空間CSS語法簡易教學

本帖最後由 thgn5 於 2014-6-3 05:22 PM 編輯

[attach]100665313[/attach]

#01，簡介、選擇器＆屬性介紹。
#02，範例展示。
#03，如何尋找選擇器＆編輯CSS。

層疊樣式表（Cascading Style Sheets，CSS），又稱串樣式列表、階層式樣式表檔案，是一種能做到網頁表現與內容分離的程式語言。網頁的作者和讀者（我們）能透過CSS決定網頁中的物件的顏色、字形、排版等顯示特性，當兩者的CSS檔有衝突時讀者可以選擇要使用哪一個。


CSS是由多組「規則」所組成。每個規則由「選擇器」、「屬性」和「值」組成：


【基本選擇器】


【空間首頁—選擇器】—要修改也要知道想改的地方叫做什麼名稱。
html
├ #toptb：上方列
│   │   ├ .y：右側
│   │   └ .z：左側
│   ├ #navs_menu：返回首頁
│   └ #myspace_menu：快捷導航
├ body：主背景區
├ #hd：標題區
│   │   ├ .mbn：空間名稱
│   │   └ .mtn：空間描述
│   └ #nv：空間功能鈕
│   　  └ li：空間功能鈕背景
├ #ct：內容區
│   ├ #profile：頭像
│   │   └ #profile_content：頭像內容區
│   ├ #visitor：訪客
│   │   └ #visitor_content：訪客內容區
│   ├ #friend：好友
│   │   └ #friend_content：好友內容區
│   ├ #personalinfo：個人資料
│   │   └ #personalinfo_content：個人資料內容區
│   ├ #statistic：統計信息
│   │   └ #statistic_content：統計信息內容區
│   ├ #music：音樂盒
│   │   └ #music_content：音樂盒內容區
│   ├ #stickblog：置頂日誌
│   │   └ #stickblog_content：置頂日誌內容區
│   ├ #blog：日誌
│   │   └ #blog_content：日誌內容區
│   ├ #album：相冊
│   │   └ #album_content：相冊內容區
│   ├ #wall：留言板
│   │   └ #wall_content：留言板內容區
│   ├ #group：群組
│   │   └ #group_content：群組內容區
│   ├ #block1：自由模塊1
│   │   └ #block1_content：自由模塊1內容區
│   ├ #block2：自由模塊2
│   │   └ #block2_content：自由模塊2內容區
│   ├ #block3：自由模塊3
│   │   └ #block3_content：自由模塊3內容區
│   ├ #block4：自由模塊4
│   │   └ #block4_content：自由模塊4內容區
│   ├ #block5：自由模塊5
│   │   └ #block5_content：自由模塊5內容區
│   ├ #thread：主題
│   │   └ #thread_content：主題內容區
│   ├ #feed：動態
│   │   └ #feed_content：動態內容區
│   ├ #share：分享
│   │   └ #share_content：分享內容區
│   ├ #doing：紀錄
│   │   └ #doing_content：紀錄內容區
│   └ .blocktitle：內容區20個子區塊的標題區
├ #ft：尾頁
└ #scrolltop：回頂部

§ 以上「#」有如電腦「C:\、D:\」，「.」有如路徑「D:\abc123\test」，兩者互相搭配明確指出欲修改的地方避免連同修改到其他地方。
§ 在路徑最後加上「a」則能定義該區塊的「超連結」部分，如「#ct .blocktitle a」。
§ 以上只列出「大項」部分，「細項」就由各位自己去研究了，如：訪客的訪問時間、日誌頁、相冊頁...等等。


【虛擬型別選擇器】
:link
:visited
:hover
:active
超連結未連結過。
超連結已連結過。
滑鼠在元素上面。
滑鼠在元素上按著。

a:link { color: #ff0000; }

a:visited { color: #0000ff; }

a:hover { color: #ffff00; }

a:active { color: #00ff00; }


【CSS基本樣式屬性】（以下圖片，右鍵 > 在新分頁中開啟影像，可見原圖。）
Background組群
（一行設定<部分屬性可忽略>：background: 背景顏色 背景圖片 排列方式 <固定/滾動> <x,y>;）
background-color
background-color: #FFFF00;
background-color: transparent;
background-color: rgba(0,255,255,0.4);
背景顏色。
背景透明。
背景顏色 以及 透明度。<透明 0 ~ 1 不透明>

使用背景圖片沒將背景顏色設定為透明可能會如圖 >>

background-image
background-image: url(圖片網址);
background-image: none;
指定圖像的網址。
不使用圖像。
background-repeat
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
背景圖不重複。
背景圖只在水平重複。
背景圖只在垂直重複。
背景圖在水平與垂直重複。

　　　

background-attachment（設定完如果無法看見圖片就換另一個模式）
background-attachment: fixed;
背景圖固定於視窗。
background-attachment: scroll;
背景圖隨著文件滾動。
background-position
background-position: 35% 100%;
background-position: 50 100;
background-position: left top;
background-position: center top;
background-position: right top;
background-position: left center;
background-position: center center;
background-position: right center;
background-position: left bottom;
background-position: center bottom;
background-position: right bottom;
用兩個百分比表示水平與垂直的起點。
用兩個長度值表示水平與垂直的起點。
設定左上位置。
設定中上位置。
設定右上位置。
設定左中位置。
設定正中位置。
設定右中位置。
設定左下位置。
設定中下位置。
設定右下位置。
background-size
background-size: 240px 150px;
background-size: 100%;
設定顯示尺寸<CSS3，可用百分比（%）>
寬度自動佈滿頁寬，高度按比例縮放。

Border組群
邊線樣式：

solid<實線>、dashed<虛線>、
dotted<點線>、double<雙線>、
groove<凹線>、ridge<凸線>、
inset<嵌入線>、outset<浮出線>
border
border: 5px solid Red;
border-top: 4px solid Red;
border-right: 4px dashed transparent;
border-bottom: 4px double Blue;
border-left: 4px groove Yellow;

outline: 5px double Yellow;

寬度5px、實線、紅色。
上邊線：寬度4px、實線、紅色。
右邊線：寬度4px、虛線、透明。
下邊線：寬度4px、雙線、藍色。
左邊線：寬度4px、凹線、黃色。

外邊線：寬度5px、雙線、黃色。（無法單邊設定且可能有無法顯示的部分）
border-radius
border-radius:15px;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
圓角邊框。<可用百分比（%）>
左上圓角邊框。
右上圓角邊框。
右下圓角邊框。
左下圓角邊框。
border-image
border-image-source: url(圖片網址);
border-image-slice: 20;

border-image-width: 1em;
border-image-repeat: repeat;
border-image-repeat: stretch;
邊框圖片來源。
邊框圖片分割，會把圖片分成九宮格，抓出圖片四角的圖片位置。(只限填數字)
邊框圖片寬度。
邊框圖片中間重複方式填滿。
邊框圖片中間延展方式填滿。


border-image-slice: 20<pixel>;


border-image-repeat;


border-image-repeat: repeat;


border-image-repeat: stretch;


Font組群（只列幾個常用參數）
font-family: 標楷體, 新細明體, Verdana;
font-weight: bold;
font-size: 120%;

color: Red;
text-shadow: -1px 5px 8px #000000;
<水平位置, 垂直位置, 模糊距離, 陰影顏色>
設定字型。<以“,”分隔，前項找不到就往後。>
設定字體粗細。<可用數字100 ~ 900。>
設定字體大小。<單位可用em, px, %，1em=16點。>
設定文字顏色。
設定文字陰影。<CSS3，IE9以前無支援。>

作者: thgn5    時間: 2014-4-25 01:58 AM

本帖最後由 thgn5 於 2014-4-30 01:51 AM 編輯

在一樓介紹那麼多東西但是要怎麼用？

示範１，以「內容區」的「自由模塊1」為例子：
　1. 增加 內容區 外框
　2. 自由模塊1-標題區 使用圖片
　3. 自由模塊1-內容區 背景顏色

成果展示：
  1. /* 1. 增加 內容區 外框 */
  2. #ct
  3. {
  4.   /* 單邊框線設定 */
  5.   border-top: 8px solid #ff0000;  /* 上邊線 */
  6.   border-right: 8px dotted #00ff00;  /* 右邊線 */
  7.   border-bottom: 8px double #0000ff;  /* 下邊線 */
  8.   border-left: 8px groove #ffff00;  /* 左邊線 */

  10.   /* 單邊框線角度設定 */
  11.   border-top-left-radius: 5px;  /* 左上角 */
  12.   border-top-right-radius: 10px;  /* 右上角 */
  13.   border-bottom-right-radius: 15px;  /* 右下角 */
  14.   border-bottom-left-radius: 50%;  /* 左下角 */
  15. }

  17. /* 2. 自由模塊1-標題區 使用圖片 */
  18. #block1 .blocktitle  /* 「.blocktitle」前面有空格！ */
  19. {
  20.   background-color: transparent !important;  /* 背景透明色 */
  21.   background-image: url(http://a408.file-static.com/data/attachment/album/201403/31/001012oupyueu73gbysiu1.jpg) !important;  /* 使用背景圖 */
  22.   background-repeat: no-repeat !important;  /* 不重複直接使用 */
  23.   background-attachment: scroll !important;  /* 背景圖隨著文件滾動 */
  24.   background-position: left 50% !important;  /* 背景圖位置 */
  25.   background-size: 250px 50px !important;  /* 修改背景圖尺寸 */
  26. }

  28. /* 3. 自由模塊1-內容區 背景顏色 */
  29. #block1_content  /* 在一樓中他雖然在 #ct 的 #block1 底下，但因為是ID選擇器(#)不用擔心會有重複的名稱，所以可以獨立設定。 */
  30. {
  31.   background-color: LightGreen !important;
  32. }
複製代碼
有發現為什麼多出「!important」這個語法？
風格表有三種來源：作者定義的，用戶指定的，與展現程式的預設值。預設的串聯規則是：作者定義的風格表會取代用戶定義的風格表，而展現程式的預設值位階最低。可以在作者的風格表與用戶的風格表中使用 !important，改變預設的串聯規則。依據 CSS2 標準，如果用戶的風格表中，有使用 !important 的規則，則其優先權會高過作者的風格表，即便作者的風格表中有加上 !important。
(來源：螞蟻的CSS)

示範２，「虛擬型別選擇器」超連結以外的應用：(從這以後的示範會加入新功能)
　1. 隱藏「自由模塊1」內容需要瀏覽時再顯示

成果展示：
  1. #block1
  2. {
  3.   height: 35px;  /* 標題區預設高度 */
  4.   overflow: hidden;  /* 溢出處理：修剪(其餘內容不可見) */

  6.   /* IE9以及更早版本不支持此功能... */
  7.   transition: all 1s ease 0s;  /* 過度效果：屬性名稱 過度時間 速度曲線 等待多久開始變化 */
  8.   /* ease：變化速度 慢>快>慢 */
  9. }

  11. #block1:hover  /* 滑鼠移動到標題區上 */
  12. {
  13.   height: 450px;  /* 高度隨你喜歡，能顯示出完整內容即可。 */

  15.   /* 傾斜效果 */
  16.   transform: rotate(-3deg);
  17.   /* 有些屬性語法在某些瀏覽器的某版本沒支援，需用以下方式解決。 */
  18.   -ms-transform: rotate(-3deg);  /* Internet Explorer */
  19.   -moz-transform: rotate(-3deg);  /* Firefox */
  20.   -webkit-transform: rotate(-3deg);  /* Safari 和 Chrome */
  21.   -o-transform: rotate(-3deg);  /* Opera */
  22. }
複製代碼
只要會示範一的背景圖加上自己的排版空間看起來就已經很好了，示範二多了動畫效果應用(參考：snowflying)，以及解決部分版本瀏覽器無功能的問題。（CSS3功能，有些新功能就算用-ms-、-moz-、-webkit-、-o-可能也無法支援）

示範３，設定滑鼠游標。

成果展示：
  1. /*
  2.   滑鼠游標移動到超連結時變換圖片，
  3.   首先"找到"或"製作"一張約 120pixel x 120pixel 圖片，
  4.   修改副檔名為".ico"並上傳至支援此格式圖檔的空間。
  5. */

  7. html  /* 第一張圖 */
  8. {
  9.   cursor: url(https://www.dropbox.com/s/i5b2wstx9dhr1yl/Eyny_html_v2.ico?dl=1),auto !important;
  10.   -moz-cursor: url(https://www.dropbox.com/s/i5b2wstx9dhr1yl/Eyny_html_v2.ico?dl=1),auto !important;
  11.   -webkit-cursor: url(https://www.dropbox.com/s/i5b2wstx9dhr1yl/Eyny_html_v2.ico?dl=1),auto !important;
  12.   -o-cursor: url(https://www.dropbox.com/s/i5b2wstx9dhr1yl/Eyny_html_v2.ico?dl=1),auto !important;
  13.   -ms-cursor: url(https://www.dropbox.com/s/i5b2wstx9dhr1yl/Eyny_html_v2.ico?dl=1),auto !important;
  14. }

  16. a  /* 第二張圖 */
  17. {
  18.   cursor: url(https://www.dropbox.com/s/e76d2ps2sqefzmw/Eyny_html%20a_v2.ico?dl=1),auto !important;
  19.   -moz-cursor: url(https://www.dropbox.com/s/e76d2ps2sqefzmw/Eyny_html%20a_v2.ico?dl=1),auto !important;
  20.   -webkit-cursor: url(https://www.dropbox.com/s/e76d2ps2sqefzmw/Eyny_html%20a_v2.ico?dl=1),auto !important;
  21.   -o-cursor: url(https://www.dropbox.com/s/e76d2ps2sqefzmw/Eyny_html%20a_v2.ico?dl=1),auto !important;
  22.   -ms-cursor: url(https://www.dropbox.com/s/e76d2ps2sqefzmw/Eyny_html%20a_v2.ico?dl=1),auto !important;
  23. }
複製代碼
我只試過兩張靜態圖做切換，動態圖(?)就看有誰要試囉～

示範４，延續示範２「overflow」應用：
　1. 設定區塊「大小」、「位移」以及「Z度」。

成果展示：
z-index: 50;　　　　　z-index: 47;(後面會說明差別)
  1. /* 教學文 */
  2. #block2
  3. {
  4.   height: 35px;  /* 首先設定區塊高度，讓他只顯示標題區(35px)。 */
  5.   z-index: 50;  /* 數字越大代表這東西離我們越近！ */
  6.   overflow: hidden;
  7.   position: fixed; top: 160px; left: -200px;  /* fixed：以瀏覽器頁面做定位標準，離上方160px距離、左方-200px (也就是超出可見畫面)。 */
  8.   transition: all 1s ease;
  9. }
  10. #block2 .blocktitle
  11. {
  12.   width: 215px; height: 35px;
  13.   background: transparent url(http://a404.file-static.com/data/attachment/album/201404/25/162802reij4jipvibvrpqv.jpg) no-repeat scroll 0 50%;
  14. }
  15. #block2_content
  16. {
  17.   width: 195px; height: 400px;
  18.   overflow-y: auto;  /* overflow就是在設定scrollbar的屬性，可用 –x (水平拉軸) 或 –y (垂直拉軸)，auto：當內容量超出區塊大小就會出現拉軸。 */
  19.   background-color: rgba(6,6,6,0.8);
  20. }
  21. #block2:hover
  22. {
  23.   height: 450px;
  24.   position: fixed; top: 160px; left: 0px;
  25. }

  27. /* 以下兩塊只差在一些設定值

  29.    音樂盒 */
  30. #music { height: 35px; z-index: 49; overflow: hidden; position: fixed; top: 200px; left: -200px; transition: all 1s ease; }
  31. #music .blocktitle { width: 215px; height: 35px; background: transparent url(http://a425.file-static.com/data/attachment/album/201404/25/165701a8aiazndxa1e60y6.jpg) no-repeat scroll 0 50%; }
  32. #music_content { width: 180px; height: 360px; background-color: rgba(6,6,6,0.8); }
  33. #music:hover { height: 410px; position: fixed; top: 200px; left: 0px; }

  35. /* 分享資源 */
  36. #block3 { height: 35px; z-index: 48; overflow: hidden; position: fixed; top: 240px; left: -200px; transition: all 1s ease; }
  37. #block3 .blocktitle { width: 215px; height: 35px; background: transparent url(http://a401.file-static.com/data/attachment/album/201404/26/1203015e0mrnmrmmzmx05a.jpg) no-repeat scroll 0 50%; }
  38. #block3_content { width: 195px; height: 320px; overflow-y: auto; background-color: rgba(6,6,6,0.8); }
  39. #block3:hover { height: 370px; position: fixed; top: 240px; left: 0px; }
複製代碼
第二張z-index: 47;數值小於其他兩個所以自然被遮擋在後面，要怎麼安排就自己來囉～
以上幾個示範完畢 文章就到這了，有這些功能就已經能變化出很多東西了...


編輯完的CSS一定務必要保存起來！不然下次編輯空間後有使用圖片網址的就悲劇囉！

補充：
　空間CSS貌似有字數限制？如果有遇到此問題的人可以...
　1. 先將語法貼到記事本 另存成「.css」後上傳至免費空間，
　2. 再使用『@import url(文件網址);』引進來。
作者: thgn5    時間: 2014-4-25 01:59 AM

本帖最後由 thgn5 於 2014-5-20 08:40 PM 編輯

好像沒提到這些編碼到底該貼到哪裡？

1. 到個人空間點擊右上角「裝扮空間」。


2. 點擊「編輯CSS」再把編碼貼到框框中按保存。



如何找到要修改地方的選擇器？

Chrome
1. 對著目標 右鍵 > 檢查元素 > 得到「class="mt"」。


IE 11
1. 對著目標 右鍵 > 檢查元素 > 得到「class="mt"」。


※如果得到「id="XXX"」選擇器為「#XXX {  }」，如果得到「class="YYY"」選擇器為「.YYY {  }」，有時候需要兩者一起搭配使用(有太多名稱就請自己測試囉...)。
作者: LittleBitSunny    時間: 2014-4-29 02:54 PM

哈哈, 剛剛才調個人空間, 剛好就爬到這篇,
沒甚麼用過CSS, 來偷一點知識

作者: faxy980410    時間: 2014-5-3 11:40 PM

哈哈哈~有看沒懂~
順便問問>>>怎麼裁切適合的長頭像大小??
作者: 8228454    時間: 2014-6-2 09:12 PM

樓主厲害把文章寫的好
我沒用過CSS，我也可上手一些基本的
個人空間換新的，看起來心情就好
作者: k66kk666    時間: 2014-6-4 10:17 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: 宮崎剎那    時間: 2014-6-13 01:53 PM

看了一下要是我沒學過還真的完全不懂.....
CSS阿~HTML阿~反正就一堆
我想問個人的房間上面頭部圖是要多少  (???)X(???) ?
我現在的頭部是用小畫家剪裁的= =想想過去我真強....這樣用也行
我現在是用PS再調整大小的
有數據最好弄......
作者: hgr376543922395    時間: 2014-6-24 09:44 PM

嗯嗯~謝謝thgn5大大如此辛苦發出如此精華的文章
超開心> <
另外怎麼隱藏大頭貼、朋友或是來訪的客人呢?
把css放進去無效...，難道是我看的不仔細(拖走
作者: thgn5    時間: 2014-6-24 10:07 PM

本帖最後由 thgn5 於 2014-7-1 01:18 PM 編輯
hgr376543922395 發表於 2014-6-24 09:44 PM
嗯嗯~謝謝thgn5大大如此辛苦發出如此精華的文章
超開心> <
另外怎麼隱藏大頭貼、朋友或是來訪的客人呢?
  1. #profile, #friend, #visitor { height: 35px; overflow: hidden; }
複製代碼
(空間首頁)依序為 頭像、好友、訪客，

屬性設定都一樣就用「,」一併處理，
高度35(剛好剩下各自區塊的標題字樣)、隱藏內容(但是那顆小藍點我還不知道怎麼隱藏...)

=========================

以頭像說明：兩種狀態切換要加入「transition」屬性在原本狀態內
  1. #profile
  2. {
  3.   height: 35px;
  4.   overflow: hidden;
  5.   transition: all 1s ease 0s;  /* 從高度35變成400的過程 */
  6. }
  7. #profile:hover  /* 滑鼠移動到標題區上 */
  8. {
  9.   height: 400px;  /* 能完整顯示內容即可 */
  10. }
複製代碼


==========▼2014.07.01▼==========
  1. body
  2. {
  3.   background-image: url(http://a425.file-static.com/data/attachment/album/201405/18/1528133iqga3x5y6e5gop6.jpg) !important;
  4.   background-repeat: repeat !important;
  5.   background-attachment: fixed !important;
  6.   background-position: center center !important;
  7.   color: #cc66ff !important;
  8. }
  9. #hd
  10. {
  11.   background-image: url(http://a410.file-static.com/data/attachment/album/201405/18/152819bzggb55hw2grg9o9.jpg) !important;
  12.   background-repeat: repeat !important;
  13.   height: 562px !important;
  14.   background-attachment: scroll !important;
  15.   background-position: center center !important;
  16.   color: #cc66ff !important;
  17. }
  18. body a { color: #0066ff !important; }
  19. #hd a { color: #0066ff !important; }

  21. #ct .area .column { width: 480px !important; }
  22. #ct
  23. {
  24.   background-repeat: no-repeat !important;
  25.   background-color: transparent !important;
  26.   background-attachment: fixed !important;
  27. }


  30. /* 音樂盒 */
  31. #music { height: 35px; z-index: 49; overflow: hidden; position: fixed; top: 200px; left: -200px; transition: all 1s ease; }
  32. #music .blocktitle { width: 215px; height: 35px; background: transparent url(http://a425.file-static.com/data/attachment/album/201404/25/165701a8aiazndxa1e60y6.jpg) no-repeat scroll 0 50%; }
  33. #music_content { width: 180px; height: 360px; background-color: rgba(6,6,6,0.8); }
  34. #music:hover { height: 410px; position: fixed; top: 200px; left: 0px; }

  36. /* 頭像 */
  37. #profile { height: 35px; z-index: 48; overflow: hidden; transition: all 1s ease; }
  38. #profile:hover { height: 370px; }
複製代碼
要做兩種狀態切換的需要「#profile」以及「#profile:hover」兩個都做設定。
作者: a255194    時間: 2014-10-25 08:35 PM

太猛了，正需要CSS 語法說明，感謝大大講解得如此詳細
作者: 迪斯肯特    時間: 2015-3-10 02:38 PM

請問大大css語法[設定滑鼠游標]這個我還是有點看不懂= =
1.滑鼠游標移動到超連結時變換圖片
[OK]
2.首先"找到"或"製作"一張約 120pixel x 120pixel 圖片
[OK]
3.修改副檔名為".ico"並上傳至支援此格式圖檔的空間
[我上傳道mega  可以嗎?還是有建議哪些網站比較好的?]
4.
html  /* 第一張圖 */
{
cursor: url(https://www.dropbox.com/s/i5b2wstx9dhr1yl/Eyny_html_v2.ico?dl=1),auto !important;
  -moz-cursor: url(https://www.dropbox.com/s/i5b2wstx9dhr1yl/Eyny_html_v2.ico?dl=1),auto !important;
-webkit-cursor: url(https://www.dropbox.com/s/i5b2wstx9dhr1yl/Eyny_html_v2.ico?dl=1),auto !important;
  -o-cursor: url(https://www.dropbox.com/s/i5b2wstx9dhr1yl/Eyny_html_v2.ico?dl=1),auto !important;
-ms-cursor: url(https://www.dropbox.com/s/i5b2wstx9dhr1yl/Eyny_html_v2.ico?dl=1),auto !important;
}
[因為他是8~14的選項上複製下來貼上的時候請問需把空格部分取消還是按照他的方式一個與法一排就一排?]
5.[第一張圖的語法跟第二張圖的語法必須要空一排以後再貼上第二張的語法?]
作者: thgn5    時間: 2015-3-10 06:18 PM

迪斯肯特 發表於 2015-3-10 02:38 PM
請問大大css語法[設定滑鼠游標]這個我還是有點看不懂= =
1.滑鼠游標移動到超連結時變換圖片
[OK]
修改副檔名為".ico"並上傳至支援此格式圖檔的空間。

在該樓點評有追加說明「補充：《示範３，設定滑鼠游標。》圖片可使用PNG」，建議上傳至dropbox、Eyny相簿、imgur或其他專門的「免費圖片空間」。(MEGA只是顆存放的硬碟)

-ms-、-moz-、-webkit-、-o-

示範2的第18~21行有說明對應支援的瀏覽器，如果你使用Chrome可無視。

[第一張圖的語法跟第二張圖的語法必須要空一排以後再貼上第二張的語法?]

不必。(如果你全部擠在一行看起來不難過的話)
作者: magowu123    時間: 2015-4-3 05:39 PM

樓主的空間好美...可是....我看不懂....
作者: thgn5    時間: 2015-4-3 06:29 PM

magowu123 發表於 2015-4-3 05:39 PM
樓主的空間好美...可是....我看不懂....

回覆短訊息的問題，
　　我有把空間CSS文件檔放在個人日誌中，日誌是公開的~

http://www01.eyny.com/home.php?m ... w=me&from=space
作者: magowu123    時間: 2015-4-3 06:32 PM

thgn5 發表於 2015-4-3 06:29 PM
回覆短訊息的問題，
　　我有把空間CSS文件檔放在個人日誌中，日誌是公開的~

謝大大,我的空間現在一團糟...
作者: magowu123    時間: 2015-4-3 07:32 PM

這是我半小時的結果~
大大請問該如何寫來刪走標題區的蒲公英背景變透明@@?
作者: thgn5    時間: 2015-4-3 07:51 PM

magowu123 發表於 2015-4-3 07:32 PM
這是我半小時的結果~
大大請問該如何寫來刪走標題區的蒲公英背景變透明@@? ...

標題區的蒲公英背景

將「background-image:none;」這段加入「#hd」裡面，
如下所示：
#hd{background-image:none;}

background-image：背景圖片
none：不使用或不設定

補充內容 (2015-4-3 07:53 PM):
另外，九位角色那適用在「九個且兩字」的選項，不然會出現時怪的現象w
作者: magowu123    時間: 2015-4-3 07:54 PM

thgn5 發表於 2015-4-3 07:51 PM
將「background-image:none;」這段加入「#hd」裡面，
如下所示：

喔喔我成功了
整句其實是
#hd{background: transparent;background-image:none;}

補充內容 (2015-4-3 07:55 PM):
CSS好好玩XD~~
作者: magowu123    時間: 2015-4-3 09:50 PM

感謝~~
那請問內容區可以怎弄成透明?
再求指教
作者: magowu123    時間: 2015-4-3 10:04 PM

magowu123 發表於 2015-4-3 09:50 PM
感謝~~
那請問內容區可以怎弄成透明?
再求指教

之前試過了,結果是沒效果

補充內容 (2015-4-3 10:05 PM):
#ct { background: transparent; }  <<
作者: clyde16868    時間: 2015-6-17 12:33 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: xs8018    時間: 2015-8-29 08:10 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: thgn5    時間: 2015-8-29 09:36 PM

xs8018 發表於 2015-8-29 08:10 PM
感謝大大的分享~
我是複製了大大2014 7月的那份CSS在自己把背景圖片改掉
我按了儲存之後沒事，就繼續改標題 ...

圖片(外連)網址的部分，會因第二次修改造成「英文大小寫」變動，所以自然找不到檔案= =

我最後應該有註記... CSS編碼要自行用記事本(.txt)保存@@"

再辛苦一下吧(汗)
作者: crazy60307    時間: 2015-12-15 10:14 PM

感謝T5大寫出這麼詳細的文章
真心覺得會弄這個東西的人
而且還要搞懂，真的是滿厲害
作者: caroline0603    時間: 2016-2-13 07:19 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: thgn5    時間: 2016-2-13 09:51 PM

caroline0603 發表於 2016-2-13 07:19 PM
請問如何讓其他的內容區跟頭部一樣是透明的

「Caroline」、「統計信息」...等等背景圖要保留嗎？
那這樣複製以下這段CSS↓↓
  1. #ct .block
  2. {
  3. background-color: transparent !important;
  4. }
複製代碼
作者: caroline0603    時間: 2016-2-13 09:57 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: nhpss940012    時間: 2016-2-18 07:19 PM

如何在文章上放上有顏色的框?用很久用不好
作者: thgn5    時間: 2016-2-18 09:41 PM

nhpss940012 發表於 2016-2-18 07:19 PM
如何在文章上放上有顏色的框?用很久用不好

什麼文章? 什麼框..? = =??
作者: nhpss940012    時間: 2016-2-18 10:39 PM

thgn5 發表於 2016-2-18 09:41 PM
什麼文章? 什麼框..? = =??

文章的邊框 如何套上背景顏色
作者: nhpss940012    時間: 2016-2-21 09:20 PM

thgn5 發表於 2016-2-18 09:41 PM
什麼文章? 什麼框..? = =??

主題啊 裡面可以打字的
就像WORD 條有內顏色的框
作者: thgn5    時間: 2016-2-21 09:44 PM

nhpss940012 發表於 2016-2-21 09:20 PM
主題啊 裡面可以打字的
就像WORD 條有內顏色的框

像這樣??
1
2
3
4


就只是表格(語法)外面在包上一層表格(語法)，最多5層。
  1. [table=98%,LemonChiffon]
  2. [tr][td]

  4. [table=98%,PaleTurquoise]
  5. [tr][td]1
  6. [/td][td]2
  7. [/td][/tr]
  8. [tr][td]3
  9. [/td][td]4
  10. [/td][/tr]
  11. [/table]

  13. [/td][/tr]
  14. [/table]
複製代碼
這篇不是表格教學啊~XD
作者: hize6528    時間: 2016-2-24 12:04 AM

謝謝樓主教學ww
可以請問樓主能用去背圖當頭像嗎?
作者: hize6528    時間: 2016-2-24 05:49 PM

hize6528 發表於 2016-2-24 12:04 AM
謝謝樓主教學ww
可以請問樓主能用去背圖當頭像嗎?

原來如此....謝謝你(owoˋ歪樓
作者: danny9815051    時間: 2016-3-19 10:14 PM

本帖最後由 danny9815051 於 2016-3-19 10:17 PM 編輯

感謝T5大大的簡易教學，前一陣子來竊取知識，遲遲沒回帖感謝，在此說聲抱歉!

之前還卡在鼠標，不管怎樣弄都生不出圖案，
結果只是因為圖案"一定要"120x120  還想說超出一點沒關係吧... (我太天真了Orz

然後我完全不知"對著目標 右鍵 > 檢查元素 > 得到「class="mt"」。"
這到底是幹啥吃的，我看不懂www 反正也沒用到所以作罷!

最後就弄出一個還算堪用的空間，但是我的CSS異常的多呀~
可能太多咚咚重覆或不必要，但去找細節太麻煩了，所以就保持原狀。
(不知為何當初用"@import url(文件網址);" 不會引到...

最後的最後，感謝T5大大的教學文，讓我獲益良多!
搞這個真的很耗時間呀~不過弄出來後挺有成就感的，如果很鹹很閒的話，可以玩這個殺時間xDD



另外我想問下圖的文字要如何弄出來...
[attach]113535964[/attach]
作者: thgn5    時間: 2016-3-20 12:24 AM

本帖最後由 thgn5 於 2016-3-20 11:51 AM 編輯
danny9815051 發表於 2016-3-19 10:14 PM
感謝T5大大的簡易教學，前一陣子來竊取知識，遲遲沒回帖感謝，在此說聲抱歉!

之前還卡在鼠標，不管怎樣弄 ...
感謝T5大大的簡易教學，前一陣子來竊取知識，遲遲沒回帖感謝，在此說聲抱歉!

XD 忘了回,點支持也行阿=ˇ=

之前還卡在鼠標，不管怎樣弄都生不出圖案，
結果只是因為圖案"一定要"120x120  還想說超出一點沒關係吧... (我太天真了Orz

我也忘了當初滑鼠游標大小怎麼找的了XDD

然後我完全不知"對著目標 右鍵 > 檢查元素 > 得到「class="mt"」。"
這到底是幹啥吃的，我看不懂www 反正也沒用到所以作罷!

例如，你對著空間名稱(大名)照這步驟會看到『<strong id="spacename" class="mbn">Mの寒射</strong>』，再往上找會看到他整個區域的名稱是『<div id="hd" class="wp cl">』，這樣組合就是『#hd .mbn』。(雖然直接用#spacename就可以了www)

最後就弄出一個還算堪用的空間，但是我的CSS異常的多呀~
可能太多咚咚重覆或不必要，但去找細節太麻煩了，所以就保持原狀。
(不知為何當初用"@import url(文件網址);" 不會引到...

設定較細部的話CSS code多也是很正常的@@ @import我之前也試過，但有時候會讀不進來空間...

另外我想問下圖的文字要如何弄出來...

照著打一遍就好了啊XDDDDDD 搜尋〝圖片轉文字〞會有解的~

補充內容 (2016-3-20 11:51 AM):
討論區部分：
  1. [s]我被穿透了-///-[/s]
複製代碼
CSS部分：
  1. text-decoration:line-through !important;
複製代碼
日誌的話我就沒研究了030
作者: swifts    時間: 2016-3-28 03:21 AM

看了好久有看沒有懂，但麻煩樓主教一下怎麼隱藏主題
本人有些主題並不想讓其他人看到，真的麻煩你了
作者: thgn5    時間: 2016-4-23 08:42 PM

swifts 發表於 2016-3-28 03:21 AM
看了好久有看沒有懂，但麻煩樓主教一下怎麼隱藏主題
本人有些主題並不想讓其他人看到，真的麻煩你了 ...

不完全隱藏主題/回復方法之一 - CSS語法
  1. #ct .bm_c { display: none !important; }
複製代碼
[attach]114035168[/attach]

這帖超過九十天外加圖片因不可抗拒因素連結有所變動過...
圖片部分參閱(群組)>>http://www01.eyny.com/thread-10875990-1-1.html

補充內容 (2016-4-23 08:49 PM):
單純用這行 圖片 日誌 等分業好像也會被遮蔽XD
作者: snowflying    時間: 2016-4-26 12:13 AM

thgn5 發表於 2016-4-23 08:42 PM
不完全隱藏主題/回復方法之一 - CSS語法

這帖超過九十天外加圖片因不可抗拒因素連結有所變動過...

感謝 thgn5 的教學~
受用無窮 >___<
可是像我這種資質駑鈍的新手，看到滿滿的內容而且都看不懂
就想直接按 END 了









我覺得可以延伸這個來玩
a[href^="thread"] {display:none !important;}
根據 attribute 看要隱藏什麼
比較不會隱藏主題連帶影響到別的功能
作者: swifts    時間: 2016-5-24 11:15 PM

請問怎麼將日誌點進去後的標題顏色改掉，外面我會改，但點進去日誌後的標題是黑色的

請問這個有辦法改嗎??
作者: g8g8smsm    時間: 2016-6-3 06:22 PM

本帖最後由 g8g8smsm 於 2016-6-3 06:24 PM 編輯

版大請問怎麼把空間裡標題欄那格也變成透明
我其他地方都透明唯獨那邊沒有
作者: tk95162    時間: 2016-7-14 03:10 PM

感謝版主分享 ，可惜我看的不是很懂
想當初有在玩網誌的CSS語法時是在無名小站的時候
當時的方法都是直接在一個樣板上作業
有另外需要的功能再慢慢加
現在比較沒幹勁了XD""
改個底圖就覺得差不多了
另一個煩惱是不知如何將大頭貼弄得大一些
想請版主指教!
作者: tk95162    時間: 2016-7-14 06:05 PM

tk95162 發表於 2016-7-14 03:10 PM
感謝版主分享 ，可惜我看的不是很懂
想當初有在玩網誌的CSS語法時是在無名小站的時候
當時的方法都是直接在 ...

版主謝謝!非常有幫助~
已經成功設定了!
再次謝謝您的協助
作者: s416456    時間: 2018-4-19 12:11 AM

本帖最後由 s416456 於 2018-4-19 12:37 AM 編輯

不好意思我內容區有放圖片
且內容區的版塊已經用透明了
但是出現了這個狀況
[attach]123055144[/attach]
會有一部分沒有透明化 像「頭像」那兩個字的背景地方就沒有透明化
能請教如何解決?
作者: thgn5    時間: 2018-4-19 01:29 PM

本帖最後由 thgn5 於 2018-4-19 01:30 PM 編輯
s416456 發表於 2018-4-19 12:11 AM
不好意思我內容區有放圖片
且內容區的版塊已經用透明了
但是出現了這個狀況

試試看? 也許是頭像這幾個小標題背景沒有透明化
  1. #ct .blocktitle, #ct .blocktitle a
  2. {
  3.   background-color: transparent !important;
  4.   background-image: none !important;
  5. }
複製代碼
作者: s416456    時間: 2018-4-19 01:53 PM

thgn5 發表於 2018-4-19 01:29 PM
試試看? 也許是頭像這幾個小標題背景沒有透明化

感謝，成功了，終於完全透明了
作者: rninqytatwln    時間: 2018-12-21 10:17 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: thgn5    時間: 2018-12-22 11:06 PM

rninqytatwln 發表於 2018-12-21 10:17 PM
請問如果存錯了語法,還有沒有機會救得回來,我已經找不到
"裝扮空間"四個字了!每次登入,都會被自己空間的空 ...

可以啊~

1. 進去個人空間
2. 空白處滑鼠右鍵 > 檢查元素
3. 找到 <head>...</head> 打開來
3-2. 下拉找到 <style id="diy_style">...</style> 把他刪除

補充內容 (2018-12-22 11:07 PM):
3-2. 做完就可以看到 "粉妝空間"
然後再重複2~3-2就可以修改CSS
作者: rninqytatwln    時間: 2018-12-24 10:01 AM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: rninqytatwln    時間: 2018-12-24 02:40 PM

提示: 作者被禁止或刪除 內容自動屏蔽



歡迎光臨 伊莉討論區 (http://a401.file-static.com/) Powered by Discuz!