i-memo: 2月 2015

2015年2月13日

HTML5+CSS3上課筆記－ CSS (cascading style sheets)

h1 { color:red;}

h1叫選擇器(selector)
color叫屬性(property)
red叫屬性值(value)
{}內叫宣告區塊(declaration block)
color:red;叫宣告(declaration)

CSS3 新增內容

新的選擇器	偽類選擇器、屬性選擇器、nth選擇器
區塊模式	box-sizing有新屬性定義範圍更直覺
背景與邊框	全螢幕背景、漸層背景、圓角邊框、圖片邊框...
新的圖片屬性	圖片陰影、圖片剪裁
新的文字屬性	英文字強失斷行、陰影
多欄版面配置	multiple columns
2D/3D變形、動畫

CSS套用方法

套用方式		優先順序
行內樣式 inline style	直接寫在HTML的元素內 `<span class="aaa" style="color:red;"></span>`	1
內部樣式 internal style sheet	直接寫在HTML文件放在<head>內 `<style type="text/css"> section { border:1px solid black !important; } </style>` 加了!important 會變最最優先無法被行內樣式取代 (也可把important 放在行內樣式中)	2
外部樣式 external style sheet	將所有CSS樣式宣告在其他檔案中在<head>內 `<link href="css/style.css" rel="stylesheet">`	3
匯入套用 imported	可以在html也能在css中但較常用在css文件內的import HTML中： `<style type="text/css"> @import url(style.css); </style>` CSS中： `@import url(style.css);`

CSS常用單位：
pt：印刷用字體尺寸
px：像素(pixel)
em：相對比例，對繼承父元素的比例
例：
body {font-size:2em;}
h1 {font-size:1em;}

h1實際大小會是1em*2=2em

%：相對比例，對繼承父元素比例

*預設值為1em=100%=12pt=16px
*px和em的換算線上工具：http://pxtoem.com

CSS常用合併寫法：
*四邊數值合併：padding、margin

padding:1px 2px 3px 4px;
(padding-top padding-right padding-bottom padding-left)

padding:1px 2px 3px;
(padding-top padding-right&left padding-bottom)

padding:1px 2px;
(padding-top&buttom padding-right&left;

padding:1px;
(padding-top&bottom&right&left)

margin是與外的距

	↑
←	★	→
	↓

padding 是與內的距

	↓
→		←
	↑

*背景合併
background:#ccc url('../image/bg.jpg') no-repeat fixed left top;
#ccc是background-color
url()是background-image
no-repeat是background-repeat
fixed是background-attachmen 是否要跟著捲軸動
left top是background-position 背景圖位置

順序：background-color | background-image | background-repeat | background-attachmen | background-position

background-repeat

repeat	重複預設
repeat-x	橫向重複(x軸)
repeat-y	縱向重複(y軸)
no-repeat	不重複

background-attachmen

scroll	跟著頁面捲動預設
fixed	背景固定

background-position

left top left center left bottom right top right center right bottom center top center center center bottom	直接指定位置
x%,y%	指定圖片%位置
x px, y px	指定圖片px位置

*邊框合併 border
border:1px solid #ccc;
順序：border-width | border-style | border-color

border-style

none	無
hidden	隱藏
dotted	點線
dashed	虛線
solid	實線
double	雙線
groove	立體
ridge	立體
inset	立體
outset	立體

*文字樣式合併 font
font: italic normal bold 12px/20px Verdana;
順序：font-style | font-varian | font-weight | font-size/font-height | font-family
省略後至少要保留font-size和font-family

font-style：normal(一般)、

italic(斜體)

、oblique(字體傾斜)
font-variant：normal(一般)、small-caps(小寫)、groove(立體)
font-weight：normal(一般)、bold(粗體)、bolder(極粗體)、100~900(指定數值)

CSS3前綴
加了後browser才讀的到
Chrome/Safari: -webkit-
Firefox: -moz-
IE:-ms-
Opera: -o-

前綴檢查器：http://cssprefixer.appspot.com/ (寫好的css貼上去會自行產生前綴)
也可用http://caniuse.com/ 按「Show all」看是否有減號(沒減號加了也沒用)

HTML5+CSS3上課筆記－ HTML

HTML5 vs HTML4

HTML4寫法	HTML5寫法
<div id="header"></div>	<header></header>
<div id="menu"></div>	<nav></nav>
<div id="content"></div>	<section></section> <article></article>
<div id="footer"></div>	<footer></footer>

HTML5常用的語意標籤：

<article>	可以獨立存在的內容，比section有更明確的語意(但沒有一定要article包section 或是相反)，代表獨立、完整的區塊。可能包含有header或footer
<section>	文件區塊
<aside>	不是頁面的主要內容區塊移掉也不影響頁面閱讀功能
<footer>	頁面或區塊的底部
<header>	頁面或區塊的頂部通常包含logo、網站標題、導覽列
<nav>	包含道覽連結的區塊
<figure>	文件中的圖片
<figcaption>	圖片說明
<video>	包含影片當及相關音樂檔、說明等
<audio>	包含聲音播放檔

以上在caniuse測試 ie9以上都可支援

其他元素列表可參考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/

如要讓ie8以下支援html5 可head中加入


  <!--[if lt IE 9]>

        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

 <![endif]-->

HTML head內容：
*CSS一定放在JS先

*<meta> 設定網頁文件相關資訊屬性有charset、content、name
<meta name="description" content"網頁描述"> (網頁描述大約70字)
<meta name="keywords" content"關鍵字a, 關鍵字b, 關鍵字c">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> (viewport給行動裝置用)：
width：指定寬度(數字或「device-width」
height：指定高度(數字或「device-height」
initial-scale：第一次進入頁面的初始比例(最小0.25 最大5)
minimum-scale：允許縮小最小比例(最小0.25 最大5)
maximum-scale：允許放大最大比例(最小0.25 最大5)
user-scalable：是否允許使用者縮放(是為1 否為0)

*網站圖示icon 不一定要ico檔也可以gif 或png size為16x16 、32x32

HTML body內容：
*每個網頁只能有一個h1

2015年2月11日

Brackets 小小小教學

可直接不存檔按右上角閃電在chrom直接預覽網頁
點選編輯中的tag或是css區塊也會在chrome中反白

Quick Edit：選定某一 Element Tag，按下「Ctrl + E」會進入 Quick Edit 的狀態
ex 1.對著class name按直接編輯其CSS
ex2.對著色碼按直接編輯色碼

快速鍵：
開關 Live File Previwer：Ctrl + Alt + P

推薦外掛：Color Picker、emmet、Html Templates

Color Picker
option+command+K 選擇顏色(可包含透明度)

emmt

1.輸入「div>p>a」按tab後自動產生「<div><p><a></a></p></div>」

2.輸入「ul>li*3」按tab後自動產生「<ul><li></li><li></li><li></li><ul>」
3.輸入「div>(header>ul>li*2>a)+footer>p」按tab後自動產生
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>

4.其他語法：http://docs.emmet.io/cheat-sheet/

Html Templates
開新檔案後，點選【Edit】就會看到HTML Template的選項在下拉選單中，就可選擇所需的HTML範本。

2015年2月10日

投影片樣阪

http://slidehunter.com/

2015年2月8日

HTML5+CSS3上課筆記－網站、工具

W3C SCHOOL

http://www.w3schools.com/

http://www.w3schools.com/html/html_form_attributes.asp (html5 input新屬性)

測試瀏覽器支援度

https://html5test.com

http://fmbip.com/

測試語法在各瀏覽器的各版本是否支援或是可否用前綴字使其支援

http://caniuse.com/

查看瀏覽器市佔率

http://gs.statcounter.com/

icon產生(但現在可用png圖檔就好不定一定要ico)

http://www.favicon.cc/

px和em的換算

http://pxtoem.com/

自動產生css前綴子

http://cssprefixer.appspot.com/

(會自動判斷哪些屬性需要加哪些browser用到的前綴子)

hex和rgb的轉換

http://hex.colorrrs.com/

css.的generator

http://css3generator.com/

圖片邊框(border-img)產生器

http://border-image.com/

(上傳圖調整用的位子)

線上壓縮png
https://tinypng.com/

css3產生漸層的語法

http://www.colorzilla.com/gradient-editor/

符號編碼轉換 (ex >→ &# 或在css用\0000 在js用 \u0000)

https://www.evotech.net/articles/testjsentities.html

google fonts

https://www.google.com/fonts

Font Awesome(作者將各種常用圖示做成字型)

http://fortawesome.github.io/Font-Awesome/

文字編輯器

Brackets (可直接不存檔在chrom直接預覽網頁)

推薦外掛：Color Picker、emmet

Color Picker可以 option+command+K 選擇顏色(可包含透明度)

emmt可以

1.輸入「div>p>a」按tab後自動產生「<div><p><a></a></p></div>」

2.輸入「ul>li*3」按tab後自動產生「<ul><li></li><li></li><li></li><ul>」

3.對著class name按command E 直接編輯其CSS

Sublime

有各種套件可下載

安裝package control (https://packagecontrol.io/installation)

View→Show Console

把網站的程式碼貼上 enter 重新啟動

之後安裝各套件方式：

1.打開Package Control (Crrl +shift +p 或 command + shift +p)

2.輸入install package→enter

3.輸入套件名→enter

推薦套件：emmet、colorpicker、html boilerplate、cssformat、livereload(要撘配chrome套件)

2015年2月6日

ORA-00955: name is already used by an existing object

表示物件名稱已被用了

要如何查出


SELECT *

FROM all_objects

WHERE object_name = 'object的名稱'


descr all_objects

Name Null Type
-------------- -------- ------------
OWNER NOT NULL VARCHAR2(30)
OBJECT_NAME NOT NULL VARCHAR2(30)
SUBOBJECT_NAME VARCHAR2(30)
OBJECT_ID NOT NULL NUMBER
DATA_OBJECT_ID NUMBER
OBJECT_TYPE VARCHAR2(19)
CREATED NOT NULL DATE
LAST_DDL_TIME NOT NULL DATE
TIMESTAMP VARCHAR2(19)
STATUS VARCHAR2(7)
TEMPORARY VARCHAR2(1)
GENERATED VARCHAR2(1)
SECONDARY VARCHAR2(1)

如果覺得要刪掉


drop  剛查到的OBJECT_TYPE   object的名稱;

2015年2月5日

[ORACLE] 檢視user現在對表有哪些權限

以帳號登入(非sysdba)


SELECT * FROM USER_TAB_PRIVS;


descr USER_TAB_PRIVS

Name Null Type
---------- ---- -------------
GRANTEE VARCHAR2(128) ←被grant的對象
OWNER VARCHAR2(128) ←table_name真正的owner
TABLE_NAME VARCHAR2(128)
GRANTOR VARCHAR2(128)
PRIVILEGE VARCHAR2(40) ←select或insert或..........
GRANTABLE VARCHAR2(3)
HIERARCHY VARCHAR2(3)
COMMON VARCHAR2(3)
TYPE VARCHAR2(24) ←table或view或sequence或.....

2015年2月4日

中文漢字カナ假名轉換

http://dokochina.com/katakana.php

[ORACLE] create user




drop user 帳號 cascade;--可忽略 但建議使用



CREATE USER 帳號 IDENTIFIED BY 密碼

  DEFAULT TABLESPACE TABLESPACE名稱通常為USERS  TEMPORARY TABLESPACE TEMP

  PROFILE DEFAULT ACCOUNT UNLOCK;



GRANT CONNECT TO 帳號;

GRANT RESOURCE TO 帳號;

GRANT CREATE SESSION TO 帳號;

訂閱：文章 (Atom)

i-memo

2015年2月24日

Bootstrap

向量圖庫