文章

CSS筆記

讓英文字元自動斷行

body{
word-wrap: break-word;
word-break: break-all;
}


CSS等高
#wrap {
overflow:hidden;
}
#left, #center, #right {
margin-bottom:-10000px;
padding-bottom:10000px;
}


透明
color: rgba(255, 255, 255, 0.8);
background-color: rgba(142, 213, 87, 0.3);

filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5; 


文字陰影
text-shadow: x軸位移 y軸位移 柔邊 顏色
例如:
text-shadow: 1px 1px 2px #777;


box-shadow
.shadow {
-moz-box-shadow: 3px 3px 3px 3px #669FEC;
-webkit-box-shadow: 3px 3px 3px 3px #669FEC;
box-shadow: 3px 3px 3px 3px #669FEC;
}


Class 跟 ID 的比較
這兩者最大的不同,是在於 ID 選擇器在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。第二個不同的地方,是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。

1.box-sizing: border-box;

避免預設寬度被margin padding等元素撐開

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 }

2.clear: left;

元素加上一個 clear: left; 可以避免其他有標示 float: left;的元素影響

3.overflow: auto;

內容高度可隨著其他有標示float的元素做變化

.clearfix {
 overflow: auto;
 }

4.width: 50%;

5.@media screen

@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}

6.column-count

實現多欄文字

7.flex

RWD設計超方便

8.CSS 字型大小 pt, px , em , 百分比 percent 之比較

※ 1em=100%=12pt=16px
※ 0.75em=75%=9pt=12px

pt: 一般印列用字體尺寸,
px: 像素單位(pixel)
em:同百分比,1em=100%=12pt=16px = 瀏覽器預設尺寸,通常是 16px,em可以使用階層的方式設定,如第一層設定為2em,其子階層設定為 0.5em, 則子階層的實際尺寸為(2*0.5 = 1em)
percent(%): 同上,如第一層設定為200%,其子階層設定為 50%, 則子階層的實際尺寸為(200%*50% = 100%)

開始使用 HTML5

HTML5與SEO 重點整理

HTML5一個最大的特點是將標記語言的語義進一步豐富,我們可以直接使 用<header>,<article>這樣的標記。

這樣搜索引擎將能夠根據這些語義對網頁中的內容進一步分析,來幫助用戶尋找想要的內容。在Div+CSS技術流行起來之後,我們通常使用<div>的id來對內容分區進行有意義的定義。通常我們會這樣來組織一個具有 語義的網頁。這樣雖然程序員知道各個部分的語義是什麼,但是搜索引擎卻不能夠識別其語義內容。

  1. <header>定義了站點的頭部信息,也就是頁眉,一般放置網站的站點名稱以及LOGO和導航欄。搜索引擎更容易識別站點的類型。
  2. <nav>定義導航鏈接,也就是欄目或者頻道的鏈接。搜索引擎可以更好了解網站的信息架構,分類等。良好的信息架構,更有利於蜘蛛的爬行和權重的分佈。
  3. <footer>定義了底部信息,也就是頁腳。放置頁腳導航,一些比如公司介紹,聯繫我們之類的信息。一般來說對網站比較不重要,有可能搜索引擎會降低其位置的權重。
  4. <section>該元素用來表示網頁中不同的分區。優勢體現在每個部分都可以有其獨立的HTML標題。這可以讓搜索引擎更好的了解網頁的結構是如何劃分的。搜索引擎可能會根據網頁中的<section>標籤找出其信息架構。
  5. <article>定義文章區域,可以更有利於搜索引擎識別網頁的內容以及判斷相關性。
  6. <aside>定義頁面內容之外的內容,在左側或右側邊欄。比如知乎網站右側的“相關問題”就屬於<aside>區域。 aside標籤的文字信息與article標籤區域的文字信息最好是相關。可能會影響到該頁面和目標頁面的排名。

這些結構元素有些在HTML4時代,一般是用div來定義。如<div id=”header”>、<div id=”nav”>和<div id=”footer”>,但是難免有些網站會採用其它的命名方式。而HTML就把這些都標準化了,規範化了,簡潔明了。更有利於搜索引擎衡量網頁 上的內容和相關性,甚至分配權重的流向。