CSSスタイルベース
CSS
CSS構文
CSS:Cascading Style SheetsのWebコンテンツのスタイル
p{font-size:12px; /* */
color:blue; /* */
font-weight:bold; /* */
}
：
1. ， ， 。
2. ， 。
CSS追加方法
行内スタイル:style属性で直接ラベル内に書く現在のラベルの行のみに対して機能する埋め込みスタイル:styleラベルでheadラベル内に書く現在のページに対して機能する個別ファイル:linkラベルで外部を指す個別スタイルテーブルはheadラベル内のファイルのままである.css末尾
ライン内の追加
インラインスタイル
cssコードを現在のページに埋め込むheadラベル部分headラベルにstyleラベルペア
を追加
p{font-size:12px; /* */
color:blue; /* */
font-weight:bold; /* */
}
：
1. ， ， 。
2. ， 。
CSS
CSS
ファイル
.css
style.css
p{
color:red; /* */
}
：1.htm
rel ：
：2.htm
rel ：
ファイルの の
・ページ htmlコードとスタイルcssコードが に
・メンテナンスが
・ウェブサイトのスタイルを する がある は、 cssファイルを するだけ
・ htmlドキュメント で の を できる
CSS --
・ スタイルは であり、 き である
・スタイルの は「 」
・ スタイル> め みスタイル>リンクスタイル>ブラウザのデフォルトスタイル
h3{
color：red；
text-align：left；
font-size：8pt
}
h3{
text-align:right;
font-size:20pt;
}
，h3
color：red；
text-align：right；
font-size：20pt
CSSセレクタ
ラベルセレクタ
css
html
し
カテゴリセレクタ
スタイルはカテゴリ
.
css
html
class .
IDセレクタ
css
html
id id #
カテゴリセレクタとIDセレクタの い
idで されたスタイルには があり
されたスタイルはhtmlで1 だけ する
カテゴリタイプのスタイルは、 のページ に され、 することができます
セレクタのネスト
ある を のスタイルにする
に されたspanタグ
css
html
スタイルのグローバル
css
html
スタイルのブレンド
class ，
one yellow left
id class
id
CSSスタイル(1)
と
px：
em：1em——1 2em——2
%： （ ）
red，blue，green：
rgb(x,x,x):
RGB : 0-255
：rgb(255,0,0)
：rgb(66,66,66)
：rgb（255,255,255)
rgb(x%,x%,x%):
RGB ：0%-100%
：rgb(100%,0%,0%)
rgba(x,x,x,x):
RGB ，
a ：0.0( ) 1.0( )
：rgba(255,0,0,0.5)
#rrggbb
(0-9,a-f)
：#ff0000
：#f00
テキスト
color
red：#f00, rgb(255,0,0)
letter-spacing
2px, -3px
line-height
14px, 1.5em, 120%
text-align
center, left, right, justify（ ）
text-decoration
none, overline, underline, line-through
text-indent
2em
letter-spacing
css
html
line-height
css
html
height light-height
text-align
css
html
このセクションの はcssスタイルを して に えます
css
css
text-decoration
css
html
この の はcssコードを して の に があります
この の はcssコードを して の ん に があります
この の はcssコードを して の に があります
none ， a
フォントfont
プロパティ font ですべてのフォント を する font:bold 18px ' ' font-family フォントシリーズ font-family:"HiraginoSans GB","Microsoft YaHei",sans-serif;( のフォントのカンマ りを に し、 を に します. はスペース きのフォントを します.そうでなければ しません) font-size 14px 120% font-style italic font-weight bold
CSS —— font
font
font: / フォント
font:italic bold 16 px/1.5 em' '
CSSスタイル(2)
は、まず の さと を する があります
background-color
background-image:
url("logo.jpg")
background-repeat:
repeat:(ページ にわたって を りつぶす)
repeat-x:( の のみを りつぶす)
repeat-y:( の のみを りつぶす)
no-repeat:( のみ )
background:
カラーピクチャrepeat
1px*30px bg1.jpg
div{
height:30px;
width:600px;
background:url("images/bg1.jpg")repeat-x
}
ハイパーリンク
リンクの4つの
a:link- 、アクセスされていないリンク
a:visited-ユーザーがアクセスしたリンク
a:hover-マウスポインタがリンクの にあるサスペンション
a:active-リンクがクリックされた
a: のハイパーリンクセレクタのタイプを クラスセレクタと ぶ
の でハイパーリンクを するスタイルに aラベルをスタイル として する
a:hoverはa:linkeとa:visitedの r/>a:activeはa:hoverの
love&にある があります.hate
L(link)ov(visited)e&H(hover)ate
：
CSS
a:link{
text-decoration:none;
color:#09f;/* */
}（ ， ）
a:visited{
text-decoration:none;
color:#930;/* */
}（ ， ）
a:hover{
text-decoration:underline;
color:#03c;/* */
}（ ， ）
a:active{
text-decoration:none;
color:#03c;/* */
}（ ， ）
マウスボタンでフォントを
css
a{
font-size:22px;
}
a:hover{
font-size:120%;
}
html
この の をマウスで120%
CSSスタイル(3)リストと
リスト
list-style
list-style-images
list-style-position
list-style-type
border
width
height
border-collapse
リストul リストol スタイル
list-style
リストに されるすべての は、1つの で
list-style-images
リストフラグの
list-style-position
フラグの
list-style-tpye
フラグのタイプ
に されます.
list-style-type
none タグなし disc デフォルト.マークはソリッド です. circle タグは square タグはソリッドブロック decimal タグは lower-roman ローマ (i,ii,iii,iv,v, ) upper-roman ローマ (I,II,III,IV,V, ) lower-alpha (a,b,c,d,e, ) upper-alpha (A,B,C,D,E, ) lower-Greek ギリシャ (alpha,beta,gamma) lower-latin ラテン (a,b,c,d,e, ) upper-latin ラテン (A,B,C,D,E, )
list-style-position
css
html
-
-
-
inside
-
-
-
outside
list-style-image
リスト は (1.gif)で すことができ、0 imageサブプロパティパス
list-style-image:url("images/1.jpg")を するp>
cssテーブル
のサイズ
プロパティ: width、 さheight
table{
width：500px；
height：200px；
}
の
プロパティ:border
table,td,th{
border:1px solid #eee;
}
プロパティ:border-collapse(オーバーラップ、クラッシュ)デフォルトのテーブルスタイルをマージするために されます
table{
border-collapse：collapse；
}
パリティセレクタ:nth-child(odd|even)
レンダリングデータ を てて なる odd even を
しい スタイルを すためにthラベルで に する がある があります
tr:nth-child(odd){
background-color:#EAF2D3;
}