伊莉空間CSS語法簡易教學
本帖最後由 thgn5 於 2014-6-3 05:22 PM 編輯#01，簡介、選擇器＆屬性介紹。
#02，範例展示。
#03，如何尋找選擇器＆編輯CSS。
層疊樣式表（Cascading Style Sheets，CSS），又稱串樣式列表、階層式樣式表檔案，是一種能做到網頁表現與內容分離的程式語言。網頁的作者和讀者（我們）能透過CSS決定網頁中的物件的顏色、字形、排版等顯示特性，當兩者的CSS檔有衝突時讀者可以選擇要使用哪一個。
CSS是由多組「規則」所組成。每個規則由「選擇器」、「屬性」和「值」組成：
[*]選擇器（Selector）：多個選擇器可以半形逗號（,）隔開。
[*]屬性（property）：CSS規定了許多的屬性，目的在控制選擇器的樣式。（目前大多瀏覽器都有支援功能，但還是有不支援的屬性。）
[*]值（value）：指屬性接受的設定值，多個關鍵字時大都以空格隔開。
【基本選擇器】
[*]類型選擇器（h1,p等）——elementname（html, body...）
[*]型別選擇器（class）——.elementname（.mbn, .blocktitle...）
[*]ID選擇器（ID）——#elementname（#hd, #ct...）
[*]萬用選擇器——* ns|* *|*
[*]屬性選擇器——
【空間首頁—選擇器】—要修改也要知道想改的地方叫做什麼名稱。
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
超連結未連結過。
超連結已連結過。
滑鼠在元素上面。
滑鼠在元素上按著。
https://a472.static-file.com:8000/data/attachment/album/201404/25/195533otkk6kj5qsndsnlq.jpg
a:link { color: #ff0000; }
https://a472.static-file.com:8000/data/attachment/album/201404/25/195536dbkjf0r4s7tvblbt.jpg
a:visited { color: #0000ff; }
https://a472.static-file.com:8000/data/attachment/album/201404/25/195534nypy5popctclpp8y.jpg
a:hover { color: #ffff00; }
https://a472.static-file.com:8000/data/attachment/album/201404/25/195535077df8ftvawiae7z.jpg
a:active { color: #00ff00; }
【CSS基本樣式屬性】（以下圖片，右鍵 >...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div><div></div> 本帖最後由 thgn5 於 2014-4-30 01:51 AM 編輯
在一樓介紹那麼多東西但是要怎麼用？
示範１，以「內容區」的「自由模塊1」為例子：
1. 增加 內容區 外框
2. 自由模塊1-標題區 使用圖片
3. 自由模塊1-內容區 背景顏色
成果展示：
https://a479.static-file.com:8000/data/attachment/album/201404/24/233056bclcwceqolevsopf.jpg/* 1. 增加 內容區 外框 */
#ct
{
/* 單邊框線設定 */
border-top: 8px solid #ff0000; /* 上邊線 */
border-right: 8px dotted #00ff00; /* 右邊線 */
border-bottom: 8px double #0000ff; /* 下邊線 */
border-left: 8px groove #ffff00; /* 左邊線 */
/* 單邊框線角度設定 */
border-top-left-radius: 5px; /* 左上角 */
border-top-right-radius: 10px; /* 右上角 */
border-bottom-right-radius: 15px; /* 右下角 */
border-bottom-left-radius: 50%; /* 左下角 */
}
/* 2. 自由模塊1-標題區 使用圖片 */
#block1 .blocktitle /* 「.blocktitle」前面有空格！ */
{
background-color: transparent !important; /* 背景透明色 */
background-image: url(https://a479.static-file.com:8000/data/attachment/album/201403/31/001012oupyueu73gbysiu1.jpg) !important; /* 使用背景圖 */
background-repeat: no-repeat !important; /* 不重複直接使用 */
background-attachment: scroll !important; /* 背景圖隨著文件滾動 */
background-position: left 50% !important; /* 背景圖位置 */
background-size: 250px 50px !important; /* 修改背景圖尺寸 */
}
/* 3. 自由模塊1-內容區 背景顏色 */
#block1_content /* 在一樓中他雖然在 #ct 的 #block1 底下，但因為是ID選擇器(#)不用擔心會有重複的名稱，所以可以獨立設定。 */
{
background-color: LightGreen !important;
}有發現為什麼多出「!important」這個語法？
風格表有三種來源：作者定義的，用戶指定的，與展現程式的預設值。預設的串聯規則是：作者定義的風格表會取代用戶定義的風格表，而展現程式的預設值位階最低。可以在作者的風格表與用戶的風格表中使用 !important，改變預設的串聯規則。依據 CSS2 標準，如果用戶的風格表中，有使用 !important 的規則，則其優先權會高過作者的風格表，即便作者的風格表中有加上 !important。
(來源：螞蟻的CSS)
示範２，「虛擬型別選擇器」超連結以外的應用：(從這以後的示範會加入新功能)
1. 隱藏「自由模塊1」內容需要瀏覽時再顯示
成果展示：
https://a479.static-file.com:8000/data/attachment/album/201404/25/0044317gosvn6h0ralr1h0.gif#block1
{
height: 35px; /* 標題區預設高度 */
overflow: hidden; /* 溢出處理：修剪(其餘內容不可見) */
/* IE9以及更早版本不支持此功能... */
transition: all 1s ease 0s; /* 過度效果：屬性名稱 過度時間 速度曲線 等待多久開始變化 */
/* ease：變化速度 慢>...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div> 本帖最後由 thgn5 於 2014-5-20 08:40 PM 編輯
好像沒提到這些編碼到底該貼到哪裡？
1. 到個人空間點擊右上角「裝扮空間」。
https://a471.static-file.com:8000/data/attachment/album/201405/20/1908276t5w50wt6a8lv5uw.jpg
2. 點擊「編輯CSS」再把編碼貼到框框中按保存。
https://a471.static-file.com:8000/data/attachment/album/201405/20/190828vgbnzpcx304c3qgb.jpg
如何找到要修改地方的選擇器？
Chrome
1. 對著目標 右鍵 >...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div> 哈哈, 剛剛才調個人空間, 剛好就爬到這篇,
沒甚麼用過CSS, 來偷一點知識
{:46:}
哈哈哈~有看沒懂~
順便問問>>>怎麼裁切適合的長頭像大小??<br><br><br><br><br><div></div> 樓主厲害把文章寫的好
我沒用過CSS，我也可上手一些基本的
個人空間換新的，看起來心情就好 好有用呀!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 看了一下要是我沒學過還真的完全不懂.....
CSS阿~HTML阿~反正就一堆
我想問個人的房間上面頭部圖是要多少 (???)X(???) ?
我現在的頭部是用小畫家剪裁的= =想想過去我真強....這樣用也行
我現在是用PS再調整大小的
有數據最好弄...... 嗯嗯~謝謝thgn5大大如此辛苦發出如此精華的文章
超開心> <
另外怎麼隱藏大頭貼、朋友或是來訪的客人呢?
把css放進去無效...，難道是我看的不仔細(拖走 本帖最後由 thgn5 於 2014-7-1 01:18 PM 編輯
hgr376543922395 發表於 2014-6-24 09:44 PM static/image/common/back.gif
嗯嗯~謝謝thgn5大大如此辛苦發出如此精華的文章
超開心> <
另外怎麼隱藏大頭貼、朋友或是來訪的客人呢?
#profile, #friend, #visitor { height: 35px; overflow: hidden; }(空間首頁)依序為 頭像、好友、訪客，
屬性設定都一樣就用「,」一併處理，
高度35(剛好剩下各自區塊的標題字樣)、隱藏內容(但是那顆小藍點我還不知道怎麼隱藏...)
=========================
以頭像說明：兩種狀態切換要加入「transition」屬性在原本狀態內#profile
{
height: 35px;
overflow: hidden;
transition: all 1s ease 0s; /* 從高度35變成400的過程 */
}
#profile:hover /* 滑鼠移動到標題區上 */
{
height: 400px; /* 能完整顯示內容即可 */
}
==========▼2014.07.01▼==========body
{
background-image: url(https://a478.static-file.com:8000/data/attachment/album/201405/18/1528133iqga3x5y6e5gop6.jpg) !important;
background-repeat: repeat !important;
background-attachment: fixed !important;
background-position: center center !important;
color: #cc66ff !important;
}
#hd
{
background-image: url(https://a478.static-file.com:8000/data/attachment/album/201405/18/152819bzggb55hw2grg9o9.jpg) !important;
background-repeat: repeat !important;
height: 562px !important;
background-attachment: scroll !important;
background-position: center center !important;
color: #cc66ff !important;
}
body a { color: #0066ff !important; }
#hd a { color: #0066ff !important; }
#ct .area .column { width: 480px !important; }
#ct
{
background-repeat: no-repeat !important;
background-color: transparent !important;
background-attachment: fixed !important;
}
/* 音樂盒 */
#music { height: 35px; z-index: 49; overflow: hidden; position: fixed; top: 200px; left: -200px; transition: all 1s ease; }
#music .blocktitle { width: 215px; height: 35px; background: transparent url(https://a478.static-file.com:8000/data/attachment/album/201404/25/165701a8aiazndxa1e60y6.jpg) no-repeat scroll 0 50%; }
#music_content { width: 180px; height: 360px; background-color: rgba(6,6,6,0.8); }
#music:hover { height: 410px; position: fixed; top: 200px; left: 0px; }
/* 頭像 */
#profile { height: 35px; z-index: 48; overflow: hidden; transition: all 1s ease; }
#profile:hover { height: 370px; }要做兩種狀態切換的需要「#profile」以及「#profile:hover」兩個都做設定。...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div><br><br><br><br><br><div></div> 太猛了，正需要CSS 語法說明，感謝大大講解得如此詳細{:31:} 請問大大css語法[設定滑鼠游標]這個我還是有點看不懂= =
1.滑鼠游標移動到超連結時變換圖片
2.首先"找到"或"製作"一張約 120pixel x 120pixel 圖片
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.[第一張圖的語法跟第二張圖的語法必須要空一排以後再貼上第二張的語法?]...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div> 迪斯肯特 發表於 2015-3-10 02:38 PM static/image/common/back.gif
請問大大css語法[設定滑鼠游標]這個我還是有點看不懂= =
1.滑鼠游標移動到超連結時變換圖片
修改副檔名為".ico"並上傳至支援此格式圖檔的空間。
在該樓點評有追加說明「補充：《示範３，設定滑鼠游標。》圖片可使用PNG」，建議上傳至dropbox、Eyny相簿、imgur或其他專門的「免費圖片空間」。(MEGA只是顆存放的硬碟)
-ms-、-moz-、-webkit-、-o-
示範2的第18~21行有說明對應支援的瀏覽器，如果你使用Chrome可無視。
[第一張圖的語法跟第二張圖的語法必須要空一排以後再貼上第二張的語法?]
不必。(如果你全部擠在一行看起來不難過的話)...<div class='locked'><em>瀏覽完整內容，請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div> 樓主的空間好美...可是....我看不懂.... magowu123 發表於 2015-4-3 05:39 PM static/image/common/back.gif
樓主的空間好美...可是....我看不懂....
回覆短訊息的問題，
我有把空間CSS文件檔放在個人日誌中，日誌是公開的~
http://www01.eyny.com/home.php?mod=space&uid=3381506&do=blog&classid=52243&view=me&from=space<br><br><br><br><br><div></div>