顯示具有 CSS 標籤的文章。顯示所有文章

2018年9月7日

[CSS] 表格字體變粗變小又不想表格變大變小動來動去

用bold 會讓表格自己變大
偷吃步1


letter-spacing: -0.5px;

但我不愛這招因為感覺得出來變擠了

偷吃步2 用shadow


text-shadow: .25px 0px .1px,

-.25px 0px .1px;

2018年5月3日

[Chrome套件]CSSPeeper

可以方便看網頁裡的圖 css

https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk

https://free.com.tw/csspeeper/

2015年4月16日

HTML5+CSS3上課筆記－ CSS選擇器

型態選擇器 Type selectors	<h1> <h2> ...<div> <p>
ID選擇氣 ID selectors	使用「#」宣告一個id在同一個網頁只能出現一次
類別選擇器 Class selectors	使用「.」宣告，一個class可以在一個網頁出現多次
通用選擇器 Universal selector	使用「」，{ }所有元素套用括號內的樣式
群組選擇器 Groups of selectors	不用元素擁有同樣的屬性時可以群組設定
後代選擇器 Descendant combinator	一個元素之下的所有選擇器為後代選擇器
子選擇器 Child combinator	當b元素在a元素下一層時，則b元素為a元素的子選擇器，但若中間有其他元素插入則只是後代選擇器
同層相鄰選擇器 Adjacent sibling combinator	有同一個父親的兩個元素以「+」為連結，選擇某個特定元素之後的第一個特定元素
同層全體選擇器 General sibling combinator	有同一個父親的兩個元素以「~」為連結，選擇某個特定元素的同一層元素
偽類選擇器 Pseudo-classes	一個元素的特殊狀態，ex滑鼠移至元素上的狀態設定或一個元素中本來就存在的元素，ex第一個子元素、最後一個子元素
偽元素選擇器 Pseudo-elements	被用於指定某個元素的某部分樣式，ex某個樣式的第一個字母、第一行、或其元素之前之後插入內容
屬性選擇器 Attribute selectors	可以為擁有指定屬性的HTML元素設定樣式，不僅限於類別和ID屬性

2015年3月17日

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」看是否有減號(沒減號加了也沒用)

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套件)

2014年12月16日

CSS3 單位可以計算：calc

http://www.minwt.com/css/11583.html

EX：


width:calc(100%/3);

width:calc(600px/3)

還可以混合! 真是太貼心了


width:calc(100%/3+10px);

2014年3月26日

字數太長用css出現「...」

CSS教學－免寫程式透過CSS當字數超出範圍時，自動出現….


text-overflow : ellipsis;

2013年11月6日

用HTML5+css 讓字閃爍

雖然本人很討厭網頁字會閃來閃去...但 ...嗯...

小時候剛寫網頁就是烘培機很流行那時..會co很多js 然後有的就是會讓字閃不拉機

後來知道了css 然後有個屬性「text-decoration:blink; 」可以讓字閃

but blink這招幾乎沒browser支援了

然後js 我是完全懶的去看

然後就查到了新用法

在網頁中：


<p class="blink">這行字會閃 !!!</p>

css部份：


.blink {

    animation-duration: 1s;

    animation-name: blink;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    animation-timing-function: ease-in-out;

}

@keyframes blink {

    from {

        opacity: 1;

    }

    to {

        opacity: 0;

    }

}

這樣的效果太smooth....

所以可以再改成：


@keyframes blink {

    0% {

        opacity: 1;

    }

    80% {

        opacity: 1;

    }

    81% {

        opacity: 0;

    }

    100% {

        opacity: 0;

    }

}

EZ 吧~

參考來源：http://fredericiana.com/2012/11/04/html5-blink-tag/

2013年9月13日

區塊左右置中


.memoeDIV{ margin: 0 auto; }

2013年8月28日

不用圖片靠CSS也能背景漸層!


background: -ms-linear-gradient(top, #FFF 0%,#81D8D0 100%); /* IE10+ */

background: -webkit-linear-gradient(top, #FFF 0%,#81D8D0 100%); /* Chrome10+,Safari5.1+ */

background: -moz-linear-gradient(top, #FFF 0%, #81D8D0 100%); /* FF3.6+ */

CSS直接寫在網頁裡


<style TYPE="text/css">

<!--

@import url("rank.css");

-->

 </style>

CSS原生table屬性垂直置中

CSS:


.table-wrap {display:table; width:300px; height:300px; border:solid 1px #ccc; }



.table-cell {display:table-cell; vertical-align:middle; text-align:center;}

HTML:


<div class="table-wrap">

    <div class="table-cell">

        <div class="content">

           內容置中

        </div>

    </div>

</div>

資料來源：http://www.minwt.com/css/6694.html

垂直置中


 vertical-align:middle;

單行的處理比較ez 把 line-height 的高度設成跟外部區塊的 height 相同即可


#menuLinkL a {



text-align: center;



width:140px;



height:24px;



line-height:24px;




}

2013年8月16日

【CSS新手筆記】左欄固定，右欄佔滿剩餘空間

http://blog.darkthread.net/post-2013-07-27-css-for-taking-remain-space.aspx

2013年5月18日

CSS的換行

方法1：


white-space:normal; width:200px;

但可能無效...

方法2：


 white-space:normal;

 overflow:hidden;

 word-wrap: break-word; /*word-wrap 只有fx不支援*/

強制不換行：


div{

 white-space:nowrap;

自動換行：


div{ word-wrap: break-word;  word-break: normal; }

強制英文單詞斷行：


div{  word-break:break-all; }

參考資料：http://www.wowbox.com.tw/blog/article.asp?id=2247

CSS的上下左右順序

margin: 2pt 3pt 2pt 3pt; /*宣告四邊不同值順序為上→右→下→左*/
margin: 2pt 3pt; /*上下或左右值相同時順序為上下→右左*/

訂閱：文章 (Atom)

i-memo