CSS smaill note

-

使用方式





  1. 放style=""在標籤中


  2. <head>

    <style>

    ...

    </style>

    </head>


  3. <link rel="stylesheet" href="style.css" />




選標籤的差別









/* 為class為red的標籤設計style*/

.red {

}

 

/* 為id為red的標籤設計style*/

#red {

}

 

/* div裡的div裡的div裡的所有h3字都是紅色的。 */

div div div h3 {

  color: red;

}

 

/* div裡的所有p的字體都是紅色的(包含子標籤)*/

div p{

  color: red;

}

ex:

	<div>

		<p>test</p> /*此行是紅的*/

		<li>

			<p>test2</p> /*此行是紅的*/

		</li>

	</div>

 

 

/* div裡的p的字體都是紅色的(不包含子標籤)*/ 

div>p{

  color: red;

}

ex:

	<div>

		<p>test</p> /*此行是紅的*/

		<li>

			<p>test2</p> /*不是紅的*/

		</li>

	</div>







字體





  • font-family #字型


  • text-decoration:none; #不要底線




 em 與 px





  • 1px 是螢幕上一個像素的大小，1em則是預設字體的大小。


  • 有可能被不同解析度的螢幕讀取的網頁，em顯然是比較好的選擇。




 比較不會無法顯示的字體





  • serif


  • sans-serif


  • cursive #可愛




:pseudo-class_selector





  • a:link #沒去過的link


  • a:visited #去過的link


  • a:hover #滑鼠滑在link上面時


  • :first-child #所有兄弟標籤中的第一個。


  • :nth-child(N) #所有兄弟標籤中第N個。




The Box Model (Image courtesy of www.w3.org!)





Position





  • static:



    • position的預設值。


    • 無法用display: inline;






  • absolute:



    • 他的postion將不在是預設的static而是absolute。


    • 參考位置：父元素內容區邊界。他會再一次position(定位)相對於，他的第一個  position不是static的父元素(父容器)。


    • 假如沒有父元素，將相對於整個<html>。






  • relative:



    • 他的postion將不在是預設的static而是relative。


    • 參考位置：原本應該在的位置。就算透過margin的位移之後，實際參考的位置還是在原來的位子。


    • 無法用display: inline;








其他





  • border-radius #block四個角的弧度。


  • * 可以當做所有標籤。


  • 標籤可以同時有id與class，id的樣式會蓋過class。



留言

張貼留言

這個網誌中的熱門文章

成人剪舌繫帶聽過嗎？我剪了！！

-
圖片
最近我去開刀，把舌繫帶(舌頭與下顎連結的那一片)切掉了！！ 我的舌頭一直都短短，往外伸出牙齒0.5cm就是極限了， 你能想像不能舔冰淇淋的痛苦嗎？！ 這個問題困擾我26年了，終於決定去掛號，約個時間把它給切了… 星期一的早上，口膣外科就跟以前來拔知齒的時候一樣很多人，等待一個小時的我還是成功見到了牙醫。 「我是要來看舌繫帶的，舌頭伸不出來，有些發音蠻困難的…」 「好，我來看看…」 「你這是小手術，現在就可以做，做嗎？」 「好。」 (！！！！ 居然就要切了嗎？原本想好的預約呢！？) 剛打完麻醉，醫生才想到還沒給我簽同意書，一邊等麻藥生效一邊簽著同意書和聊著為什麼會想要切除舌繫帶，過了些許的時間"小手術"要開始了。 「來嘴巴張開，阿~」 「阿~」 剪剪剪… 「你這個傷口有點大，等等要縫起來不然傷口又會長回去喔。」 「好。」(還要縫！！！，深呼吸，Nimo你可以的) ... 「痛痛痛」(揮手示意) 「可能是麻藥不夠，只剩一點點了，你要補麻藥還是直接做完？」 「做。」(阿阿阿阿阿。感覺我可以爆氣變成賽亞人了) 以下痛苦省略一萬字。 ..... 於是我在上班前終於做完了這個小手術。 復原大約需要一週的時間，其間吃飯就會用到舌頭，很痛。 有拍照但是蠻噁的，就不放上來了XD。 你是否該剪舌繫帶？ 先講結論： 如果你覺的他不影響你的生活，目前這樣也過的很好，那不建議你剪。 如果你還想要提升一下的話，參考下面的優缺點再決定吧！ 優點： 可以捲舌。 發音更容易。 舌頭清菜渣能力up。 唱歌更好聽(誤。 可以添冰淇林了。 嘿嘿嘿嘿嘿。 缺點： 痛一星期。 要重新適應。 一開始講話會怪怪的。 剪舌繫帶注意事項 傷口好了之後要多使用舌頭來習慣它喔！ 舌頭要放到正確的位置(上顎後方，不碰到牙齒)才不會讓變成小爆牙喔！ 剛做完手術不可以吃刺激性的食物喔！ 記得做好麻醉 ;) 剪舌繫帶費用 剪舌繫帶要多少錢？健保有給付喔，只需要掛號費 ，記得跟你的醫生確認一下。 你的留言可以讓文章更完整，更好！ 對了，如果你不知道什麼是舌繫帶，看一下圖片吧！
閱讀完整內容

journal 20260302

-
markdown It's me again. I took a long break. I have to face the reality that I have to work. I watched a lot of English anime like hunter x hunters. I try some language exchange server on Discord. I think my English listening level must level up. It was a fullfilling week.
閱讀完整內容

journal 20260212

-
markdown Today is my last working day before Lunar New Year. I actually have no mood to work, but I have to do, that is responsibility. I almost forgot my journal XD. During the Lunar New Year I will go back to hometown, I don't know whether I can still write journal. But I'am sure I will stick to my plank plan.
閱讀完整內容