mina-majorana
かしわざきみなの制作日記

とりあえずCSS

あ~CSSの最初の作り方みなさんどうやってるんでしょう??
まとめてみたが、ちょっとあってるか自信ない。。
これは、どなたかにもう一回きいておこっと

あーわかった。思い出した。
新規ドキュメント>ページタイプ>CSS


■セレクタタイプ
クラスなのか
タグなのか
divなのか
■名前
最初は分かりやすいようにh1から
とかでいいのでは
■定義場所
最初は(新規スタイルシートファイル)
作ったら
どのファイルに入れるのかよく考えて

作るCSSファイル名

最初から
制作するものだったらこれ入れちゃっていいかも

import.css
@import url(reset.css);
@import url(style.css);

index.html
<head>
<link href="css/import.css" rel="stylesheet" type="text/css" media="all" />
</head>

※この場合他の
スタイルシートの添付でファイル読み込んでくれる

/*--------------------------
 ブラウザの初期設定解除ファイル名
---------------------------*/
reset.css

/*--------------------------
◆汎用スタイルの設定ファイル名
---------------------------*/
style.css

/*--------------------------◆以上 以下詳細---------------------------*/


@charset "utf-8";

/*--------------------------
 ブラウザの初期設定解除
---------------------------*/
body,
h1,h2,h3,h4,h5,h6,
p,ul,ol,dl,dt,dd,li,
table,th,td,
form,select,option,input
address,pre,strong,em,iframe{
margin:0;
padding:0;
font-size:small;/*IEの文字サイズ「小」に該当するサイズです*/
}

/*◆デフォルト文字設定 */
/*【解説】文字として読ませるコンテンツが入る要素に対して、標準の
文字スタイルを設定しておきます。*/
h1,h2,h3,span,p,th,td,dt,dd,li,
select,textarea,input{
font-size:small;
color:#666666;
line-height:1.4;/*行間表示のバグ回避のため、単位はつけません。意味は140%と同じです*/
}

/*◆画像の枠線を非表示*/
/*【解説】画像にリンクを設定した時、周囲に枠線が表示されてしまうのを回避します*/
img{
border:0;
}

/*◆リストマーカーを非表示*/
/*【解説】リストタグを使って様々なデザインのメニュー項目を作成する事が多く、
その際デフォルトのマーカーは邪魔になることが多いのであらかじめ非表示にしておきます*/
ul,
ol{
list-style-type:none;
}

/*◆デフォルトリンク色の設定*/
a:link{
color:#0000ff;/*未訪問のリンク色*/
}
a:visited{
color:#0000ff;/*訪問済みのリンク色*/
}
a:hover{
color:#ff0000;/*マウスが乗った時のリンク色*/
}
a:active{
color:#ff0000;/*クリックした瞬間のリンク色*/
}


CSSスタイル

上と同じものです。まずこれはコピペで使えるんじゃないかと


body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, li, table, th, td, form, select, option, input address, pre, strong, em, iframe {
font-size: small;
margin: 0;
padding: 0;
}
h1, h2, h3, span, p, th, td, dt, dd, li, select, textarea, input {
color: ;
font-size: small;
line-height: 1.4;
}
img {
border: 0 none;
}
ul, ol {
list-style-type: none;
}
a:link {
color:#0000ff;
}
a:visited {
color:#0000ff;
}
a:hover {
color:#0000ff;
}
a:active {
color:#0000ff;
}
スポンサーサイト

Post comment

管理者にだけ表示を許可する

Trackback

trackbackURL:http://minamajorana.blog.fc2.com/tb.php/28-0a988179
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。