- PDF Free Download

CSS Taichi Kaminogoya 2007-05-26T14:00:00+09:00

design

de sign coration

デザインサイン情報をデコレーション装飾どれが重要なのかのサインメッセージ

CSS

CSS デザイン線や色でサイン情報をイイトコロに配置

CSS

{ : ;

CSS { : ;

p { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li

.section { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li

ID #memo { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li

div#memo p { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li

ol>li { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li

ol+p { color: red; body div.section h1 ol p p div#memo li strong h2 p ul li li

div[class] { color: red;

div[class] div[class=section] div[class~=section] div[class =section]

a:hover { color: red;

a:link a:visited a:hover a:active a:focus p:lang(ja) p:first child

p:first letter { color: red;

p:before p:after a:first letter a:first line

目的地までの手段

目的地までの手段最寄りの都市まであとは徒歩

目的地までの手段最寄りの都市まであとは徒歩最寄りの町まであとは徒歩

目的地までの手段最寄りの都市まであとは徒歩最寄りの町まであとは徒歩目的地の前まで

CSS

<p class= foo id= bar > </p> p { color: orange;

<p class= foo id= bar > </p> p { color: orange; p#bar { color: green;

<p class= foo id= bar > </p> p { color: orange; p#bar { color: green; p.foo { color: red;

<p class= foo id= bar > </p> p { color: orange; p#bar { color: green; p.foo { color: red; p[id=bar] { color: blue;

<p class= foo id= bar > </p> p { color: orange; p#bar { color: green; p.foo { color: red; p[id=bar] { color: blue; p bar p foo p bar id p

詳細度簡単計算表 0 1 10 100 1 10 10 合計点全称要素 class id 疑似要素疑似クラス属性

要素タイプ p { color: orange; 0 1 10 100 1 10 10 合計点全称要素 class id 疑似要素疑似クラス属性 1

要素タイプ + ID p#bar { color: green; 0 1 10 100 1 10 10 合計点全称要素 class id 疑似要素疑似クラス属性 101

要素タイプ + クラス p.foo { color: red; 0 1 10 100 1 10 10 合計点全称要素 class id 疑似要素疑似クラス属性 11

要素タイプ + 属性 p[id=bar] { color: red; 0 1 10 100 1 10 10 合計点全称要素 class id 疑似要素疑似クラス属性 11

<p class= hoge id= fuga > </p> p { color: orange; p#fuga { color: green; p.hoge { color: red; p[id=hoge] { color: blue;

<p class= hoge id= fuga > </p> 101 11 11 p { color: orange; p#fuga { color: green; p.hoge { color: red; p[id=hoge] { color: blue;

<p class= hoge id= fuga > </p> p { color: orange; 101 p#fuga { color: green; 11 p.hoge { color: red; 11 p[id=hoge] { color: blue;

3 1 2 3 CSS

Web

重要度! important 高ユーザースタイルシート! imporatnt 制作者スタイルシート! important 制作者スタイルシート Web制作者ユーザースタイルシートユーザーデフォルトスタイルシートウェブブラウザ低

photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/

DOM

body DOM div.section h1 ul p p div.section li strong h2 p ul li li

<p> <span> </span> </p> p { color: yellow;

<p> <span> </span> </p> p { color: yellow; p span { color: green;

DOM

ちょっと休憩

休憩おわり

photo by Elsie esq. http://flickr.com/photos/elsie/5136801/ http://creativecommons.org/licenses/by/3.0/

width, height margin padding border

height width

background

background background

background IE background

height width

DOCTYPE HTML CSS

padding HTML

div class= section <div class= section > <h1>heading 1</h1> <p>description</p> <div class= section > <h2>heading 2</h2> <p>description</p> </div> </div>

p { margin: 1em 13px;

p { margin: 30px 0; div { margin: 40px 0; 30px 40px <p> <div>

<p> 30px 40px p { margin: 30px 0; div { margin: 40px 0; <div>

p { margin: 30px 0; div { margin: 40px 0; 40px <p> <div>

float position: abusolute;

div { margin: 40px 0; p { margin: 20px 0; 40px 20px <div> <p>

40px 20px <div> <p> div { margin: 40px 0; p { margin: 20px 0;

div { margin: 40px 0; 40px p { margin: 20px 0; <p>

div { margin: 40px 0; p { margin: 20px 0;

div { margin: 40px 0; border: 10px solid white; p { margin: 20px 0; <div> <p>

div { margin: 40px 0; p { margin: 20px 0;

div { margin: 40px 0; padding: 1px; p { margin: 20px 0; <div> <p>

visible overflow

p { height: 0; margin: 40px 0 20px; 40px <div> 20px <p>

40px <div> 20px p { height: 0; margin: 40px 0 20px; <p>

p { height: 0; margin: 40px 0 20px; 40px <div> <p>

共有の場 Wiki スライド資料オススメドキュメントオススメページ質問

http://xrl.us/vfsm elephantism

ご質問もどうゾウ

おわり